mirror of https://github.com/sveltejs/svelte
Simon Holthausen
2 years ago
commit
b9ee487b58
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"svelte": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix: refine css `:global()` selector checks in a compound selector
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"svelte": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
breaking: warn on slots and event handlers in runes mode, error on `<slot>` + `{@render ...}` tag usage in same component
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"svelte": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix: fall back to component namespace when not statically determinable, add way to tell `<svelte:element>` the namespace at runtime
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"svelte": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix: remove memory leak from bind:this
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'svelte': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix: take outroing elements out of the flow when animating siblings
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"svelte": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix: remove memory leak from retaining old DOM elements
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"svelte": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
feat: add warning when using `$bindable` rune without calling it
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"svelte": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
feat: allow inspect reactivity map, set, date
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"svelte": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix: widen ownership when sub state is assigned to new state
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
error: {
|
||||||
|
code: 'conflicting-slot-usage',
|
||||||
|
message:
|
||||||
|
'Cannot use <slot> syntax and {@render ...} tags in the same component. Migrate towards {@render ...} tags completely.',
|
||||||
|
position: [71, 84]
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
<script>
|
||||||
|
let { children } = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{@render children()}
|
||||||
|
<slot></slot>
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
test({ assert, target }) {
|
||||||
|
const path = target.querySelector('path');
|
||||||
|
|
||||||
|
assert.equal(path?.namespaceURI, 'http://www.w3.org/2000/svg');
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
<svelte:options namespace="svg" />
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Svg from "./svg.svelte";
|
||||||
|
|
||||||
|
let tag = "path";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Svg>
|
||||||
|
<svelte:element this="{tag}" d="M21 12a9 9 0 1 1-6.219-8.56"/>
|
||||||
|
</Svg>
|
||||||
|
After Width: | Height: | Size: 24 B |
@ -0,0 +1,10 @@
|
|||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
async test({ assert, target }) {
|
||||||
|
assert.equal(target.querySelector('path')?.namespaceURI, 'http://www.w3.org/2000/svg');
|
||||||
|
|
||||||
|
await target.querySelector('button')?.click();
|
||||||
|
assert.equal(target.querySelector('div')?.namespaceURI, 'http://www.w3.org/1999/xhtml');
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
<script>
|
||||||
|
let tag = $state('path');
|
||||||
|
let xmlns = $state('http://www.w3.org/2000/svg');
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button onclick={() => {
|
||||||
|
tag = 'div';
|
||||||
|
xmlns = null;
|
||||||
|
}}>change</button>
|
||||||
|
|
||||||
|
<!-- wrapper necessary or else jsdom says this is always an xhtml namespace -->
|
||||||
|
<svg>
|
||||||
|
<svelte:element this={tag} xmlns={xmlns} />
|
||||||
|
</svg>
|
||||||
@ -0,0 +1,39 @@
|
|||||||
|
import { flushSync } from '../../../../src/index-client';
|
||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
html: `<button>add item</button><button>make span</button><button>reverse</button>`,
|
||||||
|
|
||||||
|
async test({ assert, target }) {
|
||||||
|
const [btn1, btn2, btn3] = target.querySelectorAll('button');
|
||||||
|
|
||||||
|
flushSync(() => {
|
||||||
|
btn1?.click();
|
||||||
|
btn1?.click();
|
||||||
|
btn1?.click();
|
||||||
|
});
|
||||||
|
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`<button>add item</button><button>make span</button><button>reverse</button><div>Item 1</div><div>Item 2</div><div>Item 3</div>`
|
||||||
|
);
|
||||||
|
|
||||||
|
flushSync(() => {
|
||||||
|
btn2?.click();
|
||||||
|
});
|
||||||
|
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`<button>add item</button><button>make span</button><button>reverse</button><span>Item 1</span><span>Item 2</span><span>Item 3</span>`
|
||||||
|
);
|
||||||
|
|
||||||
|
flushSync(() => {
|
||||||
|
btn3?.click();
|
||||||
|
});
|
||||||
|
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`<button>add item</button><button>make span</button><button>reverse</button><span>Item 3</span><span>Item 2</span><span>Item 1</span>`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
<script>
|
||||||
|
let items = $state([]);
|
||||||
|
|
||||||
|
function add_item() {
|
||||||
|
items.push({
|
||||||
|
id: items.length,
|
||||||
|
text: 'Item ' + (items.length + 1),
|
||||||
|
html: '<div>Item ' + (items.length + 1) + '</div>',
|
||||||
|
dom: null,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function make_span() {
|
||||||
|
items.forEach(item => {
|
||||||
|
item.html = item.html.replace(/div/g, 'span')
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function reverse() {
|
||||||
|
items.reverse();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button on:click={add_item}>add item</button>
|
||||||
|
<button on:click={make_span}>make span</button>
|
||||||
|
<button on:click={reverse}>reverse</button>
|
||||||
|
|
||||||
|
{#each items as item (item.id)}
|
||||||
|
{@html item.html}
|
||||||
|
{/each}
|
||||||
@ -0,0 +1,81 @@
|
|||||||
|
import { test } from '../../test';
|
||||||
|
import { flushSync } from 'svelte';
|
||||||
|
import { log } from './log';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
compileOptions: {
|
||||||
|
dev: true
|
||||||
|
},
|
||||||
|
before_test() {
|
||||||
|
log.length = 0;
|
||||||
|
},
|
||||||
|
async test({ assert, target }) {
|
||||||
|
const [in1, in2] = target.querySelectorAll('input');
|
||||||
|
const [b1, b2, b3] = target.querySelectorAll('button');
|
||||||
|
|
||||||
|
assert.deepEqual(log, [
|
||||||
|
{ label: 'map', type: 'init', values: [] },
|
||||||
|
{ label: 'set', type: 'init', values: [] },
|
||||||
|
{ label: 'date', type: 'init', values: 1712966400000 }
|
||||||
|
]);
|
||||||
|
log.length = 0;
|
||||||
|
|
||||||
|
flushSync(() => b1.click()); // map.set('key', 'value')
|
||||||
|
|
||||||
|
in1.value = 'name';
|
||||||
|
in2.value = 'Svelte';
|
||||||
|
in1.dispatchEvent(new window.Event('input', { bubbles: true }));
|
||||||
|
in2.dispatchEvent(new window.Event('input', { bubbles: true }));
|
||||||
|
flushSync(() => b1.click()); // map.set('name', 'Svelte')
|
||||||
|
|
||||||
|
in2.value = 'World';
|
||||||
|
in2.dispatchEvent(new window.Event('input', { bubbles: true }));
|
||||||
|
flushSync(() => b1.click()); // map.set('name', 'World')
|
||||||
|
flushSync(() => b1.click()); // map.set('name', 'World')
|
||||||
|
|
||||||
|
assert.deepEqual(log, [
|
||||||
|
{ label: 'map', type: 'update', values: [['key', 'value']] },
|
||||||
|
{
|
||||||
|
label: 'map',
|
||||||
|
type: 'update',
|
||||||
|
values: [
|
||||||
|
['key', 'value'],
|
||||||
|
['name', 'Svelte']
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'map',
|
||||||
|
type: 'update',
|
||||||
|
values: [
|
||||||
|
['key', 'value'],
|
||||||
|
['name', 'World']
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
log.length = 0;
|
||||||
|
|
||||||
|
flushSync(() => b2.click()); // set.add('name');
|
||||||
|
|
||||||
|
in1.value = 'Svelte';
|
||||||
|
in1.dispatchEvent(new window.Event('input', { bubbles: true }));
|
||||||
|
flushSync(() => b2.click()); // set.add('Svelte');
|
||||||
|
|
||||||
|
flushSync(() => b2.click()); // set.add('Svelte');
|
||||||
|
|
||||||
|
assert.deepEqual(log, [
|
||||||
|
{ label: 'set', type: 'update', values: ['name'] },
|
||||||
|
{ label: 'set', type: 'update', values: ['name', 'Svelte'] }
|
||||||
|
]);
|
||||||
|
log.length = 0;
|
||||||
|
|
||||||
|
flushSync(() => b3.click()); // date.minutes++
|
||||||
|
flushSync(() => b3.click()); // date.minutes++
|
||||||
|
flushSync(() => b3.click()); // date.minutes++
|
||||||
|
|
||||||
|
assert.deepEqual(log, [
|
||||||
|
{ label: 'date', type: 'update', values: 1712966460000 },
|
||||||
|
{ label: 'date', type: 'update', values: 1712966520000 },
|
||||||
|
{ label: 'date', type: 'update', values: 1712966580000 }
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
/** @type {any[]} */
|
||||||
|
export const log = [];
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
<script>
|
||||||
|
import { Map, Set, Date } from 'svelte/reactivity';
|
||||||
|
import { log } from './log';
|
||||||
|
|
||||||
|
const map = new Map();
|
||||||
|
const set = new Set();
|
||||||
|
const date = new Date('2024-04-13 00:00:00+0000');
|
||||||
|
let key = $state('key');
|
||||||
|
let value = $state('value');
|
||||||
|
|
||||||
|
$inspect(map).with((type, map) => {
|
||||||
|
log.push({ label: 'map', type, values: [...map] });
|
||||||
|
});
|
||||||
|
$inspect(set).with((type, set) => {
|
||||||
|
log.push({ label: 'set', type, values: [...set] });
|
||||||
|
});
|
||||||
|
$inspect(date).with((type, date) => {
|
||||||
|
log.push({ label: 'date', type, values: date.getTime() });
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<input bind:value={key} />
|
||||||
|
<input bind:value={value} />
|
||||||
|
|
||||||
|
<button on:click={() => map.set(key, value)}>map</button>
|
||||||
|
<button on:click={() => set.add(key)}>set</button>
|
||||||
|
<button on:click={() => date.setMinutes(date.getMinutes() + 1)}>date</button>
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
<script>
|
||||||
|
let { item } = $props();
|
||||||
|
|
||||||
|
function onclick() {
|
||||||
|
item.name = `${item.name} edited`
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div>{item?.name}</div>
|
||||||
|
<button {onclick}>Then click here</button>
|
||||||
@ -0,0 +1,41 @@
|
|||||||
|
import { tick } from 'svelte';
|
||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
/** @type {typeof console.warn} */
|
||||||
|
let warn;
|
||||||
|
|
||||||
|
/** @type {any[]} */
|
||||||
|
let warnings = [];
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
compileOptions: {
|
||||||
|
dev: true
|
||||||
|
},
|
||||||
|
|
||||||
|
before_test: () => {
|
||||||
|
warn = console.warn;
|
||||||
|
|
||||||
|
console.warn = (...args) => {
|
||||||
|
warnings.push(...args);
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
after_test: () => {
|
||||||
|
console.warn = warn;
|
||||||
|
warnings = [];
|
||||||
|
},
|
||||||
|
|
||||||
|
async test({ assert, target }) {
|
||||||
|
const [btn1, btn2] = target.querySelectorAll('button');
|
||||||
|
|
||||||
|
btn1.click();
|
||||||
|
await tick();
|
||||||
|
|
||||||
|
assert.deepEqual(warnings.length, 0);
|
||||||
|
|
||||||
|
btn2.click();
|
||||||
|
await tick();
|
||||||
|
|
||||||
|
assert.deepEqual(warnings.length, 1);
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
<script>
|
||||||
|
import Child from './Child.svelte';
|
||||||
|
|
||||||
|
let items = $state([{ id: "test", name: "this is a test"}, { id:"test2", name: "this is a second test"}]);
|
||||||
|
let found = $state();
|
||||||
|
|
||||||
|
function onclick() {
|
||||||
|
found = items.find(c => c.id === 'test2');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button {onclick}>First click here</button>
|
||||||
|
<Child item={found} />
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"code": "invalid-css-global-selector-list",
|
||||||
|
"message": ":global(...) must not contain type or universal selectors when used in a compound selector",
|
||||||
|
"start": {
|
||||||
|
"line": 20,
|
||||||
|
"column": 6
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"line": 20,
|
||||||
|
"column": 17
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
<style>
|
||||||
|
::foo:global([data-state='checked']) {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
::foo:global(.foo) {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
::foo:global(#foo) {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
::foo:global(::foo) {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
::foo:global(:foo) {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
:global(h1) {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
::foo:global(h1) {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h1>hello world</h1>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"code": "invalid-css-type-selector-placement",
|
||||||
|
"message": ":global(...) must not be followed with a type selector",
|
||||||
|
"start": {
|
||||||
|
"line": 17,
|
||||||
|
"column": 14
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"line": 17,
|
||||||
|
"column": 16
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
<style>
|
||||||
|
:global(.foo):foo {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
:global(.foo)::foo {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
:global(.foo).bar {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
:global(.foo)#baz {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
:global(.foo)[id] {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
:global(.foo)h1 {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h1 class="bar" id="baz">hello world</h1>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
<script>
|
||||||
|
function test() {
|
||||||
|
try {
|
||||||
|
throw new TypeError("oops1");
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error);
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
throw new TypeError("oops2");
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
test();
|
||||||
|
</script>
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({});
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
<script>
|
||||||
|
let { a = $bindable } = $props();
|
||||||
|
</script>
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"code": "invalid-bindable-declaration",
|
||||||
|
"message": "Bindable component properties are declared using $bindable() in runes mode. Did you forget to call the function?",
|
||||||
|
"start": {
|
||||||
|
"column": 7,
|
||||||
|
"line": 2
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"column": 20,
|
||||||
|
"line": 2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
<script>
|
||||||
|
let { foo } = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- ok -->
|
||||||
|
<button onclick={foo}>click me</button>
|
||||||
|
<Button onclick={foo}>click me</Button>
|
||||||
|
<Button on:click={foo}>click me</Button>
|
||||||
|
|
||||||
|
<!-- warn -->
|
||||||
|
<slot></slot>
|
||||||
|
<slot name="foo"></slot>
|
||||||
|
<button on:click={foo}>click me</button>
|
||||||
@ -0,0 +1,38 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"code": "deprecated-slot-element",
|
||||||
|
"end": {
|
||||||
|
"column": 13,
|
||||||
|
"line": 11
|
||||||
|
},
|
||||||
|
"message": "Using <slot> to render parent content is deprecated. Use {@render ...} tags instead.",
|
||||||
|
"start": {
|
||||||
|
"column": 0,
|
||||||
|
"line": 11
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"code": "deprecated-slot-element",
|
||||||
|
"end": {
|
||||||
|
"column": 24,
|
||||||
|
"line": 12
|
||||||
|
},
|
||||||
|
"message": "Using <slot> to render parent content is deprecated. Use {@render ...} tags instead.",
|
||||||
|
"start": {
|
||||||
|
"column": 0,
|
||||||
|
"line": 12
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"code": "deprecated-event-handler",
|
||||||
|
"end": {
|
||||||
|
"column": 22,
|
||||||
|
"line": 13
|
||||||
|
},
|
||||||
|
"message": "Using on:click to listen to the click event is is deprecated. Use the event attribute onclick instead.",
|
||||||
|
"start": {
|
||||||
|
"column": 8,
|
||||||
|
"line": 13
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
Loading…
Reference in new issue