From 5aeaafd096ffa51dfa06ef0b4ed27b364b9e640e Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Mon, 17 Dec 2018 16:08:06 -0500 Subject: [PATCH] REPL stuff --- site/package-lock.json | 10 ++ site/package.json | 2 + site/src/routes/repl/index.html | 279 ++++++-------------------------- site/src/template.html | 2 + site/static/global.css | 12 +- site/static/repl-worker.js | 110 +++++++++---- 6 files changed, 148 insertions(+), 267 deletions(-) diff --git a/site/package-lock.json b/site/package-lock.json index 266c7bad68..1cd57d9e0f 100644 --- a/site/package-lock.json +++ b/site/package-lock.json @@ -1154,6 +1154,11 @@ "tiny-emitter": "^2.0.0" } }, + "codemirror": { + "version": "5.42.0", + "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.42.0.tgz", + "integrity": "sha512-pbApC8zDzItP3HRphD6kQVwS976qB5Qi0hU3MZMixLk+AyugOW1RF+8XJEjeyl5yWsHNe88tDUxzeRh5AOxPRw==" + }, "collection-visit": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz", @@ -1353,6 +1358,11 @@ "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz", "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=" }, + "do-not-zip": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/do-not-zip/-/do-not-zip-1.0.0.tgz", + "integrity": "sha512-Pgd81ET43bhAGaN2Hq1zluSX1FmD7kl7KcV9ER/lawiLsRUB9pRA5y8r6us29Xk6BrINZETO8TjhYwtwafWUww==" + }, "ee-first": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", diff --git a/site/package.json b/site/package.json index 5fd9d3128b..1658d60ec2 100644 --- a/site/package.json +++ b/site/package.json @@ -12,7 +12,9 @@ "test": "run-p --race dev cy:run" }, "dependencies": { + "codemirror": "^5.42.0", "compression": "^1.7.1", + "do-not-zip": "^1.0.0", "express": "^4.16.4", "golden-fleece": "^1.0.9", "marked": "^0.5.2", diff --git a/site/src/routes/repl/index.html b/site/src/routes/repl/index.html index 979e5e7156..740b7de0ac 100644 --- a/site/src/routes/repl/index.html +++ b/site/src/routes/repl/index.html @@ -14,15 +14,10 @@ - - Svelte REPL - - -
- - -
- -
- - - -
- -
- -
-

Rendered component

- {#if compilerReady} - - {:else} -

loading Svelte compiler...

- {/if} -
-
-

data.json5

- -
- -
- -
-
- - .repl-inner :global(.warning.message) { - background-color: #e47e0a; - } + + Svelte REPL + - .repl-inner :global(.info.message) { - background-color: var(--second); - animation: fade-in .4s .2s both; - } +
+ - .repl-inner :global(.error) :global(.filename) { - cursor: pointer; - } - + +
diff --git a/site/src/template.html b/site/src/template.html index cdaea155c1..839cdeab30 100644 --- a/site/src/template.html +++ b/site/src/template.html @@ -11,6 +11,8 @@ + + diff --git a/site/static/global.css b/site/static/global.css index 72e6bb9dfe..ad94cd7894 100644 --- a/site/static/global.css +++ b/site/static/global.css @@ -26,9 +26,11 @@ } body { - --font: aller, sans-serif; - --font-alt: asap-bold, sans-serif; - /* --font-mono: overpass, monospace; */ + /* --font: aller, sans-serif; */ + --font: 'Overpass', sans-serif; + /* --font-alt: asap-bold, sans-serif; */ + --font-alt: 'Overpass', sans-serif; + --font-mono: 'Overpass Mono', monospace; --font-ui: var(--font-mono); /* ui-elements: buttons, forms etc. */ } @@ -212,9 +214,9 @@ button { --bttn-outline: var(--border-w); --bttn-font: var(--font-ui); --bttn-calc-h: calc(var(--bttn-h) - var(--bttn-outline) * 2); - --bttn-hover: linear-gradient( + /* --bttn-hover: linear-gradient( to top, rgba(0,0,0,.05), rgba(0,0,0,.05) - ); + ); */ --bttn-active: linear-gradient( to top, rgba(255,255,255,.1), rgba(255,255,255,.1) ); diff --git a/site/static/repl-worker.js b/site/static/repl-worker.js index e98f33b6d2..dd158e4994 100644 --- a/site/static/repl-worker.js +++ b/site/static/repl-worker.js @@ -1,4 +1,42 @@ -global.window = self; // egregious hack to get magic-string to work in a worker +self.window = self; // egregious hack to get magic-string to work in a worker + +let ready = false; +let pending_components; +let pending_component; + +self.addEventListener('message', async event => { + switch (event.data.type) { + case 'version': + self.postMessage({ + type: 'version', + version: await init(event.data.version) + }, '*'); + + break; + + case 'bundle': + if (ready) { + self.postMessage({ + type: 'bundled', + result: await bundle(event.data.components) + }, '*'); + } else { + pending_components = event.data.components; + } + break; + + case 'compile': + if (ready) { + self.postMessage({ + type: 'compiled', + result: await compile(event.data.component) + }, '*'); + } else { + pending_component = event.data.component; + } + break; + } +}); const commonCompilerOptions = { cascade: false, @@ -8,34 +46,48 @@ const commonCompilerOptions = { dev: true, }; -const svelteCache = new Map(); - -function loadSvelte(version) { - if (!svelteCache.has(version)) { - if (version === 'local') { - svelteCache.set(version, import(/* webpackChunkName: "svelte" */ 'svelte')); - } else { - svelteCache.set(version, new Promise((fulfil => { - importScripts(`https://unpkg.com/svelte@${version}/compiler/svelte.js`); - fulfil(global.svelte); - }))) - } - } - - return svelteCache.get(version).then(svelte => { - global.svelte = svelte; +async function init(version) { + // TODO use local versions + importScripts( + `https://unpkg.com/svelte@${version}/compiler/svelte.js`, + `https://unpkg.com/rollup/dist/rollup.browser.js` + ); + + console.log(1); + console.log({ + svelte: self.svelte, + rollup: self.rollup }); -} + console.log({ + svelte, + rollup + }); + console.log(2); + + self.postMessage({ + type: 'version', + version: version === 'local' ? version : svelte.VERSION + }, '*'); -export async function init(version) { - await Promise.all([ - import(/* webpackChunkName: "rollup" */ 'rollup/dist/rollup.browser.js').then(r => { - global.rollup = r; - }), - loadSvelte(version) - ]); + ready = true; - return version === 'local' ? version : svelte.VERSION; + if (pending_components) { + self.postMessage({ + type: 'bundled', + result: await bundle(pending_components) + }, '*'); + + pending_components = null; + } + + if (pending_component) { + self.postMessage({ + type: 'compiled', + result: await compile(pending_component) + }, '*'); + + pending_component = null; + } } let cached = { @@ -104,8 +156,8 @@ async function getBundle(mode, cache, lookup) { return { bundle, info, error: null, warningCount }; } -export async function bundle(components) { - console.clear(); +async function bundle(components) { + // console.clear(); console.log(`running Svelte compiler version %c${svelte.VERSION}`, 'font-weight: bold'); const token = currentToken = {}; @@ -194,7 +246,7 @@ export async function bundle(components) { } } -export function compile(component) { +function compile(component) { try { const { js } = svelte.compile(component.source, Object.assign({ // TODO make options configurable