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