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));
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 };
if (awaited) child_state.expression = awaited.metadata;
if (scope !== undefined && scope !== state.scope) child_state.scope = scope;
next(child_state);

@ -11,9 +11,10 @@ import { build_expression } from './shared/utils.js';
export function HtmlTag(node, context) {
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 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_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
if (node.metadata.expression.has_await) {
if (is_async) {
context.state.init.push(
b.stmt(
b.call(

@ -503,7 +503,6 @@ function merge_metadata(target, source) {
* @param {AST.ClassDirective[]} class_directives
* @param {ComponentContext} context
* @param {Memoizer} memoizer
* @return {ObjectExpression | Identifier}
*/
export function build_class_directives_object(
class_directives,
@ -530,7 +529,6 @@ export function build_class_directives_object(
* @param {AST.StyleDirective[]} style_directives
* @param {ComponentContext} context
* @param {Memoizer} memoizer
* @return {ObjectExpression | ArrayExpression | Identifier}}
*/
export function build_style_directives_object(
style_directives,
@ -556,7 +554,7 @@ export function build_style_directives_object(
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(
'$.attribute_effect',
element_id,
memoizer.blockers(),
b.arrow(ids, b.object(values)),
memoizer.sync_values(),
memoizer.async_values(),
@ -163,7 +164,7 @@ export function build_set_class(element, node_id, attribute, class_directives, c
/** @type {ObjectExpression | Identifier | undefined} */
let prev;
/** @type {ObjectExpression | Identifier | undefined} */
/** @type {Expression | undefined} */
let next;
if (class_directives.length) {

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

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

Loading…
Cancel
Save