msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

fix: remove runtime validation of components/snippets, rely on types instead (#12507)

Browse Source 
closes #12446
pull/12562/head
Rich Harris 4 months ago committed by GitHub
parent 90d6f573e3
commit 72f5539f51
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
20 changed files with 69 additions and 209 deletions
Show Stats Download Patch File Download Diff File

5
.changeset/moody-lions-watch.md
Unescape View File

@ -0,0 +1,5 @@
---
'svelte': patch
---
fix: remove runtime validation of components/snippets, rely on types instead

8
packages/svelte/messages/shared-errors/errors.md
Unescape View File

@ -6,14 +6,6 @@
> `%name%(...)` can only be used during component initialisation
## render_tag_invalid_argument
> The argument to `{@render ...}` must be a snippet function, not a component or a slot with a `let:` directive or some other kind of function. If you want to dynamically render one snippet or another, use `$derived` and pass its result to `{@render ...}`
## snippet_used_as_component
> A snippet must be rendered with `{@render ...}`
## store_invalid_shape
> `%name%` is not a store with a `subscribe` method

12
packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
Unescape View File

@ -1,6 +1,5 @@
/** @import { BlockStatement, CallExpression, Expression, ExpressionStatement, Identifier, Literal, MemberExpression, ObjectExpression, Pattern, Property, Statement, Super, TemplateElement, TemplateLiteral } from 'estree' */
/** @import { BindDirective } from '#compiler' */
/** @import { ComponentClientTransformState } from '../types' */
import {
extract_identifiers,
extract_paths,
@ -933,13 +932,7 @@ function serialize_inline_component(node, component_name, context, anchor = cont
/** @param {Expression} node_id */
let fn = (node_id) => {
return b.call(
context.state.options.dev
? b.call('$.validate_component', b.id(component_name))
: component_name,
node_id,
props_expression
);
return b.call(component_name, node_id, props_expression);
};
if (bind_this !== null) {
@ -1876,9 +1869,6 @@ export const template_visitors = {
}
let snippet_function = /** @type {Expression} */ (context.visit(callee));
if (context.state.options.dev) {
snippet_function = b.call('$.validate_snippet', snippet_function);
}
if (node.metadata.dynamic) {
context.state.init.push(

19
packages/svelte/src/compiler/phases/3-transform/server/transform-server.js
Unescape View File

@ -966,13 +966,7 @@ function serialize_inline_component(node, expression, context) {
if (slot_name === 'default' && !has_children_prop) {
if (lets.length === 0 && children.default.every((node) => node.type !== 'SvelteFragment')) {
// create `children` prop...
push_prop(
b.prop(
'init',
b.id('children'),
context.state.options.dev ? b.call('$.add_snippet_symbol', slot_fn) : slot_fn
)
);
push_prop(b.prop('init', b.id('children'), slot_fn));
// and `$$slots.default: true` so that `<slot>` on the child works
serialized_slots.push(b.init(slot_name, b.true));
@ -1004,7 +998,7 @@ function serialize_inline_component(node, expression, context) {
/** @type {import('estree').Statement} */
let statement = b.stmt(
(node.type === 'SvelteComponent' ? b.maybe_call : b.call)(
context.state.options.dev ? b.call('$.validate_component', expression) : expression,
expression,
b.id('$$payload'),
props_expression
)
@ -1212,10 +1206,7 @@ const template_visitors = {
const callee = unwrap_optional(node.expression).callee;
const raw_args = unwrap_optional(node.expression).arguments;
const expression = /** @type {import('estree').Expression} */ (context.visit(callee));
const snippet_function = context.state.options.dev
? b.call('$.validate_snippet', expression)
: expression;
const snippet_function = /** @type {import('estree').Expression} */ (context.visit(callee));
const snippet_args = raw_args.map((arg) => {
return /** @type {import('estree').Expression} */ (context.visit(arg));
@ -1498,10 +1489,6 @@ const template_visitors = {
fn.___snippet = true;
// TODO hoist where possible
context.state.init.push(fn);
if (context.state.options.dev) {
context.state.init.push(b.stmt(b.call('$.add_snippet_symbol', node.expression)));
}
},
Component(node, context) {
serialize_inline_component(node, b.id(node.name), context);

13
packages/svelte/src/index.d.ts vendored
Unescape View File

@ -1,5 +1,6 @@
// This should contain all the public interfaces (not all of them are actually importable, check current Svelte for which ones are).
import type { Getters } from '#shared';
import './ambient.js';
/**
@ -104,6 +105,15 @@ export class SvelteComponent<
$set(props: Partial<Props>): void;
}
declare const brand: unique symbol;
type Brand<B> = { [brand]: B };
type Branded<T, B> = T & Brand<B>;
/**
* Internal implementation details that vary between environments
*/
export type ComponentInternals = Branded<{}, 'ComponentInternals'>;
/**
* Can be used to create strongly typed Svelte components.
*
@ -136,7 +146,8 @@ export interface Component<
* @param props The props passed to the component.
*/
(
internal: unknown,
this: void,
internals: ComponentInternals,
props: Props
): {
/**

54
packages/svelte/src/internal/client/dom/blocks/snippet.js
Unescape View File

@ -1,7 +1,6 @@
/** @import { Snippet } from 'svelte' */
/** @import { Effect, TemplateNode } from '#client' */
/** @import { Getters } from '#shared' */
import { add_snippet_symbol } from '../../../shared/validate.js';
import { EFFECT_TRANSPARENT } from '../../constants.js';
import { branch, block, destroy_effect, teardown } from '../../reactivity/effects.js';
import {
@ -55,7 +54,7 @@ export function snippet(node, get_snippet, ...args) {
* @param {(node: TemplateNode, ...args: any[]) => void} fn
*/
export function wrap_snippet(component, fn) {
return add_snippet_symbol((/** @type {TemplateNode} */ node, /** @type {any[]} */ ...args) => {
return (/** @type {TemplateNode} */ node, /** @type {any[]} */ ...args) => {
var previous_component_function = dev_current_component_function;
set_dev_current_component_function(component);
@ -64,7 +63,7 @@ export function wrap_snippet(component, fn) {
} finally {
set_dev_current_component_function(previous_component_function);
}
});
};
}
/**
@ -77,32 +76,33 @@ export function wrap_snippet(component, fn) {
* @returns {Snippet<Params>}
*/
export function createRawSnippet(fn) {
return add_snippet_symbol(
(/** @type {TemplateNode} */ anchor, /** @type {Getters<Params>} */ ...params) => {
var snippet = fn(...params);
/** @type {Element} */
var element;
if (hydrating) {
element = /** @type {Element} */ (hydrate_node);
hydrate_next();
} else {
var html = snippet.render().trim();
var fragment = create_fragment_from_html(html);
element = /** @type {Element} */ (fragment.firstChild);
if (DEV && (element.nextSibling !== null || element.nodeType !== 1)) {
w.invalid_raw_snippet_render();
}
anchor.before(element);
}
// @ts-expect-error the types are a lie
return (/** @type {TemplateNode} */ anchor, /** @type {Getters<Params>} */ ...params) => {
var snippet = fn(...params);
/** @type {Element} */
var element;
const result = snippet.setup?.(element);
assign_nodes(element, element);
if (hydrating) {
element = /** @type {Element} */ (hydrate_node);
hydrate_next();
} else {
var html = snippet.render().trim();
var fragment = create_fragment_from_html(html);
element = /** @type {Element} */ (fragment.firstChild);
if (typeof result === 'function') {
teardown(result);
if (DEV && (element.nextSibling !== null || element.nodeType !== 3)) {
w.invalid_raw_snippet_render();
}
anchor.before(element);
}
const result = snippet.setup?.(element);
assign_nodes(element, element);
if (typeof result === 'function') {
teardown(result);
}
);
};
}

2
packages/svelte/src/internal/client/index.js
Unescape View File

@ -165,9 +165,7 @@ export { snapshot } from '../shared/clone.js';
export { noop } from '../shared/utils.js';
export {
invalid_default_snippet,
validate_component,
validate_dynamic_element_tag,
validate_snippet,
validate_store,
validate_void_dynamic_element
} from '../shared/validate.js';

9
packages/svelte/src/internal/client/render.js
Unescape View File

@ -24,7 +24,6 @@ import {
import { reset_head_anchor } from './dom/blocks/svelte-head.js';
import * as w from './warnings.js';
import * as e from './errors.js';
import { validate_component } from '../shared/validate.js';
import { assign_nodes } from './dom/template.js';
/**
@ -79,10 +78,6 @@ export function set_text(text, value) {
* @returns {Exports}
*/
export function mount(component, options) {
if (DEV) {
validate_component(component);
}
const anchor = options.anchor ?? options.target.appendChild(empty());
// Don't flush previous effects to ensure order of outer effects stays consistent
return flush_sync(() => _mount(component, { ...options, anchor }), false);
@ -112,10 +107,6 @@ export function mount(component, options) {
* @returns {Exports}
*/
export function hydrate(component, options) {
if (DEV) {
validate_component(component);
}
options.intro = options.intro ?? false;
const target = options.target;
const was_hydrating = hydrating;

6
packages/svelte/src/internal/server/blocks/snippet.js
Unescape View File

@ -1,7 +1,6 @@
/** @import { Snippet } from 'svelte' */
/** @import { Payload } from '#server' */
/** @import { Getters } from '#shared' */
import { add_snippet_symbol } from '../../shared/validate.js';
/**
* Create a snippet programmatically
@ -13,10 +12,11 @@ import { add_snippet_symbol } from '../../shared/validate.js';
* @returns {Snippet<Params>}
*/
export function createRawSnippet(fn) {
return add_snippet_symbol((/** @type {Payload} */ payload, /** @type {Params} */ ...args) => {
// @ts-expect-error the types are a lie
return (/** @type {Payload} */ payload, /** @type {Params} */ ...args) => {
var getters = /** @type {Getters<Params>} */ (args.map((value) => () => value));
payload.out += fn(...getters)
.render()
.trim();
});
};
}

3
packages/svelte/src/internal/server/index.js
Unescape View File

@ -555,11 +555,8 @@ export { push_element, pop_element } from './dev.js';
export { snapshot } from '../shared/clone.js';
export {
add_snippet_symbol,
invalid_default_snippet,
validate_component,
validate_dynamic_element_tag,
validate_snippet,
validate_void_dynamic_element
} from '../shared/validate.js';

32
packages/svelte/src/internal/shared/errors.js
Unescape View File

@ -35,38 +35,6 @@ export function lifecycle_outside_component(name) {
}
}
/**
* The argument to `{@render ...}` must be a snippet function, not a component or a slot with a `let:` directive or some other kind of function. If you want to dynamically render one snippet or another, use `$derived` and pass its result to `{@render ...}`
* @returns {never}
*/
export function render_tag_invalid_argument() {
if (DEV) {
const error = new Error(`render_tag_invalid_argument\nThe argument to \`{@render ...}\` must be a snippet function, not a component or a slot with a \`let:\` directive or some other kind of function. If you want to dynamically render one snippet or another, use \`$derived\` and pass its result to \`{@render ...}\``);
error.name = 'Svelte error';
throw error;
} else {
// TODO print a link to the documentation
throw new Error("render_tag_invalid_argument");
}
}
/**
* A snippet must be rendered with `{@render ...}`
* @returns {never}
*/
export function snippet_used_as_component() {
if (DEV) {
const error = new Error(`snippet_used_as_component\nA snippet must be rendered with \`{@render ...}\``);
error.name = 'Svelte error';
throw error;
} else {
// TODO print a link to the documentation
throw new Error("snippet_used_as_component");
}
}
/**
* `%name%` is not a store with a `subscribe` method
* @param {string} name

38
packages/svelte/src/internal/shared/validate.js
Unescape View File

@ -4,43 +4,7 @@ import { is_void } from '../../constants.js';
import * as w from './warnings.js';
import * as e from './errors.js';
const snippet_symbol = Symbol.for('svelte.snippet');
export const invalid_default_snippet = add_snippet_symbol(e.invalid_default_snippet);
/**
* @param {any} fn
* @returns {import('svelte').Snippet}
*/
/*@__NO_SIDE_EFFECTS__*/
export function add_snippet_symbol(fn) {
fn[snippet_symbol] = true;
return fn;
}
/**
* Validate that the function handed to `{@render ...}` is a snippet function, and not some other kind of function.
* @param {any} snippet_fn
*/
export function validate_snippet(snippet_fn) {
if (snippet_fn && snippet_fn[snippet_symbol] !== true) {
e.render_tag_invalid_argument();
}
return snippet_fn;
}
/**
* Validate that the function behind `<Component />` isn't a snippet.
* @param {any} component_fn
*/
export function validate_component(component_fn) {
if (component_fn?.[snippet_symbol] === true) {
e.snippet_used_as_component();
}
return component_fn;
}
export { invalid_default_snippet } from './errors.js';
/**
* @param {() => string} tag_fn

12
packages/svelte/tests/runtime-runes/samples/mount-snippet-error/_config.js
Unescape View File

@ -1,12 +0,0 @@
import { test } from '../../test';
export default test({
compileOptions: {
dev: true
},
async test({ assert, target }) {
const div = target.querySelector('div');
assert.htmlEqual(div?.innerHTML || '', '');
},
runtime_error: 'snippet_used_as_component\nA snippet must be rendered with `{@render ...}`'
});

14
packages/svelte/tests/runtime-runes/samples/mount-snippet-error/main.svelte
Unescape View File

@ -1,14 +0,0 @@
<script>
import { onMount, mount } from 'svelte';
let el;
onMount(() => {
mount(foo, { target: el });
});
</script>
<div bind:this={el}></div>
{#snippet foo()}
shouldnt be rendered
{/snippet}

8
packages/svelte/tests/runtime-runes/samples/snippet-validation-error-1/_config.js
Unescape View File

@ -1,8 +0,0 @@
import { test } from '../../test';
export default test({
compileOptions: {
dev: true
},
error: 'render_tag_invalid_argument'
});

7
packages/svelte/tests/runtime-runes/samples/snippet-validation-error-1/main.svelte
Unescape View File

@ -1,7 +0,0 @@
<script>
function not_a_snippet() {
console.log('hello');
}
</script>
{@render not_a_snippet()}

8
packages/svelte/tests/runtime-runes/samples/snippet-validation-error-2/_config.js
Unescape View File

@ -1,8 +0,0 @@
import { test } from '../../test';
export default test({
compileOptions: {
dev: true
},
error: 'snippet_used_as_component\nA snippet must be rendered with `{@render ...}`'
});

5
packages/svelte/tests/runtime-runes/samples/snippet-validation-error-2/main.svelte
Unescape View File

@ -1,5 +0,0 @@
{#snippet Foo()}
<p>hello</p>
{/snippet}
<Foo />

5
packages/svelte/tests/types/component.ts
Unescape View File

@ -6,7 +6,8 @@ import {
type ComponentType,
mount,
hydrate,
type Component
type Component,
type ComponentInternals
} from 'svelte';
import { render } from 'svelte/server';
@ -338,5 +339,5 @@ render(functionComponent, {
// but should always pass in tsc (because it will never know about this fact)
import Foo from './doesntexist.svelte';
Foo(null, { a: true });
Foo(null as unknown as ComponentInternals, { a: true });
const f: Foo = new Foo({ target: document.body, props: { a: true } });

18
packages/svelte/types/index.d.ts vendored
Unescape View File

@ -101,6 +101,15 @@ declare module 'svelte' {
$set(props: Partial<Props>): void;
}
const brand: unique symbol;
type Brand<B> = { [brand]: B };
type Branded<T, B> = T & Brand<B>;
/**
* Internal implementation details that vary between environments
*/
export type ComponentInternals = Branded<{}, 'ComponentInternals'>;
/**
* Can be used to create strongly typed Svelte components.
*
@ -133,7 +142,8 @@ declare module 'svelte' {
* @param props The props passed to the component.
*/
(
internal: unknown,
this: void,
internals: ComponentInternals,
props: Props
): {
/**
@ -293,6 +303,9 @@ declare module 'svelte' {
: [type: Type, parameter: EventMap[Type], options?: DispatchOptions]
): boolean;
}
type Getters<T> = {
[K in keyof T]: () => T[K];
};
/**
* The `onMount` function schedules a callback to run as soon as the component has been mounted to the DOM.
* It must be called during the component's initialisation (but doesn't need to live *inside* the component;
@ -457,9 +470,6 @@ declare module 'svelte' {
* https://svelte.dev/docs/svelte#getallcontexts
* */
export function getAllContexts<T extends Map<any, any> = Map<any, any>>(): T;
type Getters<T> = {
[K in keyof T]: () => T[K];
};
export {};
}

Write Preview
Loading…
Cancel
Save