Convert preview-frame.js to TypeScript

css/preview-frame.css

@@ -0,0 +1,14 @@
+html, body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  display: flex;
+
+  /* This centers our sketch horizontally. */
+  justify-content: center;
+
+  /* This centers our sketch vertically. */
+  align-items: center;
+}

lib/preview-frame.ts

@@ -0,0 +1,87 @@
+require("../css/preview-frame.css");
+
+interface PreviewFrameWindow extends PreviewFrame {
+  // This is exported by p5 when it's in global mode.
+  noLoop: () => void;
+}
+
+let global = window as PreviewFrameWindow;
+
+function loadP5(version: string, cb?: () => void) {
+  let url = '//cdnjs.cloudflare.com/ajax/libs/p5.js/' + version + '/p5.js';
+  let script = document.createElement('script');
+
+  cb = cb || (() => {});
+
+  script.onload = cb;
+  script.setAttribute('src', url);
+
+  document.body.appendChild(script);
+}
+
+function LoopChecker(sketch: string, funcName: string, maxRunTime: number) {
+  let self = {
+    wasTriggered: false,
+    getLineNumber() {
+      let index = loopCheckFailureRange[0];
+      let line = 1;
+
+      for (let i = 0; i < index; i++) {
+        if (sketch[i] === '\n')
+          line++;
+      }
+
+      return line;
+    }
+  };
+  let startTime = Date.now();
+  let loopCheckFailureRange: Array<number> = null;
+
+  global[funcName] = (range: Array<number>) => {
+    if (Date.now() - startTime > maxRunTime) {
+      self.wasTriggered = true;
+      loopCheckFailureRange = range;
+      throw new Error("Loop took over " + maxRunTime + " ms to run");
+    }
+  };
+
+  setInterval(() => {
+    startTime = Date.now();
+  }, maxRunTime / 2);
+
+  return self;
+}
+
+function startSketch(sketch: string, p5version: string, maxRunTime: number,
+                     loopCheckFuncName: string,
+                     errorCb: PreviewFrameErrorReporter) {
+  let sketchScript = document.createElement('script');
+  let loopChecker = LoopChecker(sketch, loopCheckFuncName, maxRunTime);
+
+  sketchScript.textContent = sketch;
+
+  global.addEventListener('error', (e: ErrorEvent) => {
+    let message = e.message;
+    let line = undefined;
+
+    if (loopChecker.wasTriggered) {
+      message = "Your loop is taking too long to run.";
+      line = loopChecker.getLineNumber();
+    } else if (typeof(e.lineno) === 'number' &&
+              (e.filename === '' || e.filename === window.location.href)) {
+      line = e.lineno;
+    }
+
+    // p5 sketches don't actually stop looping if they throw an exception,
+    // so try to stop the sketch.
+    try { global.noLoop(); } catch (e) {}
+
+    errorCb(message, line);
+  });
+
+  document.body.appendChild(sketchScript);
+
+  loadP5(p5version);
+}
+
+global.startSketch = startSketch;

lib/preview.tsx

@@ -6,29 +6,17 @@ import LoopInserter from "./loop-inserter";
 
 const LOOP_CHECK_FUNC_NAME = '__loopCheck';
 
-interface ErrorReporter {
-  (message: string, line?: number): any
-}
-
 interface Props {
   width: number,
   content: string,
   timestamp: number,
-  onError: ErrorReporter
+  onError: PreviewFrameErrorReporter
 }
 
 interface State {
 
 }
 
-// Eventualy we might want the preview frame to exist on a separate
-// origin for security, which means that we'd have to use postMessage()
-// to communicate with it. Thus this interface needs to be asynchronous.
-interface PreviewFrameProxy extends Window {
-  startSketch: (sketch: string, p5version: string, maxRunTime: number,
-                loopCheckFuncName: string, errorCb: ErrorReporter) => any
-}
-
 export default class Preview extends React.Component<Props, State> {
   _iframe: HTMLIFrameElement
 
@@ -58,7 +46,7 @@ export default class Preview extends React.Component<Props, State> {
       // Note that this should never be called if we're already unmounted,
       // since that means the iframe will have been removed from the DOM,
       // in which case it shouldn't be emitting events anymore.
-      let frame = iframe.contentWindow as PreviewFrameProxy;
+      let frame = iframe.contentWindow as PreviewFrame;
       frame.startSketch(content, '0.4.23', 1000,
                         LOOP_CHECK_FUNC_NAME, this.props.onError);
     });

preview-frame.html

@@ -1,26 +1,6 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
-<style>
-html, body {
-  height: 100%;
-}
-
-body {
-  margin: 0;
-  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
-  display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
-  display: flex;
-
-  /* This centers our sketch horizontally. */
-  -webkit-justify-content: center;
-  justify-content: center;
-
-  /* This centers our sketch vertically. */
-  -webkit-align-items: center;
-  align-items: center;
-}
-</style>
 <title>Preview</title>
 <body>
-  <script src="static/preview-frame.js"></script>
+  <script src="preview-frame.bundle.js"></script>
 </body>

tsconfig.json

@@ -13,6 +13,7 @@
     "typings/chai/chai.d.ts",
     "test/main.tsx",
     "test/test-loop-inserter.tsx",
+    "lib/preview-frame.ts",
     "lib/falafel.ts",
     "lib/main.tsx",
     "lib/app.tsx",

typings/custom.d.ts

@@ -11,3 +11,16 @@ declare namespace Url {
 declare module "url" {
     export = Url;
 }
+
+declare interface PreviewFrameErrorReporter {
+  (message: string, line?: number): any
+}
+
+// Eventually we might want the preview frame to exist on a separate
+// origin for security, which means that we'd have to use postMessage()
+// to communicate with it. Thus this interface needs to be asynchronous.
+declare interface PreviewFrame extends Window {
+  startSketch: (sketch: string, p5version: string, maxRunTime: number,
+                loopCheckFuncName: string,
+                errorCb: PreviewFrameErrorReporter) => void
+}

webpack.config.js

@@ -1,7 +1,8 @@
 module.exports = {
   entry: {
-    main: './lib/main.tsx',
-    tests: './test/main.tsx'
+    'main': './lib/main.tsx',
+    'preview-frame': './lib/preview-frame.ts',
+    'tests': './test/main.tsx'
   },
   output: {
     filename: '[name].bundle.js'