diff --git a/site/src/routes/repl/index.html b/site/src/routes/repl/index.html
index 8bc112ac93..57b69af147 100644
--- a/site/src/routes/repl/index.html
+++ b/site/src/routes/repl/index.html
@@ -24,7 +24,7 @@
const refs = {};
- let version = query.version || 'latest';
+ let version = query.version || 'alpha';
let components = [];
let selectedComponent;
let data = {};
diff --git a/site/static/global.css b/site/static/global.css
index a1280cfb35..4d2117da51 100644
--- a/site/static/global.css
+++ b/site/static/global.css
@@ -232,12 +232,12 @@ button > svg {
}
/* default */
-button {
+/* button {
min-height: var(--bttn-h);
line-height: var(--bttn-h);
padding: 0 1.6rem;
transition: all .1s;
-}
+} */
/* button:hover { background-image: var(--bttn-hover) }
button:active {
diff --git a/site/static/repl-worker.js b/site/static/repl-worker.js
index 6f12a478c0..7e7ba401fe 100644
--- a/site/static/repl-worker.js
+++ b/site/static/repl-worker.js
@@ -4,21 +4,27 @@ let ready = false;
let pending_components;
let pending_component;
+let version;
+
self.addEventListener('message', async event => {
switch (event.data.type) {
case 'init':
+ version = await init(event.data.version);
postMessage({
type: 'version',
- version: await init(event.data.version)
+ version
});
break;
case 'bundle':
if (ready) {
- postMessage({
- type: 'bundled',
- result: await bundle(event.data.components)
- });
+ const result = await bundle(event.data.components);
+ if (result) {
+ postMessage({
+ type: 'bundled',
+ result
+ });
+ }
} else {
pending_components = event.data.components;
}
@@ -26,9 +32,10 @@ self.addEventListener('message', async event => {
case 'compile':
if (ready) {
+ const result = await compile(event.data.component);
postMessage({
type: 'compiled',
- result: await compile(event.data.component)
+ result
});
} else {
pending_component = event.data.component;
@@ -48,23 +55,27 @@ const commonCompilerOptions = {
async function init(version) {
// TODO use local versions
importScripts(
- `https://unpkg.com/svelte@${version}/compiler/svelte.js`,
+ `https://unpkg.com/svelte@${version}/compiler.js`,
`https://unpkg.com/rollup/dist/rollup.browser.js`
);
if (pending_components) {
- postMessage({
- type: 'bundled',
- result: await bundle(pending_components)
- });
+ const result = await bundle(pending_components);
+ if (result) {
+ postMessage({
+ type: 'bundled',
+ result
+ });
+ }
pending_components = null;
}
if (pending_component) {
+ const result = await compile(pending_component);
postMessage({
type: 'compiled',
- result: await compile(pending_component)
+ result
});
pending_component = null;
@@ -81,6 +92,22 @@ let cached = {
let currentToken;
+const is_svelte_module = id => id === 'svelte' || id.startsWith('svelte/');
+
+const cache = new Map();
+function fetch_if_uncached(url) {
+ if (!cache.has(url)) {
+ cache.set(url, fetch(url)
+ .then(r => r.text())
+ .catch(err => {
+ console.error(err);
+ cache.delete(url);
+ }));
+ }
+
+ return cache.get(url);
+}
+
async function getBundle(mode, cache, lookup) {
let bundle;
let error;
@@ -92,13 +119,26 @@ async function getBundle(mode, cache, lookup) {
bundle = await rollup.rollup({
input: './App.html',
external: id => {
- return id[0] !== '.';
+ if (id[0] === '.') return false;
+ if (is_svelte_module(id)) return false;
+ if (id.startsWith('https://')) return false;
+ return true;
},
plugins: [{
resolveId(importee, importer) {
+ // v3 hack
+ if (importee === `svelte`) return `https://unpkg.com/svelte@${version}/index.js`;
+ if (importee.startsWith(`svelte`)) return `https://unpkg.com/svelte@${version}/${importee.slice(7)}`;
+
+ if (importer && importer.startsWith(`https://`)) {
+ return new URL(importee, importer).href;
+ }
+
if (importee in lookup) return importee;
},
load(id) {
+ if (id.startsWith(`https://`)) return fetch_if_uncached(id);
+
if (id in lookup) return lookup[id].source;
},
transform(code, id) {
@@ -108,7 +148,7 @@ async function getBundle(mode, cache, lookup) {
const { js, css, stats } = svelte.compile(code, Object.assign({
generate: mode,
- format: 'es',
+ format: 'esm',
name: name,
filename: name + '.html',
onwarn: warning => {
@@ -118,12 +158,6 @@ async function getBundle(mode, cache, lookup) {
},
}, commonCompilerOptions));
- if (stats) {
- if (Object.keys(stats.hooks).filter(hook => stats.hooks[hook]).length > 0) info.usesHooks = true;
- } else if (/[^_]oncreate/.test(code)) {
- info.usesHooks = true;
- }
-
return js;
}
}],