|
1 | | -/** @import { BlockStatement, Statement, Expression } from 'estree' */ |
| 1 | +/** @import { BlockStatement, Statement, Expression, FunctionDeclaration, VariableDeclaration, ArrowFunctionExpression } from 'estree' */ |
2 | 2 | /** @import { AST } from '#compiler' */ |
3 | 3 | /** @import { ComponentContext } from '../types' */ |
4 | 4 | import { dev } from '../../../../state.js'; |
@@ -34,62 +34,61 @@ export function SvelteBoundary(node, context) { |
34 | 34 | const nodes = []; |
35 | 35 |
|
36 | 36 | /** @type {Statement[]} */ |
37 | | - const external_statements = []; |
| 37 | + const const_tags = []; |
38 | 38 |
|
39 | 39 | /** @type {Statement[]} */ |
40 | | - const internal_statements = []; |
| 40 | + const hoisted = []; |
41 | 41 |
|
42 | | - const snippets_visits = []; |
| 42 | + // const tags need to live inside the boundary, but might also be referenced in hoisted snippets. |
| 43 | + // to resolve this we cheat: we duplicate const tags inside snippets |
| 44 | + for (const child of node.fragment.nodes) { |
| 45 | + if (child.type === 'ConstTag') { |
| 46 | + context.visit(child, { ...context.state, init: const_tags }); |
| 47 | + } |
| 48 | + } |
43 | 49 |
|
44 | | - // Capture the `failed` implicit snippet prop |
45 | 50 | for (const child of node.fragment.nodes) { |
46 | | - if (child.type === 'SnippetBlock' && child.expression.name === 'failed') { |
47 | | - // we need to delay the visit of the snippets in case they access a ConstTag that is declared |
48 | | - // after the snippets so that the visitor for the const tag can be updated |
49 | | - snippets_visits.push(() => { |
50 | | - /** @type {Statement[]} */ |
51 | | - const init = []; |
52 | | - context.visit(child, { ...context.state, init }); |
53 | | - props.properties.push(b.prop('init', child.expression, child.expression)); |
54 | | - external_statements.push(...init); |
55 | | - }); |
56 | | - } else if (child.type === 'ConstTag') { |
| 51 | + if (child.type === 'ConstTag') { |
| 52 | + continue; |
| 53 | + } |
| 54 | + |
| 55 | + if (child.type === 'SnippetBlock') { |
57 | 56 | /** @type {Statement[]} */ |
58 | | - const init = []; |
59 | | - context.visit(child, { ...context.state, init }); |
60 | | - |
61 | | - if (dev) { |
62 | | - // In dev we must separate the declarations from the code |
63 | | - // that eagerly evaluate the expression... |
64 | | - for (const statement of init) { |
65 | | - if (statement.type === 'VariableDeclaration') { |
66 | | - external_statements.push(statement); |
67 | | - } else { |
68 | | - internal_statements.push(statement); |
69 | | - } |
70 | | - } |
71 | | - } else { |
72 | | - external_statements.push(...init); |
| 57 | + const statements = []; |
| 58 | + |
| 59 | + context.visit(child, { ...context.state, init: statements }); |
| 60 | + |
| 61 | + const snippet = /** @type {VariableDeclaration} */ (statements[0]); |
| 62 | + |
| 63 | + const snippet_fn = dev |
| 64 | + ? // @ts-expect-error we know this shape is correct |
| 65 | + snippet.declarations[0].init.arguments[1] |
| 66 | + : snippet.declarations[0].init; |
| 67 | + |
| 68 | + snippet_fn.body.body.unshift( |
| 69 | + ...const_tags.filter((node) => node.type === 'VariableDeclaration') |
| 70 | + ); |
| 71 | + |
| 72 | + hoisted.push(snippet); |
| 73 | + |
| 74 | + if (child.expression.name === 'failed') { |
| 75 | + props.properties.push(b.prop('init', child.expression, child.expression)); |
73 | 76 | } |
74 | | - } else { |
75 | | - nodes.push(child); |
| 77 | + |
| 78 | + continue; |
76 | 79 | } |
77 | | - } |
78 | 80 |
|
79 | | - snippets_visits.forEach((visit) => visit()); |
| 81 | + nodes.push(child); |
| 82 | + } |
80 | 83 |
|
81 | 84 | const block = /** @type {BlockStatement} */ (context.visit({ ...node.fragment, nodes })); |
82 | 85 |
|
83 | | - if (dev && internal_statements.length) { |
84 | | - block.body.unshift(...internal_statements); |
85 | | - } |
| 86 | + block.body.unshift(...const_tags); |
86 | 87 |
|
87 | 88 | const boundary = b.stmt( |
88 | 89 | b.call('$.boundary', context.state.node, props, b.arrow([b.id('$$anchor')], block)) |
89 | 90 | ); |
90 | 91 |
|
91 | 92 | context.state.template.push_comment(); |
92 | | - context.state.init.push( |
93 | | - external_statements.length > 0 ? b.block([...external_statements, boundary]) : boundary |
94 | | - ); |
| 93 | + context.state.init.push(hoisted.length > 0 ? b.block([...hoisted, boundary]) : boundary); |
95 | 94 | } |
0 commit comments