New packager (codesandbox#225)

* Intermediate

* Rewrite path resolve system

* Performance rewrites

* Bundler fixes

* Dynamic dependency loading

* Allow non patrons

* Process test cases

* Fix cyclic dependencies

* Fix error reporting

Author: CompuIves

config/webpack.prod.js

@@ -196,7 +196,7 @@ module.exports = merge(commonConfig, {
           },
         },
         {
-          urlPattern: /https:\/\/d3i2v4dxqvxaq9\.cloudfront\.net/,
+          urlPattern: /https:\/\/d1jyvh0kxilfa7\.cloudfront\.net/,
           handler: 'fastest',
           options: {
             cache: {
@@ -205,6 +205,16 @@ module.exports = merge(commonConfig, {
             },
           },
         },
+        {
+          urlPattern: /^https:\/\/unpkg\.com/,
+          handler: 'cacheFirst',
+          options: {
+            cache: {
+              maxEntries: 300,
+              name: 'unpkg-dep-cache',
+            },
+          },
+        },
         {
           urlPattern: /cloudflare\.com/,
           handler: 'cacheFirst',

src/app/components/sandbox/CodeEditor/Monaco.js

@@ -15,9 +15,9 @@ import theme from 'common/theme';
 import getTemplate from 'common/templates';
 
 /* eslint-disable import/no-webpack-loader-syntax */
-import SyntaxHighlightWorker from 'worker-loader!./monaco/workers/syntax-highlighter';
-import LinterWorker from 'worker-loader!./monaco/workers/linter';
-import TypingsFetcherWorker from 'worker-loader!./monaco/workers/fetch-dependency-typings';
+import SyntaxHighlightWorker from 'worker-loader?inline!./monaco/workers/syntax-highlighter';
+import LinterWorker from 'worker-loader?inline!./monaco/workers/linter';
+import TypingsFetcherWorker from 'worker-loader?inline!./monaco/workers/fetch-dependency-typings';
 /* eslint-enable import/no-webpack-loader-syntax */
 
 import enableEmmet from './monaco/enable-emmet';
@@ -606,7 +606,9 @@ export default class CodeEditor extends React.Component<Props, State> {
     this.sizeProbeInterval = setInterval(this.resizeEditor.bind(this), 3000);
 
     if (this.props.dependencies) {
-      this.fetchDependencyTypings(this.props.dependencies, monaco);
+      setTimeout(() => {
+        this.fetchDependencyTypings(this.props.dependencies, monaco);
+      }, 5000);
     }
 
     editor.addAction({

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

@@ -259,6 +259,8 @@ export default class Preview extends React.PureComponent<Props, State> {
       template,
       hasActions: !!runActionFromPreview,
       isModuleView: !isInProjectView,
+      // TODO remove this in 2 weeks
+      experimentalPackager: preferences.newPackagerExperiment,
     });
   };
 

src/app/containers/Preferences/Experiments/Preferences.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import { preferencesSelector } from 'app/store/preferences/selectors';
+import preferencesActionCreators from 'app/store/preferences/actions';
+
+import {
+  Container,
+  PreferenceContainer,
+  PaddedPreference,
+  Description,
+} from '../styles';
+
+type Props = {
+  preferencesActions: typeof preferencesActionCreators,
+  preferences: Object,
+};
+
+const mapDispatchToProps = dispatch => ({
+  preferencesActions: bindActionCreators(preferencesActionCreators, dispatch),
+});
+const mapStateToProps = state => ({
+  preferences: preferencesSelector(state),
+});
+const Preferences = ({ preferences, preferencesActions }: Props) => {
+  const bindValue = name => ({
+    value: preferences[name],
+    setValue: value =>
+      preferencesActions.setPreference({
+        [name]: value,
+      }),
+  });
+  return (
+    <Container>
+      <PreferenceContainer>
+        <PaddedPreference
+          title="New dependency bundler"
+          type="boolean"
+          {...bindValue('newPackagerExperiment')}
+        />
+        <Description>Use the new, faster dependency bundler.</Description>
+      </PreferenceContainer>
+    </Container>
+  );
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Preferences);

src/app/containers/Preferences/Experiments/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import Preferences from './Preferences';
+import Title from '../MenuTitle';
+
+export default () => (
+  <div>
+    <Title>Experiments</Title>
+
+    <Preferences />
+  </div>
+);

src/app/containers/Preferences/index.js

@@ -9,6 +9,7 @@ import CodeIcon from 'react-icons/lib/fa/code';
 import CreditCardIcon from 'react-icons/lib/md/credit-card';
 import BrowserIcon from 'react-icons/lib/go/browser';
 import StarIcon from 'react-icons/lib/go/star';
+import FlaskIcon from 'react-icons/lib/fa/flask';
 import CodeFormatIcon from 'react-icons/lib/fa/dedent';
 import IntegrationIcon from 'react-icons/lib/md/device-hub';
 
@@ -20,6 +21,7 @@ import CodeFormatting from './CodeFormatting';
 import PaymentInfo from './PaymentInfo';
 import Integrations from './Integrations';
 import Badges from './Badges';
+import Experiments from './Experiments';
 
 const Container = styled.div`
   display: flex;
@@ -85,6 +87,11 @@ class Preferences extends React.PureComponent {
         icon: <StarIcon />,
         content: <Badges />,
       },
+      {
+        title: 'Experiments',
+        icon: <FlaskIcon />,
+        content: <Experiments />,
+      },
     ].filter(x => x);
   };
 

src/app/store/preferences/keys.js

@@ -10,3 +10,4 @@ export const fontFamily = 'settings.fontfamily';
 export const clearConsoleEnabled = 'settings.clearconsole';
 export const codeMirror = 'settings.codemirror';
 export const autoDownloadTypes = 'settings.autoDownloadTypes';
+export const newPackagerExperiment = 'settings.newPackagerExperiment';

src/app/store/preferences/reducer.js

@@ -45,6 +45,7 @@ const initialState: Preferences = Object.keys(keys).reduce(
     prettierConfig: DEFAULT_PRETTIER_CONFIG,
     codeMirror: false,
     autoDownloadTypes: true,
+    newPackagerExperiment: false,
   }
 );
 

src/app/store/preview-actions-api/actions.js

@@ -1,11 +1,15 @@
 // This executes all actions that are requested by the preview
+import resolveModule from 'common/sandbox/resolve-module';
 
 import notifActions from '../notifications/actions';
 import moduleActions from '../entities/sandboxes/modules/actions';
 import sandboxActions from '../entities/sandboxes/actions';
+import { modulesFromSandboxSelector } from '../entities/sandboxes/modules/selectors';
+import { directoriesFromSandboxSelector } from '../entities/sandboxes/directories/selectors';
+import { singleSandboxSelector } from '../entities/sandboxes/selectors';
 
 export default {
-  executeAction: action => async (dispatch: Function) => {
+  executeAction: action => async (dispatch: Function, getState: Function) => {
     switch (action.action) {
       case 'notification': {
         const { title, timeAlive, notificationType } = action;
@@ -20,10 +24,21 @@ export default {
         return dispatch(moduleActions.addCorrection(action.moduleId, action));
       }
       case 'source.module.rename': {
-        const { sandboxId, moduleId, title } = action;
-        return dispatch(
-          sandboxActions.renameModule(sandboxId, moduleId, title)
-        );
+        const { sandboxId, path, title } = action;
+
+        const sandbox = singleSandboxSelector(getState(), { id: sandboxId });
+        const modules = modulesFromSandboxSelector(getState(), { sandbox });
+        const directories = directoriesFromSandboxSelector(getState(), {
+          sandbox,
+        });
+
+        const module = resolveModule(path, modules, directories);
+        if (module) {
+          return dispatch(
+            sandboxActions.renameModule(sandboxId, module.id, title)
+          );
+        }
+        return null;
       }
       case 'source.dependencies.add': {
         const { sandboxId, dependency } = action;

src/common/types.js

@@ -158,6 +158,7 @@ export type Preferences = {
   clearConsoleEnabled: ?boolean,
   prettierConfig: Object,
   autoDownloadTypes: ?boolean,
+  newPackagerExperiment: ?boolean,
 };
 
 export type NotificationButton = {