Custom template (codesandbox#854)

* Custom template

* Bump

* Reset compilation when config of modules change

* Fix null sandpackconfig

* Remove double setup

* Bump

* Make optimization of cache optional

* Bump

* Don't save cache on smoosh

* BUMP

* Add module mockgp

* Version bump

* Fix package json version resolving

* Bump

* mock modulke

* Fix module

* Bump to 0.0.45

* Fix typing problem

* Fix new build step

* Version bump

* Remove console.log

* Bump version

* Async file resolving

* Remote messaging system

* Add remote file resolving

* Bump version

* Remove comments

* Allow dynamic import in ESModule dependencies

* Also add dynamic syntax to parser opts

* Fix custom template resetting for new manager

* Bump

* Bump

* Upgrade codesandbox-api

* Fix typings

* Fix getCodeSandboxURL

* Bump version

* Fix merge conflict

* Add babel transpiler

* New version bump

* Update locks

* Publish new codesandbox-api

* Bump sandpack

* Update codesandbox-api

* Add button for disabling button

* Add option to manager

* Bump

* Rename vscode-editor

* Disable shadows altogether in SSE loading screen

Author: CompuIves

packages/app/config/webpack.common.js

@@ -326,7 +326,7 @@ module.exports = {
       ? [
           new HtmlWebpackPlugin({
             inject: true,
-            chunks: ['sandbox-startup', 'sandbox'],
+            chunks: ['sandbox-startup', 'vendors~sandbox', 'sandbox'],
             filename: 'frame.html',
             template: paths.sandboxHtml,
             minify: __PROD__ && {

packages/app/package.json

@@ -143,7 +143,7 @@
     "cerebral": "^4.0.0",
     "circular-json": "^0.4.0",
     "codemirror": "^5.27.4",
-    "codesandbox-api": "^0.0.18",
+    "codesandbox-api": "^0.0.20",
     "codesandbox-import-utils": "1.3.5",
     "color": "^0.11.4",
     "compare-versions": "^3.1.0",

packages/app/src/app/store/actions.js

@@ -9,7 +9,10 @@ import { mainModule, defaultOpenedModule } from './utils/main-module';
 export function getSandbox({ props, api, path }) {
   return api
     .get(`/sandboxes/${props.id}`)
-    .then(data => path.success({ sandbox: data }))
+    .then(data => {
+      // data.template = 'custom';
+      return path.success({ sandbox: data });
+    })
     .catch(error => {
       if (error.response.status === 404) {
         return path.notFound();

packages/app/src/sandbox/compile.js

@@ -193,6 +193,7 @@ const PREINSTALLED_DEPENDENCIES = [
   'babel-plugin-transform-vue-jsx',
   'babel-plugin-jsx-pragmatic',
   'flow-bin',
+  ...BABEL_DEPENDENCIES,
 ];
 
 function getDependencies(parsedPackage, templateDefinition, configurations) {
@@ -250,13 +251,16 @@ function getDependencies(parsedPackage, templateDefinition, configurations) {
     }
   });
 
-  let preinstalledDependencies = PREINSTALLED_DEPENDENCIES;
-  if (templateDefinition.name !== 'babel-repl') {
-    preinstalledDependencies = [
-      ...preinstalledDependencies,
-      ...BABEL_DEPENDENCIES,
-    ];
-  }
+  const sandpackConfig =
+    (configurations.customTemplate &&
+      configurations.customTemplate.parsed &&
+      configurations.customTemplate.parsed.sandpack) ||
+    {};
+
+  const preinstalledDependencies =
+    sandpackConfig.preInstalledDependencies == null
+      ? PREINSTALLED_DEPENDENCIES
+      : sandpackConfig.preInstalledDependencies;
 
   if (templateDefinition.name === 'reason') {
     returnedDependencies = {
@@ -291,12 +295,15 @@ async function updateManager(
   managerModules,
   manifest,
   configurations,
-  isNewCombination
+  isNewCombination,
+  hasFileResolver
 ) {
   let newManager = false;
   if (!manager || manager.id !== sandboxId) {
     newManager = true;
-    manager = new Manager(sandboxId, getPreset(template), managerModules);
+    manager = new Manager(sandboxId, getPreset(template), managerModules, {
+      hasFileResolver,
+    });
   }
 
   if (isNewCombination || newManager) {
@@ -327,6 +334,8 @@ function getDocumentHeight() {
     html.scrollHeight,
     html.offsetHeight
   );
+
+  return height;
 }
 
 function sendResize() {
@@ -379,6 +388,8 @@ async function compile({
   entry,
   showOpenInCodeSandbox = false,
   skipEval = false,
+  hasFileResolver = false,
+  disableDependencyPreprocessing = false,
 }) {
   dispatch({
     type: 'start',
@@ -438,7 +449,10 @@ async function compile({
       templateDefinition,
       configurations
     );
-    const { manifest, isNewCombination } = await loadDependencies(dependencies);
+    const { manifest, isNewCombination } = await loadDependencies(
+      dependencies,
+      disableDependencyPreprocessing
+    );
 
     if (isNewCombination && !firstLoad) {
       // Just reset the whole manager if it's a new combination
@@ -449,14 +463,16 @@ async function compile({
     }
     const t = Date.now();
 
-    await updateManager(
-      sandboxId,
-      template,
-      modules,
-      manifest,
-      configurations,
-      isNewCombination
-    );
+    const updatedModules =
+      (await updateManager(
+        sandboxId,
+        template,
+        modules,
+        manifest,
+        configurations,
+        isNewCombination,
+        hasFileResolver
+      )) || [];
 
     const possibleEntries = templateDefinition.getEntries(configurations);
 
@@ -475,6 +491,8 @@ async function compile({
     const main = absolute(foundMain);
     managerModuleToTranspile = modules[main];
 
+    await manager.preset.setup(manager, updatedModules);
+
     dispatch({ type: 'status', status: 'transpiling' });
     manager.setStage('transpilation');
 
@@ -650,7 +668,7 @@ async function compile({
 
     if (manager) {
       const managerState = {
-        ...manager.serialize(),
+        ...manager.serialize(false),
       };
       delete managerState.cachedPaths;
       managerState.entry = managerModuleToTranspile

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

@@ -46,6 +46,10 @@ export async function saveCache(
   changes: number,
   firstRun: boolean
 ) {
+  if (!sandboxId) {
+    return;
+  }
+
   const managerState = {
     ...manager.serialize(),
   };

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

@@ -10,6 +10,7 @@ import {
   cxjs,
   babel,
   dojo,
+  custom,
   reason,
 } from 'common/templates';
 
@@ -24,6 +25,7 @@ import babelPreset from './presets/babel-repl';
 import cxjsPreset from './presets/cxjs';
 import reasonPreset from './presets/reason';
 import dojoPreset from './presets/dojo';
+import customPreset from './presets/custom';
 
 export default function getPreset(template: string) {
   switch (template) {
@@ -49,6 +51,8 @@ export default function getPreset(template: string) {
       return cxjsPreset();
     case dojo.name:
       return dojoPreset();
+    case custom.name:
+      return customPreset();
     default:
       return reactPreset();
   }