mirror of https://github.com/sveltejs/svelte
Jacob Wright
6 years ago
committed by
GitHub
commit
5aba3ee535
@ -0,0 +1,4 @@
|
||||
if (!process.env.PUBLISH) {
|
||||
console.error('npm publish must be run with the PUBLISH environment variable set');
|
||||
process.exit(1);
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
export default {
|
||||
compileOptions: {
|
||||
filename: 'src/components/FooSwitcher.svelte',
|
||||
cssHash({ hash, css, name, filename }) {
|
||||
const minFilename = filename
|
||||
.split('/')
|
||||
.map(i => i.charAt(0).toLowerCase())
|
||||
.join('');
|
||||
return `sv-${name}-${minFilename}-${hash(css)}`;
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -0,0 +1 @@
|
||||
div.sv-FooSwitcher-scf-bzh57p{color:red}
|
||||
@ -0,0 +1,7 @@
|
||||
<div>red</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,27 @@
|
||||
export default {
|
||||
warnings: [
|
||||
{
|
||||
code: 'css-unused-selector',
|
||||
message: 'Unused CSS selector ":host > span"',
|
||||
pos: 147,
|
||||
start: {
|
||||
character: 147,
|
||||
column: 1,
|
||||
line: 18
|
||||
},
|
||||
end: {
|
||||
character: 159,
|
||||
column: 13,
|
||||
line: 18
|
||||
},
|
||||
frame: `
|
||||
16: }
|
||||
17:
|
||||
18: :host > span {
|
||||
^
|
||||
19: color: red;
|
||||
20: }
|
||||
`
|
||||
}
|
||||
]
|
||||
};
|
||||
@ -0,0 +1 @@
|
||||
:host h1.svelte-xyz{color:red}:host>h1.svelte-xyz{color:red}:host>.svelte-xyz{color:red}:host span.svelte-xyz{color:red}:host{color:red}
|
||||
@ -0,0 +1,31 @@
|
||||
<style>
|
||||
:host h1 {
|
||||
color: red;
|
||||
}
|
||||
|
||||
:host > h1 {
|
||||
color: red;
|
||||
}
|
||||
|
||||
:host > * {
|
||||
color: red;
|
||||
}
|
||||
|
||||
:host span {
|
||||
color: red;
|
||||
}
|
||||
|
||||
:host > span {
|
||||
color: red;
|
||||
}
|
||||
|
||||
:host {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Hello!</h1>
|
||||
|
||||
<div>
|
||||
<span>World!</span>
|
||||
</div>
|
||||
@ -0,0 +1,50 @@
|
||||
export default {
|
||||
warnings: [
|
||||
{
|
||||
code: 'css-unused-selector',
|
||||
message: 'Unused CSS selector ":global(input) + span"',
|
||||
pos: 239,
|
||||
start: {
|
||||
character: 239,
|
||||
column: 2,
|
||||
line: 9
|
||||
},
|
||||
end: {
|
||||
character: 260,
|
||||
column: 23,
|
||||
line: 9
|
||||
},
|
||||
frame: `
|
||||
7: :global(input) ~ p { color: red; }
|
||||
8:
|
||||
9: :global(input) + span { color: red; }
|
||||
^
|
||||
10: :global(input) ~ span { color: red; }
|
||||
11: </style>
|
||||
`
|
||||
},
|
||||
{
|
||||
code: 'css-unused-selector',
|
||||
message: 'Unused CSS selector ":global(input) ~ span"',
|
||||
pos: 279,
|
||||
start: {
|
||||
character: 279,
|
||||
column: 2,
|
||||
line: 10
|
||||
},
|
||||
end: {
|
||||
character: 300,
|
||||
column: 23,
|
||||
line: 10
|
||||
},
|
||||
frame: `
|
||||
8:
|
||||
9: :global(input) + span { color: red; }
|
||||
10: :global(input) ~ span { color: red; }
|
||||
^
|
||||
11: </style>
|
||||
12:
|
||||
`
|
||||
}
|
||||
]
|
||||
};
|
||||
@ -0,0 +1 @@
|
||||
input+div.svelte-xyz{color:red}input~div.svelte-xyz{color:red}input+h1.svelte-xyz{color:red}input~h1.svelte-xyz{color:red}input+p.svelte-xyz{color:red}input~p.svelte-xyz{color:red}
|
||||
@ -0,0 +1,21 @@
|
||||
<style>
|
||||
:global(input) + div { color: red; }
|
||||
:global(input) ~ div { color: red; }
|
||||
:global(input) + h1 { color: red; }
|
||||
:global(input) ~ h1 { color: red; }
|
||||
:global(input) + p { color: red; }
|
||||
:global(input) ~ p { color: red; }
|
||||
|
||||
:global(input) + span { color: red; }
|
||||
:global(input) ~ span { color: red; }
|
||||
</style>
|
||||
|
||||
<h1>Hello!</h1>
|
||||
|
||||
<div>
|
||||
<span>World!</span>
|
||||
</div>
|
||||
|
||||
{#each [] as _}
|
||||
<p />
|
||||
{/each}
|
||||
@ -0,0 +1,22 @@
|
||||
<svelte:options tag="my-app"/>
|
||||
|
||||
<script>
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
|
||||
let el;
|
||||
let parentEl;
|
||||
|
||||
onMount(() => {
|
||||
parentEl = el.parentNode.host.parentElement;
|
||||
|
||||
return () => {
|
||||
parentEl.dataset.onMountDestroyed = true;
|
||||
}
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
parentEl.dataset.destroyed = true;
|
||||
})
|
||||
</script>
|
||||
|
||||
<div bind:this={el}></div>
|
||||
@ -0,0 +1,11 @@
|
||||
import * as assert from 'assert';
|
||||
import './main.svelte';
|
||||
|
||||
export default function (target) {
|
||||
target.innerHTML = '<my-app/>';
|
||||
const el = target.querySelector('my-app');
|
||||
target.removeChild(el);
|
||||
|
||||
assert.ok(target.dataset.onMountDestroyed);
|
||||
assert.equal(target.dataset.destroyed, undefined);
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
<script>
|
||||
export let value;
|
||||
export let value2;
|
||||
</script>
|
||||
|
||||
{value}{value2}
|
||||
@ -0,0 +1,5 @@
|
||||
export default {
|
||||
async test({ assert, component }) {
|
||||
assert.equal(component.object_updates, component.primitive_updates);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,13 @@
|
||||
<script>
|
||||
import Component from './Component.svelte';
|
||||
|
||||
export let primitive_updates = 0;
|
||||
export let object_updates = 0;
|
||||
|
||||
const obj = { foo: '' };
|
||||
let foo = 'bar';
|
||||
$: if (obj) object_updates++;
|
||||
$: if (foo) primitive_updates++;
|
||||
</script>
|
||||
|
||||
<Component bind:value={obj.foo} bind:value2={foo} />
|
||||
@ -0,0 +1,5 @@
|
||||
export default {
|
||||
error(assert, err) {
|
||||
assert.ok(err.message === "Cannot access 'c' before initialization" || err.message === 'c is not defined');
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,7 @@
|
||||
<script>
|
||||
let array = [{a: 1, c: 2}];
|
||||
</script>
|
||||
|
||||
{#each array as { a, b = c, c }}
|
||||
{a}{b}{c}
|
||||
{/each}
|
||||
@ -0,0 +1,23 @@
|
||||
export default {
|
||||
html: `
|
||||
<input />
|
||||
<input />
|
||||
`,
|
||||
ssrHtml: `
|
||||
<input />
|
||||
<input value="hello" />
|
||||
`,
|
||||
|
||||
test({ assert, component, target, window }) {
|
||||
const [input1, input2] = target.querySelectorAll('input');
|
||||
assert.equal(input1.value, '');
|
||||
assert.equal(input2.value, 'hello');
|
||||
|
||||
const inputEvent = new window.InputEvent('input');
|
||||
|
||||
input2.value = 'world';
|
||||
input2.dispatchEvent(inputEvent);
|
||||
assert.equal(input2.value, 'world');
|
||||
assert.equal(component.array[1].value, 'world');
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,7 @@
|
||||
<script>
|
||||
export let array = [{ value: '' }, {}];
|
||||
</script>
|
||||
|
||||
{#each array as { value = "hello" }}
|
||||
<input bind:value />
|
||||
{/each}
|
||||
@ -1,7 +1,8 @@
|
||||
<script>
|
||||
export let animalEntries;
|
||||
export const defaultHeight = 30;
|
||||
</script>
|
||||
|
||||
{#each animalEntries as { animal, species = 'unknown', kilogram: weight = 50 , ...props } }
|
||||
<p {...props}>{animal} - {species} - {weight}kg</p>
|
||||
{#each animalEntries as { animal, species = 'unknown', kilogram: weight = 50, pound = (weight * 2.2).toFixed(0), height = defaultHeight, bmi = weight / (height * height), ...props } }
|
||||
<p {...props}>{animal} - {species} - {weight}kg ({pound} lb) - {height}cm - {bmi}</p>
|
||||
{/each}
|
||||
|
||||
@ -0,0 +1 @@
|
||||
export default {};
|
||||
@ -0,0 +1,25 @@
|
||||
<script>
|
||||
function test(store) {
|
||||
// allow declaring $store as parameter
|
||||
// it's not referring to the store value of the
|
||||
// `store` variable in the upper scope
|
||||
return derived(store, $store => {
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
function test2(store) {
|
||||
// allow declaring the `$store` variable
|
||||
// it is not referring to the store value of the `store` variable
|
||||
let $store;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
on:test={(store) => {
|
||||
derived(store, $store => {});
|
||||
}}
|
||||
on:test2={(store) => {
|
||||
let $store;
|
||||
}}
|
||||
/>
|
||||
Loading…
Reference in new issue