mirror of https://github.com/sveltejs/svelte
Merge ecd1c90e0e into ac9a8a9d7f
Paolo Ricciuti
3 days ago
committed by
GitHub
commit
9a2682aa5a
@ -0,0 +1,9 @@
|
||||
<svelte:options customRenderer={null} />
|
||||
|
||||
<script>
|
||||
let { message } = $props();
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<span>{message}</span>
|
||||
</div>
|
||||
@ -0,0 +1,16 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test-dom.test';
|
||||
|
||||
export default test({
|
||||
html: '<custom></custom>',
|
||||
async test({ assert, component, target }) {
|
||||
const [div] = target.children[0].elements_children;
|
||||
assert.instanceOf(div, HTMLDivElement);
|
||||
assert.equal(div.outerHTML, '<div><span>hello from child</span></div>');
|
||||
|
||||
component.hide();
|
||||
flushSync();
|
||||
|
||||
assert.isFalse(target.children[0].elements_children.includes(div));
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,15 @@
|
||||
<script>
|
||||
import Child from './Child.svelte';
|
||||
|
||||
let visible = $state(true);
|
||||
|
||||
export function hide() {
|
||||
visible = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<custom>
|
||||
{#if visible}
|
||||
<Child message="hello from child"></Child>
|
||||
{/if}
|
||||
</custom>
|
||||
@ -0,0 +1 @@
|
||||
<text>something</text>
|
||||
@ -0,0 +1,25 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test-dom.test';
|
||||
|
||||
export default test({
|
||||
hydrate: true,
|
||||
test({ assert, component, target, warnings }) {
|
||||
assert.instanceOf(target, HTMLElement);
|
||||
assert.deepEqual(warnings, []);
|
||||
assert.ok(target.querySelector('#keep-me'));
|
||||
assert.ok(target.querySelector('custom-rendered'));
|
||||
|
||||
component.hide();
|
||||
flushSync();
|
||||
|
||||
assert.ok(target.querySelector('#keep-me'));
|
||||
assert.equal(target.querySelector('custom-rendered'), null);
|
||||
assert.notInclude(target.textContent, 'Cool:');
|
||||
|
||||
component.show();
|
||||
flushSync();
|
||||
|
||||
assert.ok(target.querySelector('#keep-me'));
|
||||
assert.ok(target.querySelector('custom-rendered'));
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,23 @@
|
||||
<svelte:options customRenderer={null} />
|
||||
|
||||
<script>
|
||||
import Child from './Child.svelte';
|
||||
|
||||
let visible = $state(true);
|
||||
|
||||
export function hide() {
|
||||
visible = false;
|
||||
}
|
||||
|
||||
export function show() {
|
||||
visible = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div>
|
||||
{#if visible}
|
||||
Cool: <Child />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div id="keep-me"></div>
|
||||
@ -0,0 +1,7 @@
|
||||
<script>
|
||||
let { message } = $props();
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<span>{message}</span>
|
||||
</div>
|
||||
@ -0,0 +1,44 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test-dom.test';
|
||||
|
||||
export default test({
|
||||
test({ assert, component, target }) {
|
||||
// we mounted the component in the root fragment so the div is in the target.elements_children
|
||||
const [div] = target.elements_children;
|
||||
assert.instanceOf(div, HTMLDivElement);
|
||||
|
||||
// find the custom-rendered element in the div and assert the json content
|
||||
let custom_rendered = div.querySelector('custom-rendered');
|
||||
assert.instanceOf(custom_rendered, HTMLElement);
|
||||
assert.deepEqual(JSON.parse(custom_rendered.textContent), {
|
||||
type: 'element',
|
||||
name: 'div',
|
||||
attributes: {},
|
||||
children: [
|
||||
{
|
||||
type: 'element',
|
||||
name: 'span',
|
||||
attributes: {},
|
||||
children: [{ type: 'text', value: 'hello from child' }],
|
||||
elements_children: [],
|
||||
listeners: {}
|
||||
}
|
||||
],
|
||||
elements_children: [],
|
||||
listeners: {}
|
||||
});
|
||||
|
||||
component.hide();
|
||||
flushSync();
|
||||
|
||||
// we unmounted the custom rendered component so the map is empty again
|
||||
assert.equal(div.querySelector('custom-rendered'), null);
|
||||
|
||||
component.show();
|
||||
flushSync();
|
||||
|
||||
// we mounted the custom rendered component into the div again so it's in the mounted_in_dom_elements map again
|
||||
custom_rendered = div.querySelector('custom-rendered');
|
||||
assert.instanceOf(custom_rendered, HTMLElement);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,20 @@
|
||||
<svelte:options customRenderer={null} />
|
||||
|
||||
<script>
|
||||
import Child from './Child.svelte';
|
||||
|
||||
let visible = $state(true);
|
||||
|
||||
export function hide() {
|
||||
visible = false;
|
||||
}
|
||||
export function show() {
|
||||
visible = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div>
|
||||
{#if visible}
|
||||
test: <Child message="hello from child"></Child>
|
||||
{/if}
|
||||
</div>
|
||||
@ -0,0 +1,7 @@
|
||||
<script>
|
||||
let { message } = $props();
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<span>{message}</span>
|
||||
</div>
|
||||
@ -0,0 +1,44 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test-dom.test';
|
||||
|
||||
export default test({
|
||||
test({ assert, component, target }) {
|
||||
// we mounted the component in the root fragment so the div is in the target.elements_children
|
||||
const [div] = target.elements_children;
|
||||
assert.instanceOf(div, HTMLDivElement);
|
||||
|
||||
// find the custom-rendered element in the div and assert the json content
|
||||
let custom_rendered = div.querySelector('custom-rendered');
|
||||
assert.instanceOf(custom_rendered, HTMLElement);
|
||||
assert.deepEqual(JSON.parse(custom_rendered.textContent), {
|
||||
type: 'element',
|
||||
name: 'div',
|
||||
attributes: {},
|
||||
children: [
|
||||
{
|
||||
type: 'element',
|
||||
name: 'span',
|
||||
attributes: {},
|
||||
children: [{ type: 'text', value: 'hello from child' }],
|
||||
elements_children: [],
|
||||
listeners: {}
|
||||
}
|
||||
],
|
||||
elements_children: [],
|
||||
listeners: {}
|
||||
});
|
||||
|
||||
component.hide();
|
||||
flushSync();
|
||||
|
||||
// we unmounted the custom rendered component so the map is empty again
|
||||
assert.equal(div.querySelector('custom-rendered'), null);
|
||||
|
||||
component.show();
|
||||
flushSync();
|
||||
|
||||
// we mounted the custom rendered component into the div again so it's in the mounted_in_dom_elements map again
|
||||
custom_rendered = div.querySelector('custom-rendered');
|
||||
assert.instanceOf(custom_rendered, HTMLElement);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,20 @@
|
||||
<svelte:options customRenderer={null} />
|
||||
|
||||
<script>
|
||||
import Child from './Child.svelte';
|
||||
|
||||
let visible = $state(true);
|
||||
|
||||
export function hide() {
|
||||
visible = false;
|
||||
}
|
||||
export function show() {
|
||||
visible = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div>
|
||||
{#if visible}
|
||||
<Child message="hello from child"></Child>
|
||||
{/if}
|
||||
</div>
|
||||
@ -1,18 +1,16 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
test({ assert, target }) {
|
||||
test({ assert, target, utils }) {
|
||||
// If we got here, the component mounted without crashing on document.body access.
|
||||
// Verify autofocus is set as a regular attribute.
|
||||
const input = target.children.find(
|
||||
(/** @type {any} */ n) => n.type === 'element' && n.name === 'input'
|
||||
);
|
||||
const input = target.children.find(utils.filter_elements((n) => n.name === 'input'));
|
||||
assert.ok(input, 'input element should exist');
|
||||
assert.equal(
|
||||
input.attributes['autofocus'],
|
||||
input?.attributes['autofocus'],
|
||||
'true',
|
||||
'autofocus should be set as a regular attribute'
|
||||
);
|
||||
assert.equal(input.attributes['value'], 'test', 'value should be set as a regular attribute');
|
||||
assert.equal(input?.attributes['value'], 'test', 'value should be set as a regular attribute');
|
||||
}
|
||||
});
|
||||
|
||||
@ -0,0 +1,5 @@
|
||||
<script lang="ts">
|
||||
let { children } = $props();
|
||||
</script>
|
||||
|
||||
{@render children?.()}
|
||||
@ -0,0 +1,13 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
compileOptions: {
|
||||
experimental: {
|
||||
// The actual renderer module is irrelevant for this snapshot — we only
|
||||
// care that the server output is a no-op while the client output still
|
||||
// imports/uses the custom renderer. Using a fixed path keeps the
|
||||
// snapshot stable across machines.
|
||||
customRenderer: 'my-custom-renderer'
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,13 @@
|
||||
import $renderer from 'my-custom-renderer';
|
||||
import 'svelte/internal/disclose-version';
|
||||
import * as $ from 'svelte/internal/client';
|
||||
|
||||
export default function Component($$anchor, $$props) {
|
||||
var $$pop_renderer = $.push_renderer($renderer);
|
||||
var fragment = $.comment();
|
||||
var node = $.first_child(fragment);
|
||||
|
||||
$.snippet(node, () => $.validate_snippet_renderer($renderer, $$props.children) ?? $.noop);
|
||||
$.append($$anchor, fragment);
|
||||
$$pop_renderer();
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
import $renderer from 'my-custom-renderer';
|
||||
import 'svelte/internal/disclose-version';
|
||||
import 'svelte/internal/flags/legacy';
|
||||
import * as $ from 'svelte/internal/client';
|
||||
import Component from "./Component.svelte";
|
||||
|
||||
export default function Main($$anchor) {
|
||||
var $$pop_renderer = $.push_renderer($renderer);
|
||||
var fragment = $.comment();
|
||||
var node = $.first_child(fragment);
|
||||
|
||||
Component(node, {});
|
||||
$.append($$anchor, fragment);
|
||||
$$pop_renderer();
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
export default function Component() {}
|
||||
@ -0,0 +1 @@
|
||||
export default function Main() {}
|
||||
@ -0,0 +1,5 @@
|
||||
<script>
|
||||
import Component from "./Component.svelte";
|
||||
</script>
|
||||
|
||||
<Component />
|
||||
Loading…
Reference in new issue