Conduitry
6 years ago
|
Before Width: | Height: | Size: 46 KiB |
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 275 B After Width: | Height: | Size: 184 B |
|
Before Width: | Height: | Size: 229 B After Width: | Height: | Size: 168 B |
|
Before Width: | Height: | Size: 221 B After Width: | Height: | Size: 161 B |
|
Before Width: | Height: | Size: 405 B After Width: | Height: | Size: 320 B |
|
Before Width: | Height: | Size: 212 B After Width: | Height: | Size: 155 B |
|
Before Width: | Height: | Size: 213 B After Width: | Height: | Size: 155 B |
|
Before Width: | Height: | Size: 333 B After Width: | Height: | Size: 256 B |
|
Before Width: | Height: | Size: 411 B After Width: | Height: | Size: 315 B |
|
Before Width: | Height: | Size: 415 B After Width: | Height: | Size: 344 B |
|
Before Width: | Height: | Size: 356 B After Width: | Height: | Size: 258 B |
|
Before Width: | Height: | Size: 290 B After Width: | Height: | Size: 215 B |
|
Before Width: | Height: | Size: 320 B After Width: | Height: | Size: 260 B |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 5.7 KiB After Width: | Height: | Size: 3.3 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 280 B After Width: | Height: | Size: 221 B |
|
Before Width: | Height: | Size: 303 B After Width: | Height: | Size: 242 B |
|
Before Width: | Height: | Size: 260 B After Width: | Height: | Size: 200 B |
|
Before Width: | Height: | Size: 354 B After Width: | Height: | Size: 311 B |
|
Before Width: | Height: | Size: 334 B After Width: | Height: | Size: 280 B |
|
Before Width: | Height: | Size: 262 B After Width: | Height: | Size: 193 B |
|
Before Width: | Height: | Size: 292 B After Width: | Height: | Size: 239 B |
|
Before Width: | Height: | Size: 111 KiB After Width: | Height: | Size: 108 KiB |
@ -0,0 +1,5 @@
|
||||
export const reserved_keywords = new Set(["$$props", "$$restProps"]);
|
||||
|
||||
export function is_reserved_keyword(name) {
|
||||
return reserved_keywords.has(name);
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
<div>Hello world</div>
|
||||
@ -0,0 +1,2 @@
|
||||
<main>This should be thrown away</main>
|
||||
<div>hello</div>
|
||||
@ -0,0 +1 @@
|
||||
export default {};
|
||||
@ -0,0 +1 @@
|
||||
<div>Hello world</div>
|
||||
@ -0,0 +1 @@
|
||||
<div>Hello world</div>
|
||||
@ -0,0 +1 @@
|
||||
<main>This should be thrown away</main>
|
||||
@ -0,0 +1 @@
|
||||
export default {};
|
||||
@ -0,0 +1 @@
|
||||
<div>Hello world</div>
|
||||
@ -0,0 +1,12 @@
|
||||
<script>
|
||||
export let a;
|
||||
export function b() {}
|
||||
export let c = 1;
|
||||
|
||||
$: length = Object.keys($$restProps).length;
|
||||
$: values = Object.values($$restProps);
|
||||
</script>
|
||||
<div>Length: {length}</div>
|
||||
<div>Values: {values.join(',')}</div>
|
||||
|
||||
<div {...$$restProps} />
|
||||
@ -0,0 +1,54 @@
|
||||
export default {
|
||||
props: {
|
||||
a: 3,
|
||||
b: 4,
|
||||
c: 5,
|
||||
d: 6
|
||||
},
|
||||
html: `
|
||||
<div>Length: 3</div>
|
||||
<div>Values: 4,5,1</div>
|
||||
<div d="4" e="5" foo="1"></div>
|
||||
<button></button><button></button><button></button><button></button>
|
||||
`,
|
||||
async test({ assert, target, window, }) {
|
||||
const [btn1, btn2, btn3, btn4] = target.querySelectorAll('button');
|
||||
const clickEvent = new window.MouseEvent('click');
|
||||
|
||||
await btn1.dispatchEvent(clickEvent);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<div>Length: 3</div>
|
||||
<div>Values: 4,5,1</div>
|
||||
<div d="4" e="5" foo="1"></div>
|
||||
<button></button><button></button><button></button><button></button>
|
||||
`);
|
||||
|
||||
await btn2.dispatchEvent(clickEvent);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<div>Length: 3</div>
|
||||
<div>Values: 34,5,1</div>
|
||||
<div d="34" e="5" foo="1"></div>
|
||||
<button></button><button></button><button></button><button></button>
|
||||
`);
|
||||
|
||||
await btn3.dispatchEvent(clickEvent);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<div>Length: 3</div>
|
||||
<div>Values: 34,5,31</div>
|
||||
<div d="34" e="5" foo="31"></div>
|
||||
<button></button><button></button><button></button><button></button>
|
||||
`);
|
||||
|
||||
await btn4.dispatchEvent(clickEvent);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<div>Length: 4</div>
|
||||
<div>Values: 34,5,31,2</div>
|
||||
<div d="34" e="5" foo="31" bar="2"></div>
|
||||
<button></button><button></button><button></button><button></button>
|
||||
`);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,25 @@
|
||||
<script>
|
||||
import App from './App.svelte';
|
||||
let a = 1, b = 2, c = 3, d = 4, e = 5;
|
||||
let f = { foo: 1 };
|
||||
|
||||
function updateProps() {
|
||||
a = 31;
|
||||
b = 32;
|
||||
}
|
||||
function updateRest() {
|
||||
d = 34;
|
||||
}
|
||||
function updateSpread() {
|
||||
f.foo = 31;
|
||||
}
|
||||
function updateSpread2() {
|
||||
f.bar = 2;
|
||||
}
|
||||
</script>
|
||||
|
||||
<App {a} {b} {c} {d} {e} {...f} />
|
||||
<button on:click={updateProps}></button>
|
||||
<button on:click={updateRest}></button>
|
||||
<button on:click={updateSpread}></button>
|
||||
<button on:click={updateSpread2}></button>
|
||||
@ -0,0 +1,13 @@
|
||||
<script>
|
||||
export let a;
|
||||
export function b() {}
|
||||
export let c = 1;
|
||||
|
||||
$: length = Object.keys($$restProps).length;
|
||||
$: values = Object.values($$restProps);
|
||||
</script>
|
||||
<div>Length: {length}</div>
|
||||
<div>Values: {values.join(',')}</div>
|
||||
|
||||
<div {...$$restProps} />
|
||||
<div {...$$props} />
|
||||
@ -0,0 +1,60 @@
|
||||
export default {
|
||||
props: {
|
||||
a: 3,
|
||||
b: 4,
|
||||
c: 5,
|
||||
d: 6
|
||||
},
|
||||
html: `
|
||||
<div>Length: 3</div>
|
||||
<div>Values: 4,5,1</div>
|
||||
<div d="4" e="5" foo="1"></div>
|
||||
<div a="1" b="2" c="3" d="4" e="5" foo="1"></div>
|
||||
<button></button><button></button><button></button><button></button>
|
||||
`,
|
||||
|
||||
async test({ assert, target, window, }) {
|
||||
const [btn1, btn2, btn3, btn4] = target.querySelectorAll('button');
|
||||
const clickEvent = new window.MouseEvent('click');
|
||||
|
||||
await btn1.dispatchEvent(clickEvent);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<div>Length: 3</div>
|
||||
<div>Values: 4,5,1</div>
|
||||
<div d="4" e="5" foo="1"></div>
|
||||
<div a="31" b="32" c="3" d="4" e="5" foo="1"></div>
|
||||
<button></button><button></button><button></button><button></button>
|
||||
`);
|
||||
|
||||
await btn2.dispatchEvent(clickEvent);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<div>Length: 3</div>
|
||||
<div>Values: 34,5,1</div>
|
||||
<div d="34" e="5" foo="1"></div>
|
||||
<div a="31" b="32" c="3" d="34" e="5" foo="1"></div>
|
||||
<button></button><button></button><button></button><button></button>
|
||||
`);
|
||||
|
||||
await btn3.dispatchEvent(clickEvent);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<div>Length: 3</div>
|
||||
<div>Values: 34,5,31</div>
|
||||
<div d="34" e="5" foo="31"></div>
|
||||
<div a="31" b="32" c="3" d="34" e="5" foo="31"></div>
|
||||
<button></button><button></button><button></button><button></button>
|
||||
`);
|
||||
|
||||
await btn4.dispatchEvent(clickEvent);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<div>Length: 4</div>
|
||||
<div>Values: 34,5,31,2</div>
|
||||
<div d="34" e="5" foo="31" bar="2"></div>
|
||||
<div a="31" b="32" c="3" d="34" e="5" foo="31" bar="2"></div>
|
||||
<button></button><button></button><button></button><button></button>
|
||||
`);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,25 @@
|
||||
<script>
|
||||
import App from './App.svelte';
|
||||
let a = 1, b = 2, c = 3, d = 4, e = 5;
|
||||
let f = { foo: 1 };
|
||||
|
||||
function updateProps() {
|
||||
a = 31;
|
||||
b = 32;
|
||||
}
|
||||
function updateRest() {
|
||||
d = 34;
|
||||
}
|
||||
function updateSpread() {
|
||||
f.foo = 31;
|
||||
}
|
||||
function updateSpread2() {
|
||||
f.bar = 2;
|
||||
}
|
||||
</script>
|
||||
|
||||
<App {a} {b} {c} {d} {e} {...f} />
|
||||
<button on:click={updateProps}></button>
|
||||
<button on:click={updateRest}></button>
|
||||
<button on:click={updateSpread}></button>
|
||||
<button on:click={updateSpread2}></button>
|
||||
@ -0,0 +1,7 @@
|
||||
<script>
|
||||
import { model } from "./store.svelte";
|
||||
export let value = '';
|
||||
</script>
|
||||
|
||||
<input bind:value={$model} />
|
||||
{value}
|
||||
@ -0,0 +1,7 @@
|
||||
<script>
|
||||
import Inner from "./Inner.svelte";
|
||||
export let defaultValue = '';
|
||||
export let slotProps = '';
|
||||
</script>
|
||||
|
||||
<slot {slotProps}><Inner value={defaultValue} /></slot>
|
||||
@ -0,0 +1,39 @@
|
||||
export default {
|
||||
html: `<input> <input> <input>`,
|
||||
ssrHtml: `<input value="Blub"> <input value="Blub"> <input value="Blub">`,
|
||||
|
||||
async test({ assert, target, component, window }) {
|
||||
const [input1, input2, inputFallback] = target.querySelectorAll("input");
|
||||
|
||||
assert.equal(component.getSubscriberCount(), 3);
|
||||
|
||||
input1.value = "a";
|
||||
await input1.dispatchEvent(new window.Event("input"));
|
||||
input1.value = "ab";
|
||||
await input1.dispatchEvent(new window.Event("input"));
|
||||
assert.equal(input1.value, "ab");
|
||||
assert.equal(input2.value, "ab");
|
||||
assert.equal(inputFallback.value, "ab");
|
||||
|
||||
component.props = "hello";
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<input> hello
|
||||
<input> hello
|
||||
<input>
|
||||
`
|
||||
);
|
||||
|
||||
component.fallback = "world";
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<input> hello
|
||||
<input> hello
|
||||
<input> world
|
||||
`
|
||||
);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,23 @@
|
||||
<script>
|
||||
import Outer from "./Outer.svelte";
|
||||
import Inner from "./Inner.svelte";
|
||||
import {model} from "./store.svelte";
|
||||
|
||||
export let props = '';
|
||||
export let fallback = '';
|
||||
|
||||
export function getSubscriberCount() {
|
||||
return model.getCount();
|
||||
}
|
||||
</script>
|
||||
|
||||
<Outer slotProps={props} defaultValue={fallback} let:slotProps>
|
||||
<Inner value={slotProps} />
|
||||
</Outer>
|
||||
|
||||
<Outer slotProps={props} defaultValue={fallback} let:slotProps>
|
||||
<Inner value={slotProps} />
|
||||
</Outer>
|
||||
|
||||
<Outer slotProps={props} defaultValue={fallback}>
|
||||
</Outer>
|
||||
@ -0,0 +1,23 @@
|
||||
<script context="module">
|
||||
let value = 'Blub';
|
||||
let count = 0;
|
||||
const subscribers = new Set();
|
||||
export const model = {
|
||||
subscribe(fn) {
|
||||
subscribers.add(fn);
|
||||
count ++;
|
||||
fn(value);
|
||||
return () => {
|
||||
count--;
|
||||
subscribers.delete(fn);
|
||||
};
|
||||
},
|
||||
set(v) {
|
||||
value = v;
|
||||
subscribers.forEach(fn => fn(v));
|
||||
},
|
||||
getCount() {
|
||||
return count;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,7 @@
|
||||
<script>
|
||||
export let foo = undefined;
|
||||
|
||||
</script>
|
||||
|
||||
<div>{foo}</div>
|
||||
<div>{JSON.stringify($$props)}</div>
|
||||
@ -0,0 +1,7 @@
|
||||
export default {
|
||||
compileOptions: {
|
||||
dev: true
|
||||
},
|
||||
|
||||
warnings: []
|
||||
};
|
||||
@ -0,0 +1,5 @@
|
||||
<script>
|
||||
import Foo from './Foo.svelte';
|
||||
</script>
|
||||
|
||||
<Foo fo="sho"/>
|
||||
@ -0,0 +1,37 @@
|
||||
export default {
|
||||
props: {
|
||||
animals: ['alpaca', 'baboon', 'capybara'],
|
||||
foo: 'something else'
|
||||
},
|
||||
|
||||
html: `
|
||||
before
|
||||
<p>alpaca</p>
|
||||
<p>baboon</p>
|
||||
<p>capybara</p>
|
||||
after
|
||||
`,
|
||||
|
||||
test({ assert, component, target }) {
|
||||
component.animals = [];
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
before
|
||||
<p>no animals, but rather something else</p>
|
||||
after
|
||||
`);
|
||||
|
||||
component.foo = 'something other';
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
before
|
||||
<p>no animals, but rather something other</p>
|
||||
after
|
||||
`);
|
||||
|
||||
component.animals = ['wombat'];
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
before
|
||||
<p>wombat</p>
|
||||
after
|
||||
`);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,12 @@
|
||||
<script>
|
||||
export let animals;
|
||||
export let foo;
|
||||
</script>
|
||||
|
||||
before
|
||||
{#each animals as animal (animal)}
|
||||
<p>{animal}</p>
|
||||
{:else}
|
||||
<p>no animals, but rather {foo}</p>
|
||||
{/each}
|
||||
after
|
||||
@ -0,0 +1,37 @@
|
||||
export default {
|
||||
props: {
|
||||
animals: ['alpaca', 'baboon', 'capybara'],
|
||||
foo: 'something else'
|
||||
},
|
||||
|
||||
html: `
|
||||
before
|
||||
<p>alpaca</p>
|
||||
<p>baboon</p>
|
||||
<p>capybara</p>
|
||||
after
|
||||
`,
|
||||
|
||||
test({ assert, component, target }) {
|
||||
component.animals = [];
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
before
|
||||
<p>no animals, but rather something else</p>
|
||||
after
|
||||
`);
|
||||
|
||||
component.foo = 'something other';
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
before
|
||||
<p>no animals, but rather something other</p>
|
||||
after
|
||||
`);
|
||||
|
||||
component.animals = ['wombat'];
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
before
|
||||
<p>wombat</p>
|
||||
after
|
||||
`);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,12 @@
|
||||
<script>
|
||||
export let animals;
|
||||
export let foo;
|
||||
</script>
|
||||
|
||||
before
|
||||
{#each animals as animal}
|
||||
<p>{animal}</p>
|
||||
{:else}
|
||||
<p>no animals, but rather {foo}</p>
|
||||
{/each}
|
||||
after
|
||||
@ -0,0 +1,7 @@
|
||||
<script>
|
||||
export let count;
|
||||
</script>
|
||||
|
||||
{#if count > 0}
|
||||
<slot count={count-1}></slot>
|
||||
{/if}
|
||||
@ -0,0 +1,3 @@
|
||||
export default {
|
||||
html: '5 4 3 2 1 0',
|
||||
};
|
||||
@ -0,0 +1,10 @@
|
||||
<script>
|
||||
import Countdown from './Countdown.svelte';
|
||||
export let count = 5;
|
||||
</script>
|
||||
|
||||
{count}
|
||||
|
||||
<Countdown {count} let:count={i}>
|
||||
<svelte:self count={i} />
|
||||
</Countdown>
|
||||
@ -0,0 +1,16 @@
|
||||
<script>
|
||||
export let visible;
|
||||
|
||||
function foo() {
|
||||
return {
|
||||
duration: 100,
|
||||
css: t => {
|
||||
return `opacity: ${t}`;
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if visible}
|
||||
<div transition:foo></div>
|
||||
{/if}
|
||||
@ -0,0 +1,58 @@
|
||||
<script>
|
||||
import { onMount, onDestroy, tick } from 'svelte';
|
||||
|
||||
export let component;
|
||||
|
||||
let frame;
|
||||
let doc;
|
||||
let content;
|
||||
|
||||
$: mountComponent(doc, component);
|
||||
$: updateProps($$props);
|
||||
|
||||
function mountComponent(doc) {
|
||||
if (content) content.$destroy();
|
||||
if (doc && component) {
|
||||
const { component, ...props } = $$props;
|
||||
content = new component({ target: doc.body, props });
|
||||
}
|
||||
}
|
||||
|
||||
function updateProps(props) {
|
||||
if (content) {
|
||||
const { component, ...rest } = props;
|
||||
content.$set(rest);
|
||||
}
|
||||
}
|
||||
|
||||
function loadHandler() {
|
||||
doc = frame.contentDocument;
|
||||
// import styles
|
||||
Array.from(document.querySelectorAll('style, link[rel="stylesheet"]'))
|
||||
.forEach(node => doc.head.appendChild(node.cloneNode(true)));
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
await tick();
|
||||
if (frame.contentDocument.readyState === 'complete' && frame.contentDocument.defaultView) {
|
||||
loadHandler();
|
||||
} else {
|
||||
frame.addEventListener('load', loadHandler);
|
||||
}
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
if (frame) frame.removeEventListener('load', loadHandler);
|
||||
if (content) content.$destroy();
|
||||
});
|
||||
</script>
|
||||
|
||||
<iframe bind:this={frame} title="frame"></iframe>
|
||||
|
||||
<style>
|
||||
iframe {
|
||||
border: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,18 @@
|
||||
export default {
|
||||
skip_if_ssr: true,
|
||||
|
||||
async test({ assert, component, target, window, raf }) {
|
||||
const frame = target.querySelector('iframe');
|
||||
await Promise.resolve();
|
||||
|
||||
component.visible = true;
|
||||
const div = frame.contentDocument.querySelector('div');
|
||||
|
||||
raf.tick(25);
|
||||
|
||||
component.visible = false;
|
||||
|
||||
raf.tick(26);
|
||||
assert.ok(~div.style.animation.indexOf('25ms'));
|
||||
},
|
||||
};
|
||||
@ -0,0 +1,8 @@
|
||||
<script>
|
||||
import Frame from './Frame.svelte';
|
||||
import Foo from './Foo.svelte';
|
||||
|
||||
export let visible;
|
||||
</script>
|
||||
|
||||
<Frame component={Foo} {visible}/>
|
||||
@ -0,0 +1 @@
|
||||
[]
|
||||
@ -0,0 +1,7 @@
|
||||
<script>
|
||||
const dummy = {
|
||||
foo: 'bar'
|
||||
};
|
||||
</script>
|
||||
|
||||
<input bind:value={dummy.foo}>
|
||||
@ -0,0 +1,15 @@
|
||||
[{
|
||||
"code": "invalid-binding",
|
||||
"message": "Cannot bind to a variable which is not writable",
|
||||
"pos": 61,
|
||||
"start": {
|
||||
"line": 5,
|
||||
"column": 19,
|
||||
"character": 61
|
||||
},
|
||||
"end": {
|
||||
"line": 5,
|
||||
"column": 24,
|
||||
"character": 66
|
||||
}
|
||||
}]
|
||||
@ -0,0 +1,5 @@
|
||||
<script>
|
||||
const dummy = 'foo';
|
||||
</script>
|
||||
|
||||
<input bind:value={dummy}>
|
||||