@kudzujs/core 0.6.12 → 0.6.14

package/README.md

@@ -190,7 +190,16 @@ function Controls({ dispatch }: { dispatch: Dispatch<TodoAction> }) {
 return <Controls dispatch={dispatch} />
 ```
 
-Kudzu specializes that call at build time; no function prop or child component survives in the browser. Lazy initializers, package, namespace, local, async, and generator reducers, runtime imports in imported dispatch components, forwarding across another component, and reducer dispatch through context remain unsupported.
+Kudzu specializes that call at build time; no function prop or child component survives in the browser. Relative TypeScript constants and helpers used inside the child handler are renamed for call-site safety and bundled into the parent handler graph. Lazy initializers, package, namespace, local, async, and generator reducers, package imports or child imports used outside event handlers, forwarding across another component, and reducer dispatch through context remain unsupported.
+
+That specialized component may pass one inline or simple `const` callback containing dispatch to one relative-imported synchronous child with an intrinsic root:
+
+```tsx
+const add = (title: string) => dispatch({ type: "add", title })
+return <Input onSubmit={add} />
+```
+
+Kudzu substitutes the callback into the child's compiled event handler at build time. This is not general function-prop serialization: only one nested specialized callback boundary is supported, and `useCallback`, further forwarding, effects, component roots, and callback use outside event handlers are rejected.
 
 ## Reactive Attributes
 

package/framework/README.md

@@ -25,7 +25,7 @@ Inline SVG rendering normalizes an explicit set of common React presentation ali
 
 Same-file and relative-imported components receiving a direct local-state array prop are specialized to intrinsic JSX before keyed-list analysis, so their component function is not retained in the browser. Handler modules are emitted only when a rendered descriptor references them, preventing specialized imported components from adding dead browser assets. Direct JSON-safe primitive keyed-item dependencies subscribe each row record to its owning list commit and compare selected fields after `list-runtime.js` synchronously refreshes the row marker. Only changed rows rerun with the complete latest item; reorder compares equal, unrelated fields do nothing, and key changes remain remove plus mount. Builds without item dependencies emit no item reader or list-state subscription code.
 
-The reduced `useReducer` form reuses ordinary state slots. A direct dispatch in a compiled handler becomes a functional `set` whose reducer is bundled from a relative TypeScript module into that handler graph. One direct dispatch prop into a same-file or relative-imported synchronous component is specialized to intrinsic JSX at the call site, so its handler retains the parent reducer scope and no dispatch capture or child handler asset is emitted. Reducer-free routes and shared runtimes are unchanged; no reducer runtime or browser component instance exists.
+The reduced `useReducer` form reuses ordinary state slots. A direct dispatch in a compiled handler becomes a functional `set` whose reducer is bundled from a relative TypeScript module into that handler graph. One direct dispatch prop into a same-file or relative-imported synchronous component is specialized to intrinsic JSX at the call site, so its handler retains the parent reducer scope and no dispatch capture or child handler asset is emitted. Relative TypeScript imports referenced inside that child handler receive collision-free call-site aliases and join the parent handler graph. One nested relative-imported intrinsic child may receive an inline or simple `const` callback containing dispatch; the compiler recursively substitutes that callback once and omits the nested child handler asset. Reducer-free routes and shared runtimes are unchanged; no reducer runtime or browser component instance exists.
 
 `kudzu.config` may opt one emitted shared-layout group into same-document navigation with legacy `navigation: { routes: ["/product", "/items/[id]"] }`, or multiple groups with `navigation: { groups: [{ routes: [...] }, { routes: [...] }] }`. The forms are mutually exclusive. Identities are globally unique emitted exact paths or `runtimeParams` patterns; each group uses one page-exported layout function identity. Runtime records securely match concrete pathnames under `base`, and their cache-safe parameter initializer runs before route DOM/effects mount on every transition. Each group receives a deterministic route-hashed asset specialized to only its records, pattern decoder, and effect/parameter lifecycle needs. Cross-group and ungrouped anchors remain native and are not prefetched; overlapping path domains across groups fail the build. Route effect entries export cache-safe layout and route mount functions: layout effects, including conditional/keyed DOM-owned effects, persist for the group session; route effects receive a fresh owner registry after each route insertion; and non-persisted page disposal cleans route before layout. Direct primitive state, runtime parameter, and keyed-item property dependencies and cleanup are supported. Fragment payloads and coordinated View Transitions are not implemented.
 

package/framework/build.mjs

@@ -1738,6 +1738,57 @@ function createKudzuTransformer(nativeHandlers, effectHandlers, reactiveBindings
     const specializedDeclarations = new WeakSet()
     const stateBackedComponentFunctions = new WeakSet()
     const stateBackedComponentRoots = []
+    let specializedImportIndex = 0
+    const mergeSpecializedImports = (root, componentSource, call) => {
+      const componentImports = clientImportBindings(componentSource, componentSource.fileName, sourceFiles)
+      for (const name of runtimeImportNames(componentSource, false)) if (referenceIdentifiers(root, name).length) fail(call, "Imported specialized component handlers may only use relative TypeScript runtime imports")
+      const substitutions = new Map()
+      for (const [name, entry] of componentImports) {
+        const references = referenceIdentifiers(root, name)
+        if (!references.length) continue
+        if (references.some(reference => !insideJsxEventHandler(reference, root))) fail(call, `Imported specialized component runtime import "${name}" may only be used inside event handlers`)
+        let local
+        do local = `__kDispatchImport${specializedImportIndex++}`
+        while (importBindings.has(local))
+        substitutions.set(name, factory.createIdentifier(local))
+        importBindings.set(local, { ...entry, local })
+      }
+      if (!substitutions.size) return root
+      const merged = substituteClone(root, substitutions, factory, context)
+      ts.setParentRecursive(merged, false)
+      merged.parent = root.parent
+      return merged
+    }
+    const expandReducerCallbacks = (root, componentSource, call) => {
+      const componentImports = clientImportBindings(componentSource, componentSource.fileName, sourceFiles)
+      const replacements = new WeakMap()
+      let count = 0
+      for (const [name, entry] of componentImports) {
+        if (entry.kind === "namespace") continue
+        const nestedCalls = jsxTagUses(root, name).filter(nestedCall => jsxCallHasReducerCallbackProp(nestedCall, reducersForNode(nestedCall, reducersByFunction)))
+        if (!nestedCalls.length) continue
+        const imported = entry.kind === "default" ? "default" : entry.imported
+        let nestedComponent
+        try {
+          nestedComponent = resolveComponentExport(entry.target, imported, importedSource, sourceFiles)
+        } catch {
+          fail(nestedCalls[0], "Reducer callback props require a component imported from a relative TypeScript module")
+        }
+        for (const nestedCall of nestedCalls) {
+          const nested = specializeComponentCall(nestedCall, nestedComponent, sourceFile, factory, context, fail, "Reducer-callback")
+          if (nested.effects.length) fail(nestedCall, "Reducer-callback components cannot declare effects")
+          nested.root = mergeSpecializedImports(nested.root, nestedComponent.getSourceFile(), nestedCall)
+          synthesizeTree(nested.root)
+          replacements.set(nestedCall, nested.root)
+          count++
+        }
+      }
+      if (!count) return root
+      const expanded = replaceSpecializedCalls(root, replacements, context)
+      ts.setParentRecursive(expanded, false)
+      expanded.parent = root.parent
+      return expanded
+    }
     for (const [name, component] of components) {
       const calls = jsxTagUses(sourceFile, name)
       const stateBackedCalls = calls.filter(call => isStateBackedListComponentCall(call, component.function, settersByFunction.get(nearestFunction(call)) ?? new Map()))
@@ -1785,6 +1836,7 @@ function createKudzuTransformer(nativeHandlers, effectHandlers, reactiveBindings
         if (componentSpecializations.has(call)) fail(call, "Reducer dispatch props cannot be combined with another component specialization")
         const specialization = specializeComponentCall(call, component.function, sourceFile, factory, context, fail, "Reducer-dispatch")
         if (specialization.effects.length) fail(call, "Reducer-dispatch components cannot declare effects")
+        specialization.root = expandReducerCallbacks(specialization.root, component.function.getSourceFile(), call)
         componentSpecializations.set(call, specialization)
       }
       specializedDeclarations.add(component.declaration)
@@ -1802,11 +1854,12 @@ function createKudzuTransformer(nativeHandlers, effectHandlers, reactiveBindings
         fail(dispatchCalls[0], `Reducer dispatch props require a component imported from a relative TypeScript module`)
       }
       const componentSource = component.getSourceFile()
-      if (clientImportBindings(componentSource, componentSource.fileName, sourceFiles).size) fail(dispatchCalls[0], "Imported reducer-dispatch components cannot use runtime imports")
       for (const call of dispatchCalls) {
         if (componentSpecializations.has(call)) fail(call, "Reducer dispatch props cannot be combined with another component specialization")
         const specialization = specializeComponentCall(call, component, sourceFile, factory, context, fail, "Reducer-dispatch")
         if (specialization.effects.length) fail(call, "Reducer-dispatch components cannot declare effects")
+        specialization.root = expandReducerCallbacks(specialization.root, componentSource, call)
+        specialization.root = mergeSpecializedImports(specialization.root, componentSource, call)
         synthesizeTree(specialization.root)
         componentSpecializations.set(call, specialization)
       }
@@ -2304,6 +2357,43 @@ function jsxCallHasDirectReducerProp(call, reducers) {
   })
 }
 
+function jsxCallHasReducerCallbackProp(call, reducers) {
+  const attributes = ts.isJsxElement(call) ? call.openingElement.attributes : call.attributes
+  return attributes.properties.some(attribute => {
+    const value = ts.isJsxAttribute(attribute) && attribute.initializer && ts.isJsxExpression(attribute.initializer) ? unwrapExpression(attribute.initializer.expression) : undefined
+    return value && referencedReducerDispatches(value, reducers, value).size
+  })
+}
+
+function runtimeImportNames(sourceFile, relative) {
+  const names = new Set()
+  for (const statement of sourceFile.statements) {
+    if (!ts.isImportDeclaration(statement) || !statement.importClause || statement.importClause.isTypeOnly || !ts.isStringLiteral(statement.moduleSpecifier) || statement.moduleSpecifier.text.startsWith(".") !== relative) continue
+    const clause = statement.importClause
+    if (clause.name) names.add(clause.name.text)
+    if (clause.namedBindings && ts.isNamespaceImport(clause.namedBindings)) names.add(clause.namedBindings.name.text)
+    if (clause.namedBindings && ts.isNamedImports(clause.namedBindings)) for (const entry of clause.namedBindings.elements) if (!entry.isTypeOnly) names.add(entry.name.text)
+  }
+  return names
+}
+
+function referenceIdentifiers(root, name) {
+  const references = []
+  const visit = node => {
+    if (ts.isIdentifier(node) && node.text === name && isReferenceIdentifier(node) && !isShadowedIdentifier(node, root)) references.push(node)
+    ts.forEachChild(node, visit)
+  }
+  visit(root)
+  return references
+}
+
+function insideJsxEventHandler(node, root) {
+  for (let current = node.parent; current && current !== root.parent; current = current.parent) {
+    if (ts.isJsxAttribute(current) && /^on[A-Z]/.test(current.name.text)) return true
+  }
+  return false
+}
+
 function validateKeyedList(parts, sourceFile, listValues, listEventItems, listConditions) {
   const fail = (node, message) => {
     throw sourceNodeError(node, sourceFile, message)
@@ -2368,7 +2458,7 @@ function specializeComponentCall(call, component, sourceFile, factory, context,
   let key
   for (const attribute of callAttributes.properties) {
     if (ts.isJsxSpreadAttribute(attribute)) fail(attribute, `${label} component prop spreads are not supported`)
-    const name = attribute.name.getText()
+    const name = attribute.name.text
     if (props.has(name) || name === "key" && key) fail(attribute, `Duplicate ${label.toLowerCase()} component prop "${name}"`)
     const value = !attribute.initializer
       ? factory.createTrue()
@@ -2446,6 +2536,11 @@ function substituteClone(root, substitutions, factory, context) {
   return visit(root)
 }
 
+function replaceSpecializedCalls(root, replacements, context) {
+  const visit = node => replacements.get(node) ?? ts.visitEachChild(node, visit, context)
+  return ts.visitNode(root, visit)
+}
+
 function cloneAst(root, factory, context) {
   const visit = node => {
     const clone = factory.cloneNode(node)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kudzujs/core",
-  "version": "0.6.12",
+  "version": "0.6.14",
   "description": "HTML-first TSX framework with synchronous state semantics and no virtual DOM",
   "type": "module",
   "license": "MIT",