Add svelte 3 support

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { TextOperation } from 'ot';
 import { Module } from '@codesandbox/common/lib/types';
 import getUI from '@codesandbox/common/lib/templates/configuration/ui';
-import getType from 'app/utils/get-type';
+import getType from 'app/utils/get-type.ts';
 import EntryIcons from 'app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons';
 import Tooltip from '@codesandbox/common/lib/components/Tooltip';
 import { ConfigurationFile } from '@codesandbox/common/lib/templates/configuration/types';

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

@@ -5,7 +5,8 @@ import matchSorter from 'match-sorter';
 import { getModulePath } from '@codesandbox/common/lib/sandbox/modules';
 import Input from '@codesandbox/common/lib/components/Input';
 import EntryIcons from 'app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons';
-import getType from 'app/utils/get-type';
+// eslint-disable-next-line import/extensions
+import getType from 'app/utils/get-type.ts';
 import { ESC } from '@codesandbox/common/lib/utils/keycodes';
 import {
   Container,

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

@@ -1,4 +1,5 @@
 // @flow
+// @ts-ignore
 import * as React from 'react';
 import { TextOperation } from 'ot';
 import { debounce } from 'lodash-es';
@@ -879,7 +880,6 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
 
       this.lintWorker.addEventListener('message', event => {
         const { markers, version } = event.data;
-
         requestAnimationFrame(() => {
           if (this.editor.getModel()) {
             const modelPath = this.editor.getModel().uri.path;

packages/app/src/app/components/CodeEditor/VSCode/Configuration/index.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { TextOperation } from 'ot';
 import { Module } from '@codesandbox/common/lib/types';
 import getUI from '@codesandbox/common/lib/templates/configuration/ui';
-import getType from 'app/utils/get-type';
+import getType from 'app/utils/get-type.ts';
 import EntryIcons from 'app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons';
 import theme from '@codesandbox/common/lib/theme';
 

packages/app/src/app/pages/Sandbox/Editor/Content/Tabs/ModuleTab/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import EntryIcons from 'app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons';
-import getType from 'app/utils/get-type';
+// eslint-disable-next-line import/extensions
+import getType from 'app/utils/get-type.ts';
 
 import { StyledNotSyncedIcon } from './elements';
 import { TabTitle, TabDir, StyledCloseIcon } from '../Tab/elements';

packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/VersionEntry/index.js

@@ -146,7 +146,9 @@ export default class VersionEntry extends React.PureComponent {
               }}
             >
               {versions.map(a => (
-                <option selected={a === dependencies[dependency]}>{a}</option>
+                <option key={a} selected={a === dependencies[dependency]}>
+                  {a}
+                </option>
               ))}
             </VersionSelect>
           ) : (

packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/DirectoryChildren/ModuleEntry.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { inject, observer } from 'mobx-react';
-import getType from 'app/utils/get-type';
+// eslint-disable-next-line import/extensions
+import getType from 'app/utils/get-type.ts';
 import validateTitle from '../validateTitle';
 import Entry from '../Entry';
 

packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons/GetIconURL.js

@@ -5,6 +5,7 @@ import fileSvg from '@codesandbox/common/lib/components/icons/file.svg';
 import imageSvg from '@codesandbox/common/lib/components/icons/image.svg';
 import codesandboxSvg from '@codesandbox/common/lib/components/icons/codesandbox.svg';
 import nowSvg from '@codesandbox/common/lib/components/icons/now.svg';
+import svelteSvg from '@codesandbox/common/lib/components/icons/svelte.svg';
 
 function imageExists(url) {
   return new Promise((resolve, reject) => {
@@ -38,6 +39,10 @@ async function getIconURL(type) {
       url = nowSvg;
       break;
 
+    case 'svelte':
+      url = svelteSvg;
+      break;
+
     case 'directory':
       url = folderSvg;
       break;

packages/app/src/app/pages/Sandbox/Editor/Workspace/OpenedTabs/index.js

@@ -2,7 +2,8 @@ import React from 'react';
 import { inject, observer } from 'mobx-react';
 
 import EntryIcons from 'app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons';
-import getType from 'app/utils/get-type';
+// eslint-disable-next-line import/extensions
+import getType from 'app/utils/get-type.ts';
 import { getModulePath } from '@codesandbox/common/lib/sandbox/modules';
 import { saveAllModules } from 'app/store/modules/editor/utils';
 

packages/app/src/app/store/providers/Utils/create-zip/svelte/index.js

@@ -1,16 +1,14 @@
 import type { Sandbox, Module, Directory } from '@codesandbox/common/lib/types';
 import files from 'buffer-loader!./files.zip'; // eslint-disable-line import/no-webpack-loader-syntax
-import { createFile, createPackageJSON, createDirectoryWithFiles } from '../';
+import { createFile, createDirectoryWithFiles } from '../';
 
 export default function createZip(
   zip,
   sandbox: Sandbox,
   modules: Array<Module>,
   directories: Array<Directory>
 ) {
-  return zip.loadAsync(files).then(async srcFolder => {
-    const src = srcFolder.folder('src');
-
+  return zip.loadAsync(files).then(async src => {
     await Promise.all(
       modules
         .filter(x => x.directoryShortid == null)
@@ -23,28 +21,5 @@ export default function createZip(
         .filter(x => x.directoryShortid == null)
         .map(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',
-        }
-      )
-    );
   });
 }

packages/app/src/app/utils/get-type.js → packages/app/src/app/utils/get-type.ts

@@ -1,8 +1,21 @@
-/* @flow */
 import isImage from '@codesandbox/common/lib/utils/is-image';
 
 const svgRegex = /\.svg$/;
 
+type regexCasesMap = {
+  markdown: RegExp;
+  markojs: RegExp;
+  yaml: RegExp;
+  react: RegExp;
+  reason: RegExp;
+  sass: RegExp;
+  javascript: RegExp;
+  typescript: RegExp;
+  console: RegExp;
+  git: RegExp;
+  flow: RegExp;
+}
+
 const specialCasesMap = {
   'favicon.ico': 'favicon',
   'yarn.lock': 'yarn',
@@ -32,7 +45,7 @@ const regexCasesMap = {
   flow: /^.flow/i,
 };
 
-const getKeyByValue = (object, value) =>
+const getKeyByValue = (object: regexCasesMap, value: RegExp) =>
   Object.keys(object).find(key => object[key] === value);
 
 export function getMode(title: string = '') {
@@ -54,7 +67,6 @@ export function getMode(title: string = '') {
   // TEST BASED
   const regexValues = Object.values(regexCasesMap);
   const match = regexValues.find(value =>
-    // $FlowIssue
     new RegExp(value).test(removeIgnoreTitle)
   );
 

packages/app/src/app/vscode/extensionHostWorker/bootstrappers/ext-host.ts

@@ -5,6 +5,8 @@ import DefaultWorkLoader from 'worker-loader?publicPath=/&name=dynamic-worker.[h
 import TSWorker from 'worker-loader?publicPath=/&name=typescript-worker.[hash:8].worker.js!./ts-extension';
 // @ts-ignore
 import VueWorker from 'worker-loader?publicPath=/&name=vue-worker.[hash:8].worker.js!./vue-worker';
+// @ts-ignore
+import SvelteWorker from 'worker-loader?publicPath=/&name=svelte-worker.[hash:8].worker.js!./svelte-worker';
 import { initializeAll } from '../common/global';
 
 child_process.addDefaultForkHandler(DefaultWorkLoader);
@@ -16,6 +18,10 @@ child_process.addForkHandler(
   '/extensions/octref.vetur.0.16.2/server/dist/vueServerMain.js',
   VueWorker
 );
+child_process.addForkHandler(
+  '/extensions/jamesbirtles.svelte-vscode-0.7.1/node_modules/svelte-language-server/bin/server.js',
+  SvelteWorker
+);
 
 initializeAll().then(() => {
   // Preload the TS worker for fast init

packages/app/src/app/vscode/extensionHostWorker/bootstrappers/svelte-worker.ts

@@ -0,0 +1,28 @@
+import * as child_process from 'node-services/lib/child_process';
+
+// @ts-ignore
+import SubWorkLoader from 'worker-loader?publicPath=/&name=sub-dynamic-worker.[hash:8].worker.js!./generic-2';
+import { initializeAll } from '../common/global';
+import { EXTENSIONS_LOCATION } from '../../constants';
+declare var __DEV__: boolean;
+
+child_process.addDefaultForkHandler(SubWorkLoader);
+
+initializeAll().then(async () => {
+  // Use require so that it only starts executing the chunk with all globals specified.
+  require('../workers/generic-worker').start({
+    syncSandbox: true,
+    syncTypes: true,
+    extraMounts: {
+      '/extensions': {
+        fs: 'BundledHTTPRequest',
+        options: {
+          index: EXTENSIONS_LOCATION + '/extensions/index.json',
+          baseUrl: EXTENSIONS_LOCATION + '/extensions',
+          bundle: EXTENSIONS_LOCATION + '/bundles/svelte.0.7.1.min.json',
+          logReads: __DEV__,
+        },
+      },
+    },
+  });
+});

packages/app/src/embed/components/Content/index.js

@@ -14,7 +14,8 @@ import CodeEditor from 'app/components/CodeEditor';
 import type { Editor, Settings } from 'app/components/CodeEditor/types';
 import Tab from 'app/pages/Sandbox/Editor/Content/Tabs/Tab';
 import EntryIcons from 'app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons';
-import getType from 'app/utils/get-type';
+// eslint-disable-next-line import/extensions
+import getType from 'app/utils/get-type.ts';
 
 import getTemplate from '@codesandbox/common/lib/templates';
 

packages/app/src/embed/components/Files/index.js

@@ -6,7 +6,8 @@ import { sortBy } from 'lodash-es';
 import type { Module, Directory } from '@codesandbox/common/lib/types';
 
 import { isMainModule } from '@codesandbox/common/lib/sandbox/modules';
-import getType from 'app/utils/get-type';
+// eslint-disable-next-line import/extensions
+import getType from 'app/utils/get-type.ts';
 
 import File from '../File';
 

packages/app/src/sandbox/eval/errors/module-warning.js

@@ -15,6 +15,18 @@ export default class ModuleWarning extends Error {
     this.source = warning.source;
   }
 
+  serialize(): WarningStructure {
+    return {
+      name: 'ModuleWarning',
+      message: this.message,
+      fileName: this.path,
+      lineNumber: this.lineNumber,
+      columnNumber: this.columnNumber,
+      source: this.source,
+      severity: this.severity,
+    };
+  }
+
   path: string;
   message: string;
   warning: string;

packages/app/src/sandbox/eval/presets/svelte/index.js

@@ -5,16 +5,29 @@ import svelteTranspiler from '../../transpilers/svelte';
 
 import Preset from '../';
 
+const babelOptions = {
+  isV7: true,
+  config: {
+    presets: [],
+    plugins: [],
+  },
+};
+
 export default function initialize() {
-  const sveltePreset = new Preset('svelte', ['js', 'jsx'], {});
+  const sveltePreset = new Preset('svelte', ['js', 'jsx', 'svelte'], {});
 
   sveltePreset.registerTranspiler(module => /\.jsx?$/.test(module.path), [
-    { transpiler: babelTranspiler },
+    { transpiler: babelTranspiler, options: babelOptions },
+  ]);
+
+  sveltePreset.registerTranspiler(module => /\.svelte$/.test(module.path), [
+    { transpiler: svelteTranspiler },
+    { transpiler: babelTranspiler, options: babelOptions },
   ]);
 
   sveltePreset.registerTranspiler(module => /\.html$/.test(module.path), [
     { transpiler: svelteTranspiler },
-    { transpiler: babelTranspiler },
+    { transpiler: babelTranspiler, options: babelOptions },
   ]);
 
   sveltePreset.registerTranspiler(module => /\.json/.test(module.path), [