mirror of https://github.com/sveltejs/svelte
Rich Harris
6 years ago
committed by
GitHub
commit
93f37c3eeb
@ -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