mirror of https://github.com/sveltejs/svelte
Tim Londschien
10 months ago
parent
3009a0208f
commit
2c877e0bd4
@ -0,0 +1,34 @@
|
|||||||
|
/** @import { AST } from '#compiler' */
|
||||||
|
/** @import { Context } from '../types' */
|
||||||
|
import { mark_subtree_dynamic } from './shared/fragment.js';
|
||||||
|
import { validate_block_not_empty, validate_opening_tag } from './shared/utils.js';
|
||||||
|
import * as e from '../../../errors.js';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {AST.SwitchBlock} node
|
||||||
|
* @param {Context} context
|
||||||
|
*/
|
||||||
|
export function SwitchBlock(node, context) {
|
||||||
|
mark_subtree_dynamic(context.path);
|
||||||
|
node.consequences.forEach((consequence) => validate_block_not_empty(consequence, context));
|
||||||
|
|
||||||
|
if (context.state.analysis.runes) {
|
||||||
|
validate_opening_tag(node, context.state, '#');
|
||||||
|
|
||||||
|
for (const value of node.values) {
|
||||||
|
if (value === null) continue;
|
||||||
|
|
||||||
|
const start = /** @type {number} */ (value.start);
|
||||||
|
const match = context.state.analysis.source
|
||||||
|
.substring(start - 10, start)
|
||||||
|
.match(/{(\s*):case\s+$/);
|
||||||
|
|
||||||
|
if (match && match[1] !== '') {
|
||||||
|
// { :case ...} -- space after "{" not allowed
|
||||||
|
e.block_unexpected_character({ start: start - 10, end: start }, ':');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
context.next();
|
||||||
|
}
|
||||||
@ -0,0 +1,42 @@
|
|||||||
|
/** @import { BlockStatement, Expression } from 'estree' */
|
||||||
|
/** @import { AST } from '#compiler' */
|
||||||
|
/** @import { ComponentContext } from '../types' */
|
||||||
|
import * as b from '../../../../utils/builders.js';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {AST.SwitchBlock} node
|
||||||
|
* @param {ComponentContext} context
|
||||||
|
*/
|
||||||
|
export function SwitchBlock(node, context) {
|
||||||
|
context.state.template.push_comment();
|
||||||
|
const statements = [];
|
||||||
|
|
||||||
|
const value = /** @type {Expression} */ (context.visit(node.value));
|
||||||
|
|
||||||
|
/** @type {Expression[]} */
|
||||||
|
const args = [
|
||||||
|
context.state.node,
|
||||||
|
b.arrow(
|
||||||
|
[b.id('$$render')],
|
||||||
|
b.block([
|
||||||
|
b.switch_statement(
|
||||||
|
value,
|
||||||
|
node.consequences.map((node_consequent, index) => {
|
||||||
|
const consequent = /** @type {BlockStatement} */ (context.visit(node_consequent));
|
||||||
|
const consequent_id = context.state.scope.generate('consequent');
|
||||||
|
statements.push(b.var(b.id(consequent_id), b.arrow([b.id('$$anchor')], consequent)));
|
||||||
|
|
||||||
|
return b.switch_case(node.values[index], [
|
||||||
|
b.stmt(b.call(b.id('$$render'), b.id(consequent_id), b.literal(index))),
|
||||||
|
b.break()
|
||||||
|
]);
|
||||||
|
})
|
||||||
|
)
|
||||||
|
])
|
||||||
|
)
|
||||||
|
];
|
||||||
|
|
||||||
|
statements.push(b.stmt(b.call('$.switch', ...args)));
|
||||||
|
|
||||||
|
context.state.init.push(b.block(statements));
|
||||||
|
}
|
||||||
@ -0,0 +1,37 @@
|
|||||||
|
/** @import { BlockStatement, Expression } from 'estree' */
|
||||||
|
/** @import { AST } from '#compiler' */
|
||||||
|
/** @import { ComponentContext } from '../types.js' */
|
||||||
|
import { HYDRATION_START } from '../../../../../constants.js';
|
||||||
|
import * as b from '../../../../utils/builders.js';
|
||||||
|
import { block_close } from './shared/utils.js';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {AST.SwitchBlock} node
|
||||||
|
* @param {ComponentContext} context
|
||||||
|
*/
|
||||||
|
export function SwitchBlock(node, context) {
|
||||||
|
const discriminant = /** @type {Expression} */ (context.visit(node.value));
|
||||||
|
|
||||||
|
const cases = node.consequences.map((node_consequent, index) => {
|
||||||
|
const consequent = /** @type {BlockStatement} */ (context.visit(node_consequent));
|
||||||
|
consequent.body.unshift(
|
||||||
|
b.stmt(b.call(b.id('$$renderer.push'), b.literal(`<!--${HYDRATION_START}${index}-->`)))
|
||||||
|
);
|
||||||
|
consequent.body.push(b.break());
|
||||||
|
|
||||||
|
return b.switch_case(node.values[index], consequent.body);
|
||||||
|
});
|
||||||
|
|
||||||
|
// if there is no default block, we still have to create a hydration open marker
|
||||||
|
if (node.values.at(-1) !== null) {
|
||||||
|
const default_consequent = b.block([]);
|
||||||
|
default_consequent.body.unshift(
|
||||||
|
b.stmt(
|
||||||
|
b.call(b.id('$$renderer.push'), b.literal(`<!--${HYDRATION_START}${node.values.length}-->`))
|
||||||
|
)
|
||||||
|
);
|
||||||
|
cases.push(b.switch_case(null, default_consequent.body));
|
||||||
|
}
|
||||||
|
|
||||||
|
context.state.template.push(b.switch_statement(discriminant, cases), block_close);
|
||||||
|
}
|
||||||
@ -0,0 +1,66 @@
|
|||||||
|
/** @import { Effect, TemplateNode } from '#client' */
|
||||||
|
import {
|
||||||
|
hydrate_next,
|
||||||
|
hydrating,
|
||||||
|
read_hydration_instruction,
|
||||||
|
set_hydrate_node,
|
||||||
|
set_hydrating,
|
||||||
|
skip_nodes
|
||||||
|
} from '../hydration.js';
|
||||||
|
import { block } from '../../reactivity/effects.js';
|
||||||
|
import { HYDRATION_START } from '../../../../constants.js';
|
||||||
|
import { BranchManager } from './branches.js';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {TemplateNode} node
|
||||||
|
* @param {(branch: (fn: (anchor: Node) => void, index: number) => void) => void} fn
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
export function switch_block(node, fn) {
|
||||||
|
if (hydrating) {
|
||||||
|
hydrate_next();
|
||||||
|
}
|
||||||
|
|
||||||
|
var branches = new BranchManager(node);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {number} index,
|
||||||
|
* @param {null | ((anchor: Node) => void)} fn
|
||||||
|
*/
|
||||||
|
function update_branch(index, fn) {
|
||||||
|
if (hydrating) {
|
||||||
|
const hydration_tag = read_hydration_instruction(node);
|
||||||
|
const hydration_index = Number(hydration_tag.slice(HYDRATION_START.length));
|
||||||
|
|
||||||
|
if (index !== hydration_index) {
|
||||||
|
// Hydration mismatch: remove everything inside the anchor and start fresh.
|
||||||
|
// This could happen with `{#switch browser}...{/switch}`, for example
|
||||||
|
var anchor = skip_nodes();
|
||||||
|
|
||||||
|
set_hydrate_node(anchor);
|
||||||
|
branches.anchor = anchor;
|
||||||
|
|
||||||
|
set_hydrating(false);
|
||||||
|
branches.ensure(index, fn);
|
||||||
|
set_hydrating(true);
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
branches.ensure(index, fn);
|
||||||
|
}
|
||||||
|
|
||||||
|
block(() => {
|
||||||
|
var has_branch = false;
|
||||||
|
|
||||||
|
fn((fn, index) => {
|
||||||
|
has_branch = true;
|
||||||
|
update_branch(index, fn);
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!has_branch) {
|
||||||
|
update_branch(-1, null);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
{#switch foo case "bar"}
|
||||||
|
<p>foo</p>
|
||||||
|
{/switch}
|
||||||
@ -0,0 +1,93 @@
|
|||||||
|
{
|
||||||
|
"css": null,
|
||||||
|
"js": [],
|
||||||
|
"start": 0,
|
||||||
|
"end": 46,
|
||||||
|
"type": "Root",
|
||||||
|
"fragment": {
|
||||||
|
"type": "Fragment",
|
||||||
|
"nodes": [
|
||||||
|
{
|
||||||
|
"type": "SwitchBlock",
|
||||||
|
"start": 0,
|
||||||
|
"end": 46,
|
||||||
|
"value": {
|
||||||
|
"type": "Identifier",
|
||||||
|
"start": 9,
|
||||||
|
"end": 12,
|
||||||
|
"loc": {
|
||||||
|
"start": {
|
||||||
|
"line": 1,
|
||||||
|
"column": 9
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"line": 1,
|
||||||
|
"column": 12
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"name": "foo"
|
||||||
|
},
|
||||||
|
"consequences": [
|
||||||
|
{
|
||||||
|
"type": "Fragment",
|
||||||
|
"nodes": [
|
||||||
|
{
|
||||||
|
"type": "Text",
|
||||||
|
"start": 24,
|
||||||
|
"end": 26,
|
||||||
|
"raw": "\n\t",
|
||||||
|
"data": "\n\t"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "RegularElement",
|
||||||
|
"start": 26,
|
||||||
|
"end": 36,
|
||||||
|
"name": "p",
|
||||||
|
"attributes": [],
|
||||||
|
"fragment": {
|
||||||
|
"type": "Fragment",
|
||||||
|
"nodes": [
|
||||||
|
{
|
||||||
|
"type": "Text",
|
||||||
|
"start": 29,
|
||||||
|
"end": 32,
|
||||||
|
"raw": "foo",
|
||||||
|
"data": "foo"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "Text",
|
||||||
|
"start": 36,
|
||||||
|
"end": 37,
|
||||||
|
"raw": "\n",
|
||||||
|
"data": "\n"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"values": [
|
||||||
|
{
|
||||||
|
"type": "Literal",
|
||||||
|
"start": 18,
|
||||||
|
"end": 23,
|
||||||
|
"loc": {
|
||||||
|
"start": {
|
||||||
|
"line": 1,
|
||||||
|
"column": 18
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"line": 1,
|
||||||
|
"column": 23
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"value": "bar",
|
||||||
|
"raw": "\"bar\""
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"options": null
|
||||||
|
}
|
||||||
@ -0,0 +1 @@
|
|||||||
|
{#switch foo}bar{/switch}
|
||||||
@ -0,0 +1,49 @@
|
|||||||
|
{
|
||||||
|
"css": null,
|
||||||
|
"js": [],
|
||||||
|
"start": 0,
|
||||||
|
"end": 25,
|
||||||
|
"type": "Root",
|
||||||
|
"fragment": {
|
||||||
|
"type": "Fragment",
|
||||||
|
"nodes": [
|
||||||
|
{
|
||||||
|
"type": "SwitchBlock",
|
||||||
|
"start": 0,
|
||||||
|
"end": 25,
|
||||||
|
"value": {
|
||||||
|
"type": "Identifier",
|
||||||
|
"start": 9,
|
||||||
|
"end": 12,
|
||||||
|
"loc": {
|
||||||
|
"start": {
|
||||||
|
"line": 1,
|
||||||
|
"column": 9
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"line": 1,
|
||||||
|
"column": 12
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"name": "foo"
|
||||||
|
},
|
||||||
|
"consequences": [
|
||||||
|
{
|
||||||
|
"type": "Fragment",
|
||||||
|
"nodes": [
|
||||||
|
{
|
||||||
|
"type": "Text",
|
||||||
|
"start": 13,
|
||||||
|
"end": 16,
|
||||||
|
"raw": "bar",
|
||||||
|
"data": "bar"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"values": [null]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"options": null
|
||||||
|
}
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
{#switch foo}
|
||||||
|
{:case "foo"}
|
||||||
|
{#switch bar}
|
||||||
|
{:case "bar"}
|
||||||
|
<p>bar</p>
|
||||||
|
{/switch}
|
||||||
|
{/switch}
|
||||||
@ -0,0 +1,154 @@
|
|||||||
|
{
|
||||||
|
"css": null,
|
||||||
|
"js": [],
|
||||||
|
"start": 0,
|
||||||
|
"end": 91,
|
||||||
|
"type": "Root",
|
||||||
|
"fragment": {
|
||||||
|
"type": "Fragment",
|
||||||
|
"nodes": [
|
||||||
|
{
|
||||||
|
"type": "SwitchBlock",
|
||||||
|
"start": 0,
|
||||||
|
"end": 91,
|
||||||
|
"value": {
|
||||||
|
"type": "Identifier",
|
||||||
|
"start": 9,
|
||||||
|
"end": 12,
|
||||||
|
"loc": {
|
||||||
|
"start": {
|
||||||
|
"line": 1,
|
||||||
|
"column": 9
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"line": 1,
|
||||||
|
"column": 12
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"name": "foo"
|
||||||
|
},
|
||||||
|
"consequences": [
|
||||||
|
{
|
||||||
|
"type": "Fragment",
|
||||||
|
"nodes": [
|
||||||
|
{
|
||||||
|
"type": "Text",
|
||||||
|
"start": 27,
|
||||||
|
"end": 29,
|
||||||
|
"raw": "\n\t",
|
||||||
|
"data": "\n\t"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "SwitchBlock",
|
||||||
|
"start": 29,
|
||||||
|
"end": 81,
|
||||||
|
"value": {
|
||||||
|
"type": "Identifier",
|
||||||
|
"start": 38,
|
||||||
|
"end": 41,
|
||||||
|
"loc": {
|
||||||
|
"start": {
|
||||||
|
"line": 3,
|
||||||
|
"column": 10
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"line": 3,
|
||||||
|
"column": 13
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"name": "bar"
|
||||||
|
},
|
||||||
|
"consequences": [
|
||||||
|
{
|
||||||
|
"type": "Fragment",
|
||||||
|
"nodes": [
|
||||||
|
{
|
||||||
|
"type": "Text",
|
||||||
|
"start": 57,
|
||||||
|
"end": 60,
|
||||||
|
"raw": "\n\t\t",
|
||||||
|
"data": "\n\t\t"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "RegularElement",
|
||||||
|
"start": 60,
|
||||||
|
"end": 70,
|
||||||
|
"name": "p",
|
||||||
|
"attributes": [],
|
||||||
|
"fragment": {
|
||||||
|
"type": "Fragment",
|
||||||
|
"nodes": [
|
||||||
|
{
|
||||||
|
"type": "Text",
|
||||||
|
"start": 63,
|
||||||
|
"end": 66,
|
||||||
|
"raw": "bar",
|
||||||
|
"data": "bar"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "Text",
|
||||||
|
"start": 70,
|
||||||
|
"end": 72,
|
||||||
|
"raw": "\n\t",
|
||||||
|
"data": "\n\t"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"values": [
|
||||||
|
{
|
||||||
|
"type": "Literal",
|
||||||
|
"start": 51,
|
||||||
|
"end": 56,
|
||||||
|
"loc": {
|
||||||
|
"start": {
|
||||||
|
"line": 4,
|
||||||
|
"column": 8
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"line": 4,
|
||||||
|
"column": 13
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"value": "bar",
|
||||||
|
"raw": "\"bar\""
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "Text",
|
||||||
|
"start": 81,
|
||||||
|
"end": 82,
|
||||||
|
"raw": "\n",
|
||||||
|
"data": "\n"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"values": [
|
||||||
|
{
|
||||||
|
"type": "Literal",
|
||||||
|
"start": 21,
|
||||||
|
"end": 26,
|
||||||
|
"loc": {
|
||||||
|
"start": {
|
||||||
|
"line": 2,
|
||||||
|
"column": 7
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"line": 2,
|
||||||
|
"column": 12
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"value": "foo",
|
||||||
|
"raw": "\"foo\""
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"options": null
|
||||||
|
}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
{#switch foo}
|
||||||
|
{:case "bar"}
|
||||||
|
<p>foo</p>
|
||||||
|
{:case "baz"}
|
||||||
|
<p>baz</p>
|
||||||
|
{/switch}
|
||||||
@ -0,0 +1,148 @@
|
|||||||
|
{
|
||||||
|
"css": null,
|
||||||
|
"js": [],
|
||||||
|
"start": 0,
|
||||||
|
"end": 75,
|
||||||
|
"type": "Root",
|
||||||
|
"fragment": {
|
||||||
|
"type": "Fragment",
|
||||||
|
"nodes": [
|
||||||
|
{
|
||||||
|
"type": "SwitchBlock",
|
||||||
|
"start": 0,
|
||||||
|
"end": 75,
|
||||||
|
"value": {
|
||||||
|
"type": "Identifier",
|
||||||
|
"start": 9,
|
||||||
|
"end": 12,
|
||||||
|
"loc": {
|
||||||
|
"start": {
|
||||||
|
"line": 1,
|
||||||
|
"column": 9
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"line": 1,
|
||||||
|
"column": 12
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"name": "foo"
|
||||||
|
},
|
||||||
|
"consequences": [
|
||||||
|
{
|
||||||
|
"type": "Fragment",
|
||||||
|
"nodes": [
|
||||||
|
{
|
||||||
|
"type": "Text",
|
||||||
|
"start": 27,
|
||||||
|
"end": 29,
|
||||||
|
"raw": "\n\t",
|
||||||
|
"data": "\n\t"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "RegularElement",
|
||||||
|
"start": 29,
|
||||||
|
"end": 39,
|
||||||
|
"name": "p",
|
||||||
|
"attributes": [],
|
||||||
|
"fragment": {
|
||||||
|
"type": "Fragment",
|
||||||
|
"nodes": [
|
||||||
|
{
|
||||||
|
"type": "Text",
|
||||||
|
"start": 32,
|
||||||
|
"end": 35,
|
||||||
|
"raw": "foo",
|
||||||
|
"data": "foo"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "Text",
|
||||||
|
"start": 39,
|
||||||
|
"end": 40,
|
||||||
|
"raw": "\n",
|
||||||
|
"data": "\n"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "Fragment",
|
||||||
|
"nodes": [
|
||||||
|
{
|
||||||
|
"type": "Text",
|
||||||
|
"start": 53,
|
||||||
|
"end": 55,
|
||||||
|
"raw": "\n\t",
|
||||||
|
"data": "\n\t"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "RegularElement",
|
||||||
|
"start": 55,
|
||||||
|
"end": 65,
|
||||||
|
"name": "p",
|
||||||
|
"attributes": [],
|
||||||
|
"fragment": {
|
||||||
|
"type": "Fragment",
|
||||||
|
"nodes": [
|
||||||
|
{
|
||||||
|
"type": "Text",
|
||||||
|
"start": 58,
|
||||||
|
"end": 61,
|
||||||
|
"raw": "baz",
|
||||||
|
"data": "baz"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "Text",
|
||||||
|
"start": 65,
|
||||||
|
"end": 66,
|
||||||
|
"raw": "\n",
|
||||||
|
"data": "\n"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"values": [
|
||||||
|
{
|
||||||
|
"type": "Literal",
|
||||||
|
"start": 21,
|
||||||
|
"end": 26,
|
||||||
|
"loc": {
|
||||||
|
"start": {
|
||||||
|
"line": 2,
|
||||||
|
"column": 7
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"line": 2,
|
||||||
|
"column": 12
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"value": "bar",
|
||||||
|
"raw": "\"bar\""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "Literal",
|
||||||
|
"start": 47,
|
||||||
|
"end": 52,
|
||||||
|
"loc": {
|
||||||
|
"start": {
|
||||||
|
"line": 4,
|
||||||
|
"column": 7
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"line": 4,
|
||||||
|
"column": 12
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"value": "baz",
|
||||||
|
"raw": "\"baz\""
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"options": null
|
||||||
|
}
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
import { flushSync } from 'svelte';
|
||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
async test({ assert, target }) {
|
||||||
|
await Promise.resolve();
|
||||||
|
|
||||||
|
let [btn1] = target.querySelectorAll('button');
|
||||||
|
|
||||||
|
flushSync(() => {
|
||||||
|
btn1?.click();
|
||||||
|
});
|
||||||
|
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`false\ntrue\n<button>Toggle</button>\nfirst:\nfalse\n<br>\nsecond:\ntrue`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
<script>
|
||||||
|
let first = $state(true)
|
||||||
|
let second = $state(false)
|
||||||
|
let derivedSecond = $derived(second)
|
||||||
|
|
||||||
|
queueMicrotask(() => {
|
||||||
|
first = false
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{first} {second}
|
||||||
|
|
||||||
|
<button onclick={() => {
|
||||||
|
second = true
|
||||||
|
}}>Toggle</button>
|
||||||
|
|
||||||
|
{#switch first || derivedSecond}
|
||||||
|
{:case true}
|
||||||
|
first: {first}
|
||||||
|
<br />
|
||||||
|
second: {derivedSecond}
|
||||||
|
{/switch}
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
<script>
|
||||||
|
let { post } = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:head>
|
||||||
|
<title>{post.title}</title>
|
||||||
|
</svelte:head>
|
||||||
|
|
||||||
|
<p>{post.title}</p>
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
import { flushSync } from 'svelte';
|
||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
async test({ assert, target, window }) {
|
||||||
|
const [btn1] = target.querySelectorAll('button');
|
||||||
|
|
||||||
|
assert.htmlEqual(window.document.head.innerHTML, ``);
|
||||||
|
|
||||||
|
flushSync(() => {
|
||||||
|
btn1.click();
|
||||||
|
});
|
||||||
|
|
||||||
|
assert.htmlEqual(window.document.head.innerHTML, `<title>hello world</title>`);
|
||||||
|
|
||||||
|
flushSync(() => {
|
||||||
|
btn1.click();
|
||||||
|
});
|
||||||
|
|
||||||
|
assert.htmlEqual(window.document.head.innerHTML, `<title>hello world</title>`);
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
<script>
|
||||||
|
import Seo from './Seo.svelte';
|
||||||
|
|
||||||
|
let post = $state(null);
|
||||||
|
|
||||||
|
function toggle() {
|
||||||
|
post = post ? null : { title: 'hello world' };
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button onclick={toggle}>
|
||||||
|
toggle
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{#switch !!post case true}
|
||||||
|
<Seo {post} />
|
||||||
|
{/switch}
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
import { flushSync } from 'svelte';
|
||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
html: `<button>Click</button><p>expires in 1 click</p>`,
|
||||||
|
|
||||||
|
async test({ assert, target }) {
|
||||||
|
const [btn1] = target.querySelectorAll('button');
|
||||||
|
|
||||||
|
flushSync(() => {
|
||||||
|
btn1.click();
|
||||||
|
});
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, ``);
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
<script>
|
||||||
|
let data = $state({ num: 1 });
|
||||||
|
|
||||||
|
function expire() {
|
||||||
|
data.num = data.num - 1;
|
||||||
|
if (data.num <= 0) data = undefined;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#switch data?.num case 1}
|
||||||
|
<button onclick={expire}>Click</button>
|
||||||
|
<p>expires in {data.num} click</p>
|
||||||
|
{/switch}
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
import { flushSync } from 'svelte';
|
||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
html: `<button>hide</button><div>hello</div>`,
|
||||||
|
|
||||||
|
async test({ assert, target }) {
|
||||||
|
const [btn1, btn2] = target.querySelectorAll('button');
|
||||||
|
|
||||||
|
flushSync(() => {
|
||||||
|
btn1.click();
|
||||||
|
});
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `<button>hide</button><div style="opacity: 0;">hello</div>`);
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
<script>
|
||||||
|
import { fade } from "svelte/transition";
|
||||||
|
|
||||||
|
let state = $state("hello");
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button onclick={() => state = ''}>hide</button>
|
||||||
|
|
||||||
|
{#switch !!state case true}
|
||||||
|
<div in:fade={{ duration: 2000 }} out:fade={{ duration: 2000 }}>
|
||||||
|
{#if true}
|
||||||
|
{state}
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/switch}
|
||||||
|
|
||||||
@ -0,0 +1,40 @@
|
|||||||
|
import { flushSync } from 'svelte';
|
||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
html: `<button>show</button><button>animate</button>`,
|
||||||
|
|
||||||
|
async test({ assert, target }) {
|
||||||
|
const [btn1, btn2] = target.querySelectorAll('button');
|
||||||
|
|
||||||
|
flushSync(() => {
|
||||||
|
btn1.click();
|
||||||
|
});
|
||||||
|
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`<button>show</button><button>animate</button><h1>Hello\n!</h1>`
|
||||||
|
);
|
||||||
|
|
||||||
|
flushSync(() => {
|
||||||
|
btn1.click();
|
||||||
|
});
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `<button>show</button><button>animate</button>`);
|
||||||
|
|
||||||
|
flushSync(() => {
|
||||||
|
btn2.click();
|
||||||
|
});
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `<button>show</button><button>animate</button>`);
|
||||||
|
|
||||||
|
flushSync(() => {
|
||||||
|
btn1.click();
|
||||||
|
});
|
||||||
|
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`<button>show</button><button>animate</button><h1 style="opacity: 0;">Hello\n!</h1>`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
<script>
|
||||||
|
import { fade } from 'svelte/transition';
|
||||||
|
|
||||||
|
let show = $state(false);
|
||||||
|
let animate = $state(false);
|
||||||
|
|
||||||
|
function maybe(node, animate) {
|
||||||
|
if (animate) return fade(node);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button onclick={() => show = !show}>show</button><button onclick={() => animate = !animate}>animate</button>
|
||||||
|
|
||||||
|
{#switch show case true}
|
||||||
|
<h1 transition:maybe={animate}>Hello {name}!</h1>
|
||||||
|
{/switch}
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
props: {
|
||||||
|
foo: true
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1 @@
|
|||||||
|
<p>foo is true</p>
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
<script>
|
||||||
|
export let foo;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#switch foo case true}
|
||||||
|
<p>foo is true</p>
|
||||||
|
{/switch}
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
props: {
|
||||||
|
foo: false
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
<script>
|
||||||
|
export let foo;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#switch foo case true}
|
||||||
|
<p>foo is false</p>
|
||||||
|
{/switch}
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
props: {
|
||||||
|
foo: false
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1 @@
|
|||||||
|
<p>default</p>
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
<script>
|
||||||
|
export let foo;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#switch foo}
|
||||||
|
<p>default</p>
|
||||||
|
{/switch}
|
||||||
Loading…
Reference in new issue