Add svelte 3 support

[SaraVieira]

Checlist:

• Transpile svelte 3
• Transpile default to version 3
• Update logo
• add .svelte files logo
• Add svelte vscode extension for syntax and lint
• Handle parsing errors
• Make project runnable on download
• Allow deployment to netlify (https://csb-4r00193j37.netlify.com/)
• Show lint errors in problems tab
• Change default svelte to be version 3

Testing sandbox: http://pr1820.cs.lbogdan.tk/s/4r00193j37

closes #1809

Also closes #1765 as I updated the sass loader

[CompuIves]

This is reaaally good! Some nitpicks, but perfectly implemented! Would be good to do a bit of backwards compat testing.

[lttb]

could we consider something like this?

self.importScripts(['https://unpkg.com/[email protected]']);
try {
  const explorer = cosmiconfig('svelte');
  const {config} = await explorer.search('svelte');
  if (config) ({code} = self.svelte.preprocess(code, config.preprocess));

  const { js, warnings } = self.svelte.compile(code, {
    // ...

user-side code:

svelte.config.js

const ts = require('svelte-ts-preprocess')
const sass = require('svelte-preprocess-sass')

module.exports = {
  preprocess: [ts, sass, require('./custom-preprocessor')]
}

I'm not sure that cosmiconfig will work in the browser, and maybe there are better approaches to load the config with preprocessors for codesandobx. But this kind of addition will help users set their custom svelte preprocessors (like https://github.com/ls-age/svelte-preprocess-sass or https://github.com/PaulMaly/svelte-ts-preprocess)

[SaraVieira]

Cosmic config doesn't seem to work in the browser :/
https://codesandbox.io/s/nnn2lmnkqm

This is an option we will do but I think we will need to check for the file ourselfs and get the data out

I am also not sure how these preprocessors will work in the browser. We have our own preprocessors for ts and sass and it would be great if we could use them :(

[CompuIves]

It miiiight maybe work in the worker, we mock fs there and some other utils. But there is also a valid chance that it won't work. Especially since I do this 😅 : https://github.com/CompuIves/codesandbox-client/blob/b75e9969baa73478b05f49e7d8da85b08945f5ad/packages/app/config/polyfills.js#L14

[CompuIves]

I think it makes sense to keep the simple option (maybe add some hardcoded support for sass/others) in the browser and give the option to move to a container if there is advanced configuration needed.

[lttb]

maybe, besides the hardcoded support for sass and other preprocessors, it would be useful to hardcode something like require('/svelte.config.js') too? to provide an option to also add some custom preprocessors by a user. and that would be the user's responsibility, how that preprocessors work in the browser

like,

let config;

try {
  config = require('/svelte.config.js');
} catch (e) {}

try {
  if (config) ({code} = self.svelte.preprocess(code, codesandboxPreprocessors.concat(config.preprocess || [])));

  const { js, warnings } = self.svelte.compile(code, {
    // ...

[SaraVieira]

YAY!