Add more share options

Author: Ives van Hoorne

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

@@ -205,38 +205,14 @@ export default class CodeEditor extends React.Component<Props, State> {
     fuzzySearchEnabled: false,
   };
 
-  syntaxWorker: Worker;
-  lintWorker: Worker;
-  typingsFetcherWorker: Worker;
+  syntaxWorker: ?Worker;
+  lintWorker: ?Worker;
+  typingsFetcherWorker: ?Worker;
   sizeProbeInterval: number;
 
-  setupWorkers = () => {
-    this.syntaxWorker = new SyntaxHighlightWorker();
-    this.lintWorker = new LinterWorker();
+  setupTypeWorker = () => {
     this.typingsFetcherWorker = new TypingsFetcherWorker();
 
-    this.lint = debounce(this.lint, 400);
-
-    this.syntaxWorker.addEventListener('message', event => {
-      const { classifications, version } = event.data;
-
-      requestAnimationFrame(() => {
-        if (version === this.editor.getModel().getVersionId()) {
-          this.updateDecorations(classifications);
-        }
-      });
-    });
-
-    this.lintWorker.addEventListener('message', event => {
-      const { markers, version } = event.data;
-
-      requestAnimationFrame(() => {
-        if (version === this.editor.getModel().getVersionId()) {
-          this.updateLintWarnings(markers);
-        }
-      });
-    });
-
     this.typingsFetcherWorker.addEventListener('message', event => {
       const { path, typings } = event.data;
 
@@ -267,6 +243,48 @@ export default class CodeEditor extends React.Component<Props, State> {
     });
   };
 
+  setupLintWorker = () => {
+    this.lintWorker = new LinterWorker();
+
+    this.lintWorker.addEventListener('message', event => {
+      const { markers, version } = event.data;
+
+      requestAnimationFrame(() => {
+        if (version === this.editor.getModel().getVersionId()) {
+          this.updateLintWarnings(markers);
+        }
+      });
+    });
+
+    this.lint = debounce(this.lint, 400);
+  };
+
+  setupSyntaxWorker = () => {
+    this.syntaxWorker = new SyntaxHighlightWorker();
+
+    this.syntaxWorker.addEventListener('message', event => {
+      const { classifications, version } = event.data;
+
+      requestAnimationFrame(() => {
+        if (version === this.editor.getModel().getVersionId()) {
+          this.updateDecorations(classifications);
+        }
+      });
+    });
+  };
+
+  setupWorkers = () => {
+    this.setupSyntaxWorker();
+
+    if (this.props.preferences.lintEnabled) {
+      this.setupLintWorker();
+    }
+
+    if (this.props.preferences.autoDownloadTypes) {
+      this.setupTypeWorker();
+    }
+  };
+
   updateDecorations = async (classifications: Array<Object>) => {
     const decorations = classifications.map(classification => ({
       range: new this.monaco.Range(
@@ -507,11 +525,13 @@ export default class CodeEditor extends React.Component<Props, State> {
   lint = async (code: string, title: string, version: string) => {
     const mode = await this.getMode(title);
     if (mode === 'javascript') {
-      this.lintWorker.postMessage({
-        code,
-        title,
-        version,
-      });
+      if (this.lintWorker) {
+        this.lintWorker.postMessage({
+          code,
+          title,
+          version,
+        });
+      }
     }
   };
 
@@ -554,7 +574,9 @@ export default class CodeEditor extends React.Component<Props, State> {
       monaco: this.monaco,
     };
 
-    this.setupWorkers();
+    requestAnimationFrame(() => {
+      this.setupWorkers();
+    });
 
     const hasNativeTypescript = this.hasNativeTypescript();
 
@@ -651,7 +673,7 @@ export default class CodeEditor extends React.Component<Props, State> {
   };
 
   fetchDependencyTypings = (dependencies: Object) => {
-    if (this.props.preferences.autoDownloadTypes) {
+    if (this.typingsFetcherWorker) {
       this.typingsFetcherWorker.postMessage({ dependencies });
     }
   };

src/app/pages/Sandbox/Editor/Content/Header/ShareView.js

@@ -155,6 +155,8 @@ class ShareView extends React.PureComponent {
     isCurrentModuleView: false,
     fontSize: 14,
     initialPath: '',
+    useCodeMirror: false,
+    enableEslint: false,
   };
 
   handleChange = e => this.setState({ message: e.target.value });
@@ -187,6 +189,8 @@ class ShareView extends React.PureComponent {
       isCurrentModuleView,
       fontSize,
       initialPath,
+      enableEslint,
+      useCodeMirror,
     } = this.state;
 
     const options = {};
@@ -216,6 +220,14 @@ class ShareView extends React.PureComponent {
       options.moduleview = 1;
     }
 
+    if (enableEslint) {
+      options.eslint = 1;
+    }
+
+    if (useCodeMirror) {
+      options.codemirror = 1;
+    }
+
     if (fontSize !== 14) {
       options.fontsize = fontSize;
     }
@@ -275,6 +287,14 @@ class ShareView extends React.PureComponent {
     this.setState({ hideNavigation });
   };
 
+  setUseCodeMirror = (useCodeMirror: boolean) => {
+    this.setState({ useCodeMirror });
+  };
+
+  setEnableEslint = (enableEslint: boolean) => {
+    this.setState({ enableEslint });
+  };
+
   setIsCurrentModuleView = (isCurrentModuleView: boolean) => {
     this.setState({ isCurrentModuleView });
   };
@@ -292,6 +312,8 @@ class ShareView extends React.PureComponent {
       isCurrentModuleView,
       fontSize,
       initialPath,
+      useCodeMirror,
+      enableEslint,
     } = this.state;
 
     const defaultModule =
@@ -328,6 +350,18 @@ class ShareView extends React.PureComponent {
                       value={hideNavigation}
                       setValue={this.setHideNavigation}
                     />
+                    <PaddedPreference
+                      title="Use CodeMirror instead of Monaco editor"
+                      type="boolean"
+                      value={useCodeMirror}
+                      setValue={this.setUseCodeMirror}
+                    />
+                    <PaddedPreference
+                      title="Enable eslint (significantly higher bundle size)"
+                      type="boolean"
+                      value={enableEslint}
+                      setValue={this.setEnableEslint}
+                    />
                     <PaddedPreference
                       title="Show current module view"
                       type="boolean"

src/common/url.js

@@ -31,6 +31,8 @@ export const getSandboxOptions = (url: string) => {
   result.hideNavigation = url.includes('hidenavigation=1');
   result.isInProjectView = !url.includes('moduleview=1');
   result.autoResize = url.includes('autoresize=1');
+  result.useCodeMirror = url.includes('codemirror=1');
+  result.enableEslint = url.includes('eslint=1');
 
   return result;
 };

src/embed/App.js

@@ -58,6 +58,8 @@ type State = {
   autoResize: boolean,
   hideNavigation: boolean,
   fontSize: number,
+  enableEslint: boolean,
+  useCodeMirror: boolean,
 };
 
 export default class App extends React.PureComponent<{}, State> {
@@ -73,6 +75,8 @@ export default class App extends React.PureComponent<{}, State> {
       autoResize,
       hideNavigation,
       fontSize,
+      enableEslint,
+      useCodeMirror,
     } = getSandboxOptions(document.location.href);
 
     this.state = {
@@ -87,6 +91,8 @@ export default class App extends React.PureComponent<{}, State> {
       sidebarOpen: false,
       autoResize,
       hideNavigation,
+      enableEslint,
+      useCodeMirror,
     };
   }
 
@@ -204,6 +210,8 @@ export default class App extends React.PureComponent<{}, State> {
             fontSize={this.state.fontSize}
             initialPath={this.state.initialPath}
             setCurrentModule={this.setCurrentModule}
+            useCodeMirror={this.state.useCodeMirror}
+            enableEslint={this.state.enableEslint}
           />
         </Container>
       </ThemeProvider>

src/embed/components/Content.js

@@ -39,6 +39,9 @@ type Props = {
   initialPath: ?string,
   setCurrentModule: (moduleId: string) => void,
   setProjectView: (id: string, isInProjectView: boolean) => any,
+  useCodeMirror: boolean,
+  enableEslint: boolean,
+  isInProjectView: boolean,
 };
 
 type State = {
@@ -159,6 +162,8 @@ export default class Content extends React.PureComponent<Props, State> {
     ...this.preferences,
     fontSize: this.props.fontSize,
     autoDownloadTypes: true,
+    lintEnabled: this.props.enableEslint,
+    codeMirror: this.props.useCodeMirror,
   });
 
   setCurrentModule = (_, moduleId) => {