From e8b7cd7889e93efc7814a18249830ca596797f96 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Tue, 19 Mar 2019 13:38:37 -0400 Subject: [PATCH] stagger creation of REPL widgets on home page --- site/package-lock.json | 28 +++++---- site/package.json | 4 +- .../components/IntersectionObserver.svelte | 59 +++++++++++++++++++ site/src/components/Lazy.svelte | 11 ++++ site/src/components/Repl/CodeMirror.svelte | 30 ++++++---- .../components/Repl/InputOutputToggle.svelte | 4 ++ site/src/components/Repl/ReplWidget.svelte | 4 -- site/src/components/Repl/index.svelte | 2 + site/src/components/TopNav.svelte | 2 +- site/src/routes/index.svelte | 52 ++++++++++++++-- 10 files changed, 163 insertions(+), 33 deletions(-) create mode 100644 site/src/components/IntersectionObserver.svelte create mode 100644 site/src/components/Lazy.svelte diff --git a/site/package-lock.json b/site/package-lock.json index 3a1fabf102..b527a5feeb 100644 --- a/site/package-lock.json +++ b/site/package-lock.json @@ -1941,7 +1941,7 @@ "dev": true }, "eslint-plugin-svelte3": { - "version": "git+https://github.com/sveltejs/eslint-plugin-svelte3.git#a9e7c167484ff7ea5da775ae21b133e0ab5ddc85", + "version": "git+https://github.com/sveltejs/eslint-plugin-svelte3.git#651d7e3695b1731251ab3a501d1067b561ede09f", "from": "git+https://github.com/sveltejs/eslint-plugin-svelte3.git#semver:*", "dev": true }, @@ -4811,9 +4811,9 @@ } }, "sapper": { - "version": "0.26.0-alpha.10", - "resolved": "https://registry.npmjs.org/sapper/-/sapper-0.26.0-alpha.10.tgz", - "integrity": "sha512-S1XdAA0gxEPT3Ikh3jsLKAAbV3EnDd80sppCeUJ5wHCfXTRiP6STxe5PLYZ4Ym8uYU7Iez+6cGLTkfP0ZLPRQw==", + "version": "0.26.0-alpha.12", + "resolved": "https://registry.npmjs.org/sapper/-/sapper-0.26.0-alpha.12.tgz", + "integrity": "sha512-NEXr6Eu5jawY76N5IEQhKMKhcZW6+42E2alH4J8DxFMmOI7Gi2nlwCQ2jcZv7q/S+zMP+OSuqE44c94A5u1H8Q==", "dev": true, "requires": { "html-minifier": "^3.5.21", @@ -5296,9 +5296,9 @@ } }, "svelte": { - "version": "3.0.0-beta.14", - "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.0.0-beta.14.tgz", - "integrity": "sha512-naFCFs5JRYe5PGz3+Vg0LiFMqkQUc4bdiH4e7sd6jyDyia0fWd4CJrLxWiC5kHv5Qo5Iv+y26hBHnDoIGAw3zw==", + "version": "3.0.0-beta.20", + "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.0.0-beta.20.tgz", + "integrity": "sha512-IEZrUseN2Hzpo1KFdyZf3Neqw7abbXLU7oRRkyBVm0iT1PQKHj8G75hR0wISvz7pOegYisiVFdi3C5Asz4ps9Q==", "dev": true }, "tar": { @@ -5426,15 +5426,21 @@ } }, "uglify-js": { - "version": "3.4.9", - "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.9.tgz", - "integrity": "sha512-8CJsbKOtEbnJsTyv6LE6m6ZKniqMiFWmm9sRbopbkGs3gMPPfd3Fh8iIA4Ykv5MgaTbqHr4BaoGLJLZNhsrW1Q==", + "version": "3.4.10", + "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz", + "integrity": "sha512-Y2VsbPVs0FIshJztycsO2SfPk7/KAF/T72qzv9u5EpQ4kB2hQoHlhNQTsNyy6ul7lQtqJN/AoWeS23OzEiEFxw==", "dev": true, "requires": { - "commander": "~2.17.1", + "commander": "~2.19.0", "source-map": "~0.6.1" }, "dependencies": { + "commander": { + "version": "2.19.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.19.0.tgz", + "integrity": "sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==", + "dev": true + }, "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", diff --git a/site/package.json b/site/package.json index de3edb8f64..664dd59e48 100644 --- a/site/package.json +++ b/site/package.json @@ -53,7 +53,7 @@ "rollup-plugin-replace": "^2.1.0", "rollup-plugin-svelte": "^5.0.3", "rollup-plugin-terser": "^4.0.4", - "sapper": "^0.26.0-alpha.10", - "svelte": "^3.0.0-beta.14" + "sapper": "^0.26.0-alpha.12", + "svelte": "^3.0.0-beta.20" } } diff --git a/site/src/components/IntersectionObserver.svelte b/site/src/components/IntersectionObserver.svelte new file mode 100644 index 0000000000..210fd524fd --- /dev/null +++ b/site/src/components/IntersectionObserver.svelte @@ -0,0 +1,59 @@ + + + + +
+ +
\ No newline at end of file diff --git a/site/src/components/Lazy.svelte b/site/src/components/Lazy.svelte new file mode 100644 index 0000000000..ef81d68f00 --- /dev/null +++ b/site/src/components/Lazy.svelte @@ -0,0 +1,11 @@ + + + \ No newline at end of file diff --git a/site/src/components/Repl/CodeMirror.svelte b/site/src/components/Repl/CodeMirror.svelte index e9519e516e..a1a92fe344 100644 --- a/site/src/components/Repl/CodeMirror.svelte +++ b/site/src/components/Repl/CodeMirror.svelte @@ -33,9 +33,9 @@ // than making this state-driven through props, // because it's difficult to update an editor // without resetting scroll otherwise - export function set(new_code, new_mode) { + export async function set(new_code, new_mode) { if (new_mode !== mode) { - createEditor(mode = new_mode); + await createEditor(mode = new_mode); } code = new_code; @@ -121,12 +121,13 @@ onMount(() => { if (_CodeMirror) { CodeMirror = _CodeMirror; - createEditor(mode || 'svelte'); - editor.setValue(code || ''); + createEditor(mode || 'svelte').then(() => { + editor.setValue(code || ''); + }); } else { - codemirror_promise.then(mod => { + codemirror_promise.then(async mod => { CodeMirror = mod.default; - createEditor(mode || 'svelte'); + await createEditor(mode || 'svelte'); editor.setValue(code || ''); }); } @@ -137,12 +138,10 @@ } }); - function createEditor(mode) { + async function createEditor(mode) { if (destroyed || !CodeMirror) return; - if (editor) { - editor.toTextArea(); - } + if (editor) editor.toTextArea(); const opts = { lineNumbers, @@ -162,6 +161,12 @@ 'Shift-Tab': tab }; + // Creating a text editor is a lot of work, so we yield + // the main thread for a moment. This helps reduce jank + await sleep(50); + + if (destroyed) return; + editor = CodeMirror.fromTextArea(refs.editor, opts); editor.on('change', instance => { @@ -171,8 +176,13 @@ } }); + await sleep(50); editor.refresh(); } + + function sleep(ms) { + return new Promise(fulfil => setTimeout(fulfil, ms)); + } - - {name} • Svelte REPL - -
{#if process.browser} diff --git a/site/src/components/Repl/index.svelte b/site/src/components/Repl/index.svelte index 5b8f798b32..489e0e49d7 100644 --- a/site/src/components/Repl/index.svelte +++ b/site/src/components/Repl/index.svelte @@ -32,6 +32,8 @@ module_editor.set($selected.source, $selected.type); output.set($selected, $compile_options); + + rebundle(); } export function update(data) { diff --git a/site/src/components/TopNav.svelte b/site/src/components/TopNav.svelte index d1e4db6d31..d02ff58cec 100644 --- a/site/src/components/TopNav.svelte +++ b/site/src/components/TopNav.svelte @@ -52,7 +52,7 @@ background-color: white; box-shadow: 0 -0.4rem 0.9rem 0.2rem rgba(0,0,0,.5); font-family: var(--font); - z-index: 10; + z-index: 100; user-select: none; transform: translate(0,calc(-100% - 1rem)); transition: transform 0.2s; diff --git a/site/src/routes/index.svelte b/site/src/routes/index.svelte index 95b2dff8b6..d2f6a696a4 100644 --- a/site/src/routes/index.svelte +++ b/site/src/routes/index.svelte @@ -1,10 +1,18 @@