Rewrite of bundler (codesandbox#143)

* Remove babel-standalone from vendor

* Updated rewrite

* Loader support

* Fix zip files and caching

* Preact support

* Typescript transpiling

* Add JSON to Preact

* Support for typescript dependency fetching

* Create 'Export to Preact'

* Fix wrong order in transpilation

* Fix transpilers

Author: CompuIves

config/webpack.config.js

@@ -21,6 +21,7 @@
     "babel-preset-react": "^6.24.1",
     "babel-runtime": "^6.20.0",
     "babili-webpack-plugin": "^0.1.1",
+    "buffer-loader": "^0.0.1",
     "case-sensitive-paths-webpack-plugin": "^2.0.0",
     "chalk": "1.1.3",
     "connect-history-api-fallback": "1.3.0",
@@ -70,6 +71,7 @@
     "strip-ansi": "3.0.1",
     "style-loader": "^0.18.2",
     "sw-precache-webpack-plugin": "^0.11.4",
+    "typescript": "^2.4.2",
     "url-loader": "^0.5.9",
     "webpack": "^3.5.4",
     "webpack-dev-middleware": "^1.11.0",
@@ -83,6 +85,7 @@
     "babel-helper-vue-jsx-merge-props": "^2.0.2",
     "babel-plugin-detective": "^2.0.0",
     "babel-plugin-dynamic-import-node": "^1.0.2",
+    "babel-plugin-jsx-pragmatic": "^1.0.2",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-system-import": "^1.1.5",
     "babel-plugin-system-import-transformer": "3.1.0",
@@ -91,6 +94,7 @@
     "babel-plugin-transform-remove-strict-mode": "^0.0.2",
     "babel-plugin-transform-vue-jsx": "^3.5.0",
     "babel-polyfill": "^6.23.0",
+    "babel-preset-env": "^1.6.0",
     "babel-preset-stage-0": "^6.24.1",
     "babel-standalone": "^6.25.0",
     "base64-loader": "^1.0.0",

package.json

@@ -258,7 +258,7 @@ const defaultConfig = {
     // https://github.com/benmosher/eslint-plugin-import/tree/master/docs/rules
     'import/first': 'error',
     'import/no-amd': 'error',
-    'import/no-webpack-loader-syntax': 'error',
+    'import/no-webpack-loader-syntax': 'warn',
 
     // https://github.com/yannickcr/eslint-plugin-react/tree/master/docs/rules
     'react/jsx-no-comment-textnodes': 'warn',
@@ -278,7 +278,7 @@ const defaultConfig = {
     'react/no-deprecated': 'warn',
     'react/no-direct-mutation-state': 'warn',
     'react/no-is-mounted': 'warn',
-    'react/react-in-jsx-scope': 'error',
+    // 'react/react-in-jsx-scope': 'error',
     'react/require-render-return': 'error',
     'react/style-prop-object': 'warn',
 

src/app/components/sandbox/CodeEditor/monaco/workers/linter.js

@@ -40,7 +40,7 @@ const mapStateToProps = createSelector(sandboxesSelector, sandboxes => ({
 const mapDispatchToProps = dispatch => ({
   sandboxActions: bindActionCreators(sandboxActionCreators, dispatch),
 });
-class SandboxPage extends React.PureComponent<Props, $FlowFixMeState> {
+class SandboxPage extends React.PureComponent<Props, State> {
   componentDidMount() {
     if (
       window.screen.availWidth < 800 &&

src/app/pages/Sandbox/index.js

@@ -3,7 +3,7 @@ import JSZip from 'jszip';
 import { saveAs } from 'file-saver';
 
 import type { Sandbox, Module, Directory } from 'common/types';
-import { react, vue } from 'common/templates/index';
+import { react, vue, preact } from 'common/templates/index';
 
 const CSSTag = (resource: string) =>
   `<link rel="stylesheet" type="text/css" href="${resource}" media="all">`;
@@ -22,7 +22,7 @@ export function getResourceTag(resource: string) {
 
 export function getIndexHtmlBody(modules: Array<Module>) {
   const indexHtmlModule = modules.find(
-    m => m.title === 'index.html' && m.directoryShortid == null,
+    m => m.title === 'index.html' && m.directoryShortid == null
   );
 
   if (indexHtmlModule) {
@@ -56,7 +56,7 @@ export function createPackageJSON(
   dependencies,
   devDependencies,
   scripts,
-  extra: Object,
+  extra: Object
 ) {
   const name = slugify(sandbox.title || sandbox.id);
   const version = `0.0.${sandbox.version}`;
@@ -69,18 +69,18 @@ export function createPackageJSON(
       dependencies: { ...sandbox.npmDependencies, ...dependencies },
       devDependencies,
       scripts,
-      ...(extra || {}),
+      ...(extra || {})
     },
     null,
-    '  ',
+    '  '
   );
 }
 
 export function createDirectoryWithFiles(
   modules: Array<Module>,
   directories: Array<Directory>,
   directory: Directory,
-  zip,
+  zip
 ) {
   const newZip = zip.folder(directory.title);
 
@@ -96,21 +96,27 @@ export function createDirectoryWithFiles(
 export default (async function createZip(
   sandbox: Sandbox,
   modules: Array<Module>,
-  directories: Array<Directory>,
+  directories: Array<Directory>
 ) {
   const zip = new JSZip();
 
+  let promise = null;
   if (sandbox.template === react.name) {
-    import('./create-react-app').then(generator => {
-      generator.default(zip, sandbox, modules, directories);
-    });
+    promise = import('./create-react-app').then(generator =>
+      generator.default(zip, sandbox, modules, directories)
+    );
   } else if (sandbox.template === vue.name) {
-    import('./vue-cli').then(generator => {
-      generator.default(zip, sandbox, modules, directories);
-    });
+    promise = import('./vue-cli').then(generator =>
+      generator.default(zip, sandbox, modules, directories)
+    );
+  } else if (sandbox.template === preact.name) {
+    promise = import('./preact-cli').then(generator =>
+      generator.default(zip, sandbox, modules, directories)
+    );
+  }
+  if (promise) {
+    await promise;
+    const file = await zip.generateAsync({ type: 'blob' });
+    saveAs(file, `${slugify(sandbox.title || sandbox.id)}.zip`);
   }
-
-  const file = await zip.generateAsync({ type: 'blob' });
-
-  saveAs(file, `${slugify(sandbox.title || sandbox.id)}.zip`);
 });

src/app/store/entities/sandboxes/utils/create-zip/index.js

@@ -0,0 +1,106 @@
+import type { Sandbox, Module, Directory } from 'common/types';
+
+import files from 'buffer-loader!./files.zip';
+import {
+  getResourceTag,
+  getIndexHtmlBody,
+  createPackageJSON,
+  createDirectoryWithFiles
+} from '../';
+
+const getHTML = (modules, resources) =>
+  `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <link rel="manifest" href="/manifest.json">
+    <% if (htmlWebpackPlugin.options.manifest.theme_color) { %>
+      <meta name="theme-color" content="<%= htmlWebpackPlugin.options.manifest.theme_color %>">
+    <% } %>
+    <% for (var chunk of webpack.chunks) { %>
+      <% if (chunk.names.length === 1 && chunk.names[0] === 'polyfills') continue; %>
+      <% for (var file of chunk.files) { %>
+        <% if (htmlWebpackPlugin.options.preload && file.match(/\.(js|css)$/)) { %>
+          <link rel="preload" href="<%= htmlWebpackPlugin.files.publicPath + file %>" as="<%= file.match(/\.css$/)?'style':'script' %>">
+        <% } else if (file.match(/manifest\.json$/)) { %>
+          <link rel="manifest" href="<%= htmlWebpackPlugin.files.publicPath + file %>">
+        <% } %>
+      <% } %>
+    <% } %>
+    ${resources.map(getResourceTag).join('\n')}
+  </head>
+  <body>
+    ${getIndexHtmlBody(modules)}
+    <%= htmlWebpackPlugin.options.ssr({
+      url: '/'
+    }) %>
+    <script defer src="<%= htmlWebpackPlugin.files.chunks['bundle'].entry %>"></script>
+    <script>window.fetch||document.write('<script src="<%= htmlWebpackPlugin.files.chunks["polyfills"].entry %>"><\/script>')</script>
+  </body>
+</html>
+`;
+
+export default function createZip(
+  zip,
+  sandbox: Sandbox,
+  modules: Array<Module>,
+  directories: Array<Directory>
+) {
+  const src = zip.folder('src');
+  return src.loadAsync(files).then(src => {
+    modules
+      .filter(x => x.directoryShortid == null)
+      .filter(x => x.title !== 'index.html') // This will be included in the body
+      .forEach(x => src.file(x.title, x.code));
+
+    directories
+      .filter(x => x.directoryShortid == null)
+      .forEach(x => createDirectoryWithFiles(modules, directories, x, src));
+
+    if (
+      modules.filter(
+        m => m.directoryShortid == null && m.title === 'index.html'
+      ).length ||
+      sandbox.externalResources.length
+    ) {
+      src.file('template.html', getHTML(modules, sandbox.externalResources));
+    }
+
+    zip.file(
+      'package.json',
+      createPackageJSON(
+        sandbox,
+        {},
+        {
+          eslint: '^4.5.0',
+          'eslint-config-synacor': '^1.1.0',
+          'if-env': '^1.0.0',
+          less: '^2.7.2',
+          'less-loader': '^4.0.5',
+          'node-sass': '^4.5.3',
+          'preact-cli': '^1.4.1',
+          'sass-loader': '^6.0.6',
+          stylus: '^0.54.5',
+          'stylus-loader': '^3.0.1'
+        },
+        {
+          test: 'eslint . && preact test',
+          start:
+            'if-env NODE_ENV=production && npm run -s serve || npm run -s dev',
+          build: 'preact build',
+          serve: 'preact build && preact serve',
+          dev: 'preact watch'
+        },
+        {
+          eslintConfig: {
+            extends: 'eslint-config-synacor'
+          }
+        }
+      )
+    );
+  });
+}