feat: out of order rendering (#17038)

* WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * revert * note to self * unused * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * deprecate * update tests * lint * lint * WIP * WIP * fix * WIP * unused * deopt to ensure state is ready * fix * DRY * reduce diff * reduce diff * reduce diff * handle blocked attributes * WIP * pre-transform * tidy up * fix * WIP * WIP * fix: handle `<svelte:head>` rendered asynchronously * fix tests * fix * delay resolve * Revert "fix" This reverts commit 2e56cd7. * add error * simplify/fix hydration restoration * fix * use $state.eager mechanism for $effect.pending - way simpler and more robust * disable these warnings for now, too many false positives * fix * changeset was already merged * changeset * oops * lint * docs + tidy * prettier * robustify: logic inside memoizer and outside could get out of sync, introducing bugs. use equality comparison instead * oops * uncomment * use finally * use is_async --------- Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> Co-authored-by: Simon Holthausen <simon.holthausen@vercel.com>

Author: Rich-Harris

.changeset/bitter-rings-help.md

@@ -0,0 +1,5 @@
+---
+'svelte': minor
+---
+
+feat: out-of-order rendering

packages/svelte/src/compiler/phases/2-analyze/index.js

@@ -6,7 +6,12 @@ import { walk } from 'zimmerframe';
 import { parse } from '../1-parse/acorn.js';
 import * as e from '../../errors.js';
 import * as w from '../../warnings.js';
-import { extract_identifiers, has_await_expression } from '../../utils/ast.js';
+import {
+extract_identifiers,
+has_await_expression,
+object,
+unwrap_pattern
+} from '../../utils/ast.js';
 import * as b from '#compiler/builders';
 import { Scope, ScopeRoot, create_scopes, get_rune, set_scope } from '../scope.js';
 import check_graph_for_cycles from './utils/check_graph_for_cycles.js';
@@ -543,7 +548,13 @@ export function analyze_component(root, source, options) {
 snippet_renderers: new Map(),
 snippets: new Set(),
 async_deriveds: new Set(),
-pickled_awaits: new Set()
+pickled_awaits: new Set(),
+instance_body: {
+sync: [],
+async: [],
+declarations: [],
+hoisted: []
+}
 };
 
 if (!runes) {
@@ -676,6 +687,194 @@ export function analyze_component(root, source, options) {
 }
 }
 
+/**
+ * @param {ESTree.Node} expression
+ * @param {Scope} scope
+ * @param {Set<Binding>} touched
+ * @param {Set<ESTree.Node>} seen
+ */
+const touch = (expression, scope, touched, seen = new Set()) => {
+if (seen.has(expression)) return;
+seen.add(expression);
+
+walk(
+expression,
+{ scope },
+{
+ImportDeclaration(node) {},
+Identifier(node, context) {
+const parent = /** @type {ESTree.Node} */ (context.path.at(-1));
+if (is_reference(node, parent)) {
+const binding = context.state.scope.get(node.name);
+if (binding) {
+touched.add(binding);
+
+for (const assignment of binding.assignments) {
+touch(assignment.value, assignment.scope, touched, seen);
+}
+}
+}
+}
+}
+);
+};
+
+/**
+ * @param {ESTree.Node} node
+ * @param {Set<ESTree.Node>} seen
+ * @param {Set<Binding>} reads
+ * @param {Set<Binding>} writes
+ */
+const trace_references = (node, reads, writes, seen = new Set()) => {
+if (seen.has(node)) return;
+seen.add(node);
+
+/**
+ * @param {ESTree.Pattern} node
+ * @param {Scope} scope
+ */
+function update(node, scope) {
+for (const pattern of unwrap_pattern(node)) {
+const node = object(pattern);
+if (!node) return;
+
+const binding = scope.get(node.name);
+if (!binding) return;
+
+writes.add(binding);
+}
+}
+
+walk(
+node,
+{ scope: instance.scope },
+{
+_(node, context) {
+const scope = scopes.get(node);
+if (scope) {
+context.next({ scope });
+} else {
+context.next();
+}
+},
+AssignmentExpression(node, context) {
+update(node.left, context.state.scope);
+},
+UpdateExpression(node, context) {
+update(
+/** @type {ESTree.Identifier | ESTree.MemberExpression} */ (node.argument),
+context.state.scope
+);
+},
+CallExpression(node, context) {
+// for now, assume everything touched by the callee ends up mutating the object
+// TODO optimise this better
+
+// special case — no need to peek inside effects as they only run once async work has completed
+const rune = get_rune(node, context.state.scope);
+if (rune === '$effect') return;
+
+/** @type {Set<Binding>} */
+const touched = new Set();
+touch(node, context.state.scope, touched);
+
+for (const b of touched) {
+writes.add(b);
+}
+},
+// don't look inside functions until they are called
+ArrowFunctionExpression(_, context) {},
+FunctionDeclaration(_, context) {},
+FunctionExpression(_, context) {},
+Identifier(node, context) {
+const parent = /** @type {ESTree.Node} */ (context.path.at(-1));
+if (is_reference(node, parent)) {
+const binding = context.state.scope.get(node.name);
+if (binding) {
+reads.add(binding);
+}
+}
+}
+}
+);
+};
+
+let awaited = false;
+
+// TODO this should probably be attached to the scope?
+var promises = b.id('$$promises');
+
+/**
+ * @param {ESTree.Identifier} id
+ * @param {ESTree.Expression} blocker
+ */
+function push_declaration(id, blocker) {
+analysis.instance_body.declarations.push(id);
+
+const binding = /** @type {Binding} */ (instance.scope.get(id.name));
+binding.blocker = blocker;
+}
+
+for (let node of instance.ast.body) {
+if (node.type === 'ImportDeclaration') {
+analysis.instance_body.hoisted.push(node);
+continue;
+}
+
+if (node.type === 'ExportDefaultDeclaration' || node.type === 'ExportAllDeclaration') {
+// these can't exist inside `<script>` but TypeScript doesn't know that
+continue;
+}
+
+if (node.type === 'ExportNamedDeclaration') {
+if (node.declaration) {
+node = node.declaration;
+} else {
+continue;
+}
+}
+
+const has_await = has_await_expression(node);
+awaited ||= has_await;
+
+if (awaited && node.type !== 'FunctionDeclaration') {
+/** @type {Set<Binding>} */
+const reads = new Set(); // TODO we're not actually using this yet
+
+/** @type {Set<Binding>} */
+const writes = new Set();
+
+trace_references(node, reads, writes);
+
+const blocker = b.member(promises, b.literal(analysis.instance_body.async.length), true);
+
+for (const binding of writes) {
+binding.blocker = blocker;
+}
+
+if (node.type === 'VariableDeclaration') {
+for (const declarator of node.declarations) {
+for (const id of extract_identifiers(declarator.id)) {
+push_declaration(id, blocker);
+}
+
+// one declarator per declaration, makes things simpler
+analysis.instance_body.async.push({
+node: declarator,
+has_await
+});
+}
+} else if (node.type === 'ClassDeclaration') {
+push_declaration(node.id, blocker);
+analysis.instance_body.async.push({ node, has_await });
+} else {
+analysis.instance_body.async.push({ node, has_await });
+}
+} else {
+analysis.instance_body.sync.push(node);
+}
+}
+
 if (analysis.runes) {
 const props_refs = module.scope.references.get('$$props');
 if (props_refs) {

packages/svelte/src/compiler/phases/2-analyze/visitors/AwaitExpression.js

@@ -10,16 +10,13 @@ import * as e from '../../../errors.js';
 export function AwaitExpression(node, context) {
 const tla = context.state.ast_type === 'instance' && context.state.function_depth === 1;
 
-// preserve context for
-// a) top-level await and
-// b) awaits that precede other expressions in template or `$derived(...)`
+// preserve context for awaits that precede other expressions in template or `$derived(...)`
 if (
-tla ||
-(is_reactive_expression(
+is_reactive_expression(
 context.path,
 context.state.derived_function_depth === context.state.function_depth
 ) &&
-!is_last_evaluated_expression(context.path, node))
+!is_last_evaluated_expression(context.path, node)
 ) {
 context.state.analysis.pickled_awaits.add(node);
 }
@@ -145,6 +142,9 @@ function is_last_evaluated_expression(path, node) {
 if (node !== parent.expressions.at(-1)) return false;
 break;
 
+case 'VariableDeclarator':
+return true;
+
 default:
 return false;
 }

packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js

@@ -172,6 +172,7 @@ export function BindDirective(node, context) {
 }
 
 const binding = context.state.scope.get(left.name);
+node.metadata.binding = binding;
 
 if (assignee.type === 'Identifier') {
 // reassignment

packages/svelte/src/compiler/phases/2-analyze/visitors/SnippetBlock.js

@@ -81,8 +81,13 @@ export function SnippetBlock(node, context) {
 function can_hoist_snippet(scope, scopes, visited = new Set()) {
 for (const [reference] of scope.references) {
 const binding = scope.get(reference);
+if (!binding) continue;
 
-if (!binding || binding.scope.function_depth === 0) {
+if (binding.blocker) {
+return false;
+}
+
+if (binding.scope.function_depth === 0) {
 continue;
 }
 

packages/svelte/src/compiler/phases/3-transform/client/transform-client.js

@@ -33,7 +33,6 @@ import { FunctionExpression } from './visitors/FunctionExpression.js';
 import { HtmlTag } from './visitors/HtmlTag.js';
 import { Identifier } from './visitors/Identifier.js';
 import { IfBlock } from './visitors/IfBlock.js';
-import { ImportDeclaration } from './visitors/ImportDeclaration.js';
 import { KeyBlock } from './visitors/KeyBlock.js';
 import { LabeledStatement } from './visitors/LabeledStatement.js';
 import { LetDirective } from './visitors/LetDirective.js';
@@ -111,7 +110,6 @@ const visitors = {
 HtmlTag,
 Identifier,
 IfBlock,
-ImportDeclaration,
 KeyBlock,
 LabeledStatement,
 LetDirective,
@@ -153,7 +151,7 @@ export function client_component(analysis, options) {
 scope: analysis.module.scope,
 scopes: analysis.module.scopes,
 is_instance: false,
-hoisted: [b.import_all('$', 'svelte/internal/client')],
+hoisted: [b.import_all('$', 'svelte/internal/client'), ...analysis.instance_body.hoisted],
 node: /** @type {any} */ (null), // populated by the root node
 legacy_reactive_imports: [],
 legacy_reactive_statements: new Map(),
@@ -370,41 +368,22 @@ export function client_component(analysis, options) {
 analysis.reactive_statements.size > 0 ||
 component_returned_object.length > 0;
 
-if (analysis.instance.has_await) {
-if (should_inject_context && component_returned_object.length > 0) {
-component_block.body.push(b.var('$$exports'));
-}
-const body = b.block([
-...store_setup,
-...state.instance_level_snippets,
-.../** @type {ESTree.Statement[]} */ (instance.body),
-...(should_inject_context && component_returned_object.length > 0
-? [b.stmt(b.assignment('=', b.id('$$exports'), b.object(component_returned_object)))]
-: []),
-b.if(b.call('$.aborted'), b.return()),
-.../** @type {ESTree.Statement[]} */ (template.body)
-]);
-
-component_block.body.push(
-b.stmt(b.call(`$.async_body`, b.id('$$anchor'), b.arrow([b.id('$$anchor')], body, true)))
-);
-} else {
-component_block.body.push(
-...state.instance_level_snippets,
-.../** @type {ESTree.Statement[]} */ (instance.body)
-);
-if (should_inject_context && component_returned_object.length > 0) {
-component_block.body.push(b.var('$$exports', b.object(component_returned_object)));
-}
-component_block.body.unshift(...store_setup);
+component_block.body.push(
+...state.instance_level_snippets,
+.../** @type {ESTree.Statement[]} */ (instance.body)
+);
 
-if (!analysis.runes && analysis.needs_context) {
-component_block.body.push(b.stmt(b.call('$.init', analysis.immutable ? b.true : undefined)));
-}
+if (should_inject_context && component_returned_object.length > 0) {
+component_block.body.push(b.var('$$exports', b.object(component_returned_object)));
+}
+component_block.body.unshift(...store_setup);
 
-component_block.body.push(.../** @type {ESTree.Statement[]} */ (template.body));
+if (!analysis.runes && analysis.needs_context) {
+component_block.body.push(b.stmt(b.call('$.init', analysis.immutable ? b.true : undefined)));
 }
 
+component_block.body.push(.../** @type {ESTree.Statement[]} */ (template.body));
+
 if (analysis.needs_mutation_validation) {
 component_block.body.unshift(
 b.var('$$ownership_validator', b.call('$.create_ownership_validator', b.id('$$props')))

packages/svelte/src/compiler/phases/3-transform/client/types.d.ts

@@ -21,9 +21,6 @@ export interface ClientTransformState extends TransformState {
  */
 readonly in_constructor: boolean;
 
-/** `true` if we're transforming the contents of `<script>` */
-readonly is_instance: boolean;
-
 readonly transform: Record<
 string,
 {