{
+ derived(store, $store => {});
+ }}
+ on:test2={(store) => {
+ let $store;
+ }}
+/>
diff --git a/packages/svelte/test/runtime/samples/store-unreferenced/Nested.svelte b/packages/svelte/tests/runtime-legacy/samples/store-unreferenced/Nested.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/store-unreferenced/Nested.svelte
rename to packages/svelte/tests/runtime-legacy/samples/store-unreferenced/Nested.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/store-unreferenced/_config.js b/packages/svelte/tests/runtime-legacy/samples/store-unreferenced/_config.js
new file mode 100644
index 000000000000..808ed899d32f
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/store-unreferenced/_config.js
@@ -0,0 +1,16 @@
+import { test } from '../../test';
+import { count } from './store.js';
+
+export default test({
+ html: '
count: 0
',
+
+ before_test() {
+ count.set(0);
+ },
+
+ async test({ assert, component, target }) {
+ await component.increment();
+
+ assert.htmlEqual(target.innerHTML, '
count: 1
');
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/store-unreferenced/main.svelte b/packages/svelte/tests/runtime-legacy/samples/store-unreferenced/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/store-unreferenced/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/store-unreferenced/main.svelte
diff --git a/packages/svelte/test/js/samples/component-store-file-invalidate/store.js b/packages/svelte/tests/runtime-legacy/samples/store-unreferenced/store.js
similarity index 100%
rename from packages/svelte/test/js/samples/component-store-file-invalidate/store.js
rename to packages/svelte/tests/runtime-legacy/samples/store-unreferenced/store.js
diff --git a/packages/svelte/tests/runtime-legacy/samples/svg-attributes/_config.js b/packages/svelte/tests/runtime-legacy/samples/svg-attributes/_config.js
new file mode 100644
index 000000000000..e3d62e5f13ad
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/svg-attributes/_config.js
@@ -0,0 +1,17 @@
+import { ok, test } from '../../test';
+
+export default test({
+ html: `
+
+
+
+
+ `,
+
+ test({ assert, target }) {
+ const circle = target.querySelector('circle');
+ ok(circle);
+ assert.equal(circle.getAttribute('class'), 'red');
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/svg-attributes/main.svelte b/packages/svelte/tests/runtime-legacy/samples/svg-attributes/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/svg-attributes/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/svg-attributes/main.svelte
diff --git a/packages/svelte/test/runtime/samples/svg-child-component-declared-namespace-shorthand/Rect.svelte b/packages/svelte/tests/runtime-legacy/samples/svg-child-component-declared-namespace-shorthand/Rect.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/svg-child-component-declared-namespace-shorthand/Rect.svelte
rename to packages/svelte/tests/runtime-legacy/samples/svg-child-component-declared-namespace-shorthand/Rect.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/svg-child-component-declared-namespace-shorthand/_config.js b/packages/svelte/tests/runtime-legacy/samples/svg-child-component-declared-namespace-shorthand/_config.js
new file mode 100644
index 000000000000..1f280a183c1d
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/svg-child-component-declared-namespace-shorthand/_config.js
@@ -0,0 +1,26 @@
+import { ok, test } from '../../test';
+
+export default test({
+ get props() {
+ return { x: 0, y: 0, width: 100, height: 100 };
+ },
+
+ html: '
',
+
+ test({ assert, component, target }) {
+ const svg = target.querySelector('svg');
+ const rect = target.querySelector('rect');
+ ok(svg);
+ ok(rect);
+
+ assert.equal(svg.namespaceURI, 'http://www.w3.org/2000/svg');
+ assert.equal(rect.namespaceURI, 'http://www.w3.org/2000/svg');
+
+ component.width = 150;
+ component.height = 50;
+ assert.htmlEqual(
+ target.innerHTML,
+ '
'
+ );
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/svg-child-component-declared-namespace-shorthand/main.svelte b/packages/svelte/tests/runtime-legacy/samples/svg-child-component-declared-namespace-shorthand/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/svg-child-component-declared-namespace-shorthand/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/svg-child-component-declared-namespace-shorthand/main.svelte
diff --git a/packages/svelte/test/runtime/samples/svg-child-component-declared-namespace/Rect.svelte b/packages/svelte/tests/runtime-legacy/samples/svg-child-component-declared-namespace/Rect.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/svg-child-component-declared-namespace/Rect.svelte
rename to packages/svelte/tests/runtime-legacy/samples/svg-child-component-declared-namespace/Rect.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/svg-child-component-declared-namespace/_config.js b/packages/svelte/tests/runtime-legacy/samples/svg-child-component-declared-namespace/_config.js
new file mode 100644
index 000000000000..1f280a183c1d
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/svg-child-component-declared-namespace/_config.js
@@ -0,0 +1,26 @@
+import { ok, test } from '../../test';
+
+export default test({
+ get props() {
+ return { x: 0, y: 0, width: 100, height: 100 };
+ },
+
+ html: '
',
+
+ test({ assert, component, target }) {
+ const svg = target.querySelector('svg');
+ const rect = target.querySelector('rect');
+ ok(svg);
+ ok(rect);
+
+ assert.equal(svg.namespaceURI, 'http://www.w3.org/2000/svg');
+ assert.equal(rect.namespaceURI, 'http://www.w3.org/2000/svg');
+
+ component.width = 150;
+ component.height = 50;
+ assert.htmlEqual(
+ target.innerHTML,
+ '
'
+ );
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/svg-child-component-declared-namespace/main.svelte b/packages/svelte/tests/runtime-legacy/samples/svg-child-component-declared-namespace/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/svg-child-component-declared-namespace/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/svg-child-component-declared-namespace/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/svg-class/_config.js b/packages/svelte/tests/runtime-legacy/samples/svg-class/_config.js
new file mode 100644
index 000000000000..c5f1e8b44c3a
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/svg-class/_config.js
@@ -0,0 +1,15 @@
+import { ok, test } from '../../test';
+
+// this looks like another JSDOM quirk — svg.className = 'foo' behaves
+// differently from browsers. So this test succeeds even when it should fail
+export default test({
+ html: "
",
+
+ test({ assert, target }) {
+ const svg = target.querySelector('svg');
+ ok(svg);
+
+ assert.equal(svg.namespaceURI, 'http://www.w3.org/2000/svg');
+ assert.equal(svg.getAttribute('class'), 'foo');
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/svg-class/main.svelte b/packages/svelte/tests/runtime-legacy/samples/svg-class/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/svg-class/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/svg-class/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/svg-each-block-anchor/_config.js b/packages/svelte/tests/runtime-legacy/samples/svg-each-block-anchor/_config.js
new file mode 100644
index 000000000000..3053155da5d3
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/svg-each-block-anchor/_config.js
@@ -0,0 +1,29 @@
+import { test } from '../../test';
+
+export default test({
+ get props() {
+ return { foo: ['a'], bar: ['c'] };
+ },
+
+ html: `
+
+ a
+ c
+
+ `,
+
+ test({ assert, component, target }) {
+ component.foo = ['a', 'b'];
+
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+
+ a
+ b
+ c
+
+ `
+ );
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/svg-each-block-anchor/main.svelte b/packages/svelte/tests/runtime-legacy/samples/svg-each-block-anchor/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/svg-each-block-anchor/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/svg-each-block-anchor/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/svg-each-block-namespace/_config.js b/packages/svelte/tests/runtime-legacy/samples/svg-each-block-namespace/_config.js
new file mode 100644
index 000000000000..bbbad24ba212
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/svg-each-block-namespace/_config.js
@@ -0,0 +1,16 @@
+import { test } from '../../test';
+
+export default test({
+ html: `
+
+
+ `,
+
+ test({ assert, target }) {
+ const circles = target.querySelectorAll('circle');
+ assert.equal(circles[0].namespaceURI, 'http://www.w3.org/2000/svg');
+ assert.equal(circles[1].namespaceURI, 'http://www.w3.org/2000/svg');
+ assert.equal(circles[2].namespaceURI, 'http://www.w3.org/2000/svg');
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/svg-each-block-namespace/main.svelte b/packages/svelte/tests/runtime-legacy/samples/svg-each-block-namespace/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/svg-each-block-namespace/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/svg-each-block-namespace/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/svg-foreignobject-namespace/_config.js b/packages/svelte/tests/runtime-legacy/samples/svg-foreignobject-namespace/_config.js
new file mode 100644
index 000000000000..e8dad1379542
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/svg-foreignobject-namespace/_config.js
@@ -0,0 +1,21 @@
+import { test, ok } from '../../test';
+
+export default test({
+ html: `
+
+
+ some text
+
+
+ `,
+
+ test({ assert, target }) {
+ const foreignObject = target.querySelector('foreignObject');
+ ok(foreignObject);
+ assert.equal(foreignObject.namespaceURI, 'http://www.w3.org/2000/svg');
+
+ const p = target.querySelector('p');
+ ok(p);
+ assert.equal(p.namespaceURI, 'http://www.w3.org/1999/xhtml');
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/svg-foreignobject-namespace/main.svelte b/packages/svelte/tests/runtime-legacy/samples/svg-foreignobject-namespace/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/svg-foreignobject-namespace/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/svg-foreignobject-namespace/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/svg-html-tag/_config.js b/packages/svelte/tests/runtime-legacy/samples/svg-html-tag/_config.js
new file mode 100644
index 000000000000..b9321162efcc
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/svg-html-tag/_config.js
@@ -0,0 +1,38 @@
+import { ok, test } from '../../test';
+
+export default test({
+ html: `
+
+
+ `,
+ test({ assert, target, component }) {
+ let svg = target.querySelector('svg');
+ ok(svg);
+ let circles = target.querySelectorAll('circle');
+ assert.equal(svg.namespaceURI, 'http://www.w3.org/2000/svg');
+ assert.equal(2, circles.length);
+ assert.equal(circles[0].namespaceURI, 'http://www.w3.org/2000/svg');
+ assert.equal(circles[1].namespaceURI, 'http://www.w3.org/2000/svg');
+
+ component.width = 200;
+ component.height = 120;
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+
+
+ `
+ );
+ svg = target.querySelector('svg');
+ ok(svg);
+ circles = target.querySelectorAll('circle');
+ assert.equal(svg.namespaceURI, 'http://www.w3.org/2000/svg');
+ assert.equal(2, circles.length);
+ assert.equal(circles[0].namespaceURI, 'http://www.w3.org/2000/svg');
+ assert.equal(circles[1].namespaceURI, 'http://www.w3.org/2000/svg');
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/svg-html-tag/main.svelte b/packages/svelte/tests/runtime-legacy/samples/svg-html-tag/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/svg-html-tag/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/svg-html-tag/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/svg-html-tag2/_config.js b/packages/svelte/tests/runtime-legacy/samples/svg-html-tag2/_config.js
new file mode 100644
index 000000000000..3e10bcc9c31f
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/svg-html-tag2/_config.js
@@ -0,0 +1,43 @@
+import { ok, test } from '../../test';
+
+export default test({
+ html: `
+
+
+
+
+ `,
+ test({ assert, target, component }) {
+ let svg = target.querySelector('svg');
+ ok(svg);
+ let circles = target.querySelectorAll('circle');
+
+ assert.equal(svg.namespaceURI, 'http://www.w3.org/2000/svg');
+ assert.equal(2, circles.length);
+ assert.equal(circles[0].namespaceURI, 'http://www.w3.org/2000/svg');
+ assert.equal(circles[1].namespaceURI, 'http://www.w3.org/2000/svg');
+
+ component.width = 200;
+ component.height = 120;
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+
+
+
+
+ `
+ );
+ svg = target.querySelector('svg');
+ ok(svg);
+ circles = target.querySelectorAll('circle');
+ assert.equal(svg.namespaceURI, 'http://www.w3.org/2000/svg');
+ assert.equal(2, circles.length);
+ assert.equal(circles[0].namespaceURI, 'http://www.w3.org/2000/svg');
+ assert.equal(circles[1].namespaceURI, 'http://www.w3.org/2000/svg');
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/svg-html-tag2/main.svelte b/packages/svelte/tests/runtime-legacy/samples/svg-html-tag2/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/svg-html-tag2/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/svg-html-tag2/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/svg-html-tag3/_config.js b/packages/svelte/tests/runtime-legacy/samples/svg-html-tag3/_config.js
new file mode 100644
index 000000000000..6c240bb205d6
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/svg-html-tag3/_config.js
@@ -0,0 +1,38 @@
+import { ok, test } from '../../test';
+
+export default test({
+ html: `
+
+
+ `,
+ test({ assert, target, component }) {
+ let svg = target.querySelector('svg');
+ let circle = target.querySelector('circle');
+ ok(svg);
+ ok(circle);
+
+ assert.equal(svg.namespaceURI, 'http://www.w3.org/2000/svg');
+ assert.equal(circle.namespaceURI, 'http://www.w3.org/1999/xhtml');
+
+ component.width = 200;
+ component.height = 120;
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+
+
+
+
+ `
+ );
+
+ svg = target.querySelector('svg');
+ circle = target.querySelector('circle');
+ ok(svg);
+ ok(circle);
+ assert.equal(svg.namespaceURI, 'http://www.w3.org/2000/svg');
+ assert.equal(circle.namespaceURI, 'http://www.w3.org/1999/xhtml');
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/svg-html-tag3/main.svelte b/packages/svelte/tests/runtime-legacy/samples/svg-html-tag3/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/svg-html-tag3/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/svg-html-tag3/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/svg-multiple/_config.js b/packages/svelte/tests/runtime-legacy/samples/svg-multiple/_config.js
new file mode 100644
index 000000000000..db4c05272e3c
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/svg-multiple/_config.js
@@ -0,0 +1,32 @@
+import { test } from '../../test';
+
+export default test({
+ get props() {
+ return { x: 0, y: 0, width: 100, height: 100 };
+ },
+
+ html: `
+
+
+ `,
+
+ test({ assert, component, target }) {
+ const svgs = target.querySelectorAll('svg');
+ const rects = target.querySelectorAll('rect');
+
+ assert.equal(svgs[0].namespaceURI, 'http://www.w3.org/2000/svg');
+ assert.equal(svgs[0].namespaceURI, 'http://www.w3.org/2000/svg');
+ assert.equal(rects[1].namespaceURI, 'http://www.w3.org/2000/svg');
+ assert.equal(rects[1].namespaceURI, 'http://www.w3.org/2000/svg');
+
+ component.width = 150;
+ component.height = 50;
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+
+
+ `
+ );
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/svg-multiple/main.svelte b/packages/svelte/tests/runtime-legacy/samples/svg-multiple/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/svg-multiple/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/svg-multiple/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/svg-no-whitespace/_config.js b/packages/svelte/tests/runtime-legacy/samples/svg-no-whitespace/_config.js
new file mode 100644
index 000000000000..011856e03ad6
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/svg-no-whitespace/_config.js
@@ -0,0 +1,12 @@
+import { ok, test } from '../../test';
+
+export default test({
+ test({ assert, target }) {
+ const svg = target.querySelector('svg');
+ ok(svg);
+
+ assert.equal(svg.childNodes.length, 2);
+ assert.equal(svg.childNodes[0].nodeName, 'rect');
+ assert.equal(svg.childNodes[1].nodeName, 'rect');
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/svg-no-whitespace/main.svelte b/packages/svelte/tests/runtime-legacy/samples/svg-no-whitespace/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/svg-no-whitespace/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/svg-no-whitespace/main.svelte
diff --git a/packages/svelte/test/runtime/samples/svg-slot-namespace/Widget.svelte b/packages/svelte/tests/runtime-legacy/samples/svg-slot-namespace/Widget.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/svg-slot-namespace/Widget.svelte
rename to packages/svelte/tests/runtime-legacy/samples/svg-slot-namespace/Widget.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/svg-slot-namespace/_config.js b/packages/svelte/tests/runtime-legacy/samples/svg-slot-namespace/_config.js
new file mode 100644
index 000000000000..63060f6f7082
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/svg-slot-namespace/_config.js
@@ -0,0 +1,21 @@
+import { ok, test } from '../../test';
+
+export default test({
+ html: `
+
+
+
+
+ `,
+
+ test({ assert, target }) {
+ const div = target.querySelector('div');
+ ok(div);
+ assert.equal(div.namespaceURI, 'http://www.w3.org/1999/xhtml');
+
+ const line = target.querySelector('line');
+ ok(line);
+ assert.equal(line.namespaceURI, 'http://www.w3.org/2000/svg');
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/svg-slot-namespace/main.svelte b/packages/svelte/tests/runtime-legacy/samples/svg-slot-namespace/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/svg-slot-namespace/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/svg-slot-namespace/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/svg-spread/_config.js b/packages/svelte/tests/runtime-legacy/samples/svg-spread/_config.js
new file mode 100644
index 000000000000..b371757d366f
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/svg-spread/_config.js
@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+ html: `
+
+
+ `
+});
diff --git a/packages/svelte/test/runtime/samples/svg-spread/main.svelte b/packages/svelte/tests/runtime-legacy/samples/svg-spread/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/svg-spread/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/svg-spread/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/svg-tspan-preserve-space/_config.js b/packages/svelte/tests/runtime-legacy/samples/svg-tspan-preserve-space/_config.js
new file mode 100644
index 000000000000..018902984152
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/svg-tspan-preserve-space/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+ html: '
foo barfoo bar'
+});
diff --git a/packages/svelte/test/runtime/samples/svg-tspan-preserve-space/main.svelte b/packages/svelte/tests/runtime-legacy/samples/svg-tspan-preserve-space/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/svg-tspan-preserve-space/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/svg-tspan-preserve-space/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/svg-with-style/_config.js b/packages/svelte/tests/runtime-legacy/samples/svg-with-style/_config.js
new file mode 100644
index 000000000000..85a8a86ac6f9
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/svg-with-style/_config.js
@@ -0,0 +1,15 @@
+import { test } from '../../test';
+
+export default test({
+ get props() {
+ return { x: 'bar' };
+ },
+
+ html: `
+
+
+ `
+});
diff --git a/packages/svelte/test/runtime/samples/svg-with-style/main.svelte b/packages/svelte/tests/runtime-legacy/samples/svg-with-style/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/svg-with-style/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/svg-with-style/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/svg-xlink/_config.js b/packages/svelte/tests/runtime-legacy/samples/svg-xlink/_config.js
new file mode 100644
index 000000000000..22e38966f833
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/svg-xlink/_config.js
@@ -0,0 +1,22 @@
+import { ok, test } from '../../test';
+
+export default test({
+ html: `
+
+
+
+
+
+ `,
+ test({ assert, target }) {
+ const use = target.querySelector('use');
+ ok(use);
+
+ // @ts-ignore
+ const href = use.attributes['xlink:href'];
+
+ assert.equal(href.namespaceURI, 'http://www.w3.org/1999/xlink');
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/svg-xlink/main.svelte b/packages/svelte/tests/runtime-legacy/samples/svg-xlink/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/svg-xlink/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/svg-xlink/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/svg-xmlns/_config.js b/packages/svelte/tests/runtime-legacy/samples/svg-xmlns/_config.js
new file mode 100644
index 000000000000..cfa949d26fac
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/svg-xmlns/_config.js
@@ -0,0 +1,26 @@
+import { ok, test } from '../../test';
+
+export default test({
+ get props() {
+ return { x: 0, y: 0, width: 100, height: 100 };
+ },
+
+ html: '
',
+
+ test({ assert, component, target }) {
+ const svg = target.querySelector('svg');
+ const rect = target.querySelector('rect');
+ ok(svg);
+ ok(rect);
+
+ assert.equal(svg.namespaceURI, 'http://www.w3.org/2000/svg');
+ assert.equal(rect.namespaceURI, 'http://www.w3.org/2000/svg');
+
+ component.width = 150;
+ component.height = 50;
+ assert.htmlEqual(
+ target.innerHTML,
+ '
'
+ );
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/svg-xmlns/main.svelte b/packages/svelte/tests/runtime-legacy/samples/svg-xmlns/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/svg-xmlns/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/svg-xmlns/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/svg/_config.js b/packages/svelte/tests/runtime-legacy/samples/svg/_config.js
new file mode 100644
index 000000000000..1f280a183c1d
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/svg/_config.js
@@ -0,0 +1,26 @@
+import { ok, test } from '../../test';
+
+export default test({
+ get props() {
+ return { x: 0, y: 0, width: 100, height: 100 };
+ },
+
+ html: '
',
+
+ test({ assert, component, target }) {
+ const svg = target.querySelector('svg');
+ const rect = target.querySelector('rect');
+ ok(svg);
+ ok(rect);
+
+ assert.equal(svg.namespaceURI, 'http://www.w3.org/2000/svg');
+ assert.equal(rect.namespaceURI, 'http://www.w3.org/2000/svg');
+
+ component.width = 150;
+ component.height = 50;
+ assert.htmlEqual(
+ target.innerHTML,
+ '
'
+ );
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/svg/main.svelte b/packages/svelte/tests/runtime-legacy/samples/svg/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/svg/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/svg/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/table-nesting/_config.js b/packages/svelte/tests/runtime-legacy/samples/table-nesting/_config.js
new file mode 100644
index 000000000000..e29e37441edd
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/table-nesting/_config.js
@@ -0,0 +1,13 @@
+import { test } from '../../test';
+
+export default test({
+ html: `
+
+ `
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/table-nesting/main.svelte b/packages/svelte/tests/runtime-legacy/samples/table-nesting/main.svelte
new file mode 100644
index 000000000000..00e4a17c2d3b
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/table-nesting/main.svelte
@@ -0,0 +1,9 @@
+
+
+
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-legacy/samples/template/_config.js b/packages/svelte/tests/runtime-legacy/samples/template/_config.js
new file mode 100644
index 000000000000..f82716854293
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/template/_config.js
@@ -0,0 +1,54 @@
+import { ok, test } from '../../test';
+
+export default test({
+ html: `
+
+ foo
+
+
123
+
1B 1
+ `,
+
+ test({ assert, target }) {
+ const template = /** @type {HTMLTemplateElement} */ (target.querySelector('#t1'));
+ assert.htmlEqual(
+ template.innerHTML,
+ `
+
foo
+ `
+ );
+ const content = /** @type {DocumentFragment} */ (template.content.cloneNode(true));
+ const div = content.children[0];
+ assert.htmlEqual(
+ div.outerHTML,
+ `
+
foo
+ `
+ );
+
+ const template2 = /** @type {HTMLTemplateElement} */ (target.querySelector('#t2'));
+ assert.equal(template2.childNodes.length, 0);
+ assert.equal(template2.content.childNodes.length, 1);
+ assert.equal(template2.content.firstChild?.textContent, '123');
+ assert.htmlEqual(template2.innerHTML, '123');
+
+ const template3 = /** @type {HTMLTemplateElement} */ (target.querySelector('#t3'));
+ // test: (with hydration from ssr rendered html)
+ // out of order render.
+ //
1{@html '2'}3 may render as
321 for ssr+hydration case.
+ // we bypass it by using symmetric siblings. hence
is not fully stable for this edge case.
+
+ // get all childNodes of template3 except comments
+ let childNodes = [];
+ for (const node of template3.content.childNodes) {
+ if (node.nodeType !== 8) {
+ childNodes.push(/** @type {Element} */ (node));
+ }
+ }
+
+ assert.equal(childNodes.length, 3);
+ assert.equal(childNodes[0].textContent, '1');
+ assert.equal(childNodes[1].outerHTML, 'B ');
+ assert.equal(childNodes[2].textContent, '1');
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/template/main.svelte b/packages/svelte/tests/runtime-legacy/samples/template/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/template/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/template/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/textarea-bind-value-escape/_config.js b/packages/svelte/tests/runtime-legacy/samples/textarea-bind-value-escape/_config.js
new file mode 100644
index 000000000000..ea58cb0d001a
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/textarea-bind-value-escape/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+ html: '',
+ ssrHtml:
+ ""
+});
diff --git a/packages/svelte/test/runtime/samples/textarea-bind-value-escape/main.svelte b/packages/svelte/tests/runtime-legacy/samples/textarea-bind-value-escape/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/textarea-bind-value-escape/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/textarea-bind-value-escape/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/textarea-children/_config.js b/packages/svelte/tests/runtime-legacy/samples/textarea-children/_config.js
new file mode 100644
index 000000000000..ede4825d4411
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/textarea-children/_config.js
@@ -0,0 +1,19 @@
+import { test } from '../../test';
+
+export default test({
+ skip_if_ssr: 'permanent', // SSR behaviour is awkwardly different
+
+ get props() {
+ return { foo: 42 };
+ },
+
+ html: '',
+
+ test({ assert, component, target }) {
+ const textarea = /** @type {HTMLTextAreaElement} */ (target.querySelector('textarea'));
+ assert.strictEqual(textarea.value, '\tnot actually an element. 42
\n');
+
+ component.foo = 43;
+ assert.strictEqual(textarea.value, '\tnot actually an element. 43
\n');
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/textarea-children/main.svelte b/packages/svelte/tests/runtime-legacy/samples/textarea-children/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/textarea-children/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/textarea-children/main.svelte
diff --git a/packages/svelte/test/runtime/samples/textarea-content/.editorconfig b/packages/svelte/tests/runtime-legacy/samples/textarea-content/.editorconfig
similarity index 100%
rename from packages/svelte/test/runtime/samples/textarea-content/.editorconfig
rename to packages/svelte/tests/runtime-legacy/samples/textarea-content/.editorconfig
diff --git a/packages/svelte/tests/runtime-legacy/samples/textarea-content/_config.js b/packages/svelte/tests/runtime-legacy/samples/textarea-content/_config.js
new file mode 100644
index 000000000000..080976c51849
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/textarea-content/_config.js
@@ -0,0 +1,91 @@
+import { ok, test } from '../../test';
+
+export default test({
+ withoutNormalizeHtml: true,
+ // Unable to test `html` with `
`,
+ test({ assert, target }) {
+ // Test for ',
+ ssrHtml:
+ ""
+});
diff --git a/packages/svelte/test/runtime/samples/textarea-value-escape/main.svelte b/packages/svelte/tests/runtime-legacy/samples/textarea-value-escape/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/textarea-value-escape/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/textarea-value-escape/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/textarea-value/_config.js b/packages/svelte/tests/runtime-legacy/samples/textarea-value/_config.js
new file mode 100644
index 000000000000..06264b653b02
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/textarea-value/_config.js
@@ -0,0 +1,18 @@
+import { test } from '../../test';
+
+export default test({
+ get props() {
+ return { foo: 42 };
+ },
+
+ html: '',
+ ssrHtml: '',
+
+ test({ assert, component, target }) {
+ const textarea = /** @type {HTMLTextAreaElement} */ (target.querySelector('textarea'));
+ assert.strictEqual(textarea.value, '42');
+
+ component.foo = 43;
+ assert.strictEqual(textarea.value, '43');
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/textarea-value/main.svelte b/packages/svelte/tests/runtime-legacy/samples/textarea-value/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/textarea-value/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/textarea-value/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/this-in-function-expressions/_config.js b/packages/svelte/tests/runtime-legacy/samples/this-in-function-expressions/_config.js
new file mode 100644
index 000000000000..3c286f3ec699
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/this-in-function-expressions/_config.js
@@ -0,0 +1,14 @@
+import { test } from '../../test';
+
+export default test({
+ async test({ assert, target, window }) {
+ const [, btn] = /** @type {NodeListOf} */ (
+ target.querySelectorAll('button')
+ );
+ const clickEvent = new window.MouseEvent('click', { bubbles: true });
+
+ await btn.dispatchEvent(clickEvent);
+
+ assert.equal(btn.x, 1);
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/this-in-function-expressions/main.svelte b/packages/svelte/tests/runtime-legacy/samples/this-in-function-expressions/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/this-in-function-expressions/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/this-in-function-expressions/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-abort/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-abort/_config.js
new file mode 100644
index 000000000000..5072e9fa191c
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-abort/_config.js
@@ -0,0 +1,36 @@
+import { test } from '../../test';
+
+// expect aborting halfway through outro transition
+// to behave the same in `{#if}` block as in `{:else}` block
+export default test({
+ html: `
+ a
+
+ a
+ `,
+
+ async test({ assert, component, target, raf }) {
+ component.visible = false;
+
+ // abort halfway through the outro transition
+ raf.tick(50);
+
+ await component.$set({
+ visible: true,
+ array: ['a', 'b', 'c']
+ });
+
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ a
+ b
+ c
+
+ a
+ b
+ c
+ `
+ );
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-abort/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-abort/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-abort/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-abort/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-css-deferred-removal/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-css-deferred-removal/_config.js
new file mode 100644
index 000000000000..99f60053d459
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-css-deferred-removal/_config.js
@@ -0,0 +1,21 @@
+import { ok, test } from '../../test';
+
+export default test({
+ get props() {
+ return { visible: true };
+ },
+
+ test({ assert, component, target, raf }) {
+ component.visible = false;
+
+ const outer = /** @type {HTMLSpanElement} */ (target.querySelector('.outer'));
+ const inner = /** @type {HTMLSpanElement} */ (target.querySelector('.inner'));
+
+ raf.tick(150);
+
+ assert.deepEqual(
+ [outer.style.cssText, inner.style.cssText],
+ ['opacity: 0.24999000000000002;', '']
+ );
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-css-deferred-removal/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-css-deferred-removal/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-css-deferred-removal/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-css-deferred-removal/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-css-duration/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-css-duration/_config.js
new file mode 100644
index 000000000000..d681f74c7c87
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-css-duration/_config.js
@@ -0,0 +1,19 @@
+import { ok, test } from '../../test';
+
+export default test({
+ async test({ assert, component, target, raf }) {
+ component.visible = true;
+ const div = target.querySelector('div');
+ ok(div);
+
+ raf.tick(25);
+
+ assert.equal(div.style.opacity, '0.16666');
+
+ component.visible = false;
+
+ raf.tick(40);
+
+ assert.ok(div.style.opacity === '0');
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-css-duration/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-css-duration/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-css-duration/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-css-duration/main.svelte
diff --git a/packages/svelte/test/runtime/samples/transition-css-iframe/Foo.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-css-iframe/Foo.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-css-iframe/Foo.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-css-iframe/Foo.svelte
diff --git a/packages/svelte/test/runtime/samples/transition-css-iframe/Frame.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-css-iframe/Frame.svelte
similarity index 89%
rename from packages/svelte/test/runtime/samples/transition-css-iframe/Frame.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-css-iframe/Frame.svelte
index c7ac9cf76f81..6a458a3b2f7d 100644
--- a/packages/svelte/test/runtime/samples/transition-css-iframe/Frame.svelte
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-css-iframe/Frame.svelte
@@ -1,5 +1,5 @@
+
+{#if visible}
+ a
+{:else}
+ b
+{/if}
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-delay-in-out/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-delay-in-out/_config.js
new file mode 100644
index 000000000000..b663f85acae4
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-delay-in-out/_config.js
@@ -0,0 +1,29 @@
+import { test } from '../../test';
+
+export default test({
+ test({ assert, component, target, raf }) {
+ component.visible = true;
+ const div = /** @type {HTMLDivElement & { foo: number, bar: number }} */ (
+ target.querySelector('div')
+ );
+
+ raf.tick(0);
+
+ assert.equal(div.foo, 0);
+
+ raf.tick(50);
+ assert.equal(div.foo, 0);
+
+ raf.tick(150);
+ assert.equal(div.foo, 1);
+
+ component.visible = false;
+ assert.equal(div.bar, undefined);
+
+ raf.tick(200);
+ assert.equal(div.bar, 1);
+
+ raf.tick(300);
+ assert.equal(div.bar, 0);
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-delay-in-out/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-delay-in-out/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-delay-in-out/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-delay-in-out/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-delay/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-delay/_config.js
new file mode 100644
index 000000000000..0d05eb58d675
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-delay/_config.js
@@ -0,0 +1,32 @@
+import { test } from '../../test';
+
+export default test({
+ test({ assert, component, target, raf }) {
+ component.visible = true;
+ const div = /** @type {HTMLDivElement & { foo: number }} */ (target.querySelector('div'));
+
+ raf.tick(0);
+
+ assert.equal(div.foo, 0);
+
+ raf.tick(50);
+ assert.equal(div.foo, 0);
+
+ raf.tick(100);
+ assert.equal(div.foo, 0.5);
+
+ component.visible = false;
+
+ raf.tick(125);
+ assert.equal(div.foo, 0.75);
+
+ raf.tick(150);
+ assert.equal(div.foo, 1);
+
+ raf.tick(175);
+ assert.equal(div.foo, 0.75);
+
+ raf.tick(250);
+ assert.equal(div.foo, 0);
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-delay/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-delay/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-delay/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-delay/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-destroyed-before-end/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-destroyed-before-end/_config.js
new file mode 100644
index 000000000000..0c102305b23c
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-destroyed-before-end/_config.js
@@ -0,0 +1,19 @@
+import { test } from '../../test';
+
+export default test({
+ get props() {
+ return { visible: true };
+ },
+
+ test({ assert, component, target, raf }) {
+ component.visible = false;
+ const div = /** @type {HTMLDivElement & { foo: number }} */ (target.querySelector('div'));
+
+ raf.tick(50);
+ assert.equal(div.foo, 0.5);
+
+ component.$destroy();
+
+ raf.tick(100);
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-destroyed-before-end/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-destroyed-before-end/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-destroyed-before-end/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-destroyed-before-end/main.svelte
diff --git a/packages/svelte/test/runtime/samples/transition-js-dynamic-component/A.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-dynamic-component/A.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-dynamic-component/A.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-dynamic-component/A.svelte
diff --git a/packages/svelte/test/runtime/samples/transition-js-dynamic-component/B.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-dynamic-component/B.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-dynamic-component/B.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-dynamic-component/B.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-dynamic-component/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-dynamic-component/_config.js
new file mode 100644
index 000000000000..d0a2c4791481
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-dynamic-component/_config.js
@@ -0,0 +1,44 @@
+import { test } from '../../test';
+
+export default test({
+ get props() {
+ return { x: true };
+ },
+
+ html: `
+ a
+ `,
+
+ test({ assert, component, target, raf }) {
+ component.x = false;
+
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ a
+ b
+ `
+ );
+
+ const [a, b] = /** @type {NodeListOf}} */ (
+ target.querySelectorAll('div')
+ );
+
+ raf.tick(25);
+
+ assert.equal(a.a, 0.75);
+ assert.equal(b.b, 0.25);
+
+ raf.tick(100);
+
+ assert.equal(a.a, 0);
+ assert.equal(b.b, 1);
+
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ b
+ `
+ );
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-dynamic-component/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-dynamic-component/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-dynamic-component/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-dynamic-component/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-dynamic-if-block-bidi/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-dynamic-if-block-bidi/_config.js
new file mode 100644
index 000000000000..8b40ae73bc73
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-dynamic-if-block-bidi/_config.js
@@ -0,0 +1,42 @@
+import { test } from '../../test';
+
+export default test({
+ get props() {
+ return { name: 'world' };
+ },
+
+ async test({ assert, component, target, raf }) {
+ // @ts-expect-error
+ global.count = 0;
+
+ component.visible = true;
+ // @ts-expect-error
+ assert.equal(global.count, 1);
+ const div = /** @type {HTMLDivElement & { foo: Number }} */ (target.querySelector('div'));
+ raf.tick(0);
+
+ assert.equal(div.foo, 0);
+
+ raf.tick(75);
+ component.name = 'everybody';
+ assert.equal(div.foo, 0.75);
+ assert.htmlEqual(div.innerHTML, 'hello everybody!');
+
+ component.visible = false;
+ component.name = 'again';
+ assert.htmlEqual(div.innerHTML, 'hello everybody!');
+
+ raf.tick(125);
+ assert.equal(div.foo, 0.25);
+
+ component.visible = true;
+ raf.tick(175);
+ assert.equal(div.foo, 0.75);
+ assert.htmlEqual(div.innerHTML, 'hello again!');
+
+ raf.tick(200);
+ assert.equal(div.foo, 1);
+
+ raf.tick(225);
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-dynamic-if-block-bidi/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-dynamic-if-block-bidi/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-dynamic-if-block-bidi/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-dynamic-if-block-bidi/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-each-block-intro-outro/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-each-block-intro-outro/_config.js
new file mode 100644
index 000000000000..144dcf03bc96
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-each-block-intro-outro/_config.js
@@ -0,0 +1,46 @@
+import { test } from '../../test';
+
+export default test({
+ get props() {
+ return { visible: false, things: ['a', 'b', 'c'] };
+ },
+
+ test({ assert, component, target, raf }) {
+ component.visible = true;
+ const divs = /** @type {NodeListOf} */ (
+ target.querySelectorAll('div')
+ );
+
+ raf.tick(0);
+ assert.equal(divs[0].foo, 0);
+ assert.equal(divs[1].foo, 0);
+ assert.equal(divs[2].foo, 0);
+
+ raf.tick(50);
+ assert.equal(divs[0].foo, 0.5);
+ assert.equal(divs[1].foo, 0.5);
+ assert.equal(divs[2].foo, 0.5);
+
+ component.visible = false;
+
+ raf.tick(70);
+ assert.equal(divs[0].foo, 0.7);
+ assert.equal(divs[1].foo, 0.7);
+ assert.equal(divs[2].foo, 0.7);
+
+ assert.equal(divs[0].bar, 0.8);
+ assert.equal(divs[1].bar, 0.8);
+ assert.equal(divs[2].bar, 0.8);
+
+ component.visible = true;
+
+ raf.tick(100);
+ assert.equal(divs[0].foo, 1);
+ assert.equal(divs[1].foo, 1);
+ assert.equal(divs[2].foo, 1);
+
+ assert.equal(divs[0].bar, 1);
+ assert.equal(divs[1].bar, 1);
+ assert.equal(divs[2].bar, 1);
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-each-block-intro-outro/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-each-block-intro-outro/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-each-block-intro-outro/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-each-block-intro-outro/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-each-block-intro/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-each-block-intro/_config.js
new file mode 100644
index 000000000000..babea1787ae8
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-each-block-intro/_config.js
@@ -0,0 +1,40 @@
+import { test } from '../../test';
+
+export default test({
+ get props() {
+ return { things: ['a', 'b', 'c'] };
+ },
+
+ intro: true,
+
+ test({ assert, component, target, raf }) {
+ let divs = /** @type {NodeListOf} */ (
+ target.querySelectorAll('div')
+ );
+ raf.tick(0);
+ assert.equal(divs[0].foo, 0);
+ assert.equal(divs[1].foo, 0);
+ assert.equal(divs[2].foo, 0);
+
+ raf.tick(50);
+ assert.equal(divs[0].foo, 0.5);
+ assert.equal(divs[1].foo, 0.5);
+ assert.equal(divs[2].foo, 0.5);
+
+ component.things = ['a', 'b', 'c', 'd'];
+ divs = /** @type {NodeListOf} */ (
+ target.querySelectorAll('div')
+ );
+ raf.tick(50);
+ assert.equal(divs[0].foo, 0.5);
+ assert.equal(divs[1].foo, 0.5);
+ assert.equal(divs[2].foo, 0.5);
+ assert.equal(divs[3].foo, 0);
+
+ raf.tick(75);
+ assert.equal(divs[0].foo, 0.75);
+ assert.equal(divs[1].foo, 0.75);
+ assert.equal(divs[2].foo, 0.75);
+ assert.equal(divs[3].foo, 0.25);
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-each-block-intro/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-each-block-intro/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-each-block-intro/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-each-block-intro/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-each-block-keyed-intro-outro/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-each-block-keyed-intro-outro/_config.js
new file mode 100644
index 000000000000..f4eca20e22f9
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-each-block-keyed-intro-outro/_config.js
@@ -0,0 +1,62 @@
+import { test } from '../../test';
+
+export default test({
+ get props() {
+ return {
+ things: [{ name: 'a' }, { name: 'b' }, { name: 'c' }]
+ };
+ },
+
+ intro: true,
+
+ test({ assert, component, target, raf }) {
+ let divs = /** @type {NodeListOf} */ (
+ target.querySelectorAll('div')
+ );
+ divs[0].i = 0; // for debugging
+ divs[1].i = 1;
+ divs[2].i = 2;
+
+ raf.tick(0);
+ assert.equal(divs[0].foo, 0);
+ assert.equal(divs[1].foo, 0);
+ assert.equal(divs[2].foo, 0);
+
+ raf.tick(100);
+ assert.equal(divs[0].foo, 1);
+ assert.equal(divs[1].foo, 1);
+ assert.equal(divs[2].foo, 1);
+
+ component.things = [{ name: 'a' }, { name: 'c' }];
+
+ const divs2 = target.querySelectorAll('div');
+ assert.strictEqual(divs[0], divs2[0]);
+ assert.strictEqual(divs[1], divs2[1]);
+ assert.strictEqual(divs[2], divs2[2]);
+
+ raf.tick(150);
+ assert.equal(divs[0].foo, 1);
+ assert.equal(divs[1].foo, 0.5);
+ assert.equal(divs[2].foo, 1);
+
+ component.things = [{ name: 'a' }, { name: 'b' }, { name: 'c' }];
+
+ raf.tick(175);
+ assert.equal(divs[0].foo, 1);
+ // Svelte 5, we no longer revert previous reconciled items
+ // assert.equal(divs[1].foo, 0.75);
+ assert.equal(divs[2].foo, 1);
+
+ raf.tick(225);
+ const divs3 = target.querySelectorAll('div');
+ assert.strictEqual(divs[0], divs3[0]);
+ // Svelte 5, we no longer revert previous reconciled items
+ // assert.strictEqual(divs[1], divs3[1]);
+ assert.strictEqual(divs[2], divs3[2]);
+
+ assert.equal(divs[0].foo, 1);
+ // Svelte 5, we no longer revert previous reconciled items
+ // assert.equal(divs[1].foo, 1);
+ assert.equal(divs[2].foo, 1);
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-each-block-keyed-intro-outro/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-each-block-keyed-intro-outro/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-each-block-keyed-intro-outro/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-each-block-keyed-intro-outro/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-each-block-keyed-intro/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-each-block-keyed-intro/_config.js
new file mode 100644
index 000000000000..97ed7e1bc24a
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-each-block-keyed-intro/_config.js
@@ -0,0 +1,52 @@
+import { test } from '../../test';
+
+export default test({
+ get props() {
+ return {
+ things: [{ name: 'a' }, { name: 'b' }, { name: 'c' }]
+ };
+ },
+
+ intro: true,
+
+ test({ assert, component, target, raf }) {
+ let divs = /** @type {NodeListOf} */ (
+ target.querySelectorAll('div')
+ );
+
+ raf.tick(0);
+ assert.equal(divs[0].foo, 0);
+ assert.equal(divs[1].foo, 0);
+ assert.equal(divs[2].foo, 0);
+
+ raf.tick(50);
+ assert.equal(divs[0].foo, 0.5);
+ assert.equal(divs[1].foo, 0.5);
+ assert.equal(divs[2].foo, 0.5);
+
+ component.things = [{ name: 'a' }, { name: 'woo!' }, { name: 'b' }, { name: 'c' }];
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ a
+ woo!
+ b
+ c
+ `
+ );
+ divs = /** @type {NodeListOf} */ (
+ target.querySelectorAll('div')
+ );
+ raf.tick(50);
+ assert.equal(divs[0].foo, 0.5);
+ assert.equal(divs[1].foo, 0);
+ assert.equal(divs[2].foo, 0.5);
+ assert.equal(divs[3].foo, 0.5);
+
+ raf.tick(75);
+ assert.equal(divs[0].foo, 0.75);
+ assert.equal(divs[1].foo, 0.25);
+ assert.equal(divs[2].foo, 0.75);
+ assert.equal(divs[3].foo, 0.75);
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-each-block-keyed-intro/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-each-block-keyed-intro/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-each-block-keyed-intro/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-each-block-keyed-intro/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-each-block-keyed-outro/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-each-block-keyed-outro/_config.js
new file mode 100644
index 000000000000..cb3c4aaf30c4
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-each-block-keyed-outro/_config.js
@@ -0,0 +1,30 @@
+import { test } from '../../test';
+
+export default test({
+ get props() {
+ return {
+ things: [{ name: 'a' }, { name: 'b' }, { name: 'c' }]
+ };
+ },
+
+ test({ assert, component, target, raf }) {
+ const divs = /** @type {NodeListOf} */ (
+ target.querySelectorAll('div')
+ );
+
+ component.things = [{ name: 'a' }, { name: 'c' }];
+
+ const divs2 = target.querySelectorAll('div');
+
+ raf.tick(0);
+ assert.strictEqual(divs[0], divs2[0]);
+ assert.strictEqual(divs[1], divs2[1]);
+ assert.strictEqual(divs[2], divs2[2]);
+
+ raf.tick(50);
+ assert.equal(divs[0].foo, undefined);
+ assert.equal(divs[1].foo, 0.5);
+ assert.equal(divs[2].foo, undefined);
+ raf.tick(100);
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-each-block-keyed-outro/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-each-block-keyed-outro/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-each-block-keyed-outro/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-each-block-keyed-outro/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-each-block-outro/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-each-block-outro/_config.js
new file mode 100644
index 000000000000..90a5c8c11cef
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-each-block-outro/_config.js
@@ -0,0 +1,23 @@
+import { test } from '../../test';
+
+export default test({
+ get props() {
+ return { things: ['a', 'b', 'c'] };
+ },
+
+ test({ assert, component, target, raf }) {
+ const divs = /** @type {NodeListOf} */ (
+ target.querySelectorAll('div')
+ );
+
+ component.things = ['a'];
+
+ raf.tick(50);
+ assert.equal(divs[0].foo, undefined);
+ assert.equal(divs[1].foo, 0.5);
+ assert.equal(divs[2].foo, 0.5);
+
+ raf.tick(100);
+ assert.htmlEqual(target.innerHTML, 'a
');
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-each-block-outro/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-each-block-outro/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-each-block-outro/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-each-block-outro/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-each-else-block-intro-outro/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-each-else-block-intro-outro/_config.js
new file mode 100644
index 000000000000..1383ac116307
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-each-else-block-intro-outro/_config.js
@@ -0,0 +1,62 @@
+import { test } from '../../test';
+
+export default test({
+ get props() {
+ return { things: ['a', 'b', 'c'] };
+ },
+
+ test({ assert, component, target, raf }) {
+ component.things = [];
+ let div = /** @type {HTMLDivElement & { foo: number, bar: number }} */ (
+ target.querySelector('div')
+ );
+
+ raf.tick(0);
+ assert.equal(div.foo, 0);
+
+ raf.tick(200);
+ assert.equal(div.foo, 0.5);
+
+ raf.tick(300);
+ assert.equal(div.foo, 0.75);
+
+ raf.tick(400);
+ assert.equal(div.foo, 1);
+
+ raf.tick(600);
+ component.things = ['a', 'b', 'c'];
+
+ raf.tick(700);
+ assert.equal(div.foo, 1);
+ assert.equal(div.bar, 0.75);
+
+ raf.tick(800);
+ assert.equal(div.foo, 1);
+ assert.equal(div.bar, 0.5);
+
+ raf.tick(900);
+ assert.equal(div.foo, 1);
+ assert.equal(div.bar, 0.25);
+
+ // test outro before intro complete
+ raf.tick(1000);
+ component.things = [];
+ div = /** @type {HTMLDivElement & { foo: number, bar: number }} */ (
+ target.querySelector('div')
+ );
+
+ raf.tick(1200);
+ assert.equal(div.foo, 0.5);
+
+ component.things = ['a', 'b', 'c'];
+ raf.tick(1300);
+ assert.equal(div.foo, 0.75);
+ assert.equal(div.bar, 0.75);
+
+ raf.tick(1400);
+ assert.equal(div.foo, 1);
+ assert.equal(div.bar, 0.5);
+
+ raf.tick(2000);
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-each-else-block-intro-outro/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-each-else-block-intro-outro/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-each-else-block-intro-outro/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-each-else-block-intro-outro/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-each-else-block-intro/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-each-else-block-intro/_config.js
new file mode 100644
index 000000000000..c43b8c30a3ff
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-each-else-block-intro/_config.js
@@ -0,0 +1,26 @@
+import { test } from '../../test';
+
+export default test({
+ get props() {
+ return { things: ['a', 'b', 'c'] };
+ },
+
+ test({ assert, component, target, raf }) {
+ component.things = [];
+ const div = /** @type {HTMLDivElement & { foo: Number }} */ (target.querySelector('div'));
+
+ raf.tick(0);
+ assert.equal(div.foo, 0);
+
+ raf.tick(200);
+ assert.equal(div.foo, 0.5);
+
+ raf.tick(300);
+ assert.equal(div.foo, 0.75);
+
+ raf.tick(400);
+ assert.equal(div.foo, 1);
+
+ raf.tick(500);
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-each-else-block-intro/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-each-else-block-intro/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-each-else-block-intro/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-each-else-block-intro/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-each-else-block-outro/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-each-else-block-outro/_config.js
new file mode 100644
index 000000000000..e432f7fcd6fb
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-each-else-block-outro/_config.js
@@ -0,0 +1,25 @@
+import { test } from '../../test';
+
+export default test({
+ get props() {
+ return {
+ /** @type {string[]} */
+ things: []
+ };
+ },
+ test({ assert, component, target, raf }) {
+ const div = /** @type {HTMLDivElement & { foo: Number }} */ (target.querySelector('div'));
+ component.things = ['a', 'b', 'c'];
+
+ raf.tick(200);
+ assert.equal(div.foo, 0.5);
+
+ raf.tick(300);
+ assert.equal(div.foo, 0.25);
+
+ raf.tick(400);
+ assert.equal(div.foo, 0);
+
+ raf.tick(500);
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-each-else-block-outro/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-each-else-block-outro/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-each-else-block-outro/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-each-else-block-outro/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-each-keyed-unchanged/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-each-keyed-unchanged/_config.js
new file mode 100644
index 000000000000..7ab780e95de6
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-each-keyed-unchanged/_config.js
@@ -0,0 +1,29 @@
+import { test } from '../../test';
+
+export default test({
+ get props() {
+ return { numbers: [1, 2, 3, 4, 5] };
+ },
+
+ test({ assert, component, target }) {
+ const divs1 = /** @type {NodeListOf} */ (
+ target.querySelectorAll('div')
+ );
+ assert.equal(divs1[0].foo, undefined);
+
+ component.numbers = [1, 2, 5, 4, 3];
+ const divs2 = target.querySelectorAll('div');
+
+ assert.equal(divs1[0], divs2[0]);
+ assert.equal(divs1[1], divs2[1]);
+ assert.equal(divs1[2], divs2[4]);
+ assert.equal(divs1[3], divs2[3]);
+ assert.equal(divs1[4], divs2[2]);
+
+ assert.equal(divs1[0].foo, undefined);
+ assert.equal(divs1[1].foo, undefined);
+ assert.equal(divs1[2].foo, undefined);
+ assert.equal(divs1[3].foo, undefined);
+ assert.equal(divs1[4].foo, undefined);
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-each-keyed-unchanged/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-each-keyed-unchanged/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-each-keyed-unchanged/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-each-keyed-unchanged/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-each-outro-cancelled/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-each-outro-cancelled/_config.js
new file mode 100644
index 000000000000..0b1319bf4ab7
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-each-outro-cancelled/_config.js
@@ -0,0 +1,85 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+ html: '',
+ test({ assert, component, target, raf }) {
+ flushSync(() => {
+ component.add();
+ component.add();
+ });
+
+ let time = 0;
+
+ raf.tick(0);
+
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+
+ `
+ );
+
+ raf.tick((time += 400));
+
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+
+ `
+ );
+
+ flushSync(() => {
+ component.toggle();
+ });
+ // transition halfway
+ raf.tick((time += 200));
+
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+
+ `
+ );
+
+ flushSync(() => {
+ component.toggle();
+ });
+ // transition back
+ raf.tick((time += 200));
+
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+
+ `
+ );
+
+ flushSync(() => {
+ component.remove(1);
+ });
+
+ raf.tick((time += 400));
+
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+
+ `
+ );
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-each-outro-cancelled/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-each-outro-cancelled/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-each-outro-cancelled/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-each-outro-cancelled/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-each-unchanged/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-each-unchanged/_config.js
new file mode 100644
index 000000000000..90dd1d86e19c
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-each-unchanged/_config.js
@@ -0,0 +1,29 @@
+import { test } from '../../test';
+
+export default test({
+ get props() {
+ return { numbers: [1, 2, 3, 4, 5] };
+ },
+
+ test({ assert, component, target }) {
+ const divs1 = /** @type {NodeListOf} */ (
+ target.querySelectorAll('div')
+ );
+ assert.equal(divs1[0].foo, undefined);
+
+ component.numbers = [1, 2, 5, 4, 3];
+ const divs2 = target.querySelectorAll('div');
+
+ assert.equal(divs1[0], divs2[0]);
+ assert.equal(divs1[1], divs2[1]);
+ assert.equal(divs1[2], divs2[2]);
+ assert.equal(divs1[3], divs2[3]);
+ assert.equal(divs1[4], divs2[4]);
+
+ assert.equal(divs1[0].foo, undefined);
+ assert.equal(divs1[1].foo, undefined);
+ assert.equal(divs1[2].foo, undefined);
+ assert.equal(divs1[3].foo, undefined);
+ assert.equal(divs1[4].foo, undefined);
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-each-unchanged/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-each-unchanged/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-each-unchanged/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-each-unchanged/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-events-in-out/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-events-in-out/_config.js
new file mode 100644
index 000000000000..785f51a4fa04
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-events-in-out/_config.js
@@ -0,0 +1,87 @@
+import { test } from '../../test';
+
+export default test({
+ get props() {
+ return {
+ visible: false,
+ things: ['a', 'b', 'c', 'd']
+ };
+ },
+
+ // intro: true,
+
+ html: `
+ waiting...
+ `,
+
+ async test({ assert, component, target, raf }) {
+ component.visible = true;
+
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ introstart
+ a
+ b
+ c
+ d
+ `
+ );
+
+ await raf.tick(50);
+
+ assert.deepEqual(component.intros.sort(), ['a', 'b', 'c', 'd']);
+ assert.equal(component.intro_count, 4);
+
+ await raf.tick(100);
+ assert.equal(component.intro_count, 0);
+
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ introend
+ a
+ b
+ c
+ d
+ `
+ );
+
+ component.visible = false;
+
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ outrostart
+ a
+ b
+ c
+ d
+ `
+ );
+
+ await raf.tick(150);
+ assert.deepEqual(component.outros.sort(), ['a', 'b', 'c', 'd']);
+ assert.equal(component.outro_count, 4);
+
+ await raf.tick(200);
+ assert.equal(component.outro_count, 0);
+
+ component.visible = true;
+
+ await raf.tick(250);
+ assert.deepEqual(component.intros.sort(), ['a', 'a', 'b', 'b', 'c', 'c', 'd', 'd']);
+ assert.equal(component.intro_count, 4);
+
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ introstart
+ a
+ b
+ c
+ d
+ `
+ );
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-events-in-out/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-events-in-out/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-events-in-out/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-events-in-out/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-events/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-events/_config.js
new file mode 100644
index 000000000000..20786300ef83
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-events/_config.js
@@ -0,0 +1,86 @@
+import { test } from '../../test';
+
+export default test({
+ get props() {
+ return {
+ visible: false,
+ things: ['a', 'b', 'c', 'd']
+ };
+ },
+
+ // intro: true,
+
+ html: `
+ waiting...
+ `,
+
+ async test({ assert, component, target, raf }) {
+ component.visible = true;
+
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ introstart
+ a
+ b
+ c
+ d
+ `
+ );
+
+ raf.tick(50);
+ assert.deepEqual(component.intros.sort(), ['a', 'b', 'c', 'd']);
+ assert.equal(component.intro_count, 4);
+
+ await raf.tick(100);
+ assert.equal(component.intro_count, 0);
+
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ introend
+ a
+ b
+ c
+ d
+ `
+ );
+
+ component.visible = false;
+
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ outrostart
+ a
+ b
+ c
+ d
+ `
+ );
+
+ raf.tick(150);
+ assert.deepEqual(component.outros.sort(), ['a', 'b', 'c', 'd']);
+ assert.equal(component.outro_count, 4);
+
+ raf.tick(200);
+ assert.equal(component.outro_count, 0);
+
+ component.visible = true;
+
+ await raf.tick(250);
+ assert.deepEqual(component.intros.sort(), ['a', 'a', 'b', 'b', 'c', 'c', 'd', 'd']);
+ assert.equal(component.intro_count, 4);
+
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ introstart
+ a
+ b
+ c
+ d
+ `
+ );
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-events/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-events/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-events/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-events/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-if-block-bidi/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-if-block-bidi/_config.js
new file mode 100644
index 000000000000..301211dc7330
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-if-block-bidi/_config.js
@@ -0,0 +1,34 @@
+import { test } from '../../test';
+
+export default test({
+ test({ assert, component, target, raf }) {
+ // @ts-expect-error
+ global.count = 0;
+
+ component.visible = true;
+ // @ts-expect-error
+ assert.equal(global.count, 1);
+ const div = /** @type {HTMLDivElement & { foo: Number }} */ (target.querySelector('div'));
+ raf.tick(0);
+ assert.equal(div.foo, 0);
+
+ raf.tick(300);
+ assert.equal(div.foo, 0.75);
+
+ component.visible = false;
+ // @ts-expect-error
+ assert.equal(global.count, 2);
+
+ raf.tick(500);
+ assert.equal(div.foo, 0.25);
+
+ component.visible = true;
+ raf.tick(700);
+ assert.equal(div.foo, 0.75);
+
+ raf.tick(800);
+ assert.equal(div.foo, 1);
+
+ raf.tick(900);
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-if-block-bidi/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-if-block-bidi/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-if-block-bidi/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-if-block-bidi/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-if-block-in-each-block-bidi-2/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-if-block-in-each-block-bidi-2/_config.js
new file mode 100644
index 000000000000..e7021ce0b7b1
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-if-block-in-each-block-bidi-2/_config.js
@@ -0,0 +1,32 @@
+import { test } from '../../test';
+
+export default test({
+ get props() {
+ return { visible: false, threshold: 5 };
+ },
+
+ html: `
+ 1
+ 2
+ 3
+ 4
+ 5
+ `,
+
+ test({ assert, component, target, raf }) {
+ raf.tick(100);
+
+ component.threshold = 4;
+
+ raf.tick(200);
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ 1
+ 2
+ 3
+ 4
+ `
+ );
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-if-block-in-each-block-bidi-2/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-if-block-in-each-block-bidi-2/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-if-block-in-each-block-bidi-2/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-if-block-in-each-block-bidi-2/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-if-block-in-each-block-bidi-3/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-if-block-in-each-block-bidi-3/_config.js
new file mode 100644
index 000000000000..1a6bbd4919ce
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-if-block-in-each-block-bidi-3/_config.js
@@ -0,0 +1,37 @@
+import { test } from '../../test';
+
+export default test({
+ get props() {
+ return { visible: false, threshold: 5 };
+ },
+
+ html: `
+ 1
+ 2
+ 3
+ 4
+ 5
+ `,
+
+ test({ assert, component, target, raf }) {
+ raf.tick(100);
+
+ component.threshold = 4;
+ raf.tick(150);
+ component.threshold = 5;
+ raf.tick(200);
+
+ component.threshold = 5.5;
+
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ 1
+ 2
+ 3
+ 4
+ 5
+ `
+ );
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-if-block-in-each-block-bidi-3/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-if-block-in-each-block-bidi-3/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-if-block-in-each-block-bidi-3/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-if-block-in-each-block-bidi-3/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-if-block-in-each-block-bidi/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-if-block-in-each-block-bidi/_config.js
new file mode 100644
index 000000000000..bcd91e4008e6
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-if-block-in-each-block-bidi/_config.js
@@ -0,0 +1,56 @@
+import { test } from '../../test';
+
+export default test({
+ get props() {
+ return { threshold: 5 };
+ },
+
+ html: `
+ 1
+ 2
+ 3
+ 4
+ 5
+ `,
+
+ intro: true,
+
+ test({ assert, component, target, raf }) {
+ const divs = /** @type {NodeListOf} */ (
+ target.querySelectorAll('div')
+ );
+
+ raf.tick(0);
+ assert.equal(divs[0].foo, 0);
+
+ raf.tick(100);
+ assert.equal(divs[0].foo, 1);
+
+ component.threshold = 4;
+ assert.equal(divs[4].foo, 1);
+
+ raf.tick(200);
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ 1
+ 2
+ 3
+ 4
+ `
+ );
+
+ component.threshold = 3;
+ assert.equal(divs[3].foo, 1);
+
+ raf.tick(300);
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ 1
+ 2
+ 3
+ `
+ );
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-if-block-in-each-block-bidi/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-if-block-in-each-block-bidi/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-if-block-in-each-block-bidi/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-if-block-in-each-block-bidi/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-if-block-intro-outro/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-if-block-intro-outro/_config.js
new file mode 100644
index 000000000000..d344dd12e3fa
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-if-block-intro-outro/_config.js
@@ -0,0 +1,52 @@
+import { test } from '../../test';
+
+export default test({
+ test({ assert, component, target, raf }) {
+ component.visible = true;
+ let div = /** @type {HTMLDivElement & { foo: Number, bar: number }} */ (
+ target.querySelector('div')
+ );
+
+ raf.tick(0);
+ assert.equal(div.foo, 0);
+
+ raf.tick(200);
+ assert.equal(div.foo, 0.5);
+
+ raf.tick(400);
+ assert.equal(div.foo, 1);
+
+ raf.tick(500);
+ assert.equal(div.foo, 1);
+
+ component.visible = false;
+ raf.tick(600);
+ assert.equal(div.foo, 1);
+ assert.equal(div.bar, 0.75);
+
+ raf.tick(900);
+ assert.equal(div.foo, 1);
+ assert.equal(div.bar, 0);
+
+ // test outro before intro complete
+ raf.tick(1000);
+ component.visible = true;
+ div = /** @type {HTMLDivElement & { foo: Number, bar: number }} */ (
+ target.querySelector('div')
+ );
+
+ raf.tick(1200);
+ assert.equal(div.foo, 0.5);
+
+ component.visible = false;
+ raf.tick(1300);
+ assert.equal(div.foo, 0.75);
+ assert.equal(div.bar, 0.75);
+
+ raf.tick(1400);
+ assert.equal(div.foo, 1);
+ assert.equal(div.bar, 0.5);
+
+ raf.tick(2000);
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-if-block-intro-outro/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-if-block-intro-outro/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-if-block-intro-outro/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-if-block-intro-outro/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-if-block-intro/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-if-block-intro/_config.js
new file mode 100644
index 000000000000..d2c36de4eb55
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-if-block-intro/_config.js
@@ -0,0 +1,19 @@
+import { test } from '../../test';
+
+export default test({
+ test({ assert, component, target, window, raf }) {
+ component.visible = true;
+ const div = /** @type {HTMLDivElement} */ (target.querySelector('div'));
+
+ raf.tick(0);
+ assert.equal(window.getComputedStyle(div).opacity, '0');
+
+ raf.tick(200);
+ assert.equal(window.getComputedStyle(div).opacity, '0.5');
+
+ raf.tick(400);
+ assert.equal(window.getComputedStyle(div).opacity, '1');
+
+ raf.tick(500);
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-if-block-intro/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-if-block-intro/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-if-block-intro/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-if-block-intro/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-if-block-outro-timeout/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-if-block-outro-timeout/_config.js
new file mode 100644
index 000000000000..6c4987cbf66a
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-if-block-outro-timeout/_config.js
@@ -0,0 +1,21 @@
+import { test } from '../../test';
+
+export default test({
+ test({ assert, component, target, window, raf }) {
+ component.visible = true;
+ const div = /** @type {HTMLDivElement} */ (target.querySelector('div'));
+
+ component.visible = false;
+ assert.equal(window.getComputedStyle(div).opacity, '1');
+
+ raf.tick(200);
+ assert.equal(window.getComputedStyle(div).opacity, '0.5');
+
+ raf.tick(400);
+ assert.equal(window.getComputedStyle(div).opacity, '0');
+
+ raf.tick(600);
+ assert.equal(component.div, undefined);
+ assert.equal(target.querySelector('div'), undefined);
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-if-block-outro-timeout/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-if-block-outro-timeout/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-if-block-outro-timeout/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-if-block-outro-timeout/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-if-else-block-dynamic-outro/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-if-else-block-dynamic-outro/_config.js
new file mode 100644
index 000000000000..25eb79853d2e
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-if-else-block-dynamic-outro/_config.js
@@ -0,0 +1,23 @@
+import { test } from '../../test';
+
+export default test({
+ get props() {
+ return { z: 'z' };
+ },
+
+ test({ assert, component, target, raf }) {
+ assert.equal(target.querySelector('div'), component.no);
+
+ component.x = true;
+
+ raf.tick(25);
+ assert.equal(component.yes.foo, undefined);
+ assert.equal(component.no.foo, 0.75);
+
+ raf.tick(75);
+ assert.equal(component.yes.foo, undefined);
+ assert.equal(component.no.foo, 0.25);
+
+ raf.tick(100);
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-if-else-block-dynamic-outro/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-if-else-block-dynamic-outro/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-if-else-block-dynamic-outro/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-if-else-block-dynamic-outro/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-if-else-block-intro/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-if-else-block-intro/_config.js
new file mode 100644
index 000000000000..130cfb9dde95
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-if-else-block-intro/_config.js
@@ -0,0 +1,25 @@
+import { test } from '../../test';
+
+export default test({
+ intro: true,
+
+ test({ assert, component, target, raf }) {
+ assert.equal(target.querySelector('div'), component.no);
+
+ raf.tick(0);
+ assert.equal(component.no.foo, 0);
+
+ raf.tick(200);
+ assert.equal(component.no.foo, 0.5);
+
+ raf.tick(500);
+ component.x = true;
+ assert.equal(component.no, null);
+ assert.equal(component.yes.foo, undefined);
+
+ raf.tick(700);
+ assert.equal(component.yes.foo, 0.5);
+
+ raf.tick(1000);
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-if-else-block-intro/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-if-else-block-intro/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-if-else-block-intro/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-if-else-block-intro/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-if-else-block-not-dynamic-outro/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-if-else-block-not-dynamic-outro/_config.js
new file mode 100644
index 000000000000..012013264071
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-if-else-block-not-dynamic-outro/_config.js
@@ -0,0 +1,52 @@
+import { test } from '../../test';
+
+export default test({
+ async test({ assert, component, target, raf }) {
+ const t = target.querySelector('#t');
+
+ await (component.condition = false);
+
+ let time = 0;
+ raf.tick((time += 25));
+
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ TRUE
+ FALSE
+ `
+ );
+
+ // toggling back in the middle of the out transition
+ // will reuse the previous element
+ await (component.condition = true);
+
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ TRUE
+ FALSE
+ `
+ );
+ assert.equal(target.querySelector('#t'), t);
+
+ raf.tick((time += 25));
+
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ TRUE
+ FALSE
+ `
+ );
+
+ raf.tick((time += 75));
+
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ TRUE
+ `
+ );
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-if-else-block-not-dynamic-outro/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-if-else-block-not-dynamic-outro/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-if-else-block-not-dynamic-outro/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-if-else-block-not-dynamic-outro/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-if-else-block-outro/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-if-else-block-outro/_config.js
new file mode 100644
index 000000000000..91d406eb5e4a
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-if-else-block-outro/_config.js
@@ -0,0 +1,19 @@
+import { test } from '../../test';
+
+export default test({
+ test({ assert, component, target, raf }) {
+ assert.equal(target.querySelector('div'), component.no);
+
+ component.x = true;
+
+ raf.tick(25);
+ assert.equal(component.yes.foo, undefined);
+ assert.equal(component.no.foo, 0.75);
+
+ raf.tick(75);
+ assert.equal(component.yes.foo, undefined);
+ assert.equal(component.no.foo, 0.25);
+
+ raf.tick(100);
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-if-else-block-outro/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-if-else-block-outro/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-if-else-block-outro/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-if-else-block-outro/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-if-elseif-block-outro/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-if-elseif-block-outro/_config.js
new file mode 100644
index 000000000000..8a6218c82b9c
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-if-elseif-block-outro/_config.js
@@ -0,0 +1,24 @@
+import { test } from '../../test';
+
+export default test({
+ get props() {
+ return { x: false, y: true };
+ },
+
+ test({ assert, component, target, raf }) {
+ assert.equal(target.querySelector('div'), component.no);
+
+ component.x = true;
+ component.y = false;
+
+ raf.tick(25);
+ assert.equal(component.yes.foo, undefined);
+ assert.equal(component.no.foo, 0.75);
+
+ raf.tick(75);
+ assert.equal(component.yes.foo, undefined);
+ assert.equal(component.no.foo, 0.25);
+
+ raf.tick(100);
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-if-elseif-block-outro/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-if-elseif-block-outro/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-if-elseif-block-outro/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-if-elseif-block-outro/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-if-outro-unrelated-component-binding-update/Component.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-if-outro-unrelated-component-binding-update/Component.svelte
new file mode 100644
index 000000000000..512d674378b4
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-if-outro-unrelated-component-binding-update/Component.svelte
@@ -0,0 +1,18 @@
+
+
+ (condition = false)} />
+ (bool = !bool)} />
+{#if bool}
+
+{/if}
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-if-outro-unrelated-component-binding-update/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-if-outro-unrelated-component-binding-update/_config.js
new file mode 100644
index 000000000000..63827a19626f
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-if-outro-unrelated-component-binding-update/_config.js
@@ -0,0 +1,11 @@
+import { test } from '../../test';
+
+export default test({
+ async test({ assert, target, window, raf }) {
+ const button = target.querySelector('button');
+ const event = new window.MouseEvent('click', { bubbles: true });
+ await button?.dispatchEvent(event);
+ raf.tick(500);
+ assert.htmlEqual(target.innerHTML, '');
+ }
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-if-outro-unrelated-component-binding-update/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-if-outro-unrelated-component-binding-update/main.svelte
new file mode 100644
index 000000000000..0b56f8e4d542
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-if-outro-unrelated-component-binding-update/main.svelte
@@ -0,0 +1,8 @@
+
+
+{#if condition}
+ (bool = !bool)} />
+{#if bool}
+
+{/if}
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-if-outro-unrelated-component-store-update/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-if-outro-unrelated-component-store-update/_config.js
new file mode 100644
index 000000000000..8fcb740e0013
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-if-outro-unrelated-component-store-update/_config.js
@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+ async test({ assert, target, component, raf }) {
+ await component.condition.set(false);
+ raf.tick(500);
+ assert.htmlEqual(target.innerHTML, '');
+ }
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-if-outro-unrelated-component-store-update/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-if-outro-unrelated-component-store-update/main.svelte
new file mode 100644
index 000000000000..768969d1383e
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-if-outro-unrelated-component-store-update/main.svelte
@@ -0,0 +1,10 @@
+
+
+{#if $condition}
+ ($condition = false)} id="1" />
+ } */ (
+ target.querySelectorAll('div')
+ );
+ raf.tick(0);
+ assert.equal(divs[0].foo, undefined);
+ assert.equal(divs[1].foo, 0);
+
+ raf.tick(50);
+ assert.equal(divs[0].foo, undefined);
+ assert.equal(divs[1].foo, 0.5);
+
+ raf.tick(100);
+
+ component.x = false;
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ snaps if x changes
+ transitions if x changes
+ `
+ );
+
+ raf.tick(150);
+ assert.equal(divs[0].foo, undefined);
+ assert.equal(divs[1].foo, 0.5);
+
+ raf.tick(200);
+ assert.htmlEqual(target.innerHTML, '');
+
+ // then toggle y
+ component.y = false;
+ component.x = true;
+ component.y = true;
+
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ snaps if x changes
+ transitions if x changes
+ `
+ );
+ divs = /** @type {NodeListOf} */ (
+ target.querySelectorAll('div')
+ );
+
+ raf.tick(250);
+ assert.equal(divs[0].foo, 0.5);
+ assert.equal(divs[1].foo, 0.5);
+
+ raf.tick(300);
+ assert.equal(divs[0].foo, 1);
+ assert.equal(divs[1].foo, 1);
+
+ component.y = false;
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ snaps if x changes
+ transitions if x changes
+ `
+ );
+
+ raf.tick(320);
+ assert.equal(divs[0].foo, 0.8);
+ assert.equal(divs[1].foo, 0.8);
+
+ raf.tick(400);
+ assert.htmlEqual(target.innerHTML, '');
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-local-and-global/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-local-and-global/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-local-and-global/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-local-and-global/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-local-nested-await/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-local-nested-await/_config.js
new file mode 100644
index 000000000000..9a77ea844262
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-local-nested-await/_config.js
@@ -0,0 +1,36 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+/** @type {(value?: any) => void} */
+let fulfil;
+
+const promise = new Promise((f) => {
+ fulfil = f;
+});
+
+export default test({
+ get props() {
+ return { x: false, promise };
+ },
+
+ test({ assert, component, target, raf }) {
+ component.x = true;
+ fulfil();
+
+ return promise.then(() => {
+ flushSync();
+ const div = /** @type {HTMLDivElement & { foo: number }} */ (target.querySelector('div'));
+ raf.tick(0);
+ assert.equal(div.foo, 0);
+
+ raf.tick(100);
+ assert.equal(div.foo, 1);
+
+ component.x = false;
+ assert.htmlEqual(target.innerHTML, '');
+
+ raf.tick(150);
+ assert.equal(div.foo, 1);
+ });
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-local-nested-await/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-local-nested-await/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-local-nested-await/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-local-nested-await/main.svelte
diff --git a/packages/svelte/test/runtime/samples/transition-js-local-nested-component/Widget.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-local-nested-component/Widget.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-local-nested-component/Widget.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-local-nested-component/Widget.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-local-nested-component/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-local-nested-component/_config.js
new file mode 100644
index 000000000000..6fd8d3b2cc94
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-local-nested-component/_config.js
@@ -0,0 +1,27 @@
+import { test } from '../../test';
+
+export default test({
+ get props() {
+ return { x: false };
+ },
+
+ test({ assert, component, target, raf }) {
+ component.x = true;
+
+ const div = /** @type {HTMLDivElement & { foo: number }} */ (target.querySelector('div'));
+ raf.tick(0);
+ assert.equal(div.foo, 0);
+
+ raf.tick(100);
+ assert.equal(div.foo, 1);
+
+ component.x = false;
+ assert.htmlEqual(target.innerHTML, '
');
+
+ raf.tick(150);
+ assert.equal(div.foo, 0.5);
+
+ raf.tick(200);
+ assert.htmlEqual(target.innerHTML, '');
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-local-nested-component/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-local-nested-component/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-local-nested-component/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-local-nested-component/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-local-nested-each-keyed/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-local-nested-each-keyed/_config.js
new file mode 100644
index 000000000000..fb3a7d036a8e
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-local-nested-each-keyed/_config.js
@@ -0,0 +1,37 @@
+import { test } from '../../test';
+
+export default test({
+ get props() {
+ return { x: false, things: ['a'] };
+ },
+
+ test({ assert, component, target, raf }) {
+ component.x = true;
+
+ const div1 = /** @type {HTMLDivElement & { foo: number }} */ (target.querySelector('div'));
+
+ raf.tick(0);
+ assert.equal(div1.foo, undefined);
+
+ raf.tick(100);
+ assert.equal(div1.foo, undefined);
+
+ component.things = ['a', 'b'];
+ assert.htmlEqual(target.innerHTML, '
');
+
+ const div2 = /** @type {HTMLDivElement & { foo: number }} */ (
+ target.querySelector('div:last-child')
+ );
+
+ raf.tick(100);
+ assert.equal(div1.foo, undefined);
+ assert.equal(div2.foo, 0);
+
+ raf.tick(200);
+ assert.equal(div1.foo, undefined);
+ assert.equal(div2.foo, 1);
+
+ component.x = false;
+ assert.htmlEqual(target.innerHTML, '');
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-local-nested-each-keyed/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-local-nested-each-keyed/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-local-nested-each-keyed/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-local-nested-each-keyed/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-local-nested-each/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-local-nested-each/_config.js
new file mode 100644
index 000000000000..7dd69050545c
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-local-nested-each/_config.js
@@ -0,0 +1,35 @@
+import { test } from '../../test';
+
+export default test({
+ get props() {
+ return { x: false, things: ['a'] };
+ },
+
+ test({ assert, component, target, raf }) {
+ component.x = true;
+
+ const div1 = /** @type {HTMLDivElement & { foo: number }} */ (target.querySelector('div'));
+ raf.tick(0);
+ assert.equal(div1.foo, undefined);
+
+ raf.tick(100);
+ assert.equal(div1.foo, undefined);
+
+ component.things = ['a', 'b'];
+ assert.htmlEqual(target.innerHTML, '
');
+
+ const div2 = /** @type {HTMLDivElement & { foo: number }} */ (
+ target.querySelector('div:last-child')
+ );
+ raf.tick(100);
+ assert.equal(div1.foo, undefined);
+ assert.equal(div2.foo, 0);
+
+ raf.tick(200);
+ assert.equal(div1.foo, undefined);
+ assert.equal(div2.foo, 1);
+
+ component.x = false;
+ assert.htmlEqual(target.innerHTML, '');
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-local-nested-each/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-local-nested-each/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-local-nested-each/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-local-nested-each/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-local-nested-if/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-local-nested-if/_config.js
new file mode 100644
index 000000000000..139364ecd9ce
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-local-nested-if/_config.js
@@ -0,0 +1,42 @@
+import { test } from '../../test';
+
+export default test({
+ get props() {
+ return { x: false, y: true };
+ },
+
+ test({ assert, component, target, raf }) {
+ component.x = true;
+
+ let div = /** @type {HTMLDivElement & { foo: number }} */ (target.querySelector('div'));
+ raf.tick(0);
+ assert.equal(div.foo, undefined);
+
+ component.y = false;
+ assert.htmlEqual(target.innerHTML, '
');
+ div = /** @type {HTMLDivElement & { foo: number }} */ (target.querySelector('div'));
+
+ raf.tick(50);
+ assert.equal(div.foo, 0.5);
+
+ raf.tick(100);
+ assert.htmlEqual(target.innerHTML, '');
+
+ component.x = false;
+ component.y = true;
+ assert.htmlEqual(target.innerHTML, '');
+
+ component.x = true;
+ assert.htmlEqual(target.innerHTML, '
');
+ div = /** @type {HTMLDivElement & { foo: number }} */ (target.querySelector('div'));
+
+ component.y = false;
+ assert.htmlEqual(target.innerHTML, '
');
+
+ raf.tick(150);
+ assert.equal(div.foo, 0.5);
+
+ raf.tick(200);
+ assert.htmlEqual(target.innerHTML, '');
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-local-nested-if/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-local-nested-if/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-local-nested-if/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-local-nested-if/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-local/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-local/_config.js
new file mode 100644
index 000000000000..cd836a6ca4cb
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-local/_config.js
@@ -0,0 +1,41 @@
+import { test } from '../../test';
+
+export default test({
+ get props() {
+ return { x: false, y: true };
+ },
+
+ test({ assert, component, target, raf }) {
+ component.x = true;
+
+ let div = /** @type {HTMLDivElement & { foo: number }} */ (target.querySelector('div'));
+ assert.equal(div.foo, undefined);
+
+ component.y = false;
+ assert.htmlEqual(target.innerHTML, '
');
+ div = /** @type {HTMLDivElement & { foo: number }} */ (target.querySelector('div'));
+
+ raf.tick(50);
+ assert.equal(div.foo, 0.5);
+
+ raf.tick(100);
+ assert.htmlEqual(target.innerHTML, '');
+
+ component.x = false;
+ component.y = true;
+ assert.htmlEqual(target.innerHTML, '');
+
+ component.x = true;
+ assert.htmlEqual(target.innerHTML, '
');
+ div = /** @type {HTMLDivElement & { foo: number }} */ (target.querySelector('div'));
+
+ component.y = false;
+ assert.htmlEqual(target.innerHTML, '
');
+
+ raf.tick(120);
+ assert.equal(div.foo, 0.8);
+
+ raf.tick(200);
+ assert.htmlEqual(target.innerHTML, '');
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-local/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-local/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-local/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-local/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-nested-await/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-nested-await/_config.js
new file mode 100644
index 000000000000..36daf798fb13
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-nested-await/_config.js
@@ -0,0 +1,40 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+/** @type {(value?: any) => void} */
+let fulfil;
+
+const promise = new Promise((f) => {
+ fulfil = f;
+});
+
+export default test({
+ get props() {
+ return { x: false, promise };
+ },
+
+ test({ assert, component, target, raf }) {
+ component.x = true;
+ fulfil();
+
+ return promise.then(async () => {
+ flushSync();
+ const div = /** @type {HTMLDivElement & { foo: number }} */ (target.querySelector('div'));
+
+ raf.tick(0);
+ assert.equal(div.foo, 0);
+
+ raf.tick(100);
+ assert.equal(div.foo, 1);
+
+ component.x = false;
+ assert.htmlEqual(target.innerHTML, '
');
+
+ raf.tick(150);
+ assert.equal(div.foo, 0.5);
+
+ raf.tick(200);
+ assert.htmlEqual(target.innerHTML, '');
+ });
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-nested-await/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-nested-await/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-nested-await/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-nested-await/main.svelte
diff --git a/packages/svelte/test/runtime/samples/transition-js-nested-component/Widget.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-nested-component/Widget.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-nested-component/Widget.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-nested-component/Widget.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-nested-component/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-nested-component/_config.js
new file mode 100644
index 000000000000..4311757585ad
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-nested-component/_config.js
@@ -0,0 +1,28 @@
+import { test } from '../../test';
+
+export default test({
+ get props() {
+ return { x: false };
+ },
+
+ test({ assert, component, target, raf }) {
+ component.x = true;
+
+ const div = /** @type {HTMLDivElement & { foo: number }} */ (target.querySelector('div'));
+
+ raf.tick(0);
+ assert.equal(div.foo, 0);
+
+ raf.tick(100);
+ assert.equal(div.foo, 1);
+
+ component.x = false;
+ assert.htmlEqual(target.innerHTML, '
');
+
+ raf.tick(150);
+ assert.equal(div.foo, 0.5);
+
+ raf.tick(200);
+ assert.htmlEqual(target.innerHTML, '');
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-nested-component/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-nested-component/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-nested-component/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-nested-component/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-nested-each-delete/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-nested-each-delete/_config.js
new file mode 100644
index 000000000000..406b806f52ca
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-nested-each-delete/_config.js
@@ -0,0 +1,33 @@
+import { test } from '../../test';
+
+export default test({
+ get props() {
+ return { visible: true, things: ['a', 'b', 'c'] };
+ },
+
+ test({ assert, component, target, raf }) {
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ a
+ b
+ c
+ `
+ );
+
+ component.things = ['a'];
+
+ raf.tick(100);
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ a
+ `
+ );
+
+ component.visible = false;
+
+ raf.tick(200);
+ assert.htmlEqual(target.innerHTML, '');
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-nested-each-delete/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-nested-each-delete/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-nested-each-delete/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-nested-each-delete/main.svelte
diff --git a/packages/svelte/test/runtime/samples/transition-js-nested-each-keyed-2/Widget.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-nested-each-keyed-2/Widget.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-nested-each-keyed-2/Widget.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-nested-each-keyed-2/Widget.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-nested-each-keyed-2/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-nested-each-keyed-2/_config.js
new file mode 100644
index 000000000000..67af567201a5
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-nested-each-keyed-2/_config.js
@@ -0,0 +1,12 @@
+import { test } from '../../test';
+
+export default test({
+ get props() {
+ return { x: true, things: ['a', 'b'] };
+ },
+
+ test({ assert, component, target }) {
+ component.x = false;
+ assert.htmlEqual(target.innerHTML, '');
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-nested-each-keyed-2/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-nested-each-keyed-2/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-nested-each-keyed-2/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-nested-each-keyed-2/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-nested-each-keyed/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-nested-each-keyed/_config.js
new file mode 100644
index 000000000000..131e81fa1c78
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-nested-each-keyed/_config.js
@@ -0,0 +1,28 @@
+import { test } from '../../test';
+
+export default test({
+ get props() {
+ return { x: false, things: ['a'] };
+ },
+
+ test({ assert, component, target, raf }) {
+ component.x = true;
+
+ const div = /** @type {HTMLDivElement & { foo: number }} */ (target.querySelector('div'));
+
+ raf.tick(0);
+ assert.equal(div.foo, 0);
+
+ raf.tick(100);
+ assert.equal(div.foo, 1);
+
+ component.x = false;
+ assert.htmlEqual(target.innerHTML, '
');
+
+ raf.tick(150);
+ assert.equal(div.foo, 0.5);
+
+ raf.tick(200);
+ assert.htmlEqual(target.innerHTML, '');
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-nested-each-keyed/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-nested-each-keyed/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-nested-each-keyed/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-nested-each-keyed/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-nested-each/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-nested-each/_config.js
new file mode 100644
index 000000000000..131e81fa1c78
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-nested-each/_config.js
@@ -0,0 +1,28 @@
+import { test } from '../../test';
+
+export default test({
+ get props() {
+ return { x: false, things: ['a'] };
+ },
+
+ test({ assert, component, target, raf }) {
+ component.x = true;
+
+ const div = /** @type {HTMLDivElement & { foo: number }} */ (target.querySelector('div'));
+
+ raf.tick(0);
+ assert.equal(div.foo, 0);
+
+ raf.tick(100);
+ assert.equal(div.foo, 1);
+
+ component.x = false;
+ assert.htmlEqual(target.innerHTML, '
');
+
+ raf.tick(150);
+ assert.equal(div.foo, 0.5);
+
+ raf.tick(200);
+ assert.htmlEqual(target.innerHTML, '');
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-nested-each/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-nested-each/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-nested-each/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-nested-each/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-nested-if/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-nested-if/_config.js
new file mode 100644
index 000000000000..04f7c0d8c5fb
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-nested-if/_config.js
@@ -0,0 +1,28 @@
+import { test } from '../../test';
+
+export default test({
+ get props() {
+ return { x: false, y: true };
+ },
+
+ test({ assert, component, target, raf }) {
+ component.x = true;
+
+ const div = /** @type {HTMLDivElement & { foo: number }} */ (target.querySelector('div'));
+
+ raf.tick(0);
+ assert.equal(div.foo, 0);
+
+ raf.tick(100);
+ assert.equal(div.foo, 1);
+
+ component.x = false;
+ assert.htmlEqual(target.innerHTML, '
');
+
+ raf.tick(150);
+ assert.equal(div.foo, 0.5);
+
+ raf.tick(200);
+ assert.htmlEqual(target.innerHTML, '');
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-nested-if/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-nested-if/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-nested-if/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-nested-if/main.svelte
diff --git a/packages/svelte/test/runtime/samples/transition-js-nested-intro/Child.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-nested-intro/Child.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-nested-intro/Child.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-nested-intro/Child.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-nested-intro/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-nested-intro/_config.js
new file mode 100644
index 000000000000..8c4c661eeb99
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-nested-intro/_config.js
@@ -0,0 +1,23 @@
+import { test } from '../../test';
+
+export default test({
+ test({ assert, component, target, raf }) {
+ component.visible = true;
+ const div = /** @type {HTMLDivElement & { foo: number }} */ (target.querySelector('div'));
+
+ raf.tick(0);
+ assert.equal(div.foo, 0);
+
+ raf.tick(50);
+ assert.equal(div.foo, 0);
+
+ raf.tick(100);
+ assert.equal(div.foo, 0.5);
+
+ raf.tick(125);
+ assert.equal(div.foo, 0.75);
+
+ raf.tick(150);
+ assert.equal(div.foo, 1);
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-nested-intro/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-nested-intro/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-nested-intro/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-nested-intro/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-option-direction/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-option-direction/_config.js
new file mode 100644
index 000000000000..a748cc73465c
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-option-direction/_config.js
@@ -0,0 +1,21 @@
+import { test } from '../../test';
+
+export default test({
+ test({ assert, component, target }) {
+ component.visible = true;
+
+ const div_in = /** @type {HTMLDivElement & { direction: string }} */ (
+ target.querySelector('#in')
+ );
+ const div_out = /** @type {HTMLDivElement & { direction: string }} */ (
+ target.querySelector('#out')
+ );
+ const div_both = /** @type {HTMLDivElement & { direction: string }} */ (
+ target.querySelector('#both')
+ );
+
+ assert.equal(div_in.direction, 'in');
+ assert.equal(div_out.direction, 'out');
+ assert.equal(div_both.direction, 'both');
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-option-direction/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-option-direction/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-option-direction/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-option-direction/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-parameterised-with-state/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-parameterised-with-state/_config.js
new file mode 100644
index 000000000000..4551bffdd8b4
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-parameterised-with-state/_config.js
@@ -0,0 +1,23 @@
+import { test } from '../../test';
+
+export default test({
+ get props() {
+ return { duration: 200 };
+ },
+
+ test({ assert, component, target, raf }) {
+ component.visible = true;
+ const div = /** @type {HTMLDivElement & { foo: number }} */ (target.querySelector('div'));
+
+ raf.tick(0);
+ assert.equal(div.foo, 0);
+
+ raf.tick(50);
+ assert.equal(div.foo, 100);
+
+ raf.tick(100);
+ assert.equal(div.foo, 200);
+
+ raf.tick(101);
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-parameterised-with-state/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-parameterised-with-state/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-parameterised-with-state/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-parameterised-with-state/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-parameterised/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-parameterised/_config.js
new file mode 100644
index 000000000000..8bb475491cce
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-parameterised/_config.js
@@ -0,0 +1,19 @@
+import { test } from '../../test';
+
+export default test({
+ test({ assert, component, target, raf }) {
+ component.visible = true;
+ const div = /** @type {HTMLDivElement & { foo: number }} */ (target.querySelector('div'));
+
+ raf.tick(0);
+ assert.equal(div.foo, 0);
+
+ raf.tick(50);
+ assert.equal(div.foo, 100);
+
+ raf.tick(100);
+ assert.equal(div.foo, 200);
+
+ raf.tick(101);
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-parameterised/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-parameterised/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-parameterised/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-parameterised/main.svelte
diff --git a/packages/svelte/test/runtime/samples/transition-js-slot-2/Nested.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-slot-2/Nested.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-slot-2/Nested.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-slot-2/Nested.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-slot-2/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-slot-2/_config.js
new file mode 100644
index 000000000000..f5043dbb0aee
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-slot-2/_config.js
@@ -0,0 +1,31 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+// cancelled the transition halfway
+export default test({
+ html: `
+ Foo
+ `,
+
+ test({ assert, component, target, raf }) {
+ flushSync(() => {
+ component.hide();
+ });
+ const div = /** @type {HTMLDivElement & { foo: number }} */ (target.querySelector('div'));
+
+ raf.tick(50);
+ assert.equal(div.foo, 0.5);
+
+ flushSync(() => {
+ component.show();
+ });
+
+ assert.htmlEqual(target.innerHTML, 'Bar
');
+
+ raf.tick(75);
+ assert.equal(div.foo, 0.75);
+
+ raf.tick(100);
+ assert.equal(div.foo, 1);
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-slot-2/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-slot-2/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-slot-2/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-slot-2/main.svelte
diff --git a/packages/svelte/test/runtime/samples/transition-js-slot-3/Nested.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-slot-3/Nested.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-slot-3/Nested.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-slot-3/Nested.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-slot-3/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-slot-3/_config.js
new file mode 100644
index 000000000000..3d92abc65a41
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-slot-3/_config.js
@@ -0,0 +1,30 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+ html: `
+ Foo
+ `,
+
+ test({ assert, component, target, raf }) {
+ flushSync(() => {
+ component.hide();
+ });
+ const div = /** @type {HTMLDivElement & { foo: number }} */ (target.querySelector('div'));
+
+ raf.tick(50);
+ assert.equal(div.foo, 0.5);
+
+ flushSync(() => {
+ component.show();
+ });
+
+ assert.htmlEqual(target.innerHTML, 'Bar
');
+
+ raf.tick(75);
+ assert.equal(div.foo, 0.75);
+
+ raf.tick(100);
+ assert.equal(div.foo, 1);
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-slot-3/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-slot-3/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-slot-3/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-slot-3/main.svelte
diff --git a/packages/svelte/test/runtime/samples/transition-js-slot-4-cancelled/Nested.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-slot-4-cancelled/Nested.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-slot-4-cancelled/Nested.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-slot-4-cancelled/Nested.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-slot-4-cancelled/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-slot-4-cancelled/_config.js
new file mode 100644
index 000000000000..aad162383e1a
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-slot-4-cancelled/_config.js
@@ -0,0 +1,58 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+// updated props in the middle of transitions
+// and cancelled the transition halfway
+export default test({
+ html: `
+ outside Foo Foo Foo
+ inside Foo Foo Foo
+ `,
+ get props() {
+ return { props: 'Foo' };
+ },
+
+ async test({ assert, component, target, raf }) {
+ flushSync(() => {
+ component.hide();
+ });
+ const [, div] = /** @type {NodeListOf} */ (
+ target.querySelectorAll('div')
+ );
+
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ outside Bar Foo Bar
+ inside Foo Foo Foo
+ `
+ );
+
+ raf.tick(50);
+ assert.equal(div.foo, 0.5);
+
+ component.props = 'Bar';
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ outside Bar Bar Bar
+ inside Foo Foo Foo
+ `
+ );
+
+ flushSync(() => {
+ component.show();
+ });
+
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ outside Bar Bar Bar
+ inside Bar Bar Bar
+ `
+ );
+
+ raf.tick(100);
+ assert.equal(div.foo, 1);
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-slot-4-cancelled/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-slot-4-cancelled/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-slot-4-cancelled/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-slot-4-cancelled/main.svelte
diff --git a/packages/svelte/test/runtime/samples/transition-js-slot-5-cancelled-overflow/Nested.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-slot-5-cancelled-overflow/Nested.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-slot-5-cancelled-overflow/Nested.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-slot-5-cancelled-overflow/Nested.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-slot-5-cancelled-overflow/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-slot-5-cancelled-overflow/_config.js
new file mode 100644
index 000000000000..a709aa6c92ef
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-slot-5-cancelled-overflow/_config.js
@@ -0,0 +1,55 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+// updated props in the middle of transitions
+// and cancelled the transition halfway
+// + spreaded props + overflow context
+
+export default test({
+ html: `
+ outside Foo Foo Foo
+ inside Foo Foo Foo
+ 0
+ `,
+ get props() {
+ return { props: 'Foo' };
+ },
+
+ test({ assert, component, target, raf }) {
+ flushSync(() => {
+ component.hide();
+ });
+ const [, div] = /** @type {NodeListOf} */ (
+ target.querySelectorAll('div')
+ );
+
+ raf.tick(50);
+ assert.equal(div.foo, 0.5);
+
+ component.props = 'Bar';
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ outside Bar Bar Bar
+ inside Foo Foo Foo
+ 0
+ `
+ );
+
+ flushSync(() => {
+ component.show();
+ });
+
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ outside Bar Bar Bar
+ inside Bar Bar Bar
+ 0
+ `
+ );
+
+ raf.tick(100);
+ assert.equal(div.foo, 1);
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-slot-5-cancelled-overflow/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-slot-5-cancelled-overflow/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-slot-5-cancelled-overflow/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-slot-5-cancelled-overflow/main.svelte
diff --git a/packages/svelte/test/runtime/samples/transition-js-slot-6-spread-cancelled/Nested.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-slot-6-spread-cancelled/Nested.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-slot-6-spread-cancelled/Nested.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-slot-6-spread-cancelled/Nested.svelte
diff --git a/packages/svelte/test/runtime/samples/transition-js-slot-6-spread-cancelled/Nested2.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-slot-6-spread-cancelled/Nested2.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-slot-6-spread-cancelled/Nested2.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-slot-6-spread-cancelled/Nested2.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-slot-6-spread-cancelled/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-slot-6-spread-cancelled/_config.js
new file mode 100644
index 000000000000..6f694c4a0f8e
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-slot-6-spread-cancelled/_config.js
@@ -0,0 +1,55 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+// updated props in the middle of transitions
+// and cancelled the transition halfway
+// with spreaded props
+
+export default test({
+ html: `
+ outside Foo Foo Foo
+ inside Foo Foo Foo
+ inside Foo Foo XXX
+ `,
+ get props() {
+ return { props: 'Foo' };
+ },
+
+ test({ assert, component, target, raf }) {
+ flushSync(() => {
+ component.hide();
+ });
+ const [, div] = /** @type {NodeListOf} */ (
+ target.querySelectorAll('div')
+ );
+
+ raf.tick(50);
+ assert.equal(div.foo, 0.5);
+
+ component.props = 'Bar';
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ outside Bar Bar Bar
+ inside Foo Foo Foo
+ inside Foo Foo XXX
+ `
+ );
+
+ flushSync(() => {
+ component.show();
+ });
+
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ outside Bar Bar Bar
+ inside Bar Bar Bar
+ inside Bar Bar XXX
+ `
+ );
+
+ raf.tick(100);
+ assert.equal(div.foo, 1);
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-slot-6-spread-cancelled/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-slot-6-spread-cancelled/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-slot-6-spread-cancelled/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-slot-6-spread-cancelled/main.svelte
diff --git a/packages/svelte/test/runtime/samples/transition-js-slot-7-spread-cancelled-overflow/Nested.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-slot-7-spread-cancelled-overflow/Nested.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-slot-7-spread-cancelled-overflow/Nested.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-slot-7-spread-cancelled-overflow/Nested.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-slot-7-spread-cancelled-overflow/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-slot-7-spread-cancelled-overflow/_config.js
new file mode 100644
index 000000000000..27861680d265
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-slot-7-spread-cancelled-overflow/_config.js
@@ -0,0 +1,55 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+// updated props in the middle of transitions
+// and cancelled the transition halfway
+// + spreaded props + overflow context
+
+export default test({
+ html: `
+ outside Foo Foo Foo
+ inside Foo Foo Foo
+ 0
+ `,
+ get props() {
+ return { props: 'Foo' };
+ },
+
+ async test({ assert, component, target, raf }) {
+ flushSync(() => {
+ component.hide();
+ });
+ const [, div] = /** @type {NodeListOf} */ (
+ target.querySelectorAll('div')
+ );
+
+ raf.tick(50);
+ assert.equal(div.foo, 0.5);
+
+ component.props = 'Bar';
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ outside Bar Bar Bar
+ inside Foo Foo Foo
+ 0
+ `
+ );
+
+ flushSync(() => {
+ component.show();
+ });
+
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ outside Bar Bar Bar
+ inside Bar Bar Bar
+ 0
+ `
+ );
+
+ raf.tick(100);
+ assert.equal(div.foo, 1);
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-slot-7-spread-cancelled-overflow/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-slot-7-spread-cancelled-overflow/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-slot-7-spread-cancelled-overflow/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-slot-7-spread-cancelled-overflow/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-slot-fallback/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-slot-fallback/_config.js
new file mode 100644
index 000000000000..3d92abc65a41
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-slot-fallback/_config.js
@@ -0,0 +1,30 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+ html: `
+ Foo
+ `,
+
+ test({ assert, component, target, raf }) {
+ flushSync(() => {
+ component.hide();
+ });
+ const div = /** @type {HTMLDivElement & { foo: number }} */ (target.querySelector('div'));
+
+ raf.tick(50);
+ assert.equal(div.foo, 0.5);
+
+ flushSync(() => {
+ component.show();
+ });
+
+ assert.htmlEqual(target.innerHTML, 'Bar
');
+
+ raf.tick(75);
+ assert.equal(div.foo, 0.75);
+
+ raf.tick(100);
+ assert.equal(div.foo, 1);
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-slot-fallback/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-slot-fallback/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-slot-fallback/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-slot-fallback/main.svelte
diff --git a/packages/svelte/test/runtime/samples/transition-js-slot/Nested.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-slot/Nested.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-slot/Nested.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-slot/Nested.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-slot/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-slot/_config.js
new file mode 100644
index 000000000000..09041cd3a642
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-slot/_config.js
@@ -0,0 +1,30 @@
+import { test } from '../../test';
+
+export default test({
+ get props() {
+ return { visible: false };
+ },
+
+ html: `
+
+ `,
+
+ test({ assert, component, target, raf }) {
+ component.visible = true;
+ const p = /** @type {HTMLParagraphElement & { foo: number }} */ (target.querySelector('p'));
+
+ raf.tick(0);
+ assert.equal(p.foo, 0);
+
+ raf.tick(50);
+ assert.equal(p.foo, 0.5);
+
+ component.visible = false;
+
+ raf.tick(75);
+ assert.equal(p.foo, 0.25);
+
+ raf.tick(100);
+ assert.equal(p.foo, 0);
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/transition-js-slot/main.svelte b/packages/svelte/tests/runtime-legacy/samples/transition-js-slot/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/transition-js-slot/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/transition-js-slot/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/unchanged-expression-escape/_config.js b/packages/svelte/tests/runtime-legacy/samples/unchanged-expression-escape/_config.js
new file mode 100644
index 000000000000..2da933ea879b
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/unchanged-expression-escape/_config.js
@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+ html: `
+ Hello world, what's up? this & that
+ Hello world, what's up? this & that
+ Hello world, what's up?
+ `
+});
diff --git a/packages/svelte/test/runtime/samples/unchanged-expression-escape/main.svelte b/packages/svelte/tests/runtime-legacy/samples/unchanged-expression-escape/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/unchanged-expression-escape/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/unchanged-expression-escape/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/unchanged-expression-xss/_config.js b/packages/svelte/tests/runtime-legacy/samples/unchanged-expression-xss/_config.js
new file mode 100644
index 000000000000..180facc4db2a
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/unchanged-expression-xss/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+ html: "<b\nstyle='color:\nred;'>RED?!?</b>
"
+});
diff --git a/packages/svelte/test/runtime/samples/unchanged-expression-xss/main.svelte b/packages/svelte/tests/runtime-legacy/samples/unchanged-expression-xss/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/unchanged-expression-xss/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/unchanged-expression-xss/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/whitespace-each-block/_config.js b/packages/svelte/tests/runtime-legacy/samples/whitespace-each-block/_config.js
new file mode 100644
index 000000000000..bdf89df8abfb
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/whitespace-each-block/_config.js
@@ -0,0 +1,11 @@
+import { test } from '../../test';
+
+export default test({
+ get props() {
+ return { characters: ['a', 'b', 'c'] };
+ },
+
+ test({ assert, target }) {
+ assert.equal(target.textContent, 'abc');
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/whitespace-each-block/main.svelte b/packages/svelte/tests/runtime-legacy/samples/whitespace-each-block/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/whitespace-each-block/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/whitespace-each-block/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/whitespace-list/_config.js b/packages/svelte/tests/runtime-legacy/samples/whitespace-list/_config.js
new file mode 100644
index 000000000000..1ab8f066abd8
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/whitespace-list/_config.js
@@ -0,0 +1,21 @@
+import { test } from '../../test';
+
+export default test({
+ get props() {
+ return { one: 'one', two: 'two', three: 'three' };
+ },
+
+ html: `
+
+ `,
+
+ test({ assert, target }) {
+ const ul = /** @type {HTMLElement} */ (target.querySelector('ul'));
+
+ assert.equal(ul.childNodes.length, 5);
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/whitespace-list/main.svelte b/packages/svelte/tests/runtime-legacy/samples/whitespace-list/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/whitespace-list/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/whitespace-list/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/whitespace-normal/_config.js b/packages/svelte/tests/runtime-legacy/samples/whitespace-normal/_config.js
new file mode 100644
index 000000000000..e0ddf94339b2
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/whitespace-normal/_config.js
@@ -0,0 +1,11 @@
+import { test } from '../../test';
+
+export default test({
+ get props() {
+ return { name: 'world' };
+ },
+
+ test({ assert, target }) {
+ assert.equal(target.textContent, 'Hello world! How are you?');
+ }
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/whitespace-normal/main.svelte b/packages/svelte/tests/runtime-legacy/samples/whitespace-normal/main.svelte
new file mode 100644
index 000000000000..e72b30cf4333
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/whitespace-normal/main.svelte
@@ -0,0 +1,5 @@
+
+
+Hello {name}! How are you?
diff --git a/packages/svelte/tests/runtime-legacy/samples/window-bind-scroll-update/_config.js b/packages/svelte/tests/runtime-legacy/samples/window-bind-scroll-update/_config.js
new file mode 100644
index 000000000000..d00b70120fbe
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/window-bind-scroll-update/_config.js
@@ -0,0 +1,47 @@
+import { test } from '../../test';
+import { vi } from 'vitest';
+
+/** @type {Window['scrollTo']} */
+let original_scrollTo;
+
+export default test({
+ before_test() {
+ vi.useFakeTimers();
+
+ Object.defineProperties(window, {
+ pageYOffset: {
+ value: 0,
+ configurable: true,
+ writable: true
+ },
+ pageXOffset: {
+ value: 0,
+ configurable: true,
+ writable: true
+ }
+ });
+ original_scrollTo = window.scrollTo;
+
+ // @ts-ignore
+ window.scrollTo = (x, y) => {
+ window.scrollX = x;
+ window.pageYOffset = y;
+ };
+ },
+
+ after_test() {
+ vi.useRealTimers();
+ window.scrollTo = original_scrollTo;
+ },
+
+ async test({ assert, component, window }) {
+ assert.equal(window.pageYOffset, 0);
+
+ // clear the previous 'scrolling' state
+ await vi.runAllTimersAsync();
+ component.scrollY = 100;
+
+ await vi.runAllTimersAsync();
+ assert.equal(window.pageYOffset, 100);
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/window-bind-scroll-update/main.svelte b/packages/svelte/tests/runtime-legacy/samples/window-bind-scroll-update/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/window-bind-scroll-update/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/window-bind-scroll-update/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/window-binding-multiple-handlers/_config.js b/packages/svelte/tests/runtime-legacy/samples/window-binding-multiple-handlers/_config.js
new file mode 100644
index 000000000000..0cefa010d97d
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/window-binding-multiple-handlers/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+ html: 'Click '
+});
diff --git a/packages/svelte/test/runtime/samples/window-binding-multiple-handlers/main.svelte b/packages/svelte/tests/runtime-legacy/samples/window-binding-multiple-handlers/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/window-binding-multiple-handlers/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/window-binding-multiple-handlers/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/window-binding-resize/_config.js b/packages/svelte/tests/runtime-legacy/samples/window-binding-resize/_config.js
new file mode 100644
index 000000000000..af6cf5f061ad
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/window-binding-resize/_config.js
@@ -0,0 +1,52 @@
+import { test } from '../../test';
+
+export default test({
+ html: '1024x768
1
',
+
+ before_test() {
+ Object.defineProperties(window, {
+ innerWidth: {
+ value: 1024,
+ configurable: true
+ },
+ innerHeight: {
+ value: 768,
+ configurable: true
+ },
+ devicePixelRatio: {
+ value: 1,
+ configurable: true
+ }
+ });
+ },
+
+ skip_if_ssr: 'permanent',
+
+ async test({ assert, target, window }) {
+ const event = new window.Event('resize');
+
+ Object.defineProperties(window, {
+ innerWidth: {
+ value: 567,
+ configurable: true
+ },
+ innerHeight: {
+ value: 456,
+ configurable: true
+ },
+ devicePixelRatio: {
+ value: 2,
+ configurable: true
+ }
+ });
+
+ await window.dispatchEvent(event);
+
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ 567x456
2
+ `
+ );
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/window-binding-resize/main.svelte b/packages/svelte/tests/runtime-legacy/samples/window-binding-resize/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/window-binding-resize/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/window-binding-resize/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/window-binding-scroll-store/_config.js b/packages/svelte/tests/runtime-legacy/samples/window-binding-scroll-store/_config.js
new file mode 100644
index 000000000000..3a0f3ccd737e
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/window-binding-scroll-store/_config.js
@@ -0,0 +1,42 @@
+import { test } from '../../test';
+
+/** @type {Window['scrollTo']} */
+let original_scrollTo;
+
+export default test({
+ before_test() {
+ Object.defineProperties(window, {
+ scrollY: {
+ value: 0,
+ configurable: true
+ }
+ });
+ original_scrollTo = window.scrollTo;
+
+ // @ts-ignore
+ window.scrollTo = (x, y) => {};
+ },
+
+ after_test() {
+ window.scrollTo = original_scrollTo;
+ },
+
+ async test({ assert, target, window }) {
+ assert.equal(window.scrollY, 0);
+
+ const event = new window.Event('scroll');
+ Object.defineProperties(window, {
+ scrollY: {
+ value: 234,
+ configurable: true
+ }
+ });
+
+ await window.dispatchEvent(event);
+
+ assert.htmlEqual(
+ target.innerHTML,
+ 'scroll\ny\nis\n234.\n234\n*\n234\n=\n54756
'
+ );
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/window-binding-scroll-store/main.svelte b/packages/svelte/tests/runtime-legacy/samples/window-binding-scroll-store/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/window-binding-scroll-store/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/window-binding-scroll-store/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/window-event-context/_config.js b/packages/svelte/tests/runtime-legacy/samples/window-event-context/_config.js
new file mode 100644
index 000000000000..42b835905941
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/window-event-context/_config.js
@@ -0,0 +1,23 @@
+import { test } from '../../test';
+
+export default test({
+ get props() {
+ return { foo: true };
+ },
+
+ html: 'true',
+
+ skip: /^v4/.test(process.version), // node 4 apparently does some dumb stuff
+
+ async test({ assert, component, target, window }) {
+ const event = new window.Event('click');
+
+ await window.dispatchEvent(event);
+ assert.equal(component.foo, false);
+ assert.htmlEqual(target.innerHTML, 'false');
+
+ await window.dispatchEvent(event);
+ assert.equal(component.foo, true);
+ assert.htmlEqual(target.innerHTML, 'true');
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/window-event-context/main.svelte b/packages/svelte/tests/runtime-legacy/samples/window-event-context/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/window-event-context/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/window-event-context/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/window-event-custom/_config.js b/packages/svelte/tests/runtime-legacy/samples/window-event-custom/_config.js
new file mode 100644
index 000000000000..32b1c65154e0
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/window-event-custom/_config.js
@@ -0,0 +1,20 @@
+import { test } from '../../test';
+
+export default test({
+ html: 'escaped: false
',
+
+ async test({ assert, target, window }) {
+ const event = new window.KeyboardEvent('keydown', {
+ key: 'Escape'
+ });
+
+ await window.dispatchEvent(event);
+
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ escaped: true
+ `
+ );
+ }
+});
diff --git a/packages/svelte/test/runtime/samples/window-event-custom/main.svelte b/packages/svelte/tests/runtime-legacy/samples/window-event-custom/main.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/window-event-custom/main.svelte
rename to packages/svelte/tests/runtime-legacy/samples/window-event-custom/main.svelte
diff --git a/packages/svelte/tests/runtime-legacy/samples/window-event/_config.js b/packages/svelte/tests/runtime-legacy/samples/window-event/_config.js
new file mode 100644
index 000000000000..e77a1f48b9a8
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/window-event/_config.js
@@ -0,0 +1,30 @@
+import { test } from '../../test';
+
+export default test({
+ html: 'x
',
+
+ async test({ assert, target, window }) {
+ const event = new window.Event('resize');
+
+ Object.defineProperties(window, {
+ innerWidth: {
+ value: 567,
+ configurable: true
+ },
+ innerHeight: {
+ value: 456,
+ configurable: true
+ }
+ });
+
+ await window.dispatchEvent(event);
+ await Promise.resolve();
+
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ 567x456
+ `
+ );
+ }
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/window-event/main.svelte b/packages/svelte/tests/runtime-legacy/samples/window-event/main.svelte
new file mode 100644
index 000000000000..773a96232a7d
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/window-event/main.svelte
@@ -0,0 +1,11 @@
+
+
+{width}x{height}
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-legacy/shared.ts b/packages/svelte/tests/runtime-legacy/shared.ts
new file mode 100644
index 000000000000..6ffffe33ef77
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/shared.ts
@@ -0,0 +1,347 @@
+import * as fs from 'node:fs';
+import { setImmediate } from 'node:timers/promises';
+import glob from 'tiny-glob/sync.js';
+// import { clear_loops, flush, set_now, set_raf } from 'svelte/internal';
+import * as $ from 'svelte/internal';
+import { createClassComponent } from 'svelte/legacy';
+import { render } from 'svelte/server';
+import { afterAll, assert, beforeAll } from 'vitest';
+import { compile_directory } from '../helpers.js';
+import { setup_html_equal } from '../html_equal.js';
+import { raf } from '../animation-helpers.js';
+import type { CompileOptions } from '#compiler';
+import { suite_with_variants, type BaseTest } from '../suite.js';
+
+type Assert = typeof import('vitest').assert & {
+ htmlEqual(a: string, b: string, description?: string): void;
+ htmlEqualWithOptions(
+ a: string,
+ b: string,
+ opts: {
+ preserveComments: boolean;
+ withoutNormalizeHtml: boolean;
+ },
+ description?: string
+ ): void;
+};
+
+export interface RuntimeTest = Record>
+ extends BaseTest {
+ /** Use `true` to signal a temporary skip, and `"permanent"` to signal that this test is never intended to run in ssr mode */
+ skip_if_ssr?: boolean | 'permanent';
+ /** Use `true` to signal a temporary skip, and `"permanent"` to signal that this test is never intended to run in hydration mode */
+ skip_if_hydrate?: boolean | 'permanent';
+ html?: string;
+ ssrHtml?: string;
+ compileOptions?: Partial;
+ props?: Props;
+ before_test?: () => void;
+ after_test?: () => void;
+ test?: (args: {
+ variant: 'dom' | 'hydrate';
+ assert: Assert;
+ compileOptions: CompileOptions;
+ component: Props & {
+ [key: string]: any;
+ };
+ mod: any;
+ ok: typeof ok;
+ raf: {
+ tick: (ms: number) => void;
+ };
+ target: HTMLElement;
+ window: Window & {
+ Event: typeof Event;
+ InputEvent: typeof InputEvent;
+ KeyboardEvent: typeof KeyboardEvent;
+ MouseEvent: typeof MouseEvent;
+ };
+ }) => void | Promise;
+ test_ssr?: (args: { assert: Assert }) => void | Promise;
+ accessors?: boolean;
+ immutable?: boolean;
+ intro?: boolean;
+ load_compiled?: boolean;
+ error?: string;
+ runtime_error?: string;
+ warnings?: string[];
+ expect_unhandled_rejections?: boolean;
+ withoutNormalizeHtml?: boolean;
+}
+
+let unhandled_rejection: Error | null = null;
+
+function unhandled_rejection_handler(err: Error) {
+ unhandled_rejection = err;
+}
+
+const listeners = process.rawListeners('unhandledRejection');
+
+const { assert_html_equal, assert_html_equal_with_options } = setup_html_equal({
+ removeDataSvelte: true
+});
+
+beforeAll(() => {
+ // @ts-expect-error TODO huh?
+ process.prependListener('unhandledRejection', unhandled_rejection_handler);
+});
+
+afterAll(() => {
+ process.removeListener('unhandledRejection', unhandled_rejection_handler);
+});
+
+export function runtime_suite(runes: boolean) {
+ return suite_with_variants(
+ ['dom', 'hydrate', 'ssr'],
+ (variant, config) => {
+ if (variant === 'hydrate') {
+ if (config.skip_if_hydrate === 'permanent') return 'no-test';
+ if (config.skip_if_hydrate) return true;
+ }
+ if (variant === 'ssr') {
+ if (
+ config.skip_if_ssr === 'permanent' ||
+ (!config.test_ssr &&
+ config.html === undefined &&
+ config.ssrHtml === undefined &&
+ config.error === undefined)
+ ) {
+ return 'no-test';
+ }
+ if (config.skip_if_ssr) return true;
+ }
+
+ return false;
+ },
+ (config, cwd) => {
+ return common_setup(cwd, runes, config);
+ },
+ async (config, cwd, variant, common) => {
+ await run_test_variant(cwd, config, variant, common);
+ }
+ );
+}
+
+function common_setup(cwd: string, runes: boolean | undefined, config: RuntimeTest) {
+ const compileOptions: CompileOptions = {
+ generate: 'client',
+ ...config.compileOptions,
+ immutable: config.immutable,
+ accessors: 'accessors' in config ? config.accessors : true,
+ runes
+ };
+
+ // load_compiled can be used for debugging a test. It means the compiler will not run on the input
+ // so you can manipulate the output manually to see what fixes it, adding console.logs etc.
+ if (!config.load_compiled) {
+ compile_directory(cwd, 'client', compileOptions);
+ compile_directory(cwd, 'server', compileOptions);
+ }
+
+ return compileOptions;
+}
+
+async function run_test_variant(
+ cwd: string,
+ config: RuntimeTest,
+ variant: 'dom' | 'hydrate' | 'ssr',
+ compileOptions: CompileOptions
+) {
+ let unintended_error = false;
+
+ try {
+ unhandled_rejection = null;
+
+ if (config.expect_unhandled_rejections) {
+ listeners.forEach((listener) => {
+ // @ts-expect-error
+ process.removeListener('unhandledRejection', listener);
+ });
+ }
+
+ // hack to support transition tests
+ raf.reset();
+
+ // Put things we need on window for testing
+ const styles = glob('**/*.css', { cwd: `${cwd}/_output/client` })
+ .map((file) => fs.readFileSync(`${cwd}/_output/client/${file}`, 'utf-8'))
+ .join('\n')
+ .replace(/\/\*<\/?style>\*\//g, '');
+
+ window.location.href = '';
+ window.document.title = '';
+ window.document.head.innerHTML = styles ? `` : '';
+ window.document.body.innerHTML = '0 `,
+
+ async test({ assert, target, window }) {
+ const btn = target.querySelector('button');
+ const clickEvent = new window.Event('click', { bubbles: true });
+ await btn?.dispatchEvent(clickEvent);
+
+ assert.htmlEqual(target.innerHTML, `1 `);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/ambiguous-source/main.svelte b/packages/svelte/tests/runtime-runes/samples/ambiguous-source/main.svelte
new file mode 100644
index 000000000000..878cf2e0bdd1
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/ambiguous-source/main.svelte
@@ -0,0 +1,7 @@
+
+
+ num++}>{num}
diff --git a/packages/svelte/tests/runtime-runes/samples/ambiguous-source/utils.js b/packages/svelte/tests/runtime-runes/samples/ambiguous-source/utils.js
new file mode 100644
index 000000000000..b844422830f5
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/ambiguous-source/utils.js
@@ -0,0 +1,3 @@
+export function setup() {
+ return { num: 0 };
+}
diff --git a/packages/svelte/tests/runtime-runes/samples/attribute-spread-casing/_config.js b/packages/svelte/tests/runtime-runes/samples/attribute-spread-casing/_config.js
new file mode 100644
index 000000000000..eac7b7291495
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attribute-spread-casing/_config.js
@@ -0,0 +1,29 @@
+import { test } from '../../test';
+
+export default test({
+ // There's a slight difference in the output between modes, because the server doesn't know
+ // whether or not the custom element has the readonly boolean, so it plays it save and
+ // assumes it does.
+ html: `
+ click me
+ click me
+ click me
+1 `,
+
+ async test({ assert, target }) {
+ const btn = target.querySelector('button');
+
+ await btn?.click();
+ assert.htmlEqual(target.innerHTML, `2 `);
+
+ await btn?.click();
+ assert.htmlEqual(target.innerHTML, `4 `);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/class-private-state-increment/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-private-state-increment/main.svelte
new file mode 100644
index 000000000000..817768670cb7
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-private-state-increment/main.svelte
@@ -0,0 +1,16 @@
+
+
+ counter.double()}>{counter.getCount()}
diff --git a/packages/svelte/tests/runtime-runes/samples/class-private-state-init/_config.js b/packages/svelte/tests/runtime-runes/samples/class-private-state-init/_config.js
new file mode 100644
index 000000000000..436ce9979876
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-private-state-init/_config.js
@@ -0,0 +1,15 @@
+import { test } from '../../test';
+
+export default test({
+ html: `0 `,
+
+ async test({ assert, target }) {
+ const btn = target.querySelector('button');
+
+ await btn?.click();
+ assert.htmlEqual(target.innerHTML, `1 `);
+
+ await btn?.click();
+ assert.htmlEqual(target.innerHTML, `2 `);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/class-private-state-init/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-private-state-init/main.svelte
new file mode 100644
index 000000000000..44d3cce95e6f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-private-state-init/main.svelte
@@ -0,0 +1,15 @@
+
+
+ counter.count++}>{counter.count}
diff --git a/packages/svelte/tests/runtime-runes/samples/class-private-state/_config.js b/packages/svelte/tests/runtime-runes/samples/class-private-state/_config.js
new file mode 100644
index 000000000000..436ce9979876
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-private-state/_config.js
@@ -0,0 +1,15 @@
+import { test } from '../../test';
+
+export default test({
+ html: `0 `,
+
+ async test({ assert, target }) {
+ const btn = target.querySelector('button');
+
+ await btn?.click();
+ assert.htmlEqual(target.innerHTML, `1 `);
+
+ await btn?.click();
+ assert.htmlEqual(target.innerHTML, `2 `);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/class-private-state/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-private-state/main.svelte
new file mode 100644
index 000000000000..238b46dfb32b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-private-state/main.svelte
@@ -0,0 +1,19 @@
+
+
+ counter.count++}>{counter.count}
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private/_config.js b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private/_config.js
new file mode 100644
index 000000000000..dd847ce2f2a6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private/_config.js
@@ -0,0 +1,13 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+ html: `10 `,
+ ssrHtml: `0 `,
+
+ async test({ assert, target }) {
+ flushSync();
+
+ assert.htmlEqual(target.innerHTML, `10 `);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private/main.svelte
new file mode 100644
index 000000000000..88b039894309
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private/main.svelte
@@ -0,0 +1,14 @@
+
+
+ counter.count++}>{counter.count}
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure/_config.js b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure/_config.js
new file mode 100644
index 000000000000..dd847ce2f2a6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure/_config.js
@@ -0,0 +1,13 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+ html: `10 `,
+ ssrHtml: `0 `,
+
+ async test({ assert, target }) {
+ flushSync();
+
+ assert.htmlEqual(target.innerHTML, `10 `);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure/main.svelte
new file mode 100644
index 000000000000..fe7fcf1aa31e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure/main.svelte
@@ -0,0 +1,22 @@
+
+
+ counter.increment()}>{counter.getCount()}
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-derived-private/_config.js b/packages/svelte/tests/runtime-runes/samples/class-state-derived-private/_config.js
new file mode 100644
index 000000000000..54e9e296fc96
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-derived-private/_config.js
@@ -0,0 +1,30 @@
+import { test } from '../../test';
+
+export default test({
+ html: `
+ 0
+ doubled: 0
+ `,
+
+ async test({ assert, target }) {
+ const btn = target.querySelector('button');
+
+ await btn?.click();
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ 1
+ doubled: 2
+ `
+ );
+
+ await btn?.click();
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ 2
+ doubled: 4
+ `
+ );
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-derived-private/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-state-derived-private/main.svelte
new file mode 100644
index 000000000000..2c4c8f183970
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-derived-private/main.svelte
@@ -0,0 +1,15 @@
+
+
+ counter.count++}>{counter.count}
+doubled: {counter.embiggened}
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-derived-unowned/_config.js b/packages/svelte/tests/runtime-runes/samples/class-state-derived-unowned/_config.js
new file mode 100644
index 000000000000..d73f3351a30c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-derived-unowned/_config.js
@@ -0,0 +1,45 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+ // The component context class instance gets shared between tests, strangely, causing hydration to fail?
+ skip_if_hydrate: 'permanent',
+
+ async test({ assert, target, component }) {
+ const btn = target.querySelector('button');
+
+ flushSync(() => {
+ btn?.click();
+ });
+
+ assert.deepEqual(component.log, [0, 'class trigger false', 'local trigger false', 1]);
+
+ flushSync(() => {
+ btn?.click();
+ });
+
+ assert.deepEqual(component.log, [0, 'class trigger false', 'local trigger false', 1, 2]);
+
+ flushSync(() => {
+ btn?.click();
+ });
+
+ assert.deepEqual(component.log, [0, 'class trigger false', 'local trigger false', 1, 2, 3]);
+
+ flushSync(() => {
+ btn?.click();
+ });
+
+ assert.deepEqual(component.log, [
+ 0,
+ 'class trigger false',
+ 'local trigger false',
+ 1,
+ 2,
+ 3,
+ 4,
+ 'class trigger true',
+ 'local trigger true'
+ ]);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-derived-unowned/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-state-derived-unowned/main.svelte
new file mode 100644
index 000000000000..58b96457dbb6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-derived-unowned/main.svelte
@@ -0,0 +1,36 @@
+
+
+
+
+
+ clicks: {someLogic.someValue}
+
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-derived/_config.js b/packages/svelte/tests/runtime-runes/samples/class-state-derived/_config.js
new file mode 100644
index 000000000000..54e9e296fc96
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-derived/_config.js
@@ -0,0 +1,30 @@
+import { test } from '../../test';
+
+export default test({
+ html: `
+ 0
+ doubled: 0
+ `,
+
+ async test({ assert, target }) {
+ const btn = target.querySelector('button');
+
+ await btn?.click();
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ 1
+ doubled: 2
+ `
+ );
+
+ await btn?.click();
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ 2
+ doubled: 4
+ `
+ );
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-derived/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-state-derived/main.svelte
new file mode 100644
index 000000000000..dcae38300684
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-derived/main.svelte
@@ -0,0 +1,11 @@
+
+
+ counter.count++}>{counter.count}
+doubled: {counter.doubled}
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-increment/_config.js b/packages/svelte/tests/runtime-runes/samples/class-state-increment/_config.js
new file mode 100644
index 000000000000..c7ea1a16db6f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-increment/_config.js
@@ -0,0 +1,15 @@
+import { test } from '../../test';
+
+export default test({
+ html: `1 `,
+
+ async test({ assert, target }) {
+ const btn = target.querySelector('button');
+
+ await btn?.click();
+ assert.htmlEqual(target.innerHTML, `2 `);
+
+ await btn?.click();
+ assert.htmlEqual(target.innerHTML, `4 `);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-increment/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-state-increment/main.svelte
new file mode 100644
index 000000000000..71702ee9c6ee
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-increment/main.svelte
@@ -0,0 +1,8 @@
+
+
+ counter.count *= 2}>{counter.count}
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-init-conflict/_config.js b/packages/svelte/tests/runtime-runes/samples/class-state-init-conflict/_config.js
new file mode 100644
index 000000000000..436ce9979876
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-init-conflict/_config.js
@@ -0,0 +1,15 @@
+import { test } from '../../test';
+
+export default test({
+ html: `0 `,
+
+ async test({ assert, target }) {
+ const btn = target.querySelector('button');
+
+ await btn?.click();
+ assert.htmlEqual(target.innerHTML, `1 `);
+
+ await btn?.click();
+ assert.htmlEqual(target.innerHTML, `2 `);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-init-conflict/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-state-init-conflict/main.svelte
new file mode 100644
index 000000000000..cf33c6de57ec
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-init-conflict/main.svelte
@@ -0,0 +1,16 @@
+
+
+ counter.count++}>{counter.count}
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-init-eager-2/_config.js b/packages/svelte/tests/runtime-runes/samples/class-state-init-eager-2/_config.js
new file mode 100644
index 000000000000..81f5456ad344
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-init-eager-2/_config.js
@@ -0,0 +1,17 @@
+import { test } from '../../test';
+
+export default test({
+ html: `0 `,
+
+ async test({ assert, target, component }) {
+ const btn = target.querySelector('button');
+
+ await btn?.click();
+ assert.htmlEqual(target.innerHTML, `1 `);
+
+ await btn?.click();
+ assert.htmlEqual(target.innerHTML, `2 `);
+
+ assert.deepEqual(component.log, [undefined]);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-init-eager-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-state-init-eager-2/main.svelte
new file mode 100644
index 000000000000..a8420548ccea
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-init-eager-2/main.svelte
@@ -0,0 +1,20 @@
+
+
+ counter.count++}>{counter.count}
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-init-eager-3/_config.js b/packages/svelte/tests/runtime-runes/samples/class-state-init-eager-3/_config.js
new file mode 100644
index 000000000000..81f5456ad344
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-init-eager-3/_config.js
@@ -0,0 +1,17 @@
+import { test } from '../../test';
+
+export default test({
+ html: `0 `,
+
+ async test({ assert, target, component }) {
+ const btn = target.querySelector('button');
+
+ await btn?.click();
+ assert.htmlEqual(target.innerHTML, `1 `);
+
+ await btn?.click();
+ assert.htmlEqual(target.innerHTML, `2 `);
+
+ assert.deepEqual(component.log, [undefined]);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-init-eager-3/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-state-init-eager-3/main.svelte
new file mode 100644
index 000000000000..289a3beebd62
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-init-eager-3/main.svelte
@@ -0,0 +1,16 @@
+
+
+ counter.count++}>{counter.count}
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-init-eager/_config.js b/packages/svelte/tests/runtime-runes/samples/class-state-init-eager/_config.js
new file mode 100644
index 000000000000..597626f9a7d4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-init-eager/_config.js
@@ -0,0 +1,17 @@
+import { test } from '../../test';
+
+export default test({
+ html: `0 `,
+
+ async test({ assert, target, component }) {
+ const btn = target.querySelector('button');
+
+ await btn?.click();
+ assert.htmlEqual(target.innerHTML, `1 `);
+
+ await btn?.click();
+ assert.htmlEqual(target.innerHTML, `2 `);
+
+ assert.deepEqual(component.log, [100]);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-init-eager/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-state-init-eager/main.svelte
new file mode 100644
index 000000000000..1411755df916
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-init-eager/main.svelte
@@ -0,0 +1,16 @@
+
+
+ counter.count++}>{counter.count}
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-init/_config.js b/packages/svelte/tests/runtime-runes/samples/class-state-init/_config.js
new file mode 100644
index 000000000000..436ce9979876
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-init/_config.js
@@ -0,0 +1,15 @@
+import { test } from '../../test';
+
+export default test({
+ html: `0 `,
+
+ async test({ assert, target }) {
+ const btn = target.querySelector('button');
+
+ await btn?.click();
+ assert.htmlEqual(target.innerHTML, `1 `);
+
+ await btn?.click();
+ assert.htmlEqual(target.innerHTML, `2 `);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-init/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-state-init/main.svelte
new file mode 100644
index 000000000000..348a94909ad0
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-init/main.svelte
@@ -0,0 +1,12 @@
+
+
+ counter.count++}>{counter.count}
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-public-private/_config.js b/packages/svelte/tests/runtime-runes/samples/class-state-public-private/_config.js
new file mode 100644
index 000000000000..7601ea5fd510
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-public-private/_config.js
@@ -0,0 +1,30 @@
+import { test } from '../../test';
+
+export default test({
+ html: `
+ 0
+ 0
+ `,
+
+ async test({ assert, target }) {
+ const [btn1, btn2] = target.querySelectorAll('button');
+
+ await btn1?.click();
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ 1
+ 0
+ `
+ );
+
+ await btn2?.click();
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ 1
+ 1
+ `
+ );
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-public-private/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-state-public-private/main.svelte
new file mode 100644
index 000000000000..043ea8d3af14
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-public-private/main.svelte
@@ -0,0 +1,17 @@
+
+
+ counter.count++}>{counter.count}
+{counter.secretCount}
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state/_config.js b/packages/svelte/tests/runtime-runes/samples/class-state/_config.js
new file mode 100644
index 000000000000..436ce9979876
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state/_config.js
@@ -0,0 +1,15 @@
+import { test } from '../../test';
+
+export default test({
+ html: `0 `,
+
+ async test({ assert, target }) {
+ const btn = target.querySelector('button');
+
+ await btn?.click();
+ assert.htmlEqual(target.innerHTML, `1 `);
+
+ await btn?.click();
+ assert.htmlEqual(target.innerHTML, `2 `);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-state/main.svelte
new file mode 100644
index 000000000000..e46f8140f262
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state/main.svelte
@@ -0,0 +1,8 @@
+
+
+ counter.count++}>{counter.count}
diff --git a/packages/svelte/tests/runtime-runes/samples/component-let-directive/Counter.svelte b/packages/svelte/tests/runtime-runes/samples/component-let-directive/Counter.svelte
new file mode 100644
index 000000000000..62deb36411ff
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/component-let-directive/Counter.svelte
@@ -0,0 +1,13 @@
+
+
+
+
+
+0
+ named slot count is not state
+ `,
+
+ test: async ({ assert, target }) => {
+ const button = target.querySelector('button');
+ await button?.click();
+
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ 1
+ named slot count is not state
+ `
+ );
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/component-let-directive/main.svelte b/packages/svelte/tests/runtime-runes/samples/component-let-directive/main.svelte
new file mode 100644
index 000000000000..d01f506969b9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/component-let-directive/main.svelte
@@ -0,0 +1,11 @@
+
+
+
+ {count}
+
+ named slot count is {count}
+
diff --git a/packages/svelte/tests/runtime-runes/samples/component-prop-unescaped/Child.svelte b/packages/svelte/tests/runtime-runes/samples/component-prop-unescaped/Child.svelte
new file mode 100644
index 000000000000..5094054f7ceb
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/component-prop-unescaped/Child.svelte
@@ -0,0 +1,5 @@
+
+
+{prop}
diff --git a/packages/svelte/tests/runtime-runes/samples/component-prop-unescaped/_config.js b/packages/svelte/tests/runtime-runes/samples/component-prop-unescaped/_config.js
new file mode 100644
index 000000000000..c88b37207568
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/component-prop-unescaped/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+ html: `"`
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/component-prop-unescaped/main.svelte b/packages/svelte/tests/runtime-runes/samples/component-prop-unescaped/main.svelte
new file mode 100644
index 000000000000..3c87b1849a89
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/component-prop-unescaped/main.svelte
@@ -0,0 +1,5 @@
+
+
+0 `,
+
+ async test({ assert, target, window }) {
+ const btn = target.querySelector('button');
+ const clickEvent = new window.Event('click', { bubbles: true });
+ await btn?.dispatchEvent(clickEvent);
+
+ assert.htmlEqual(target.innerHTML, `2 `);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-direct/main.svelte b/packages/svelte/tests/runtime-runes/samples/derived-direct/main.svelte
new file mode 100644
index 000000000000..d1a6d836c2d1
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-direct/main.svelte
@@ -0,0 +1,6 @@
+
+
+ count++}>{double}
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-indirect-arrow-fn/_config.js b/packages/svelte/tests/runtime-runes/samples/derived-indirect-arrow-fn/_config.js
new file mode 100644
index 000000000000..09bd0a9aad8d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-indirect-arrow-fn/_config.js
@@ -0,0 +1,13 @@
+import { test } from '../../test';
+
+export default test({
+ html: `0 `,
+
+ async test({ assert, target, window }) {
+ const btn = target.querySelector('button');
+ const clickEvent = new window.Event('click', { bubbles: true });
+ await btn?.dispatchEvent(clickEvent);
+
+ assert.htmlEqual(target.innerHTML, `2 `);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-indirect-arrow-fn/main.svelte b/packages/svelte/tests/runtime-runes/samples/derived-indirect-arrow-fn/main.svelte
new file mode 100644
index 000000000000..581ea20f09bc
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-indirect-arrow-fn/main.svelte
@@ -0,0 +1,7 @@
+
+
+ count++}>{double}
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-indirect-fn-2/_config.js b/packages/svelte/tests/runtime-runes/samples/derived-indirect-fn-2/_config.js
new file mode 100644
index 000000000000..09bd0a9aad8d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-indirect-fn-2/_config.js
@@ -0,0 +1,13 @@
+import { test } from '../../test';
+
+export default test({
+ html: `0 `,
+
+ async test({ assert, target, window }) {
+ const btn = target.querySelector('button');
+ const clickEvent = new window.Event('click', { bubbles: true });
+ await btn?.dispatchEvent(clickEvent);
+
+ assert.htmlEqual(target.innerHTML, `2 `);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-indirect-fn-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/derived-indirect-fn-2/main.svelte
new file mode 100644
index 000000000000..fc25b92e94b2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-indirect-fn-2/main.svelte
@@ -0,0 +1,8 @@
+
+
+{double}
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-indirect-fn/_config.js b/packages/svelte/tests/runtime-runes/samples/derived-indirect-fn/_config.js
new file mode 100644
index 000000000000..09bd0a9aad8d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-indirect-fn/_config.js
@@ -0,0 +1,13 @@
+import { test } from '../../test';
+
+export default test({
+ html: `0 `,
+
+ async test({ assert, target, window }) {
+ const btn = target.querySelector('button');
+ const clickEvent = new window.Event('click', { bubbles: true });
+ await btn?.dispatchEvent(clickEvent);
+
+ assert.htmlEqual(target.innerHTML, `2 `);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-indirect-fn/main.svelte b/packages/svelte/tests/runtime-runes/samples/derived-indirect-fn/main.svelte
new file mode 100644
index 000000000000..e05039b0d50c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-indirect-fn/main.svelte
@@ -0,0 +1,9 @@
+
+
+ count++}>{double}
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-stale-value/_config.js b/packages/svelte/tests/runtime-runes/samples/derived-stale-value/_config.js
new file mode 100644
index 000000000000..4ae1c413b97c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-stale-value/_config.js
@@ -0,0 +1,25 @@
+import { test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+ get props() {
+ return { log: [] };
+ },
+
+ async test({ assert, target, component }) {
+ const [b1] = target.querySelectorAll('button');
+ flushSync(() => {
+ b1.click();
+ });
+ flushSync(() => {
+ b1.click();
+ });
+ flushSync(() => {
+ b1.click();
+ });
+ flushSync(() => {
+ b1.click();
+ });
+ assert.deepEqual(component.log, [0, 2, 4]);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-stale-value/main.svelte b/packages/svelte/tests/runtime-runes/samples/derived-stale-value/main.svelte
new file mode 100644
index 000000000000..413028647ed7
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-stale-value/main.svelte
@@ -0,0 +1,15 @@
+
+
+ count += 1}>
+ clicks: {count}
+
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/directives-with-member-access/_config.js b/packages/svelte/tests/runtime-runes/samples/directives-with-member-access/_config.js
new file mode 100644
index 000000000000..29a23b32246e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/directives-with-member-access/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+// no need to compare the rendered HTML — we only care
+// that the generated code is valid
+export default test({});
diff --git a/packages/svelte/tests/runtime-runes/samples/directives-with-member-access/main.svelte b/packages/svelte/tests/runtime-runes/samples/directives-with-member-access/main.svelte
new file mode 100644
index 000000000000..c5e708799108
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/directives-with-member-access/main.svelte
@@ -0,0 +1,21 @@
+
+
+
+
+
+{#each [] as i (i)}
+
+{/each}
+
+
diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-style-attr/_config.js b/packages/svelte/tests/runtime-runes/samples/dynamic-style-attr/_config.js
new file mode 100644
index 000000000000..f6829721795c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/dynamic-style-attr/_config.js
@@ -0,0 +1,17 @@
+import { test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+ html: `Hello world
Make blue {
+ b1.click();
+ });
+ assert.htmlEqual(
+ target.innerHTML,
+ `Hello world
Make blue
+ let color = $state('red');
+
+ const getColor = () => color;
+
+
+Hello world
+
+ color = 'blue'}>Make blue
diff --git a/packages/svelte/tests/runtime-runes/samples/each-bind-this-member/_config.js b/packages/svelte/tests/runtime-runes/samples/each-bind-this-member/_config.js
new file mode 100644
index 000000000000..4b5596cb3a2e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/each-bind-this-member/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+ async test({ assert, target, component }) {
+ assert.equal(target.querySelector('img'), component.items[0].img);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/each-bind-this-member/main.svelte b/packages/svelte/tests/runtime-runes/samples/each-bind-this-member/main.svelte
new file mode 100644
index 000000000000..a685cc9c84df
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/each-bind-this-member/main.svelte
@@ -0,0 +1,11 @@
+
+
+{#each items as item, i}
+ foo
+ foo
+ foo
+ `,
+
+ async test({ assert, target }) {
+ const [btn1, btn2, btn3] = target.querySelectorAll('button');
+
+ // ensure each click runs in its own rerender task
+ await btn1.click();
+ await Promise.resolve();
+
+ await btn2.click();
+ await Promise.resolve();
+
+ await btn3.click();
+ await Promise.resolve();
+
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ bar
+ bar
+ foo
+ `
+ );
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/each-mutation/main.svelte b/packages/svelte/tests/runtime-runes/samples/each-mutation/main.svelte
new file mode 100644
index 000000000000..5bf92b274bfb
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/each-mutation/main.svelte
@@ -0,0 +1,20 @@
+
+
+{#each works1 as item, i}
+ works1[i].text = 'bar'}>{item.text}
+{/each}
+
+{#each works2 as item}
+ item.text = 'bar'}>{item.text}
+{/each}
+
+{#each doesntwork as item}
+ item.text = 'bar'}>{item.text}
+{/each}
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-active/_config.js b/packages/svelte/tests/runtime-runes/samples/effect-active/_config.js
new file mode 100644
index 000000000000..69ba5793b808
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-active/_config.js
@@ -0,0 +1,15 @@
+import { test } from '../../test';
+
+export default test({
+ ssrHtml: `
+ false
+ false
+ false
+ `,
+
+ html: `
+ false
+ true
+ true
+ `
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-active/main.svelte b/packages/svelte/tests/runtime-runes/samples/effect-active/main.svelte
new file mode 100644
index 000000000000..a65a355eef7c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-active/main.svelte
@@ -0,0 +1,11 @@
+
+
+{foo}
+{bar}
+{$effect.active()}
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-cleanup/_config.js b/packages/svelte/tests/runtime-runes/samples/effect-cleanup/_config.js
new file mode 100644
index 000000000000..ee690418d6c4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-cleanup/_config.js
@@ -0,0 +1,19 @@
+import { test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+ get props() {
+ return { log: [] };
+ },
+
+ async test({ assert, target, component }) {
+ const [b1] = target.querySelectorAll('button');
+ flushSync(() => {
+ b1.click();
+ });
+ flushSync(() => {
+ b1.click();
+ });
+ assert.deepEqual(component.log, ['init 0', 'cleanup 2', 'init 2', 'cleanup 4', 'init 4']);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-cleanup/main.svelte b/packages/svelte/tests/runtime-runes/samples/effect-cleanup/main.svelte
new file mode 100644
index 000000000000..7c84aeddff80
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-cleanup/main.svelte
@@ -0,0 +1,17 @@
+
+
+ count++ }>Click
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-infinite/_config.js b/packages/svelte/tests/runtime-runes/samples/effect-infinite/_config.js
new file mode 100644
index 000000000000..763c5f58faa5
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-infinite/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+ runtime_error:
+ 'ERR_SVELTE_TOO_MANY_UPDATES: Maximum update depth exceeded. This can happen when a reactive block or effect repeatedly sets a new value. Svelte limits the number of nested updates to prevent infinite loops.',
+ async test({ assert, target }) {}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-infinite/main.svelte b/packages/svelte/tests/runtime-runes/samples/effect-infinite/main.svelte
new file mode 100644
index 000000000000..444467d99080
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-infinite/main.svelte
@@ -0,0 +1,11 @@
+
+
+{JSON.stringify(s)}
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-loop-2/_config.js b/packages/svelte/tests/runtime-runes/samples/effect-loop-2/_config.js
new file mode 100644
index 000000000000..ba00c781f7a1
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-loop-2/_config.js
@@ -0,0 +1,19 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+ html: 'Over\n10\nincrement reset ',
+ ssrHtml: '0\nincrement reset ',
+
+ async test({ assert, target, component }) {
+ const [b1, b2] = target.querySelectorAll('button');
+ b1.click();
+ b2.click();
+ flushSync();
+
+ assert.htmlEqual(
+ target.innerHTML,
+ 'Over\n10\nincrement reset '
+ );
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-loop-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/effect-loop-2/main.svelte
new file mode 100644
index 000000000000..87873988d492
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-loop-2/main.svelte
@@ -0,0 +1,25 @@
+
+
+{count}
+ count++}>increment
+ reset = true}>reset
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-loop/_config.js b/packages/svelte/tests/runtime-runes/samples/effect-loop/_config.js
new file mode 100644
index 000000000000..216234e1799e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-loop/_config.js
@@ -0,0 +1,6 @@
+import { test } from '../../test';
+
+export default test({
+ html: '5',
+ ssrHtml: '0'
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-loop/main.svelte b/packages/svelte/tests/runtime-runes/samples/effect-loop/main.svelte
new file mode 100644
index 000000000000..2d22498787c0
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-loop/main.svelte
@@ -0,0 +1,11 @@
+
+
+{count}
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-order/_config.js b/packages/svelte/tests/runtime-runes/samples/effect-order/_config.js
new file mode 100644
index 000000000000..55a61a5e6a55
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-order/_config.js
@@ -0,0 +1,19 @@
+import { test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+ get props() {
+ return { log: [] };
+ },
+
+ async test({ assert, target, component }) {
+ const [b1] = target.querySelectorAll('button');
+ flushSync(() => {
+ b1.click();
+ });
+ flushSync(() => {
+ b1.click();
+ });
+ assert.deepEqual(component.log, ['A', 'B', 'A', 'B', 'A', 'B']);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-order/main.svelte b/packages/svelte/tests/runtime-runes/samples/effect-order/main.svelte
new file mode 100644
index 000000000000..b83c73b95806
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-order/main.svelte
@@ -0,0 +1,21 @@
+
+
+Hello {myList[0].age}
+
+ myList[0].age++ }>Click
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-root/_config.js b/packages/svelte/tests/runtime-runes/samples/effect-root/_config.js
new file mode 100644
index 000000000000..b5e2a1a8086f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-root/_config.js
@@ -0,0 +1,32 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+ get props() {
+ return { log: [] };
+ },
+
+ async test({ assert, target, component }) {
+ const [b1, b2, b3] = target.querySelectorAll('button');
+
+ flushSync(() => {
+ b1.click();
+ b2.click();
+ });
+
+ assert.deepEqual(component.log, [0, 1]);
+
+ flushSync(() => {
+ b3.click();
+ });
+
+ assert.deepEqual(component.log, [0, 1, 'cleanup 1', 'cleanup 2']);
+
+ flushSync(() => {
+ b1.click();
+ b2.click();
+ });
+
+ assert.deepEqual(component.log, [0, 1, 'cleanup 1', 'cleanup 2']);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-root/main.svelte b/packages/svelte/tests/runtime-runes/samples/effect-root/main.svelte
new file mode 100644
index 000000000000..d646bea2c49e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-root/main.svelte
@@ -0,0 +1,27 @@
+
+
+ x++}>{x}
+ y++}>{y}
+ cleanup()}>cleanup
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-self-scheduling/_config.js b/packages/svelte/tests/runtime-runes/samples/effect-self-scheduling/_config.js
new file mode 100644
index 000000000000..b558e0b24e8b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-self-scheduling/_config.js
@@ -0,0 +1,36 @@
+import { test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+ async test({ assert, target, component }) {
+ const [b1, b2, b3, b4, b5, b6, b7, b8, b9, b10] = target.querySelectorAll('button');
+
+ const p = /** @type {HTMLParagraphElement} */ (target.querySelector('p'));
+
+ assert.htmlEqual(p.innerHTML, `power: 10`);
+
+ flushSync(() => {
+ b1.click();
+ });
+
+ assert.htmlEqual(p.innerHTML, `power: 10`);
+
+ flushSync(() => {
+ b8.click();
+ });
+
+ assert.htmlEqual(p.innerHTML, `power: 10`);
+
+ flushSync(() => {
+ b9.click();
+ });
+
+ assert.htmlEqual(p.innerHTML, `power: 10`);
+
+ flushSync(() => {
+ b10.click();
+ });
+
+ assert.htmlEqual(p.innerHTML, `power: 10`);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-self-scheduling/main.svelte b/packages/svelte/tests/runtime-runes/samples/effect-self-scheduling/main.svelte
new file mode 100644
index 000000000000..dd9cdcf8d236
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-self-scheduling/main.svelte
@@ -0,0 +1,15 @@
+
+
+power: {power}
+
+{#each [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] as n}
+ power = n}>{n}
+{/each}
diff --git a/packages/svelte/tests/runtime-runes/samples/effect/_config.js b/packages/svelte/tests/runtime-runes/samples/effect/_config.js
new file mode 100644
index 000000000000..0e543f9311fe
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect/_config.js
@@ -0,0 +1,16 @@
+import { test } from '../../test';
+
+export default test({
+ get props() {
+ return { log: [] };
+ },
+
+ async test({ assert, target, component }) {
+ const [b1, b2] = target.querySelectorAll('button');
+ b1.click();
+ b2.click();
+ await Promise.resolve();
+
+ assert.deepEqual(component.log, [0, 1]);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/effect/main.svelte b/packages/svelte/tests/runtime-runes/samples/effect/main.svelte
new file mode 100644
index 000000000000..2931aaa15f0b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect/main.svelte
@@ -0,0 +1,13 @@
+
+
+ x++}>{x}
+ y++}>{y}
diff --git a/packages/svelte/tests/runtime-runes/samples/effects-order/_config.js b/packages/svelte/tests/runtime-runes/samples/effects-order/_config.js
new file mode 100644
index 000000000000..7108c005ae8b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effects-order/_config.js
@@ -0,0 +1,16 @@
+import { test } from '../../test';
+
+export default test({
+ get props() {
+ return { log: [] };
+ },
+
+ async test({ assert, target, component }) {
+ const [b1, b2] = target.querySelectorAll('button');
+ b1.click();
+ b2.click();
+ await Promise.resolve();
+
+ assert.deepEqual(component.log, ['first0', 'second0', 'first1', 'second1']);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/effects-order/main.svelte b/packages/svelte/tests/runtime-runes/samples/effects-order/main.svelte
new file mode 100644
index 000000000000..673a579cea65
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effects-order/main.svelte
@@ -0,0 +1,17 @@
+
+
+ x++}>{x}
+ y++}>{y}
diff --git a/packages/svelte/tests/runtime-runes/samples/event-arguments-2/_config.js b/packages/svelte/tests/runtime-runes/samples/event-arguments-2/_config.js
new file mode 100644
index 000000000000..f2e6c67f8a39
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-arguments-2/_config.js
@@ -0,0 +1,13 @@
+import { test } from '../../test';
+
+export default test({
+ html: `0 `,
+
+ async test({ assert, target }) {
+ const [b1] = target.querySelectorAll('button');
+
+ b1?.click();
+ await Promise.resolve();
+ assert.htmlEqual(target.innerHTML, '1 ');
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/event-arguments-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/event-arguments-2/main.svelte
new file mode 100644
index 000000000000..39333849f67b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-arguments-2/main.svelte
@@ -0,0 +1,8 @@
+
+
+{count}
diff --git a/packages/svelte/tests/runtime-runes/samples/event-arguments/_config.js b/packages/svelte/tests/runtime-runes/samples/event-arguments/_config.js
new file mode 100644
index 000000000000..f2e6c67f8a39
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-arguments/_config.js
@@ -0,0 +1,13 @@
+import { test } from '../../test';
+
+export default test({
+ html: `0 `,
+
+ async test({ assert, target }) {
+ const [b1] = target.querySelectorAll('button');
+
+ b1?.click();
+ await Promise.resolve();
+ assert.htmlEqual(target.innerHTML, '1 ');
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/event-arguments/main.svelte b/packages/svelte/tests/runtime-runes/samples/event-arguments/main.svelte
new file mode 100644
index 000000000000..d6569e26fe1a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-arguments/main.svelte
@@ -0,0 +1,8 @@
+
+
+{count}
diff --git a/packages/svelte/tests/runtime-runes/samples/event-attribute-bubble/_config.js b/packages/svelte/tests/runtime-runes/samples/event-attribute-bubble/_config.js
new file mode 100644
index 000000000000..602d71a38b0c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-attribute-bubble/_config.js
@@ -0,0 +1,44 @@
+import { test } from '../../test';
+
+export default test({
+ html: `0 0 change handler `,
+
+ async test({ assert, target }) {
+ const [b1, b2, b3] = target.querySelectorAll('button');
+
+ b1?.click();
+ await Promise.resolve();
+ assert.htmlEqual(
+ target.innerHTML,
+ '1 1 change handler '
+ );
+
+ b2?.click();
+ await Promise.resolve();
+ assert.htmlEqual(
+ target.innerHTML,
+ '2 2 change handler '
+ );
+
+ b3?.click();
+ await Promise.resolve();
+ assert.htmlEqual(
+ target.innerHTML,
+ '2 2 change handler '
+ );
+
+ b1?.click();
+ await Promise.resolve();
+ assert.htmlEqual(
+ target.innerHTML,
+ '1 1 change handler '
+ );
+
+ b2?.click();
+ await Promise.resolve();
+ assert.htmlEqual(
+ target.innerHTML,
+ '0 0 change handler '
+ );
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/event-attribute-bubble/main.svelte b/packages/svelte/tests/runtime-runes/samples/event-attribute-bubble/main.svelte
new file mode 100644
index 000000000000..6f8ab35f1b1c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-attribute-bubble/main.svelte
@@ -0,0 +1,12 @@
+
+
+ {
+ onclick = () => count--;
+}}>change handler
diff --git a/packages/svelte/tests/runtime-runes/samples/event-attribute-bubble/sub.svelte b/packages/svelte/tests/runtime-runes/samples/event-attribute-bubble/sub.svelte
new file mode 100644
index 000000000000..af30e7c3b0d5
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-attribute-bubble/sub.svelte
@@ -0,0 +1,6 @@
+
+
+{count}
+{count}
diff --git a/packages/svelte/tests/runtime-runes/samples/event-attribute-capture/_config.js b/packages/svelte/tests/runtime-runes/samples/event-attribute-capture/_config.js
new file mode 100644
index 000000000000..a0ab69653230
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-attribute-capture/_config.js
@@ -0,0 +1,27 @@
+import { test } from '../../test';
+
+export default test({
+ html: `
+
+
click me
+
captured: false
+
+
click me
+
captured: true
+
+
click me
+
captured: {captured}
+
0 `,
+
+ async test({ assert, target }) {
+ const [button] = target.querySelectorAll('button');
+
+ button.click();
+ await Promise.resolve();
+ assert.htmlEqual(target.innerHTML, '1 ');
+
+ button.dispatchEvent(new MouseEvent('mouseenter'));
+ await Promise.resolve();
+ assert.htmlEqual(target.innerHTML, '2 ');
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/event-attribute-not-hoistable/main.svelte b/packages/svelte/tests/runtime-runes/samples/event-attribute-not-hoistable/main.svelte
new file mode 100644
index 000000000000..6f8766411be8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-attribute-not-hoistable/main.svelte
@@ -0,0 +1,11 @@
+
+
+
+ {count}
+
diff --git a/packages/svelte/tests/runtime-runes/samples/event-attribute-spread-capture/_config.js b/packages/svelte/tests/runtime-runes/samples/event-attribute-spread-capture/_config.js
new file mode 100644
index 000000000000..a0ab69653230
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-attribute-spread-capture/_config.js
@@ -0,0 +1,27 @@
+import { test } from '../../test';
+
+export default test({
+ html: `
+
+
click me
+
captured: false
+
+
click me
+
captured: true
+
+
click me
+
captured: {captured}
+
click me
+ click me
+ click me
+ click me
+ `,
+
+ async test({ assert, target }) {
+ const [b1, b2, b3, b4] = target.querySelectorAll('button');
+
+ flushSync(() => {
+ b1?.click();
+ });
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ click spread
+ click spread
+ click spread
+ click spread
+ `
+ );
+
+ flushSync(() => {
+ b2?.click();
+ });
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ click onclick
+ click onclick
+ click onclick
+ click onclick
+ `
+ );
+
+ flushSync(() => {
+ b3?.click();
+ });
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ click spread
+ click spread
+ click spread!
+ click spread!
+ `
+ );
+
+ flushSync(() => {
+ b4?.click();
+ });
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ click onclick
+ click onclick
+ click onclick?
+ click onclick?
+ `
+ );
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/event-attribute-spread-collision/main.svelte b/packages/svelte/tests/runtime-runes/samples/event-attribute-spread-collision/main.svelte
new file mode 100644
index 000000000000..de589e3e40ee
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-attribute-spread-collision/main.svelte
@@ -0,0 +1,21 @@
+
+
+ text = 'click onclick'} {...spread}>
+ {text}
+
+
+ text = 'click onclick'}>
+ {text}
+
+
+ text = 'click onclick'} {...spread} on:click={() => text2 = '!'}>
+ {text}{text2}
+
+
+ text2 = '?'} {...spread} onclick={() => text = 'click onclick'}>
+ {text}{text2}
+
diff --git a/packages/svelte/tests/runtime-runes/samples/event-attribute-spread/_config.js b/packages/svelte/tests/runtime-runes/samples/event-attribute-spread/_config.js
new file mode 100644
index 000000000000..f41c676f2d10
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-attribute-spread/_config.js
@@ -0,0 +1,19 @@
+import { test } from '../../test';
+
+export default test({
+ html: `0 change handler `,
+
+ async test({ assert, target }) {
+ const [b1, b2] = target.querySelectorAll('button');
+
+ b1?.click();
+ await Promise.resolve();
+ assert.htmlEqual(target.innerHTML, '1 change handler ');
+
+ b2?.click();
+ await Promise.resolve();
+ b1?.click();
+ await Promise.resolve();
+ assert.htmlEqual(target.innerHTML, '0 change handler ');
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/event-attribute-spread/main.svelte b/packages/svelte/tests/runtime-runes/samples/event-attribute-spread/main.svelte
new file mode 100644
index 000000000000..439df5207ac6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-attribute-spread/main.svelte
@@ -0,0 +1,7 @@
+
+
+{count}
+ obj = { onclick: () => count-- }}>change handler
diff --git a/packages/svelte/tests/runtime-runes/samples/event-attribute-template/_config.js b/packages/svelte/tests/runtime-runes/samples/event-attribute-template/_config.js
new file mode 100644
index 000000000000..340b0ff4c984
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-attribute-template/_config.js
@@ -0,0 +1,15 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+ async test({ assert, target, component }) {
+ const [b1] = target.querySelectorAll('button');
+
+ flushSync(() => {
+ b1?.click();
+ });
+
+ await Promise.resolve();
+ assert.deepEqual(component.log, ['onclick']);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/event-attribute-template/main.svelte b/packages/svelte/tests/runtime-runes/samples/event-attribute-template/main.svelte
new file mode 100644
index 000000000000..66db0b6013fc
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-attribute-template/main.svelte
@@ -0,0 +1,10 @@
+
+
+{undefined}Send Event
diff --git a/packages/svelte/tests/runtime-runes/samples/event-attribute-window/_config.js b/packages/svelte/tests/runtime-runes/samples/event-attribute-window/_config.js
new file mode 100644
index 000000000000..1efebf69b754
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-attribute-window/_config.js
@@ -0,0 +1,11 @@
+import { test } from '../../test';
+
+export default test({
+ html: `0
`,
+
+ async test({ assert, target }) {
+ target.click();
+ await Promise.resolve();
+ assert.htmlEqual(target.innerHTML, '1
');
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/event-attribute-window/main.svelte b/packages/svelte/tests/runtime-runes/samples/event-attribute-window/main.svelte
new file mode 100644
index 000000000000..4a280067f031
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-attribute-window/main.svelte
@@ -0,0 +1,6 @@
+
+
+ count++} />
+{count}
diff --git a/packages/svelte/tests/runtime-runes/samples/event-attribute/_config.js b/packages/svelte/tests/runtime-runes/samples/event-attribute/_config.js
new file mode 100644
index 000000000000..e034a959d176
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-attribute/_config.js
@@ -0,0 +1,17 @@
+import { test } from '../../test';
+
+export default test({
+ html: `0 0 `,
+
+ async test({ assert, target }) {
+ const [b1, b2] = target.querySelectorAll('button');
+
+ b1?.click();
+ await Promise.resolve();
+ assert.htmlEqual(target.innerHTML, '1 1 ');
+
+ b2?.click();
+ await Promise.resolve();
+ assert.htmlEqual(target.innerHTML, '2 2 ');
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/event-attribute/main.svelte b/packages/svelte/tests/runtime-runes/samples/event-attribute/main.svelte
new file mode 100644
index 000000000000..6785cd9eef80
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-attribute/main.svelte
@@ -0,0 +1,7 @@
+
+
+ count++}>{count}
+{count}
diff --git a/packages/svelte/tests/runtime-runes/samples/event-exported/_config.js b/packages/svelte/tests/runtime-runes/samples/event-exported/_config.js
new file mode 100644
index 000000000000..527170e1dacb
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-exported/_config.js
@@ -0,0 +1,18 @@
+import { test } from '../../test';
+
+export default test({
+ skip_if_hydrate: 'permanent', // unnecessary to test
+ skip_if_ssr: 'permanent', // unnecessary to test
+
+ async test({ assert, target }) {
+ const [b1, b2] = target.querySelectorAll('button');
+
+ b1?.click();
+ await Promise.resolve();
+ assert.htmlEqual(target.innerHTML, 'Count: 1 Increment ');
+
+ b2?.click();
+ await Promise.resolve();
+ assert.htmlEqual(target.innerHTML, 'Count: 2 Increment ');
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/event-exported/main.svelte b/packages/svelte/tests/runtime-runes/samples/event-exported/main.svelte
new file mode 100644
index 000000000000..c8a3681efd69
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-exported/main.svelte
@@ -0,0 +1,8 @@
+
+
+ button.increment()}>Increment
diff --git a/packages/svelte/tests/runtime-runes/samples/event-exported/sub.svelte b/packages/svelte/tests/runtime-runes/samples/event-exported/sub.svelte
new file mode 100644
index 000000000000..b77534b6f22e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-exported/sub.svelte
@@ -0,0 +1,9 @@
+
+
+Count: {count}
diff --git a/packages/svelte/tests/runtime-runes/samples/event-listener-spread/Button.svelte b/packages/svelte/tests/runtime-runes/samples/event-listener-spread/Button.svelte
new file mode 100644
index 000000000000..db525426e4a0
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-listener-spread/Button.svelte
@@ -0,0 +1,7 @@
+
+
+
+
diff --git a/packages/svelte/tests/runtime-runes/samples/event-listener-spread/_config.js b/packages/svelte/tests/runtime-runes/samples/event-listener-spread/_config.js
new file mode 100644
index 000000000000..43084e680924
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-listener-spread/_config.js
@@ -0,0 +1,13 @@
+import { test } from '../../test';
+
+export default test({
+ html: `clicks: 0 `,
+
+ async test({ assert, target }) {
+ const button = target.querySelector('button');
+
+ button?.click();
+ await Promise.resolve();
+ assert.htmlEqual(target.innerHTML, 'clicks: 1 ');
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/event-listener-spread/main.svelte b/packages/svelte/tests/runtime-runes/samples/event-listener-spread/main.svelte
new file mode 100644
index 000000000000..093c863407ef
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-listener-spread/main.svelte
@@ -0,0 +1,13 @@
+
+
+
+ clicks: {count}
+
diff --git a/packages/svelte/tests/runtime-runes/samples/event-used-in-component-and-element/_config.js b/packages/svelte/tests/runtime-runes/samples/event-used-in-component-and-element/_config.js
new file mode 100644
index 000000000000..527170e1dacb
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-used-in-component-and-element/_config.js
@@ -0,0 +1,18 @@
+import { test } from '../../test';
+
+export default test({
+ skip_if_hydrate: 'permanent', // unnecessary to test
+ skip_if_ssr: 'permanent', // unnecessary to test
+
+ async test({ assert, target }) {
+ const [b1, b2] = target.querySelectorAll('button');
+
+ b1?.click();
+ await Promise.resolve();
+ assert.htmlEqual(target.innerHTML, 'Count: 1 Increment ');
+
+ b2?.click();
+ await Promise.resolve();
+ assert.htmlEqual(target.innerHTML, 'Count: 2 Increment ');
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/event-used-in-component-and-element/main.svelte b/packages/svelte/tests/runtime-runes/samples/event-used-in-component-and-element/main.svelte
new file mode 100644
index 000000000000..cc479aa39c5d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-used-in-component-and-element/main.svelte
@@ -0,0 +1,12 @@
+
+
+Count: {count}
+
diff --git a/packages/svelte/tests/runtime-runes/samples/event-used-in-component-and-element/sub.svelte b/packages/svelte/tests/runtime-runes/samples/event-used-in-component-and-element/sub.svelte
new file mode 100644
index 000000000000..861f090bba66
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-used-in-component-and-element/sub.svelte
@@ -0,0 +1,5 @@
+
+
+Increment
diff --git a/packages/svelte/tests/runtime-runes/samples/exports1/_config.js b/packages/svelte/tests/runtime-runes/samples/exports1/_config.js
new file mode 100644
index 000000000000..0e447e7055e6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/exports1/_config.js
@@ -0,0 +1,32 @@
+import { test } from '../../test';
+
+export default test({
+ async test({ assert, target, component }) {
+ assert.htmlEqual(
+ target.innerHTML,
+ 'clicks: 0
Increment Decrement Double '
+ );
+ const [incrementButton, decrementButton, doubleButton] = target.querySelectorAll('button');
+
+ incrementButton?.click();
+ await Promise.resolve();
+ assert.htmlEqual(
+ target.innerHTML,
+ 'clicks: 1
Increment Decrement Double '
+ );
+
+ doubleButton?.click();
+ await Promise.resolve();
+ assert.htmlEqual(
+ target.innerHTML,
+ 'clicks: 2
Increment Decrement Double '
+ );
+
+ decrementButton?.click();
+ await Promise.resolve();
+ assert.htmlEqual(
+ target.innerHTML,
+ 'clicks: 1
Increment Decrement Double '
+ );
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/exports1/main.svelte b/packages/svelte/tests/runtime-runes/samples/exports1/main.svelte
new file mode 100644
index 000000000000..edf437798765
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/exports1/main.svelte
@@ -0,0 +1,9 @@
+
+
+ sub.increment()}>Increment
+ sub.decrement()}>Decrement
+ sub.double()}>Double
diff --git a/packages/svelte/tests/runtime-runes/samples/exports1/sub.svelte b/packages/svelte/tests/runtime-runes/samples/exports1/sub.svelte
new file mode 100644
index 000000000000..f6e3f0be926f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/exports1/sub.svelte
@@ -0,0 +1,21 @@
+
+
+
+ clicks: {count}
+
diff --git a/packages/svelte/tests/runtime-runes/samples/exports2/_config.js b/packages/svelte/tests/runtime-runes/samples/exports2/_config.js
new file mode 100644
index 000000000000..0e447e7055e6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/exports2/_config.js
@@ -0,0 +1,32 @@
+import { test } from '../../test';
+
+export default test({
+ async test({ assert, target, component }) {
+ assert.htmlEqual(
+ target.innerHTML,
+ 'clicks: 0
Increment Decrement Double '
+ );
+ const [incrementButton, decrementButton, doubleButton] = target.querySelectorAll('button');
+
+ incrementButton?.click();
+ await Promise.resolve();
+ assert.htmlEqual(
+ target.innerHTML,
+ 'clicks: 1
Increment Decrement Double '
+ );
+
+ doubleButton?.click();
+ await Promise.resolve();
+ assert.htmlEqual(
+ target.innerHTML,
+ 'clicks: 2
Increment Decrement Double '
+ );
+
+ decrementButton?.click();
+ await Promise.resolve();
+ assert.htmlEqual(
+ target.innerHTML,
+ 'clicks: 1
Increment Decrement Double '
+ );
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/exports2/main.svelte b/packages/svelte/tests/runtime-runes/samples/exports2/main.svelte
new file mode 100644
index 000000000000..edf437798765
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/exports2/main.svelte
@@ -0,0 +1,9 @@
+
+
+ sub.increment()}>Increment
+ sub.decrement()}>Decrement
+ sub.double()}>Double
diff --git a/packages/svelte/tests/runtime-runes/samples/exports2/sub.svelte b/packages/svelte/tests/runtime-runes/samples/exports2/sub.svelte
new file mode 100644
index 000000000000..48d150f424a7
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/exports2/sub.svelte
@@ -0,0 +1,19 @@
+
+
+
+ clicks: {count}
+
diff --git a/packages/svelte/tests/runtime-runes/samples/globals-deconflicted/_config.js b/packages/svelte/tests/runtime-runes/samples/globals-deconflicted/_config.js
new file mode 100644
index 000000000000..3d1ab275b999
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/globals-deconflicted/_config.js
@@ -0,0 +1,15 @@
+import { test } from '../../test';
+
+export default test({
+ html: `hello
`,
+
+ before_test: () => {
+ // @ts-expect-error
+ globalThis.frag = 'hello';
+ },
+
+ after_test: () => {
+ // @ts-expect-error
+ delete globalThis.frag;
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/globals-deconflicted/main.svelte b/packages/svelte/tests/runtime-runes/samples/globals-deconflicted/main.svelte
new file mode 100644
index 000000000000..25a651859c7e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/globals-deconflicted/main.svelte
@@ -0,0 +1 @@
+{frag}
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-derived/_config.js b/packages/svelte/tests/runtime-runes/samples/inspect-derived/_config.js
new file mode 100644
index 000000000000..ea62c919a14c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-derived/_config.js
@@ -0,0 +1,31 @@
+import { test } from '../../test';
+
+/**
+ * @type {any[]}
+ */
+let log;
+
+export default test({
+ compileOptions: {
+ dev: true
+ },
+
+ get props() {
+ log = [];
+ return {
+ push: (/** @type {any} */ ...v) => log.push(...v)
+ };
+ },
+
+ async test({ assert, target }) {
+ const button = target.querySelector('button');
+
+ button?.click();
+ await Promise.resolve();
+
+ button?.click();
+ await Promise.resolve();
+
+ assert.deepEqual(log, ['X', 'init', 'XX', 'update', 'XXX', 'update']);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-derived/main.svelte b/packages/svelte/tests/runtime-runes/samples/inspect-derived/main.svelte
new file mode 100644
index 000000000000..db4968aae40b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-derived/main.svelte
@@ -0,0 +1,11 @@
+
+
+ x += 'x'}>{x}
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-trace/_config.js b/packages/svelte/tests/runtime-runes/samples/inspect-trace/_config.js
new file mode 100644
index 000000000000..943b829895f3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-trace/_config.js
@@ -0,0 +1,39 @@
+import { test } from '../../test';
+
+/**
+ * @type {any[]}
+ */
+let log;
+/**
+ * @type {typeof console.log}}
+ */
+let original_log;
+
+export default test({
+ compileOptions: {
+ dev: true
+ },
+ before_test() {
+ log = [];
+ original_log = console.log;
+ console.log = (...v) => {
+ log.push(...v);
+ };
+ },
+ after_test() {
+ console.log = original_log;
+ },
+ async test({ assert, target }) {
+ assert.deepEqual(log, []);
+
+ const [b1, b2] = target.querySelectorAll('button');
+ b1.click();
+ b2.click();
+ await Promise.resolve();
+
+ assert.ok(
+ log[0].stack.startsWith('Error:') && log[0].stack.includes('HTMLButtonElement.on_click')
+ );
+ assert.deepEqual(log[1], 1);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-trace/main.svelte b/packages/svelte/tests/runtime-runes/samples/inspect-trace/main.svelte
new file mode 100644
index 000000000000..ca4627350d03
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-trace/main.svelte
@@ -0,0 +1,11 @@
+
+
+ x++}>{x}
+ y++}>{y}
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect/_config.js b/packages/svelte/tests/runtime-runes/samples/inspect/_config.js
new file mode 100644
index 000000000000..00a43e404e1c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inspect/_config.js
@@ -0,0 +1,34 @@
+import { test } from '../../test';
+
+/**
+ * @type {any[]}
+ */
+let log;
+/**
+ * @type {typeof console.log}}
+ */
+let original_log;
+
+export default test({
+ compileOptions: {
+ dev: true
+ },
+ before_test() {
+ log = [];
+ original_log = console.log;
+ console.log = (...v) => {
+ log.push(...v);
+ };
+ },
+ after_test() {
+ console.log = original_log;
+ },
+ async test({ assert, target, component }) {
+ const [b1, b2] = target.querySelectorAll('button');
+ b1.click();
+ b2.click();
+ await Promise.resolve();
+
+ assert.deepEqual(log, [0, 'init', 1, 'update']);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect/main.svelte b/packages/svelte/tests/runtime-runes/samples/inspect/main.svelte
new file mode 100644
index 000000000000..739e3f8a29f0
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inspect/main.svelte
@@ -0,0 +1,9 @@
+
+
+ x++}>{x}
+ y++}>{y}
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-class-transformation/_config.js b/packages/svelte/tests/runtime-runes/samples/legacy-class-transformation/_config.js
new file mode 100644
index 000000000000..e271e4f9b2f7
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-class-transformation/_config.js
@@ -0,0 +1,15 @@
+import { test } from '../../test';
+
+export default test({
+ compileOptions: {
+ legacy: {
+ componentApi: true
+ }
+ },
+
+ async test({ assert, target }) {
+ await Promise.resolve();
+
+ assert.htmlEqual(target.innerHTML, ``);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-class-transformation/inner.svelte b/packages/svelte/tests/runtime-runes/samples/legacy-class-transformation/inner.svelte
new file mode 100644
index 000000000000..6b48ff14f211
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-class-transformation/inner.svelte
@@ -0,0 +1,5 @@
+
+
+{num}
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-class-transformation/main.svelte b/packages/svelte/tests/runtime-runes/samples/legacy-class-transformation/main.svelte
new file mode 100644
index 000000000000..c78b39723be2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-class-transformation/main.svelte
@@ -0,0 +1,11 @@
+
+
+
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-2/Item.svelte b/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-2/Item.svelte
new file mode 100644
index 000000000000..c458950cba7b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-2/Item.svelte
@@ -0,0 +1,24 @@
+
+
+
+ {logRender()}
+
diff --git a/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-2/_config.js b/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-2/_config.js
new file mode 100644
index 000000000000..098a6c8c58f4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-2/_config.js
@@ -0,0 +1,63 @@
+import { test } from '../../test';
+
+/**
+ * @type {any[]}
+ */
+let order = [];
+let n = 0;
+
+export default test({
+ get props() {
+ return {
+ order,
+ n
+ };
+ },
+ before_test() {
+ order.length = 0;
+ n = 0;
+ },
+ async test({ assert, compileOptions, component }) {
+ assert.deepEqual(order, [
+ 'parent: $effect.pre 0',
+ 'parent: $effect.pre (2) 0',
+ 'parent: render 0',
+ '1: $effect.pre 0',
+ '1: $effect.pre (2) 0',
+ '1: render 0',
+ '2: $effect.pre 0',
+ '2: $effect.pre (2) 0',
+ '2: render 0',
+ '3: $effect.pre 0',
+ '3: $effect.pre (2) 0',
+ '3: render 0',
+ '1: $effect 0',
+ '2: $effect 0',
+ '3: $effect 0',
+ 'parent: $effect 0'
+ ]);
+
+ order.length = 0;
+
+ component.n += 1;
+
+ assert.deepEqual(order, [
+ 'parent: $effect.pre 1',
+ 'parent: $effect.pre (2) 1',
+ 'parent: render 1',
+ '1: $effect.pre 1',
+ '1: $effect.pre (2) 1',
+ '1: render 1',
+ '2: $effect.pre 1',
+ '2: $effect.pre (2) 1',
+ '2: render 1',
+ '3: $effect.pre 1',
+ '3: $effect.pre (2) 1',
+ '3: render 1',
+ '1: $effect 1',
+ '2: $effect 1',
+ '3: $effect 1',
+ 'parent: $effect 1'
+ ]);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-2/main.svelte
new file mode 100644
index 000000000000..bab1b4cd276c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-2/main.svelte
@@ -0,0 +1,31 @@
+
+
+{logRender()}
+
+ {#each [1,2,3] as index}
+
+
+
diff --git a/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-3/Item.svelte b/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-3/Item.svelte
new file mode 100644
index 000000000000..eb9bf54f12b9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-3/Item.svelte
@@ -0,0 +1,20 @@
+
+
+
+ {logRender()}
+
diff --git a/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-3/_config.js b/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-3/_config.js
new file mode 100644
index 000000000000..6547999c0c89
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-3/_config.js
@@ -0,0 +1,53 @@
+import { test } from '../../test';
+
+/**
+ * @type {any[]}
+ */
+let order = [];
+let n = 0;
+
+export default test({
+ get props() {
+ return {
+ order,
+ n
+ };
+ },
+ before_test() {
+ order.length = 0;
+ n = 0;
+ },
+ async test({ assert, compileOptions, component }) {
+ assert.deepEqual(order, [
+ 'parent: render 0',
+ '1: $effect.pre 0',
+ '1: render 0',
+ '2: $effect.pre 0',
+ '2: render 0',
+ '3: $effect.pre 0',
+ '3: render 0',
+ '1: $effect 0',
+ '2: $effect 0',
+ '3: $effect 0',
+ 'parent: $effect 0'
+ ]);
+
+ order.length = 0;
+
+ component.n += 1;
+
+ assert.deepEqual(order, [
+ 'parent: render 1',
+ '1: $effect.pre 1',
+ '1: render 1',
+ '2: $effect.pre 1',
+ '2: render 1',
+ '3: $effect.pre 1',
+ '3: render 1',
+ '1: $effect 1',
+ '2: $effect 1',
+ '3: $effect 1',
+ 'parent: $effect 1'
+ ]);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-3/main.svelte b/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-3/main.svelte
new file mode 100644
index 000000000000..6a84700f0d19
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-3/main.svelte
@@ -0,0 +1,23 @@
+
+
+{logRender()}
+
+ {#each [1,2,3] as index}
+
+
+
diff --git a/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-4/Item.svelte b/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-4/Item.svelte
new file mode 100644
index 000000000000..4e048313a2d9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-4/Item.svelte
@@ -0,0 +1,24 @@
+
+
+
+ {logRender()}
+
diff --git a/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-4/_config.js b/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-4/_config.js
new file mode 100644
index 000000000000..e61b574d27a9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-4/_config.js
@@ -0,0 +1,63 @@
+import { test } from '../../test';
+
+/**
+ * @type {any[]}
+ */
+let order = [];
+let n = 0;
+
+export default test({
+ get props() {
+ return {
+ order,
+ n
+ };
+ },
+ before_test() {
+ order.length = 0;
+ n = 0;
+ },
+ async test({ assert, compileOptions, component }) {
+ assert.deepEqual(order, [
+ 'parent: $effect.pre 0',
+ 'parent: nested $effect.pre 0',
+ 'parent: render 0',
+ '1: $effect.pre 0',
+ '1: nested $effect.pre 0',
+ '1: render 0',
+ '2: $effect.pre 0',
+ '2: nested $effect.pre 0',
+ '2: render 0',
+ '3: $effect.pre 0',
+ '3: nested $effect.pre 0',
+ '3: render 0',
+ '1: $effect 0',
+ '2: $effect 0',
+ '3: $effect 0',
+ 'parent: $effect 0'
+ ]);
+
+ order.length = 0;
+
+ component.n += 1;
+
+ assert.deepEqual(order, [
+ 'parent: $effect.pre 1',
+ 'parent: nested $effect.pre 1',
+ 'parent: render 1',
+ '1: $effect.pre 1',
+ '1: nested $effect.pre 1',
+ '1: render 1',
+ '2: $effect.pre 1',
+ '2: nested $effect.pre 1',
+ '2: render 1',
+ '3: $effect.pre 1',
+ '3: nested $effect.pre 1',
+ '3: render 1',
+ '1: $effect 1',
+ '2: $effect 1',
+ '3: $effect 1',
+ 'parent: $effect 1'
+ ]);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-4/main.svelte b/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-4/main.svelte
new file mode 100644
index 000000000000..644bef32786b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-4/main.svelte
@@ -0,0 +1,31 @@
+
+
+{logRender()}
+
+ {#each [1,2,3] as index}
+
+
+
diff --git a/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children/Item.svelte b/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children/Item.svelte
new file mode 100644
index 000000000000..eb9bf54f12b9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children/Item.svelte
@@ -0,0 +1,20 @@
+
+
+
+ {logRender()}
+
diff --git a/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children/_config.js b/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children/_config.js
new file mode 100644
index 000000000000..f9b512215163
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children/_config.js
@@ -0,0 +1,55 @@
+import { test } from '../../test';
+
+/**
+ * @type {any[]}
+ */
+let order = [];
+let n = 0;
+
+export default test({
+ get props() {
+ return {
+ order,
+ n
+ };
+ },
+ before_test() {
+ order.length = 0;
+ n = 0;
+ },
+ async test({ assert, compileOptions, component }) {
+ assert.deepEqual(order, [
+ 'parent: $effect.pre 0',
+ 'parent: render 0',
+ '1: $effect.pre 0',
+ '1: render 0',
+ '2: $effect.pre 0',
+ '2: render 0',
+ '3: $effect.pre 0',
+ '3: render 0',
+ '1: $effect 0',
+ '2: $effect 0',
+ '3: $effect 0',
+ 'parent: $effect 0'
+ ]);
+
+ order.length = 0;
+
+ component.n += 1;
+
+ assert.deepEqual(order, [
+ 'parent: $effect.pre 1',
+ 'parent: render 1',
+ '1: $effect.pre 1',
+ '1: render 1',
+ '2: $effect.pre 1',
+ '2: render 1',
+ '3: $effect.pre 1',
+ '3: render 1',
+ '1: $effect 1',
+ '2: $effect 1',
+ '3: $effect 1',
+ 'parent: $effect 1'
+ ]);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children/main.svelte b/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children/main.svelte
new file mode 100644
index 000000000000..fd2cce5beb5d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children/main.svelte
@@ -0,0 +1,27 @@
+
+
+{logRender()}
+
+ {#each [1,2,3] as index}
+
+
+
diff --git a/packages/svelte/tests/runtime-runes/samples/member-mutation/_config.js b/packages/svelte/tests/runtime-runes/samples/member-mutation/_config.js
new file mode 100644
index 000000000000..8c2b03e0bf3a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/member-mutation/_config.js
@@ -0,0 +1,19 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+ html: `person.name.first = "dave" JSON output [{"name":{"first":"rob"}}]
`,
+
+ async test({ assert, target }) {
+ const button = target.querySelector('button');
+
+ flushSync(() => {
+ button?.click();
+ });
+
+ assert.htmlEqual(
+ target.innerHTML,
+ `person.name.first = "dave" JSON output [{"name":{"first":"dave"}}]
`
+ );
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/member-mutation/main.svelte b/packages/svelte/tests/runtime-runes/samples/member-mutation/main.svelte
new file mode 100644
index 000000000000..8d7932f3f76d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/member-mutation/main.svelte
@@ -0,0 +1,15 @@
+
+
+{#each people as person}
+ {
+ person.name.first = "dave";
+ people = people;
+ }}>person.name.first = "dave"
+{/each}
+
+JSON output
+{#each people as person}
+ {JSON.stringify(people)}
+{/each}
diff --git a/packages/svelte/tests/runtime-runes/samples/module-context-export/_config.js b/packages/svelte/tests/runtime-runes/samples/module-context-export/_config.js
new file mode 100644
index 000000000000..c594a1480925
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/module-context-export/_config.js
@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+ html: `42
`,
+
+ async test({ assert, target, window, component }) {
+ assert.equal(component.answer, undefined);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/module-context-export/main.svelte b/packages/svelte/tests/runtime-runes/samples/module-context-export/main.svelte
new file mode 100644
index 000000000000..e3109ef1f12d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/module-context-export/main.svelte
@@ -0,0 +1,7 @@
+{answer}
diff --git a/packages/svelte/tests/runtime-runes/samples/mutation-both/_config.js b/packages/svelte/tests/runtime-runes/samples/mutation-both/_config.js
new file mode 100644
index 000000000000..1cfc074cf546
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/mutation-both/_config.js
@@ -0,0 +1,34 @@
+import { test } from '../../test';
+
+export default test({
+ html: `
+ 0 * 2 = 0
+ Increase multiplier
+ Increase count
+ `,
+
+ async test({ assert, target, window }) {
+ const [multiplier, count] = target.querySelectorAll('button');
+ const clickEvent = new window.Event('click', { bubbles: true });
+ const span = /** @type {HTMLSpanElement} */ (target.querySelector('span'));
+
+ /**
+ * @param {number} count
+ * @param {number} multiplier
+ */
+ const expect_span_to_be = (count, multiplier) =>
+ assert.htmlEqual(span.innerHTML, `${count} * ${multiplier} = ${count * multiplier}`);
+
+ await count.dispatchEvent(clickEvent);
+ expect_span_to_be(1, 2);
+
+ await multiplier.dispatchEvent(clickEvent);
+ expect_span_to_be(1, 3);
+
+ await count.dispatchEvent(clickEvent);
+ expect_span_to_be(2, 3);
+
+ await multiplier.dispatchEvent(clickEvent);
+ expect_span_to_be(2, 4);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/mutation-both/main.svelte b/packages/svelte/tests/runtime-runes/samples/mutation-both/main.svelte
new file mode 100644
index 000000000000..ec3ccb0cf405
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/mutation-both/main.svelte
@@ -0,0 +1,22 @@
+
+
+{count} * {multiplied.multiplier} = {multiplied.count}
+Increase multiplier
+ count++}>Increase count
diff --git a/packages/svelte/tests/runtime-runes/samples/mutation-local/_config.js b/packages/svelte/tests/runtime-runes/samples/mutation-local/_config.js
new file mode 100644
index 000000000000..e77eca34420a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/mutation-local/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+ html: `2`
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/mutation-local/main.svelte b/packages/svelte/tests/runtime-runes/samples/mutation-local/main.svelte
new file mode 100644
index 000000000000..61686dc8cf2b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/mutation-local/main.svelte
@@ -0,0 +1,14 @@
+
+
+{x}
diff --git a/packages/svelte/tests/runtime-runes/samples/mutation/_config.js b/packages/svelte/tests/runtime-runes/samples/mutation/_config.js
new file mode 100644
index 000000000000..af8ead3929fe
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/mutation/_config.js
@@ -0,0 +1,16 @@
+import { test } from '../../test';
+
+export default test({
+ html: `1 / false `,
+
+ async test({ assert, target, window }) {
+ const btn = target.querySelector('button');
+ const clickEvent = new window.Event('click', { bubbles: true });
+
+ await btn?.dispatchEvent(clickEvent);
+ assert.htmlEqual(target.innerHTML, `1 / true `);
+
+ await btn?.dispatchEvent(clickEvent);
+ assert.htmlEqual(target.innerHTML, `1 / false `);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/mutation/main.svelte b/packages/svelte/tests/runtime-runes/samples/mutation/main.svelte
new file mode 100644
index 000000000000..f950c3d86ee0
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/mutation/main.svelte
@@ -0,0 +1,21 @@
+
+
+
+ {toggle1.id} / {pending.includes(toggle1.id)}
+
diff --git a/packages/svelte/tests/runtime-runes/samples/not-actual-runes/_config.js b/packages/svelte/tests/runtime-runes/samples/not-actual-runes/_config.js
new file mode 100644
index 000000000000..8d4d781076da
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/not-actual-runes/_config.js
@@ -0,0 +1,20 @@
+import { test } from '../../test';
+
+export default test({
+ html: `
+ 1 4 0
+ Shouldnt be reactive
+ `,
+
+ async test({ assert, target }) {
+ const btn = target.querySelector('button');
+ await btn?.click();
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ 1 4 0
+ Shouldnt be reactive
+ `
+ );
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/not-actual-runes/main.svelte b/packages/svelte/tests/runtime-runes/samples/not-actual-runes/main.svelte
new file mode 100644
index 000000000000..5b5c58e22f08
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/not-actual-runes/main.svelte
@@ -0,0 +1,20 @@
+
+
+{foo} {baz.x} {baz.y}
+ foo = 5}>Shouldnt be reactive
diff --git a/packages/svelte/tests/runtime-runes/samples/not-actual-runes/store.js b/packages/svelte/tests/runtime-runes/samples/not-actual-runes/store.js
new file mode 100644
index 000000000000..2698877ddd45
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/not-actual-runes/store.js
@@ -0,0 +1,4 @@
+import { writable } from 'svelte/store';
+
+export const state = writable((nr) => nr + 1);
+export const effect = writable(() => 0);
diff --git a/packages/svelte/tests/runtime-runes/samples/nullish-operator/_config.js b/packages/svelte/tests/runtime-runes/samples/nullish-operator/_config.js
new file mode 100644
index 000000000000..90c7fd7f3292
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/nullish-operator/_config.js
@@ -0,0 +1,13 @@
+import { test } from '../../test';
+
+export default test({
+ get props() {
+ return { log: [] };
+ },
+
+ async test({ assert, target, component }) {
+ await Promise.resolve();
+ await Promise.resolve();
+ assert.deepEqual(component.log, ['a1: ', {}, 'b1: ', {}]);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/nullish-operator/main.svelte b/packages/svelte/tests/runtime-runes/samples/nullish-operator/main.svelte
new file mode 100644
index 000000000000..8eb78927c1d6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/nullish-operator/main.svelte
@@ -0,0 +1,28 @@
+
+
diff --git a/packages/svelte/tests/runtime-runes/samples/pre-effect-ordering/_config.js b/packages/svelte/tests/runtime-runes/samples/pre-effect-ordering/_config.js
new file mode 100644
index 000000000000..8fe474169d17
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/pre-effect-ordering/_config.js
@@ -0,0 +1,31 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+ get props() {
+ return { log: [] };
+ },
+
+ async test({ assert, target, component }) {
+ const [b1] = target.querySelectorAll('button');
+
+ flushSync(() => {
+ b1.click();
+ });
+ flushSync(() => {
+ b1.click();
+ });
+
+ assert.deepEqual(component.log, [
+ 'Outer Effect Start (0)',
+ 'Outer Effect End (0)',
+ 'Inner Effect (0)',
+ 'Outer Effect Start (1)',
+ 'Outer Effect End (1)',
+ 'Inner Effect (1)',
+ 'Outer Effect Start (2)',
+ 'Outer Effect End (2)',
+ 'Inner Effect (2)'
+ ]);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/pre-effect-ordering/main.svelte b/packages/svelte/tests/runtime-runes/samples/pre-effect-ordering/main.svelte
new file mode 100644
index 000000000000..e31882fbbdae
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/pre-effect-ordering/main.svelte
@@ -0,0 +1,22 @@
+
+
+
+ Count: {count}
+
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/pre-effect/_config.js b/packages/svelte/tests/runtime-runes/samples/pre-effect/_config.js
new file mode 100644
index 000000000000..0e543f9311fe
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/pre-effect/_config.js
@@ -0,0 +1,16 @@
+import { test } from '../../test';
+
+export default test({
+ get props() {
+ return { log: [] };
+ },
+
+ async test({ assert, target, component }) {
+ const [b1, b2] = target.querySelectorAll('button');
+ b1.click();
+ b2.click();
+ await Promise.resolve();
+
+ assert.deepEqual(component.log, [0, 1]);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/pre-effect/main.svelte b/packages/svelte/tests/runtime-runes/samples/pre-effect/main.svelte
new file mode 100644
index 000000000000..cc9a249691fc
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/pre-effect/main.svelte
@@ -0,0 +1,13 @@
+
+
+ x++}>{x}
+ y++}>{y}
diff --git a/packages/svelte/tests/runtime-runes/samples/props-bound-fallback/Counter.svelte b/packages/svelte/tests/runtime-runes/samples/props-bound-fallback/Counter.svelte
new file mode 100644
index 000000000000..6b9240c70ec5
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/props-bound-fallback/Counter.svelte
@@ -0,0 +1,5 @@
+
+
+{count}
diff --git a/packages/svelte/tests/runtime-runes/samples/props-bound-fallback/_config.js b/packages/svelte/tests/runtime-runes/samples/props-bound-fallback/_config.js
new file mode 100644
index 000000000000..7d4900a7452a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/props-bound-fallback/_config.js
@@ -0,0 +1,16 @@
+import { test } from '../../test';
+
+// Tests that fallback value is propagated up correctly when the inner component
+// uses a prop it does not write to but has a fallback value
+export default test({
+ accessors: false, // so that prop actually becomes $.prop and not $.prop_source
+ html: `0 0 `,
+
+ async test({ assert, target }) {
+ const btn = target.querySelector('button');
+
+ await btn?.click();
+
+ assert.htmlEqual(target.innerHTML, `1 1 `);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/props-bound-fallback/main.svelte b/packages/svelte/tests/runtime-runes/samples/props-bound-fallback/main.svelte
new file mode 100644
index 000000000000..c32b50d7fc1d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/props-bound-fallback/main.svelte
@@ -0,0 +1,9 @@
+
+
+ bound = 1}>{bound}
+
+ bar--}>{bar}
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/props-bound-to-normal/_config.js b/packages/svelte/tests/runtime-runes/samples/props-bound-to-normal/_config.js
new file mode 100644
index 000000000000..aaf8f3b19385
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/props-bound-to-normal/_config.js
@@ -0,0 +1,21 @@
+import { test } from '../../test';
+
+export default test({
+ html: `0 0 0 `,
+
+ async test({ assert, target }) {
+ const [btn1, btn2, btn3] = target.querySelectorAll('button');
+
+ await btn1.click();
+ await Promise.resolve();
+ assert.htmlEqual(target.innerHTML, `1 1 1 `);
+
+ await btn3.click();
+ await Promise.resolve();
+ assert.htmlEqual(target.innerHTML, `1 1 0 `);
+
+ await btn2.click();
+ await Promise.resolve();
+ assert.htmlEqual(target.innerHTML, `0 0 0 `);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/props-bound-to-normal/main.svelte b/packages/svelte/tests/runtime-runes/samples/props-bound-to-normal/main.svelte
new file mode 100644
index 000000000000..2ae4ed1d38e5
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/props-bound-to-normal/main.svelte
@@ -0,0 +1,17 @@
+
+
+ bar++}>{foo.bar}
+
+
diff --git a/packages/svelte/tests/runtime-runes/samples/props-bound/Counter.svelte b/packages/svelte/tests/runtime-runes/samples/props-bound/Counter.svelte
new file mode 100644
index 000000000000..e9bcb945b280
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/props-bound/Counter.svelte
@@ -0,0 +1,5 @@
+
+
+ count++}>{count}
diff --git a/packages/svelte/tests/runtime-runes/samples/props-bound/_config.js b/packages/svelte/tests/runtime-runes/samples/props-bound/_config.js
new file mode 100644
index 000000000000..0fc80f0df5b7
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/props-bound/_config.js
@@ -0,0 +1,32 @@
+import { test } from '../../test';
+
+export default test({
+ html: `
+ 0 0 0 0
+ 0
+ 0
+ 0
+ 0
+ `,
+
+ async test({ assert, target, component }) {
+ const [b1, b2, b3, b4] = target.querySelectorAll('button');
+
+ b1.click();
+ b2.click();
+ b3.click();
+ b4.click();
+ await Promise.resolve();
+
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ 1 1 0 0
+ 1
+ 1
+ 1
+ 1
+ `
+ );
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/props-bound/main.svelte b/packages/svelte/tests/runtime-runes/samples/props-bound/main.svelte
new file mode 100644
index 000000000000..c3908f72fa11
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/props-bound/main.svelte
@@ -0,0 +1,15 @@
+
+
+{bound} {bound_nested.count} {unbound} {unbound_nested.count}
+
+props undefined:
+
+ readonly:
+ readonlyWithDefault: 1
+ binding:
+ bindingWithDefault: 1
+
+ set bindings to 5
+ set bindings to undefined
+
+ props defined:
+
+ readonly: 0
+ readonlyWithDefault: 0
+ binding: 0
+ bindingWithDefault: 0
+
+ set bindings to 5
+ set bindings to undefined
+
+ bindings undefined:
+
+ readonly:
+ readonlyWithDefault: 1
+ binding:
+ bindingWithDefault: 1
+
+ set bindings to 5
+ set bindings to undefined
+
+ bindings defined:
+
+ readonly: 0
+ readonlyWithDefault: 0
+ binding: 0
+ bindingWithDefault: 0
+
+ set bindings to 5
+ set bindings to undefined
+
+
+ Main:
+ readonly_undefined:
+ readonlyWithDefault_undefined:
+ binding_undefined:
+ bindingWithDefault_undefined:
+ readonly_defined: 0
+ readonlyWithDefault_defined: 0
+ binding_defined: 0
+ bindingWithDefault_defined: 0
+ bind_readonly_undefined:
+ bind_readonlyWithDefault_undefined: 1
+ bind_binding_undefined:
+ bind_bindingWithDefault_undefined: 1
+ bind_readonly_defined: 0
+ bind_readonlyWithDefault_defined: 0
+ bind_binding_defined: 0
+ bind_bindingWithDefault_defined: 0
+
+
+ set everything to 10
+ set everything to undefined
+ `,
+
+ async test({ assert, target }) {
+ const [
+ btn_5_1,
+ btn_undefined_1,
+ btn_5_2,
+ btn_undefined_2,
+ btn_5_3,
+ btn_undefined_3,
+ btn_5_4,
+ btn_undefined_4,
+ btn_all_10,
+ btn_all_undefined
+ ] = target.querySelectorAll('button');
+
+ btn_undefined_1.click();
+ btn_undefined_2.click();
+ btn_undefined_3.click();
+ btn_undefined_4.click();
+ await Promise.resolve();
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ props undefined:
+
+ readonly:
+ readonlyWithDefault: 1
+ binding:
+ bindingWithDefault:
+
+ set bindings to 5
+ set bindings to undefined
+
+ props defined:
+
+ readonly: 0
+ readonlyWithDefault: 0
+ binding:
+ bindingWithDefault:
+
+ set bindings to 5
+ set bindings to undefined
+
+ bindings undefined:
+
+ readonly:
+ readonlyWithDefault: 1
+ binding:
+ bindingWithDefault:
+
+ set bindings to 5
+ set bindings to undefined
+
+ bindings defined:
+
+ readonly: 0
+ readonlyWithDefault: 0
+ binding:
+ bindingWithDefault:
+
+ set bindings to 5
+ set bindings to undefined
+
+
+ Main:
+ readonly_undefined:
+ readonlyWithDefault_undefined:
+ binding_undefined:
+ bindingWithDefault_undefined:
+ readonly_defined: 0
+ readonlyWithDefault_defined: 0
+ binding_defined: 0
+ bindingWithDefault_defined: 0
+ bind_readonly_undefined:
+ bind_readonlyWithDefault_undefined: 1
+ bind_binding_undefined:
+ bind_bindingWithDefault_undefined:
+ bind_readonly_defined: 0
+ bind_readonlyWithDefault_defined: 0
+ bind_binding_defined:
+ bind_bindingWithDefault_defined:
+
+
+ set everything to 10
+ set everything to undefined
+ `
+ );
+
+ btn_5_1.click();
+ btn_5_2.click();
+ btn_5_3.click();
+ btn_5_4.click();
+ await Promise.resolve();
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ props undefined:
+
+ readonly:
+ readonlyWithDefault: 1
+ binding: 5
+ bindingWithDefault: 5
+
+ set bindings to 5
+ set bindings to undefined
+
+ props defined:
+
+ readonly: 0
+ readonlyWithDefault: 0
+ binding: 5
+ bindingWithDefault: 5
+
+ set bindings to 5
+ set bindings to undefined
+
+ bindings undefined:
+
+ readonly:
+ readonlyWithDefault: 1
+ binding: 5
+ bindingWithDefault: 5
+
+ set bindings to 5
+ set bindings to undefined
+
+ bindings defined:
+
+ readonly: 0
+ readonlyWithDefault: 0
+ binding: 5
+ bindingWithDefault: 5
+
+ set bindings to 5
+ set bindings to undefined
+
+
+ Main:
+ readonly_undefined:
+ readonlyWithDefault_undefined:
+ binding_undefined:
+ bindingWithDefault_undefined:
+ readonly_defined: 0
+ readonlyWithDefault_defined: 0
+ binding_defined: 0
+ bindingWithDefault_defined: 0
+ bind_readonly_undefined:
+ bind_readonlyWithDefault_undefined: 1
+ bind_binding_undefined: 5
+ bind_bindingWithDefault_undefined: 5
+ bind_readonly_defined: 0
+ bind_readonlyWithDefault_defined: 0
+ bind_binding_defined: 5
+ bind_bindingWithDefault_defined: 5
+
+
+ set everything to 10
+ set everything to undefined
+ `
+ );
+
+ await btn_all_10.click();
+ await Promise.resolve();
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ props undefined:
+
+ readonly: 10
+ readonlyWithDefault: 10
+ binding: 10
+ bindingWithDefault: 10
+
+ set bindings to 5
+ set bindings to undefined
+
+ props defined:
+
+ readonly: 10
+ readonlyWithDefault: 10
+ binding: 10
+ bindingWithDefault: 10
+
+ set bindings to 5
+ set bindings to undefined
+
+ bindings undefined:
+
+ readonly: 10
+ readonlyWithDefault: 10
+ binding: 10
+ bindingWithDefault: 10
+
+ set bindings to 5
+ set bindings to undefined
+
+ bindings defined:
+
+ readonly: 10
+ readonlyWithDefault: 10
+ binding: 10
+ bindingWithDefault: 10
+
+ set bindings to 5
+ set bindings to undefined
+
+
+ Main:
+ readonly_undefined: 10
+ readonlyWithDefault_undefined: 10
+ binding_undefined: 10
+ bindingWithDefault_undefined: 10
+ readonly_defined: 10
+ readonlyWithDefault_defined: 10
+ binding_defined: 10
+ bindingWithDefault_defined: 10
+ bind_readonly_undefined: 10
+ bind_readonlyWithDefault_undefined: 10
+ bind_binding_undefined: 10
+ bind_bindingWithDefault_undefined: 10
+ bind_readonly_defined: 10
+ bind_readonlyWithDefault_defined: 10
+ bind_binding_defined: 10
+ bind_bindingWithDefault_defined: 10
+
+
+ set everything to 10
+ set everything to undefined
+ `
+ );
+
+ await btn_all_undefined.click();
+ await Promise.resolve();
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ props undefined:
+
+ readonly:
+ readonlyWithDefault:
+ binding:
+ bindingWithDefault:
+
+ set bindings to 5
+ set bindings to undefined
+
+ props defined:
+
+ readonly:
+ readonlyWithDefault:
+ binding:
+ bindingWithDefault:
+
+ set bindings to 5
+ set bindings to undefined
+
+ bindings undefined:
+
+ readonly:
+ readonlyWithDefault:
+ binding:
+ bindingWithDefault:
+
+ set bindings to 5
+ set bindings to undefined
+
+ bindings defined:
+
+ readonly:
+ readonlyWithDefault:
+ binding:
+ bindingWithDefault:
+
+ set bindings to 5
+ set bindings to undefined
+
+
+ Main:
+ readonly_undefined:
+ readonlyWithDefault_undefined:
+ binding_undefined:
+ bindingWithDefault_undefined:
+ readonly_defined:
+ readonlyWithDefault_defined:
+ binding_defined:
+ bindingWithDefault_defined:
+ bind_readonly_undefined:
+ bind_readonlyWithDefault_undefined:
+ bind_binding_undefined:
+ bind_bindingWithDefault_undefined:
+ bind_readonly_defined:
+ bind_readonlyWithDefault_defined:
+ bind_binding_defined:
+ bind_bindingWithDefault_defined:
+
+
+ set everything to 10
+ set everything to undefined
+ `
+ );
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/props-default-value-behavior/inner.svelte b/packages/svelte/tests/runtime-runes/samples/props-default-value-behavior/inner.svelte
new file mode 100644
index 000000000000..80416bd34675
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/props-default-value-behavior/inner.svelte
@@ -0,0 +1,20 @@
+
+
+
+ readonly: {readonly}
+ readonlyWithDefault: {readonlyWithDefault}
+ binding: {binding}
+ bindingWithDefault: {bindingWithDefault}
+
+
+ {
+ binding = 5;
+ bindingWithDefault = 5;
+}}>set bindings to 5
+
+ {
+ binding = undefined;
+ bindingWithDefault = undefined;
+}}>set bindings to undefined
diff --git a/packages/svelte/tests/runtime-runes/samples/props-default-value-behavior/main.svelte b/packages/svelte/tests/runtime-runes/samples/props-default-value-behavior/main.svelte
new file mode 100644
index 000000000000..d80295b002be
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/props-default-value-behavior/main.svelte
@@ -0,0 +1,110 @@
+
+
+props undefined:
+props defined:
+bindings undefined:
+bindings defined:
+
+ Main:
+ readonly_undefined: {readonly_undefined}
+ readonlyWithDefault_undefined: {readonlyWithDefault_undefined}
+ binding_undefined: {binding_undefined}
+ bindingWithDefault_undefined: {bindingWithDefault_undefined}
+ readonly_defined: {readonly_defined}
+ readonlyWithDefault_defined: {readonlyWithDefault_defined}
+ binding_defined: {binding_defined}
+ bindingWithDefault_defined: {bindingWithDefault_defined}
+ bind_readonly_undefined: {bind_readonly_undefined}
+ bind_readonlyWithDefault_undefined: {bind_readonlyWithDefault_undefined}
+ bind_binding_undefined: {bind_binding_undefined}
+ bind_bindingWithDefault_undefined: {bind_bindingWithDefault_undefined}
+ bind_readonly_defined: {bind_readonly_defined}
+ bind_readonlyWithDefault_defined: {bind_readonlyWithDefault_defined}
+ bind_binding_defined: {bind_binding_defined}
+ bind_bindingWithDefault_defined: {bind_bindingWithDefault_defined}
+
+
+ {
+ readonly_undefined = 10;
+ readonlyWithDefault_undefined = 10;
+ binding_undefined = 10;
+ bindingWithDefault_undefined = 10;
+ readonly_defined = 10;
+ readonlyWithDefault_defined = 10;
+ binding_defined = 10;
+ bindingWithDefault_defined = 10;
+ bind_readonly_undefined = 10;
+ bind_readonlyWithDefault_undefined = 10;
+ bind_binding_undefined = 10;
+ bind_bindingWithDefault_undefined = 10;
+ bind_readonly_defined = 10;
+ bind_readonlyWithDefault_defined = 10;
+ bind_binding_defined = 10;
+ bind_bindingWithDefault_defined = 10;
+}}>set everything to 10
+
+ {
+ readonly_undefined = undefined;
+ readonlyWithDefault_undefined = undefined;
+ binding_undefined = undefined;
+ bindingWithDefault_undefined = undefined;
+ readonly_defined = undefined;
+ readonlyWithDefault_defined = undefined;
+ binding_defined = undefined;
+ bindingWithDefault_defined = undefined;
+ bind_readonly_undefined = undefined;
+ bind_readonlyWithDefault_undefined = undefined;
+ bind_binding_undefined = undefined;
+ bind_bindingWithDefault_undefined = undefined;
+ bind_readonly_defined = undefined;
+ bind_readonlyWithDefault_defined = undefined;
+ bind_binding_defined = undefined;
+ bind_bindingWithDefault_defined = undefined;
+}}>set everything to undefined
diff --git a/packages/svelte/tests/runtime-runes/samples/props-default-value-lazy/_config.js b/packages/svelte/tests/runtime-runes/samples/props-default-value-lazy/_config.js
new file mode 100644
index 000000000000..7d2e74101bbd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/props-default-value-lazy/_config.js
@@ -0,0 +1,23 @@
+import { test } from '../../test';
+
+// Tests that default values only fire lazily when the prop is undefined, and only initially
+export default test({
+ props: {
+ p0: 0,
+ p1: 0,
+ p2: 0,
+ p3: 0
+ },
+ html: `props: 0 0 0 0 1 1 1 1
log: nested.fallback_value,fallback_fn`,
+ async test({ assert, target, component }) {
+ component.p0 = undefined;
+ component.p1 = undefined;
+ component.p2 = undefined;
+ component.p3 = undefined;
+ component.p4 = undefined;
+ component.p5 = undefined;
+ component.p6 = undefined;
+ component.p7 = undefined;
+ assert.htmlEqual(target.innerHTML, `
props:
log: nested.fallback_value,fallback_fn`);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/props-default-value-lazy/main.svelte b/packages/svelte/tests/runtime-runes/samples/props-default-value-lazy/main.svelte
new file mode 100644
index 000000000000..9f74c327e0dd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/props-default-value-lazy/main.svelte
@@ -0,0 +1,31 @@
+
+
+
props: {p0} {p1} {p2} {p3} {p4} {p5} {p6} {p7}
+log: {log}
diff --git a/packages/svelte/tests/runtime-runes/samples/props-derived/Child.svelte b/packages/svelte/tests/runtime-runes/samples/props-derived/Child.svelte
new file mode 100644
index 000000000000..f1914c86baf7
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/props-derived/Child.svelte
@@ -0,0 +1,7 @@
+
+
+{random}
+{random}
+{random}
diff --git a/packages/svelte/tests/runtime-runes/samples/props-derived/_config.js b/packages/svelte/tests/runtime-runes/samples/props-derived/_config.js
new file mode 100644
index 000000000000..53d31229286c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/props-derived/_config.js
@@ -0,0 +1,21 @@
+import { test } from '../../test';
+
+let math_random = Math.random;
+let calls = 0;
+
+export default test({
+ skip_if_hydrate: 'permanent',
+ before_test() {
+ Math.random = function () {
+ calls++;
+ return math_random.call(this);
+ };
+ },
+ after_test() {
+ Math.random = math_random;
+ calls = 0;
+ },
+ test({ assert }) {
+ assert.equal(calls, 1);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/props-derived/main.svelte b/packages/svelte/tests/runtime-runes/samples/props-derived/main.svelte
new file mode 100644
index 000000000000..76bf2ba49534
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/props-derived/main.svelte
@@ -0,0 +1,5 @@
+
+
+{propA} {propB}
diff --git a/packages/svelte/tests/runtime-runes/samples/props-spread-fallback/_config.js b/packages/svelte/tests/runtime-runes/samples/props-spread-fallback/_config.js
new file mode 100644
index 000000000000..f6be4fbae486
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/props-spread-fallback/_config.js
@@ -0,0 +1,55 @@
+import { test } from '../../test';
+
+// Tests that fallback values are kept as long as the prop is not defined in the case of a spread
+export default test({
+ accessors: false, // so that propA actually becomes $.prop and not $.prop_source
+ html: `
+ change propA
+ change propB
+ true fallback
+ `,
+
+ async test({ assert, target }) {
+ const [propA, propB] = target.querySelectorAll('button');
+
+ await propA.click();
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ change propA
+ change propB
+ false fallback
+ `
+ );
+
+ await propB.click();
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ change propA
+ change propB
+ false defined
+ `
+ );
+
+ await propA.click();
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ change propA
+ change propB
+ true defined
+ `
+ );
+
+ await propB.click();
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ change propA
+ change propB
+ true
+ `
+ );
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/props-spread-fallback/main.svelte b/packages/svelte/tests/runtime-runes/samples/props-spread-fallback/main.svelte
new file mode 100644
index 000000000000..e3fd384d5875
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/props-spread-fallback/main.svelte
@@ -0,0 +1,12 @@
+
+
+ {props.propA = !props.propA}}>change propA
+ {props.propB = props.propB ? undefined : 'defined'}}>change propB
+Hello state state2 `
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/rune-name-used-by-rune/main.svelte b/packages/svelte/tests/runtime-runes/samples/rune-name-used-by-rune/main.svelte
new file mode 100644
index 000000000000..ea6e5e2dd69a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/rune-name-used-by-rune/main.svelte
@@ -0,0 +1,8 @@
+
+
+Hello {state} {derived_state}
diff --git a/packages/svelte/tests/runtime-runes/samples/runes-from-func/_config.js b/packages/svelte/tests/runtime-runes/samples/runes-from-func/_config.js
new file mode 100644
index 000000000000..7d3dd9993fb8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/runes-from-func/_config.js
@@ -0,0 +1,11 @@
+import { test } from '../../test';
+
+export default test({
+ html: '0 ',
+
+ async test({ assert, target }) {
+ await Promise.resolve();
+ await Promise.resolve();
+ assert.htmlEqual(target.innerHTML, `1 `);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/runes-from-func/main.svelte b/packages/svelte/tests/runtime-runes/samples/runes-from-func/main.svelte
new file mode 100644
index 000000000000..c28cedbaa128
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/runes-from-func/main.svelte
@@ -0,0 +1,19 @@
+
+
+{x}
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/runes-in-module-context/_config.js b/packages/svelte/tests/runtime-runes/samples/runes-in-module-context/_config.js
new file mode 100644
index 000000000000..09bd0a9aad8d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/runes-in-module-context/_config.js
@@ -0,0 +1,13 @@
+import { test } from '../../test';
+
+export default test({
+ html: `0 `,
+
+ async test({ assert, target, window }) {
+ const btn = target.querySelector('button');
+ const clickEvent = new window.Event('click', { bubbles: true });
+ await btn?.dispatchEvent(clickEvent);
+
+ assert.htmlEqual(target.innerHTML, `2 `);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/runes-in-module-context/main.svelte b/packages/svelte/tests/runtime-runes/samples/runes-in-module-context/main.svelte
new file mode 100644
index 000000000000..b5146071a207
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/runes-in-module-context/main.svelte
@@ -0,0 +1,18 @@
+
+
+
+
+
+ counter.count++}>{counter.double}
diff --git a/packages/svelte/tests/runtime-runes/samples/slot/_config.js b/packages/svelte/tests/runtime-runes/samples/slot/_config.js
new file mode 100644
index 000000000000..c69314e24431
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/slot/_config.js
@@ -0,0 +1,6 @@
+import { test } from '../../test';
+
+// Test that $$slots exists in runes mode
+export default test({
+ html: `bar
`
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/slot/main.svelte b/packages/svelte/tests/runtime-runes/samples/slot/main.svelte
new file mode 100644
index 000000000000..e6490ab09882
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/slot/main.svelte
@@ -0,0 +1,7 @@
+
+
+
+ bar
+
diff --git a/packages/svelte/tests/runtime-runes/samples/slot/slot.svelte b/packages/svelte/tests/runtime-runes/samples/slot/slot.svelte
new file mode 100644
index 000000000000..f58504ca4b3c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/slot/slot.svelte
@@ -0,0 +1,3 @@
+{#if $$slots}
+ clicks: 0
+ click me
+ `,
+
+ async test({ assert, target }) {
+ const btn = target.querySelector('button');
+
+ await btn?.click();
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ clicks: 1
+ click me
+ `
+ );
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-argument-destructured/main.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-argument-destructured/main.svelte
new file mode 100644
index 000000000000..f0975b46475d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-argument-destructured/main.svelte
@@ -0,0 +1,13 @@
+
+
+{#snippet foo({ count })}
+ clicks: {count}
+{/snippet}
+
+{@render foo({ count })}
+
+ count += 1}>
+ click me
+
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-argument/_config.js b/packages/svelte/tests/runtime-runes/samples/snippet-argument/_config.js
new file mode 100644
index 000000000000..b7b3133c3041
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-argument/_config.js
@@ -0,0 +1,21 @@
+import { test } from '../../test';
+
+export default test({
+ html: `
+ clicks: 0
+ click me
+ `,
+
+ async test({ assert, target }) {
+ const btn = target.querySelector('button');
+
+ await btn?.click();
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ clicks: 1
+ click me
+ `
+ );
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-argument/main.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-argument/main.svelte
new file mode 100644
index 000000000000..981229372441
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-argument/main.svelte
@@ -0,0 +1,13 @@
+
+
+{#snippet foo(n: number)}
+ clicks: {n}
+{/snippet}
+
+{@render foo(count)}
+
+ count += 1}>
+ click me
+
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-dynamic-children/Button.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-dynamic-children/Button.svelte
new file mode 100644
index 000000000000..bf8ea31e9990
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-dynamic-children/Button.svelte
@@ -0,0 +1,7 @@
+
+
+
+ {@render children()}
+
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-dynamic-children/_config.js b/packages/svelte/tests/runtime-runes/samples/snippet-dynamic-children/_config.js
new file mode 100644
index 000000000000..cd15ff7212f8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-dynamic-children/_config.js
@@ -0,0 +1,16 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+ html: `hidden showing show = true}>
+ {#if show}
+ showing
+ {:else}
+ hidden
+ {/if}
+
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-hoisting/_config.js b/packages/svelte/tests/runtime-runes/samples/snippet-hoisting/_config.js
new file mode 100644
index 000000000000..24fcbed65947
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-hoisting/_config.js
@@ -0,0 +1,9 @@
+import { ok, test } from '../../test';
+
+export default test({
+ test({ target }) {
+ const button = target.querySelector('button');
+ ok(button);
+ button.click();
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-hoisting/main.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-hoisting/main.svelte
new file mode 100644
index 000000000000..8c871d3de487
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-hoisting/main.svelte
@@ -0,0 +1,13 @@
+
+
+{#snippet snippet()}Hello{/snippet}
+
+
+ log snippet
+
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-namespace-1/Widget.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-namespace-1/Widget.svelte
new file mode 100644
index 000000000000..d537d9ae7f9a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-namespace-1/Widget.svelte
@@ -0,0 +1,7 @@
+
+
+
+ {@render children()}
+
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-namespace-1/_config.js b/packages/svelte/tests/runtime-runes/samples/snippet-namespace-1/_config.js
new file mode 100644
index 000000000000..63060f6f7082
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-namespace-1/_config.js
@@ -0,0 +1,21 @@
+import { ok, test } from '../../test';
+
+export default test({
+ html: `
+
+
+
+
+ `,
+
+ test({ assert, target }) {
+ const div = target.querySelector('div');
+ ok(div);
+ assert.equal(div.namespaceURI, 'http://www.w3.org/1999/xhtml');
+
+ const line = target.querySelector('line');
+ ok(line);
+ assert.equal(line.namespaceURI, 'http://www.w3.org/2000/svg');
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-namespace-1/main.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-namespace-1/main.svelte
new file mode 100644
index 000000000000..294d1752e7c6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-namespace-1/main.svelte
@@ -0,0 +1,11 @@
+
+
+
+
+ {#snippet children()}
+
+
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-namespace-2/_config.js b/packages/svelte/tests/runtime-runes/samples/snippet-namespace-2/_config.js
new file mode 100644
index 000000000000..ea704fd1bd02
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-namespace-2/_config.js
@@ -0,0 +1,21 @@
+import { ok, test } from '../../test';
+
+export default test({
+ html: `
+
+
+ hello
+
+
+ `,
+
+ test({ assert, target }) {
+ const svg = target.querySelector('svg');
+ ok(svg);
+ assert.equal(svg.namespaceURI, 'http://www.w3.org/2000/svg');
+
+ const p = target.querySelector('p');
+ ok(p);
+ assert.equal(p.namespaceURI, 'http://www.w3.org/1999/xhtml');
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-namespace-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-namespace-2/main.svelte
new file mode 100644
index 000000000000..26ac4bf559f5
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-namespace-2/main.svelte
@@ -0,0 +1,8 @@
+
+ {#snippet p()}
+ hello
+ {/snippet}
+
+ {@render p()}
+
+
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-prop-explicit-no-args/Counter.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-prop-explicit-no-args/Counter.svelte
new file mode 100644
index 000000000000..f4cad226c1b2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-prop-explicit-no-args/Counter.svelte
@@ -0,0 +1,5 @@
+
+
+{@render foo()}
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-prop-explicit-no-args/_config.js b/packages/svelte/tests/runtime-runes/samples/snippet-prop-explicit-no-args/_config.js
new file mode 100644
index 000000000000..043df87cb5d5
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-prop-explicit-no-args/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+ html: `
+ foo
+ `
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-prop-explicit-no-args/main.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-prop-explicit-no-args/main.svelte
new file mode 100644
index 000000000000..acc70cd30e3c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-prop-explicit-no-args/main.svelte
@@ -0,0 +1,9 @@
+
+
+{#snippet foo()}
+ foo
+{/snippet}
+
+ count += 1}>
+ click me
+
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-prop-explicit/_config.js b/packages/svelte/tests/runtime-runes/samples/snippet-prop-explicit/_config.js
new file mode 100644
index 000000000000..b7b3133c3041
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-prop-explicit/_config.js
@@ -0,0 +1,21 @@
+import { test } from '../../test';
+
+export default test({
+ html: `
+ clicks: 0
+ click me
+ `,
+
+ async test({ assert, target }) {
+ const btn = target.querySelector('button');
+
+ await btn?.click();
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ clicks: 1
+ click me
+ `
+ );
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-prop-explicit/main.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-prop-explicit/main.svelte
new file mode 100644
index 000000000000..04887b4f7a7f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-prop-explicit/main.svelte
@@ -0,0 +1,9 @@
+
+
+{#snippet foo(n)}
+ clicks: {n}
+{/snippet}
+
+ count += 1}>
+ click me
+
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-prop-implicit/_config.js b/packages/svelte/tests/runtime-runes/samples/snippet-prop-implicit/_config.js
new file mode 100644
index 000000000000..b7b3133c3041
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-prop-implicit/_config.js
@@ -0,0 +1,21 @@
+import { test } from '../../test';
+
+export default test({
+ html: `
+ clicks: 0
+ click me
+ `,
+
+ async test({ assert, target }) {
+ const btn = target.querySelector('button');
+
+ await btn?.click();
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ clicks: 1
+ click me
+ `
+ );
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-prop-implicit/main.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-prop-implicit/main.svelte
new file mode 100644
index 000000000000..6898a2ccfb19
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-prop-implicit/main.svelte
@@ -0,0 +1,9 @@
+
+
+
+ {#snippet foo(n)}
+ clicks: {n}
+ {/snippet}
+
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-prop-reactive/Inner.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-prop-reactive/Inner.svelte
new file mode 100644
index 000000000000..ae5ee1bcb4a3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-prop-reactive/Inner.svelte
@@ -0,0 +1,5 @@
+
+
+{@render snippet()}
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-prop-reactive/_config.js b/packages/svelte/tests/runtime-runes/samples/snippet-prop-reactive/_config.js
new file mode 100644
index 000000000000..89d4713cc051
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-prop-reactive/_config.js
@@ -0,0 +1,20 @@
+import { test } from '../../test';
+
+export default test({
+ html: `
+ foo
+ show bar
+ `,
+
+ async test({ assert, target }) {
+ const btn = target.querySelector('button');
+ await btn?.click();
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ bar
+ show bar
+ `
+ );
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-prop-reactive/main.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-prop-reactive/main.svelte
new file mode 100644
index 000000000000..5e4df528ce11
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-prop-reactive/main.svelte
@@ -0,0 +1,17 @@
+
+
+{#snippet foo()}
+ foo
+{/snippet}
+
+{#snippet bar()}
+ bar
+{/snippet}
+
+ show_foo = false}>show bar
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-reactive-args/_config.js b/packages/svelte/tests/runtime-runes/samples/snippet-reactive-args/_config.js
new file mode 100644
index 000000000000..ffb50aaa536f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-reactive-args/_config.js
@@ -0,0 +1,62 @@
+import { test } from '../../test';
+
+export default test({
+ html: `
+ snippet: 0
+ toggle
+ increase count
+ `,
+ props: {
+ get log() {
+ return [];
+ }
+ },
+
+ async test({ assert, target, component }) {
+ const [toggle, increment] = target.querySelectorAll('button');
+
+ await increment?.click();
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ snippet: 1
+ toggle
+ increase count
+ `
+ );
+ assert.deepEqual(component.log, []);
+
+ await toggle?.click();
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ component: 1
+ toggle
+ increase count
+ `
+ );
+ assert.deepEqual(component.log, [1]);
+
+ await increment?.click();
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ component: 2
+ toggle
+ increase count
+ `
+ );
+ assert.deepEqual(component.log, [1]);
+
+ await toggle?.click();
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ snippet: 2
+ toggle
+ increase count
+ `
+ );
+ assert.deepEqual(component.log, [1]);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-reactive-args/inner.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-reactive-args/inner.svelte
new file mode 100644
index 000000000000..bbe3a6104340
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-reactive-args/inner.svelte
@@ -0,0 +1,6 @@
+
+
+component: {count}
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-reactive-args/main.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-reactive-args/main.svelte
new file mode 100644
index 000000000000..682fca22dc84
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-reactive-args/main.svelte
@@ -0,0 +1,22 @@
+
+
+{#snippet foo({count})}
+ snippet: {count}
+{/snippet}
+
+{#snippet bar(props)}
+ show_foo = !show_foo}>toggle
+ count++}>increase count
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-reactive/_config.js b/packages/svelte/tests/runtime-runes/samples/snippet-reactive/_config.js
new file mode 100644
index 000000000000..89d4713cc051
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-reactive/_config.js
@@ -0,0 +1,20 @@
+import { test } from '../../test';
+
+export default test({
+ html: `
+ foo
+ show bar
+ `,
+
+ async test({ assert, target }) {
+ const btn = target.querySelector('button');
+ await btn?.click();
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ bar
+ show bar
+ `
+ );
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-reactive/main.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-reactive/main.svelte
new file mode 100644
index 000000000000..c8d29d599f05
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-reactive/main.svelte
@@ -0,0 +1,16 @@
+
+
+{#snippet foo()}
+ foo
+{/snippet}
+
+{#snippet bar()}
+ bar
+{/snippet}
+
+{@render snippet()}
+
+ show_foo = false}>show bar
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-scope/Component.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-scope/Component.svelte
new file mode 100644
index 000000000000..79a2ed25e999
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-scope/Component.svelte
@@ -0,0 +1,7 @@
+
+
+{#if inner}
+ {@render inner()}
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-scope/_config.js b/packages/svelte/tests/runtime-runes/samples/snippet-scope/_config.js
new file mode 100644
index 000000000000..6f04c6270d65
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-scope/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+ html: `S
S v
v e
e l
l t
t e
e `
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-scope/main.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-scope/main.svelte
new file mode 100644
index 000000000000..737d2943e373
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-scope/main.svelte
@@ -0,0 +1,13 @@
+
+
+{#each name.split('') as character}
+ {character}
+
+ {#snippet inner()}
+ {character}
+ {/snippet}
+
+{/each}
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-spread/Button.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-spread/Button.svelte
new file mode 100644
index 000000000000..b025db98ed6f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-spread/Button.svelte
@@ -0,0 +1,7 @@
+
+
+
+
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-spread/_config.js b/packages/svelte/tests/runtime-runes/samples/snippet-spread/_config.js
new file mode 100644
index 000000000000..4802e2529794
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-spread/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+ html: `hello `
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-spread/main.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-spread/main.svelte
new file mode 100644
index 000000000000..703a2d6a8054
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-spread/main.svelte
@@ -0,0 +1,7 @@
+
+
+
+ hello
+
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-validation-error-1/_config.js b/packages/svelte/tests/runtime-runes/samples/snippet-validation-error-1/_config.js
new file mode 100644
index 000000000000..01c2773b3237
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-validation-error-1/_config.js
@@ -0,0 +1,10 @@
+import { test } from '../../test';
+
+export default test({
+ compileOptions: {
+ dev: true
+ },
+ error:
+ 'The argument to `{@render ...}` must be a snippet function, not a component or some other kind of function. ' +
+ 'If you want to dynamically render one snippet or another, use `$derived` and pass its result to `{@render ...}`.'
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-validation-error-1/main.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-validation-error-1/main.svelte
new file mode 100644
index 000000000000..d07df452da8b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-validation-error-1/main.svelte
@@ -0,0 +1,7 @@
+
+
+{@render not_a_snippet()}
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-validation-error-2/_config.js b/packages/svelte/tests/runtime-runes/samples/snippet-validation-error-2/_config.js
new file mode 100644
index 000000000000..09bd836b0af0
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-validation-error-2/_config.js
@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+ compileOptions: {
+ dev: true
+ },
+ error: 'A snippet must be rendered with `{@render ...}`'
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-validation-error-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-validation-error-2/main.svelte
new file mode 100644
index 000000000000..e24e9549e32e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-validation-error-2/main.svelte
@@ -0,0 +1,5 @@
+{#snippet Foo()}
+ hello
+{/snippet}
+
+hello world
`
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet/main.svelte b/packages/svelte/tests/runtime-runes/samples/snippet/main.svelte
new file mode 100644
index 000000000000..ecfb8a9979a2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet/main.svelte
@@ -0,0 +1,5 @@
+{#snippet hello()}
+ hello world
+{/snippet}
+
+{@render hello()}
diff --git a/packages/svelte/tests/runtime-runes/samples/state-undefined/_config.js b/packages/svelte/tests/runtime-runes/samples/state-undefined/_config.js
new file mode 100644
index 000000000000..e012718f8339
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/state-undefined/_config.js
@@ -0,0 +1,12 @@
+import { test } from '../../test';
+
+export default test({
+ html: `foo `);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/state-undefined/main.svelte b/packages/svelte/tests/runtime-runes/samples/state-undefined/main.svelte
new file mode 100644
index 000000000000..59821eae89ab
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/state-undefined/main.svelte
@@ -0,0 +1,5 @@
+
+
+ foo = 'foo'}>{foo}
diff --git a/packages/svelte/tests/runtime-runes/samples/store-no-mutation-validation/_config.js b/packages/svelte/tests/runtime-runes/samples/store-no-mutation-validation/_config.js
new file mode 100644
index 000000000000..841ffe39d499
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/store-no-mutation-validation/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+ html: `Hello store `
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/store-no-mutation-validation/main.svelte b/packages/svelte/tests/runtime-runes/samples/store-no-mutation-validation/main.svelte
new file mode 100644
index 000000000000..098823e3d89a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/store-no-mutation-validation/main.svelte
@@ -0,0 +1,7 @@
+
+
+Hello {name}
diff --git a/packages/svelte/tests/runtime-runes/samples/tick-timing/_config.js b/packages/svelte/tests/runtime-runes/samples/tick-timing/_config.js
new file mode 100644
index 000000000000..339cec55c5a2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/tick-timing/_config.js
@@ -0,0 +1,16 @@
+import { tick } from 'svelte';
+import { test, ok } from '../../test';
+
+// Tests that tick only resolves after all pending effects have been cleared
+export default test({
+ async test({ assert, target }) {
+ const btn = target.querySelector('button');
+ ok(btn);
+ btn.click();
+ await tick();
+ assert.htmlEqual(target.innerHTML, `5 `);
+ btn.click();
+ await tick();
+ assert.htmlEqual(target.innerHTML, `6 `);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/tick-timing/main.svelte b/packages/svelte/tests/runtime-runes/samples/tick-timing/main.svelte
new file mode 100644
index 000000000000..6276b9b88079
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/tick-timing/main.svelte
@@ -0,0 +1,11 @@
+
+
+ count++}>{count}
diff --git a/packages/svelte/tests/runtime-runes/samples/typescript-as-expression/_config.js b/packages/svelte/tests/runtime-runes/samples/typescript-as-expression/_config.js
new file mode 100644
index 000000000000..4fd52f2d549f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/typescript-as-expression/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+ html: '1 2'
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/typescript-as-expression/main.svelte b/packages/svelte/tests/runtime-runes/samples/typescript-as-expression/main.svelte
new file mode 100644
index 000000000000..015c2d979da7
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/typescript-as-expression/main.svelte
@@ -0,0 +1,6 @@
+
+
+{count as number} {double as number}
diff --git a/packages/svelte/tests/runtime-runes/samples/typescript-const1/_config.js b/packages/svelte/tests/runtime-runes/samples/typescript-const1/_config.js
new file mode 100644
index 000000000000..b34c10c8f352
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/typescript-const1/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+ html: '10 * 10 = 100
{}
20 * 20 = 400
{}
'
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/typescript-const1/main.svelte b/packages/svelte/tests/runtime-runes/samples/typescript-const1/main.svelte
new file mode 100644
index 000000000000..04d555cabc24
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/typescript-const1/main.svelte
@@ -0,0 +1,10 @@
+
+
+{#each boxes as box}
+ {@const area: number = box.width * box.height}
+ {@const name: string = "{}"}
+ {box.width} * {box.height} = {area}
+ {name}
+{/each}
diff --git a/packages/svelte/tests/runtime-runes/samples/typescript-each-indexed/_config.js b/packages/svelte/tests/runtime-runes/samples/typescript-each-indexed/_config.js
new file mode 100644
index 000000000000..d8a932c1f006
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/typescript-each-indexed/_config.js
@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+ html: `
+ 0: a
+ 1: b
+ 2: c
+ `
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/typescript-each-indexed/main.svelte b/packages/svelte/tests/runtime-runes/samples/typescript-each-indexed/main.svelte
new file mode 100644
index 000000000000..2624f342a749
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/typescript-each-indexed/main.svelte
@@ -0,0 +1,7 @@
+
+
+{#each letters as letter: string, i}
+ {i}: {letter}
+{/each}
diff --git a/packages/svelte/tests/runtime-runes/samples/typescript-non-null-expression/_config.js b/packages/svelte/tests/runtime-runes/samples/typescript-non-null-expression/_config.js
new file mode 100644
index 000000000000..4fd52f2d549f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/typescript-non-null-expression/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+ html: '1 2'
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/typescript-non-null-expression/main.svelte b/packages/svelte/tests/runtime-runes/samples/typescript-non-null-expression/main.svelte
new file mode 100644
index 000000000000..e851a57828e8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/typescript-non-null-expression/main.svelte
@@ -0,0 +1,6 @@
+
+
+{count!} {double!}
diff --git a/packages/svelte/tests/runtime-runes/samples/typescript/_config.js b/packages/svelte/tests/runtime-runes/samples/typescript/_config.js
new file mode 100644
index 000000000000..2115ae298a04
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/typescript/_config.js
@@ -0,0 +1,11 @@
+import { test } from '../../test';
+
+export default test({
+ html: 'clicks: 0 ',
+
+ async test({ assert, target }) {
+ const btn = target.querySelector('button');
+ await btn?.click();
+ assert.htmlEqual(target.innerHTML, `clicks: 1 `);
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/typescript/main.svelte b/packages/svelte/tests/runtime-runes/samples/typescript/main.svelte
new file mode 100644
index 000000000000..724988b55a7b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/typescript/main.svelte
@@ -0,0 +1,20 @@
+
+
+
+
+ {
+ const next: number = count + 1;
+ count = next! as number;
+ }}
+>clicks: {count}
diff --git a/packages/svelte/tests/runtime-runes/samples/typescript/types.ts b/packages/svelte/tests/runtime-runes/samples/typescript/types.ts
new file mode 100644
index 000000000000..9673715eed3a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/typescript/types.ts
@@ -0,0 +1,3 @@
+export interface Foo {}
+export interface Bar {}
+export interface Baz {}
diff --git a/packages/svelte/tests/runtime-runes/samples/untracked/_config.js b/packages/svelte/tests/runtime-runes/samples/untracked/_config.js
new file mode 100644
index 000000000000..c3a3f87c5c25
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/untracked/_config.js
@@ -0,0 +1,43 @@
+import { test } from '../../test';
+
+export default test({
+ html: `
+ multiplier: 1
+ result: 0
+ `,
+
+ async test({ assert, target, window }) {
+ const [b1, b2] = target.querySelectorAll('button');
+
+ b1.click();
+ b2.click();
+ await Promise.resolve();
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ multiplier: 2
+ result: 2
+ `
+ );
+
+ b1.click();
+ await Promise.resolve();
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ multiplier: 3
+ result: 2
+ `
+ );
+
+ b2.click();
+ await Promise.resolve();
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ multiplier: 3
+ result: 6
+ `
+ );
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/untracked/main.svelte b/packages/svelte/tests/runtime-runes/samples/untracked/main.svelte
new file mode 100644
index 000000000000..971f71da2f2c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/untracked/main.svelte
@@ -0,0 +1,9 @@
+
+
+ multiplier++}>multiplier: {multiplier}
+ count++}>result: {result}
diff --git a/packages/svelte/tests/runtime-runes/samples/wrapped-$state-2/_config.js b/packages/svelte/tests/runtime-runes/samples/wrapped-$state-2/_config.js
new file mode 100644
index 000000000000..0f6419184714
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/wrapped-$state-2/_config.js
@@ -0,0 +1,18 @@
+import { test } from '../../test';
+
+export default test({
+ html: `
+ foo
+`,
+
+ async test({ assert, target, window }) {
+ const clickEvent = new window.Event('click', { bubbles: true });
+ await target.querySelector('button')?.dispatchEvent(clickEvent);
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ bar
+ `
+ );
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/wrapped-$state-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/wrapped-$state-2/main.svelte
new file mode 100644
index 000000000000..a7dac1f5972b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/wrapped-$state-2/main.svelte
@@ -0,0 +1,22 @@
+
+
+ (a.x = 'bar')}>{a.x}
diff --git a/packages/svelte/tests/runtime-runes/samples/wrapped-$state/_config.js b/packages/svelte/tests/runtime-runes/samples/wrapped-$state/_config.js
new file mode 100644
index 000000000000..5c2bf9e6b45e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/wrapped-$state/_config.js
@@ -0,0 +1,32 @@
+import { test } from '../../test';
+
+export default test({
+ html: `
+ Add entry
+ x
+`,
+
+ async test({ assert, target, window }) {
+ const clickEvent = new window.Event('click', { bubbles: true });
+
+ await target.querySelector('button')?.dispatchEvent(clickEvent);
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ Add entry
+ x
+ y
+ Remove entry
+ `
+ );
+
+ await target.querySelectorAll('button')[1].dispatchEvent(clickEvent);
+ assert.htmlEqual(
+ target.innerHTML,
+ `
+ Add entry
+ x
+ `
+ );
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/wrapped-$state/main.svelte b/packages/svelte/tests/runtime-runes/samples/wrapped-$state/main.svelte
new file mode 100644
index 000000000000..1cf0eb180f9e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/wrapped-$state/main.svelte
@@ -0,0 +1,30 @@
+
+
+ array.push('y')}>Add entry
+
+{#each array.value as entry}
+ {entry}
+{/each}
+
+{#if array.value.length > 1}
+ array.pop()}>Remove entry
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/test.ts b/packages/svelte/tests/runtime-runes/test.ts
new file mode 100644
index 000000000000..0806864060a3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/test.ts
@@ -0,0 +1,8 @@
+// @vitest-environment jsdom
+import { runtime_suite, ok } from '../runtime-legacy/shared';
+
+const { test, run } = runtime_suite(true);
+
+export { test, ok };
+
+await run(__dirname);
diff --git a/packages/svelte/test/server-side-rendering/samples/attribute-boolean/_expected.html b/packages/svelte/tests/server-side-rendering/samples/attribute-boolean/_expected.html
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/attribute-boolean/_expected.html
rename to packages/svelte/tests/server-side-rendering/samples/attribute-boolean/_expected.html
diff --git a/packages/svelte/test/server-side-rendering/samples/attribute-boolean/main.svelte b/packages/svelte/tests/server-side-rendering/samples/attribute-boolean/main.svelte
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/attribute-boolean/main.svelte
rename to packages/svelte/tests/server-side-rendering/samples/attribute-boolean/main.svelte
diff --git a/packages/svelte/tests/server-side-rendering/samples/attribute-dynamic/_config.js b/packages/svelte/tests/server-side-rendering/samples/attribute-dynamic/_config.js
new file mode 100644
index 000000000000..b68af2abdad9
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/attribute-dynamic/_config.js
@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+ props: {
+ font: 'sans-serif',
+ color: 'aquamarine'
+ }
+});
diff --git a/packages/svelte/test/server-side-rendering/samples/attribute-dynamic/_expected.html b/packages/svelte/tests/server-side-rendering/samples/attribute-dynamic/_expected.html
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/attribute-dynamic/_expected.html
rename to packages/svelte/tests/server-side-rendering/samples/attribute-dynamic/_expected.html
diff --git a/packages/svelte/test/server-side-rendering/samples/attribute-dynamic/main.svelte b/packages/svelte/tests/server-side-rendering/samples/attribute-dynamic/main.svelte
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/attribute-dynamic/main.svelte
rename to packages/svelte/tests/server-side-rendering/samples/attribute-dynamic/main.svelte
diff --git a/packages/svelte/tests/server-side-rendering/samples/attribute-escape-quotes-spread-2/_config.js b/packages/svelte/tests/server-side-rendering/samples/attribute-escape-quotes-spread-2/_config.js
new file mode 100644
index 000000000000..f47bee71df87
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/attribute-escape-quotes-spread-2/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({});
diff --git a/packages/svelte/test/server-side-rendering/samples/attribute-escape-quotes-spread-2/_expected.html b/packages/svelte/tests/server-side-rendering/samples/attribute-escape-quotes-spread-2/_expected.html
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/attribute-escape-quotes-spread-2/_expected.html
rename to packages/svelte/tests/server-side-rendering/samples/attribute-escape-quotes-spread-2/_expected.html
diff --git a/packages/svelte/test/server-side-rendering/samples/attribute-escape-quotes-spread-2/main.svelte b/packages/svelte/tests/server-side-rendering/samples/attribute-escape-quotes-spread-2/main.svelte
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/attribute-escape-quotes-spread-2/main.svelte
rename to packages/svelte/tests/server-side-rendering/samples/attribute-escape-quotes-spread-2/main.svelte
diff --git a/packages/svelte/tests/server-side-rendering/samples/attribute-escaped-quotes-spread/_config.js b/packages/svelte/tests/server-side-rendering/samples/attribute-escaped-quotes-spread/_config.js
new file mode 100644
index 000000000000..f47bee71df87
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/attribute-escaped-quotes-spread/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({});
diff --git a/packages/svelte/test/server-side-rendering/samples/attribute-escaped-quotes-spread/_expected.html b/packages/svelte/tests/server-side-rendering/samples/attribute-escaped-quotes-spread/_expected.html
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/attribute-escaped-quotes-spread/_expected.html
rename to packages/svelte/tests/server-side-rendering/samples/attribute-escaped-quotes-spread/_expected.html
diff --git a/packages/svelte/test/server-side-rendering/samples/attribute-escaped-quotes-spread/main.svelte b/packages/svelte/tests/server-side-rendering/samples/attribute-escaped-quotes-spread/main.svelte
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/attribute-escaped-quotes-spread/main.svelte
rename to packages/svelte/tests/server-side-rendering/samples/attribute-escaped-quotes-spread/main.svelte
diff --git a/packages/svelte/test/server-side-rendering/samples/attribute-escaped-quotes/_expected.html b/packages/svelte/tests/server-side-rendering/samples/attribute-escaped-quotes/_expected.html
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/attribute-escaped-quotes/_expected.html
rename to packages/svelte/tests/server-side-rendering/samples/attribute-escaped-quotes/_expected.html
diff --git a/packages/svelte/test/server-side-rendering/samples/attribute-escaped-quotes/main.svelte b/packages/svelte/tests/server-side-rendering/samples/attribute-escaped-quotes/main.svelte
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/attribute-escaped-quotes/main.svelte
rename to packages/svelte/tests/server-side-rendering/samples/attribute-escaped-quotes/main.svelte
diff --git a/packages/svelte/test/server-side-rendering/samples/attribute-spread-with-null/_expected.html b/packages/svelte/tests/server-side-rendering/samples/attribute-spread-with-null/_expected.html
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/attribute-spread-with-null/_expected.html
rename to packages/svelte/tests/server-side-rendering/samples/attribute-spread-with-null/_expected.html
diff --git a/packages/svelte/test/server-side-rendering/samples/attribute-spread-with-null/main.svelte b/packages/svelte/tests/server-side-rendering/samples/attribute-spread-with-null/main.svelte
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/attribute-spread-with-null/main.svelte
rename to packages/svelte/tests/server-side-rendering/samples/attribute-spread-with-null/main.svelte
diff --git a/packages/svelte/test/server-side-rendering/samples/attribute-static/_expected.html b/packages/svelte/tests/server-side-rendering/samples/attribute-static/_expected.html
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/attribute-static/_expected.html
rename to packages/svelte/tests/server-side-rendering/samples/attribute-static/_expected.html
diff --git a/packages/svelte/test/server-side-rendering/samples/attribute-static/main.svelte b/packages/svelte/tests/server-side-rendering/samples/attribute-static/main.svelte
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/attribute-static/main.svelte
rename to packages/svelte/tests/server-side-rendering/samples/attribute-static/main.svelte
diff --git a/packages/svelte/tests/server-side-rendering/samples/bindings-empty-string/_config.js b/packages/svelte/tests/server-side-rendering/samples/bindings-empty-string/_config.js
new file mode 100644
index 000000000000..f47bee71df87
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/bindings-empty-string/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({});
diff --git a/packages/svelte/test/server-side-rendering/samples/bindings-empty-string/_expected.html b/packages/svelte/tests/server-side-rendering/samples/bindings-empty-string/_expected.html
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/bindings-empty-string/_expected.html
rename to packages/svelte/tests/server-side-rendering/samples/bindings-empty-string/_expected.html
diff --git a/packages/svelte/test/server-side-rendering/samples/bindings-empty-string/main.svelte b/packages/svelte/tests/server-side-rendering/samples/bindings-empty-string/main.svelte
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/bindings-empty-string/main.svelte
rename to packages/svelte/tests/server-side-rendering/samples/bindings-empty-string/main.svelte
diff --git a/packages/svelte/tests/server-side-rendering/samples/bindings-group/_config.js b/packages/svelte/tests/server-side-rendering/samples/bindings-group/_config.js
new file mode 100644
index 000000000000..f47bee71df87
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/bindings-group/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({});
diff --git a/packages/svelte/tests/server-side-rendering/samples/bindings-group/_expected.html b/packages/svelte/tests/server-side-rendering/samples/bindings-group/_expected.html
new file mode 100644
index 000000000000..8d4e2468084a
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/bindings-group/_expected.html
@@ -0,0 +1,5 @@
+Cheese
+{fillings.toString()}
+
+before
+
+after
+
diff --git a/packages/svelte/test/server-side-rendering/samples/comment/main.svelte b/packages/svelte/tests/server-side-rendering/samples/comment-preserve/main.svelte
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/comment/main.svelte
rename to packages/svelte/tests/server-side-rendering/samples/comment-preserve/main.svelte
diff --git a/packages/svelte/test/server-side-rendering/samples/comment/_expected.html b/packages/svelte/tests/server-side-rendering/samples/comment/_expected.html
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/comment/_expected.html
rename to packages/svelte/tests/server-side-rendering/samples/comment/_expected.html
diff --git a/packages/svelte/test/server-side-rendering/samples/comment-preserve/_expected.html b/packages/svelte/tests/server-side-rendering/samples/comment/main.svelte
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/comment-preserve/_expected.html
rename to packages/svelte/tests/server-side-rendering/samples/comment/main.svelte
diff --git a/packages/svelte/test/server-side-rendering/samples/component-binding-renamed/Foo.svelte b/packages/svelte/tests/server-side-rendering/samples/component-binding-renamed/Foo.svelte
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/component-binding-renamed/Foo.svelte
rename to packages/svelte/tests/server-side-rendering/samples/component-binding-renamed/Foo.svelte
diff --git a/packages/svelte/tests/server-side-rendering/samples/component-binding-renamed/_config.js b/packages/svelte/tests/server-side-rendering/samples/component-binding-renamed/_config.js
new file mode 100644
index 000000000000..f47bee71df87
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/component-binding-renamed/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({});
diff --git a/packages/svelte/test/server-side-rendering/samples/component-binding-renamed/_expected.html b/packages/svelte/tests/server-side-rendering/samples/component-binding-renamed/_expected.html
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/component-binding-renamed/_expected.html
rename to packages/svelte/tests/server-side-rendering/samples/component-binding-renamed/_expected.html
diff --git a/packages/svelte/test/server-side-rendering/samples/component-binding-renamed/main.svelte b/packages/svelte/tests/server-side-rendering/samples/component-binding-renamed/main.svelte
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/component-binding-renamed/main.svelte
rename to packages/svelte/tests/server-side-rendering/samples/component-binding-renamed/main.svelte
diff --git a/packages/svelte/test/server-side-rendering/samples/component-binding/Foo.svelte b/packages/svelte/tests/server-side-rendering/samples/component-binding/Foo.svelte
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/component-binding/Foo.svelte
rename to packages/svelte/tests/server-side-rendering/samples/component-binding/Foo.svelte
diff --git a/packages/svelte/tests/server-side-rendering/samples/component-binding/_config.js b/packages/svelte/tests/server-side-rendering/samples/component-binding/_config.js
new file mode 100644
index 000000000000..f47bee71df87
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/component-binding/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({});
diff --git a/packages/svelte/test/server-side-rendering/samples/component-binding/_expected.html b/packages/svelte/tests/server-side-rendering/samples/component-binding/_expected.html
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/component-binding/_expected.html
rename to packages/svelte/tests/server-side-rendering/samples/component-binding/_expected.html
diff --git a/packages/svelte/test/server-side-rendering/samples/component-binding/main.svelte b/packages/svelte/tests/server-side-rendering/samples/component-binding/main.svelte
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/component-binding/main.svelte
rename to packages/svelte/tests/server-side-rendering/samples/component-binding/main.svelte
diff --git a/packages/svelte/test/server-side-rendering/samples/component-data-dynamic/Widget.svelte b/packages/svelte/tests/server-side-rendering/samples/component-data-dynamic/Widget.svelte
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/component-data-dynamic/Widget.svelte
rename to packages/svelte/tests/server-side-rendering/samples/component-data-dynamic/Widget.svelte
diff --git a/packages/svelte/tests/server-side-rendering/samples/component-data-dynamic/_config.js b/packages/svelte/tests/server-side-rendering/samples/component-data-dynamic/_config.js
new file mode 100644
index 000000000000..1fed95fa3aca
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/component-data-dynamic/_config.js
@@ -0,0 +1,12 @@
+import { test } from '../../test';
+
+export default test({
+ props: {
+ bar: 'lol',
+ x: 2,
+ compound: 'piece of',
+ go: {
+ deeper: 'core'
+ }
+ }
+});
diff --git a/packages/svelte/test/server-side-rendering/samples/component-data-dynamic/_expected.html b/packages/svelte/tests/server-side-rendering/samples/component-data-dynamic/_expected.html
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/component-data-dynamic/_expected.html
rename to packages/svelte/tests/server-side-rendering/samples/component-data-dynamic/_expected.html
diff --git a/packages/svelte/test/server-side-rendering/samples/component-data-dynamic/main.svelte b/packages/svelte/tests/server-side-rendering/samples/component-data-dynamic/main.svelte
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/component-data-dynamic/main.svelte
rename to packages/svelte/tests/server-side-rendering/samples/component-data-dynamic/main.svelte
diff --git a/packages/svelte/test/server-side-rendering/samples/component-data-empty/Widget.svelte b/packages/svelte/tests/server-side-rendering/samples/component-data-empty/Widget.svelte
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/component-data-empty/Widget.svelte
rename to packages/svelte/tests/server-side-rendering/samples/component-data-empty/Widget.svelte
diff --git a/packages/svelte/test/server-side-rendering/samples/component-data-empty/_expected.html b/packages/svelte/tests/server-side-rendering/samples/component-data-empty/_expected.html
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/component-data-empty/_expected.html
rename to packages/svelte/tests/server-side-rendering/samples/component-data-empty/_expected.html
diff --git a/packages/svelte/test/server-side-rendering/samples/component-data-empty/main.svelte b/packages/svelte/tests/server-side-rendering/samples/component-data-empty/main.svelte
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/component-data-empty/main.svelte
rename to packages/svelte/tests/server-side-rendering/samples/component-data-empty/main.svelte
diff --git a/packages/svelte/test/server-side-rendering/samples/component-refs-and-attributes/Widget.svelte b/packages/svelte/tests/server-side-rendering/samples/component-refs-and-attributes/Widget.svelte
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/component-refs-and-attributes/Widget.svelte
rename to packages/svelte/tests/server-side-rendering/samples/component-refs-and-attributes/Widget.svelte
diff --git a/packages/svelte/test/server-side-rendering/samples/component-refs-and-attributes/_expected.html b/packages/svelte/tests/server-side-rendering/samples/component-refs-and-attributes/_expected.html
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/component-refs-and-attributes/_expected.html
rename to packages/svelte/tests/server-side-rendering/samples/component-refs-and-attributes/_expected.html
diff --git a/packages/svelte/test/server-side-rendering/samples/component-refs-and-attributes/main.svelte b/packages/svelte/tests/server-side-rendering/samples/component-refs-and-attributes/main.svelte
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/component-refs-and-attributes/main.svelte
rename to packages/svelte/tests/server-side-rendering/samples/component-refs-and-attributes/main.svelte
diff --git a/packages/svelte/test/server-side-rendering/samples/component-refs/Widget.svelte b/packages/svelte/tests/server-side-rendering/samples/component-refs/Widget.svelte
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/component-refs/Widget.svelte
rename to packages/svelte/tests/server-side-rendering/samples/component-refs/Widget.svelte
diff --git a/packages/svelte/test/server-side-rendering/samples/component-refs/_expected.html b/packages/svelte/tests/server-side-rendering/samples/component-refs/_expected.html
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/component-refs/_expected.html
rename to packages/svelte/tests/server-side-rendering/samples/component-refs/_expected.html
diff --git a/packages/svelte/test/server-side-rendering/samples/component-refs/main.svelte b/packages/svelte/tests/server-side-rendering/samples/component-refs/main.svelte
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/component-refs/main.svelte
rename to packages/svelte/tests/server-side-rendering/samples/component-refs/main.svelte
diff --git a/packages/svelte/test/server-side-rendering/samples/component-with-different-extension/Widget.svelte b/packages/svelte/tests/server-side-rendering/samples/component-with-different-extension/Widget.svelte
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/component-with-different-extension/Widget.svelte
rename to packages/svelte/tests/server-side-rendering/samples/component-with-different-extension/Widget.svelte
diff --git a/packages/svelte/test/server-side-rendering/samples/component-with-different-extension/_expected.html b/packages/svelte/tests/server-side-rendering/samples/component-with-different-extension/_expected.html
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/component-with-different-extension/_expected.html
rename to packages/svelte/tests/server-side-rendering/samples/component-with-different-extension/_expected.html
diff --git a/packages/svelte/test/server-side-rendering/samples/component-with-different-extension/main.svelte b/packages/svelte/tests/server-side-rendering/samples/component-with-different-extension/main.svelte
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/component-with-different-extension/main.svelte
rename to packages/svelte/tests/server-side-rendering/samples/component-with-different-extension/main.svelte
diff --git a/packages/svelte/test/server-side-rendering/samples/component-yield/Widget.svelte b/packages/svelte/tests/server-side-rendering/samples/component-yield/Widget.svelte
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/component-yield/Widget.svelte
rename to packages/svelte/tests/server-side-rendering/samples/component-yield/Widget.svelte
diff --git a/packages/svelte/test/server-side-rendering/samples/component-yield/_expected.html b/packages/svelte/tests/server-side-rendering/samples/component-yield/_expected.html
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/component-yield/_expected.html
rename to packages/svelte/tests/server-side-rendering/samples/component-yield/_expected.html
diff --git a/packages/svelte/test/server-side-rendering/samples/component-yield/main.svelte b/packages/svelte/tests/server-side-rendering/samples/component-yield/main.svelte
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/component-yield/main.svelte
rename to packages/svelte/tests/server-side-rendering/samples/component-yield/main.svelte
diff --git a/packages/svelte/test/server-side-rendering/samples/component/Widget.svelte b/packages/svelte/tests/server-side-rendering/samples/component/Widget.svelte
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/component/Widget.svelte
rename to packages/svelte/tests/server-side-rendering/samples/component/Widget.svelte
diff --git a/packages/svelte/test/server-side-rendering/samples/component/_expected.html b/packages/svelte/tests/server-side-rendering/samples/component/_expected.html
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/component/_expected.html
rename to packages/svelte/tests/server-side-rendering/samples/component/_expected.html
diff --git a/packages/svelte/test/server-side-rendering/samples/component/main.svelte b/packages/svelte/tests/server-side-rendering/samples/component/main.svelte
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/component/main.svelte
rename to packages/svelte/tests/server-side-rendering/samples/component/main.svelte
diff --git a/packages/svelte/tests/server-side-rendering/samples/computed/_config.js b/packages/svelte/tests/server-side-rendering/samples/computed/_config.js
new file mode 100644
index 000000000000..1a7db6ae1054
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/computed/_config.js
@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+ props: {
+ a: 1,
+ b: 2
+ }
+});
diff --git a/packages/svelte/test/server-side-rendering/samples/computed/_expected.html b/packages/svelte/tests/server-side-rendering/samples/computed/_expected.html
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/computed/_expected.html
rename to packages/svelte/tests/server-side-rendering/samples/computed/_expected.html
diff --git a/packages/svelte/test/server-side-rendering/samples/computed/main.svelte b/packages/svelte/tests/server-side-rendering/samples/computed/main.svelte
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/computed/main.svelte
rename to packages/svelte/tests/server-side-rendering/samples/computed/main.svelte
diff --git a/packages/svelte/test/runtime/samples/constructor-prefer-passed-context/ChildComponent.svelte b/packages/svelte/tests/server-side-rendering/samples/constructor-prefer-passed-context/ChildComponent.svelte
similarity index 100%
rename from packages/svelte/test/runtime/samples/constructor-prefer-passed-context/ChildComponent.svelte
rename to packages/svelte/tests/server-side-rendering/samples/constructor-prefer-passed-context/ChildComponent.svelte
diff --git a/packages/svelte/tests/server-side-rendering/samples/constructor-prefer-passed-context/_config.js b/packages/svelte/tests/server-side-rendering/samples/constructor-prefer-passed-context/_config.js
new file mode 100644
index 000000000000..f47bee71df87
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/constructor-prefer-passed-context/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({});
diff --git a/packages/svelte/tests/server-side-rendering/samples/constructor-prefer-passed-context/_expected.html b/packages/svelte/tests/server-side-rendering/samples/constructor-prefer-passed-context/_expected.html
new file mode 100644
index 000000000000..1eafd7069740
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/constructor-prefer-passed-context/_expected.html
@@ -0,0 +1 @@
+Value in child component:
{@html content}
diff --git a/packages/svelte/tests/server-side-rendering/samples/default-data-override/_config.js b/packages/svelte/tests/server-side-rendering/samples/default-data-override/_config.js
new file mode 100644
index 000000000000..88368f751bee
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/default-data-override/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+ props: {
+ foo: 2
+ }
+});
diff --git a/packages/svelte/test/server-side-rendering/samples/default-data-override/_expected.html b/packages/svelte/tests/server-side-rendering/samples/default-data-override/_expected.html
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/default-data-override/_expected.html
rename to packages/svelte/tests/server-side-rendering/samples/default-data-override/_expected.html
diff --git a/packages/svelte/test/server-side-rendering/samples/default-data-override/main.svelte b/packages/svelte/tests/server-side-rendering/samples/default-data-override/main.svelte
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/default-data-override/main.svelte
rename to packages/svelte/tests/server-side-rendering/samples/default-data-override/main.svelte
diff --git a/packages/svelte/test/server-side-rendering/samples/default-data/_expected.html b/packages/svelte/tests/server-side-rendering/samples/default-data/_expected.html
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/default-data/_expected.html
rename to packages/svelte/tests/server-side-rendering/samples/default-data/_expected.html
diff --git a/packages/svelte/test/server-side-rendering/samples/default-data/main.svelte b/packages/svelte/tests/server-side-rendering/samples/default-data/main.svelte
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/default-data/main.svelte
rename to packages/svelte/tests/server-side-rendering/samples/default-data/main.svelte
diff --git a/packages/svelte/test/server-side-rendering/samples/directives/_expected.html b/packages/svelte/tests/server-side-rendering/samples/directives/_expected.html
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/directives/_expected.html
rename to packages/svelte/tests/server-side-rendering/samples/directives/_expected.html
diff --git a/packages/svelte/test/server-side-rendering/samples/directives/main.svelte b/packages/svelte/tests/server-side-rendering/samples/directives/main.svelte
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/directives/main.svelte
rename to packages/svelte/tests/server-side-rendering/samples/directives/main.svelte
diff --git a/packages/svelte/tests/server-side-rendering/samples/dynamic-element-string/_config.js b/packages/svelte/tests/server-side-rendering/samples/dynamic-element-string/_config.js
new file mode 100644
index 000000000000..f47bee71df87
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/dynamic-element-string/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({});
diff --git a/packages/svelte/test/server-side-rendering/samples/dynamic-element-string/_expected.html b/packages/svelte/tests/server-side-rendering/samples/dynamic-element-string/_expected.html
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/dynamic-element-string/_expected.html
rename to packages/svelte/tests/server-side-rendering/samples/dynamic-element-string/_expected.html
diff --git a/packages/svelte/test/server-side-rendering/samples/dynamic-element-string/main.svelte b/packages/svelte/tests/server-side-rendering/samples/dynamic-element-string/main.svelte
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/dynamic-element-string/main.svelte
rename to packages/svelte/tests/server-side-rendering/samples/dynamic-element-string/main.svelte
diff --git a/packages/svelte/tests/server-side-rendering/samples/dynamic-element-variable/_config.js b/packages/svelte/tests/server-side-rendering/samples/dynamic-element-variable/_config.js
new file mode 100644
index 000000000000..f47bee71df87
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/dynamic-element-variable/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({});
diff --git a/packages/svelte/test/server-side-rendering/samples/dynamic-element-variable/_expected.html b/packages/svelte/tests/server-side-rendering/samples/dynamic-element-variable/_expected.html
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/dynamic-element-variable/_expected.html
rename to packages/svelte/tests/server-side-rendering/samples/dynamic-element-variable/_expected.html
diff --git a/packages/svelte/test/server-side-rendering/samples/dynamic-element-variable/main.svelte b/packages/svelte/tests/server-side-rendering/samples/dynamic-element-variable/main.svelte
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/dynamic-element-variable/main.svelte
rename to packages/svelte/tests/server-side-rendering/samples/dynamic-element-variable/main.svelte
diff --git a/packages/svelte/tests/server-side-rendering/samples/dynamic-text-escaped/_config.js b/packages/svelte/tests/server-side-rendering/samples/dynamic-text-escaped/_config.js
new file mode 100644
index 000000000000..cb4ad22b0e1d
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/dynamic-text-escaped/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+ props: {
+ foo: "this should be escaped & so should 'this'
"
+ }
+});
diff --git a/packages/svelte/test/server-side-rendering/samples/dynamic-text-escaped/_expected.html b/packages/svelte/tests/server-side-rendering/samples/dynamic-text-escaped/_expected.html
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/dynamic-text-escaped/_expected.html
rename to packages/svelte/tests/server-side-rendering/samples/dynamic-text-escaped/_expected.html
diff --git a/packages/svelte/test/server-side-rendering/samples/dynamic-text-escaped/main.svelte b/packages/svelte/tests/server-side-rendering/samples/dynamic-text-escaped/main.svelte
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/dynamic-text-escaped/main.svelte
rename to packages/svelte/tests/server-side-rendering/samples/dynamic-text-escaped/main.svelte
diff --git a/packages/svelte/tests/server-side-rendering/samples/dynamic-text/_config.js b/packages/svelte/tests/server-side-rendering/samples/dynamic-text/_config.js
new file mode 100644
index 000000000000..d7918ca76b57
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/dynamic-text/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+ props: {
+ foo: 'it works'
+ }
+});
diff --git a/packages/svelte/test/server-side-rendering/samples/dynamic-text/_expected.html b/packages/svelte/tests/server-side-rendering/samples/dynamic-text/_expected.html
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/dynamic-text/_expected.html
rename to packages/svelte/tests/server-side-rendering/samples/dynamic-text/_expected.html
diff --git a/packages/svelte/test/server-side-rendering/samples/dynamic-text/main.svelte b/packages/svelte/tests/server-side-rendering/samples/dynamic-text/main.svelte
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/dynamic-text/main.svelte
rename to packages/svelte/tests/server-side-rendering/samples/dynamic-text/main.svelte
diff --git a/packages/svelte/tests/server-side-rendering/samples/each-block/_config.js b/packages/svelte/tests/server-side-rendering/samples/each-block/_config.js
new file mode 100644
index 000000000000..fb32fdd44656
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/each-block/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+ props: {
+ animals: ['alligator', 'beetle', 'cuckoo']
+ }
+});
diff --git a/packages/svelte/test/server-side-rendering/samples/each-block/_expected.html b/packages/svelte/tests/server-side-rendering/samples/each-block/_expected.html
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/each-block/_expected.html
rename to packages/svelte/tests/server-side-rendering/samples/each-block/_expected.html
diff --git a/packages/svelte/test/server-side-rendering/samples/each-block/main.svelte b/packages/svelte/tests/server-side-rendering/samples/each-block/main.svelte
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/each-block/main.svelte
rename to packages/svelte/tests/server-side-rendering/samples/each-block/main.svelte
diff --git a/packages/svelte/test/server-side-rendering/samples/empty-elements-closed/_expected.html b/packages/svelte/tests/server-side-rendering/samples/empty-elements-closed/_expected.html
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/empty-elements-closed/_expected.html
rename to packages/svelte/tests/server-side-rendering/samples/empty-elements-closed/_expected.html
diff --git a/packages/svelte/test/server-side-rendering/samples/empty-elements-closed/main.svelte b/packages/svelte/tests/server-side-rendering/samples/empty-elements-closed/main.svelte
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/empty-elements-closed/main.svelte
rename to packages/svelte/tests/server-side-rendering/samples/empty-elements-closed/main.svelte
diff --git a/packages/svelte/tests/server-side-rendering/samples/entities/_config.js b/packages/svelte/tests/server-side-rendering/samples/entities/_config.js
new file mode 100644
index 000000000000..7e9fee675e8f
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/entities/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+ props: {
+ foo: "it's working"
+ }
+});
diff --git a/packages/svelte/test/server-side-rendering/samples/entities/_expected.html b/packages/svelte/tests/server-side-rendering/samples/entities/_expected.html
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/entities/_expected.html
rename to packages/svelte/tests/server-side-rendering/samples/entities/_expected.html
diff --git a/packages/svelte/test/server-side-rendering/samples/entities/main.svelte b/packages/svelte/tests/server-side-rendering/samples/entities/main.svelte
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/entities/main.svelte
rename to packages/svelte/tests/server-side-rendering/samples/entities/main.svelte
diff --git a/packages/svelte/test/server-side-rendering/samples/head-html-and-component/HeadNested.svelte b/packages/svelte/tests/server-side-rendering/samples/head-html-and-component/HeadNested.svelte
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/head-html-and-component/HeadNested.svelte
rename to packages/svelte/tests/server-side-rendering/samples/head-html-and-component/HeadNested.svelte
diff --git a/packages/svelte/test/server-side-rendering/samples/head-html-and-component/Nested.svelte b/packages/svelte/tests/server-side-rendering/samples/head-html-and-component/Nested.svelte
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/head-html-and-component/Nested.svelte
rename to packages/svelte/tests/server-side-rendering/samples/head-html-and-component/Nested.svelte
diff --git a/packages/svelte/tests/server-side-rendering/samples/head-html-and-component/_config.js b/packages/svelte/tests/server-side-rendering/samples/head-html-and-component/_config.js
new file mode 100644
index 000000000000..f47bee71df87
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/head-html-and-component/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({});
diff --git a/packages/svelte/tests/server-side-rendering/samples/head-html-and-component/_expected-head.html b/packages/svelte/tests/server-side-rendering/samples/head-html-and-component/_expected-head.html
new file mode 100644
index 000000000000..6b1188ac6e74
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/head-html-and-component/_expected-head.html
@@ -0,0 +1,16 @@
+
+
+Some Title
+Just a dummy page.
\ No newline at end of file
diff --git a/packages/svelte/test/server-side-rendering/samples/head-meta-hydrate-duplicate/main.svelte b/packages/svelte/tests/server-side-rendering/samples/head-meta-hydrate-duplicate/main.svelte
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/head-meta-hydrate-duplicate/main.svelte
rename to packages/svelte/tests/server-side-rendering/samples/head-meta-hydrate-duplicate/main.svelte
diff --git a/packages/svelte/test/server-side-rendering/samples/head-multiple-title/A.svelte b/packages/svelte/tests/server-side-rendering/samples/head-multiple-title/A.svelte
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/head-multiple-title/A.svelte
rename to packages/svelte/tests/server-side-rendering/samples/head-multiple-title/A.svelte
diff --git a/packages/svelte/test/server-side-rendering/samples/head-multiple-title/B.svelte b/packages/svelte/tests/server-side-rendering/samples/head-multiple-title/B.svelte
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/head-multiple-title/B.svelte
rename to packages/svelte/tests/server-side-rendering/samples/head-multiple-title/B.svelte
diff --git a/packages/svelte/tests/server-side-rendering/samples/head-multiple-title/_config.js b/packages/svelte/tests/server-side-rendering/samples/head-multiple-title/_config.js
new file mode 100644
index 000000000000..45054bbada2d
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/head-multiple-title/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+ props: { adjective: 'custom' }
+});
diff --git a/packages/svelte/test/server-side-rendering/samples/head-multiple-title/_expected-head.html b/packages/svelte/tests/server-side-rendering/samples/head-multiple-title/_expected-head.html
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/head-multiple-title/_expected-head.html
rename to packages/svelte/tests/server-side-rendering/samples/head-multiple-title/_expected-head.html
diff --git a/packages/svelte/test/server-side-rendering/samples/head-multiple-title/_expected.html b/packages/svelte/tests/server-side-rendering/samples/head-multiple-title/_expected.html
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/head-multiple-title/_expected.html
rename to packages/svelte/tests/server-side-rendering/samples/head-multiple-title/_expected.html
diff --git a/packages/svelte/test/server-side-rendering/samples/head-multiple-title/main.svelte b/packages/svelte/tests/server-side-rendering/samples/head-multiple-title/main.svelte
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/head-multiple-title/main.svelte
rename to packages/svelte/tests/server-side-rendering/samples/head-multiple-title/main.svelte
diff --git a/packages/svelte/tests/server-side-rendering/samples/head-no-duplicates-with-binding/Foo.svelte b/packages/svelte/tests/server-side-rendering/samples/head-no-duplicates-with-binding/Foo.svelte
new file mode 100644
index 000000000000..4897c0ed3b4a
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/head-no-duplicates-with-binding/Foo.svelte
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/head-no-duplicates-with-binding/_expected-head.html b/packages/svelte/tests/server-side-rendering/samples/head-no-duplicates-with-binding/_expected-head.html
new file mode 100644
index 000000000000..904fa1d9ebca
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/head-no-duplicates-with-binding/_expected-head.html
@@ -0,0 +1,4 @@
+
+
+
+
+a custom title
\ No newline at end of file
diff --git a/packages/svelte/test/server-side-rendering/samples/if-block-false/_expected.html b/packages/svelte/tests/server-side-rendering/samples/head-title/_expected.html
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/if-block-false/_expected.html
rename to packages/svelte/tests/server-side-rendering/samples/head-title/_expected.html
diff --git a/packages/svelte/test/server-side-rendering/samples/head-title/main.svelte b/packages/svelte/tests/server-side-rendering/samples/head-title/main.svelte
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/head-title/main.svelte
rename to packages/svelte/tests/server-side-rendering/samples/head-title/main.svelte
diff --git a/packages/svelte/test/server-side-rendering/samples/helpers/_expected.html b/packages/svelte/tests/server-side-rendering/samples/helpers/_expected.html
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/helpers/_expected.html
rename to packages/svelte/tests/server-side-rendering/samples/helpers/_expected.html
diff --git a/packages/svelte/test/server-side-rendering/samples/helpers/main.svelte b/packages/svelte/tests/server-side-rendering/samples/helpers/main.svelte
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/helpers/main.svelte
rename to packages/svelte/tests/server-side-rendering/samples/helpers/main.svelte
diff --git a/packages/svelte/tests/server-side-rendering/samples/if-block-false/_config.js b/packages/svelte/tests/server-side-rendering/samples/if-block-false/_config.js
new file mode 100644
index 000000000000..466cb4201c19
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/if-block-false/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+ props: {
+ foo: false
+ }
+});
diff --git a/packages/svelte/test/css/samples/empty-class/expected.css b/packages/svelte/tests/server-side-rendering/samples/if-block-false/_expected.html
similarity index 100%
rename from packages/svelte/test/css/samples/empty-class/expected.css
rename to packages/svelte/tests/server-side-rendering/samples/if-block-false/_expected.html
diff --git a/packages/svelte/test/server-side-rendering/samples/if-block-false/main.svelte b/packages/svelte/tests/server-side-rendering/samples/if-block-false/main.svelte
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/if-block-false/main.svelte
rename to packages/svelte/tests/server-side-rendering/samples/if-block-false/main.svelte
diff --git a/packages/svelte/tests/server-side-rendering/samples/if-block-true/_config.js b/packages/svelte/tests/server-side-rendering/samples/if-block-true/_config.js
new file mode 100644
index 000000000000..e817c8198385
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/if-block-true/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+ props: {
+ foo: true
+ }
+});
diff --git a/packages/svelte/test/server-side-rendering/samples/if-block-true/_expected.html b/packages/svelte/tests/server-side-rendering/samples/if-block-true/_expected.html
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/if-block-true/_expected.html
rename to packages/svelte/tests/server-side-rendering/samples/if-block-true/_expected.html
diff --git a/packages/svelte/test/server-side-rendering/samples/if-block-true/main.svelte b/packages/svelte/tests/server-side-rendering/samples/if-block-true/main.svelte
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/if-block-true/main.svelte
rename to packages/svelte/tests/server-side-rendering/samples/if-block-true/main.svelte
diff --git a/packages/svelte/test/server-side-rendering/samples/import-non-component/_expected.html b/packages/svelte/tests/server-side-rendering/samples/import-non-component/_expected.html
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/import-non-component/_expected.html
rename to packages/svelte/tests/server-side-rendering/samples/import-non-component/_expected.html
diff --git a/packages/svelte/test/server-side-rendering/samples/import-non-component/answer.js b/packages/svelte/tests/server-side-rendering/samples/import-non-component/answer.js
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/import-non-component/answer.js
rename to packages/svelte/tests/server-side-rendering/samples/import-non-component/answer.js
diff --git a/packages/svelte/test/server-side-rendering/samples/import-non-component/main.svelte b/packages/svelte/tests/server-side-rendering/samples/import-non-component/main.svelte
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/import-non-component/main.svelte
rename to packages/svelte/tests/server-side-rendering/samples/import-non-component/main.svelte
diff --git a/packages/svelte/test/server-side-rendering/samples/import-non-component/problems.js b/packages/svelte/tests/server-side-rendering/samples/import-non-component/problems.js
similarity index 100%
rename from packages/svelte/test/server-side-rendering/samples/import-non-component/problems.js
rename to packages/svelte/tests/server-side-rendering/samples/import-non-component/problems.js
diff --git a/packages/svelte/tests/server-side-rendering/samples/raw-mustaches/_config.js b/packages/svelte/tests/server-side-rendering/samples/raw-mustaches/_config.js
new file mode 100644
index 000000000000..42b52503532a
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/raw-mustaches/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+ props: {
+ raw: 'raw html!!!\\o/ ;
+ props?: Record;
+ withoutNormalizeHtml?: boolean;
+}
+
+const { test, run } = suite(async (config, test_dir) => {
+ compile_directory(test_dir, 'server', config.compileOptions);
+
+ const Component = (await import(`${test_dir}/_output/server/main.svelte.js`)).default;
+ const expected_html = try_read_file(`${test_dir}/_expected.html`);
+ const rendered = render(Component, { props: config.props || {} });
+ const { html, head } = rendered;
+
+ fs.writeFileSync(`${test_dir}/_actual.html`, html);
+
+ try {
+ assert_html_equal_with_options(html, expected_html || '', {
+ preserveComments: config.compileOptions?.preserveComments,
+ withoutNormalizeHtml: config.withoutNormalizeHtml
+ });
+ } catch (error: any) {
+ if (should_update_expected()) {
+ fs.writeFileSync(`${test_dir}/_expected.html`, html);
+ console.log(`Updated ${test_dir}/_expected.html.`);
+ } else {
+ error.message += '\n' + `${test_dir}/main.svelte`;
+ throw error;
+ }
+ }
+
+ if (fs.existsSync(`${test_dir}/_expected-head.html`)) {
+ fs.writeFileSync(`${test_dir}/_actual-head.html`, head);
+
+ try {
+ assert_html_equal_with_options(
+ head,
+ fs.readFileSync(`${test_dir}/_expected-head.html`, 'utf-8'),
+ {}
+ );
+ } catch (error: any) {
+ if (should_update_expected()) {
+ fs.writeFileSync(`${test_dir}/_expected-head.html`, head);
+ console.log(`Updated ${test_dir}/_expected-head.html.`);
+ error.message += '\n' + `${test_dir}/main.svelte`;
+ } else {
+ throw error;
+ }
+ }
+ }
+});
+
+export { test };
+
+await run(__dirname);
diff --git a/packages/svelte/tests/signals/test.ts b/packages/svelte/tests/signals/test.ts
new file mode 100644
index 000000000000..ab886d5651b0
--- /dev/null
+++ b/packages/svelte/tests/signals/test.ts
@@ -0,0 +1,149 @@
+import { describe, assert, it } from 'vitest';
+import * as $ from '../../src/internal/client/runtime';
+
+function run_test(runes: boolean, fn: () => void) {
+ return () => {
+ // Create a component context to test runes vs legacy mode
+ $.push({}, runes);
+ // Create a render context so that effect validations etc don't fail
+ const signal = $.render_effect(fn, null, true, true);
+ $.destroy_signal(signal);
+ $.pop();
+ };
+}
+
+function test(text: string, fn: () => any) {
+ it(`${text} (legacy mode)`, run_test(false, fn));
+ it(`${text} (runes mode)`, run_test(true, fn));
+}
+
+describe('signals', () => {
+ test('effect with state and derived in it', () => {
+ const log: string[] = [];
+
+ let count = $.source(0);
+ let double = $.derived(() => $.get(count) * 2);
+
+ $.effect(() => {
+ log.push(`${$.get(count)}:${$.get(double)}`);
+ });
+ $.flushSync(() => $.set(count, 1));
+ $.flushSync(() => $.set(count, 2));
+
+ assert.deepEqual(log, ['0:0', '1:2', '2:4']);
+ });
+
+ test('multiple effects with state and derived in it#1', () => {
+ const log: string[] = [];
+
+ let count = $.source(0);
+ let double = $.derived(() => $.get(count) * 2);
+
+ $.effect(() => {
+ log.push(`A:${$.get(count)}:${$.get(double)}`);
+ });
+ $.effect(() => {
+ log.push(`B:${$.get(double)}`);
+ });
+
+ $.flushSync(() => $.set(count, 1));
+ $.flushSync(() => $.set(count, 2));
+
+ assert.deepEqual(log, ['A:0:0', 'B:0', 'A:1:2', 'B:2', 'A:2:4', 'B:4']);
+ });
+
+ test('multiple effects with state and derived in it#2', () => {
+ const log: string[] = [];
+
+ let count = $.source(0);
+ let double = $.derived(() => $.get(count) * 2);
+
+ $.effect(() => {
+ log.push(`A:${$.get(double)}`);
+ });
+ $.effect(() => {
+ log.push(`B:${$.get(count)}:${$.get(double)}`);
+ });
+
+ $.flushSync(() => $.set(count, 1));
+ $.flushSync(() => $.set(count, 2));
+
+ assert.deepEqual(log, ['A:0', 'B:0:0', 'A:2', 'B:1:2', 'A:4', 'B:2:4']);
+ });
+
+ test('derived from state', () => {
+ const log: number[] = [];
+
+ let count = $.source(0);
+ let double = $.derived(() => $.get(count) * 2);
+
+ $.effect(() => {
+ log.push($.get(double));
+ });
+ $.flushSync(() => $.set(count, 1));
+ $.flushSync(() => $.set(count, 2));
+
+ assert.deepEqual(log, [0, 2, 4]);
+ });
+
+ test('derived from derived', () => {
+ const log: number[] = [];
+
+ let count = $.source(0);
+ let double = $.derived(() => $.get(count) * 2);
+ let quadruple = $.derived(() => $.get(double) * 2);
+
+ $.effect(() => {
+ log.push($.get(quadruple));
+ });
+ $.flushSync(() => $.set(count, 1));
+ $.flushSync(() => $.set(count, 2));
+
+ assert.deepEqual(log, [0, 4, 8]);
+ });
+
+ test('https://perf.js.hyoo.ru/#!bench=9h2as6_u0mfnn', () => {
+ let res: number[] = [];
+
+ const numbers = Array.from({ length: 2 }, (_, i) => i);
+ const fib = (n: number): number => (n < 2 ? 1 : fib(n - 1) + fib(n - 2));
+ const hard = (n: number, l: string) => n + fib(16);
+
+ const A = $.source(0);
+ const B = $.source(0);
+ const C = $.derived(() => ($.get(A) % 2) + ($.get(B) % 2));
+ const D = $.derived(
+ () => numbers.map((i) => i + ($.get(A) % 2) - ($.get(B) % 2)),
+ (l: number[], r: number[]) => l.length === r.length && l.every((v, i) => v === r[i])
+ );
+ const E = $.derived(() => hard($.get(C) + $.get(A) + $.get(D)[0]!, 'E'));
+ const F = $.derived(() => hard($.get(D)[0]! && $.get(B), 'F'));
+ const G = $.derived(() => $.get(C) + ($.get(C) || $.get(E) % 2) + $.get(D)[0]! + $.get(F));
+ let H = $.effect(() => {
+ res.push(hard($.get(G), 'H'));
+ });
+ let I = $.effect(() => {
+ res.push($.get(G));
+ });
+ let J = $.effect(() => {
+ res.push(hard($.get(F), 'J'));
+ });
+
+ $.flushSync();
+
+ let i = 2;
+ while (--i) {
+ res.length = 0;
+ $.set(B, 1);
+ $.set(A, 1 + i * 2);
+ $.flushSync();
+
+ $.set(A, 2 + i * 2);
+ $.set(B, 2);
+ $.flushSync();
+
+ assert.equal(res.length, 4);
+ assert.deepEqual(res, [3198, 1601, 3195, 1598]);
+ }
+ });
+});
diff --git a/packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/_config.js b/packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/_config.js
new file mode 100644
index 000000000000..f47bee71df87
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({});
diff --git a/packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/_expected/client/index.svelte.js
new file mode 100644
index 000000000000..836fd0ed0827
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/_expected/client/index.svelte.js
@@ -0,0 +1,29 @@
+// index.svelte (Svelte VERSION)
+// Note: compiler output will change before 5.0 is released!
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal";
+
+export default function Class_state_field_constructor_assignment($$anchor, $$props) {
+ $.push($$props, true);
+
+ class Foo {
+ #a = $.source();
+
+ get a() {
+ return $.get(this.#a);
+ }
+
+ set a(value) {
+ $.set(this.#a, value);
+ }
+
+ #b = $.source();
+
+ constructor() {
+ this.#a.v = 1;
+ this.#b.v = 2;
+ }
+ }
+
+ $.pop();
+}
diff --git a/packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/_expected/server/index.svelte.js
new file mode 100644
index 000000000000..6ba11ebb1619
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/_expected/server/index.svelte.js
@@ -0,0 +1,19 @@
+// index.svelte (Svelte VERSION)
+// Note: compiler output will change before 5.0 is released!
+import * as $ from "svelte/internal/server";
+
+export default function Class_state_field_constructor_assignment($$payload, $$props) {
+ $.push(true);
+
+ class Foo {
+ a;
+ #b;
+
+ constructor() {
+ this.a = 1;
+ this.#b = 2;
+ }
+ }
+
+ $.pop();
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/index.svelte b/packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/index.svelte
new file mode 100644
index 000000000000..a3ff5917e77f
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/index.svelte
@@ -0,0 +1,11 @@
+
diff --git a/packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/client/main.svelte.js b/packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/client/main.svelte.js
new file mode 100644
index 000000000000..6f53521673fb
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/client/main.svelte.js
@@ -0,0 +1,48 @@
+// main.svelte (Svelte VERSION)
+// Note: compiler output will change before 5.0 is released!
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal";
+
+var frag = $.template(`