API Caching (codesandbox#800)

* API Caching

* Remove latestSha system

* Use root domain for sending cache

* Add nullcheck for contentDocument

* Debug if query param is set

* Show more debug statements on prod

* Catch save cache error

* Add debug messages

* Only cache 30% of the sandboxes for testing

Author: CompuIves

.eslintrc

@@ -25,6 +25,7 @@
     "no-plusplus": 0,
     "no-underscore-dangle": "off",
     "no-nested-ternary": "warn",
-    "react/require-default-props": "off"
+    "react/require-default-props": "off",
+    "import/no-named-default": 0
   }
 }

packages/app/src/app/index.js

@@ -3,6 +3,7 @@ import { render } from 'react-dom';
 import { ThemeProvider } from 'styled-components';
 import { Router } from 'react-router-dom';
 import history from 'app/utils/history';
+import _debug from 'app/utils/debug';
 import VERSION from 'common/version';
 import registerServiceWorker from 'common/registerServiceWorker';
 import requirePolyfills from 'common/load-dynamic-polyfills';
@@ -16,6 +17,8 @@ import App from './pages/index';
 import './split-pane.css';
 import logError from './utils/error';
 
+const debug = _debug('cs:app');
+
 if (process.env.NODE_ENV === 'production') {
   try {
     Raven.config('https://[email protected]/155188', {
@@ -80,9 +83,11 @@ requirePolyfills().then(() => {
 
   registerServiceWorker('/service-worker.js', {
     onUpdated: () => {
+      debug('Updated SW');
       controller.getSignal('setUpdateStatus')({ status: 'available' });
     },
     onInstalled: () => {
+      debug('Installed SW');
       showNotification(
         'CodeSandbox has been installed, it now works offline!',
         'success'

packages/app/src/app/utils/debug.js

@@ -1,5 +1,8 @@
 const getDebugger = () => {
-  if (process.env.NODE_ENV === 'production') {
+  if (
+    process.env.NODE_ENV === 'production' &&
+    document.location.search.indexOf('debug') === -1
+  ) {
     // Return a debugger that will log to sentry
     return (key: string) => (message: string) => {
       if (typeof window.Raven === 'object') {

packages/app/src/sandbox/compile.js

@@ -22,6 +22,7 @@ import {
 } from './boilerplates';
 
 import loadDependencies from './npm';
+import { consumeCache, saveCache } from './eval/cache';
 import getDefinition from '../../../common/templates/index';
 
 let initializedResizeListener = false;
@@ -246,8 +247,7 @@ async function updateManager(
   if (firstLoad && newManager) {
     // We save the state of transpiled modules, and load it here again. Gives
     // faster initial loads.
-
-    await manager.load();
+    await consumeCache(manager);
   }
 
   manager.updateConfigurations(configurations);
@@ -395,16 +395,18 @@ async function compile({
 
     dispatch({ type: 'status', status: 'transpiling' });
 
+    await manager.verifyTreeTranspiled();
     await manager.preset.setup(manager);
     await manager.transpileModules(managerModuleToTranspile);
 
+    const managerTranspiledModuleToTranspile = manager.getTranspiledModule(
+      managerModuleToTranspile
+    );
+
     debug(`Transpilation time ${Date.now() - t}ms`);
 
     dispatch({ type: 'status', status: 'evaluating' });
 
-    const managerTranspiledModuleToTranspile = manager.getTranspiledModule(
-      managerModuleToTranspile
-    );
     if (!skipEval) {
       resetScreen();
 
@@ -533,7 +535,7 @@ async function compile({
       type: 'success',
     });
 
-    manager.save();
+    saveCache(sandboxId, managerModuleToTranspile, manager, firstLoad);
   } catch (e) {
     console.log('Error in sandbox:');
     console.error(e);

packages/app/src/sandbox/eval/cache.js

@@ -0,0 +1,131 @@
+// Responsible for consuming and syncing with the server/local cache
+import localforage from 'localforage';
+import _debug from 'app/utils/debug';
+import type { default as Manager } from './manager';
+
+import { SCRIPT_VERSION } from '../';
+
+const debug = _debug('cs:compiler:cache');
+
+const host = process.env.CODESANDBOX_HOST;
+
+localforage.config({
+  name: 'CodeSandboxApp',
+  storeName: 'sandboxes', // Should be alphanumeric, with underscores.
+  description:
+    'Cached transpilations of the sandboxes, for faster initialization time.',
+});
+
+// Prewarm store
+localforage.keys();
+
+function shouldSaveOnlineCache(firstRun: boolean, sandboxId: string) {
+  if (!firstRun) {
+    return false;
+  }
+
+  if (!window.__SANDBOX_DATA__) {
+    // TODO remove this check
+    return sandboxId.charCodeAt(0) < 105;
+  }
+
+  return false;
+}
+
+export async function saveCache(
+  sandboxId: string,
+  managerModuleToTranspile: any,
+  manager: Manager,
+  firstRun: boolean
+) {
+  const managerState = {
+    ...manager.serialize(),
+  };
+  managerState.entry = managerModuleToTranspile
+    ? managerModuleToTranspile.path
+    : null;
+
+  try {
+    if (process.env.NODE_ENV === 'development') {
+      debug(
+        'Saving cache of ' +
+          (JSON.stringify(managerState).length / 1024).toFixed(2) +
+          'kb to localStorage'
+      );
+    }
+    localforage.setItem(manager.id, managerState);
+  } catch (e) {
+    if (process.env.NODE_ENV === 'development') {
+      console.error(e);
+    }
+    this.clearCache();
+  }
+
+  if (shouldSaveOnlineCache(firstRun, sandboxId)) {
+    const stringifiedManagerState = JSON.stringify(managerState);
+
+    debug(
+      'Saving cache of ' +
+        (stringifiedManagerState.length / 1024).toFixed(2) +
+        'kb to CodeSandbox API'
+    );
+
+    return window
+      .fetch(`${host}/api/v1/sandboxes/${sandboxId}/cache`, {
+        method: 'POST',
+        body: JSON.stringify({
+          version: SCRIPT_VERSION,
+          data: stringifiedManagerState,
+        }),
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      })
+      .then(x => x.json())
+      .catch(e => {
+        console.error('Something went wrong while saving cache.');
+        console.error(e);
+      });
+  }
+
+  return Promise.resolve(false);
+}
+
+function findCacheToUse(cache1, cache2) {
+  if (!cache1 && !cache2) {
+    return null;
+  }
+
+  if (cache1 && !cache2) {
+    return cache1;
+  }
+
+  if (cache2 && !cache1) {
+    return cache2;
+  }
+
+  return cache2.timestamp > cache1.timestamp ? cache2 : cache1;
+}
+
+export async function consumeCache(manager: Manager) {
+  const cacheData = window.__SANDBOX_DATA__;
+  const localData = await localforage.getItem(manager.id);
+
+  const cache = findCacheToUse(cacheData && cacheData.data, localData);
+  if (cache) {
+    const version = SCRIPT_VERSION;
+
+    if (cache.version === version) {
+      debug(
+        `Loading cache from ${cache === localData ? 'localStorage' : 'API'}`,
+        cache
+      );
+
+      await manager.load(cache);
+
+      return true;
+    }
+  }
+
+  return false;
+}