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

feat: allow arbitrary call expressions for render tags

Browse Source 
closes #9582
pull/10656/head
Simon Holthausen 3 years ago
parent 3fe4940a9d
commit 2c4efbf85c
14 changed files with 149 additions and 39 deletions
Show Stats Download Patch File Download Diff File

5
.changeset/ten-jokes-divide.md
Unescape View File

@ -0,0 +1,5 @@
---
"svelte": patch
---
feat: allow arbitrary call expressions and optional chaining for snippets

2
packages/svelte/src/compiler/errors.js
Unescape View File

@ -89,7 +89,7 @@ const parse = {
'duplicate-style-element': () => `A component can have a single top-level <style> element`,
'duplicate-script-element': () =>
`A component can have a single top-level <script> element and/or a single top-level <script context="module"> element`,
'invalid-render-expression': () => 'expected an identifier followed by (...)',
'invalid-render-expression': () => '{@render ...} tags can only contain call expressions',
'invalid-render-arguments': () => 'expected at most one argument',
'invalid-render-spread-argument': () => 'cannot use spread arguments in {@render ...} tags',
'invalid-snippet-rest-parameter': () =>

10
packages/svelte/src/compiler/phases/1-parse/state/tag.js
Unescape View File

@ -577,7 +577,12 @@ function special(parser) {
const expression = read_expression(parser);
if (expression.type !== 'CallExpression' || expression.callee.type !== 'Identifier') {
if (
expression.type !== 'CallExpression' &&
(expression.type !== 'ChainExpression' ||
expression.expression.type !== 'CallExpression' ||
!expression.expression.optional)
) {
error(expression, 'invalid-render-expression');
}
@ -589,8 +594,7 @@ function special(parser) {
type: 'RenderTag',
start,
end: parser.index,
expression: expression.callee,
arguments: expression.arguments
expression: expression
});
}
}

9
packages/svelte/src/compiler/phases/2-analyze/validation.js
Unescape View File

@ -604,11 +604,16 @@ const validation = {
});
},
RenderTag(node, context) {
for (const arg of node.arguments) {
const raw_args =
node.expression.type === 'CallExpression'
? node.expression.arguments
: node.expression.expression.arguments;
for (const arg of raw_args) {
if (arg.type === 'SpreadElement') {
error(arg, 'invalid-render-spread-argument');
}
}
const is_inside_textarea = context.path.find((n) => {
return (
n.type === 'SvelteElement' &&
@ -622,7 +627,7 @@ const validation = {
node,
'invalid-tag-placement',
'inside <textarea> or <svelte:element this="textarea">',
node.expression.name
'render'
);
}
},

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

@ -1864,18 +1864,24 @@ export const template_visitors = {
},
RenderTag(node, context) {
context.state.template.push('<!>');
const binding = context.state.scope.get(node.expression.name);
const is_reactive = binding?.kind !== 'normal' || node.expression.type !== 'Identifier';
const callee =
node.expression.type === 'CallExpression'
? node.expression.callee
: node.expression.expression.callee;
const raw_args =
node.expression.type === 'CallExpression'
? node.expression.arguments
: node.expression.expression.arguments;
const is_reactive =
callee.type !== 'Identifier' || context.state.scope.get(callee.name)?.kind !== 'normal';
/** @type {import('estree').Expression[]} */
const args = [context.state.node];
for (const arg of node.arguments) {
for (const arg of raw_args) {
args.push(b.thunk(/** @type {import('estree').Expression} */ (context.visit(arg))));
}
let snippet_function = /** @type {import('estree').Expression} */ (
context.visit(node.expression)
);
let snippet_function = /** @type {import('estree').Expression} */ (context.visit(callee));
if (context.state.options.dev) {
snippet_function = b.call('$.validate_snippet', snippet_function);
}
@ -1885,7 +1891,14 @@ export const template_visitors = {
b.stmt(b.call('$.snippet_effect', b.thunk(snippet_function), ...args))
);
} else {
context.state.after_update.push(b.stmt(b.call(snippet_function, ...args)));
context.state.after_update.push(
b.stmt(
(node.expression.type === 'CallExpression' ? b.call : b.maybe_call)(
snippet_function,
...args
)
)
);
}
},
AnimateDirective(node, { state, visit }) {

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

@ -1141,17 +1141,34 @@ const template_visitors = {
state.init.push(anchor);
state.template.push(t_expression(anchor_id));
const expression = /** @type {import('estree').Expression} */ (context.visit(node.expression));
const callee =
node.expression.type === 'CallExpression'
? node.expression.callee
: node.expression.expression.callee;
const raw_args =
node.expression.type === 'CallExpression'
? node.expression.arguments
: node.expression.expression.arguments;
const expression = /** @type {import('estree').Expression} */ (context.visit(callee));
const snippet_function = state.options.dev
? b.call('$.validate_snippet', expression)
: expression;
const snippet_args = node.arguments.map((arg) => {
const snippet_args = raw_args.map((arg) => {
return /** @type {import('estree').Expression} */ (context.visit(arg));
});
state.template.push(
t_statement(b.stmt(b.call(snippet_function, b.id('$$payload'), ...snippet_args)))
t_statement(
b.stmt(
(node.expression.type === 'CallExpression' ? b.call : b.maybe_call)(
snippet_function,
b.id('$$payload'),
...snippet_args
)
)
)
);
state.template.push(t_expression(anchor_id));

8
packages/svelte/src/compiler/types/template.d.ts vendored
Unescape View File

@ -13,7 +13,10 @@ import type {
ObjectExpression,
Pattern,
Program,
SpreadElement
SpreadElement,
CallExpression,
ChainExpression,
SimpleCallExpression
} from 'estree';
import type { Atrule, Rule } from './css';
@ -151,8 +154,7 @@ export interface DebugTag extends BaseNode {
/** A `{@render foo(...)} tag */
export interface RenderTag extends BaseNode {
type: 'RenderTag';
expression: Identifier;
arguments: Array<Expression | SpreadElement>;
expression: SimpleCallExpression | (ChainExpression & { expression: SimpleCallExpression });
}
type Tag = ExpressionTag | HtmlTag | ConstTag | DebugTag | RenderTag;

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

@ -2684,7 +2684,7 @@ export function sanitize_slots(props) {
}
/**
* @param {() => Function} get_snippet
* @param {() => Function | null | undefined} get_snippet
* @param {Node} node
* @param {(() => any)[]} args
* @returns {void}
@ -2695,7 +2695,9 @@ export function snippet_effect(get_snippet, node, ...args) {
// Only rerender when the snippet function itself changes,
// not when an eagerly-read prop inside the snippet function changes
const snippet = get_snippet();
untrack(() => snippet(node, ...args));
if (snippet) {
untrack(() => snippet(node, ...args));
}
return () => {
if (block.d !== null) {
remove(block.d);

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

@ -118,7 +118,7 @@ export function add_snippet_symbol(fn) {
* @param {any} snippet_fn
*/
export function validate_snippet(snippet_fn) {
if (snippet_fn[snippet_symbol] !== true) {
if (snippet_fn && snippet_fn[snippet_symbol] !== true) {
throw new Error(
'The argument to `{@render ...}` must be a snippet function, not a component or some other kind of function. ' +
'If you want to dynamically render one snippet or another, use `$derived` and pass its result to `{@render ...}`.'

44
packages/svelte/tests/parser-modern/samples/snippets/output.json
Unescape View File

@ -131,9 +131,9 @@
"start": 83,
"end": 101,
"expression": {
"type": "Identifier",
"type": "CallExpression",
"start": 92,
"end": 95,
"end": 100,
"loc": {
"start": {
"line": 7,
@ -141,29 +141,45 @@
},
"end": {
"line": 7,
"column": 12
"column": 17
}
},
"name": "foo"
},
"arguments": [
{
"callee": {
"type": "Identifier",
"start": 96,
"end": 99,
"start": 92,
"end": 95,
"loc": {
"start": {
"line": 7,
"column": 13
"column": 9
},
"end": {
"line": 7,
"column": 16
"column": 12
}
},
"name": "msg"
}
]
"name": "foo"
},
"arguments": [
{
"type": "Identifier",
"start": 96,
"end": 99,
"loc": {
"start": {
"line": 7,
"column": 13
},
"end": {
"line": 7,
"column": 16
}
},
"name": "msg"
}
],
"optional": false
}
}
],
"transparent": false

23
packages/svelte/tests/runtime-runes/samples/snippet-expressions/_config.js
Unescape View File

@ -0,0 +1,23 @@
import { test } from '../../test';
export default test({
html: `
<p>foo</p>
<hr>
<button>toggle</button>
`,
async test({ assert, target }) {
const btn = target.querySelector('button');
await btn?.click();
assert.htmlEqual(
target.innerHTML,
`
<p>bar</p>
<hr>
<p>foo</p>
<button>toggle</button>
`
);
}
});

7
packages/svelte/tests/runtime-runes/samples/snippet-expressions/child.svelte
Unescape View File

@ -0,0 +1,7 @@
<script>
let { snippets, snippet, optional } = $props();
</script>
{@render snippets[snippet]()}
<hr>
{@render optional?.()}

17
packages/svelte/tests/runtime-runes/samples/snippet-expressions/main.svelte
Unescape View File

@ -0,0 +1,17 @@
<script>
import Child from './child.svelte';
let snippet = $state(0);
let show = $state(false);
</script>
{#snippet foo()}
<p>foo</p>
{/snippet}
{#snippet bar()}
<p>bar</p>
{/snippet}
<Child snippets={[foo, bar]} {snippet} optional={show ? foo : undefined} />
<button on:click={() => { snippet = 1; show = true; }}>toggle</button>

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

@ -475,7 +475,7 @@ declare module 'svelte/animate' {
}
declare module 'svelte/compiler' {
import type { AssignmentExpression, ClassDeclaration, Expression, FunctionDeclaration, Identifier, ImportDeclaration, ArrayExpression, MemberExpression, ObjectExpression, Pattern, ArrowFunctionExpression, VariableDeclaration, VariableDeclarator, FunctionExpression, Node, Program, SpreadElement } from 'estree';
import type { AssignmentExpression, ClassDeclaration, Expression, FunctionDeclaration, Identifier, ImportDeclaration, ArrayExpression, MemberExpression, ObjectExpression, Pattern, ArrowFunctionExpression, VariableDeclaration, VariableDeclarator, FunctionExpression, Node, Program, ChainExpression, SimpleCallExpression } from 'estree';
import type { Location } from 'locate-character';
import type { SourceMap } from 'magic-string';
import type { Context } from 'zimmerframe';
@ -1197,8 +1197,7 @@ declare module 'svelte/compiler' {
/** A `{@render foo(...)} tag */
interface RenderTag extends BaseNode {
type: 'RenderTag';
expression: Identifier;
arguments: Array<Expression | SpreadElement>;
expression: SimpleCallExpression | (ChainExpression & { expression: SimpleCallExpression });
}
type Tag = ExpressionTag | HtmlTag | ConstTag | DebugTag | RenderTag;

Write Preview
Loading…
Cancel
Save