mirror of https://github.com/sveltejs/svelte
parent
29fd8d7881
commit
b58a75b35c
@ -0,0 +1,144 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import * as fleece from 'golden-fleece';
|
||||
import Repl from './_components/Repl.html';
|
||||
|
||||
export let query;
|
||||
|
||||
let version = query.version;
|
||||
let gist_id = query.gist;
|
||||
|
||||
let gist;
|
||||
|
||||
let app = {
|
||||
components: [],
|
||||
values: {}
|
||||
};
|
||||
|
||||
let name = 'loading...';
|
||||
|
||||
onMount(() => {
|
||||
fetch(`https://unpkg.com/svelte@${version || 'alpha'}/package.json`)
|
||||
.then(r => r.json())
|
||||
.then(pkg => {
|
||||
version = pkg.version;
|
||||
});
|
||||
|
||||
if (gist_id) {
|
||||
fetch(`gist/${gist_id}`).then(r => r.json()).then(data => {
|
||||
gist = 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 {
|
||||
// TODO err...
|
||||
}
|
||||
});
|
||||
|
||||
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%;
|
||||
--pane-controls-h: 4.2rem;
|
||||
}
|
||||
|
||||
.pane { width: 100%; height: 100% }
|
||||
|
||||
h3 {
|
||||
margin: 4rem 0 0 0;
|
||||
padding: 0 2.4rem .8rem;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.repl-outer {
|
||||
background-color: var(--back);
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.repl-outer.zen-mode {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 11;
|
||||
}
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
color: var(--second);
|
||||
font-weight: 300;
|
||||
margin: 2em 0 0 0;
|
||||
opacity: 0;
|
||||
animation: fade-in .4s;
|
||||
animation-delay: .2s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
0% { opacity: 0 }
|
||||
100% { opacity: 1 }
|
||||
}
|
||||
|
||||
.input {
|
||||
padding: 2.4em 0 0 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<svelte:head>
|
||||
<title>{name} • Svelte REPL</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="repl-outer">
|
||||
{#if process.browser}
|
||||
<Repl {version} {app}/>
|
||||
{/if}
|
||||
</div>
|
Loading…
Reference in new issue