mirror of https://github.com/sveltejs/svelte
commit
20e5fe9da7
@ -0,0 +1 @@
|
|||||||
|
<h1>Hello {name}!</h1>
|
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"name": "world"
|
||||||
|
}
|
@ -0,0 +1,11 @@
|
|||||||
|
<script>
|
||||||
|
let count = 0;
|
||||||
|
|
||||||
|
function increment() {
|
||||||
|
count += 1;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button on:click={increment}>
|
||||||
|
clicks: {count}
|
||||||
|
</button>
|
@ -0,0 +1 @@
|
|||||||
|
{}
|
@ -0,0 +1,12 @@
|
|||||||
|
<script>
|
||||||
|
import Foo from './Foo.html';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
p {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<p>this <p> is bold but not red</p>
|
||||||
|
<Foo/>
|
@ -0,0 +1,7 @@
|
|||||||
|
<style>
|
||||||
|
p {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<p>this <p> is red but not bold</p>
|
@ -0,0 +1 @@
|
|||||||
|
{}
|
@ -0,0 +1,74 @@
|
|||||||
|
<script>
|
||||||
|
import { quintOut } from 'svelte/easing';
|
||||||
|
import { fade, draw, fly } from 'svelte/transition';
|
||||||
|
import { expand, blur } from './custom-transitions.js';
|
||||||
|
import { inner, outer } from './shape.js';
|
||||||
|
|
||||||
|
let visible = true;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
svg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
path {
|
||||||
|
fill: white;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
position: absolute;
|
||||||
|
top: 1em;
|
||||||
|
left: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.centered {
|
||||||
|
font-size: 20vw;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%,-50%);
|
||||||
|
font-family: 'Overpass';
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
color: #676778;
|
||||||
|
font-weight: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.centered span {
|
||||||
|
will-change: filter;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
{#if visible}
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 103 124">
|
||||||
|
<g out:fade="{{duration: 200}}" opacity=0.2>
|
||||||
|
<path
|
||||||
|
in:expand="{{duration: 400, delay: 1000, easing: quintOut}}"
|
||||||
|
style="stroke: #ff3e00; fill: #ff3e00; stroke-width: 50;"
|
||||||
|
d={outer}
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
in:draw="{{duration: 1000}}"
|
||||||
|
style="stroke:#ff3e00; stroke-width: 1.5"
|
||||||
|
d={inner}
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<div class="centered" out:fly="{{y: -20, duration: 800}}">
|
||||||
|
{#each 'SVELTE' as char, i}
|
||||||
|
<span
|
||||||
|
in:blur="{{delay: 1000 + i * 150, duration: 800}}"
|
||||||
|
>{char}</span>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" bind:checked={visible}>
|
||||||
|
toggle me
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Overpass:100" rel="stylesheet">
|
@ -0,0 +1,34 @@
|
|||||||
|
import { cubicOut } from 'svelte/easing';
|
||||||
|
|
||||||
|
export function expand(node, params) {
|
||||||
|
const {
|
||||||
|
delay = 0,
|
||||||
|
duration = 400,
|
||||||
|
easing = cubicOut
|
||||||
|
} = params;
|
||||||
|
|
||||||
|
const w = parseFloat(getComputedStyle(node).strokeWidth);
|
||||||
|
|
||||||
|
return {
|
||||||
|
delay,
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
css: t => `opacity: ${t}; stroke-width: ${t * w}`
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function blur(node, params) {
|
||||||
|
const {
|
||||||
|
b = 10,
|
||||||
|
delay = 0,
|
||||||
|
duration = 400,
|
||||||
|
easing = cubicOut
|
||||||
|
} = params;
|
||||||
|
|
||||||
|
return {
|
||||||
|
delay,
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
css: (t, u) => `opacity: ${t}; filter: blur(${u * b}px);`
|
||||||
|
};
|
||||||
|
}
|
@ -0,0 +1 @@
|
|||||||
|
{}
|
@ -0,0 +1,5 @@
|
|||||||
|
export const inner = `M45.41,108.86A21.81,21.81,0,0,1,22,100.18,20.2,20.2,0,0,1,18.53,84.9a19,19,0,0,1,.65-2.57l.52-1.58,1.41,1a35.32,35.32,0,0,0,10.75,5.37l1,.31-.1,1a6.2,6.2,0,0,0,1.11,4.08A6.57,6.57,0,0,0,41,95.19a6,6,0,0,0,1.68-.74L70.11,76.94a5.76,5.76,0,0,0,2.59-3.83,6.09,6.09,0,0,0-1-4.6,6.58,6.58,0,0,0-7.06-2.62,6.21,6.21,0,0,0-1.69.74L52.43,73.31a19.88,19.88,0,0,1-5.58,2.45,21.82,21.82,0,0,1-23.43-8.68A20.2,20.2,0,0,1,20,51.8a19,19,0,0,1,8.56-12.7L56,21.59a19.88,19.88,0,0,1,5.58-2.45A21.81,21.81,0,0,1,85,27.82,20.2,20.2,0,0,1,88.47,43.1a19,19,0,0,1-.65,2.57l-.52,1.58-1.41-1a35.32,35.32,0,0,0-10.75-5.37l-1-.31.1-1a6.2,6.2,0,0,0-1.11-4.08,6.57,6.57,0,0,0-7.06-2.62,6,6,0,0,0-1.68.74L36.89,51.06a5.71,5.71,0,0,0-2.58,3.83,6,6,0,0,0,1,4.6,6.58,6.58,0,0,0,7.06,2.62,6.21,6.21,0,0,0,1.69-.74l10.48-6.68a19.88,19.88,0,0,1,5.58-2.45,21.82,21.82,0,0,1,23.43,8.68A20.2,20.2,0,0,1,87,76.2a19,19,0,0,1-8.56,12.7L51,106.41a19.88,19.88,0,0,1-5.58,2.45`;
|
||||||
|
|
||||||
|
export const outer = `
|
||||||
|
M65,34 L37,52 A1 1 0 0 0 44 60 L70.5,44.5 A1 1 0 0 0 65,34Z
|
||||||
|
M64,67 L36,85 A1 1 0 0 0 42 94 L68,77.5 A1 1 0 0 0 64,67Z`;
|
@ -0,0 +1,77 @@
|
|||||||
|
<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: 4.2rem;
|
||||||
|
border-top: 1px solid var(--second);
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
height: 1em;
|
||||||
|
width: calc(100% - 0.6em);
|
||||||
|
top: -2px;
|
||||||
|
border-radius: 0.5em;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
outline: none;
|
||||||
|
margin: 0 0.6em 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
input::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 1em;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
background: var(--second);
|
||||||
|
box-sizing: border-box;
|
||||||
|
-webkit-transition: .25s ease-out;
|
||||||
|
padding: 2px;
|
||||||
|
box-sizing: content-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:checked::before {
|
||||||
|
background: var(--prime);
|
||||||
|
}
|
||||||
|
|
||||||
|
input::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
height: 1em;
|
||||||
|
width: 1em;
|
||||||
|
top: 2px;
|
||||||
|
left: 2px;
|
||||||
|
border-radius: 1em;
|
||||||
|
background: white;
|
||||||
|
box-shadow: 0 0px 1px rgba(0,0,0,.4), 0 4px 2px rgba(0,0,0,.1);
|
||||||
|
-webkit-transition: .2s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:checked::after {
|
||||||
|
left: calc(100% - 9px);
|
||||||
|
}
|
||||||
|
|
||||||
|
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>
|
@ -0,0 +1,108 @@
|
|||||||
|
<script>
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
import * as fleece from 'golden-fleece';
|
||||||
|
import Repl from './_components/Repl.html';
|
||||||
|
|
||||||
|
export let query;
|
||||||
|
let version = query.version || 'alpha';
|
||||||
|
|
||||||
|
let app = {
|
||||||
|
components: [],
|
||||||
|
values: {}
|
||||||
|
};
|
||||||
|
|
||||||
|
let name = 'loading...';
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
fetch(`https://unpkg.com/svelte@${version}/package.json`)
|
||||||
|
.then(r => r.json())
|
||||||
|
.then(pkg => {
|
||||||
|
version = pkg.version;
|
||||||
|
});
|
||||||
|
|
||||||
|
if (query.gist) {
|
||||||
|
fetch(`gist/${query.gist}`).then(r => r.json()).then(data => {
|
||||||
|
const { id, description, files } = data;
|
||||||
|
|
||||||
|
name = description;
|
||||||
|
|
||||||
|
let values = {};
|
||||||
|
|
||||||
|
const components = Object.keys(files)
|
||||||
|
.map(file => {
|
||||||
|
const dot = file.lastIndexOf('.');
|
||||||
|
if (!~dot) return;
|
||||||
|
|
||||||
|
const source = files[file].content;
|
||||||
|
|
||||||
|
// while we're here...
|
||||||
|
if (file === 'data.json' || file === 'data.json5') {
|
||||||
|
values = tryParseData(source) || {};
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
name: file.slice(0, dot),
|
||||||
|
type: file.slice(dot + 1),
|
||||||
|
source
|
||||||
|
};
|
||||||
|
})
|
||||||
|
.filter(x => x.type === 'html' || x.type === 'js')
|
||||||
|
.sort((a, b) => {
|
||||||
|
if (a.name === 'App' && a.type === 'html') return -1;
|
||||||
|
if (b.name === 'App' && b.type === 'html') return 1;
|
||||||
|
|
||||||
|
if (a.type !== b.type) return a.type === 'html' ? -1 : 1;
|
||||||
|
|
||||||
|
return a.name < b.name ? -1 : 1;
|
||||||
|
});
|
||||||
|
|
||||||
|
app = { components, values };
|
||||||
|
});
|
||||||
|
} else if (query.demo) {
|
||||||
|
const url = `api/examples/${query.demo}`;
|
||||||
|
|
||||||
|
fetch(url).then(async response => {
|
||||||
|
if (response.ok) {
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
app = {
|
||||||
|
values: tryParseData(data.json5) || {}, // TODO make this more error-resistant
|
||||||
|
components: data.components
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function tryParseData(json5) {
|
||||||
|
try {
|
||||||
|
return fleece.evaluate(json5);
|
||||||
|
} catch (err) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.repl-outer {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: var(--back);
|
||||||
|
overflow: hidden;
|
||||||
|
box-sizing: border-box;
|
||||||
|
--pane-controls-h: 4.2rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<svelte:head>
|
||||||
|
<title>{name} • Svelte REPL</title>
|
||||||
|
</svelte:head>
|
||||||
|
|
||||||
|
<div class="repl-outer">
|
||||||
|
{#if process.browser}
|
||||||
|
<Repl {version} {app}/>
|
||||||
|
{/if}
|
||||||
|
</div>
|
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Before Width: | Height: | Size: 80 KiB |
@ -0,0 +1 @@
|
|||||||
|
[]
|
Before Width: | Height: | Size: 3.9 KiB |
Before Width: | Height: | Size: 2.0 KiB |
Loading…
Reference in new issue