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

chore: simplify SSR code (#17639)

Browse Source 
creates a few abstractions in the compiler code around common "if-else" scenarios, as well as introducing a new runtime render helper

---------

Co-authored-by: Simon Holthausen <simon.holthausen@vercel.com>
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
pull/17644/head
Rich Harris 8 months ago committed by GitHub
parent a75866f34d
commit f5304ec8c9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
21 changed files with 184 additions and 284 deletions
Show Stats Download Patch File Download Diff File

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

@ -120,34 +120,32 @@ export function Fragment(node, context) {
state.init.unshift(b.var(id, b.call('$.text'))); state.init.unshift(b.var(id, b.call('$.text')));
close = b.stmt(b.call('$.append', b.id('$$anchor'), id)); close = b.stmt(b.call('$.append', b.id('$$anchor'), id));
} else if (is_standalone) {
// no need to create a template, we can just use the existing block's anchor
process_children(trimmed, () => b.id('$$anchor'), false, { ...context, state });
} else { } else {
if (is_standalone) { /** @type {(is_text: boolean) => Expression} */
// no need to create a template, we can just use the existing block's anchor const expression = (is_text) => b.call('$.first_child', id, is_text && b.true);
process_children(trimmed, () => b.id('$$anchor'), false, { ...context, state });
} else {
/** @type {(is_text: boolean) => Expression} */
const expression = (is_text) => b.call('$.first_child', id, is_text && b.true);
process_children(trimmed, expression, false, { ...context, state });
let flags = TEMPLATE_FRAGMENT; process_children(trimmed, expression, false, { ...context, state });
if (state.template.needs_import_node) { let flags = TEMPLATE_FRAGMENT;
flags |= TEMPLATE_USE_IMPORT_NODE;
}
if (state.template.nodes.length === 1 && state.template.nodes[0].type === 'comment') { if (state.template.needs_import_node) {
// special case — we can use `$.comment` instead of creating a unique template flags |= TEMPLATE_USE_IMPORT_NODE;
state.init.unshift(b.var(id, b.call('$.comment'))); }
} else {
const template = transform_template(state, namespace, flags);
state.hoisted.push(b.var(template_name, template));
state.init.unshift(b.var(id, b.call(template_name))); if (state.template.nodes.length === 1 && state.template.nodes[0].type === 'comment') {
} // special case — we can use `$.comment` instead of creating a unique template
state.init.unshift(b.var(id, b.call('$.comment')));
} else {
const template = transform_template(state, namespace, flags);
state.hoisted.push(b.var(template_name, template));
close = b.stmt(b.call('$.append', b.id('$$anchor'), id)); state.init.unshift(b.var(id, b.call(template_name)));
} }
close = b.stmt(b.call('$.append', b.id('$$anchor'), id));
} }
} }

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

@ -41,7 +41,6 @@ import { TitleElement } from './visitors/TitleElement.js';
import { UpdateExpression } from './visitors/UpdateExpression.js'; import { UpdateExpression } from './visitors/UpdateExpression.js';
import { VariableDeclaration } from './visitors/VariableDeclaration.js'; import { VariableDeclaration } from './visitors/VariableDeclaration.js';
import { SvelteBoundary } from './visitors/SvelteBoundary.js'; import { SvelteBoundary } from './visitors/SvelteBoundary.js';
import { call_component_renderer } from './visitors/shared/utils.js';
/** @type {Visitors} */ /** @type {Visitors} */
const global_visitors = { const global_visitors = {
@ -105,7 +104,7 @@ export function server_component(analysis, options) {
namespace: options.namespace, namespace: options.namespace,
preserve_whitespace: options.preserveWhitespace, preserve_whitespace: options.preserveWhitespace,
state_fields: new Map(), state_fields: new Map(),
skip_hydration_boundaries: false, is_standalone: false,
is_instance: false is_instance: false
}; };
@ -260,7 +259,13 @@ export function server_component(analysis, options) {
if (should_inject_context) { if (should_inject_context) {
component_block = b.block([ component_block = b.block([
call_component_renderer(component_block, dev && b.id(component_name)) b.stmt(
b.call(
'$$renderer.component',
b.arrow([b.id('$$renderer')], component_block, false),
dev && b.id(component_name)
)
)
]); ]);
} }

3
packages/svelte/src/compiler/phases/3-transform/server/types.d.ts vendored
Unescape View File

@ -26,7 +26,8 @@ export interface ComponentServerTransformState extends ServerTransformState {
readonly template: Array<Statement | Expression>; readonly template: Array<Statement | Expression>;
readonly namespace: Namespace; readonly namespace: Namespace;
readonly preserve_whitespace: boolean; readonly preserve_whitespace: boolean;
readonly skip_hydration_boundaries: boolean; /** True if the current node is a) a component or render tag and b) the sole child of a block */
readonly is_standalone: boolean;
/** Transformed async `{@const }` declarations (if any) and those coming after them */ /** Transformed async `{@const }` declarations (if any) and those coming after them */
async_consts?: { async_consts?: {
id: Identifier; id: Identifier;

15
packages/svelte/src/compiler/phases/3-transform/server/visitors/AwaitBlock.js
Unescape View File

@ -2,7 +2,7 @@
/** @import { AST } from '#compiler' */ /** @import { AST } from '#compiler' */
/** @import { ComponentContext } from '../types.js' */ /** @import { ComponentContext } from '../types.js' */
import * as b from '#compiler/builders'; import * as b from '#compiler/builders';
import { block_close, create_async_block } from './shared/utils.js'; import { block_close, create_child_block } from './shared/utils.js';
/** /**
* @param {AST.AwaitBlock} node * @param {AST.AwaitBlock} node
@ -25,13 +25,12 @@ export function AwaitBlock(node, context) {
) )
); );
if (node.metadata.expression.is_async()) { context.state.template.push(
statement = create_async_block( ...create_child_block(
b.block([statement]), [statement],
node.metadata.expression.blockers(), node.metadata.expression.blockers(),
node.metadata.expression.has_await node.metadata.expression.has_await
); ),
} block_close
);
context.state.template.push(statement, block_close);
} }

30
packages/svelte/src/compiler/phases/3-transform/server/visitors/EachBlock.js
Unescape View File

@ -2,7 +2,7 @@
/** @import { AST } from '#compiler' */ /** @import { AST } from '#compiler' */
/** @import { ComponentContext } from '../types.js' */ /** @import { ComponentContext } from '../types.js' */
import * as b from '#compiler/builders'; import * as b from '#compiler/builders';
import { block_close, block_open, block_open_else, create_async_block } from './shared/utils.js'; import { block_close, block_open, block_open_else, create_child_block } from './shared/utils.js';
/** /**
* @param {AST.EachBlock} node * @param {AST.EachBlock} node
@ -18,8 +18,8 @@ export function EachBlock(node, context) {
const array_id = state.scope.root.unique('each_array'); const array_id = state.scope.root.unique('each_array');
/** @type {Statement} */ /** @type {Statement[]} */
let block = b.block([b.const(array_id, b.call('$.ensure_array_like', collection))]); let statements = [b.const(array_id, b.call('$.ensure_array_like', collection))];
/** @type {Statement[]} */ /** @type {Statement[]} */
const each = []; const each = [];
@ -53,7 +53,7 @@ export function EachBlock(node, context) {
fallback.body.unshift(b.stmt(b.call(b.id('$$renderer.push'), block_open_else))); fallback.body.unshift(b.stmt(b.call(b.id('$$renderer.push'), block_open_else)));
block.body.push( statements.push(
b.if( b.if(
b.binary('!==', b.member(array_id, 'length'), b.literal(0)), b.binary('!==', b.member(array_id, 'length'), b.literal(0)),
b.block([open, for_loop]), b.block([open, for_loop]),
@ -62,19 +62,15 @@ export function EachBlock(node, context) {
); );
} else { } else {
state.template.push(block_open); state.template.push(block_open);
block.body.push(for_loop); statements.push(for_loop);
} }
if (node.metadata.expression.is_async()) { state.template.push(
state.template.push( ...create_child_block(
create_async_block( statements,
block, node.metadata.expression.blockers(),
node.metadata.expression.blockers(), node.metadata.expression.has_await
node.metadata.expression.has_await ),
), block_close
block_close );
);
} else {
state.template.push(...block.body, block_close);
}
} }

2
packages/svelte/src/compiler/phases/3-transform/server/visitors/Fragment.js
Unescape View File

@ -28,7 +28,7 @@ export function Fragment(node, context) {
init: [], init: [],
template: [], template: [],
namespace, namespace,
skip_hydration_boundaries: is_standalone, is_standalone,
async_consts: undefined async_consts: undefined
}; };

25
packages/svelte/src/compiler/phases/3-transform/server/visitors/HtmlTag.js
Unescape View File

@ -2,25 +2,24 @@
/** @import { AST } from '#compiler' */ /** @import { AST } from '#compiler' */
/** @import { ComponentContext } from '../types.js' */ /** @import { ComponentContext } from '../types.js' */
import * as b from '#compiler/builders'; import * as b from '#compiler/builders';
import { block_close, block_open, create_push } from './shared/utils.js'; import { create_child_block } from './shared/utils.js';
/** /**
* @param {AST.HtmlTag} node * @param {AST.HtmlTag} node
* @param {ComponentContext} context * @param {ComponentContext} context
*/ */
export function HtmlTag(node, context) { export function HtmlTag(node, context) {
const expression = /** @type {Expression} */ (context.visit(node.expression)); const expression = b.call('$.html', /** @type {Expression} */ (context.visit(node.expression)));
const call = b.call('$.html', expression);
const has_await = node.metadata.expression.has_await; if (node.metadata.expression.is_async()) {
context.state.template.push(
if (has_await) { ...create_child_block(
context.state.template.push(block_open); [b.stmt(b.call('$$renderer.push', expression))],
} node.metadata.expression.blockers(),
node.metadata.expression.has_await
context.state.template.push(create_push(call, node.metadata.expression, true)); )
);
if (has_await) { } else {
context.state.template.push(block_close); context.state.template.push(expression);
} }
} }

21
packages/svelte/src/compiler/phases/3-transform/server/visitors/IfBlock.js
Unescape View File

@ -2,7 +2,7 @@
/** @import { AST } from '#compiler' */ /** @import { AST } from '#compiler' */
/** @import { ComponentContext } from '../types.js' */ /** @import { ComponentContext } from '../types.js' */
import * as b from '#compiler/builders'; import * as b from '#compiler/builders';
import { block_close, block_open, block_open_else, create_async_block } from './shared/utils.js'; import { block_close, block_open, block_open_else, create_child_block } from './shared/utils.js';
/** /**
* @param {AST.IfBlock} node * @param {AST.IfBlock} node
@ -23,17 +23,12 @@ export function IfBlock(node, context) {
/** @type {Statement} */ /** @type {Statement} */
let statement = b.if(test, consequent, alternate); let statement = b.if(test, consequent, alternate);
const is_async = node.metadata.expression.is_async(); context.state.template.push(
...create_child_block(
const has_await = node.metadata.expression.has_await; [statement],
if (is_async || has_await) {
statement = create_async_block(
b.block([statement]),
node.metadata.expression.blockers(), node.metadata.expression.blockers(),
!!has_await node.metadata.expression.has_await
); ),
} block_close
);
context.state.template.push(statement, block_close);
} }

55
packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js
Unescape View File

@ -1,5 +1,4 @@
/** @import { Expression } from 'estree' */ /** @import { Expression } from 'estree' */
/** @import { Location } from 'locate-character' */
/** @import { AST } from '#compiler' */ /** @import { AST } from '#compiler' */
/** @import { ComponentContext, ComponentServerTransformState } from '../types.js' */ /** @import { ComponentContext, ComponentServerTransformState } from '../types.js' */
/** @import { Scope } from '../../../scope.js' */ /** @import { Scope } from '../../../scope.js' */
@ -8,13 +7,7 @@ import { dev, locator } from '../../../../state.js';
import * as b from '#compiler/builders'; import * as b from '#compiler/builders';
import { clean_nodes, determine_namespace_for_children } from '../../utils.js'; import { clean_nodes, determine_namespace_for_children } from '../../utils.js';
import { build_element_attributes, prepare_element_spread_object } from './shared/element.js'; import { build_element_attributes, prepare_element_spread_object } from './shared/element.js';
import { import { process_children, build_template, PromiseOptimiser } from './shared/utils.js';
process_children,
build_template,
create_child_block,
PromiseOptimiser,
create_async_block
} from './shared/utils.js';
import { is_customizable_select_element } from '../../../nodes.js'; import { is_customizable_select_element } from '../../../nodes.js';
/** /**
@ -66,17 +59,9 @@ export function RegularElement(node, context) {
b.literal(`</${node.name}>`) b.literal(`</${node.name}>`)
); );
// TODO this is a real edge case, would be good to DRY this out context.state.template.push(
if (optimiser.expressions.length > 0) { ...optimiser.render([...state.init, ...build_template(state.template)])
context.state.template.push( );
create_child_block(
b.block([optimiser.apply(), ...state.init, ...build_template(state.template)])
)
);
} else {
context.state.init.push(...state.init);
context.state.template.push(...state.template);
}
return; return;
} }
@ -130,13 +115,7 @@ export function RegularElement(node, context) {
const statement = b.stmt(b.call('$$renderer.select', attributes, fn, ...rest)); const statement = b.stmt(b.call('$$renderer.select', attributes, fn, ...rest));
if (optimiser.expressions.length > 0) { context.state.template.push(...optimiser.render([...state.init, statement]));
context.state.template.push(
create_child_block(b.block([optimiser.apply(), ...state.init, statement]))
);
} else {
context.state.template.push(...state.init, statement);
}
return; return;
} }
@ -183,13 +162,7 @@ export function RegularElement(node, context) {
const statement = b.stmt(b.call('$$renderer.option', attributes, body, ...rest)); const statement = b.stmt(b.call('$$renderer.option', attributes, body, ...rest));
if (optimiser.expressions.length > 0) { context.state.template.push(...optimiser.render([...state.init, statement]));
context.state.template.push(
create_child_block(b.block([optimiser.apply(), ...state.init, statement]))
);
} else {
context.state.template.push(...state.init, statement);
}
return; return;
} }
@ -235,19 +208,9 @@ export function RegularElement(node, context) {
} }
if (optimiser.is_async()) { if (optimiser.is_async()) {
let statements = [...state.init, ...build_template(state.template)]; context.state.template.push(
...optimiser.render([...state.init, ...build_template(state.template)])
if (optimiser.has_await) { );
statements = [create_child_block(b.block([optimiser.apply(), ...statements]))];
}
const blockers = optimiser.blockers();
if (blockers.elements.length > 0) {
statements = [create_async_block(b.block(statements), blockers, false, false)];
}
context.state.template.push(...statements);
} else { } else {
context.state.init.push(...state.init); context.state.init.push(...state.init);
context.state.template.push(...state.template); context.state.template.push(...state.template);

14
packages/svelte/src/compiler/phases/3-transform/server/visitors/RenderTag.js
Unescape View File

@ -3,7 +3,7 @@
/** @import { ComponentContext } from '../types.js' */ /** @import { ComponentContext } from '../types.js' */
import { unwrap_optional } from '../../../../utils/ast.js'; import { unwrap_optional } from '../../../../utils/ast.js';
import * as b from '#compiler/builders'; import * as b from '#compiler/builders';
import { create_async_block, empty_comment, PromiseOptimiser } from './shared/utils.js'; import { empty_comment, PromiseOptimiser } from './shared/utils.js';
/** /**
* @param {AST.RenderTag} node * @param {AST.RenderTag} node
@ -35,17 +35,9 @@ export function RenderTag(node, context) {
) )
); );
if (optimiser.is_async()) { context.state.template.push(...optimiser.render_block([statement]));
statement = create_async_block(
b.block([optimiser.apply(), statement]),
optimiser.blockers(),
optimiser.has_await
);
}
context.state.template.push(statement);
if (!context.state.skip_hydration_boundaries) { if (!context.state.is_standalone) {
context.state.template.push(empty_comment); context.state.template.push(empty_comment);
} }
} }

11
packages/svelte/src/compiler/phases/3-transform/server/visitors/SlotElement.js
Unescape View File

@ -5,7 +5,6 @@ import * as b from '#compiler/builders';
import { import {
build_attribute_value, build_attribute_value,
PromiseOptimiser, PromiseOptimiser,
create_async_block,
block_open, block_open,
block_close block_close
} from './shared/utils.js'; } from './shared/utils.js';
@ -65,13 +64,5 @@ export function SlotElement(node, context) {
fallback fallback
); );
const statement = optimiser.is_async() context.state.template.push(block_open, ...optimiser.render_block([b.stmt(slot)]), block_close);
? create_async_block(
b.block([optimiser.apply(), b.stmt(slot)]),
optimiser.blockers(),
optimiser.has_await
)
: b.stmt(slot);
context.state.template.push(block_open, statement, block_close);
} }

53
packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteElement.js
Unescape View File

@ -1,4 +1,3 @@
/** @import { Location } from 'locate-character' */
/** @import { BlockStatement, Expression, Statement } from 'estree' */ /** @import { BlockStatement, Expression, Statement } from 'estree' */
/** @import { AST } from '#compiler' */ /** @import { AST } from '#compiler' */
/** @import { ComponentContext } from '../types.js' */ /** @import { ComponentContext } from '../types.js' */
@ -6,12 +5,7 @@ import { dev, locator } from '../../../../state.js';
import * as b from '#compiler/builders'; import * as b from '#compiler/builders';
import { determine_namespace_for_children } from '../../utils.js'; import { determine_namespace_for_children } from '../../utils.js';
import { build_element_attributes } from './shared/element.js'; import { build_element_attributes } from './shared/element.js';
import { import { build_template, create_child_block, PromiseOptimiser } from './shared/utils.js';
build_template,
create_async_block,
create_child_block,
PromiseOptimiser
} from './shared/utils.js';
/** /**
* @param {AST.SvelteElement} node * @param {AST.SvelteElement} node
@ -67,36 +61,29 @@ export function SvelteElement(node, context) {
const attributes = b.block([...state.init, ...build_template(state.template)]); const attributes = b.block([...state.init, ...build_template(state.template)]);
const children = /** @type {BlockStatement} */ (context.visit(node.fragment, state)); const children = /** @type {BlockStatement} */ (context.visit(node.fragment, state));
/** @type {Statement} */ statements.push(
let statement = b.stmt( ...optimiser.render([
b.call( b.stmt(
'$.element', b.call(
b.id('$$renderer'), '$.element',
tag, b.id('$$renderer'),
attributes.body.length > 0 && b.thunk(attributes), tag,
children.body.length > 0 && b.thunk(children) attributes.body.length > 0 && b.thunk(attributes),
) children.body.length > 0 && b.thunk(children)
)
)
])
); );
if (optimiser.expressions.length > 0) {
statement = create_child_block(b.block([optimiser.apply(), statement]));
}
statements.push(statement);
if (dev) { if (dev) {
statements.push(b.stmt(b.call('$.pop_element'))); statements.push(b.stmt(b.call('$.pop_element')));
} }
if (node.metadata.expression.is_async()) { context.state.template.push(
statements = [ ...create_child_block(
create_async_block( statements,
b.block(statements), node.metadata.expression.blockers(),
node.metadata.expression.blockers(), node.metadata.expression.has_await
node.metadata.expression.has_await )
) );
];
}
context.state.template.push(...statements);
} }

41
packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/component.js
Unescape View File

@ -1,12 +1,7 @@
/** @import { BlockStatement, Expression, Pattern, Property, SequenceExpression, Statement } from 'estree' */ /** @import { BlockStatement, Expression, Pattern, Property, SequenceExpression, Statement } from 'estree' */
/** @import { AST } from '#compiler' */ /** @import { AST } from '#compiler' */
/** @import { ComponentContext } from '../../types.js' */ /** @import { ComponentContext } from '../../types.js' */
import { import { empty_comment, build_attribute_value, PromiseOptimiser } from './utils.js';
empty_comment,
build_attribute_value,
create_async_block,
PromiseOptimiser
} from './utils.js';
import * as b from '#compiler/builders'; import * as b from '#compiler/builders';
import { is_element_node } from '../../../../nodes.js'; import { is_element_node } from '../../../../nodes.js';
import { dev } from '../../../../../state.js'; import { dev } from '../../../../../state.js';
@ -325,32 +320,16 @@ export function build_inline_component(node, expression, context) {
optimiser.check_blockers(node.metadata.expression); optimiser.check_blockers(node.metadata.expression);
} }
const is_async = optimiser.is_async(); context.state.template.push(
...optimiser.render_block([
if (is_async) { dynamic && custom_css_props.length === 0
statement = create_async_block( ? b.stmt(b.call('$$renderer.push', empty_comment))
b.block([ : b.empty,
optimiser.apply(), statement
dynamic && custom_css_props.length === 0 ])
? b.stmt(b.call('$$renderer.push', empty_comment)) );
: b.empty,
statement
]),
optimiser.blockers(),
optimiser.has_await
);
} else if (dynamic && custom_css_props.length === 0) {
context.state.template.push(empty_comment);
}
context.state.template.push(statement);
if ( if (!optimiser.is_async() && !context.state.is_standalone && custom_css_props.length === 0) {
!is_async &&
!context.state.skip_hydration_boundaries &&
custom_css_props.length === 0 &&
optimiser.expressions.length === 0
) {
context.state.template.push(empty_comment); context.state.template.push(empty_comment);
} }
} }

118
packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/utils.js
Unescape View File

@ -81,7 +81,19 @@ export function process_children(nodes, { visit, state }) {
flush(); flush();
const expression = /** @type {Expression} */ (visit(node.expression)); const expression = /** @type {Expression} */ (visit(node.expression));
state.template.push(create_push(b.call('$.escape', expression), node.metadata.expression));
let call = b.call(
'$$renderer.push',
b.thunk(b.call('$.escape', expression), node.metadata.expression.has_await)
);
const blockers = node.metadata.expression.blockers();
if (blockers.elements.length > 0) {
call = b.call('$$renderer.async', blockers, b.arrow([b.id('$$renderer')], call));
}
state.template.push(b.stmt(call));
} else if (node.type === 'Text' || node.type === 'Comment' || node.type === 'ExpressionTag') { } else if (node.type === 'Text' || node.type === 'Comment' || node.type === 'ExpressionTag') {
sequence.push(node); sequence.push(node);
} else { } else {
@ -262,72 +274,20 @@ export function build_getter(node, state) {
} }
/** /**
* Creates a `$$renderer.child(...)` expression statement * @param {Statement[]} statements
* @param {BlockStatement | Expression} body
* @returns {Statement}
*/
export function create_child_block(body) {
return b.stmt(b.call('$$renderer.child', b.arrow([b.id('$$renderer')], body, true)));
}
/**
* Creates a `$$renderer.async(...)` expression statement
* @param {BlockStatement | Expression} body
* @param {ArrayExpression} blockers * @param {ArrayExpression} blockers
* @param {boolean} has_await * @param {boolean} has_await
* @param {boolean} needs_hydration_markers
*/ */
export function create_async_block( export function create_child_block(statements, blockers, has_await) {
body, if (blockers.elements.length === 0 && !has_await) {
blockers = b.array([]), return statements;
has_await = true,
needs_hydration_markers = true
) {
return b.stmt(
b.call(
needs_hydration_markers ? '$$renderer.async_block' : '$$renderer.async',
blockers,
b.arrow([b.id('$$renderer')], body, has_await)
)
);
}
/**
* @param {Expression} expression
* @param {ExpressionMetadata} metadata
* @param {boolean} needs_hydration_markers
* @returns {Expression | Statement}
*/
export function create_push(expression, metadata, needs_hydration_markers = false) {
if (metadata.is_async()) {
let statement = b.stmt(b.call('$$renderer.push', b.thunk(expression, metadata.has_await)));
const blockers = metadata.blockers();
if (blockers.elements.length > 0) {
statement = create_async_block(
b.block([statement]),
blockers,
false,
needs_hydration_markers
);
}
return statement;
} }
return expression; const fn = b.arrow([b.id('$$renderer')], b.block(statements), has_await);
}
/** return blockers.elements.length > 0
* @param {BlockStatement | Expression} body ? [b.stmt(b.call('$$renderer.async_block', blockers, fn))]
* @param {Identifier | false} component_fn_id : [b.stmt(b.call('$$renderer.child_block', fn))];
* @returns {Statement}
*/
export function call_component_renderer(body, component_fn_id) {
return b.stmt(
b.call('$$renderer.component', b.arrow([b.id('$$renderer')], body, false), component_fn_id)
);
} }
/** /**
@ -373,7 +333,7 @@ export class PromiseOptimiser {
} }
} }
apply() { #apply() {
if (this.expressions.length === 0) { if (this.expressions.length === 0) {
return b.empty; return b.empty;
} }
@ -403,4 +363,38 @@ export class PromiseOptimiser {
is_async() { is_async() {
return this.expressions.length > 0 || this.#blockers.size > 0; return this.expressions.length > 0 || this.#blockers.size > 0;
} }
/**
* @param {Statement[]} statements
* @returns {Statement[]}
*/
render(statements) {
if (!this.is_async()) {
return statements;
}
const fn = b.arrow(
[b.id('$$renderer')],
b.block([this.#apply(), ...statements]),
this.has_await
);
const blockers = this.blockers();
return blockers.elements.length > 0
? [b.stmt(b.call('$$renderer.async', blockers, fn))]
: [b.stmt(b.call('$$renderer.child', fn))];
}
/**
* @param {Statement[]} statements
* @returns {Statement[]}
*/
render_block(statements) {
if (!this.is_async()) {
return statements;
}
return create_child_block([this.#apply(), ...statements], this.blockers(), this.has_await);
}
} }

9
packages/svelte/src/internal/server/renderer.js
Unescape View File

@ -171,6 +171,15 @@ export class Renderer {
return promises; return promises;
} }
/**
* @param {(renderer: Renderer) => MaybePromise<void>} fn
*/
child_block(fn) {
this.#out.push(BLOCK_OPEN);
this.child(fn);
this.#out.push(BLOCK_CLOSE);
}
/** /**
* Create a child renderer. The child renderer inherits the state from the parent, * Create a child renderer. The child renderer inherits the state from the parent,
* but has its own content. * but has its own content.

6
packages/svelte/tests/snapshot/samples/async-const/_expected/server/index.svelte.js
Unescape View File

@ -19,11 +19,7 @@ export default function Async_const($$renderer) {
]); ]);
$$renderer.push(`<p>`); $$renderer.push(`<p>`);
$$renderer.async([promises[1]], ($$renderer) => $$renderer.push(() => $.escape(b)));
$$renderer.async([promises[1]], ($$renderer) => {
$$renderer.push(() => $.escape(b));
});
$$renderer.push(`</p>`); $$renderer.push(`</p>`);
} else { } else {
$$renderer.push('<!--[!-->'); $$renderer.push('<!--[!-->');

2
packages/svelte/tests/snapshot/samples/async-each-fallback-hoisting/_expected/server/index.svelte.js
Unescape View File

@ -2,7 +2,7 @@ import 'svelte/internal/flags/async';
import * as $ from 'svelte/internal/server'; import * as $ from 'svelte/internal/server';
export default function Async_each_fallback_hoisting($$renderer) { export default function Async_each_fallback_hoisting($$renderer) {
$$renderer.async_block([], async ($$renderer) => { $$renderer.child_block(async ($$renderer) => {
const each_array = $.ensure_array_like((await $.save(Promise.resolve([])))()); const each_array = $.ensure_array_like((await $.save(Promise.resolve([])))());
if (each_array.length !== 0) { if (each_array.length !== 0) {

2
packages/svelte/tests/snapshot/samples/async-each-hoisting/_expected/server/index.svelte.js
Unescape View File

@ -8,7 +8,7 @@ export default function Async_each_hoisting($$renderer) {
$$renderer.push(`<!--[-->`); $$renderer.push(`<!--[-->`);
$$renderer.async_block([], async ($$renderer) => { $$renderer.child_block(async ($$renderer) => {
const each_array = $.ensure_array_like((await $.save(Promise.resolve([first, second, third])))()); const each_array = $.ensure_array_like((await $.save(Promise.resolve([first, second, third])))());
for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) { for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {

2
packages/svelte/tests/snapshot/samples/async-if-alternate-hoisting/_expected/server/index.svelte.js
Unescape View File

@ -2,7 +2,7 @@ import 'svelte/internal/flags/async';
import * as $ from 'svelte/internal/server'; import * as $ from 'svelte/internal/server';
export default function Async_if_alternate_hoisting($$renderer) { export default function Async_if_alternate_hoisting($$renderer) {
$$renderer.async_block([], async ($$renderer) => { $$renderer.child_block(async ($$renderer) => {
if ((await $.save(Promise.resolve(false)))()) { if ((await $.save(Promise.resolve(false)))()) {
$$renderer.push('<!--[-->'); $$renderer.push('<!--[-->');
$$renderer.push(async () => $.escape(await Promise.reject('no no no'))); $$renderer.push(async () => $.escape(await Promise.reject('no no no')));

2
packages/svelte/tests/snapshot/samples/async-if-hoisting/_expected/server/index.svelte.js
Unescape View File

@ -2,7 +2,7 @@ import 'svelte/internal/flags/async';
import * as $ from 'svelte/internal/server'; import * as $ from 'svelte/internal/server';
export default function Async_if_hoisting($$renderer) { export default function Async_if_hoisting($$renderer) {
$$renderer.async_block([], async ($$renderer) => { $$renderer.child_block(async ($$renderer) => {
if ((await $.save(Promise.resolve(true)))()) { if ((await $.save(Promise.resolve(true)))()) {
$$renderer.push('<!--[-->'); $$renderer.push('<!--[-->');
$$renderer.push(async () => $.escape(await Promise.resolve('yes yes yes'))); $$renderer.push(async () => $.escape(await Promise.resolve('yes yes yes')));

6
packages/svelte/tests/snapshot/samples/async-top-level-inspect-server/_expected/server/index.svelte.js
Unescape View File

@ -6,10 +6,6 @@ export default function Async_top_level_inspect_server($$renderer) {
var $$promises = $$renderer.run([async () => data = await Promise.resolve(42),,]); var $$promises = $$renderer.run([async () => data = await Promise.resolve(42),,]);
$$renderer.push(`<p>`); $$renderer.push(`<p>`);
$$renderer.async([$$promises[1]], ($$renderer) => $$renderer.push(() => $.escape(data)));
$$renderer.async([$$promises[1]], ($$renderer) => {
$$renderer.push(() => $.escape(data));
});
$$renderer.push(`</p>`); $$renderer.push(`</p>`);
} }
Write Preview
Loading…
Cancel
Save