Fix snowpack babel error (#38)

* Fix snowpack babel error

Snowpack released 1.2.0 which changed their babel plugin logic a bit. https://github.com/pikapkg/snowpack/pull/189/files#diff-dbcfdbbaf972e7b385fa6fcb270a59d9R60

Since we use their babel plugin, this broke our babel transform step.

Fixed by using the new `importMap` option and specifying where to look for it.

* Fix snapshots

package.json

@@ -21,7 +21,7 @@
     "glob": "^7.1.6",
     "p-limit": "^2.2.2",
     "servor": "^3.1.0",
-    "snowpack": "^1.0.5",
+    "snowpack": "1.2.0",
     "terser": "^4.6.3"
   },
   "devDependencies": {

src/index.ts

@@ -25,6 +25,7 @@ const BABEL_CONFIG = existsSync('./babel.config.js')
                   {
                       // Append .js to all src file imports
                       optionalExtensions: true,
+                      importMap: '../dist/web_modules/import-map.json',
                   },
               ],
           ],

tests/snapshot-babel-override/babel.config.js

@@ -1,12 +1,12 @@
 module.exports = {
     plugins: [
-        // You can override the babel config but you need to at least have this plugin defined.
+        // You can override the babel config but you must have this plugin defined.
         [
             'snowpack/assets/babel-plugin.js',
             {
                 // Append .js to all src file imports
                 optionalExtensions: true,
-                addVersion: true,
+                importMap: '../dist/web_modules/import-map.json',
             },
         ],
     ],

tests/snapshot-babel-override/dist/App.js

@@ -1,48 +1,48 @@
 import {
     SvelteComponent as e,
-    create_component as n,
-    destroy_component as t,
-    init as o,
-    mount_component as r,
+    create_component as t,
+    destroy_component as r,
+    init as n,
+    mount_component as o,
     noop as s,
     safe_not_equal as m,
-    transition_in as u,
-    transition_out as d,
-} from '/web_modules/svelte/internal.js?v=undefined';
-import { onMount as f } from '/web_modules/svelte/internal.js?v=undefined';
-import i from './components/Header.js';
-function l(e) {
-    let o;
-    const m = new i({});
+    transition_in as c,
+    transition_out as f,
+} from '/web_modules/svelte/internal.js?rev=e87f930cb7';
+import { onMount as l } from '/web_modules/svelte/internal.js?rev=e87f930cb7';
+import u from './components/Header.js';
+function i(e) {
+    let n;
+    const m = new u({});
     return {
         c() {
-            n(m.$$.fragment);
+            t(m.$$.fragment);
         },
-        m(e, n) {
-            r(m, e, n), (o = !0);
+        m(e, t) {
+            o(m, e, t), (n = !0);
         },
         p: s,
         i(e) {
-            o || (u(m.$$.fragment, e), (o = !0));
+            n || (c(m.$$.fragment, e), (n = !0));
         },
         o(e) {
-            d(m.$$.fragment, e), (o = !1);
+            f(m.$$.fragment, e), (n = !1);
         },
         d(e) {
-            t(m, e);
+            r(m, e);
         },
     };
 }
-function c(e) {
+function a(e) {
     return (
-        f(() => {
+        l(() => {
             console.log('mounted');
         }),
         []
     );
 }
 export default class extends e {
     constructor(e) {
-        super(), o(this, e, c, l, m, {});
+        super(), n(this, e, a, i, m, {});
     }
 }

tests/snapshot-babel-override/dist/components/Header.js

@@ -1,45 +1,45 @@
 import {
     SvelteComponent as e,
     append as t,
-    attr as n,
-    detach as s,
+    attr as s,
+    detach as n,
     element as l,
     init as r,
     insert as a,
     noop as o,
-    safe_not_equal as d,
-} from '/web_modules/svelte/internal.js?v=undefined';
-function b(e) {
-    let r, d;
+    safe_not_equal as b,
+} from '/web_modules/svelte/internal.js?rev=e87f930cb7';
+function d(e) {
+    let r, b;
     return {
         c() {
             (r = l('div')),
-                (d = l('h1')),
-                (d.textContent = `${v}`),
-                n(d, 'class', 'svelte-nwbabr'),
-                n(r, 'class', 'header svelte-nwbabr');
+                (b = l('h1')),
+                (b.textContent = `${c}`),
+                s(b, 'class', 'svelte-nwbabr'),
+                s(r, 'class', 'header svelte-nwbabr');
         },
-        m(e, n) {
-            a(e, r, n), t(r, d);
+        m(e, s) {
+            a(e, r, s), t(r, b);
         },
         p: o,
         i: o,
         o: o,
         d(e) {
-            e && s(r);
+            e && n(r);
         },
     };
 }
-const v = 'svelvetttttttt';
+const c = 'svelvetttttttt';
 export default class extends e {
     constructor(e) {
-        var n;
+        var s;
         super(),
             document.getElementById('svelte-nwbabr-style') ||
-                (((n = l('style')).id = 'svelte-nwbabr-style'),
-                (n.textContent =
+                (((s = l('style')).id = 'svelte-nwbabr-style'),
+                (s.textContent =
                     'h1.svelte-nwbabr{color:#000;font-size:70px}.header.svelte-nwbabr{max-width:800px}'),
-                t(document.head, n)),
-            r(this, e, null, b, d, {});
+                t(document.head, s)),
+            r(this, e, null, d, b, {});
     }
 }

tests/snapshot-babel-override/dist/web_modules/import-map.json

@@ -1,5 +1,5 @@
 {
   "imports": {
-    "svelte/internal": "./svelte/internal.js"
+    "svelte/internal": "./svelte/internal.js?rev=e87f930cb7"
   }
 }

tests/snapshot/dist/components/Footer/Links.js

@@ -1,31 +1,31 @@
 import {
     SvelteComponent as e,
-    detach as t,
-    element as n,
-    init as r,
+    detach as r,
+    element as t,
+    init as n,
     insert as o,
     noop as s,
     safe_not_equal as l,
-} from '/web_modules/svelte/internal.js';
+} from '/web_modules/svelte/internal.js?rev=e87f930cb7';
 function u(e) {
-    let r;
+    let n;
     return {
         c() {
-            (r = n('nav')), (r.innerHTML = '<a href="/">Home</a>');
+            (n = t('nav')), (n.innerHTML = '<a href="/">Home</a>');
         },
-        m(e, t) {
-            o(e, r, t);
+        m(e, r) {
+            o(e, n, r);
         },
         p: s,
         i: s,
         o: s,
         d(e) {
-            e && t(r);
+            e && r(n);
         },
     };
 }
 export default class extends e {
     constructor(e) {
-        super(), r(this, e, null, u, l, {});
+        super(), n(this, e, null, u, l, {});
     }
 }

tests/snapshot/dist/components/Footer/index.js

@@ -6,44 +6,44 @@ import {
     detach as o,
     element as r,
     init as l,
-    insert as i,
-    mount_component as m,
-    noop as a,
-    safe_not_equal as c,
-    space as f,
+    insert as c,
+    mount_component as f,
+    noop as i,
+    safe_not_equal as m,
+    space as a,
     transition_in as u,
     transition_out as p,
-} from '/web_modules/svelte/internal.js';
+} from '/web_modules/svelte/internal.js?rev=e87f930cb7';
 import $ from './Links.js';
 function d(t) {
-    let l, c, d, w;
-    const x = new $({});
+    let l, m, d, v;
+    const w = new $({});
     return {
         c() {
             (l = r('footer')),
-                (c = r('p')),
-                (c.textContent = `${g}`),
-                (d = f()),
-                n(x.$$.fragment);
+                (m = r('p')),
+                (m.textContent = `${g}`),
+                (d = a()),
+                n(w.$$.fragment);
         },
         m(t, n) {
-            i(t, l, n), e(l, c), e(l, d), m(x, l, null), (w = !0);
+            c(t, l, n), e(l, m), e(l, d), f(w, l, null), (v = !0);
         },
-        p: a,
+        p: i,
         i(t) {
-            w || (u(x.$$.fragment, t), (w = !0));
+            v || (u(w.$$.fragment, t), (v = !0));
         },
         o(t) {
-            p(x.$$.fragment, t), (w = !1);
+            p(w.$$.fragment, t), (v = !1);
         },
         d(t) {
-            t && o(l), s(x);
+            t && o(l), s(w);
         },
     };
 }
 const g = 'this is svelte and snowpack';
 export default class extends t {
     constructor(t) {
-        super(), l(this, t, null, d, c, {});
+        super(), l(this, t, null, d, m, {});
     }
 }

tests/snapshot/dist/components/Header.js

@@ -8,7 +8,7 @@ import {
     insert as a,
     noop as o,
     safe_not_equal as b,
-} from '/web_modules/svelte/internal.js';
+} from '/web_modules/svelte/internal.js?rev=e87f930cb7';
 function d(e) {
     let r, b;
     return {