Svelte v2

Author: Ives van Hoorne

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

@@ -1,6 +1,8 @@
 // @flow
 import SvelteWorker from 'worker-loader?publicPath=/&name=svelte-transpiler.[hash:8].worker.js!./svelte-worker.js';
 
+import semver from 'semver';
+
 import WorkerTranspiler from '../worker-transpiler';
 import { type LoaderContext } from '../../transpiled-module';
 
@@ -12,13 +14,22 @@ class SvelteTranspiler extends WorkerTranspiler {
   }
 
   doTranspilation(code: string, loaderContext: LoaderContext) {
+    const packageJSON = loaderContext.options.configurations.package;
+    const isV2 =
+      packageJSON &&
+      packageJSON.parsed &&
+      packageJSON.parsed.devDependencies &&
+      packageJSON.parsed.devDependencies.svelte &&
+      semver.satisfies(packageJSON.parsed.devDependencies.svelte, '^2.0.0');
+
     return new Promise((resolve, reject) => {
       const path = loaderContext.path;
 
       this.queueTask(
         {
           code,
           path,
+          isV2,
         },
         loaderContext._module.getId(),
         loaderContext,

packages/app/src/sandbox/eval/transpilers/svelte/svelte-worker.js

@@ -4,18 +4,52 @@ import { buildWorkerWarning } from '../utils/worker-warning-handler';
 // Allow svelte to use btoa
 self.window = self;
 
-self.importScripts(['https://unpkg.com/svelte@^1.43.1/compiler/svelte.js']);
+self.importScripts(['https://unpkg.com/svelte@^2.0.0/compiler/svelte.js']);
 
 self.postMessage('ready');
 
 declare var svelte: {
   compile: (code: string, options: Object) => { code: string },
 };
 
-self.addEventListener('message', event => {
-  const { code, path } = event.data;
+function getV2Code(code, path) {
+  const {
+    js: { code: compiledCode, map },
+  } = svelte.compile(code, {
+    filename: path,
+    dev: true,
+    cascade: false,
+    store: true,
+
+    onerror: e => {
+      self.postMessage({
+        type: 'error',
+        error: buildWorkerError(e),
+      });
+    },
+
+    onwarn: w => {
+      self.postMessage({
+        type: 'warning',
+        warning: buildWorkerWarning(
+          {
+            fileName: w.fileName,
+            lineNumber: w.loc && w.loc.line,
+            columnNumber: w.loc && w.loc.column,
+            message: w.message,
+          },
+          'svelte'
+        ),
+      });
+    },
+  });
 
-  const { code: compiledCode, map } = svelte.compile(code, {
+  return { code: compiledCode, map };
+}
+
+function getV1Code(code, path) {
+  self.importScripts(['https://unpkg.com/svelte@^1.43.1/compiler/svelte.js']);
+  return svelte.compile(code, {
     filename: path,
     dev: true,
     cascade: false,
@@ -43,6 +77,14 @@ self.addEventListener('message', event => {
       });
     },
   });
+}
+
+self.addEventListener('message', event => {
+  const { code, path, isV2 } = event.data;
+
+  const { code: compiledCode, map } = isV2
+    ? getV2Code(code, path)
+    : getV1Code(code, path);
 
   const withInlineSourcemap = `${compiledCode}
   //# sourceMappingURL=${map.toUrl()}`;

packages/app/src/sandbox/eval/transpilers/svelte/svelte2-worker.js

@@ -0,0 +1,56 @@
+import { buildWorkerError } from '../utils/worker-error-handler';
+import { buildWorkerWarning } from '../utils/worker-warning-handler';
+
+// Allow svelte to use btoa
+self.window = self;
+
+self.importScripts('https://unpkg.com/svelte@^2.0.0/compiler/svelte.js');
+
+self.postMessage('ready');
+
+declare var svelte: {
+  compile: (code: string, options: Object) => { code: string },
+};
+
+self.addEventListener('message', event => {
+  const { code, path } = event.data;
+
+  const {
+    js: { code: compiledCode, map },
+  } = svelte.compile(code, {
+    filename: path,
+    dev: true,
+    cascade: false,
+    store: true,
+
+    onerror: e => {
+      self.postMessage({
+        type: 'error',
+        error: buildWorkerError(e),
+      });
+    },
+
+    onwarn: w => {
+      self.postMessage({
+        type: 'warning',
+        warning: buildWorkerWarning(
+          {
+            fileName: w.fileName,
+            lineNumber: w.loc && w.loc.line,
+            columnNumber: w.loc && w.loc.column,
+            message: w.message,
+          },
+          'svelte'
+        ),
+      });
+    },
+  });
+
+  const withInlineSourcemap = `${compiledCode}
+  //# sourceMappingURL=${map.toUrl()}`;
+
+  self.postMessage({
+    type: 'result',
+    transpiledCode: withInlineSourcemap,
+  });
+});