Add boilerplate functionality for current module view

Author: Ives van Hoorne

src/app/components/sandbox/Preview/index.js

@@ -9,7 +9,6 @@ import type { Module, Sandbox, Directory } from 'common/types';
 
 import { frameUrl } from 'app/utils/url-generator';
 import { findMainModule } from 'app/store/entities/sandboxes/modules/selectors';
-import defaultBoilerplates from 'app/store/entities/sandboxes/boilerplates/default-boilerplates';
 import sandboxActionCreators from 'app/store/entities/sandboxes/actions';
 import shouldUpdate from './utils/should-update';
 
@@ -227,6 +226,7 @@ export default class Preview extends React.PureComponent {
       externalResources,
       preferences,
       dependencies,
+      isInProjectView,
       runActionFromPreview,
     } = this.props;
     if (preferences.clearConsoleEnabled) {
@@ -238,14 +238,14 @@ export default class Preview extends React.PureComponent {
     const renderedModule = this.getRenderedModule();
     this.sendMessage({
       type: 'compile',
-      boilerplates: defaultBoilerplates,
       module: renderedModule,
       changedModule: module,
       dependencies,
       modules,
       directories,
       externalResources,
       hasActions: !!runActionFromPreview,
+      isModuleView: !isInProjectView,
     });
   };
 

src/sandbox/boilerplates/default-boilerplates.js

@@ -0,0 +1,27 @@
+export const JS = {
+  id: 'js',
+  extension: '.js',
+  condition: '.jsx?$',
+  code: `
+import React from 'react';
+import { render } from 'react-dom';
+export default function(module) {
+  const node = document.createElement('div');
+  document.body.appendChild(node);
+  render(React.createElement(module.default), node);
+}
+`,
+};
+
+export const HTML = {
+  id: 'html',
+  extension: '.html',
+  condition: '.html$',
+  code: `
+export default function(module) {
+  document.body.innerHTML = module
+}
+`,
+};
+
+export default [JS, HTML];

src/sandbox/boilerplates/index.js

@@ -23,7 +23,12 @@ export function evalBoilerplates(
       type: '',
     };
 
-    const module = evalModule(fakeModule, modules, directories, externals);
+    const module = evalModule(
+      fakeModule,
+      [fakeModule, ...modules],
+      directories,
+      externals,
+    );
     return { ...boilerplate, module };
   });
 }

src/sandbox/index.js

@@ -7,7 +7,6 @@ import {
 } from 'app/store/entities/sandboxes/modules/selectors';
 
 import evalModule, { deleteCache, clearCache } from './eval';
-import NoDomChangeError from './errors/no-dom-change-error';
 import loadDependencies from './npm';
 import sendMessage, { isStandalone } from './utils/send-message';
 import host from './utils/host';
@@ -20,6 +19,7 @@ import { resetScreen } from './status-screen';
 
 import { inject, uninject } from './react-error-overlay/overlay';
 
+import defaultBoilerplates from './boilerplates/default-boilerplates';
 import {
   getBoilerplates,
   evalBoilerplates,
@@ -72,12 +72,12 @@ async function compile(message) {
   const {
     modules,
     directories,
-    boilerplates = [],
     module,
     changedModule,
     externalResources,
     dependencies,
     hasActions,
+    isModuleView = false,
   } = message.data;
   uninject();
   inject();
@@ -130,19 +130,19 @@ async function compile(message) {
     const evalled = await evalModule(module, modules, directories, externals);
     const domChanged = document.body.innerHTML !== html;
 
-    if (!domChanged && !module.title.endsWith('.html')) {
+    if (isModuleView && !domChanged && !module.title.endsWith('.html')) {
       const isReact = module.code && module.code.includes('React');
-      const functionName = evalled.default ? evalled.default.name : '';
 
       if (isReact) {
         // initiate boilerplates
-        if (
-          boilerplates.length !== 0 &&
-          getBoilerplates().length === 0 &&
-          externals != null
-        ) {
+        if (getBoilerplates().length === 0 && externals != null) {
           try {
-            evalBoilerplates(boilerplates, modules, directories, externals);
+            evalBoilerplates(
+              defaultBoilerplates,
+              modules,
+              directories,
+              externals,
+            );
           } catch (e) {
             console.log("Couldn't load all boilerplates");
           }
@@ -153,7 +153,7 @@ async function compile(message) {
           try {
             boilerplate.module.default(evalled);
           } catch (e) {
-            throw new NoDomChangeError(isReact, functionName);
+            console.error(e);
           }
         }
       }