mirror of https://github.com/sveltejs/svelte
Merge 34e0a84be3 into 6095847e72
Paolo Ricciuti
1 day ago
committed by
GitHub
commit
e8c7ed925c
@ -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';
|
import { test } from '../../test';
|
||||||
|
|
||||||
export default test({
|
export default test({
|
||||||
test({ assert, target }) {
|
test({ assert, target, utils }) {
|
||||||
// If we got here, the component mounted without crashing on document.body access.
|
// If we got here, the component mounted without crashing on document.body access.
|
||||||
// Verify autofocus is set as a regular attribute.
|
// Verify autofocus is set as a regular attribute.
|
||||||
const input = target.children.find(
|
const input = target.children.find(utils.filter_elements((n) => n.name === 'input'));
|
||||||
(/** @type {any} */ n) => n.type === 'element' && n.name === 'input'
|
|
||||||
);
|
|
||||||
assert.ok(input, 'input element should exist');
|
assert.ok(input, 'input element should exist');
|
||||||
assert.equal(
|
assert.equal(
|
||||||
input.attributes['autofocus'],
|
input?.attributes['autofocus'],
|
||||||
'true',
|
'true',
|
||||||
'autofocus should be set as a regular attribute'
|
'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