mirror of https://github.com/sveltejs/svelte
Rich Harris
2 years ago
commit
bdf894607f
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"svelte": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix: correct start of `{:else if}` and `{:else}`
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'svelte': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix: reorder reactive statements during migration
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'svelte': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
breaking: play transitions on `mount` by default
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'svelte': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix: make `<select>` `<option value>` behavior consistent
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'svelte': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
chore: stricter control flow syntax validation in runes mode
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'svelte': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix: resolve legacy component props equality for mutations
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'svelte': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
chore: align warning and error objects, add frame property
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'svelte': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix: reconnected deep derived signals to graph
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'svelte': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix: make `$state` component exports settable
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'svelte': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix: ensure `$effect.root` is ignored on the server
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'svelte': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix: enable local transitions on `svelte:element`
|
||||||
@ -0,0 +1,105 @@
|
|||||||
|
/** @import { Location } from 'locate-character' */
|
||||||
|
import * as state from '../state.js';
|
||||||
|
|
||||||
|
const regex_tabs = /^\t+/;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {string} str
|
||||||
|
*/
|
||||||
|
function tabs_to_spaces(str) {
|
||||||
|
return str.replace(regex_tabs, (match) => match.split('\t').join(' '));
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {string} source
|
||||||
|
* @param {number} line
|
||||||
|
* @param {number} column
|
||||||
|
*/
|
||||||
|
function get_code_frame(source, line, column) {
|
||||||
|
const lines = source.split('\n');
|
||||||
|
const frame_start = Math.max(0, line - 2);
|
||||||
|
const frame_end = Math.min(line + 3, lines.length);
|
||||||
|
const digits = String(frame_end + 1).length;
|
||||||
|
return lines
|
||||||
|
.slice(frame_start, frame_end)
|
||||||
|
.map((str, i) => {
|
||||||
|
const is_error_line = frame_start + i === line;
|
||||||
|
const line_num = String(i + frame_start + 1).padStart(digits, ' ');
|
||||||
|
if (is_error_line) {
|
||||||
|
const indicator =
|
||||||
|
' '.repeat(digits + 2 + tabs_to_spaces(str.slice(0, column)).length) + '^';
|
||||||
|
return `${line_num}: ${tabs_to_spaces(str)}\n${indicator}`;
|
||||||
|
}
|
||||||
|
return `${line_num}: ${tabs_to_spaces(str)}`;
|
||||||
|
})
|
||||||
|
.join('\n');
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @typedef {{
|
||||||
|
* code: string;
|
||||||
|
* message: string;
|
||||||
|
* filename?: string;
|
||||||
|
* start?: Location;
|
||||||
|
* end?: Location;
|
||||||
|
* position?: [number, number];
|
||||||
|
* frame?: string;
|
||||||
|
* }} ICompileDiagnostic */
|
||||||
|
|
||||||
|
/** @implements {ICompileDiagnostic} */
|
||||||
|
export class CompileDiagnostic extends Error {
|
||||||
|
name = 'CompileDiagnostic';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {string} code
|
||||||
|
* @param {string} message
|
||||||
|
* @param {[number, number] | undefined} position
|
||||||
|
*/
|
||||||
|
constructor(code, message, position) {
|
||||||
|
super(message);
|
||||||
|
this.code = code;
|
||||||
|
|
||||||
|
if (state.filename) {
|
||||||
|
this.filename = state.filename;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (position) {
|
||||||
|
this.position = position;
|
||||||
|
this.start = state.locator(position[0]);
|
||||||
|
this.end = state.locator(position[1]);
|
||||||
|
if (this.start && this.end) {
|
||||||
|
this.frame = get_code_frame(state.source, this.start.line - 1, this.end.column);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
toString() {
|
||||||
|
let out = `${this.code}: ${this.message}`;
|
||||||
|
|
||||||
|
if (this.filename) {
|
||||||
|
out += `\n${this.filename}`;
|
||||||
|
|
||||||
|
if (this.start) {
|
||||||
|
out += `:${this.start.line}:${this.start.column}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.frame) {
|
||||||
|
out += `\n${this.frame}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
return out;
|
||||||
|
}
|
||||||
|
|
||||||
|
toJSON() {
|
||||||
|
return {
|
||||||
|
code: this.code,
|
||||||
|
message: this.message,
|
||||||
|
filename: this.filename,
|
||||||
|
start: this.start,
|
||||||
|
end: this.end,
|
||||||
|
position: this.position,
|
||||||
|
frame: this.frame
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
import { hydrate_next, hydrating } from '../hydration.js';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {Comment} anchor
|
||||||
|
* @param {void | ((anchor: Comment, slot_props: Record<string, unknown>) => void)} slot_fn
|
||||||
|
* @param {Record<string, unknown>} slot_props
|
||||||
|
* @param {null | ((anchor: Comment) => void)} fallback_fn
|
||||||
|
*/
|
||||||
|
export function slot(anchor, slot_fn, slot_props, fallback_fn) {
|
||||||
|
if (hydrating) {
|
||||||
|
hydrate_next();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (slot_fn === undefined) {
|
||||||
|
if (fallback_fn !== null) {
|
||||||
|
fallback_fn(anchor);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
slot_fn(anchor, slot_props);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
<script>
|
||||||
|
$: mobile = width < 640;
|
||||||
|
$: x = !mobile;
|
||||||
|
let width = 0;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{width / mobile / x}
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
<script>
|
||||||
|
let width = 0;
|
||||||
|
let mobile = $derived(width < 640);
|
||||||
|
let x = $derived(!mobile);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{width / mobile / x}
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
<script>
|
||||||
|
let width = 0;
|
||||||
|
$: console.log(mobile);
|
||||||
|
$: mobile = width < 640;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{width / mobile}
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
<script>
|
||||||
|
import { run } from 'svelte/legacy';
|
||||||
|
|
||||||
|
let width = 0;
|
||||||
|
let mobile = $derived(width < 640);
|
||||||
|
run(() => {
|
||||||
|
console.log(mobile);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{width / mobile}
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
{#if foo}
|
||||||
|
<p>foo</p>
|
||||||
|
{:else}
|
||||||
|
<p>not foo</p>
|
||||||
|
{/if}
|
||||||
@ -0,0 +1,116 @@
|
|||||||
|
{
|
||||||
|
"css": null,
|
||||||
|
"js": [],
|
||||||
|
"start": 0,
|
||||||
|
"end": 51,
|
||||||
|
"type": "Root",
|
||||||
|
"fragment": {
|
||||||
|
"type": "Fragment",
|
||||||
|
"nodes": [
|
||||||
|
{
|
||||||
|
"type": "IfBlock",
|
||||||
|
"elseif": false,
|
||||||
|
"start": 0,
|
||||||
|
"end": 51,
|
||||||
|
"test": {
|
||||||
|
"type": "Identifier",
|
||||||
|
"start": 5,
|
||||||
|
"end": 8,
|
||||||
|
"loc": {
|
||||||
|
"start": {
|
||||||
|
"line": 1,
|
||||||
|
"column": 5
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"line": 1,
|
||||||
|
"column": 8
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"name": "foo"
|
||||||
|
},
|
||||||
|
"consequent": {
|
||||||
|
"type": "Fragment",
|
||||||
|
"nodes": [
|
||||||
|
{
|
||||||
|
"type": "Text",
|
||||||
|
"start": 9,
|
||||||
|
"end": 11,
|
||||||
|
"raw": "\n\t",
|
||||||
|
"data": "\n\t"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "RegularElement",
|
||||||
|
"start": 11,
|
||||||
|
"end": 21,
|
||||||
|
"name": "p",
|
||||||
|
"attributes": [],
|
||||||
|
"fragment": {
|
||||||
|
"type": "Fragment",
|
||||||
|
"nodes": [
|
||||||
|
{
|
||||||
|
"type": "Text",
|
||||||
|
"start": 14,
|
||||||
|
"end": 17,
|
||||||
|
"raw": "foo",
|
||||||
|
"data": "foo"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"transparent": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "Text",
|
||||||
|
"start": 21,
|
||||||
|
"end": 22,
|
||||||
|
"raw": "\n",
|
||||||
|
"data": "\n"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"transparent": false
|
||||||
|
},
|
||||||
|
"alternate": {
|
||||||
|
"type": "Fragment",
|
||||||
|
"nodes": [
|
||||||
|
{
|
||||||
|
"type": "Text",
|
||||||
|
"start": 29,
|
||||||
|
"end": 31,
|
||||||
|
"raw": "\n\t",
|
||||||
|
"data": "\n\t"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "RegularElement",
|
||||||
|
"start": 31,
|
||||||
|
"end": 45,
|
||||||
|
"name": "p",
|
||||||
|
"attributes": [],
|
||||||
|
"fragment": {
|
||||||
|
"type": "Fragment",
|
||||||
|
"nodes": [
|
||||||
|
{
|
||||||
|
"type": "Text",
|
||||||
|
"start": 34,
|
||||||
|
"end": 41,
|
||||||
|
"raw": "not foo",
|
||||||
|
"data": "not foo"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"transparent": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "Text",
|
||||||
|
"start": 45,
|
||||||
|
"end": 46,
|
||||||
|
"raw": "\n",
|
||||||
|
"data": "\n"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"transparent": false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"transparent": false
|
||||||
|
},
|
||||||
|
"options": null
|
||||||
|
}
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
{#if x > 10}
|
||||||
|
<p>x is greater than 10</p>
|
||||||
|
{:else if x < 5}
|
||||||
|
<p>x is less than 5</p>
|
||||||
|
{/if}
|
||||||
@ -0,0 +1,211 @@
|
|||||||
|
{
|
||||||
|
"css": null,
|
||||||
|
"js": [],
|
||||||
|
"start": 0,
|
||||||
|
"end": 89,
|
||||||
|
"type": "Root",
|
||||||
|
"fragment": {
|
||||||
|
"type": "Fragment",
|
||||||
|
"nodes": [
|
||||||
|
{
|
||||||
|
"type": "IfBlock",
|
||||||
|
"elseif": false,
|
||||||
|
"start": 0,
|
||||||
|
"end": 89,
|
||||||
|
"test": {
|
||||||
|
"type": "BinaryExpression",
|
||||||
|
"start": 5,
|
||||||
|
"end": 11,
|
||||||
|
"loc": {
|
||||||
|
"start": {
|
||||||
|
"line": 1,
|
||||||
|
"column": 5
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"line": 1,
|
||||||
|
"column": 11
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"left": {
|
||||||
|
"type": "Identifier",
|
||||||
|
"start": 5,
|
||||||
|
"end": 6,
|
||||||
|
"loc": {
|
||||||
|
"start": {
|
||||||
|
"line": 1,
|
||||||
|
"column": 5
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"line": 1,
|
||||||
|
"column": 6
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"name": "x"
|
||||||
|
},
|
||||||
|
"operator": ">",
|
||||||
|
"right": {
|
||||||
|
"type": "Literal",
|
||||||
|
"start": 9,
|
||||||
|
"end": 11,
|
||||||
|
"loc": {
|
||||||
|
"start": {
|
||||||
|
"line": 1,
|
||||||
|
"column": 9
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"line": 1,
|
||||||
|
"column": 11
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"value": 10,
|
||||||
|
"raw": "10"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"consequent": {
|
||||||
|
"type": "Fragment",
|
||||||
|
"nodes": [
|
||||||
|
{
|
||||||
|
"type": "Text",
|
||||||
|
"start": 12,
|
||||||
|
"end": 14,
|
||||||
|
"raw": "\n\t",
|
||||||
|
"data": "\n\t"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "RegularElement",
|
||||||
|
"start": 14,
|
||||||
|
"end": 41,
|
||||||
|
"name": "p",
|
||||||
|
"attributes": [],
|
||||||
|
"fragment": {
|
||||||
|
"type": "Fragment",
|
||||||
|
"nodes": [
|
||||||
|
{
|
||||||
|
"type": "Text",
|
||||||
|
"start": 17,
|
||||||
|
"end": 37,
|
||||||
|
"raw": "x is greater than 10",
|
||||||
|
"data": "x is greater than 10"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"transparent": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "Text",
|
||||||
|
"start": 41,
|
||||||
|
"end": 42,
|
||||||
|
"raw": "\n",
|
||||||
|
"data": "\n"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"transparent": false
|
||||||
|
},
|
||||||
|
"alternate": {
|
||||||
|
"type": "Fragment",
|
||||||
|
"nodes": [
|
||||||
|
{
|
||||||
|
"start": 42,
|
||||||
|
"end": 89,
|
||||||
|
"type": "IfBlock",
|
||||||
|
"elseif": true,
|
||||||
|
"test": {
|
||||||
|
"type": "BinaryExpression",
|
||||||
|
"start": 52,
|
||||||
|
"end": 57,
|
||||||
|
"loc": {
|
||||||
|
"start": {
|
||||||
|
"line": 3,
|
||||||
|
"column": 10
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"line": 3,
|
||||||
|
"column": 15
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"left": {
|
||||||
|
"type": "Identifier",
|
||||||
|
"start": 52,
|
||||||
|
"end": 53,
|
||||||
|
"loc": {
|
||||||
|
"start": {
|
||||||
|
"line": 3,
|
||||||
|
"column": 10
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"line": 3,
|
||||||
|
"column": 11
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"name": "x"
|
||||||
|
},
|
||||||
|
"operator": "<",
|
||||||
|
"right": {
|
||||||
|
"type": "Literal",
|
||||||
|
"start": 56,
|
||||||
|
"end": 57,
|
||||||
|
"loc": {
|
||||||
|
"start": {
|
||||||
|
"line": 3,
|
||||||
|
"column": 14
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"line": 3,
|
||||||
|
"column": 15
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"value": 5,
|
||||||
|
"raw": "5"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"consequent": {
|
||||||
|
"type": "Fragment",
|
||||||
|
"nodes": [
|
||||||
|
{
|
||||||
|
"type": "Text",
|
||||||
|
"start": 58,
|
||||||
|
"end": 60,
|
||||||
|
"raw": "\n\t",
|
||||||
|
"data": "\n\t"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "RegularElement",
|
||||||
|
"start": 60,
|
||||||
|
"end": 83,
|
||||||
|
"name": "p",
|
||||||
|
"attributes": [],
|
||||||
|
"fragment": {
|
||||||
|
"type": "Fragment",
|
||||||
|
"nodes": [
|
||||||
|
{
|
||||||
|
"type": "Text",
|
||||||
|
"start": 63,
|
||||||
|
"end": 79,
|
||||||
|
"raw": "x is less than 5",
|
||||||
|
"data": "x is less than 5"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"transparent": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "Text",
|
||||||
|
"start": 83,
|
||||||
|
"end": 84,
|
||||||
|
"raw": "\n",
|
||||||
|
"data": "\n"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"transparent": false
|
||||||
|
},
|
||||||
|
"alternate": null
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"transparent": false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"transparent": false
|
||||||
|
},
|
||||||
|
"options": null
|
||||||
|
}
|
||||||
@ -0,0 +1 @@
|
|||||||
|
{#if foo}bar{/if}
|
||||||
@ -0,0 +1,50 @@
|
|||||||
|
{
|
||||||
|
"css": null,
|
||||||
|
"js": [],
|
||||||
|
"start": 0,
|
||||||
|
"end": 17,
|
||||||
|
"type": "Root",
|
||||||
|
"fragment": {
|
||||||
|
"type": "Fragment",
|
||||||
|
"nodes": [
|
||||||
|
{
|
||||||
|
"type": "IfBlock",
|
||||||
|
"elseif": false,
|
||||||
|
"start": 0,
|
||||||
|
"end": 17,
|
||||||
|
"test": {
|
||||||
|
"type": "Identifier",
|
||||||
|
"start": 5,
|
||||||
|
"end": 8,
|
||||||
|
"loc": {
|
||||||
|
"start": {
|
||||||
|
"line": 1,
|
||||||
|
"column": 5
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"line": 1,
|
||||||
|
"column": 8
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"name": "foo"
|
||||||
|
},
|
||||||
|
"consequent": {
|
||||||
|
"type": "Fragment",
|
||||||
|
"nodes": [
|
||||||
|
{
|
||||||
|
"type": "Text",
|
||||||
|
"start": 9,
|
||||||
|
"end": 12,
|
||||||
|
"raw": "bar",
|
||||||
|
"data": "bar"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"transparent": false
|
||||||
|
},
|
||||||
|
"alternate": null
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"transparent": false
|
||||||
|
},
|
||||||
|
"options": null
|
||||||
|
}
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
get props() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
|
||||||
|
html: '',
|
||||||
|
|
||||||
|
async test({ assert, component, target }) {
|
||||||
|
await component.$set({ message: 'goodbye' });
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, '<p>goodbye</p>');
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
{#if 'message' in $$props}
|
||||||
|
<p>{$$props.message}</p>
|
||||||
|
{/if}
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
const data = {
|
||||||
|
message: 'hello'
|
||||||
|
};
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
get props() {
|
||||||
|
data.message = 'hello';
|
||||||
|
|
||||||
|
return {
|
||||||
|
data
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
html: '<p>hello</p>',
|
||||||
|
|
||||||
|
async test({ assert, component, target }) {
|
||||||
|
data.message = 'goodbye';
|
||||||
|
await component.$set({ data });
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, '<p>goodbye</p>');
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
<script>
|
||||||
|
export let data;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<p>{data.message}</p>
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
import { test } from '../../test';
|
||||||
|
import { flushSync } from 'svelte';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
async test({ assert, target, raf }) {
|
||||||
|
const btn = target.querySelector('button');
|
||||||
|
|
||||||
|
raf.tick(0);
|
||||||
|
btn?.click();
|
||||||
|
flushSync();
|
||||||
|
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`<button>Toggle</button> <div style="opacity: 0;">DIV</div>`
|
||||||
|
);
|
||||||
|
|
||||||
|
raf.tick(100);
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `<button>Toggle</button> <div style="">DIV</div>`);
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
<script>
|
||||||
|
import { fade } from 'svelte/transition';
|
||||||
|
|
||||||
|
let element = $state('div');
|
||||||
|
let show = $state(false);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button onclick={() => (show = !show)}>Toggle</button>
|
||||||
|
|
||||||
|
{#if show}
|
||||||
|
<svelte:element this={element} transition:fade={{ duration: 100 }}>DIV</svelte:element>
|
||||||
|
{/if}
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
import { flushSync } from 'svelte';
|
||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
html: '<button>cleanup</button>',
|
||||||
|
|
||||||
|
async test({ assert, target, logs }) {
|
||||||
|
const btn = target.querySelector('button');
|
||||||
|
|
||||||
|
btn?.click();
|
||||||
|
flushSync();
|
||||||
|
|
||||||
|
assert.deepEqual(logs, ['effect1', 'effect2']);
|
||||||
|
},
|
||||||
|
test_ssr({ assert, logs }) {
|
||||||
|
assert.deepEqual(logs, []);
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
<script>
|
||||||
|
$effect.root(() => {
|
||||||
|
console.log('effect1');
|
||||||
|
});
|
||||||
|
const cleanup = $effect.root(() => {
|
||||||
|
console.log('effect2');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button onclick={cleanup}>cleanup</button>
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
import { flushSync } from 'svelte';
|
||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
test({ assert, target }) {
|
||||||
|
assert.htmlEqual(target.innerHTML, `0 0 <button>0 / 0</button>`);
|
||||||
|
const btn = target.querySelector('button');
|
||||||
|
|
||||||
|
flushSync(() => btn?.click());
|
||||||
|
assert.htmlEqual(target.innerHTML, '1 2 <button>1 / 2</button>');
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
<script>
|
||||||
|
import Sub from './sub.svelte';
|
||||||
|
let sub = $state();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Sub bind:this={sub} />
|
||||||
|
<button on:click={() => sub.count++}>{sub?.count} / {sub?.doubled}</button>
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
<script>
|
||||||
|
let count = $state(0);
|
||||||
|
let doubled = $derived(count * 2);
|
||||||
|
|
||||||
|
export { count, doubled };
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{count}
|
||||||
|
{doubled}
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
<script>
|
||||||
|
import { fade } from 'svelte/transition';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div in:fade|global={{ duration: 100 }}>DIV</div>
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
import { flushSync } from 'svelte';
|
||||||
|
import { ok, test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
async test({ assert, target, raf }) {
|
||||||
|
const [btn1, btn2] = target.querySelectorAll('button');
|
||||||
|
const div = target.querySelector('div');
|
||||||
|
ok(div);
|
||||||
|
|
||||||
|
btn1.click();
|
||||||
|
flushSync();
|
||||||
|
assert.htmlEqual(div.innerHTML, `<div style="opacity: 0;">DIV</div>`);
|
||||||
|
|
||||||
|
raf.tick(100);
|
||||||
|
assert.htmlEqual(div.innerHTML, `<div style="">DIV</div>`);
|
||||||
|
|
||||||
|
btn2.click();
|
||||||
|
flushSync();
|
||||||
|
assert.htmlEqual(div.innerHTML, `<div>DIV</div>`);
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
<script>
|
||||||
|
import { mount, unmount } from 'svelte';
|
||||||
|
import Component from './Component.svelte';
|
||||||
|
|
||||||
|
let el;
|
||||||
|
let instance;
|
||||||
|
|
||||||
|
function intro(animate) {
|
||||||
|
if (instance) unmount(instance);
|
||||||
|
|
||||||
|
instance = mount(Component, {
|
||||||
|
target: el,
|
||||||
|
intro: animate
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div bind:this={el}></div>
|
||||||
|
|
||||||
|
<button onclick={() => intro()}>mount with intro transition</button>
|
||||||
|
<button onclick={() => intro(false)}>mount without intro transition</button>
|
||||||
@ -0,0 +1,32 @@
|
|||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
// <option value> is special because falsy values should result in an empty string value attribute
|
||||||
|
export default test({
|
||||||
|
mode: ['client'],
|
||||||
|
test({ assert, target }) {
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<select>
|
||||||
|
<option value="">Default</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<select>
|
||||||
|
<option value="">Default</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<select>
|
||||||
|
<option value="">Default</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<select>
|
||||||
|
<option value="">Default</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<select>
|
||||||
|
<option value="">Default</option>
|
||||||
|
</select>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
<script>
|
||||||
|
let nonreactive = undefined;
|
||||||
|
let reactive = $state();
|
||||||
|
let nonreactive_spread = { value: undefined };
|
||||||
|
let reactive_spread = $state({ value: undefined });
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<select>
|
||||||
|
<option value={undefined}>Default</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<select>
|
||||||
|
<option value={nonreactive}>Default</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<select>
|
||||||
|
<option value={reactive}>Default</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<select>
|
||||||
|
<option {...nonreactive_spread}>Default</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<select>
|
||||||
|
<option {...reactive_spread}>Default</option>
|
||||||
|
</select>
|
||||||
@ -0,0 +1 @@
|
|||||||
|
[]
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
<svelte:options runes={false} />
|
||||||
|
|
||||||
|
<!-- prettier-ignore -->
|
||||||
|
<div>
|
||||||
|
{ #if true}
|
||||||
|
<p>hi</p>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"code": "block_unexpected_character",
|
||||||
|
"message": "Expected a `#` character immediately following the opening bracket",
|
||||||
|
"start": {
|
||||||
|
"line": 5,
|
||||||
|
"column": 1
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"line": 5,
|
||||||
|
"column": 6
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
<svelte:options runes={true} />
|
||||||
|
|
||||||
|
<!-- prettier-ignore -->
|
||||||
|
<div>
|
||||||
|
{ #if true}
|
||||||
|
<p>hi</p>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
Loading…
Reference in new issue