Add svelte 3 support (#1820)

* add svelte3 first try

* try again

* add svelte extension; update logo

* Don't compile svelte files

* ts update

* add icon

* add SOME error handling

* fix eslint?

* Update the svelte vscode extension to have LSP

* fixes from pr review

* fix older verwsins

* Svelte Improvements

- Also send warnings from compiler
- Save warnings in cache and reuse them
- Optimize the VSCode svelte extension

* Put v3 code generation on top

* Update standalone-packages/codesandbox-browserfs/src/generic/file_index.ts

Co-Authored-By: SaraVieira <[email protected]>

* add version automacially from installed version

* make svelte app downloadable and deployable

Author: SaraVieira

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';