Svelte support (codesandbox#197)

* Svelte support

* Add corrections to the API, support warnings

* Remove style preprocessing support (for now)

* Fix styling issues

* Remove css import transpiler

* Download support

* Specify where warnings come from, fix columns

* Fix error showing

Author: CompuIves

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

@@ -2,7 +2,13 @@
 import * as React from 'react';
 import styled from 'styled-components';
 import { debounce } from 'lodash';
-import type { Preferences, ModuleError, Module, Directory } from 'common/types';
+import type {
+  Preferences,
+  ModuleError,
+  ModuleCorrection,
+  Module,
+  Directory,
+} from 'common/types';
 import { getModulePath } from 'app/store/entities/sandboxes/modules/selectors';
 
 import theme from 'common/theme';
@@ -28,6 +34,7 @@ type State = {
 type Props = {
   code: ?string,
   errors: ?Array<ModuleError>,
+  corrections: Array<ModuleCorrection>,
   id: string,
   sandboxId: string,
   title: string,
@@ -134,12 +141,12 @@ const requireAMDModule = paths =>
 const handleError = (
   monaco,
   editor,
-  currentErrors: ?Array<ModuleError>,
-  nextErrors: ?Array<ModuleError>
+  nextErrors: ?Array<ModuleError>,
+  nextCorrections: Array<ModuleCorrection>
 ) => {
   if (!monaco) return;
   if (nextErrors && nextErrors.length > 0) {
-    const markers = nextErrors
+    const errorMarkers = nextErrors
       .map(error => {
         if (error) {
           return {
@@ -156,10 +163,41 @@ const handleError = (
       })
       .filter(x => x);
 
-    monaco.editor.setModelMarkers(editor.getModel(), 'error', markers);
+    monaco.editor.setModelMarkers(editor.getModel(), 'error', errorMarkers);
   } else {
     monaco.editor.setModelMarkers(editor.getModel(), 'error', []);
   }
+
+  if (nextCorrections.length > 0) {
+    const correctionMarkers = nextCorrections
+      .map(correction => {
+        if (correction) {
+          return {
+            severity:
+              correction.severity === 'warning'
+                ? monaco.Severity.Warning
+                : monaco.Severity.Notice,
+            startColumn: correction.column,
+            startLineNumber: correction.line,
+            endColumn: 1,
+            endLineNumber: correction.line + 1,
+            message: correction.message,
+            source: correction.source,
+          };
+        }
+
+        return null;
+      })
+      .filter(x => x);
+
+    monaco.editor.setModelMarkers(
+      editor.getModel(),
+      'correction',
+      correctionMarkers
+    );
+  } else {
+    monaco.editor.setModelMarkers(editor.getModel(), 'correction', []);
+  }
 };
 
 export default class CodeEditor extends React.PureComponent<Props, State> {
@@ -343,6 +381,7 @@ export default class CodeEditor extends React.PureComponent<Props, State> {
       nextProps.sandboxId !== this.props.sandboxId ||
       nextProps.id !== this.props.id ||
       nextProps.errors !== this.props.errors ||
+      nextProps.corrections !== this.props.corrections ||
       this.props.canSave !== nextProps.canSave ||
       this.props.preferences !== nextProps.preferences
     );
@@ -369,16 +408,13 @@ export default class CodeEditor extends React.PureComponent<Props, State> {
   };
 
   componentWillUpdate(nextProps: Props) {
-    const {
-      id: currentId,
-      sandboxId: currentSandboxId,
-      errors: currentErrors,
-    } = this.props;
+    const { id: currentId, sandboxId: currentSandboxId } = this.props;
 
     const {
       id: nextId,
       code: nextCode,
       errors: nextErrors,
+      corrections: nextCorrections,
       title: nextTitle,
       sandboxId: nextSandboxId,
     } = nextProps;
@@ -401,15 +437,7 @@ export default class CodeEditor extends React.PureComponent<Props, State> {
         nextCode,
         nextTitle,
       }).then(() => {
-        handleError(
-          this.monaco,
-          this.editor,
-          currentErrors,
-          nextErrors,
-          nextCode,
-          currentId,
-          nextId
-        );
+        handleError(this.monaco, this.editor, nextErrors, nextCorrections);
       });
     }
   }

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

@@ -162,6 +162,7 @@ class EditorPreview extends React.PureComponent<Props, State> {
           changeCode={moduleActions.setCode}
           id={currentModule.id}
           errors={currentModule.errors}
+          corrections={currentModule.corrections}
           code={currentModule.code}
           title={currentModule.title}
           canSave={currentModule.isNotSynced}

src/app/store/entities/sandboxes/modules/actions.js

@@ -7,6 +7,8 @@ export const SET_MODULE_SYNCED = 'SET_MODULE_SYNCED';
 export const SET_MODULE_ERROR = 'SET_MODULE_ERROR';
 export const CLEAR_MODULE_ERRORS = 'CLEAR_MODULE_ERRORS';
 
+export const ADD_MODULE_CORRECTION = 'ADD_MODULE_CORRECTION';
+
 export default {
   renameModule: (id: string, title: string) => ({
     type: RENAME_MODULE,
@@ -49,4 +51,31 @@ export default {
       column,
     },
   }),
+
+  addCorrection: (
+    id: string,
+    {
+      message,
+      line,
+      column,
+      severity,
+      source,
+    }: {
+      message: string,
+      line: number,
+      column: number,
+      severity: 'warning' | 'notice',
+      source: ?string,
+    }
+  ) => ({
+    id,
+    type: ADD_MODULE_CORRECTION,
+    correction: {
+      message,
+      line,
+      column,
+      severity,
+      source,
+    },
+  }),
 };

src/app/store/entities/sandboxes/modules/entity.js

@@ -35,6 +35,7 @@ export default new schema.Entity(
       return {
         ...module,
         errors: [],
+        corrections: [],
         code,
         isNotSynced,
       };

src/app/store/entities/sandboxes/modules/reducer.js

@@ -8,6 +8,7 @@ import {
   SET_CODE,
   SET_MODULE_SYNCED,
   SET_MODULE_ERROR,
+  ADD_MODULE_CORRECTION,
   CLEAR_MODULE_ERRORS,
 } from './actions';
 
@@ -21,6 +22,15 @@ function moduleReducer(module: Module, action): Module {
       return { ...module, code: action.code, isNotSynced: true };
     case SET_MODULE_SYNCED:
       return { ...module, isNotSynced: false };
+    case ADD_MODULE_CORRECTION:
+      if (!isEqual(action.correction, module.corrections[0])) {
+        return {
+          ...module,
+          corrections: [...module.corrections, action.correction],
+        };
+      }
+
+      return module;
     case SET_MODULE_ERROR: {
       if (!isEqual(action.error, module.errors[0])) {
         return { ...module, errors: [...module.errors, action.error] };
@@ -46,6 +56,7 @@ export default function reducer(
     case MOVE_MODULE:
     case SET_CODE:
     case SET_MODULE_SYNCED:
+    case ADD_MODULE_CORRECTION:
     case SET_MODULE_ERROR: {
       const module = state[action.id];
       if (module) {
@@ -57,7 +68,7 @@ export default function reducer(
       return state;
     }
     case CLEAR_MODULE_ERRORS: {
-      return mapValues(state, m => ({ ...m, errors: [] }));
+      return mapValues(state, m => ({ ...m, errors: [], corrections: [] }));
     }
     default:
       return state;

src/app/store/entities/sandboxes/utils/create-zip/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, reactTs, vue, preact } from 'common/templates/index';
+import { react, reactTs, vue, preact, svelte } from 'common/templates/index';
 
 const CSSTag = (resource: string) =>
   `<link rel="stylesheet" type="text/css" href="${resource}" media="all">`;
@@ -117,6 +117,10 @@ export default (async function createZip(
     promise = import('./preact-cli').then(generator =>
       generator.default(zip, sandbox, modules, directories)
     );
+  } else if (sandbox.template === svelte.name) {
+    promise = import('./svelte').then(generator =>
+      generator.default(zip, sandbox, modules, directories)
+    );
   }
   if (promise) {
     await promise;

src/app/store/entities/sandboxes/utils/create-zip/svelte/files.zip

@@ -0,0 +1,46 @@
+import type { Sandbox, Module, Directory } from 'common/types';
+import files from 'buffer-loader!./files.zip'; // eslint-disable-line import/no-webpack-loader-syntax
+import { createPackageJSON, createDirectoryWithFiles } from '../';
+
+export default function createZip(
+  zip,
+  sandbox: Sandbox,
+  modules: Array<Module>,
+  directories: Array<Directory>
+) {
+  return zip.loadAsync(files).then(srcFolder => {
+    const src = srcFolder.folder('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));
+
+    zip.file(
+      'package.json',
+      createPackageJSON(
+        sandbox,
+        {},
+        {
+          rollup: '^0.47.6',
+          'rollup-plugin-buble': '^0.15.0',
+          'rollup-plugin-commonjs': '^8.1.0',
+          'rollup-plugin-node-resolve': '^3.0.0',
+          'rollup-plugin-svelte': '^3.1.0',
+          'rollup-plugin-uglify': '^2.0.1',
+          'rollup-watch': '^4.3.1',
+          serve: '^6.0.6',
+        },
+        {
+          build: 'rollup -c',
+          dev: 'serve public & rollup -c -w',
+          start: 'serve public',
+        }
+      )
+    );
+  });
+}

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

@@ -16,6 +16,9 @@ export default {
       case 'show-error': {
         return dispatch(moduleActions.setError(action.moduleId, action));
       }
+      case 'show-correction': {
+        return dispatch(moduleActions.addCorrection(action.moduleId, action));
+      }
       case 'source.module.rename': {
         const { sandboxId, moduleId, title } = action;
         return dispatch(

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

@@ -23,6 +23,12 @@ export const vue = {
   color: decorateSelector(() => '#41B883'),
 };
 
+export const svelte = {
+  name: 'svelte',
+  url: 'https://github.com/sveltejs/svelte',
+  color: decorateSelector(() => '#AA1E1E'),
+};
+
 export const preact = {
   name: 'preact-cli',
   url: 'https://github.com/developit/preact-cli',
@@ -49,6 +55,8 @@ export default function getDefinition(
       return preact;
     case reactTs.name:
       return reactTs;
+    case svelte.name:
+      return svelte;
     default:
       return react;
   }