Build pipeline for common (codesandbox#1573)

* Convert common to TypeScript

* Remove compiled folder

* Update paths

* Revert "Update paths"

This reverts commit 437355d.

* Update paths

* Build step

* Refine build pipeline

* Update yarn.lock

* Enable esModuleInterop

* Fix window reference

* Fix default import for env file

* Fix default exports in webpack

* Update paths to common

* Fix tests

* Ignore build files in tests

* Fix path to common

* Fixes

Author: CompuIves

package.json

@@ -8,7 +8,7 @@
     "build:prod": "lerna run build  --scope homepage --stream && lerna run build --scope app --stream && gulp",
     "build:embed": "lerna run build:embed --scope app --stream && gulp",
     "build:clean": "lerna run build:clean --scope app --scope homepage && rimraf www",
-    "build:deps": "lerna run build:dev --scope codesandbox-api --scope codesandbox-browserfs --scope node-services && lerna run build:dev --scope sse-hooks",
+    "build:deps": "lerna run build:dev --scope codesandbox-api --scope codesandbox-browserfs --scope node-services --scope common && lerna run build:dev --scope sse-hooks",
     "start": "yarn build:deps && lerna run start --scope app --stream",
     "start:fast": "lerna run start --scope app --stream",
     "start:vscode": "VSCODE=1 yarn start:fast & cd standalone-packages/monaco-editor && yarn simpleserver & cd standalone-packages/vscode && yarn watch",

packages/app/config/webpack.common.js

@@ -7,20 +7,20 @@ const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const HappyPack = require('happypack');
 const WatchMissingNodeModulesPlugin = require('../scripts/utils/WatchMissingNodeModulesPlugin');
-const env = require('common/config/env');
-const getHost = require('common/utils/host');
+const env = require('common/lib/config/env');
+const getHost = require('common/lib/utils/host');
 
 const babelDev = require('./babel.dev');
 const babelProd = require('./babel.prod');
 
-const NODE_ENV = JSON.parse(env['process.env.NODE_ENV']);
+const NODE_ENV = JSON.parse(env.default['process.env.NODE_ENV']);
 const SANDBOX_ONLY = !!process.env.SANDBOX_ONLY;
 const __DEV__ = NODE_ENV === 'development'; // eslint-disable-line no-underscore-dangle
 const __PROD__ = NODE_ENV === 'production'; // eslint-disable-line no-underscore-dangle
 // const __TEST__ = NODE_ENV === 'test'; // eslint-disable-line no-underscore-dangle
 const babelConfig = __DEV__ ? babelDev : babelProd;
 
-const publicPath = SANDBOX_ONLY || __DEV__ ? '/' : getHost() + '/';
+const publicPath = SANDBOX_ONLY || __DEV__ ? '/' : getHost.default() + '/';
 
 // Shim for `eslint-plugin-vue/lib/index.js`
 const ESLINT_PLUGIN_VUE_INDEX = `module.exports = {
@@ -146,7 +146,7 @@ module.exports = {
       },
       {
         test: /\.(j|t)sx?$/,
-        include: [paths.src, paths.common, /@emmetio/],
+        include: [paths.src, /@emmetio/],
         exclude: [
           /eslint\.4\.1\.0\.min\.js$/,
           /typescriptServices\.js$/,
@@ -418,7 +418,7 @@ module.exports = {
         ]),
     // Makes some environment variables available to the JS code, for example:
     // if (process.env.NODE_ENV === 'development') { ... }. See `env.js`.
-    new webpack.DefinePlugin(env),
+    new webpack.DefinePlugin(env.default),
     // Watcher doesn't work well if you mistype casing in a path so we use
     // a plugin that prints an error when you attempt to do this.
     // See https://github.com/facebookincubator/create-react-app/issues/240

packages/app/scripts/build.js

@@ -63,21 +63,29 @@ function printFileSizes(stats, previousSizeMap) {
     .toJson()
     .assets.filter(asset => /\.(js|css)$/.test(asset.name))
     .map(asset => {
-      let fileContents = fs.readFileSync(`${paths.appBuild}/${asset.name}`);
-      let size = gzipSize(fileContents);
-      let previousSize = previousSizeMap[removeFileNameHash(asset.name)];
-      let difference = getDifferenceLabel(size, previousSize);
-      return {
-        folder: path.join('build', path.dirname(asset.name)),
-        name: path.basename(asset.name),
-        size,
-        sizeLabel: filesize(size) + (difference ? ` (${difference})` : ''),
-      };
+      try {
+        let fileContents = fs.readFileSync(`${paths.appBuild}/${asset.name}`);
+        let size = gzipSize(fileContents);
+        let previousSize = previousSizeMap[removeFileNameHash(asset.name)];
+        let difference = getDifferenceLabel(size, previousSize);
+        return {
+          folder: path.join('build', path.dirname(asset.name)),
+          name: path.basename(asset.name),
+          size,
+          sizeLabel: filesize(size) + (difference ? ` (${difference})` : ''),
+        };
+      } catch (e) {
+        return {
+          folder: path.join('build', path.dirname(asset.name)),
+          name: path.basename(asset.name),
+          error: e,
+        };
+      }
     });
   assets.sort((a, b) => b.size - a.size);
   let longestSizeLabelLength = Math.max.apply(
     null,
-    assets.map(a => stripAnsi(a.sizeLabel).length)
+    assets.map(a => (a.error ? 'ERROR'.length : stripAnsi(a.sizeLabel).length))
   );
   assets.forEach(asset => {
     let sizeLabel = asset.sizeLabel;
@@ -86,11 +94,20 @@ function printFileSizes(stats, previousSizeMap) {
       let rightPadding = ' '.repeat(longestSizeLabelLength - sizeLength);
       sizeLabel += rightPadding;
     }
-    console.log(
-      `  ${sizeLabel}  ${chalk.dim(asset.folder + path.sep)}${chalk.cyan(
-        asset.name
-      )}`
-    );
+
+    if (asset.error) {
+      console.log(
+        `  ERROR  ${chalk.dim(asset.folder + path.sep)}${chalk.cyan(
+          asset.name
+        )}`
+      );
+    } else {
+      console.log(
+        `  ${sizeLabel}  ${chalk.dim(asset.folder + path.sep)}${chalk.cyan(
+          asset.name
+        )}`
+      );
+    }
   });
 }
 

packages/app/src/app/components/Button/elements.js

@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components';
 import Link from 'react-router-dom/Link';
-import theme from 'common/theme';
+import theme from 'common/lib/theme';
 
 const getBackgroundColor = ({
   theme: internalTheme,

packages/app/src/app/components/CodeEditor/CodeMirror/elements.js

@@ -1,5 +1,5 @@
 import styled, { css, keyframes } from 'styled-components';
-import theme from 'common/theme';
+import theme from 'common/lib/theme';
 
 const fadeInAnimation = keyframes`
   0%   { background-color: #374140; }

packages/app/src/app/components/CodeEditor/CodeMirror/index.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import CodeMirror from 'codemirror';
 import { withTheme } from 'styled-components';
 
-import type { ModuleError, Module } from 'common/types';
+import type { ModuleError, Module } from 'common/lib/types';
 import { getCodeMirror } from 'app/utils/codemirror';
 
 import 'codemirror/addon/dialog/dialog';

packages/app/src/app/components/CodeEditor/Configuration/index.js

@@ -1,11 +1,11 @@
 // @flow
 import React from 'react';
 import { TextOperation } from 'ot';
-import type { Module } from 'common/types';
-import getUI from 'common/templates/configuration/ui';
+import type { Module } from 'common/lib/types';
+import getUI from 'common/lib/templates/configuration/ui';
 import getType from 'app/utils/get-type';
 import EntryIcons from 'app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons';
-import Tooltip from 'common/components/Tooltip';
+import Tooltip from 'common/lib/components/Tooltip';
 
 import CodeIcon from 'react-icons/lib/md/code';
 

packages/app/src/app/components/CodeEditor/FilePath/elements.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import ChevronLeft from 'react-icons/lib/md/chevron-left';
 import ExitZen from 'react-icons/lib/md/fullscreen-exit';
-import { withTooltip } from 'common/components/Tooltip';
+import { withTooltip } from 'common/lib/components/Tooltip';
 
 export const Container = styled.div`
   background-color: rgba(0, 0, 0, 0.3);

packages/app/src/app/components/CodeEditor/FilePath/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getModulePath } from 'common/sandbox/modules';
+import { getModulePath } from 'common/lib/sandbox/modules';
 import EntryIcons from 'app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons';
 import getType from 'app/utils/get-type';
 

packages/app/src/app/components/CodeEditor/FuzzySearch/index.js

@@ -2,11 +2,11 @@ import * as React from 'react';
 import { sortBy, groupBy, flatten } from 'lodash-es';
 import Downshift from 'downshift';
 import matchSorter from 'match-sorter';
-import { getModulePath } from 'common/sandbox/modules';
-import Input from 'common/components/Input';
+import { getModulePath } from 'common/lib/sandbox/modules';
+import Input from 'common/lib/components/Input';
 import EntryIcons from 'app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons';
 import getType from 'app/utils/get-type';
-import { ESC } from 'common/utils/keycodes';
+import { ESC } from 'common/lib/utils/keycodes';
 import {
   Container,
   InputContainer,