octane 0.1.21 → 0.1.22

package/dist/compiler/compile.js

@@ -3936,6 +3936,78 @@ function containsAutoMemoUnsafeStructure(stmts) {
 	return found;
 }
 
+/**
+ * Bundling MOVES an argument's evaluation out of the arrow body and into the
+ * component body, so it now runs on mount and on every update instead of once
+ * per event. That rewrite is only sound for an expression that is
+ * side-effect-free and O(1)-ish to evaluate: `() => setData(makeData(1000))`
+ * otherwise rebuilds the whole dataset on every unrelated render, and the user
+ * never sees a call they can attribute to the click that did not happen.
+ *
+ * The whitelist is deliberately narrower than "pure", for two reasons.
+ *
+ * A fresh identity per evaluation defeats the runtime arg diff the bundle
+ * exists for — an `ArrayExpression`/`ObjectExpression`/arrow arg can never
+ * compare equal, so it would pay a per-render allocation to skip nothing.
+ * Regex is rejected for the same reason `isInvariantLiteral` rejects it.
+ *
+ * The line is drawn at VALUE STABILITY, not at "provably pure". An accepted
+ * expression must yield at render time what it would have yielded at click
+ * time, and must not do unbounded or author-visible work to get there. A
+ * property read can reach a getter and `a + b` can reach `valueOf` — but that
+ * is the standing premise of the optimization, not a new risk: `select(row.id)`
+ * is the shape it was built for, and refusing property reads would leave it
+ * with nothing to optimize. Refusing arithmetic while accepting `row.id` would
+ * draw the same line in two places, so both stay.
+ *
+ * What cannot stay are the expressions that break value stability outright:
+ * a CALL does unbounded work and can be observed happening (`makeData(1000)`
+ * rebuilt a whole dataset per render), a fresh array/object/regex allocates an
+ * identity that can never compare equal, and an assignment or `++` mutates.
+ *
+ * `.current` is rejected because a ref genuinely returns the WRONG VALUE here,
+ * not merely an early one: `queueRefAttach` runs AFTER the mount that reads it,
+ * so a hoisted `ref.current` hands the first click the `null` it held before
+ * the ref was attached. Computed members fail closed for the same reason —
+ * `ref[key]` can spell `current` without saying so, and
+ * `isAutoMemoCalculationDependency` already refuses every computed key.
+ */
+function isDeferralSafeBundleArg(node) {
+	const value = unwrapTsExpr(node);
+	if (!value) return false;
+	switch (value.type) {
+		case 'Literal':
+			return isInvariantLiteral(value);
+		case 'Identifier':
+			return true;
+		case 'ChainExpression':
+			return isDeferralSafeBundleArg(value.expression);
+		case 'MemberExpression':
+			// Computed keys fail closed: the key is only known at runtime, so
+			// `ref[k]` can reach `.current` without naming it.
+			if (value.computed) return false;
+			if (value.property?.name === 'current') return false;
+			return isDeferralSafeBundleArg(value.object);
+		case 'TemplateLiteral':
+			// A fresh string still compares by VALUE, so the arg diff works.
+			return (value.expressions || []).every(isDeferralSafeBundleArg);
+		case 'UnaryExpression':
+			// `delete` mutates; the rest only read their operand.
+			return value.operator !== 'delete' && isDeferralSafeBundleArg(value.argument);
+		case 'BinaryExpression':
+		case 'LogicalExpression':
+			return isDeferralSafeBundleArg(value.left) && isDeferralSafeBundleArg(value.right);
+		case 'ConditionalExpression':
+			return (
+				isDeferralSafeBundleArg(value.test) &&
+				isDeferralSafeBundleArg(value.consequent) &&
+				isDeferralSafeBundleArg(value.alternate)
+			);
+		default:
+			return false;
+	}
+}
+
 /**
  * `() => fn(a, b, …)` — a zero-param arrow whose body is a single
  * function call. Returns `{ callee, args }` if so, else null. Used to compile
@@ -3967,8 +4039,9 @@ function detectStableEventBundle(node) {
 	if (!body || body.type !== 'CallExpression') return null;
 	// Identifier callees only — see the receiver-loss note above.
 	if (!body.callee || body.callee.type !== 'Identifier') return null;
-	// Bail if any arg is a spread — bundle args are positional only.
-	if (body.arguments.some((a) => a.type === 'SpreadElement')) return null;
+	// Bail if any arg is a spread — bundle args are positional only. Everything
+	// else has to survive being hoisted to render time; see the note above.
+	if (!body.arguments.every(isDeferralSafeBundleArg)) return null;
 	return { callee: body.callee, args: body.arguments };
 }
 
@@ -6073,6 +6146,7 @@ function compileInternal(source, filename, options, analyzedAst, mode, bundlerMe
 		nextHookMemoCacheId: 0, // unique non-index slots property per compiled render function
 		currentInvariantLocals: null, // Set<string> of component-lifetime-stable local values
 		currentEventInvariantLocals: null, // Set<string> safe to retain in native event slots
+		currentBodyIsComponentScope: false, // planning the component body itself, not a nested arm
 		currentProfileComponentId: null,
 		knownStringLocals: null, // Set<string> of provably-string locals (text-hole inference)
 		nextHookSymId: 0,
@@ -10463,6 +10537,11 @@ function compileFunctionBody(node, ctx, name, parentNs = 'html', cssHash = null,
 	}
 	ctx.currentInvariantLocals = invariantLocals;
 	ctx.currentEventInvariantLocals = eventInvariantLocals;
+	// Same gate `findMountEventCallbackSinks` uses: the lifetime proof below is
+	// defined relative to the COMPONENT's scope, so it is only sound while
+	// planning that scope's own JSX.
+	const prevBodyIsComponentScope = ctx.currentBodyIsComponentScope;
+	ctx.currentBodyIsComponentScope = options?.autoCallback === true;
 	// M3 inherit-range: only a real `@{ … }` (JSXCodeBlock) component body spans
 	// its block's whole range — synthetic sub-bodies (@if/@for/@try arms,
 	// children render-fns) pass statement arrays and stay unflagged. planJsx
@@ -10496,6 +10575,7 @@ function compileFunctionBody(node, ctx, name, parentNs = 'html', cssHash = null,
 	}
 	ctx.currentInvariantLocals = prevInvariantLocals;
 	ctx.currentEventInvariantLocals = prevEventInvariantLocals;
+	ctx.currentBodyIsComponentScope = prevBodyIsComponentScope;
 	ctx._inheritBody = prevInheritBody;
 	ctx._fnOrigin = prevFnOrigin;
 	ctx._foldedDirectiveCalls = prevFDC;
@@ -11067,6 +11147,49 @@ function isEventHandlerInvariantExpr(node, ctx) {
 	);
 }
 
+/**
+ * An inline `onClick={() => …}` arrow is rebuilt and reassigned to its DOM slot
+ * on every render. When nothing the arrow reads can change, that write is dead
+ * work: the handler can be installed once at mount and left alone, which is
+ * already what a NAMED handler gets through `findMountEventCallbackSinks`.
+ * Recognising the inline form closes the gap between the two spellings.
+ *
+ * "Nothing it reads can change" means every free identifier is either proven
+ * event-invariant for this component (a useState setter, a ref object, a
+ * useEffectEvent wrapper, …) or is not a component local at all — module scope,
+ * an import, or a global, each fixed for the module's lifetime. That second
+ * clause is the same inference `isArrowStableOver` makes.
+ *
+ * Sound only while planning the component body's own JSX.
+ * `collectComponentLocals` deliberately ignores nested blocks, so inside a
+ * `@for` item body the loop variable is absent from the set and would read as
+ * module scope — and a keyed survivor can be handed a different item without
+ * remounting, which would freeze the first item's capture in the slot forever.
+ */
+function isMountStableInlineHandler(node, ctx) {
+	if (ctx.hmr || ctx.profile || !ctx.currentBodyIsComponentScope) return false;
+	const value = unwrapTsExpr(node);
+	// A FunctionExpression is reachable through its own binding name and carries
+	// its own `this`/`arguments`; only the arrow form is a pure lexical capture.
+	if (value?.type !== 'ArrowFunctionExpression') return false;
+	const locals = ctx.currentComponentLocals;
+	if (!locals) return false;
+	const paramScope = new Set();
+	for (const p of value.params || []) collectBindings(p, paramScope);
+	// Params are walked alongside the body: their names are already bound in
+	// `paramScope`, but a default (`(e, x = n) => …`) is an ordinary expression
+	// that runs per call and can reach a changing local.
+	for (const name of collectFreeIdentifiers([value.body, ...(value.params || [])], paramScope)) {
+		// `arguments` is the render call's own, and a DIRECT `eval` resolves
+		// component locals this walk cannot see — either would tie the installed
+		// closure to whatever the first render happened to hold.
+		if (name === 'arguments' || name === 'eval') return false;
+		if (!locals.has(name)) continue;
+		if (ctx.currentEventInvariantLocals?.has(name) !== true) return false;
+	}
+	return true;
+}
+
 // Object/array/function literals allocate a new identity on every evaluation,
 // so an identity diff can never skip their update. This currently feeds the
 // class binding path, where dropping the dead previous-value field preserves
@@ -19490,7 +19613,8 @@ function emitElementHtml(
 					slotKey,
 					ns: hostNs,
 					dev: ctx.dev,
-					mountOnly: isEventHandlerInvariantExpr(inner, ctx),
+					mountOnly:
+						isEventHandlerInvariantExpr(inner, ctx) || isMountStableInlineHandler(inner, ctx),
 				});
 			}
 		} else if (attrName === 'class') {

package/dist/runtime.js

@@ -8056,7 +8056,8 @@ function createScopedValue(readElement) {
   const resolve = () => {
     const scope = CURRENT_SCOPE;
     const epoch = COMPILER_CACHE_CONTEXT_EPOCH;
-    if (resolved === void 0 || resolvedScope !== scope || resolvedEpoch !== epoch) {
+    const sameScope = resolvedScope === scope || resolvedScope !== null && scope !== null && scope.block.parentBlock === resolvedScope.block && scope.$$ctxValues === null;
+    if (resolved === void 0 || !sameScope || resolvedEpoch !== epoch) {
       const next = readElement();
       if (next.key === null && KEYED_ELEMENT_DESCRIPTORS.has(next)) {
         KEYED_ELEMENT_DESCRIPTORS.add(descriptor);
@@ -8064,6 +8065,8 @@ function createScopedValue(readElement) {
       resolvedScope = scope;
       resolvedEpoch = epoch;
       resolved = next;
+    } else if (resolvedScope !== scope) {
+      resolvedScope = scope;
     }
     return resolved;
   };
@@ -8102,7 +8105,7 @@ function createScopedElement(type, props, readChildren) {
   const children = () => {
     const scope = CURRENT_SCOPE;
     const epoch = COMPILER_CACHE_CONTEXT_EPOCH;
-    const sameScope = resolvedScope === scope || resolvedScope !== null && scope !== null && scope.block.parentBlock === resolvedScope.block;
+    const sameScope = resolvedScope === scope || resolvedScope !== null && scope !== null && scope.block.parentBlock === resolvedScope.block && scope.$$ctxValues === null;
     if (!resolved || !sameScope || resolvedEpoch !== epoch) {
       const nextChildren = readChildren();
       resolvedScope = scope;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "octane",
-  "version": "0.1.21",
+  "version": "0.1.22",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
@@ -119,11 +119,14 @@
   },
   "devDependencies": {
     "@tsrx/react": "^0.2.56",
+    "@wagmi/connectors": "8.0.25",
+    "@wagmi/core": "3.6.4",
     "esbuild": "^0.28.1",
     "happy-dom": "^20.11.0",
     "playwright": "^1.61.1",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
+    "viem": "2.55.10",
     "vite": "^8.1.5",
     "vitest": "^4.1.10"
   },