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>
|
||||
import { onMount } from 'svelte';
|
||||
import List from './List.html';
|
||||
import Item from './Item.html';
|
||||
import List from './List.svelte';
|
||||
import Item from './Item.svelte';
|
||||
|
||||
let item;
|
||||
let page;
|
||||
@ -1,5 +1,5 @@
|
||||
<script>
|
||||
import Foo from './Foo.html';
|
||||
import Foo from './Foo.svelte';
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@ -1,8 +1,8 @@
|
||||
<svelte:meta immutable/>
|
||||
<svelte:options immutable/>
|
||||
|
||||
<script>
|
||||
import ImmutableTodo from './ImmutableTodo.html';
|
||||
import MutableTodo from './MutableTodo.html';
|
||||
import ImmutableTodo from './ImmutableTodo.svelte';
|
||||
import MutableTodo from './MutableTodo.svelte';
|
||||
|
||||
export let todos;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<svelte:meta immutable/>
|
||||
<svelte:options immutable/>
|
||||
|
||||
<script>
|
||||
import { afterUpdate } from 'svelte';
|
||||
@ -1,5 +1,5 @@
|
||||
<script>
|
||||
import Modal from './Modal.html';
|
||||
import Modal from './Modal.svelte';
|
||||
|
||||
export let showModal;
|
||||
</script>
|
||||
@ -1,5 +1,5 @@
|
||||
<script>
|
||||
import Nested from './Nested.html';
|
||||
import Nested from './Nested.svelte';
|
||||
</script>
|
||||
|
||||
<p>This is a top-level element.</p>
|
||||
@ -1,5 +1,5 @@
|
||||
<script>
|
||||
import Scatterplot from './Scatterplot.html';
|
||||
import Scatterplot from './Scatterplot.svelte';
|
||||
|
||||
export let a;
|
||||
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>
|
||||
import { fade } from 'svelte/transition';
|
||||
|
||||
export let visible;
|
||||
let visible;
|
||||
</script>
|
||||
|
||||
<input type=checkbox bind:checked={visible}> visible
|
||||
|
||||
{#if visible}
|
||||
<p transition:fade>fades in and out</p>
|
||||
{/if}
|
||||
{/if}
|
||||
@ -1,11 +1,11 @@
|
||||
<script>
|
||||
import { fly } from 'svelte/transition';
|
||||
|
||||
export let visible;
|
||||
let visible;
|
||||
</script>
|
||||
|
||||
<input type=checkbox bind:checked={visible}> visible
|
||||
|
||||
{#if visible}
|
||||
<p transition:fly="{{y: 200, duration: 1000}}">flies 200 pixels up, slowly</p>
|
||||
{/if}
|
||||
{/if}
|
||||
@ -1,11 +1,11 @@
|
||||
<script>
|
||||
import { fade, fly } from 'svelte/transition';
|
||||
|
||||
export let visible;
|
||||
let visible;
|
||||
</script>
|
||||
|
||||
<input type=checkbox bind:checked={visible}> visible
|
||||
|
||||
{#if visible}
|
||||
<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",
|
||||
"description": "TODO",
|
||||
"version": "0.0.1",
|
||||
"name": "svelte.technology",
|
||||
"version": "1.0.0",
|
||||
"description": "Docs and examples for Svelte",
|
||||
"scripts": {
|
||||
"dev": "sapper dev",
|
||||
"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",
|
||||
"cy:run": "cypress run",
|
||||
"cy:open": "cypress open",
|
||||
"test": "run-p --race dev cy:run",
|
||||
"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"
|
||||
},
|
||||
"dependencies": {
|
||||
"codemirror": "^5.42.0",
|
||||
"compression": "^1.7.1",
|
||||
"codemirror": "^5.43.0",
|
||||
"compression": "^1.7.3",
|
||||
"devalue": "^1.1.0",
|
||||
"do-not-zip": "^1.0.0",
|
||||
"dotenv": "^6.2.0",
|
||||
"express": "^4.16.4",
|
||||
"express-session": "^1.15.6",
|
||||
"golden-fleece": "^1.0.9",
|
||||
"marked": "^0.5.2",
|
||||
"marked": "^0.6.0",
|
||||
"node-fetch": "^2.3.0",
|
||||
"passport": "^0.4.0",
|
||||
"passport-github": "^1.1.0",
|
||||
"prismjs": "^1.15.0",
|
||||
"session-file-store": "^1.2.0",
|
||||
"sirv": "^0.2.0",
|
||||
"shelljs": "^0.8.3",
|
||||
"sirv": "^0.2.2",
|
||||
"yootils": "0.0.14"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.0.0",
|
||||
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
|
||||
"@babel/plugin-transform-runtime": "^7.0.0",
|
||||
"@babel/preset-env": "^7.0.0",
|
||||
"@babel/runtime": "^7.0.0",
|
||||
"chokidar": "^2.0.4",
|
||||
"@babel/core": "^7.2.2",
|
||||
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
|
||||
"@babel/plugin-transform-runtime": "^7.2.0",
|
||||
"@babel/preset-env": "^7.3.1",
|
||||
"@babel/runtime": "^7.3.1",
|
||||
"chokidar": "^2.1.0",
|
||||
"degit": "^2.1.3",
|
||||
"eslint-plugin-svelte3": "git+https://github.com/sveltejs/eslint-plugin-svelte3.git",
|
||||
"now": "^12.1.14",
|
||||
"eslint-plugin-svelte3": "git+https://github.com/sveltejs/eslint-plugin-svelte3.git#semver:*",
|
||||
"now": "^13.1.3",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"rollup": "^0.68.0",
|
||||
"rollup-plugin-babel": "^4.0.2",
|
||||
"rollup-plugin-commonjs": "^9.1.6",
|
||||
"rollup": "^1.1.2",
|
||||
"rollup-plugin-babel": "^4.3.2",
|
||||
"rollup-plugin-commonjs": "^9.2.0",
|
||||
"rollup-plugin-json": "^3.1.0",
|
||||
"rollup-plugin-node-resolve": "^3.3.0",
|
||||
"rollup-plugin-replace": "^2.0.0",
|
||||
"rollup-plugin-svelte": "^4.2.1",
|
||||
"rollup-plugin-terser": "^1.0.1",
|
||||
"sapper": "^0.25.0-alpha2",
|
||||
"svelte": "^3.0.0-alpha10"
|
||||
"rollup-plugin-node-resolve": "^4.0.0",
|
||||
"rollup-plugin-replace": "^2.1.0",
|
||||
"rollup-plugin-svelte": "^5.0.1",
|
||||
"rollup-plugin-terser": "^4.0.4",
|
||||
"sapper": "^0.26.0-alpha.8",
|
||||
"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({
|
||||
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>
|
||||
import { onMount } from 'svelte';
|
||||
import Icon from './Icon.html';
|
||||
import Logo from './Logo.html';
|
||||
import Icon from './Icon.svelte';
|
||||
import Logo from './Logo.svelte';
|
||||
|
||||
export let segment;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<script>
|
||||
import InlineSvg from '../components/InlineSvg.html';
|
||||
import Nav from '../components/TopNav.html';
|
||||
import InlineSvg from '../components/InlineSvg.svelte';
|
||||
import Nav from '../components/TopNav.svelte';
|
||||
|
||||
export let child;
|
||||
export let path;
|
||||
@ -1,6 +1,6 @@
|
||||
<script>
|
||||
import { onMount, afterUpdate } from 'svelte';
|
||||
import Icon from '../../components/Icon.html';
|
||||
import Icon from '../../components/Icon.svelte';
|
||||
|
||||
export let sections = [];
|
||||
export let active_section = null;
|
||||
@ -1,6 +1,6 @@
|
||||
<script>
|
||||
import Icon from '../components/Icon.html';
|
||||
import Logo from '../components/Logo.html';
|
||||
import Icon from '../components/Icon.svelte';
|
||||
import Logo from '../components/Logo.svelte';
|
||||
import contributors from './_contributors.js';
|
||||
|
||||
let sy = 0;
|
||||
@ -1,5 +1,5 @@
|
||||
<script>
|
||||
import CodeMirror from '../CodeMirror.html';
|
||||
import CodeMirror from '../CodeMirror.svelte';
|
||||
|
||||
export let component;
|
||||
export let error;
|
||||
@ -1,6 +1,6 @@
|
||||
<script>
|
||||
import ComponentSelector from './ComponentSelector.html';
|
||||
import ModuleEditor from './ModuleEditor.html';
|
||||
import ComponentSelector from './ComponentSelector.svelte';
|
||||
import ModuleEditor from './ModuleEditor.svelte';
|
||||
|
||||
export let component_store;
|
||||
export let selected_store;
|
||||
@ -1,7 +1,7 @@
|
||||
<script>
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import * as fleece from 'golden-fleece';
|
||||
import CodeMirror from '../CodeMirror.html';
|
||||
import CodeMirror from '../CodeMirror.svelte';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<script>
|
||||
import SplitPane from '../SplitPane.html';
|
||||
import Viewer from './Viewer.html';
|
||||
import CompilerOptions from './CompilerOptions.html';
|
||||
import PropEditor from './PropEditor.html';
|
||||
import CodeMirror from '../CodeMirror.html';
|
||||
import SplitPane from '../SplitPane.svelte';
|
||||
import Viewer from './Viewer.svelte';
|
||||
import CompilerOptions from './CompilerOptions.svelte';
|
||||
import PropEditor from './PropEditor.svelte';
|
||||
import CodeMirror from '../CodeMirror.svelte';
|
||||
|
||||
export let bundle;
|
||||
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