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

Merge pull request #2383 from sveltejs/update-repl

Browse Source 
Update REPL
pull/2397/head
Rich Harris 6 years ago committed by GitHub
parent 43d0b5e5ef ab7a1a757a
commit b04cada2dd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 233 additions and 51 deletions
Show Stats Download Patch File Download Diff File

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

@ -1140,12 +1140,13 @@
"integrity": "sha512-oZLYFEAzUKyi3SKnXvj32ZCEGH6RDnao7COuCVhDydMS9NrCSVXhM79VaKyP5+Zc33m0QXEd2DN3UkU7OsHcfw==" "integrity": "sha512-oZLYFEAzUKyi3SKnXvj32ZCEGH6RDnao7COuCVhDydMS9NrCSVXhM79VaKyP5+Zc33m0QXEd2DN3UkU7OsHcfw=="
}, },
"@sveltejs/svelte-repl": { "@sveltejs/svelte-repl": {
"version": "0.0.7", "version": "0.0.9",
"resolved": "https://registry.npmjs.org/@sveltejs/svelte-repl/-/svelte-repl-0.0.7.tgz", "resolved": "https://registry.npmjs.org/@sveltejs/svelte-repl/-/svelte-repl-0.0.9.tgz",
"integrity": "sha512-gA1UD7ZKbvdLoKsRUPg+yceHmn0vOB4HUBmhV8H0wWr8VyU0nqxM0dlBPvqZUMVVjC9cNyGF3bqHKtBiJHRyhA==", "integrity": "sha512-n0cYMyzxCU/oEwibliNRcIMiRcOpt7oA4l9u/C2WFWzb4ygWhZ9gpYEI4IYvdUI/RJfe5KSR7TdAZI/dUk3mqg==",
"dev": true, "dev": true,
"requires": { "requires": {
"codemirror": "^5.45.0", "codemirror": "^5.45.0",
"sourcemap-codec": "^1.4.4",
"yootils": "0.0.15" "yootils": "0.0.15"
}, },
"dependencies": { "dependencies": {

2
site/package.json
Unescape View File

@ -39,7 +39,7 @@
"@babel/plugin-transform-runtime": "^7.2.0", "@babel/plugin-transform-runtime": "^7.2.0",
"@babel/preset-env": "^7.3.1", "@babel/preset-env": "^7.3.1",
"@babel/runtime": "^7.3.1", "@babel/runtime": "^7.3.1",
"@sveltejs/svelte-repl": "0.0.7", "@sveltejs/svelte-repl": "0.0.9",
"chokidar": "^2.1.2", "chokidar": "^2.1.2",
"degit": "^2.1.3", "degit": "^2.1.3",
"eslint-plugin-svelte3": "^0.4.4", "eslint-plugin-svelte3": "^0.4.4",

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

@ -0,0 +1,35 @@
<script>
export let checked;
</script>
<style>
.input-output-toggle {
display: grid;
position: absolute;
user-select: none;
grid-template-columns: 1fr 40px 1fr;
grid-gap: 0.5em;
align-items: center;
width: 100%;
height: 42px;
border-top: 1px solid var(--second);
}
input {
display: block;
}
span {
color: #ccc;
}
.active {
color: #555;
}
</style>
<label class="input-output-toggle">
<span class:active={!checked} style="text-align: right">input</span>
<input type="checkbox" bind:checked>
<span class:active={checked}>output</span>
</label>

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

@ -2,6 +2,7 @@
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { process_example } from './process_example.js'; import { process_example } from './process_example.js';
import Repl from '@sveltejs/svelte-repl'; import Repl from '@sveltejs/svelte-repl';
import InputOutputToggle from './InputOutputToggle.svelte';
export let version = 'beta'; export let version = 'beta';
export let gist = null; export let gist = null;
@ -10,6 +11,11 @@
let repl; let repl;
let name = 'loading...'; let name = 'loading...';
let width = process.browser
? window.innerWidth - 32
: 1000;
let checked = false;
onMount(() => { onMount(() => {
if (version !== 'local') { if (version !== 'local') {
@ -71,6 +77,8 @@
`https://unpkg.com/svelte@${version}`; `https://unpkg.com/svelte@${version}`;
const rollupUrl = `https://unpkg.com/rollup@1/dist/rollup.browser.js`; const rollupUrl = `https://unpkg.com/rollup@1/dist/rollup.browser.js`;
$: mobile = width < 560;
</script> </script>
<style> <style>
@ -85,10 +93,38 @@
box-sizing: border-box; box-sizing: border-box;
--pane-controls-h: 4.2rem; --pane-controls-h: 4.2rem;
} }
.viewport {
width: 100%;
height: 100%;
}
.mobile .viewport {
width: 200%;
height: calc(100% - 42px);
transition: transform 0.3s;
}
.mobile .offset {
transform: translate(-50%, 0);
}
</style> </style>
<div class="repl-outer"> <div class="repl-outer" bind:clientWidth={width} class:mobile>
{#if process.browser} <div class="viewport" class:offset={checked}>
<Repl bind:this={repl} {svelteUrl} {rollupUrl} embedded={true} relaxed/> {#if process.browser}
<Repl
bind:this={repl}
fixed={mobile}
{svelteUrl}
{rollupUrl}
embedded
relaxed
/>
{/if}
</div>
{#if mobile}
<InputOutputToggle bind:checked/>
{/if} {/if}
</div> </div>

45
site/src/routes/repl/index.svelte
Unescape View File

@ -11,6 +11,7 @@
<script> <script>
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { process_example } from '../../components/Repl/process_example.js'; import { process_example } from '../../components/Repl/process_example.js';
import InputOutputToggle from '../../components/Repl/InputOutputToggle.svelte';
import AppControls from './_components/AppControls/index.svelte'; import AppControls from './_components/AppControls/index.svelte';
import Repl from '@sveltejs/svelte-repl'; import Repl from '@sveltejs/svelte-repl';
@ -23,6 +24,8 @@
let name = 'loading...'; let name = 'loading...';
let zen_mode = false; let zen_mode = false;
let relaxed = false; let relaxed = false;
let width = process.browser ? window.innerWidth : 1000;
let checked = false;
$: if (typeof history !== 'undefined') { $: if (typeof history !== 'undefined') {
const params = []; const params = [];
@ -114,6 +117,8 @@
// needed for context API example // needed for context API example
const mapbox_setup = `window.MAPBOX_ACCESS_TOKEN = process.env.MAPBOX_ACCESS_TOKEN;`; const mapbox_setup = `window.MAPBOX_ACCESS_TOKEN = process.env.MAPBOX_ACCESS_TOKEN;`;
$: mobile = width < 540;
</script> </script>
<style> <style>
@ -129,6 +134,21 @@
box-sizing: border-box; box-sizing: border-box;
} }
.viewport {
width: 100%;
height: 100%;
}
.mobile .viewport {
width: 200%;
height: calc(100% - 42px);
transition: transform 0.3s;
}
.mobile .offset {
transform: translate(-50%, 0);
}
.zen-mode { .zen-mode {
position: fixed; position: fixed;
width: 100%; width: 100%;
@ -164,7 +184,9 @@
<title>Svelte REPL</title> <title>Svelte REPL</title>
</svelte:head> </svelte:head>
<div class="repl-outer {zen_mode ? 'zen-mode' : ''}"> <svelte:window bind:innerWidth={width}/>
<div class="repl-outer {zen_mode ? 'zen-mode' : ''}" class:mobile>
<AppControls <AppControls
{name} {name}
{gist} {gist}
@ -174,12 +196,19 @@
/> />
{#if process.browser} {#if process.browser}
<Repl <div class="viewport" class:offset={checked}>
bind:this={repl} <Repl
{svelteUrl} bind:this={repl}
{rollupUrl} {svelteUrl}
{relaxed} {rollupUrl}
setup={mapbox_setup} {relaxed}
/> fixed={mobile}
setup={mapbox_setup}
/>
</div>
{#if mobile}
<InputOutputToggle bind:checked/>
{/if}
{/if} {/if}
</div> </div>

40
site/src/routes/tutorial/[slug]/_components/ScreenToggle.svelte
Unescape View File

@ -0,0 +1,40 @@
<script>
export let offset = 0;
</script>
<style>
.toggle {
position: fixed;
bottom: 0;
width: 100%;
height: 42px;
display: flex;
justify-content: center;
align-items: center;
border-top: 1px solid var(--second);
background-color: white;
}
button {
padding: 0.3em 0.6em;
border-radius: 1em;
line-height: 1;
height: 1em;
box-sizing: content-box;
color: #999;
border: 1px solid #f4f4f4;
width: 4em;
margin: 0 0.15em;
}
.selected {
background-color: var(--prime);
color: white;
}
</style>
<div class="toggle">
<button class:selected={offset === 0} on:click={() => offset = 0}>tutorial</button>
<button class:selected={offset === 1} on:click={() => offset = 1}>input</button>
<button class:selected={offset === 2} on:click={() => offset = 2}>output</button>
</div>

111
site/src/routes/tutorial/[slug]/index.svelte
Unescape View File

@ -15,6 +15,7 @@
<script> <script>
import TableOfContents from './_components/TableOfContents.svelte'; import TableOfContents from './_components/TableOfContents.svelte';
import ScreenToggle from './_components/ScreenToggle.svelte';
import Icon from '../../../components/Icon.svelte'; import Icon from '../../../components/Icon.svelte';
import Repl from '@sveltejs/svelte-repl'; import Repl from '@sveltejs/svelte-repl';
import { getContext } from 'svelte'; import { getContext } from 'svelte';
@ -29,6 +30,9 @@
let scrollable; let scrollable;
const lookup = new Map(); const lookup = new Map();
let width = process.browser ? window.innerWidth : 1000;
let offset = 0;
sections.forEach(section => { sections.forEach(section => {
section.chapters.forEach(chapter => { section.chapters.forEach(chapter => {
const obj = { const obj = {
@ -70,6 +74,8 @@
}); });
} }
$: mobile = width < 768;
function reset() { function reset() {
repl.update({ repl.update({
components: chapter.app_a.map(clone) components: chapter.app_a.map(clone)
@ -107,14 +113,40 @@
position: relative; position: relative;
height: calc(100vh - var(--nav-h)); height: calc(100vh - var(--nav-h));
overflow: hidden; overflow: hidden;
padding: 0; padding: 0 0 42px 0;
/* margin: 0 calc(var(--side-nav) * -1); */ /* margin: 0 calc(var(--side-nav) * -1); */
box-sizing: border-box; box-sizing: border-box;
}
.viewport {
display: grid; display: grid;
grid-template-columns: minmax(33.333%, 480px) auto; width: 300%;
height: 100%;
grid-template-columns: 33.333% 66.666%;
transition: transform 0.3s;
grid-auto-rows: 100%; grid-auto-rows: 100%;
} }
.offset-1 { transform: translate(-33.333%, 0); }
.offset-2 { transform: translate(-66.666%, 0); }
@media (min-width: 768px) {
.tutorial-outer {
padding: 0;
}
.viewport {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: minmax(33.333%, 480px) auto;
grid-auto-rows: 100%;
transition: none;
}
.offset-1, .offset-2 { transform: none; }
}
.tutorial-text { .tutorial-text {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -215,44 +247,53 @@
<title>{selected.section.title} / {selected.chapter.title} • Svelte Tutorial</title> <title>{selected.section.title} / {selected.chapter.title} • Svelte Tutorial</title>
</svelte:head> </svelte:head>
<div class="tutorial-outer"> <svelte:window bind:innerWidth={width}/>
<div class="tutorial-text">
<div class="table-of-contents">
<TableOfContents {sections} {slug} {selected}/>
</div>
<div class="chapter-markup" bind:this={scrollable}> <div class="tutorial-outer">
{@html chapter.html} <div class="viewport offset-{offset}">
<div class="tutorial-text">
<div class="controls"> <div class="table-of-contents">
{#if chapter.app_b} <TableOfContents {sections} {slug} {selected}/>
<!-- TODO disable this button when the contents of the REPL
matches the expected end result -->
<button class="show" on:click="{() => completed ? reset() : complete()}">
{completed ? 'Reset' : 'Show me'}
</button>
{/if}
{#if selected.next}
<a class="next" href="tutorial/{selected.next.slug}">Next <Icon name="arrow-right" /></a>
{/if}
</div> </div>
<div class="improve-chapter"> <div class="chapter-markup" bind:this={scrollable}>
<a href={improve_link}><Icon name="edit" size={14}/> Edit this chapter</a> {@html chapter.html}
<div class="controls">
{#if chapter.app_b}
<!-- TODO disable this button when the contents of the REPL
matches the expected end result -->
<button class="show" on:click="{() => completed ? reset() : complete()}">
{completed ? 'Reset' : 'Show me'}
</button>
{/if}
{#if selected.next}
<a class="next" href="tutorial/{selected.next.slug}">Next <Icon name="arrow-right" /></a>
{/if}
</div>
<div class="improve-chapter">
<a href={improve_link}><Icon name="edit" size={14}/> Edit this chapter</a>
</div>
</div> </div>
</div> </div>
</div>
<div class="tutorial-repl"> <div class="tutorial-repl">
<Repl <Repl
bind:this={repl} bind:this={repl}
{svelteUrl} {svelteUrl}
{rollupUrl} {rollupUrl}
orientation="rows" orientation={mobile ? 'columns' : 'rows'}
on:change={handle_change} fixed={mobile}
setup={mapbox_setup} on:change={handle_change}
relaxed setup={mapbox_setup}
/> relaxed
/>
</div>
</div> </div>
{#if mobile}
<ScreenToggle bind:offset/>
{/if}
</div> </div>

Write Preview
Loading…
Cancel
Save