mirror of https://github.com/sveltejs/svelte
Conduitry
7 years ago
commit
c92df84e64
File diff suppressed because it is too large
Load Diff
@ -1,7 +1,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
import List from './List.html';
|
import List from './List.svelte';
|
||||||
import Item from './Item.html';
|
import Item from './Item.svelte';
|
||||||
|
|
||||||
let item;
|
let item;
|
||||||
let page;
|
let page;
|
||||||
@ -1,5 +1,5 @@
|
|||||||
<script>
|
<script>
|
||||||
import Foo from './Foo.html';
|
import Foo from './Foo.svelte';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@ -1,8 +1,8 @@
|
|||||||
<svelte:meta immutable/>
|
<svelte:options immutable/>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import ImmutableTodo from './ImmutableTodo.html';
|
import ImmutableTodo from './ImmutableTodo.svelte';
|
||||||
import MutableTodo from './MutableTodo.html';
|
import MutableTodo from './MutableTodo.svelte';
|
||||||
|
|
||||||
export let todos;
|
export let todos;
|
||||||
|
|
||||||
@ -1,4 +1,4 @@
|
|||||||
<svelte:meta immutable/>
|
<svelte:options immutable/>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { afterUpdate } from 'svelte';
|
import { afterUpdate } from 'svelte';
|
||||||
@ -1,5 +1,5 @@
|
|||||||
<script>
|
<script>
|
||||||
import Modal from './Modal.html';
|
import Modal from './Modal.svelte';
|
||||||
|
|
||||||
export let showModal;
|
export let showModal;
|
||||||
</script>
|
</script>
|
||||||
@ -1,5 +1,5 @@
|
|||||||
<script>
|
<script>
|
||||||
import Nested from './Nested.html';
|
import Nested from './Nested.svelte';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<p>This is a top-level element.</p>
|
<p>This is a top-level element.</p>
|
||||||
@ -1,5 +1,5 @@
|
|||||||
<script>
|
<script>
|
||||||
import Scatterplot from './Scatterplot.html';
|
import Scatterplot from './Scatterplot.svelte';
|
||||||
|
|
||||||
export let a;
|
export let a;
|
||||||
export let b;
|
export let b;
|
||||||
@ -1,111 +0,0 @@
|
|||||||
<script>
|
|
||||||
// TODO this example needs updating
|
|
||||||
import { onMount } from 'svelte';
|
|
||||||
import { scaleLinear } from 'd3-scale';
|
|
||||||
|
|
||||||
export let svg;
|
|
||||||
|
|
||||||
const xScale = scaleLinear();
|
|
||||||
const yScale = scaleLinear();
|
|
||||||
|
|
||||||
export let width = 500;
|
|
||||||
export let height = 200;
|
|
||||||
export let padding = { top: 20, right: 40, bottom: 40, left: 25 };
|
|
||||||
export let points;
|
|
||||||
export let xTicks = [0, 4, 8, 12, 16, 20];
|
|
||||||
export let yTicks = [0, 2, 4, 6, 8, 10, 12];
|
|
||||||
|
|
||||||
function xTicks() {
|
|
||||||
return width > 180 ?
|
|
||||||
[0, 4, 8, 12, 16, 20] :
|
|
||||||
[0, 10, 20];
|
|
||||||
}
|
|
||||||
|
|
||||||
function yTicks() {
|
|
||||||
return height > 180 ?
|
|
||||||
[0, 2, 4, 6, 8, 10, 12] :
|
|
||||||
[0, 4, 8, 12];
|
|
||||||
}
|
|
||||||
|
|
||||||
function xScale() {
|
|
||||||
return xScale()
|
|
||||||
.domain([0, 20])
|
|
||||||
.range([padding.left, width - padding.right]);
|
|
||||||
}
|
|
||||||
|
|
||||||
function yScale() {
|
|
||||||
return yScale()
|
|
||||||
.domain([0, 12])
|
|
||||||
.range([height - padding.bottom, padding.top]);
|
|
||||||
}
|
|
||||||
|
|
||||||
onMount(() => {
|
|
||||||
resize();
|
|
||||||
});
|
|
||||||
|
|
||||||
function resize() {
|
|
||||||
const { width, height } = svg.getBoundingClientRect();
|
|
||||||
width = width, height = height;
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<svelte:window on:resize='{resize}'/>
|
|
||||||
|
|
||||||
<svg ref:svg>
|
|
||||||
<!-- y axis -->
|
|
||||||
<g class='axis y-axis'>
|
|
||||||
{#each yTicks as tick}
|
|
||||||
<g class='tick tick-{tick}' transform='translate(0, {yScale()(tick)})'>
|
|
||||||
<line x1='{padding.left}' x2='{xScale()(22)}'/>
|
|
||||||
<text x='{padding.left - 8}' y='+4'>{tick}</text>
|
|
||||||
</g>
|
|
||||||
{/each}
|
|
||||||
</g>
|
|
||||||
|
|
||||||
<!-- x axis -->
|
|
||||||
<g class='axis x-axis'>
|
|
||||||
{#each xTicks as tick}
|
|
||||||
<g class='tick' transform='translate({xScale()(tick)},0)'>
|
|
||||||
<line y1='{yScale()(0)}' y2='{yScale()(13)}'/>
|
|
||||||
<text y='{height - padding.bottom + 16}'>{tick}</text>
|
|
||||||
</g>
|
|
||||||
{/each}
|
|
||||||
</g>
|
|
||||||
|
|
||||||
<!-- data -->
|
|
||||||
{#each points as point}
|
|
||||||
<circle cx='{xScale()(point.x)}' cy='{yScale()(point.y)}' r='5'/>
|
|
||||||
{/each}
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
svg {
|
|
||||||
width: 50%;
|
|
||||||
height: 50%;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
circle {
|
|
||||||
fill: orange;
|
|
||||||
fill-opacity: 0.6;
|
|
||||||
stroke: rgba(0,0,0,0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tick line {
|
|
||||||
stroke: #ddd;
|
|
||||||
stroke-dasharray: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
text {
|
|
||||||
font-size: 12px;
|
|
||||||
fill: #999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.x-axis text {
|
|
||||||
text-anchor: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.y-axis text {
|
|
||||||
text-anchor: end;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -0,0 +1,96 @@
|
|||||||
|
<script>
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
import { scaleLinear } from 'd3-scale';
|
||||||
|
|
||||||
|
export let points;
|
||||||
|
|
||||||
|
const padding = { top: 20, right: 40, bottom: 40, left: 25 };
|
||||||
|
|
||||||
|
let xScale;
|
||||||
|
$: xScale = scaleLinear()
|
||||||
|
.domain([0, 20])
|
||||||
|
.range([padding.left, width - padding.right]);
|
||||||
|
let yScale;
|
||||||
|
$: yScale = scaleLinear()
|
||||||
|
.domain([0, 12])
|
||||||
|
.range([height - padding.bottom, padding.top]);
|
||||||
|
|
||||||
|
let width = 500;
|
||||||
|
let height = 200;
|
||||||
|
let xTicks;
|
||||||
|
$: xTicks = width > 180 ?
|
||||||
|
[0, 4, 8, 12, 16, 20] :
|
||||||
|
[0, 10, 20];
|
||||||
|
let yTicks;
|
||||||
|
$: yTicks = height > 180 ?
|
||||||
|
[0, 2, 4, 6, 8, 10, 12] :
|
||||||
|
[0, 4, 8, 12];
|
||||||
|
|
||||||
|
onMount(resize);
|
||||||
|
|
||||||
|
let svg;
|
||||||
|
function resize() {
|
||||||
|
({ width, height } = svg.getBoundingClientRect());
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:window on:resize='{resize}'/>
|
||||||
|
|
||||||
|
<svg bind:this={svg}>
|
||||||
|
<!-- y axis -->
|
||||||
|
<g class='axis y-axis'>
|
||||||
|
{#each yTicks as tick}
|
||||||
|
<g class='tick tick-{tick}' transform='translate(0, {yScale(tick)})'>
|
||||||
|
<line x1='{padding.left}' x2='{xScale(22)}'/>
|
||||||
|
<text x='{padding.left - 8}' y='+4'>{tick}</text>
|
||||||
|
</g>
|
||||||
|
{/each}
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- x axis -->
|
||||||
|
<g class='axis x-axis'>
|
||||||
|
{#each xTicks as tick}
|
||||||
|
<g class='tick' transform='translate({xScale(tick)},0)'>
|
||||||
|
<line y1='{yScale(0)}' y2='{yScale(13)}'/>
|
||||||
|
<text y='{height - padding.bottom + 16}'>{tick}</text>
|
||||||
|
</g>
|
||||||
|
{/each}
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- data -->
|
||||||
|
{#each points as point}
|
||||||
|
<circle cx='{xScale(point.x)}' cy='{yScale(point.y)}' r='5'/>
|
||||||
|
{/each}
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
svg {
|
||||||
|
width: 50%;
|
||||||
|
height: 50%;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
circle {
|
||||||
|
fill: orange;
|
||||||
|
fill-opacity: 0.6;
|
||||||
|
stroke: rgba(0,0,0,0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tick line {
|
||||||
|
stroke: #ddd;
|
||||||
|
stroke-dasharray: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
text {
|
||||||
|
font-size: 12px;
|
||||||
|
fill: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.x-axis text {
|
||||||
|
text-anchor: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.y-axis text {
|
||||||
|
text-anchor: end;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,11 +1,11 @@
|
|||||||
<script>
|
<script>
|
||||||
import { fade } from 'svelte/transition';
|
import { fade } from 'svelte/transition';
|
||||||
|
|
||||||
export let visible;
|
let visible;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<input type=checkbox bind:checked={visible}> visible
|
<input type=checkbox bind:checked={visible}> visible
|
||||||
|
|
||||||
{#if visible}
|
{#if visible}
|
||||||
<p transition:fade>fades in and out</p>
|
<p transition:fade>fades in and out</p>
|
||||||
{/if}
|
{/if}
|
||||||
@ -1,11 +1,11 @@
|
|||||||
<script>
|
<script>
|
||||||
import { fly } from 'svelte/transition';
|
import { fly } from 'svelte/transition';
|
||||||
|
|
||||||
export let visible;
|
let visible;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<input type=checkbox bind:checked={visible}> visible
|
<input type=checkbox bind:checked={visible}> visible
|
||||||
|
|
||||||
{#if visible}
|
{#if visible}
|
||||||
<p transition:fly="{{y: 200, duration: 1000}}">flies 200 pixels up, slowly</p>
|
<p transition:fly="{{y: 200, duration: 1000}}">flies 200 pixels up, slowly</p>
|
||||||
{/if}
|
{/if}
|
||||||
@ -1,11 +1,11 @@
|
|||||||
<script>
|
<script>
|
||||||
import { fade, fly } from 'svelte/transition';
|
import { fade, fly } from 'svelte/transition';
|
||||||
|
|
||||||
export let visible;
|
let visible;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<input type=checkbox bind:checked={visible}> visible
|
<input type=checkbox bind:checked={visible}> visible
|
||||||
|
|
||||||
{#if visible}
|
{#if visible}
|
||||||
<p in:fly="{{y: 50}}" out:fade>flies up, fades out</p>
|
<p in:fly="{{y: 50}}" out:fade>flies up, fades out</p>
|
||||||
{/if}
|
{/if}
|
||||||
File diff suppressed because it is too large
Load Diff
@ -1,57 +1,58 @@
|
|||||||
{
|
{
|
||||||
"name": "TODO",
|
"name": "svelte.technology",
|
||||||
"description": "TODO",
|
"version": "1.0.0",
|
||||||
"version": "0.0.1",
|
"description": "Docs and examples for Svelte",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "sapper dev",
|
"dev": "sapper dev",
|
||||||
"sapper": "sapper build --legacy",
|
"sapper": "sapper build --legacy",
|
||||||
"update_template": "sh ./scripts/update_template.sh",
|
"update": "node scripts/update_template.js && node scripts/get-contributors.js",
|
||||||
"start": "node __sapper__/build",
|
"start": "node __sapper__/build",
|
||||||
"cy:run": "cypress run",
|
"cy:run": "cypress run",
|
||||||
"cy:open": "cypress open",
|
"cy:open": "cypress open",
|
||||||
"test": "run-p --race dev cy:run",
|
"test": "run-p --race dev cy:run",
|
||||||
"deploy": "npm run stage && now alias",
|
"deploy": "npm run stage && now alias",
|
||||||
"prestage": "npm run update_template && node scripts/get-contributors.js && npm run sapper",
|
"prestage": "npm run update && npm run sapper",
|
||||||
"stage": "now"
|
"stage": "now"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"codemirror": "^5.42.0",
|
"codemirror": "^5.43.0",
|
||||||
"compression": "^1.7.1",
|
"compression": "^1.7.3",
|
||||||
"devalue": "^1.1.0",
|
"devalue": "^1.1.0",
|
||||||
"do-not-zip": "^1.0.0",
|
"do-not-zip": "^1.0.0",
|
||||||
"dotenv": "^6.2.0",
|
"dotenv": "^6.2.0",
|
||||||
"express": "^4.16.4",
|
"express": "^4.16.4",
|
||||||
"express-session": "^1.15.6",
|
"express-session": "^1.15.6",
|
||||||
"golden-fleece": "^1.0.9",
|
"golden-fleece": "^1.0.9",
|
||||||
"marked": "^0.5.2",
|
"marked": "^0.6.0",
|
||||||
"node-fetch": "^2.3.0",
|
"node-fetch": "^2.3.0",
|
||||||
"passport": "^0.4.0",
|
"passport": "^0.4.0",
|
||||||
"passport-github": "^1.1.0",
|
"passport-github": "^1.1.0",
|
||||||
"prismjs": "^1.15.0",
|
"prismjs": "^1.15.0",
|
||||||
"session-file-store": "^1.2.0",
|
"session-file-store": "^1.2.0",
|
||||||
"sirv": "^0.2.0",
|
"shelljs": "^0.8.3",
|
||||||
|
"sirv": "^0.2.2",
|
||||||
"yootils": "0.0.14"
|
"yootils": "0.0.14"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.0.0",
|
"@babel/core": "^7.2.2",
|
||||||
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
|
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
|
||||||
"@babel/plugin-transform-runtime": "^7.0.0",
|
"@babel/plugin-transform-runtime": "^7.2.0",
|
||||||
"@babel/preset-env": "^7.0.0",
|
"@babel/preset-env": "^7.3.1",
|
||||||
"@babel/runtime": "^7.0.0",
|
"@babel/runtime": "^7.3.1",
|
||||||
"chokidar": "^2.0.4",
|
"chokidar": "^2.1.0",
|
||||||
"degit": "^2.1.3",
|
"degit": "^2.1.3",
|
||||||
"eslint-plugin-svelte3": "git+https://github.com/sveltejs/eslint-plugin-svelte3.git",
|
"eslint-plugin-svelte3": "git+https://github.com/sveltejs/eslint-plugin-svelte3.git#semver:*",
|
||||||
"now": "^12.1.14",
|
"now": "^13.1.3",
|
||||||
"npm-run-all": "^4.1.5",
|
"npm-run-all": "^4.1.5",
|
||||||
"rollup": "^0.68.0",
|
"rollup": "^1.1.2",
|
||||||
"rollup-plugin-babel": "^4.0.2",
|
"rollup-plugin-babel": "^4.3.2",
|
||||||
"rollup-plugin-commonjs": "^9.1.6",
|
"rollup-plugin-commonjs": "^9.2.0",
|
||||||
"rollup-plugin-json": "^3.1.0",
|
"rollup-plugin-json": "^3.1.0",
|
||||||
"rollup-plugin-node-resolve": "^3.3.0",
|
"rollup-plugin-node-resolve": "^4.0.0",
|
||||||
"rollup-plugin-replace": "^2.0.0",
|
"rollup-plugin-replace": "^2.1.0",
|
||||||
"rollup-plugin-svelte": "^4.2.1",
|
"rollup-plugin-svelte": "^5.0.1",
|
||||||
"rollup-plugin-terser": "^1.0.1",
|
"rollup-plugin-terser": "^4.0.4",
|
||||||
"sapper": "^0.25.0-alpha2",
|
"sapper": "^0.26.0-alpha.8",
|
||||||
"svelte": "^3.0.0-alpha10"
|
"svelte": "^3.0.0-beta.3"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -0,0 +1,26 @@
|
|||||||
|
const sh = require('shelljs');
|
||||||
|
const fs = require('fs')
|
||||||
|
|
||||||
|
sh.cd(__dirname+'/../')
|
||||||
|
|
||||||
|
// fetch svelte app
|
||||||
|
sh.rm('-rf','scripts/svelte-app')
|
||||||
|
sh.exec('npx degit sveltejs/template scripts/svelte-app')
|
||||||
|
|
||||||
|
// update repl-viewer.css based on template
|
||||||
|
sh.cp('scripts/svelte-app/public/global.css', 'static/repl-viewer.css')
|
||||||
|
|
||||||
|
// remove src (will be recreated client-side) and node_modules
|
||||||
|
sh.rm('-rf', 'scripts/svelte-app/src')
|
||||||
|
sh.rm('-rf', 'scripts/svelte-app/node_modules')
|
||||||
|
|
||||||
|
// build svelte-app.json
|
||||||
|
const appPath = 'scripts/svelte-app'
|
||||||
|
let files = []
|
||||||
|
|
||||||
|
for (const path of sh.find(appPath).filter(p => fs.lstatSync(p).isFile()) ) {
|
||||||
|
files.push({ path: path.slice(appPath.length + 1), data: fs.readFileSync(path).toString() });
|
||||||
|
}
|
||||||
|
|
||||||
|
fs.writeFileSync('static/svelte-app.json', JSON.stringify(files));
|
||||||
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
cd `dirname $0`/..
|
|
||||||
|
|
||||||
# fetch svelte-app
|
|
||||||
rm -rf scripts/svelte-app
|
|
||||||
node_modules/.bin/degit sveltejs/template scripts/svelte-app
|
|
||||||
|
|
||||||
# update repl-viewer.css based on template
|
|
||||||
cp scripts/svelte-app/public/global.css static/repl-viewer.css
|
|
||||||
|
|
||||||
# remove src (will be recreated client-side) and node_modules
|
|
||||||
rm -rf scripts/svelte-app/src
|
|
||||||
rm -rf scripts/svelte-app/node_modules
|
|
||||||
|
|
||||||
# build svelte-app.json
|
|
||||||
node scripts/build-svelte-app-json.js `find scripts/svelte-app -type f`
|
|
||||||
@ -1,4 +1,4 @@
|
|||||||
import * as sapper from '../__sapper__/client.js';
|
import * as sapper from '@sapper/app';
|
||||||
|
|
||||||
sapper.start({
|
sapper.start({
|
||||||
target: document.querySelector('#sapper')
|
target: document.querySelector('#sapper')
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 828 B After Width: | Height: | Size: 828 B |
|
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 3.9 KiB |
@ -1,7 +1,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
import Icon from './Icon.html';
|
import Icon from './Icon.svelte';
|
||||||
import Logo from './Logo.html';
|
import Logo from './Logo.svelte';
|
||||||
|
|
||||||
export let segment;
|
export let segment;
|
||||||
|
|
||||||
@ -1,6 +1,6 @@
|
|||||||
<script>
|
<script>
|
||||||
import InlineSvg from '../components/InlineSvg.html';
|
import InlineSvg from '../components/InlineSvg.svelte';
|
||||||
import Nav from '../components/TopNav.html';
|
import Nav from '../components/TopNav.svelte';
|
||||||
|
|
||||||
export let child;
|
export let child;
|
||||||
export let path;
|
export let path;
|
||||||
@ -1,6 +1,6 @@
|
|||||||
<script>
|
<script>
|
||||||
import { onMount, afterUpdate } from 'svelte';
|
import { onMount, afterUpdate } from 'svelte';
|
||||||
import Icon from '../../components/Icon.html';
|
import Icon from '../../components/Icon.svelte';
|
||||||
|
|
||||||
export let sections = [];
|
export let sections = [];
|
||||||
export let active_section = null;
|
export let active_section = null;
|
||||||
@ -1,6 +1,6 @@
|
|||||||
<script>
|
<script>
|
||||||
import Icon from '../components/Icon.html';
|
import Icon from '../components/Icon.svelte';
|
||||||
import Logo from '../components/Logo.html';
|
import Logo from '../components/Logo.svelte';
|
||||||
import contributors from './_contributors.js';
|
import contributors from './_contributors.js';
|
||||||
|
|
||||||
let sy = 0;
|
let sy = 0;
|
||||||
@ -1,5 +1,5 @@
|
|||||||
<script>
|
<script>
|
||||||
import CodeMirror from '../CodeMirror.html';
|
import CodeMirror from '../CodeMirror.svelte';
|
||||||
|
|
||||||
export let component;
|
export let component;
|
||||||
export let error;
|
export let error;
|
||||||
@ -1,6 +1,6 @@
|
|||||||
<script>
|
<script>
|
||||||
import ComponentSelector from './ComponentSelector.html';
|
import ComponentSelector from './ComponentSelector.svelte';
|
||||||
import ModuleEditor from './ModuleEditor.html';
|
import ModuleEditor from './ModuleEditor.svelte';
|
||||||
|
|
||||||
export let component_store;
|
export let component_store;
|
||||||
export let selected_store;
|
export let selected_store;
|
||||||
@ -1,7 +1,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import { createEventDispatcher } from 'svelte';
|
import { createEventDispatcher } from 'svelte';
|
||||||
import * as fleece from 'golden-fleece';
|
import * as fleece from 'golden-fleece';
|
||||||
import CodeMirror from '../CodeMirror.html';
|
import CodeMirror from '../CodeMirror.svelte';
|
||||||
|
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
@ -1,9 +1,9 @@
|
|||||||
<script>
|
<script>
|
||||||
import SplitPane from '../SplitPane.html';
|
import SplitPane from '../SplitPane.svelte';
|
||||||
import Viewer from './Viewer.html';
|
import Viewer from './Viewer.svelte';
|
||||||
import CompilerOptions from './CompilerOptions.html';
|
import CompilerOptions from './CompilerOptions.svelte';
|
||||||
import PropEditor from './PropEditor.html';
|
import PropEditor from './PropEditor.svelte';
|
||||||
import CodeMirror from '../CodeMirror.html';
|
import CodeMirror from '../CodeMirror.svelte';
|
||||||
|
|
||||||
export let bundle;
|
export let bundle;
|
||||||
export let js;
|
export let js;
|
||||||
@ -0,0 +1,90 @@
|
|||||||
|
export default class ReplProxy {
|
||||||
|
constructor(iframe) {
|
||||||
|
this.iframe = iframe;
|
||||||
|
this.cmdId = 1;
|
||||||
|
this.pendingCmds = new Map();
|
||||||
|
this.onPropUpdate = null;
|
||||||
|
this.onFetchProgress = null;
|
||||||
|
this.handle_event = (ev) => this.handleReplMessage(ev);
|
||||||
|
window.addEventListener("message", this.handle_event, false);
|
||||||
|
}
|
||||||
|
|
||||||
|
destroy() {
|
||||||
|
window.removeEventListener("message", this.handle_event);
|
||||||
|
}
|
||||||
|
|
||||||
|
iframeCommand(command, args) {
|
||||||
|
return new Promise( (resolve, reject) => {
|
||||||
|
this.cmdId = this.cmdId + 1;
|
||||||
|
this.pendingCmds.set(this.cmdId, { resolve: resolve, reject: reject });
|
||||||
|
this.iframe.contentWindow.postMessage({
|
||||||
|
action: command,
|
||||||
|
cmdId: this.cmdId,
|
||||||
|
args: args
|
||||||
|
}, '*')
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
handleCommandMessage(cmdData) {
|
||||||
|
let action = cmdData.action;
|
||||||
|
let id = cmdData.cmdId;
|
||||||
|
let handler = this.pendingCmds.get(id);
|
||||||
|
if (handler) {
|
||||||
|
|
||||||
|
this.pendingCmds.delete(id);
|
||||||
|
if (action == "cmdError") {
|
||||||
|
let { message, stack } = cmdData;
|
||||||
|
let e = new Error(message);
|
||||||
|
e.stack = stack;
|
||||||
|
console.log("repl cmd fail");
|
||||||
|
handler.reject(e)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (action == "cmdOk") {
|
||||||
|
handler.resolve(cmdData.args)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.error("command not found", id, cmdData, [...this.pendingCmds.keys()]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
handleReplMessage(ev) {
|
||||||
|
|
||||||
|
let action = ev.data.action;
|
||||||
|
if ( action == "cmdError" || action == "cmdOk" ) {
|
||||||
|
this.handleCommandMessage(ev.data);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (action == "prop_update") {
|
||||||
|
let { prop, value } = ev.data.args;
|
||||||
|
if (this.onPropUpdate)
|
||||||
|
this.onPropUpdate(prop, value)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (action == "fetch_progress") {
|
||||||
|
if (this.onFetchProgress)
|
||||||
|
this.onFetchProgress(ev.data.args.remaining)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
eval(script) {
|
||||||
|
return this.iframeCommand("eval", { script: script });
|
||||||
|
}
|
||||||
|
|
||||||
|
setProp(prop, value) {
|
||||||
|
return this.iframeCommand("set_prop", {prop, value})
|
||||||
|
}
|
||||||
|
|
||||||
|
bindProps(props) {
|
||||||
|
return this.iframeCommand("bind_props", { props: props })
|
||||||
|
}
|
||||||
|
|
||||||
|
handleLinks() {
|
||||||
|
return this.iframeCommand("catch_clicks", {});
|
||||||
|
}
|
||||||
|
|
||||||
|
fetchImports(bundle) {
|
||||||
|
return this.iframeCommand("fetch_imports", { bundle })
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue