octane 0.4.0 → 0.4.1

package/dist/cjs/host-property-diagnostics.cjs

@@ -149,6 +149,21 @@ for (const name of [
 ]) {
   KNOWN_SVG_PROPERTY_SPELLINGS.set(name.toLowerCase(), name);
 }
+const NON_NATIVE_LOWERCASE_PROPERTIES = /* @__PURE__ */ new Set([
+  "autoFocus",
+  "defaultValue",
+  "defaultChecked",
+  "dangerouslySetInnerHTML",
+  "className",
+  "suppressContentEditableWarning",
+  "suppressHydrationWarning",
+  "suppressNativeChangeWarning",
+  "__octaneNativeChangeDiagnostic",
+  "acceptCharset",
+  "htmlFor",
+  "httpEquiv",
+  "viewBox"
+]);
 function hostPropertyWarning(name, value, tag, isSvg = false) {
   const lower = name.toLowerCase();
   if (name === "for" && tag === "label") return null;
@@ -164,6 +179,9 @@ function hostPropertyWarning(name, value, tag, isSvg = false) {
   if (name.startsWith("aria-") || /^aria[A-Z]/.test(name) || name.startsWith("data-")) return null;
   const known = KNOWN_PROPERTY_SPELLINGS.get(lower) ?? (isSvg ? KNOWN_SVG_PROPERTY_SPELLINGS.get(lower) : void 0);
   if (known !== void 0) {
+    if (!isSvg && name === lower && // Hyphenated/namespaced presentation aliases belong to SVG, not HTML.
+    !name.includes("-") && !name.includes(":") && !NON_NATIVE_LOWERCASE_PROPERTIES.has(known) && (import_constants.ATTRIBUTE_ALIASES.get(known) ?? lower) === lower)
+      return null;
     if (isSvg && import_constants.ATTRIBUTE_ALIASES.get(known) === name) return null;
     return name !== known ? `Invalid DOM property \`${name}\`. Did you mean \`${known}\`?` : null;
   }

package/dist/cjs/runtime.cjs

@@ -24550,12 +24550,43 @@ function preservesCommittedSuspense(block) {
   }
   return false;
 }
+function markerlessBranchRoots(scope, domParent, after, end = null) {
+  let roots = 0;
+  const slots = scope._slots;
+  if (slots !== null) {
+    for (let i = 0; i < slots.length; i++) {
+      const slot = slots[i];
+      if (slot.anchor === after && (slot.__kind === "ifBlockSlot" || slot.__kind === "switchBlockSlot" || slot.__kind === "componentSlotSlot" && slot.block?.parentNode === domParent)) {
+        roots++;
+        if (end !== null) {
+          journalRootProperty(slot, "anchor", slot.anchor);
+          slot.anchor = end;
+        }
+      }
+    }
+  }
+  const children = scope.children;
+  if (children !== null) {
+    for (let i = 0; i < children.length; i++) {
+      const child2 = children[i].scope;
+      const block = child2.block;
+      if (block !== scope.block && block.parentNode === domParent && block.endMarker === after) {
+        roots += markerlessBranchRoots(child2, domParent, after, end) || 1;
+        if (end !== null) {
+          journalRootProperty(block, "endMarker", block.endMarker);
+          block.endMarker = end;
+        }
+      }
+    }
+  }
+  return roots;
+}
 function finalizeMarkerlessBranch(state, domParent, block, marker, before, after) {
   state.markerlessBefore = void 0;
   if (state.borrowed && state.start === null) return;
   const first = before ? getNextSibling(before) : getFirstChild(domParent);
   const last = after ? (STAGED_DOM?.view(after) ?? after).previousSibling : (STAGED_DOM?.view(domParent) ?? domParent).lastChild;
-  if (last !== null && first === last && first.nodeType === 1) {
+  if (last !== null && first === last && first.nodeType === 1 && markerlessBranchRoots(block, domParent, after) <= 1) {
     block.startMarker = first;
     block.endMarker = first;
     state.end = first;
@@ -24569,6 +24600,7 @@ function finalizeMarkerlessBranch(state, domParent, block, marker, before, after
     block.exclusiveMarkers = true;
     state.start = start;
     state.end = end;
+    markerlessBranchRoots(block, domParent, after, end);
   }
 }
 function replaceSharedBlockBoundary(parent, oldStart, oldEnd, newStart, newEnd) {

package/dist/cjs/version.cjs

@@ -21,7 +21,7 @@ __export(version_exports, {
   version: () => version
 });
 module.exports = __toCommonJS(version_exports);
-const version = "0.4.0";
+const version = "0.4.1";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   version

package/dist/compiler/compile.js

@@ -14366,6 +14366,7 @@ function ssrEmitActivity(node, ctx, name, inlinedSubs, parentNs, cssHash, compon
 
 function ssrEmitFor(node, ctx, name, inlinedSubs, parentNs, cssHash, componentNs) {
 	const bindingSite = node._octaneBindingSite;
+	const itemBody = forItemTemplateBody(node, ctx);
 	// rewriteHookCalls: key any `use(thenable)` in the @for iterable expression.
 	const itemsExpr = rewriteHookCalls(node.right, ctx, name);
 	const mapCall = node.nativeArrayMap || null;
@@ -14373,7 +14374,7 @@ function ssrEmitFor(node, ctx, name, inlinedSubs, parentNs, cssHash, componentNs
 	const params = [itemId];
 	if (node.index) params.push(node.index);
 	const itemSub = ssrCompileSub(
-		node.body.body,
+		itemBody,
 		ctx,
 		'__sitem',
 		params,
@@ -14461,8 +14462,8 @@ function ssrEmitFor(node, ctx, name, inlinedSubs, parentNs, cssHash, componentNs
 	// attribute serialization stay on the allocation-free path, matching the
 	// client forBlock's existing PURE-body proof.
 	const itemNeedsIdentity =
-		containsComponentCallOrControlFlow(node.body.body) ||
-		containsRenderCall(node.body.body) ||
+		containsComponentCallOrControlFlow(itemBody) ||
+		containsRenderCall(itemBody) ||
 		ssrAstCallsAny(itemSub.fn, ['_$ssrChild', '_$ssrComponent']);
 	const itemCall = ssrSubCall(
 		itemSub.fnName,
@@ -25141,6 +25142,7 @@ function planJsx(
 		b.deferred =
 			DEFERRABLE_MOUNT_KINDS.has(b.kind) &&
 			!sharesSpreadHost &&
+			!b.beforeConnect &&
 			b.name !== 'dangerouslySetInnerHTML';
 	}
 
@@ -25213,7 +25215,9 @@ function planJsx(
 	// these text mounts and flush them AFTER every walk has been emitted, so all navigation
 	// happens on the intact template. (Regression: StoryRow's `.meta` interleaves text holes
 	// with `<Link>` components.)
-	const deferredTextMounts = [];
+	// Connection-sensitive attributes also wait for every mount flag (including
+	// suppressHydrationWarning) before writing, but still run before insertion.
+	const postWalkMounts = [];
 	let nativeStyleSlots = 0;
 	// Emit per-binding mount code.
 	for (const b of elementBindings) {
@@ -25329,7 +25333,7 @@ function planJsx(
 		// `htextSwap` (sibling text hole) detaches its `<!>`; defer it past all walks (see above).
 		const mountEmit = emitBindingMount(b, elVar, bag);
 		if (mountEmit !== null) {
-			const target = b.kind === 'text' ? deferredTextMounts : mountLines;
+			const target = b.kind === 'text' || b.beforeConnect ? postWalkMounts : mountLines;
 			if (Array.isArray(mountEmit)) target.push(...mountEmit);
 			else target.push(mountEmit);
 		}
@@ -25395,9 +25399,9 @@ function planJsx(
 		anchorKey: 'portalAnchor',
 		stampLoc: false,
 	});
-	// Flush the deferred sibling-text-hole mounts now that every element walk is emitted —
-	// `htextSwap` can safely detach its `<!>` placeholder without breaking later navigation.
-	for (const line of deferredTextMounts) mountLines.push(line);
+	// Every element walk and mount flag is ready: text holes can replace their
+	// placeholders and iframe sources can initialize before the root is inserted.
+	for (const line of postWalkMounts) mountLines.push(line);
 
 	if (!noTemplate) {
 		// Allocate + insert + commit in ONE shared-factory call, LAST — see the
@@ -29349,6 +29353,9 @@ function emitElementHtml(
 						id: bindings.length,
 						kind: 'attr',
 						attributeHelper: writer?.helper,
+						// Connecting an iframe without its source creates an initial
+						// document before the intended navigation and sandbox checks.
+						beforeConnect: tag === 'iframe' && attrName.toLowerCase() === 'src',
 						name:
 							ctx.dev && (rawAttrName === 'tabIndex' || rawAttrName === 'htmlFor')
 								? rawAttrName
@@ -31580,6 +31587,79 @@ function keyedSelectionDepIndex(itemName, keyBody, subStmts, runtimeDepNames, ct
 	return runtimeDepNames.indexOf(selected.name);
 }
 
+// The first root's legacy key already owns the entire row through keyFn.
+// Avoid a second descriptor boundary for that same key. Only consume a host
+// key when the row cannot change a collected key before a later child reads it.
+// Opaque rendering, spreads and duplicate keys retain the existing boundary.
+// Component keys and nested host keys retain their own reconciliation ranges.
+function forItemTemplateBody(node, ctx) {
+	const body = node.body.body;
+	if (ctx._universalRuntimeUnit != null || body.length !== 1) return body;
+	const root = body[0];
+	if (!isPlainHostRoot(root) || isActivityLongForm(root, ctx) || isFragmentLongForm(root, ctx))
+		return body;
+	const attrs = root.attributes || root.openingElement?.attributes || [];
+	let keyIndex = -1;
+	for (let i = 0; i < attrs.length; i++) {
+		const attr = attrs[i];
+		if (attr.type === 'SpreadAttribute' || attr.type === 'JSXSpreadAttribute') return body;
+		if (jsxAttrRawName(attr) !== 'key') continue;
+		if (keyIndex !== -1 || attr.value == null) return body;
+		keyIndex = i;
+	}
+	if (keyIndex === -1) return body;
+	const value = attrs[keyIndex].value;
+	const key = value.type === 'JSXExpressionContainer' ? value.expression : value;
+	if (!isDeferralSafeBundleArg(key)) return body;
+	// Destructuring must not invoke defaults, computed reads or an iterator.
+	if (!isAutoMemoPropsParam(node.left.declarations[0].id)) return body;
+	function stableHost(host) {
+		if (!isPlainHostRoot(host) || isActivityLongForm(host, ctx) || isFragmentLongForm(host, ctx))
+			return false;
+		const tag = host.id?.name ?? host.openingElement?.name?.name;
+		if (tag.includes('-') || tag === 'script') return false;
+		const attributes = host.attributes || host.openingElement?.attributes || [];
+		if (
+			attributes.some(
+				(attr) =>
+					attr.type === 'SpreadAttribute' ||
+					attr.type === 'JSXSpreadAttribute' ||
+					jsxAttrRawName(attr) === 'is' ||
+					jsxAttrRawName(attr) === 'children',
+			)
+		)
+			return false;
+		// Inspect values so deferred event/ref callbacks remain eligible.
+		const values = attributes.map((attr) => attr.value);
+		if (containsRenderCall(values) || containsAutoMemoUnsafeStructure(values)) return false;
+		for (const child of host.children || []) {
+			if (child.type === 'JSXText') continue;
+			if (child.type === 'Text' || child.type === 'JSXExpressionContainer') {
+				const expr = child.expression;
+				if (!expr || expr.type === 'JSXEmptyExpression') continue;
+				if (
+					!isKnownTextChildExpression(expr) ||
+					containsRenderCall([expr]) ||
+					containsAutoMemoUnsafeStructure([expr])
+				)
+					return false;
+			} else if (!stableHost(child)) return false;
+		}
+		return true;
+	}
+	if (!stableHost(root)) return body;
+	const kept = attrs.filter((_, index) => index !== keyIndex);
+	return [
+		root.openingElement
+			? {
+					...root,
+					...(root.attributes === undefined ? {} : { attributes: kept }),
+					openingElement: { ...root.openingElement, attributes: kept },
+				}
+			: { ...root, attributes: kept },
+	];
+}
+
 function makeForCall(node, ctx, inlinedSubs, parentNs = 'html', cssHash = null) {
 	// `@for await (...)` (async iteration) has no meaning for the runtime's
 	// synchronous keyed reconciler. The TSRX parser currently rejects the surface
@@ -31613,7 +31693,7 @@ function makeForCall(node, ctx, inlinedSubs, parentNs = 'html', cssHash = null)
 	// we synthesize a fresh name and emit the destructuring inside the body so
 	// the keyFn still gets the whole item and the body still sees the fields.
 	const itemName = isDestructured ? '_item' : leftDeclId.name;
-	const subStmts = node.body.body;
+	const subStmts = forItemTemplateBody(node, ctx);
 
 	// Key resolution priority (matches @tsrx/core's build_hoisted_for_of_with_hooks):
 	//   1. `key={…}` attribute on the first Element child (legacy / explicit).
@@ -31638,7 +31718,7 @@ function makeForCall(node, ctx, inlinedSubs, parentNs = 'html', cssHash = null)
 	// body for the first Element and pull its `key=` attr if any. Accept both
 	// the old `Element` IR and the raw new `JSXElement` shape that's reached
 	// here when the body wasn't routed through normalizeChildren.
-	const firstEl = subStmts.find((n) => n.type === 'Element' || n.type === 'JSXElement');
+	const firstEl = node.body.body.find((n) => n.type === 'Element' || n.type === 'JSXElement');
 	if (firstEl) {
 		const keyAttr = (firstEl.attributes || firstEl.openingElement?.attributes || []).find(
 			(a) => (a.name?.name || a.name) === 'key',
@@ -31848,18 +31928,17 @@ function makeForCall(node, ctx, inlinedSubs, parentNs = 'html', cssHash = null)
 		const regionStmts = emptyStmts ? [...subStmts, ...emptyStmts] : subStmts;
 		const regionAst = b.block(regionStmts);
 		const regionFree = collectFreeIdentifiers(regionAst, bodyScope);
-		if (node.key) {
-			for (const name of collectFreeIdentifiers(node.key, bodyScope)) regionFree.add(name);
-		}
+		for (const name of collectFreeIdentifiers(keyBody, bodyScope)) regionFree.add(name);
 		let listSafe =
 			ctx.autoMemo === true &&
 			!hasPerItemEventClosure &&
 			isAutoMemoCalculationDependency(node.right) &&
 			!hasHook &&
 			!containsRenderCall(regionStmts, ctx) &&
-			!containsRenderCall(node.key ? [node.key] : [], ctx) &&
+			!containsRenderCall([keyBody], ctx) &&
 			!containsAutoMemoUnsafeStructure(regionStmts, ctx) &&
-			!containsAutoMemoUnsafeStructure(node.key ? [node.key] : [], ctx) &&
+			!containsAutoMemoUnsafeStructure([keyBody], ctx) &&
+			!containsImportedMemberRead(keyBody, ctx.importedNames) &&
 			!containsImportedMemberRead(regionAst, ctx.importedNames);
 		const listDeps = new Set();
 		const witnesses = collectImportedComponentReferences(regionAst, ctx.importedNames);

package/dist/host-property-diagnostics.js

@@ -122,6 +122,21 @@ for (const name of [
 ]) {
   KNOWN_SVG_PROPERTY_SPELLINGS.set(name.toLowerCase(), name);
 }
+const NON_NATIVE_LOWERCASE_PROPERTIES = /* @__PURE__ */ new Set([
+  "autoFocus",
+  "defaultValue",
+  "defaultChecked",
+  "dangerouslySetInnerHTML",
+  "className",
+  "suppressContentEditableWarning",
+  "suppressHydrationWarning",
+  "suppressNativeChangeWarning",
+  "__octaneNativeChangeDiagnostic",
+  "acceptCharset",
+  "htmlFor",
+  "httpEquiv",
+  "viewBox"
+]);
 function hostPropertyWarning(name, value, tag, isSvg = false) {
   const lower = name.toLowerCase();
   if (name === "for" && tag === "label") return null;
@@ -137,6 +152,9 @@ function hostPropertyWarning(name, value, tag, isSvg = false) {
   if (name.startsWith("aria-") || /^aria[A-Z]/.test(name) || name.startsWith("data-")) return null;
   const known = KNOWN_PROPERTY_SPELLINGS.get(lower) ?? (isSvg ? KNOWN_SVG_PROPERTY_SPELLINGS.get(lower) : void 0);
   if (known !== void 0) {
+    if (!isSvg && name === lower && // Hyphenated/namespaced presentation aliases belong to SVG, not HTML.
+    !name.includes("-") && !name.includes(":") && !NON_NATIVE_LOWERCASE_PROPERTIES.has(known) && (ATTRIBUTE_ALIASES.get(known) ?? lower) === lower)
+      return null;
     if (isSvg && ATTRIBUTE_ALIASES.get(known) === name) return null;
     return name !== known ? `Invalid DOM property \`${name}\`. Did you mean \`${known}\`?` : null;
   }

package/dist/runtime.js

@@ -24412,12 +24412,43 @@ function preservesCommittedSuspense(block) {
   }
   return false;
 }
+function markerlessBranchRoots(scope, domParent, after, end = null) {
+  let roots = 0;
+  const slots = scope._slots;
+  if (slots !== null) {
+    for (let i = 0; i < slots.length; i++) {
+      const slot = slots[i];
+      if (slot.anchor === after && (slot.__kind === "ifBlockSlot" || slot.__kind === "switchBlockSlot" || slot.__kind === "componentSlotSlot" && slot.block?.parentNode === domParent)) {
+        roots++;
+        if (end !== null) {
+          journalRootProperty(slot, "anchor", slot.anchor);
+          slot.anchor = end;
+        }
+      }
+    }
+  }
+  const children = scope.children;
+  if (children !== null) {
+    for (let i = 0; i < children.length; i++) {
+      const child2 = children[i].scope;
+      const block = child2.block;
+      if (block !== scope.block && block.parentNode === domParent && block.endMarker === after) {
+        roots += markerlessBranchRoots(child2, domParent, after, end) || 1;
+        if (end !== null) {
+          journalRootProperty(block, "endMarker", block.endMarker);
+          block.endMarker = end;
+        }
+      }
+    }
+  }
+  return roots;
+}
 function finalizeMarkerlessBranch(state, domParent, block, marker, before, after) {
   state.markerlessBefore = void 0;
   if (state.borrowed && state.start === null) return;
   const first = before ? getNextSibling(before) : getFirstChild(domParent);
   const last = after ? (STAGED_DOM?.view(after) ?? after).previousSibling : (STAGED_DOM?.view(domParent) ?? domParent).lastChild;
-  if (last !== null && first === last && first.nodeType === 1) {
+  if (last !== null && first === last && first.nodeType === 1 && markerlessBranchRoots(block, domParent, after) <= 1) {
     block.startMarker = first;
     block.endMarker = first;
     state.end = first;
@@ -24431,6 +24462,7 @@ function finalizeMarkerlessBranch(state, domParent, block, marker, before, after
     block.exclusiveMarkers = true;
     state.start = start;
     state.end = end;
+    markerlessBranchRoots(block, domParent, after, end);
   }
 }
 function replaceSharedBlockBoundary(parent, oldStart, oldEnd, newStart, newEnd) {

package/dist/version.js

@@ -1,4 +1,4 @@
-const version = "0.4.0";
+const version = "0.4.1";
 export {
   version
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "octane",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "license": "MIT",
   "type": "module",
   "sideEffects": [