working on hot reloading features

mattdesl · mattdesl · commit 00f3496a33c0 · 2018-10-07T00:41:17.000+01:00
diff --git a/examples/template.html b/examples/template.html
@@ -11,31 +11,24 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    flex-direction: row;
     flex-direction: column;
   }
 
   body {
-    display: flex;
     width: 100%;
     height: 100%;
-    justify-content: space-between;
+    display: flex;
+    justify-content: center;
     align-items: center;
     flex-direction: row;
-    margin: 0px;
+    margin: 0;
   }
 
   canvas {
     margin: auto;
     display: block;
     box-shadow: 0px 2px 12px -2px rgba(0, 0, 0, 0.15);
   }
-
-  .canvas-sketch-gui {
-    width: 256px;
-    height: 256px;
-    background: blue;
-  }
   </style>
 </head>
 <body>
diff --git a/lib/canvas-sketch.js b/lib/canvas-sketch.js
@@ -1,19 +1,36 @@
 import SketchManager from './core/SketchManager';
 import PaperSizes from './paper-sizes';
+import { getClientAPI } from './util';
+import defined from 'defined';
 
-const CACHE = 'canvas-sketch-file-cache';
+const CACHE = 'hot-id-cache';
+const runtimeCollisions = [];
 
-function cacheGet (file) {
-  window[CACHE] = window[CACHE] || {};
-  return window[CACHE][file];
+function isHotReload () {
+  const client = getClientAPI();
+  return client && client.hot;
 }
 
-function cachePut (file, data) {
-  window[CACHE] = window[CACHE] || {};
-  window[CACHE][file] = data;
+function cacheGet (id) {
+  const client = getClientAPI();
+  if (!client) return undefined;
+  client[CACHE] = client[CACHE] || {};
+  return client[CACHE][id];
 }
 
-function canvasSketch (sketch, settings = {}, file) {
+function cachePut (id, data) {
+  const client = getClientAPI();
+  if (!client) return undefined;
+  client[CACHE] = client[CACHE] || {};
+  client[CACHE][id] = data;
+}
+
+function getTimeProp (oldManager, newSettings) {
+  // Static sketches ignore the time persistency
+  return newSettings.animate ? { time: oldManager.props.time } : undefined;
+}
+
+function canvasSketch (sketch, settings = {}) {
   if (settings.p5) {
     if (settings.canvas || (settings.context && typeof settings.context !== 'string')) {
       throw new Error(`In { p5 } mode, you can't pass your own canvas or context, unless the context is a "webgl" or "2d" string`);
@@ -24,43 +41,60 @@ function canvasSketch (sketch, settings = {}, file) {
     settings = Object.assign({}, settings, { canvas: false, context });
   }
 
-  const isCaching = typeof file === 'string';
+  const isHot = isHotReload();
+  let hotID;
+  if (isHot) {
+    hotID = defined(settings.id, process.env.SKETCH_ENTRY);
+  }
+  let isInjecting = isHot && typeof hotID === 'string';
+
+  if (isInjecting && runtimeCollisions.includes(hotID)) {
+    console.warn(`Warning: You have multiple calls to canvasSketch() in --hot mode. You must pass unique { id } strings in settings to enable hot reload across multiple sketches. `, hotID);
+    isInjecting = false;
+  }
 
   let preload = Promise.resolve();
 
-  if (isCaching) {
-    const previousData = cacheGet(file);
+  if (isInjecting) {
+    // Mark this as already spotted in this runtime instance
+    runtimeCollisions.push(hotID);
+
+    const previousData = cacheGet(hotID);
     if (previousData) {
-      preload = previousData.load.then(manager => {
-        const newProps = Object.assign({}, manager.props);
-        manager.destroy();
-        return {
-          time: newProps.time
-        };
-      }).catch(() => {
-        // If an error occurred during load, we will just
-        // destroy old manager and reset props
+      const next = () => {
+        // Grab new props from old sketch instance
+        const newProps = getTimeProp(previousData.manager, settings);
+        // Destroy the old instance
         previousData.manager.destroy();
-        return null;
-      });
+        // Pass along new props
+        return newProps;
+      };
+
+      // Move along the next data...
+      preload = previousData.load.then(next).catch(next);
     }
   }
 
   return preload.then(newProps => {
     const manager = new SketchManager();
     let result;
     if (sketch) {
+      // Merge with incoming data
+      settings = Object.assign({}, settings, newProps);
+
       // Apply settings and create a canvas
       manager.setup(settings);
-      if (newProps) manager.update(newProps);
+
+      // Mount to DOM
       manager.mount();
+
       // load the sketch first
       result = manager.loadAndRun(sketch);
     } else {
       result = Promise.resolve(manager);
     }
-    if (isCaching) {
-      cachePut(file, { load: result, manager });
+    if (isInjecting) {
+      cachePut(hotID, { load: result, manager });
     }
     return result;
   });
diff --git a/lib/core/SketchManager.js b/lib/core/SketchManager.js
@@ -130,10 +130,14 @@ class SketchManager {
       console.error('[canvas-sketch] WARN: Using { animate } in Node.js is not yet supported');
       return;
     }
+    if (this.props.playing) return;
     if (!this.props.started) {
       this._signalBegin();
       this.props.started = true;
     }
+
+    // console.log('play', this.props.time)
+
     // Start a render loop
     this.props.playing = true;
     if (this._raf != null) window.cancelAnimationFrame(this._raf);
@@ -144,6 +148,8 @@ class SketchManager {
   pause () {
     if (this.props.recording) this.endRecord();
     this.props.playing = false;
+
+    // console.log('pause', this.props.time)
     if (this._raf != null && isBrowser()) window.cancelAnimationFrame(this._raf);
   }
 
@@ -717,15 +723,15 @@ class SketchManager {
     };
   }
 
-  setup (settings = {}) {
+  setup (settings = {}, overrides = {}) {
     if (this.sketch) throw new Error('Multiple setup() calls not yet supported.');
 
     this._settings = Object.assign({}, settings, this._settings);
 
     // Get initial canvas & context
     const { context, canvas } = createCanvas(this._settings);
 
-    const timeProps = this.getTimeProps(settings);
+    const timeProps = this.getTimeProps(this._settings);
 
     // Initial render state features
     this._props = {
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -55,6 +55,7 @@
     "glslify": "^6.1.1",
     "hex-rgb": "^3.0.0",
     "insert-css": "^2.0.0",
+    "lerp": "^1.0.3",
     "lineclip": "^1.1.5",
     "load-asset": "^1.2.0",
     "mkdirp": "^0.5.1",
