mirror of https://github.com/sveltejs/svelte
fix: use fine grained for template if the component is not explicitly in legacy mode (#16232)
* fix: use fine grained for template if the component is not explicitly in legacy mode * chore: add comment Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> * fix: add `LabeledStatement` to `instance.ast` check * fix: spread `keys` * fix: snapshots * fix: use `compileOption.runes` if defined + add other tests --------- Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>pull/16216/head
parent
2af7ba2156
commit
922bee9a6d
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: use fine grained for template if the component is not explicitly in legacy mode
|
@ -0,0 +1,17 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
mode: ['client'],
|
||||
compileOptions: {
|
||||
runes: undefined
|
||||
},
|
||||
async test({ assert, target }) {
|
||||
const p = target.querySelector('p');
|
||||
const btn = target.querySelector('button');
|
||||
flushSync(() => {
|
||||
btn?.click();
|
||||
});
|
||||
assert.equal(p?.innerHTML, '0');
|
||||
}
|
||||
});
|
@ -0,0 +1,8 @@
|
||||
<svelte:options runes={false} />
|
||||
<script>
|
||||
import { get, set } from "./test.svelte.js";
|
||||
</script>
|
||||
|
||||
<p>{get()}</p>
|
||||
|
||||
<button onclick={()=>set()}></button>
|
@ -0,0 +1,9 @@
|
||||
let count = $state(0);
|
||||
|
||||
export function get() {
|
||||
return count;
|
||||
}
|
||||
|
||||
export function set() {
|
||||
count++;
|
||||
}
|
@ -0,0 +1,17 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
mode: ['client'],
|
||||
compileOptions: {
|
||||
runes: undefined
|
||||
},
|
||||
async test({ assert, target }) {
|
||||
const p = target.querySelector('p');
|
||||
const btn = target.querySelector('button');
|
||||
flushSync(() => {
|
||||
btn?.click();
|
||||
});
|
||||
assert.equal(p?.innerHTML, '0');
|
||||
}
|
||||
});
|
@ -0,0 +1,9 @@
|
||||
<script>
|
||||
import { get, set } from "./test.svelte.js";
|
||||
|
||||
$$props;
|
||||
</script>
|
||||
|
||||
<p>{get()}</p>
|
||||
|
||||
<button onclick={()=>set()}></button>
|
@ -0,0 +1,9 @@
|
||||
let count = $state(0);
|
||||
|
||||
export function get() {
|
||||
return count;
|
||||
}
|
||||
|
||||
export function set() {
|
||||
count++;
|
||||
}
|
@ -0,0 +1,17 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
mode: ['client'],
|
||||
compileOptions: {
|
||||
runes: undefined
|
||||
},
|
||||
async test({ assert, target }) {
|
||||
const p = target.querySelector('p');
|
||||
const btn = target.querySelector('button');
|
||||
flushSync(() => {
|
||||
btn?.click();
|
||||
});
|
||||
assert.equal(p?.innerHTML, '0');
|
||||
}
|
||||
});
|
@ -0,0 +1,9 @@
|
||||
<script>
|
||||
import { get, set } from "./test.svelte.js";
|
||||
|
||||
$$restProps;
|
||||
</script>
|
||||
|
||||
<p>{get()}</p>
|
||||
|
||||
<button onclick={()=>set()}></button>
|
@ -0,0 +1,9 @@
|
||||
let count = $state(0);
|
||||
|
||||
export function get() {
|
||||
return count;
|
||||
}
|
||||
|
||||
export function set() {
|
||||
count++;
|
||||
}
|
@ -0,0 +1,17 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
mode: ['client'],
|
||||
compileOptions: {
|
||||
runes: undefined
|
||||
},
|
||||
async test({ assert, target }) {
|
||||
const p = target.querySelector('p');
|
||||
const btn = target.querySelector('button');
|
||||
flushSync(() => {
|
||||
btn?.click();
|
||||
});
|
||||
assert.equal(p?.innerHTML, '1');
|
||||
}
|
||||
});
|
@ -0,0 +1,9 @@
|
||||
<script>
|
||||
import { get, set } from "./test.svelte.js";
|
||||
|
||||
export const x = 42;
|
||||
</script>
|
||||
|
||||
<p>{get()}</p>
|
||||
|
||||
<button onclick={()=>set()}></button>
|
@ -0,0 +1,9 @@
|
||||
let count = $state(0);
|
||||
|
||||
export function get() {
|
||||
return count;
|
||||
}
|
||||
|
||||
export function set() {
|
||||
count++;
|
||||
}
|
@ -0,0 +1,17 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
mode: ['client'],
|
||||
compileOptions: {
|
||||
runes: undefined
|
||||
},
|
||||
async test({ assert, target }) {
|
||||
const p = target.querySelector('p');
|
||||
const btn = target.querySelector('button');
|
||||
flushSync(() => {
|
||||
btn?.click();
|
||||
});
|
||||
assert.equal(p?.innerHTML, '0');
|
||||
}
|
||||
});
|
@ -0,0 +1,9 @@
|
||||
<script>
|
||||
import { get, set } from "./test.svelte.js";
|
||||
|
||||
$: console.log("");
|
||||
</script>
|
||||
|
||||
<p>{get()}</p>
|
||||
|
||||
<button onclick={()=>set()}></button>
|
@ -0,0 +1,9 @@
|
||||
let count = $state(0);
|
||||
|
||||
export function get() {
|
||||
return count;
|
||||
}
|
||||
|
||||
export function set() {
|
||||
count++;
|
||||
}
|
@ -0,0 +1,17 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
mode: ['client'],
|
||||
compileOptions: {
|
||||
runes: undefined
|
||||
},
|
||||
async test({ assert, target }) {
|
||||
const p = target.querySelector('p');
|
||||
const btn = target.querySelector('button');
|
||||
flushSync(() => {
|
||||
btn?.click();
|
||||
});
|
||||
assert.equal(p?.innerHTML, '0');
|
||||
}
|
||||
});
|
@ -0,0 +1,10 @@
|
||||
<script>
|
||||
import { get, set } from "./test.svelte.js";
|
||||
|
||||
export let x = 42;
|
||||
</script>
|
||||
|
||||
{x}
|
||||
<p>{get()}</p>
|
||||
|
||||
<button onclick={()=>set()}></button>
|
@ -0,0 +1,9 @@
|
||||
let count = $state(0);
|
||||
|
||||
export function get() {
|
||||
return count;
|
||||
}
|
||||
|
||||
export function set() {
|
||||
count++;
|
||||
}
|
@ -0,0 +1,17 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
mode: ['client'],
|
||||
compileOptions: {
|
||||
runes: undefined
|
||||
},
|
||||
async test({ assert, target }) {
|
||||
const p = target.querySelector('p');
|
||||
const btn = target.querySelector('button');
|
||||
flushSync(() => {
|
||||
btn?.click();
|
||||
});
|
||||
assert.equal(p?.innerHTML, '0');
|
||||
}
|
||||
});
|
@ -0,0 +1,12 @@
|
||||
<script>
|
||||
import { get, set } from "./test.svelte.js";
|
||||
|
||||
let x = 42;
|
||||
|
||||
export { x };
|
||||
</script>
|
||||
|
||||
{x}
|
||||
<p>{get()}</p>
|
||||
|
||||
<button onclick={()=>set()}></button>
|
@ -0,0 +1,9 @@
|
||||
let count = $state(0);
|
||||
|
||||
export function get() {
|
||||
return count;
|
||||
}
|
||||
|
||||
export function set() {
|
||||
count++;
|
||||
}
|
@ -0,0 +1,17 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
mode: ['client'],
|
||||
compileOptions: {
|
||||
runes: undefined
|
||||
},
|
||||
async test({ assert, target }) {
|
||||
const p = target.querySelector('p');
|
||||
const btn = target.querySelector('button');
|
||||
flushSync(() => {
|
||||
btn?.click();
|
||||
});
|
||||
assert.equal(p?.innerHTML, '1');
|
||||
}
|
||||
});
|
@ -0,0 +1,7 @@
|
||||
<script>
|
||||
import { get, set } from "./test.svelte.js";
|
||||
</script>
|
||||
|
||||
<p>{get()}</p>
|
||||
|
||||
<button onclick={()=>set()}></button>
|
@ -0,0 +1,9 @@
|
||||
let count = $state(0);
|
||||
|
||||
export function get() {
|
||||
return count;
|
||||
}
|
||||
|
||||
export function set() {
|
||||
count++;
|
||||
}
|
Loading…
Reference in new issue