Add/external resources (codesandbox#3)

* Add external resources

* External resources support

* Support for CSS!

* Code style

* Don't generate classnames for now

Author: CompuIves

.babelrc

@@ -1,7 +1,17 @@
 {
   "env": {
     "test": {
-      "presets": ["es2015", "react"]
+      "presets": [
+        "es2015",
+        "react"
+      ],
+      "plugins": [
+        "babel-plugin-transform-async-to-generator",
+        "babel-plugin-transform-object-rest-spread",
+        "babel-plugin-transform-class-properties",
+        "babel-plugin-transform-runtime",
+        "babel-plugin-lodash"
+      ]
     }
   }
 }

config/babel.dev.js

@@ -1,5 +1,3 @@
-const path = require('path');
-
 module.exports = {
   // Don't try to find .babelrc because we want to force this configuration.
   babelrc: false,

package.json

@@ -51,6 +51,7 @@
     "promise": "7.1.1",
     "raw-loader": "^0.5.1",
     "react-hot-loader": "^3.0.0-beta.6",
+    "react-test-renderer": "^15.4.2",
     "recursive-readdir": "^2.1.0",
     "rimraf": "^2.6.1",
     "strip-ansi": "3.0.1",
@@ -109,5 +110,11 @@
     "test": "jest --env=jsdom",
     "test:watch": "jest --watch --env=jsdom",
     "lint": "eslint src"
+  },
+  "jest": {
+    "moduleDirectories": [
+      "node_modules",
+      "src"
+    ]
   }
 }

src/app/components/buttons/Button.js

@@ -11,7 +11,7 @@ const getBackgroundColor = ({ theme, secondary, transparent, disabled }) => {
 
 const getBorder = ({ transparent, disabled, theme }) => {
   if (transparent) return `1px solid ${theme.secondary.clearer(0.5)()}`;
-  if (disabled) return 'none';
+  if (disabled) return '1px solid transparent';
   return `1px solid ${theme.secondary()};`;
 };
 

src/app/components/spacing/MarginBottom.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+export default styled.div`
+  margin-bottom: ${({ margin }) => margin || 1}rem;
+`;

src/app/pages/SandboxView/Sandbox/Editor/Content/index.js

@@ -129,6 +129,7 @@ class EditorPreview extends React.PureComponent {
           directories={directories}
           setError={moduleActions.setError}
           isInProjectView={sandbox.isInProjectView}
+          externalResources={sandbox.externalResources}
           setProjectView={sandboxActions.setProjectView}
           preferences={preferences}
         />

src/app/pages/SandboxView/Sandbox/Editor/Content/subviews/CodeEditor/index.js

@@ -90,18 +90,41 @@ export default class CodeEditor extends React.PureComponent {
       this.props.preferences !== nextProps.preferences;
   }
 
+  swapDocuments = async (
+    {
+      currentId,
+      nextId,
+      nextCode,
+      nextTitle,
+    }: {
+      currentId: string,
+      nextId: string,
+      nextCode: ?string,
+      nextTitle: string,
+    }
+  ) => {
+    if (nextId !== currentId) {
+      if (!documentCache[nextId]) {
+        const mode = await this.getMode(nextTitle);
+
+        documentCache[nextId] = new CodeMirror.Doc(nextCode || '', mode);
+      }
+      documentCache[currentId] = this.codemirror.swapDoc(documentCache[nextId]);
+    }
+  };
+
   componentWillReceiveProps(nextProps: Props) {
     const cm = this.codemirror;
     const { id: currentId, error: currentError } = this.props;
-    const { id: nextId, code: nextCode, error: nextError } = nextProps;
-    if (cm) {
-      if (nextId !== currentId) {
-        if (!documentCache[nextId]) {
-          documentCache[nextId] = new CodeMirror.Doc(nextCode || '', 'jsx');
-        }
-        documentCache[currentId] = cm.swapDoc(documentCache[nextId]);
-      }
+    const {
+      id: nextId,
+      code: nextCode,
+      error: nextError,
+      title: nextTitle,
+    } = nextProps;
 
+    if (cm) {
+      this.swapDocuments({ currentId, nextId, nextCode, nextTitle });
       handleError(cm, currentError, nextError, nextCode, nextId);
     }
   }
@@ -120,11 +143,26 @@ export default class CodeEditor extends React.PureComponent {
     }
   }
 
-  getCodeMirror = (el: Element) => {
+  getMode = async (title: string) => {
+    if (title == null) return 'jsx';
+
+    const kind = title.match(/\.([^.]*)$/);
+
+    if (kind) {
+      if (kind[1] === 'css') {
+        await System.import('codemirror/mode/css/css');
+        return 'css';
+      }
+    }
+
+    return 'jsx';
+  };
+
+  getCodeMirror = async (el: Element) => {
     const { code, id } = this.props;
     CodeMirror.commands.save = this.handleSaveCode;
-
-    documentCache[id] = new CodeMirror.Doc(code || '', 'jsx');
+    const mode = await this.getMode();
+    documentCache[id] = new CodeMirror.Doc(code || '', mode);
 
     this.codemirror = getCodeMirror(el, documentCache[id]);
 

src/app/pages/SandboxView/Sandbox/Editor/Content/subviews/Preview/index.js

@@ -37,22 +37,13 @@ const StyledFrame = styled.iframe`
   width: 100%;
 `;
 
-const LoadingDepText = styled.div`
-  position: absolute;
-  font-size: 2rem;
-  color: black;
-  text-align: center;
-  vertical-align: middle;
-  top: 50%; bottom: 0; right: 0; left: 0;
-  margin: auto;
-`;
-
 type Props = {
   sandboxId: string,
   isInProjectView: boolean,
   modules: Array<Module>,
   directories: Array<Directory>,
   bundle: Sandbox.dependencyBundle,
+  externalResources: typeof Sandbox.externalResources,
   preferences: Preferences,
   fetchBundle: (id: string) => Object,
   setProjectView: (id: string, isInProjectView: boolean) => void,
@@ -170,6 +161,7 @@ export default class Preview extends React.PureComponent {
       directories,
       bundle = {},
       module,
+      externalResources,
     } = this.props;
 
     if (bundle.manifest == null) {
@@ -190,6 +182,7 @@ export default class Preview extends React.PureComponent {
         directories,
         manifest: bundle.manifest,
         url: bundle.url,
+        externalResources,
       },
       '*'
     );

src/app/pages/SandboxView/Sandbox/Editor/Workspace/Dependencies/AddResource.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import Button from '../../../../../../components/buttons/Button';
+import WorkspaceInputContainer from '../WorkspaceInputContainer';
+
+const ButtonContainer = styled.div`
+  margin: 0.5rem 1rem;
+`;
+
+type State = {
+  name: string,
+};
+
+type Props = {
+  addResource: (resource: string) => Promise<boolean>,
+};
+
+const initialState = {
+  name: '',
+};
+
+export default class AddVersion extends React.PureComponent {
+  state = initialState;
+
+  state: State;
+  props: Props;
+
+  setName = (e: KeyboardEvent) => {
+    const name = e.target.value;
+    this.setState({ name });
+  };
+
+  addResource = async () => {
+    if (this.state.name) {
+      await this.props.addResource(this.state.name);
+      this.setState(initialState);
+    }
+  };
+
+  handleKeyUp = (e: KeyboardEvent) => {
+    if (e.keyCode === 13) {
+      // Enter
+      this.addResource();
+    }
+  };
+
+  render() {
+    const { name } = this.state;
+    const isValid = name !== '';
+    return (
+      <div style={{ position: 'relative' }}>
+        <WorkspaceInputContainer>
+          <input
+            placeholder="https://cdn.com/bootstrap.css"
+            value={name}
+            onChange={this.setName}
+            onKeyUp={this.handleKeyUp}
+          />
+        </WorkspaceInputContainer>
+        <ButtonContainer>
+          <Button disabled={!isValid} block small onClick={this.addResource}>
+            Add Resource
+          </Button>
+        </ButtonContainer>
+      </div>
+    );
+  }
+}

src/app/pages/SandboxView/Sandbox/Editor/Workspace/Dependencies/AddVersion.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import WorkspaceSubtitle from '../WorkspaceSubtitle';
 import Button from '../../../../../../components/buttons/Button';
 import WorkspaceInputContainer from '../WorkspaceInputContainer';
 
@@ -61,7 +60,6 @@ export default class AddVersion extends React.PureComponent {
     const isValid = name !== '';
     return (
       <div style={{ position: 'relative' }}>
-        <WorkspaceSubtitle>Add or change an NPM Package</WorkspaceSubtitle>
         <WorkspaceInputContainer>
           <input
             style={{ flex: 3 }}