octane 0.1.22 → 0.1.24

package/dist/compiler/compile-universal.js

@@ -3182,8 +3182,12 @@ function buildUniversalHmrBlocksAst(state, origin) {
 		return { prelude: [], tail: [] };
 	}
 	if (state.hmrDialect === 'webpack') {
-		const hot = importMetaMember('webpackHot', origin);
-		const prelude = [];
+		// Rspack only guarantees that the `import.meta.webpackHot` root is lowered.
+		// Keep `.data` and the HMR methods on an ordinary local so Rsbuild's React
+		// transform cannot turn a deeper meta-property chain into `undefined`.
+		const hotName = allocName(state, '__octaneWebpackHot');
+		const hot = generatedIdentifier(hotName, origin);
+		const prelude = [generatedConst(hotName, importMetaMember('webpackHot', origin), origin)];
 		const tail = [];
 		if (disposals.length === 0) {
 			const data = generatedIdentifier('data', origin);

package/dist/compiler/compile.js

@@ -41,7 +41,12 @@ import {
 import { print as esrapPrint } from 'esrap';
 import esrapTsx from 'esrap/languages/tsx';
 import { buildFatSegments } from './fat-segments.js';
-import { analyzeHookDependencies, applyHookDependencies, isInvariantLiteral } from './hook-deps.js';
+import {
+	METHOD_DEP_IMPORT,
+	analyzeHookDependencies,
+	applyHookDependencies,
+	isInvariantLiteral,
+} from './hook-deps.js';
 import { compileUniversal, UNIVERSAL_COMPILER_RUNTIME_IMPORTS } from './compile-universal.js';
 import {
 	expandDomRendererRegionsAst,
@@ -4404,6 +4409,31 @@ export function hasOwnValueReturn(node) {
 	return walk(body.body || []);
 }
 
+/**
+ * Whether a statement list always completes abruptly, so control can never fall
+ * past its end. Lets an outputless `@{ … }` body drop the tail return it would
+ * otherwise synthesize, because the body's own returns already cover every path.
+ *
+ * Deliberately syntactic: `return`, `throw`, a block that ends abruptly, and an
+ * if/else whose arms both do. Anything subtler keeps the tail, which is always
+ * safe — the runtime reads a fallen-through `undefined` as "this body already
+ * emitted its template", so the tail must stay wherever reachability is unproven.
+ */
+function alwaysCompletesAbruptly(statements) {
+	const last = statements[statements.length - 1];
+	if (!last) return false;
+	if (last.type === 'ReturnStatement' || last.type === 'ThrowStatement') return true;
+	if (last.type === 'BlockStatement') return alwaysCompletesAbruptly(last.body || []);
+	if (last.type === 'IfStatement') {
+		return (
+			!!last.alternate &&
+			alwaysCompletesAbruptly([last.consequent]) &&
+			alwaysCompletesAbruptly([last.alternate])
+		);
+	}
+	return false;
+}
+
 /**
  * A mixed shorthand's early return must always reach renderReturnedValue. The
  * runtime reserves `undefined` for a compiled-void body that already emitted its
@@ -6039,12 +6069,16 @@ function compileInternal(source, filename, options, analyzedAst, mode, bundlerMe
 			rendererBoundaryPreparation?.universalUnits,
 		),
 	});
+	let hookDepHelperNeeded = false;
 	ast = applyHookDependencies(ast, {
 		filename,
 		hookRuntimeModules: hookRuntimeModulesForCompile(
 			options,
 			rendererBoundaryPreparation?.universalUnits,
 		),
+		onRuntimeHelper: () => {
+			hookDepHelperNeeded = true;
+		},
 	});
 	const hmrOption = options && options.hmr;
 	const hmrDialect = hmrOption === true ? 'vite' : hmrOption || false;
@@ -6177,6 +6211,7 @@ function compileInternal(source, filename, options, analyzedAst, mode, bundlerMe
 		// single module print must carry a loc (OCTANE_COMPILE_ASSERT_LOC).
 		_moduleOrigin: ast.body.find((n) => n?.loc != null) ?? ast,
 	};
+	if (hookDepHelperNeeded) ctx.runtimeNeeded.add(METHOD_DEP_IMPORT);
 	{
 		const imports = collectOctaneImportBindings(ast.body);
 		ctx.octaneImportLocals = imports.locals;
@@ -6797,7 +6832,18 @@ function compileInternal(source, filename, options, analyzedAst, mode, bundlerMe
 			// it. Persist that canonical identity again for the next update. This keeps
 			// working across any number of edits; accept callbacks in webpack are error
 			// handlers, not Vite-style callbacks carrying the new module namespace.
-			const webpackHot = () => b.member(importMeta(), 'webpackHot');
+			// Keep every access after the recognized `import.meta.webpackHot` root on a
+			// local. Rspack's React/Rsbuild transform pipeline otherwise treats deeper
+			// expressions such as `import.meta.webpackHot.data` as unsupported even
+			// though it lowers the root itself to `module.hot`.
+			const webpackHotName = allocCompilerName(ctx, '_$webpackHot');
+			const webpackHot = () => b.id(webpackHotName);
+			hmrNodes.push(
+				inheritOriginLoc(
+					b.const(webpackHotName, b.member(importMeta(), 'webpackHot')),
+					moduleOrigin,
+				),
+			);
 			const previousComponent = (name, optional) =>
 				b.member(
 					b.member(
@@ -7097,9 +7143,13 @@ function compileServer(source, filename, options, analyzedAst = null) {
 	// Mirror the client transform exactly. Effects are server no-ops, but
 	// useMemo/useCallback execute during SSR and must receive the same inferred
 	// dependency shape as hydration's client compile.
+	let hookDepHelperNeeded = false;
 	ast = applyHookDependencies(ast, {
 		filename,
 		hookRuntimeModules: hookRuntimeModulesForCompile(options),
+		onRuntimeHelper: () => {
+			hookDepHelperNeeded = true;
+		},
 	});
 	const ctx = {
 		filename,
@@ -7143,6 +7193,7 @@ function compileServer(source, filename, options, analyzedAst = null) {
 		// Scaffolding without a more precise authored construct maps here.
 		_moduleOrigin: ast.body.find((n) => n?.loc != null) ?? ast,
 	};
+	if (hookDepHelperNeeded) ctx.runtimeNeeded.add(METHOD_DEP_IMPORT);
 	{
 		const imports = collectOctaneImportBindings(ast.body);
 		ctx.octaneImportLocals = imports.locals;
@@ -10562,10 +10613,20 @@ function compileFunctionBody(node, ctx, name, parentNs = 'html', cssHash = null,
 	const shellOrigin = node.loc ? node : node.id?.loc ? node.id : prevFnOrigin;
 	let plan = null;
 	let returnedExpression = null;
-	if (returnedOutput) {
-		const rendered = jsxNodes[0];
+	if (returnedOutput && jsxNodes.length === 0) {
+		// A `@{ … }` body can carry value returns with NO trailing output node —
+		// `@{ … return null }` while a component is being written, or a React-shaped
+		// `return <jsx>` inside the block. There is no template to lower: the body's
+		// own returns are the whole output, so the tail is a plain `null` covering
+		// the fall-through path. When the body provably never falls through, that
+		// tail is unreachable and is dropped. Statement returns already normalized
+		// to `?? null`.
+		if (!alwaysCompletesAbruptly(rewrittenStatements)) {
+			returnedExpression = b.literal(null, 'null', node);
+		}
+	} else if (returnedOutput) {
 		returnedExpression = lowerReturnJsx(
-			rewriteHookCalls(rendered, ctx, name, options?.localHookSlots === true),
+			rewriteHookCalls(jsxNodes[0], ctx, name, options?.localHookSlots === true),
 			ctx,
 			inlinedSubs,
 			cssHash,
@@ -16678,12 +16739,10 @@ function planJsx(
 			ctx.runtimeNeeded.add('queueRefDetach'); // unmount-detach of a spread-supplied ref
 		}
 		if (b.kind === 'ref') {
-			ctx.runtimeNeeded.add('attachRef');
 			ctx.runtimeNeeded.add('queueRefAttach'); // deferred mount attach (commit-phase timing)
 			ctx.runtimeNeeded.add('queueRefDetach'); // deferred unmount detach (same phasing)
 		}
 		if (b.kind === 'fragmentRef') {
-			ctx.runtimeNeeded.add('attachRef');
 			ctx.runtimeNeeded.add('mountFragmentRef');
 			ctx.runtimeNeeded.add('queueRefAttach'); // deferred update re-attach
 			ctx.runtimeNeeded.add('queueRefDetach'); // deferred update/unmount detach
@@ -18251,18 +18310,18 @@ function emitBindingMount(bind, elVar, bag) {
 			// bound element rides along as the cleanup target, so a callback ref
 			// shared across elements (ref={registerItem} on every @for row)
 			// releases ITS row's React-19 cleanup, not another row's.
-			// Both deferred closures read through the captured `_b` (committed by the
-			// time attach/cleanup run); `_ref$` must be a LIVE read — updates re-point it.
+			// Both deferred operations retain the bound element. `_ref$` must be a LIVE
+			// cleanup read because updates re-point it. Assigning both bag locals inside
+			// the queue call evaluates each mount value once while avoiding throwaway
+			// temporaries; Suspense still receives the exact ref/target pair.
 			return st(
 				b.block([
-					b.const('_r', bind.expr),
-					b.stmt(b.assignment('=', local(`_ref$${bind.id}`), b.id('_r'))),
-					b.stmt(b.assignment('=', local(`_el$${bind.id}`), el())),
 					b.stmt(
 						b.call(
 							'_$queueRefAttach',
 							b.id('__s'),
-							b.arrow([], b.call('_$attachRef', b.id('_r'), bagFieldNode(bag, `_el$${bind.id}`))),
+							b.assignment('=', local(`_ref$${bind.id}`), bind.expr),
+							b.assignment('=', local(`_el$${bind.id}`), el()),
 						),
 					),
 					cleanupsPush(
@@ -18286,22 +18345,13 @@ function emitBindingMount(bind, elVar, bag) {
 			// the user's ref, and registers a single cleanup that detaches
 			// the ref + destroys the instance on unmount.
 			return st(
-				b.block([
-					b.const('_r', bind.expr),
-					b.stmt(
-						b.assignment(
-							'=',
-							local(`_fi$${bind.id}`),
-							b.call(
-								'_$mountFragmentRef',
-								b.id('__s'),
-								el(),
-								hostVarNode(bind.endElVar),
-								b.id('_r'),
-							),
-						),
+				b.stmt(
+					b.assignment(
+						'=',
+						local(`_fi$${bind.id}`),
+						b.call('_$mountFragmentRef', b.id('__s'), el(), hostVarNode(bind.endElVar), bind.expr),
 					),
-				]),
+				),
 			);
 		}
 	}
@@ -18561,13 +18611,7 @@ function emitBindingUpdate(bind, bag) {
 							),
 							b.if(
 								b.binary('!=', b.id('_r'), nullNode()),
-								b.stmt(
-									b.call(
-										'_$queueRefAttach',
-										b.id('__s'),
-										b.arrow([], b.call('_$attachRef', b.id('_r'), F('_el'))),
-									),
-								),
+								b.stmt(b.call('_$queueRefAttach', b.id('__s'), b.id('_r'), F('_el'))),
 								null,
 							),
 							b.stmt(b.assignment('=', F('_ref'), b.id('_r'))),
@@ -18600,13 +18644,7 @@ function emitBindingUpdate(bind, bag) {
 							),
 							b.if(
 								b.binary('!=', b.id('_r'), nullNode()),
-								b.stmt(
-									b.call(
-										'_$queueRefAttach',
-										b.id('__s'),
-										b.arrow([], b.call('_$attachRef', b.id('_r'), fi())),
-									),
-								),
+								b.stmt(b.call('_$queueRefAttach', b.id('__s'), b.id('_r'), fi())),
 								null,
 							),
 							b.stmt(b.assignment('=', cur(), b.id('_r'))),

package/dist/compiler/hook-deps.js

@@ -819,10 +819,78 @@ function staticMemberInfo(node) {
 	return {
 		node: dependencyNode,
 		root,
+		name: current.property.name,
 		path: `${current.optional ? '?' : ''}.${current.property.name}`,
 	};
 }
 
+// Directive prologues that declare "this body executes in another context, not
+// during render" — a nested function carrying one contributes only its ROOT
+// captures to an inferred dependency array, because hoisting its member reads
+// to render time would run getters in a context where they may be illegal
+// (issue #542: TypeGPU's `.$` is only readable inside `'use gpu'` shader code)
+// and at a moment the program never performs them.
+//
+// This is a deliberate ALLOWLIST, not "any directive": directives that mark
+// same-context compiler hints (`'use strict'`, React Compiler's `'use memo'` /
+// `'use no memo'`, `'use signals'`) or reserved module/function markers with
+// their own semantics (`'use server'`, `'use client'`, `'use cache'`,
+// `'use workflow'`/`'use step'`) must NOT truncate. Extend the set as more
+// other-context directives appear in the ecosystem.
+//
+//   'use gpu'  — TypeGPU shader functions (transpiled, run on the GPU).
+//   'worklet'  — react-native-reanimated / react-native-worklets-core bodies,
+//                serialized and executed on a separate UI-thread runtime.
+const OPAQUE_EXECUTION_DIRECTIVES = new Set(['use gpu', 'worklet']);
+
+// A directive prologue is the run of leading string-literal expression
+// statements. Parsers implementing ESTree stamp `directive` on those
+// statements; fall back to the literal value where they don't.
+function hasOpaqueExecutionDirective(fn) {
+	if (fn.body?.type !== 'BlockStatement') return false;
+	for (const statement of fn.body.body || []) {
+		if (statement.type !== 'ExpressionStatement') return false;
+		const expression = unwrapValue(statement.expression);
+		const value =
+			statement.directive ??
+			(expression?.type === 'Literal' && typeof expression.value === 'string'
+				? expression.value
+				: null);
+		if (value === null) return false;
+		if (OPAQUE_EXECUTION_DIRECTIVES.has(value)) return true;
+	}
+	return false;
+}
+
+// The `octane` runtime export inferred method-call dependencies compile to.
+// Both emitters alias it: the full compiler through `ctx.runtimeNeeded` (its
+// `_$`-prefixed rtAlias convention is baked into methodDepNode below) and the
+// surgical pass through its own helper-import allocator.
+export const METHOD_DEP_IMPORT = '__methodDep';
+
+// The emitted dependency expression for a one-level method call:
+// `_$__methodDep(root, 'name')` — own property ? member value : receiver (see
+// the runtime helper's contract in src/method-dep.ts). The call node carries
+// the authored member's source range so source maps and the surgical pass's
+// offset expectations stay anchored to the authored expression, while the
+// cloned root identifier keeps its own authored position.
+function methodDepNode(dependency) {
+	// Every synthesized node is stamped with the authored member's origin — the
+	// bundler print path asserts a loc on each printed node, including the
+	// helper's callee identifier.
+	const call = b.call(
+		b.id(`_$${METHOD_DEP_IMPORT}`, dependency.node),
+		{ ...dependency.method.root },
+		b.literal(dependency.method.name, JSON.stringify(dependency.method.name), dependency.node),
+	);
+	return {
+		...call,
+		start: dependency.node.start,
+		end: dependency.node.end,
+		loc: dependency.node.loc,
+	};
+}
+
 function collectDependencies(expression, callbackScope, analysis) {
 	const dependencies = [];
 	const seen = new Set();
@@ -863,6 +931,48 @@ function collectDependencies(expression, callbackScope, analysis) {
 		}
 	}
 
+	// A one-level member CALLED as a method. The member value alone cannot
+	// witness a changed receiver when the method is inherited (issue #542:
+	// `count.toFixed` is `Number.prototype.toFixed` on every render), and the
+	// receiver alone would defeat memoization for own function properties on
+	// per-render containers (`props.onChange(...)`). Record the pair and let the
+	// emitted `__methodDep(root, 'name')` helper pick the comparable value at
+	// runtime. Deeper callees (`a.b.c(...)`) never reach here: their receiver
+	// path is recorded by the ordinary member walk, which cannot capture the
+	// method itself, so they were never exposed to the stale-method hazard.
+	function addMethodCall(info) {
+		const scope = analysis.nodeScopes.get(info.root);
+		const binding = scope ? resolveBinding(scope, info.root.name) : null;
+		if (
+			binding === null ||
+			binding.imported ||
+			binding.dependencyInvariant ||
+			(callbackScope !== null && scopeIsWithin(binding.scope, callbackScope))
+		) {
+			return;
+		}
+		// Distinct from the plain-read key: `x.m` read as a value elsewhere in the
+		// callback still contributes its own member dependency.
+		const key = `b${binding.id}${info.path}()`;
+		if (!seen.has(key)) {
+			seen.add(key);
+			dependencies.push({
+				node: info.node,
+				key,
+				binding,
+				method: { root: info.root, name: info.name },
+			});
+		}
+	}
+
+	// Depth of enclosing functions whose directive prologue declares another
+	// execution context (see OPAQUE_EXECUTION_DIRECTIVES). Inside one, member
+	// chains truncate to their root bindings: the body's property reads happen
+	// in that other context, so hoisting them into a render-time dependency
+	// array would evaluate getters in a context where they may be illegal
+	// (TypeGPU's `.$`) and at a time the program never reads them.
+	let opaqueDepth = 0;
+
 	function walk(node) {
 		if (!node || typeof node !== 'object') return;
 		if (Array.isArray(node)) {
@@ -878,13 +988,44 @@ function collectDependencies(expression, callbackScope, analysis) {
 			case 'Identifier':
 				addIdentifier(node);
 				return;
+			case 'CallExpression': {
+				if (opaqueDepth > 0) {
+					// Roots only: the callee's receiver chain collapses through the
+					// MemberExpression case below; no method-pair dependency either,
+					// since it would read the member at render.
+					walk(node.callee);
+					walk(node.arguments);
+					return;
+				}
+				// Optional spellings land here too: `a?.b(x)` and `a.b?.(x)` are a
+				// CallExpression under a ChainExpression whose callee is a bare
+				// (possibly optional) MemberExpression, which staticMemberInfo accepts.
+				const callee = unwrapValue(node.callee);
+				const info =
+					callee?.type === 'MemberExpression' || callee?.type === 'ChainExpression'
+						? staticMemberInfo(callee)
+						: null;
+				if (info) addMethodCall(info);
+				else walk(node.callee);
+				walk(node.arguments);
+				return;
+			}
 			case 'ChainExpression': {
+				if (opaqueDepth > 0) {
+					walk(node.expression);
+					return;
+				}
 				const info = staticMemberInfo(node);
 				if (info) addStaticMember(info);
 				else walk(node.expression);
 				return;
 			}
 			case 'MemberExpression': {
+				if (opaqueDepth > 0) {
+					walk(node.object);
+					if (node.computed) walk(node.property);
+					return;
+				}
 				const info = staticMemberInfo(node);
 				if (info) addStaticMember(info);
 				else {
@@ -913,10 +1054,14 @@ function collectDependencies(expression, callbackScope, analysis) {
 				return;
 			case 'FunctionDeclaration':
 			case 'FunctionExpression':
-			case 'ArrowFunctionExpression':
+			case 'ArrowFunctionExpression': {
+				const opaque = hasOpaqueExecutionDirective(node);
+				if (opaque) opaqueDepth++;
 				for (const param of node.params || []) walkPatternExpression(param);
 				walk(node.body);
+				if (opaque) opaqueDepth--;
 				return;
+			}
 			case 'ImportDeclaration':
 			case 'ExportAllDeclaration':
 			case 'MetaProperty':
@@ -1163,7 +1308,7 @@ function rebuildWithHookMetadata(ast, analysis, inferred, insertDeps) {
 					args.splice(result.depsIndex, 0, {
 						...b.array(
 							result.dependencies.map((/** @type {any} */ dependency) =>
-								cloneDependency(dependency.node),
+								dependency.method ? methodDepNode(dependency) : cloneDependency(dependency.node),
 							),
 						),
 						start: node.start,
@@ -1197,8 +1342,22 @@ export function annotateHookCalls(ast, options = {}) {
  * dependency arrays inserted at each candidate call. Copy-on-write — the input
  * AST is never modified; callers must use the returned module.
  */
-/** @param {any} ast @param {{ onlyImported?: boolean, hookRuntimeModules?: readonly string[], filename?: string }} [options] */
+/** @param {any} ast @param {{ onlyImported?: boolean, hookRuntimeModules?: readonly string[], filename?: string, onRuntimeHelper?: (name: string) => void }} [options] */
 export function applyHookDependencies(ast, options = {}) {
 	const { analysis, inferred } = analyzeInternal(ast, options);
+	// The inserted `_$__methodDep(...)` calls need their aliased runtime import;
+	// the caller owns import assembly, so report the requirement rather than
+	// splicing an ImportDeclaration into a module whose runtime request
+	// ('octane' vs 'octane/server') this pass cannot know.
+	if (options.onRuntimeHelper !== undefined) {
+		outer: for (const result of inferred.values()) {
+			for (const dependency of result.dependencies) {
+				if (dependency.method) {
+					options.onRuntimeHelper(METHOD_DEP_IMPORT);
+					break outer;
+				}
+			}
+		}
+	}
 	return rebuildWithHookMetadata(ast, analysis, inferred, true).ast;
 }

package/dist/compiler/slot-hooks.js

@@ -16,7 +16,7 @@
 
 import { parseModule } from '@tsrx/core';
 import { HOOK_NAMES, hookSlotHash } from './compile.js';
-import { annotateHookCalls } from './hook-deps.js';
+import { METHOD_DEP_IMPORT, annotateHookCalls } from './hook-deps.js';
 import { assertStrongMode } from './strong-mode.js';
 
 // Build a cheap import-presence gate. Precise call identity is annotated by the
@@ -940,9 +940,16 @@ function walk(node, owner, st) {
 				// The dependency callback is already the final user argument. Insert
 				// both the generated array and slot in one edit so equal-position edit
 				// ordering cannot reverse them. Dependency nodes retain original source
-				// offsets, preserving arbitrary TS syntax byte-for-byte.
+				// offsets, preserving arbitrary TS syntax byte-for-byte. Method-call
+				// dependencies are the one synthesized form: the helper call's root is
+				// a bare identifier and its name a JSON string, so no arbitrary TS
+				// syntax needs reprinting there either.
 				const deps = inferred.dependencies
-					.map((dependency) => st.source.slice(dependency.node.start, dependency.node.end))
+					.map((dependency) =>
+						dependency.method
+							? `${requireParallelHelper(st, METHOD_DEP_IMPORT)}(${dependency.method.root.name}, ${JSON.stringify(dependency.method.name)})`
+							: st.source.slice(dependency.node.start, dependency.node.end),
+					)
 					.join(', ');
 				st.edits.push({
 					pos: node.arguments[node.arguments.length - 1].end,

package/dist/index.d.ts

@@ -3,3 +3,4 @@ export { initializeHydrationEventCapture } from './hydration/event-capture.js';
 export { createRoot, hydrateRoot, flushSync, act, type Root, type RootOptions, useState, useLinkedState, type LinkedStatePrevious, type LinkedStateOptions, useReducer, useEffect, useLayoutEffect, useInsertionEffect, useMemo, useCallback, useRef, useId, useImperativeHandle, useEffectEvent, useSyncExternalStore, useDeferredValue, useTransition, useActionState, useFormStatus, useOptimistic, useDebugValue, type FormStatus, startTransition, requestFormReset, memo, lazy, preload, preinit, preconnect, prefetchDNS, createContext, use, useContext, type Context, type ForeignHostContext, Suspense, ErrorBoundary, Hydrate, Activity, ViewTransition, addTransitionType, ViewTransition as unstable_ViewTransition, addTransitionType as unstable_addTransitionType, ViewTransitionPseudoElement, type ViewTransitionProps, type ViewTransitionInstance, Fragment, createPortal, type PortalDescriptor, createElement, cloneElement, isValidElement, isChildrenBlock, Children, type ElementDescriptor, type ComponentBody, type OctaneNode, TsrxErrorBoundary, __useStateWithGetter, __useLinkedStateWithGetter, __useReducerWithGetter, __createVoidRoot, bindRendererRegionOwner, EXTERNAL_HYDRATION_PROMISE, HYDRATION_RANGE_BOUNDARY, createHostContextRequest, __vtSeen, template, clone, drainFrag, bag0, bag1, bag2, bag3, bag4, bag5, bag6, bag7, bag8, bag9, bag10, bag11, bag12, bag13, bag14, bag15, bag16, bagOf, evt0, evt0u, evt1, evt1u, evt2, evt2u, evtN, evtNu, devEventListener, htext, htextSwap, child, sibling, setText, setScriptText, setHTML, setDangerouslySetInnerHTML, setDangerouslySetInnerHTMLSources, markDangerouslySetInnerHTMLChildren, setAttribute, setStringData, setBooleanAttribute, setAriaAttribute, setClassName, setClassAttr, normalizeClass, setStyle, setSpread, snapshotSpread, setHostPropSources, queueNativeChangeDiagnostic, markNativeChangeDiagnosticStatic, setFormAction, setValue, setFormControlSources, setChecked, setCheckedCheckable, setSelectValue, setDefaultValue, setDefaultValueUncontrolled, setDefaultChecked, setAutoFocus, attachRef, queueRefAttach, queueRefDetach, injectStyle, headBlock, namespaceHead, namespaceHeadElement, delegateEvents, delegateCaptureEvents, forBlock, mapSlot, ifBlock, tryBlock, switchBlock, activityBlock, componentSlot, componentSlotVoid, componentSlotLite, compilerCacheContext, markSingleRoot, markSingleRoot as __s, markChildrenBlock, createScopedValue, createScopedElement, childSlot, positionalChildren, textSlot, textHole, childTextHole, hostComponent, renderBlock, portal, hookSlots, withSlot, useBatch, warmMemo, warmChild, puMiss, puTake0, puTake1, puTake2, puTake3, puTake4, puPub, provideContext, mountFragmentRef, FragmentInstance, hmr, HMR, hasPendingWork, type Scope, type Block, drainPassiveEffects, setIsOctaneActEnvironment, setTransitionFallbackTimeout, getTransitionFallbackTimeout, } from './runtime.js';
 export type { HydrateOptions, HydrateProps, HydrateWhen, HydrationInteractionEvent, HydrationInteractionEvents, HydrationPrefetchContext, HydrationPrefetchFunction, HydrationPrefetchStrategy, HydrationPrefetchWaitReason, HydrationStrategy, HydrationWhen, } from './hydration/types.js';
 export { __serverRpc } from './server-rpc-client.js';
+export { __methodDep } from './method-dep.js';

package/dist/index.js

@@ -180,6 +180,7 @@ import {
   getTransitionFallbackTimeout
 } from "./runtime.js";
 import { __serverRpc } from "./server-rpc-client.js";
+import { __methodDep } from "./method-dep.js";
 export {
   Activity,
   Children,
@@ -195,6 +196,7 @@ export {
   ViewTransition,
   ViewTransitionPseudoElement,
   __createVoidRoot,
+  __methodDep,
   markSingleRoot2 as __s,
   __serverRpc,
   __useLinkedStateWithGetter,

package/dist/method-dep.d.ts

@@ -0,0 +1 @@
+export declare function __methodDep(receiver: unknown, name: string): unknown;

package/dist/method-dep.js

@@ -0,0 +1,11 @@
+const hasOwnProp = Object.prototype.hasOwnProperty;
+function __methodDep(receiver, name) {
+  if ((typeof receiver !== "object" || receiver === null) && typeof receiver !== "function") {
+    return receiver;
+  }
+  if (hasOwnProp.call(receiver, name)) return receiver[name];
+  return name in receiver ? receiver : void 0;
+}
+export {
+  __methodDep
+};

package/dist/runtime.d.ts

@@ -385,14 +385,13 @@ export declare function flushSync<T>(fn: () => T): T;
  * Compiler-emitted on a host element's ref MOUNT. Defers the attach until commit
  * (drainRefAttaches) so the node is connected when a callback ref fires and
  * ref.current is set before layout effects run. Each entry records its owning
- * `block` plus an enqueue-order `seq`; drainRefAttaches sorts with
- * comparePostOrder (post-order via the parentBlock chain, seq as tiebreak) for
- * child-before-parent ordering, matching effect ordering. Ref identity UPDATES
- * queue here too (paired with a queueRefDetach of the old ref), so within one
- * commit every detach drains before every attach — a ref hopping between
- * elements never ends null, whichever binding updates first.
- */
-export declare function queueRefAttach(scope: Scope, fn: () => void): void;
+ * `block`; drainRefAttaches preserves enqueue order for disjoint subtrees and
+ * only reorders ancestor/descendant pairs for child-before-parent ordering.
+ * Ref identity UPDATES queue here too (paired with a queueRefDetach of the old
+ * ref), so within one commit every detach drains before every attach — a ref
+ * hopping between elements never ends null, whichever binding updates first.
+ */
+export declare function queueRefAttach(scope: Scope, ref: any, el: Element | FragmentInstance): void;
 /**
  * Queue a teardown ref detach for commit (compiled `ref` binding / spread-ref /
  * hostComponent / fragment-ref unmount cleanups, and the de-opt teardown walk).

package/dist/runtime.js

@@ -1018,6 +1018,9 @@ let passiveScheduled = false;
 let commitSeq = 0;
 const storeSyncQueue = [];
 const refAttachQueue = [];
+function attachLiveFragmentRef(instance) {
+  attachRef(instance._currentRef, instance);
+}
 let WIP_CAPTURE = null;
 function createOffscreenCapture() {
   return {
@@ -1474,10 +1477,10 @@ function flushSync(fn) {
   }
 }
 const LAYOUT_CASCADE_LIMIT = 50;
-function queueRefAttach(scope, fn) {
+function queueRefAttach(scope, ref, el) {
   (WIP_CAPTURE !== null ? WIP_CAPTURE.refs : refAttachQueue).push({
-    fn,
-    seq: commitSeq++,
+    ref,
+    el,
     block: scope.block
   });
 }
@@ -1532,13 +1535,13 @@ function drainRefDetaches() {
 function drainRefAttaches() {
   if (refAttachQueue.length === 0) return;
   const q = refAttachQueue.splice(0);
-  q.sort((a, b) => comparePostOrder(a.block, a.seq, b.block, b.seq));
+  q.sort((a, b) => comparePostOrder(a.block, 0, b.block, 0));
   for (const r of q) {
     if (blockSubtreeDisposed(r.block)) continue;
     try {
       REF_CALLBACK_DEPTH++;
       try {
-        r.fn();
+        attachRef(r.ref, r.el);
       } finally {
         REF_CALLBACK_DEPTH--;
       }
@@ -1558,6 +1561,30 @@ function blockSubtreeDisposed(block) {
   }
   return false;
 }
+function refAttachWasDiscarded(uncommitted, el, ref) {
+  return uncommitted !== null && uncommitted.get(el) === ref;
+}
+function discardSubtreeRefAttachesFrom(queue, root, uncommitted) {
+  let write = 0;
+  for (let read = 0; read < queue.length; read++) {
+    const entry = queue[read];
+    const owner = entry.block;
+    if (owner === root || owner !== null && blockIsAncestorOf(root, owner)) {
+      uncommitted.set(
+        entry.el,
+        entry.ref === attachLiveFragmentRef ? entry.el._currentRef : entry.ref
+      );
+      continue;
+    }
+    queue[write++] = entry;
+  }
+  queue.length = write;
+}
+function discardSubtreeRefAttaches(root, uncommitted = /* @__PURE__ */ new Map()) {
+  discardSubtreeRefAttachesFrom(refAttachQueue, root, uncommitted);
+  if (WIP_CAPTURE !== null) discardSubtreeRefAttachesFrom(WIP_CAPTURE.refs, root, uncommitted);
+  return uncommitted;
+}
 function commitEffects() {
   if (effectEventQueue.length === 0 && effectEventCommitActions.length === 0 && effectQueues[INSERTION].length === 0 && effectQueues[LAYOUT].length === 0 && refDetachQueue.length === 0 && refAttachQueue.length === 0 && storeSyncQueue.length === 0 && activeFragments.size === 0 && !hasControlledSyncs()) {
     if ((effectQueues[PASSIVE].length > 0 || pendingPassiveUnmounts.length > 0) && !passiveScheduled) {
@@ -6017,7 +6044,7 @@ function isFocusable(el) {
 function mountFragmentRef(scope, startMarker, endMarker, ref) {
   const fi = new FragmentInstance(scope.block, startMarker, endMarker);
   fi._currentRef = ref;
-  queueRefAttach(scope, () => attachRef(fi._currentRef, fi));
+  queueRefAttach(scope, attachLiveFragmentRef, fi);
   (scope.cleanups ??= []).push(() => {
     queueRefDetach(fi._currentRef, fi);
     fi._destroy();
@@ -6552,7 +6579,7 @@ function setSpread(el, value, prev, mountScope, skipDangerouslySetInnerHTML = fa
     const pv = prev ? prev[k] : void 0;
     if (k === "ref") {
       if (v === pv) continue;
-      if (mountScope) queueRefAttach(mountScope, () => attachRef(v, el));
+      if (mountScope) queueRefAttach(mountScope, v, el);
       else attachRef(v, el);
       continue;
     }
@@ -8875,7 +8902,7 @@ function positionalChildren(children) {
 }
 function applyDeoptProp(el, name, v, ownerBlock) {
   if (name === "ref") {
-    if (v != null) queueRefAttach(ownerBlock, () => attachRef(v, el));
+    if (v != null) queueRefAttach(ownerBlock, v, el);
   } else if (name === "className" || name === "class") {
     setDeoptClass(el, v);
   } else if (name === "style") {
@@ -9000,7 +9027,7 @@ function applyHostProps(el, props, scope, state) {
     if (name === "ref") {
       if (v !== state.ref) {
         if (state.ref != null) queueRefDetach(state.ref, el);
-        if (v != null) queueRefAttach(scope, () => attachRef(v, el));
+        if (v != null) queueRefAttach(scope, v, el);
         state.ref = v;
       }
     } else if (name === "className" || name === "class") {
@@ -11067,17 +11094,19 @@ function hideTryContentAndMountPending(state, resumeThenable) {
   }
   if (state.tryBlock) {
     const persistent = state.tryBlock;
+    const uncommittedRefs = discardSubtreeRefAttaches(persistent);
     deactivateScope(persistent, false);
     if (state.parentBlock.disposed || persistent.disposed || state.tryBlock !== persistent) {
       return false;
     }
     if (state.detachedRefs === null) {
       state.detachedRefs = [];
-      detachSubtreeRefs(persistent, state.detachedRefs, true, false);
+      detachSubtreeRefs(persistent, state.detachedRefs, true, false, uncommittedRefs);
     }
     if (state.parentBlock.disposed || persistent.disposed || state.tryBlock !== persistent) {
       return false;
     }
+    discardSubtreeRefAttaches(persistent, uncommittedRefs);
     persistent.inactive = true;
   }
   if (!mountPendingBody(state)) return false;
@@ -11363,7 +11392,7 @@ function queueCurrentHiddenRefs(state) {
   collectVisibleSubtreeRefs(state.tryBlock, refs);
   for (let i = 0; i < refs.length; i++) {
     const entry = refs[i];
-    queueRefAttach(entry.scope, () => attachRef(entry.ref, entry.el));
+    queueRefAttach(entry.scope, entry.ref, entry.el);
   }
 }
 function attemptHiddenReveal(state, scheduledMode) {
@@ -11488,14 +11517,12 @@ function compareStagedRevealDomOrder(a, b) {
   if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;
   return 0;
 }
-function rebaseOffscreenCaptureSeq(capture) {
+function rebaseOffscreenEffectSeq(capture) {
   const effects = capture.effects[INSERTION].concat(
     capture.effects[LAYOUT],
     capture.effects[PASSIVE]
   ).sort((a, b) => a.seq - b.seq);
   for (let i = 0; i < effects.length; i++) effects[i].seq = commitSeq++;
-  const refs = capture.refs.slice().sort((a, b) => a.seq - b.seq);
-  for (let i = 0; i < refs.length; i++) refs[i].seq = commitSeq++;
 }
 function flushStagedReveals() {
   if (flushingStagedReveals) return;
@@ -11521,7 +11548,7 @@ function flushStagedReveals() {
       const deferEffects = batch.every((state) => state.stagedCapture !== null);
       if (deferEffects) {
         batch.sort(compareStagedRevealDomOrder);
-        for (const state of batch) rebaseOffscreenCaptureSeq(state.stagedCapture);
+        for (const state of batch) rebaseOffscreenEffectSeq(state.stagedCapture);
       }
       const previousDeferral = deferringStagedRevealEffects;
       deferringStagedRevealEffects = deferEffects;
@@ -12515,9 +12542,9 @@ function forEachSubtreeChild(scope, visit, includeHiddenTry = true) {
     }
   }
 }
-function detachSubtreeRefs(scope, out, shouldDetach = true, includeHiddenTry = true) {
+function detachSubtreeRefs(scope, out, shouldDetach = true, includeHiddenTry = true, uncommitted = null) {
   const deoptRoot = scope.deoptNode;
-  if (deoptRoot != null) detachDeoptTreeRefs(deoptRoot, out, shouldDetach, scope);
+  if (deoptRoot != null) detachDeoptTreeRefs(deoptRoot, out, shouldDetach, scope, uncommitted);
   const rm = scope.refFields;
   if (rm !== null) {
     const bag = scope.slots[0];
@@ -12529,19 +12556,25 @@ function detachSubtreeRefs(scope, out, shouldDetach = true, includeHiddenTry = t
           if (ref == null) continue;
           const el = bag[rm[j + 2]];
           out.push({ ref, el, scope });
-          if (shouldDetach) attachRef(ref, null, el);
+          if (shouldDetach && !refAttachWasDiscarded(uncommitted, el, ref)) {
+            attachRef(ref, null, el);
+          }
         } else if (kind === "s") {
           const ref = bag[rm[j + 1]]?.ref;
           if (ref == null) continue;
           const el = bag[rm[j + 2]];
           if (el == null) continue;
           out.push({ ref, el, scope });
-          if (shouldDetach) attachRef(ref, null, el);
+          if (shouldDetach && !refAttachWasDiscarded(uncommitted, el, ref)) {
+            attachRef(ref, null, el);
+          }
         } else {
           const fi = bag[rm[j + 1]];
           if (fi == null || fi._currentRef == null) continue;
           out.push({ ref: fi._currentRef, el: fi, scope });
-          if (shouldDetach) attachRef(fi._currentRef, null, fi);
+          if (shouldDetach && !refAttachWasDiscarded(uncommitted, fi, fi._currentRef)) {
+            attachRef(fi._currentRef, null, fi);
+          }
         }
       }
     }
@@ -12552,27 +12585,31 @@ function detachSubtreeRefs(scope, out, shouldDetach = true, includeHiddenTry = t
     if (s === null || typeof s !== "object") continue;
     if (s.ref != null && s.anchor !== void 0 && s.el instanceof Element) {
       out.push({ ref: s.ref, el: s.el, scope });
-      if (shouldDetach) attachRef(s.ref, null, s.el);
+      if (shouldDetach && !refAttachWasDiscarded(uncommitted, s.el, s.ref)) {
+        attachRef(s.ref, null, s.el);
+      }
     }
     if (s.__kind === "childSlot" && s.hostNode != null) {
-      detachDeoptTreeRefs(s.hostNode, out, shouldDetach, scope);
+      detachDeoptTreeRefs(s.hostNode, out, shouldDetach, scope, uncommitted);
     }
   }
   forEachSubtreeChild(
     scope,
-    (child2) => detachSubtreeRefs(child2, out, shouldDetach, includeHiddenTry),
+    (child2) => detachSubtreeRefs(child2, out, shouldDetach, includeHiddenTry, uncommitted),
     includeHiddenTry
   );
 }
 function collectVisibleSubtreeRefs(scope, out) {
   detachSubtreeRefs(scope, out, false, false);
 }
-function detachDeoptTreeRefs(node, out, shouldDetach = true, ownerScope) {
+function detachDeoptTreeRefs(node, out, shouldDetach = true, ownerScope, uncommitted = null) {
   const ref = getDeoptDesc(node)?.props?.ref;
   if (ref != null) {
     if (out !== null) {
       out.push({ ref, el: node, scope: ownerScope });
-      if (shouldDetach) attachRef(ref, null, node);
+      if (shouldDetach && !refAttachWasDiscarded(uncommitted, node, ref)) {
+        attachRef(ref, null, node);
+      }
     } else {
       queueRefDetach(ref, node);
     }
@@ -12584,7 +12621,7 @@ function detachDeoptTreeRefs(node, out, shouldDetach = true, ownerScope) {
       c = nodeAfterPortalRange(c, rangeEnd);
       continue;
     }
-    detachDeoptTreeRefs(c, out, shouldDetach, ownerScope);
+    detachDeoptTreeRefs(c, out, shouldDetach, ownerScope, uncommitted);
     c = c.nextSibling;
   }
 }

package/dist/runtime.server.d.ts

@@ -551,11 +551,15 @@ export interface RenderOptions {
 }
 export declare function setSsrSuspenseTimeout(ms: number): void;
 export declare function getSsrSuspenseTimeout(): number;
-type SuspenseOutcome = {
+type SuspenseResult = {
     value: unknown;
 } | {
     reason: unknown;
 };
+type SuspenseOutcome = SuspenseResult & {
+    /** Thenable whose settlement produced this string-keyed cached result. */
+    thenable: PromiseLike<unknown>;
+};
 type ResolvedMap = Map<string, SuspenseOutcome> & {
     /** Render-local stable ids for non-primitive control/list keys. */
     asyncIdentities: Map<unknown, number>;
@@ -571,7 +575,7 @@ type ResolvedMap = Map<string, SuspenseOutcome> & {
             site: ServerHookSlot | undefined;
             frame: Frame | null;
         }>;
-        resolvedT: Map<PromiseLike<unknown>, SuspenseOutcome>;
+        resolvedT: Map<PromiseLike<unknown>, SuspenseResult>;
         warm: Map<ServerHookSlot, {
             deps: unknown[];
             value: unknown;

package/dist/runtime.server.js

@@ -2258,6 +2258,13 @@ function use(usable, siteKey) {
   const resolved = RESOLVED;
   if (resolved !== null && resolved.has(key)) {
     const entry = resolved.get(key);
+    const thenable = usable;
+    if (entry.thenable !== thenable) {
+      try {
+        thenable.then(NOOP, NOOP);
+      } catch {
+      }
+    }
     if ("reason" in entry) {
       recordHydrationRejection(serial, entry.reason);
       throw entry.reason;
@@ -3124,11 +3131,11 @@ async function settleSuspended(suspended, resolved, timeoutMs, signal) {
       if (resolved.has(key)) return;
       const isPu = key.charCodeAt(0) === 124 && key.startsWith("|pu#");
       try {
-        const outcome = { value: await promise };
+        const outcome = { value: await promise, thenable: promise };
         resolved.set(key, outcome);
         if (isPu) pu.resolvedT.set(promise, outcome);
       } catch (reason) {
-        const outcome = { reason };
+        const outcome = { reason, thenable: promise };
         resolved.set(key, outcome);
         if (isPu) pu.resolvedT.set(promise, outcome);
       }
@@ -3147,11 +3154,13 @@ async function settleFirstOfWave(suspended, resolved, timeoutMs, signal) {
       (async () => {
         try {
           const value = await promise;
-          if (!resolved.has(key)) resolved.set(key, { value });
-          if (isPu && !pu.resolvedT.has(promise)) pu.resolvedT.set(promise, { value });
+          const outcome = { value, thenable: promise };
+          if (!resolved.has(key)) resolved.set(key, outcome);
+          if (isPu && !pu.resolvedT.has(promise)) pu.resolvedT.set(promise, outcome);
         } catch (reason) {
-          if (!resolved.has(key)) resolved.set(key, { reason });
-          if (isPu && !pu.resolvedT.has(promise)) pu.resolvedT.set(promise, { reason });
+          const outcome = { reason, thenable: promise };
+          if (!resolved.has(key)) resolved.set(key, outcome);
+          if (isPu && !pu.resolvedT.has(promise)) pu.resolvedT.set(promise, outcome);
         }
       })()
     );
@@ -3296,11 +3305,13 @@ function recordHostedStratum(suspended, resolved) {
       const isPu = key.startsWith("|pu#");
       try {
         const value = await promise;
-        if (!resolved.has(key)) resolved.set(key, { value });
-        if (isPu && !pu.resolvedT.has(promise)) pu.resolvedT.set(promise, { value });
+        const outcome = { value, thenable: promise };
+        if (!resolved.has(key)) resolved.set(key, outcome);
+        if (isPu && !pu.resolvedT.has(promise)) pu.resolvedT.set(promise, outcome);
       } catch (reason) {
-        if (!resolved.has(key)) resolved.set(key, { reason });
-        if (isPu && !pu.resolvedT.has(promise)) pu.resolvedT.set(promise, { reason });
+        const outcome = { reason, thenable: promise };
+        if (!resolved.has(key)) resolved.set(key, outcome);
+        if (isPu && !pu.resolvedT.has(promise)) pu.resolvedT.set(promise, outcome);
       }
     })()
   );

package/dist/server/index.d.ts

@@ -21,4 +21,5 @@
  * should call them.
  */
 export { executeServerFunction } from './rpc.js';
+export { __methodDep } from '../method-dep.js';
 export { renderToString, renderToStaticMarkup, renderToPipeableStream, renderToReadableStream, type RenderResult, type RenderOptions, type StreamOptions, type StreamInjectionSource, setSsrSuspenseTimeout, getSsrSuspenseTimeout, EXTERNAL_HYDRATION_PROMISE, HYDRATION_RANGE_BOUNDARY, useState, useLinkedState, useReducer, __useStateWithGetter, __useLinkedStateWithGetter, __useReducerWithGetter, type LinkedStatePrevious, type LinkedStateOptions, useEffect, useLayoutEffect, useInsertionEffect, useImperativeHandle, useMemo, useCallback, useRef, useId, useEffectEvent, useTransition, useDeferredValue, useSyncExternalStore, useActionState, useFormStatus, useOptimistic, useDebugValue, memo, lazy, hookSlots, withSlot, startTransition, flushSync, isChildrenBlock, isValidElement, cloneElement, Children, createPortal, requestFormReset, preload, preinit, preconnect, prefetchDNS, Suspense, ErrorBoundary, Hydrate, Fragment, Activity, ViewTransition, ViewTransition as unstable_ViewTransition, addTransitionType, addTransitionType as unstable_addTransitionType, createContext, use, useContext, ssrIsSuspense, type Context, type FormStatus, markChildrenBlock, createElement, createScopedValue, createScopedElement, positionalChildren, escapeHtml, escapeAttr, ssrText, ssrTextPre, ssrChild, ssrChildText, ssrAttr, normalizeClass, ssrStyle, ssrClass, ssrAttrs, ssrSnapshotSpread, ssrSpread, ssrInnerHtml, ssrScriptInnerHtml, ssrChildrenSources, ssrVoidContent, ssrValueAttr, ssrCheckedAttr, ssrInputAttrs, ssrTextareaValue, ssrTextareaValueSources, ssrSelectAttrs, ssrSelectScope, ssrSelectScopeSources, ssrOptionValueSources, ssrOption, ssrElement, ssrComponent, ssrComponentNS, ssrInNamespace, ssrBlock, ssrActivity, ssrForBlock, mapSlot, ssrControl, ssrArm, ssrTry, ssrPortal, injectStyle, ssrHeadEl, namespaceHead, namespaceHeadElement, puMemo, puBatch, warmMemo, warmChild, } from '../runtime.server.js';

package/dist/server/index.js

@@ -1,4 +1,5 @@
 import { executeServerFunction } from "./rpc.js";
+import { __methodDep } from "../method-dep.js";
 import {
   renderToString,
   renderToStaticMarkup,
@@ -122,6 +123,7 @@ export {
   Hydrate,
   Suspense,
   ViewTransition,
+  __methodDep,
   __useLinkedStateWithGetter,
   __useReducerWithGetter,
   __useStateWithGetter,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "octane",
-  "version": "0.1.22",
+  "version": "0.1.24",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,