msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

stagger creation of REPL widgets on home page

Browse Source
pull/2272/head
Rich Harris 7 years ago
parent 795ca0c291
commit e8b7cd7889
10 changed files with 163 additions and 33 deletions
Show Stats Download Patch File Download Diff File

28
site/package-lock.json generated
Unescape View File

@ -1941,7 +1941,7 @@
"dev": true "dev": true
}, },
"eslint-plugin-svelte3": { "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:*", "from": "git+https://github.com/sveltejs/eslint-plugin-svelte3.git#semver:*",
"dev": true "dev": true
}, },
@ -4811,9 +4811,9 @@
} }
}, },
"sapper": { "sapper": {
"version": "0.26.0-alpha.10", "version": "0.26.0-alpha.12",
"resolved": "https://registry.npmjs.org/sapper/-/sapper-0.26.0-alpha.10.tgz", "resolved": "https://registry.npmjs.org/sapper/-/sapper-0.26.0-alpha.12.tgz",
"integrity": "sha512-S1XdAA0gxEPT3Ikh3jsLKAAbV3EnDd80sppCeUJ5wHCfXTRiP6STxe5PLYZ4Ym8uYU7Iez+6cGLTkfP0ZLPRQw==", "integrity": "sha512-NEXr6Eu5jawY76N5IEQhKMKhcZW6+42E2alH4J8DxFMmOI7Gi2nlwCQ2jcZv7q/S+zMP+OSuqE44c94A5u1H8Q==",
"dev": true, "dev": true,
"requires": { "requires": {
"html-minifier": "^3.5.21", "html-minifier": "^3.5.21",
@ -5296,9 +5296,9 @@
} }
}, },
"svelte": { "svelte": {
"version": "3.0.0-beta.14", "version": "3.0.0-beta.20",
"resolved": "https://registry.npmjs.org/svelte/-/svelte-3.0.0-beta.14.tgz", "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.0.0-beta.20.tgz",
"integrity": "sha512-naFCFs5JRYe5PGz3+Vg0LiFMqkQUc4bdiH4e7sd6jyDyia0fWd4CJrLxWiC5kHv5Qo5Iv+y26hBHnDoIGAw3zw==", "integrity": "sha512-IEZrUseN2Hzpo1KFdyZf3Neqw7abbXLU7oRRkyBVm0iT1PQKHj8G75hR0wISvz7pOegYisiVFdi3C5Asz4ps9Q==",
"dev": true "dev": true
}, },
"tar": { "tar": {
@ -5426,15 +5426,21 @@
} }
}, },
"uglify-js": { "uglify-js": {
"version": "3.4.9", "version": "3.4.10",
"resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.9.tgz", "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz",
"integrity": "sha512-8CJsbKOtEbnJsTyv6LE6m6ZKniqMiFWmm9sRbopbkGs3gMPPfd3Fh8iIA4Ykv5MgaTbqHr4BaoGLJLZNhsrW1Q==", "integrity": "sha512-Y2VsbPVs0FIshJztycsO2SfPk7/KAF/T72qzv9u5EpQ4kB2hQoHlhNQTsNyy6ul7lQtqJN/AoWeS23OzEiEFxw==",
"dev": true, "dev": true,
"requires": { "requires": {
"commander": "~2.17.1", "commander": "~2.19.0",
"source-map": "~0.6.1" "source-map": "~0.6.1"
}, },
"dependencies": { "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": { "source-map": {
"version": "0.6.1", "version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",

4
site/package.json
Unescape View File

@ -53,7 +53,7 @@
"rollup-plugin-replace": "^2.1.0", "rollup-plugin-replace": "^2.1.0",
"rollup-plugin-svelte": "^5.0.3", "rollup-plugin-svelte": "^5.0.3",
"rollup-plugin-terser": "^4.0.4", "rollup-plugin-terser": "^4.0.4",
"sapper": "^0.26.0-alpha.10", "sapper": "^0.26.0-alpha.12",
"svelte": "^3.0.0-beta.14" "svelte": "^3.0.0-beta.20"
} }
} }

59
site/src/components/IntersectionObserver.svelte
Unescape View File

@ -0,0 +1,59 @@
<script>
import { onMount } from 'svelte';
export let once = false;
export let top = 0;
export let bottom = 0;
export let left = 0;
export let right = 0;
let intersecting = false;
let container;
onMount(() => {
if (typeof IntersectionObserver !== 'undefined') {
const rootMargin = `${bottom}px ${left}px ${top}px ${right}px`;
const observer = new IntersectionObserver(entries => {
intersecting = entries[0].isIntersecting;
if (intersecting && once) {
observer.unobserve(container);
}
}, {
rootMargin
});
observer.observe(container);
return () => observer.unobserve(container);
}
function handler() {
const bcr = container.getBoundingClientRect();
intersecting = (
(bcr.bottom + bottom) > 0 &&
(bcr.right + right) > 0 &&
(bcr.top - top) < window.innerHeight &&
(bcr.left - left) < window.innerWidth
);
if (intersecting && once) {
window.removeEventListener('scroll', handler);
}
}
window.addEventListener('scroll', handler);
return () => window.removeEventListener('scroll', handler);
});
</script>
<style>
div {
width: 100%;
height: 100%;
}
</style>
<div bind:this={container}>
<slot {intersecting}></slot>
</div>

11
site/src/components/Lazy.svelte
Unescape View File

@ -0,0 +1,11 @@
<script>
import { onMount } from 'svelte';
let constructor;
onMount(async () => {
constructor = await $$props.this();
});
</script>
<svelte:component this={constructor} {...$$props}/>

30
site/src/components/Repl/CodeMirror.svelte
Unescape View File

@ -33,9 +33,9 @@
// than making this state-driven through props, // than making this state-driven through props,
// because it's difficult to update an editor // because it's difficult to update an editor
// without resetting scroll otherwise // without resetting scroll otherwise
export function set(new_code, new_mode) { export async function set(new_code, new_mode) {
if (new_mode !== mode) { if (new_mode !== mode) {
createEditor(mode = new_mode); await createEditor(mode = new_mode);
} }
code = new_code; code = new_code;
@ -121,12 +121,13 @@
onMount(() => { onMount(() => {
if (_CodeMirror) { if (_CodeMirror) {
CodeMirror = _CodeMirror; CodeMirror = _CodeMirror;
createEditor(mode || 'svelte'); createEditor(mode || 'svelte').then(() => {
editor.setValue(code || ''); editor.setValue(code || '');
});
} else { } else {
codemirror_promise.then(mod => { codemirror_promise.then(async mod => {
CodeMirror = mod.default; CodeMirror = mod.default;
createEditor(mode || 'svelte'); await createEditor(mode || 'svelte');
editor.setValue(code || ''); editor.setValue(code || '');
}); });
} }
@ -137,12 +138,10 @@
} }
}); });
function createEditor(mode) { async function createEditor(mode) {
if (destroyed || !CodeMirror) return; if (destroyed || !CodeMirror) return;
if (editor) { if (editor) editor.toTextArea();
editor.toTextArea();
}
const opts = { const opts = {
lineNumbers, lineNumbers,
@ -162,6 +161,12 @@
'Shift-Tab': tab '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 = CodeMirror.fromTextArea(refs.editor, opts);
editor.on('change', instance => { editor.on('change', instance => {
@ -171,8 +176,13 @@
} }
}); });
await sleep(50);
editor.refresh(); editor.refresh();
} }
function sleep(ms) {
return new Promise(fulfil => setTimeout(fulfil, ms));
}
</script> </script>
<style> <style>

4
site/src/components/Repl/InputOutputToggle.svelte
Unescape View File

@ -1,3 +1,7 @@
<script>
export let checked;
</script>
<style> <style>
.input-output-toggle { .input-output-toggle {
display: grid; display: grid;

4
site/src/components/Repl/ReplWidget.svelte
Unescape View File

@ -78,10 +78,6 @@
} }
</style> </style>
<svelte:head>
<title>{name} • Svelte REPL</title>
</svelte:head>
<div class="repl-outer"> <div class="repl-outer">
{#if process.browser} {#if process.browser}
<Repl bind:this={repl} {version} embedded={true}/> <Repl bind:this={repl} {version} embedded={true}/>

2
site/src/components/Repl/index.svelte
Unescape View File

@ -32,6 +32,8 @@
module_editor.set($selected.source, $selected.type); module_editor.set($selected.source, $selected.type);
output.set($selected, $compile_options); output.set($selected, $compile_options);
rebundle();
} }
export function update(data) { export function update(data) {

2
site/src/components/TopNav.svelte
Unescape View File

@ -52,7 +52,7 @@
background-color: white; background-color: white;
box-shadow: 0 -0.4rem 0.9rem 0.2rem rgba(0,0,0,.5); box-shadow: 0 -0.4rem 0.9rem 0.2rem rgba(0,0,0,.5);
font-family: var(--font); font-family: var(--font);
z-index: 10; z-index: 100;
user-select: none; user-select: none;
transform: translate(0,calc(-100% - 1rem)); transform: translate(0,calc(-100% - 1rem));
transition: transform 0.2s; transition: transform 0.2s;

52
site/src/routes/index.svelte
Unescape View File

@ -1,10 +1,18 @@
<script> <script>
import Icon from '../components/Icon.svelte'; import Icon from '../components/Icon.svelte';
import Logo from '../components/Logo.svelte'; import Logo from '../components/Logo.svelte';
import ReplWidget from '../components/Repl/ReplWidget.svelte'; // TODO lazyload? import IntersectionObserver from '../components/IntersectionObserver.svelte';
import Lazy from '../components/Lazy.svelte';
import ReplWidget from '../components/Repl/ReplWidget.svelte';
import contributors from './_contributors.js'; import contributors from './_contributors.js';
let sy = 0; let sy = 0;
// TODO this causes a Sapper CSS bug...
// function loadReplWidget() {
// console.log('lazy loading');
// return import('../components/Repl/ReplWidget.svelte').then(mod => mod.default);
// }
</script> </script>
<style> <style>
@ -123,7 +131,13 @@
border-radius: var(--border-r); */ border-radius: var(--border-r); */
width: 100%; width: 100%;
height: 420px; height: 420px;
}
.repl-container {
width: 100%;
height: 100%;
border-radius: var(--border-r); border-radius: var(--border-r);
overflow: hidden;
} }
.example > div:first-child { .example > div:first-child {
@ -244,7 +258,14 @@ npm run dev & open http://localhost:5000
<p>Svelte components are written in HTML files. Just add data.</p> <p>Svelte components are written in HTML files. Just add data.</p>
</div> </div>
<ReplWidget example="hello-world"/> <div class="repl-container">
<IntersectionObserver once let:intersecting top={400}>
{#if intersecting}
<!-- <Lazy this={loadReplWidget} example="hello-world"/> -->
<ReplWidget example="hello-world"/>
{/if}
</IntersectionObserver>
</div>
</section> </section>
<section class="container example linkify"> <section class="container example linkify">
@ -252,7 +273,14 @@ npm run dev & open http://localhost:5000
<p>CSS is component-scoped by default — no more style collisions or specificity wars. Or you can <a href="TODO-blog-post-on-css-in-js">use your favourite CSS-in-JS library</a>.</p> <p>CSS is component-scoped by default — no more style collisions or specificity wars. Or you can <a href="TODO-blog-post-on-css-in-js">use your favourite CSS-in-JS library</a>.</p>
</div> </div>
<ReplWidget example="nested-components"/> <div class="repl-container">
<IntersectionObserver once let:intersecting top={400}>
{#if intersecting}
<!-- <Lazy this={loadReplWidget} example="nested-components"/> -->
<ReplWidget example="nested-components"/>
{/if}
</IntersectionObserver>
</div>
</section> </section>
<section class="container example linkify"> <section class="container example linkify">
@ -260,7 +288,14 @@ npm run dev & open http://localhost:5000
<p>Trigger efficient, granular updates by assigning to local variables. The compiler does the rest.</p> <p>Trigger efficient, granular updates by assigning to local variables. The compiler does the rest.</p>
</div> </div>
<ReplWidget example="reactive-assignments"/> <div class="repl-container">
<IntersectionObserver once let:intersecting top={400}>
{#if intersecting}
<!-- <Lazy this={loadReplWidget} example="reactive-assignments"/> -->
<ReplWidget example="reactive-assignments"/>
{/if}
</IntersectionObserver>
</div>
</section> </section>
<section class="container example linkify"> <section class="container example linkify">
@ -268,7 +303,14 @@ npm run dev & open http://localhost:5000
<p>Build beautiful UIs with a powerful, performant transition engine built right into the framework.</p> <p>Build beautiful UIs with a powerful, performant transition engine built right into the framework.</p>
</div> </div>
<ReplWidget example="svg-transitions"/> <div class="repl-container">
<IntersectionObserver once let:intersecting top={400}>
{#if intersecting}
<!-- <Lazy this={loadReplWidget} example="svg-transitions"/> -->
<ReplWidget example="svg-transitions"/>
{/if}
</IntersectionObserver>
</div>
</section> </section>
</div> </div>

Write Preview
Loading…
Cancel
Save