out-of-order-rendering
Rich Harris 2 days ago
parent 357eb8fa12
commit 9c3b79637b

@ -131,12 +131,10 @@ const visitors = {
ignore_map.set(node, structuredClone(ignore_stack)); ignore_map.set(node, structuredClone(ignore_stack));
const scope = state.scopes.get(node); const scope = state.scopes.get(node);
const awaited = state.analysis.awaited_statements.get(node) ?? null;
if (awaited || (scope !== undefined && scope !== state.scope)) { if (scope !== undefined && scope !== state.scope) {
const child_state = { ...state }; const child_state = { ...state };
if (awaited) child_state.expression = awaited.metadata;
if (scope !== undefined && scope !== state.scope) child_state.scope = scope; if (scope !== undefined && scope !== state.scope) child_state.scope = scope;
next(child_state); next(child_state);

@ -11,9 +11,10 @@ import { build_expression } from './shared/utils.js';
export function HtmlTag(node, context) { export function HtmlTag(node, context) {
context.state.template.push_comment(); context.state.template.push_comment();
const { has_await } = node.metadata.expression; const is_async = node.metadata.expression.is_async();
const expression = build_expression(context, node.expression, node.metadata.expression); const expression = build_expression(context, node.expression, node.metadata.expression);
const html = has_await ? b.call('$.get', b.id('$$html')) : expression; const html = is_async ? b.call('$.get', b.id('$$html')) : expression;
const is_svg = context.state.metadata.namespace === 'svg'; const is_svg = context.state.metadata.namespace === 'svg';
const is_mathml = context.state.metadata.namespace === 'mathml'; const is_mathml = context.state.metadata.namespace === 'mathml';
@ -30,7 +31,7 @@ export function HtmlTag(node, context) {
); );
// push into init, so that bindings run afterwards, which might trigger another run and override hydration // push into init, so that bindings run afterwards, which might trigger another run and override hydration
if (node.metadata.expression.has_await) { if (is_async) {
context.state.init.push( context.state.init.push(
b.stmt( b.stmt(
b.call( b.call(

@ -503,7 +503,6 @@ function merge_metadata(target, source) {
* @param {AST.ClassDirective[]} class_directives * @param {AST.ClassDirective[]} class_directives
* @param {ComponentContext} context * @param {ComponentContext} context
* @param {Memoizer} memoizer * @param {Memoizer} memoizer
* @return {ObjectExpression | Identifier}
*/ */
export function build_class_directives_object( export function build_class_directives_object(
class_directives, class_directives,
@ -530,7 +529,6 @@ export function build_class_directives_object(
* @param {AST.StyleDirective[]} style_directives * @param {AST.StyleDirective[]} style_directives
* @param {ComponentContext} context * @param {ComponentContext} context
* @param {Memoizer} memoizer * @param {Memoizer} memoizer
* @return {ObjectExpression | ArrayExpression | Identifier}}
*/ */
export function build_style_directives_object( export function build_style_directives_object(
style_directives, style_directives,
@ -556,7 +554,7 @@ export function build_style_directives_object(
const directives = important.properties.length ? b.array([normal, important]) : normal; const directives = important.properties.length ? b.array([normal, important]) : normal;
returnmemoizer.add(directives, metadata); return memoizer.add(directives, metadata);
} }
/** /**

@ -86,6 +86,7 @@ export function build_attribute_effect(
b.call( b.call(
'$.attribute_effect', '$.attribute_effect',
element_id, element_id,
memoizer.blockers(),
b.arrow(ids, b.object(values)), b.arrow(ids, b.object(values)),
memoizer.sync_values(), memoizer.sync_values(),
memoizer.async_values(), memoizer.async_values(),
@ -163,7 +164,7 @@ export function build_set_class(element, node_id, attribute, class_directives, c
/** @type {ObjectExpression | Identifier | undefined} */ /** @type {ObjectExpression | Identifier | undefined} */
let prev; let prev;
/** @type {ObjectExpression | Identifier | undefined} */ /** @type {Expression | undefined} */
let next; let next;
if (class_directives.length) { if (class_directives.length) {

@ -46,7 +46,7 @@ export function html(node, get_value, svg = false, mathml = false, skip_warning
var value = ''; var value = '';
template_effect(() => { template_effect([], () => {
var effect = /** @type {Effect} */ (active_effect); var effect = /** @type {Effect} */ (active_effect);
if (value === (value = get_value() ?? '')) { if (value === (value = get_value() ?? '')) {

@ -480,6 +480,7 @@ function set_attributes(
/** /**
* @param {Element & ElementCSSInlineStyle} element * @param {Element & ElementCSSInlineStyle} element
* @param {Array<Promise<void>>} blockers
* @param {(...expressions: any) => Record<string | symbol, any>} fn * @param {(...expressions: any) => Record<string | symbol, any>} fn
* @param {Array<() => any>} sync * @param {Array<() => any>} sync
* @param {Array<() => Promise<any>>} async * @param {Array<() => Promise<any>>} async
@ -489,6 +490,7 @@ function set_attributes(
*/ */
export function attribute_effect( export function attribute_effect(
element, element,
blockers,
fn, fn,
sync = [], sync = [],
async = [], async = [],
@ -496,7 +498,7 @@ export function attribute_effect(
should_remove_defaults = false, should_remove_defaults = false,
skip_warning = false skip_warning = false
) { ) {
flatten(sync, async, (values) => { flatten(blockers, sync, async, (values) => {
/** @type {Record<string | symbol, any> | undefined} */ /** @type {Record<string | symbol, any> | undefined} */
var prev = undefined; var prev = undefined;

Loading…
Cancel
Save