Merge pull request #41 from toolness/autosave

Implement autosave w/ sessionStorage.

Author: toolness

lib/app.tsx

@@ -4,6 +4,7 @@ import PureComponent from "./pure-component";
 import Toolbar from "./toolbar";
 import Editor from "./editor";
 import Preview from "./preview";
+import { Autosaver } from "./autosaver";
 
 interface ErrorMessage {
   message: string,
@@ -14,6 +15,7 @@ interface AppProps {
   initialContent: string,
   previewWidth: number,
   p5version: string,
+  autosaver?: Autosaver,
   autoplay?: boolean
 }
 
@@ -51,7 +53,11 @@ export default class App extends PureComponent<AppProps, AppState> {
   }
 
   componentDidMount() {
-    if (this.props.autoplay) {
+    let autosave = this.props.autosaver && this.props.autosaver.restore();
+
+    if (autosave && autosave !== this.state.editorContent) {
+      this.setState({ editorContent: autosave });
+    } else if (this.props.autoplay) {
       this.handlePlayClick();
     }
   }
@@ -63,6 +69,7 @@ export default class App extends PureComponent<AppProps, AppState> {
       canUndo: canUndo,
       canRedo: canRedo
     });
+    this.props.autosaver.save(newValue);
   }
 
   handlePreviewError = (message: string, line?: number) => {

lib/autosaver.ts

@@ -0,0 +1,29 @@
+export interface Autosaver {
+  restore(): string,
+  save(value: string): void
+}
+
+export class SessionStorageAutosaver implements Autosaver {
+  id: string
+
+  constructor(id: string) {
+    this.id = id;
+  }
+
+  save(value: string) {
+    try {
+      window.sessionStorage[this.id] = value;
+    } catch (e) {
+      // It's likely that we ran out of storage space or are in
+      // private browsing mode or something. Regardless, autosave is
+      // a parachute, so it's regrettable but ultimately not
+      // catastrophic for us to fail here.
+
+      console.log("Autosave for " + this.id + " failed", e);
+    }
+  }
+
+  restore(): string {
+    return window.sessionStorage[this.id];
+  }
+}

lib/main.tsx

@@ -4,6 +4,7 @@ import ReactDOM = require("react-dom");
 import url = require("url");
 
 import * as defaults from "./defaults";
+import { SessionStorageAutosaver } from "./autosaver";
 import App from "./app";
 
 let defaultSketchJS = require("raw!./default-sketch.js") as string;
@@ -12,6 +13,7 @@ require("../css/style.css");
 
 function start() {
   let qs = url.parse(window.location.search, true).query;
+  let id = document.referrer + '_' + qs['id'];
   let autoplay = (qs['autoplay'] === 'on');
   let initialContent = qs['sketch'] || defaultSketchJS;
   let p5version = qs['p5version'] || defaults.P5_VERSION;
@@ -25,6 +27,7 @@ function start() {
 
   ReactDOM.render(
     <App initialContent={initialContent}
+         autosaver={new SessionStorageAutosaver(id)}
          p5version={p5version}
          previewWidth={previewWidth}
          autoplay={autoplay} />,

lib/p5-widget.ts

@@ -11,6 +11,7 @@ const IFRAME_STYLE = [
 let myScriptEl = getMyScriptEl() as HTMLScriptElement;
 let myBaseURL = getMyBaseURL(myScriptEl.src);
 let autoload = !myScriptEl.hasAttribute('data-manual');
+let nextId = 1;
 
 function getMyBaseURL(url: string) {
   return url.slice(0, -MY_FILENAME.length);
@@ -52,7 +53,10 @@ function replaceScriptWithWidget(el: HTMLScriptElement) {
   let p5version = el.getAttribute('data-p5-version');
   let autoplay = el.hasAttribute('data-autoplay');
   let url;
-  let qsArgs = ['sketch=' + encodeURIComponent(el.textContent)];
+  let qsArgs = [
+    'sketch=' + encodeURIComponent(el.textContent),
+    'id=' + encodeURIComponent(el.getAttribute('data-id'))
+  ];
   let style = IFRAME_STYLE.slice();
 
   if (!isNaN(previewWidth) && previewWidth >= 0) {
@@ -100,19 +104,28 @@ function whenVisible(el: HTMLScriptElement,
   maybeMakeVisible();
 }
 
+function lazilyReplaceScriptWithWidget(el: HTMLScriptElement) {
+  let height = getDataHeight(el);
+
+  el.style.display = 'block';
+  el.style.fontSize = '0';
+  el.style.width = '100%';
+  el.style.minHeight = height + 'px';
+  el.style.background = '#f0f0f0';
+
+  if (!el.hasAttribute('data-id')) {
+    el.setAttribute('data-id', nextId.toString());
+    nextId++;
+  }
+
+  whenVisible(el, replaceScriptWithWidget);
+}
+
 function lazilyReplaceAllScriptsWithWidget() {
   let scripts = document.querySelectorAll("script[type='text/p5']");
 
   [].slice.call(scripts).forEach((el: HTMLScriptElement) => {
-    let height = getDataHeight(el);
-
-    el.style.display = 'block';
-    el.style.fontSize = '0';
-    el.style.width = '100%';
-    el.style.minHeight = height + 'px';
-    el.style.background = '#f0f0f0';
-
-    whenVisible(el, replaceScriptWithWidget);
+    lazilyReplaceScriptWithWidget(el);
   });
 }
 
@@ -131,7 +144,7 @@ if (autoload) {
 window['p5Widget'] = {
   baseURL: myBaseURL,
   url: myBaseURL + MY_FILENAME,
-  replaceScript: replaceScriptWithWidget,
+  replaceScript: lazilyReplaceScriptWithWidget,
   replaceAll: lazilyReplaceAllScriptsWithWidget,
   defaults: defaults
 };

tsconfig.json

@@ -17,6 +17,7 @@
     "test/test-implicit-sketch.tsx",
     "lib/pure-component.tsx",
     "lib/defaults.ts",
+    "lib/autosaver.ts",
     "lib/p5-widget.ts",
     "lib/preview-frame.ts",
     "lib/falafel.ts",