@kudzujs/core 0.6.18 → 0.6.20

package/README.md

@@ -79,7 +79,7 @@ export default function HomePage() {
 npm run dev
 ```
 
-Pages live in `src/pages`; `index.tsx` maps to `/`. `npm run dev` serves locally on `127.0.0.1`, reloads the browser after successful rebuilds, and shows build failures in an error overlay. Across that full-page reload, compatible Kudzu logical state is briefly preserved by route-unique state variable name for the current pathname, query, and hash, including controlled properties, conditions, and keyed-list arrays. Renamed, removed, and duplicate-named state is skipped. Uncontrolled DOM state, focus, selection, and imperative DOM mutations are not preserved. Set `PORT` to change the default port of `3000`. The development client and state snapshot are dev-only; production output in `dist/` is unaffected.
+Pages live in `src/pages`; `index.tsx` maps to `/`. `npm run dev` serves locally on `127.0.0.1`, reloads the browser after successful rebuilds, and shows build failures in an error overlay. Across that full-page reload, compatible Kudzu logical state is briefly preserved by route-unique state variable name for the current pathname, query, and hash, including controlled properties, conditions, and keyed-list arrays. Renamed, removed, and duplicate-named state is skipped. Uncontrolled DOM state, focus, selection, and imperative DOM mutations are not preserved. The server starts at `PORT` or `3000` and increments until it finds an available port. Set `HOST=0.0.0.0` when a local reverse proxy or container must reach the server. The development client and state snapshot are dev-only; production output in `dist/` is unaffected.
 
 Dynamic static pages use bracket parameters and `getStaticPaths()`:
 

package/framework/build.mjs

@@ -65,6 +65,7 @@ export async function build({ quiet = false, minify = true } = {}) {
   const plans = []
   const pageEntries = []
   const effectEntries = []
+  const nativeEntries = []
   const paramEntries = []
   const rewrites = []
   const emittedRoutes = new Set()
@@ -103,6 +104,7 @@ export async function build({ quiet = false, minify = true } = {}) {
       const navigationGroup = navigationByRoute.get(applicationRoute)
       const navigable = Boolean(navigationGroup)
       const effectPath = `effects/${route ? `${route}/index` : "index"}.js`
+      const nativePath = `native/${route ? `${route}/index` : "index"}.js`
       const paramPath = `params/${route}/index.js`
       if (emittedRoutes.has(routePath)) throw new Error(`Duplicate route: ${routePath}`)
       emittedRoutes.add(routePath)
@@ -126,6 +128,7 @@ export async function build({ quiet = false, minify = true } = {}) {
         base,
         runtimeAsset: runtimePlaceholder,
         effectAsset: assetPath(base, `assets/${effectPath}`),
+        nativeAsset: assetPath(base, `assets/${nativePath}`),
         paramAsset: assetPath(base, `assets/${paramPath}`),
         runtimeParams: runtimeSchema?.params,
         ...(navigable ? { navigationAsset: navigationGroup.assetPath, applicationId: navigationGroup.applicationId, layoutId: navigationGroup.layoutId, routeId: applicationRoute } : {})
@@ -141,6 +144,10 @@ export async function build({ quiet = false, minify = true } = {}) {
       plans.push({ route: routePath, ...result.plan })
       if (result.hasParams) paramEntries.push({ path: paramPath, schema: runtimeSchema, params: result.plan.params, usesDependencyRuntime, navigable })
       if (result.hasEffects) effectEntries.push({ path: effectPath, effects: runtimeEffects(result.plan.effects, navigable), paramPath: result.hasParams ? paramPath : undefined, usesDependencyRuntime, navigable })
+      if (result.plan.events.some(event => event.native)) nativeEntries.push({
+        path: nativePath,
+        modules: [...new Set(result.plan.events.filter(event => event.native).map(event => event.native.module))]
+      })
       if (result.hasBehaviors) {
         behaviorCount++
         if (!usesDependencyRuntime) regularBehaviorCount++
@@ -196,8 +203,7 @@ export async function build({ quiet = false, minify = true } = {}) {
   const hasNestedStateCaptures = hasNestedCaptureState(plans)
   const hasSetterCaptures = hasCaptureType(plans, "setter")
   const hasEffectCaptures = plans.some(plan => plan.effects.some(effect => Object.keys(effect.scope).length))
-  const nativeModules = emittedHandlerModules.filter(module => module.hasNativeHandlers).map(module => assetPath(base, `assets/${module.path}`))
-  const hasNativeHandlers = nativeModules.length > 0
+  const hasNativeHandlers = nativeEntries.length > 0
   const hasEffects = effectEntries.length > 0
   const hasNavigableEffects = effectEntries.some(entry => entry.navigable)
   const hasNavigableOwners = effectEntries.some(entry => entry.navigable && entry.effects.some(effect => effect.owner))
@@ -279,9 +285,10 @@ export async function build({ quiet = false, minify = true } = {}) {
     const nativeRuntime = (await readFile(new URL("./native-runtime.js", import.meta.url), "utf8"))
       .replace('"./shared-runtime.js"', '"./kudzu.js"')
       .replace('"./serialization.js"', '"./kudzu-serialization.js"')
-    await writeJavaScript(join(assetsDirectory, "kudzu-native.js"), specializeNativeRuntime(nativeRuntime, nativeEvents, nativeModules), minify, {
+    await writeJavaScript(join(assetsDirectory, "kudzu-native.js"), specializeEvents(nativeRuntime, nativeEvents), minify, {
       "globalThis.__KUDZU_CAPTURE_SETTER__": String(hasSetterCaptures)
     })
+    for (const entry of nativeEntries) await printNativeEntry(entry, assetsDirectory, base, minify)
   }
   if (navigationGroups.length) {
     const navigationSource = await readFile(new URL("./navigation-runtime.js", import.meta.url), "utf8")
@@ -411,10 +418,13 @@ function specializeNavigationPatterns(source, enabled) {
 function fallback`)
 }
 
-function specializeNativeRuntime(source, events, modules) {
-  const imports = modules.map((module, index) => `import * as __kNativeModule${index} from ${JSON.stringify(module)}`).join("\n")
-  const entries = modules.map((module, index) => `[${JSON.stringify(module)}, __kNativeModule${index}]`).join(",")
-  return `${imports}\n${specializeEvents(source, events).replace(/const modules = new Map\(\[[^\n]*\]\)/, `const modules = new Map([${entries}])`)}`
+async function printNativeEntry(entry, assetsDirectory, base, minify) {
+  const output = join(assetsDirectory, entry.path)
+  await mkdir(dirname(output), { recursive: true })
+  const imports = entry.modules.map((module, index) => `import * as __kNativeModule${index} from ${JSON.stringify(module)}`).join("\n")
+  const registrations = entry.modules.map((module, index) => `[${JSON.stringify(module)}, __kNativeModule${index}]`).join(",")
+  const runtime = assetPath(base, "assets/kudzu-native.js")
+  await writeJavaScript(output, `import { registerNativeModules } from ${JSON.stringify(runtime)}\n${imports}\nregisterNativeModules([${registrations}])`, minify)
 }
 
 function printEffectEntry(effects, output, handlerModules, assetsDirectory, base, paramPath, runtimeName) {
@@ -1360,8 +1370,13 @@ export function parseDevPort(value) {
   return port
 }
 
-export async function dev({ port = parseDevPort(process.env.PORT) } = {}) {
+export function parseDevHost(value) {
+  return value?.trim() || "127.0.0.1"
+}
+
+export async function dev({ port = parseDevPort(process.env.PORT), host = parseDevHost(process.env.HOST) } = {}) {
   if (!Number.isInteger(port) || port < 0 || port > 65535) throw new Error(`Invalid dev server port: ${port}`)
+  if (typeof host !== "string" || !host.trim()) throw new Error(`Invalid dev server host: ${host}`)
   const base = normalizeBase((await loadConfig()).base)
 
   let buildError
@@ -1431,7 +1446,8 @@ export async function dev({ port = parseDevPort(process.env.PORT) } = {}) {
     }
   })
 
-  server.listen(port, "127.0.0.1", () => console.log(`Kudzu dev server: http://127.0.0.1:${server.address().port}`))
+  const listeningPort = await listenDevServer(server, port, host)
+  console.log(`Kudzu dev server: http://${host}:${listeningPort}`)
 
   let timer
   let rebuilding = false
@@ -1467,6 +1483,32 @@ export async function dev({ port = parseDevPort(process.env.PORT) } = {}) {
   }
 }
 
+async function listenDevServer(server, port, host) {
+  let candidate = port
+  while (true) {
+    try {
+      await new Promise((resolve, reject) => {
+        const onError = error => {
+          server.off("listening", onListening)
+          reject(error)
+        }
+        const onListening = () => {
+          server.off("error", onError)
+          resolve()
+        }
+        server.once("error", onError)
+        server.once("listening", onListening)
+        server.listen(candidate, host)
+      })
+      return server.address().port
+    } catch (error) {
+      if (error.code !== "EADDRINUSE" || candidate === 0 || candidate === 65535) throw error
+      console.log(`Port ${candidate} is in use, trying ${candidate + 1}`)
+      candidate++
+    }
+  }
+}
+
 function injectDevClient(html, session, revision, schema) {
   return `${html}${devClient(session, revision, schema).replace("binding|list|native", "binding|deps|list|native")}`
 }

package/framework/core.d.ts

@@ -55,6 +55,7 @@ export function renderPage<Props = Record<string, never>>(
     base?: string
     runtimeAsset?: string
     effectAsset?: string
+    nativeAsset?: string
     paramAsset?: string
     runtimeParams?: string[]
     navigationAsset?: string

package/framework/core.mjs

@@ -381,7 +381,7 @@ export async function renderPage(component, metadata = {}, props = {}, layout) {
       ? `<script type="module"${capability} src="${escapeAttribute(metadata.runtimeAsset ?? assetPath(metadata.base, "assets/kudzu.js"))}"></script>`
       : ""
     const nativeRuntime = renderContext.hasNativeBehaviors
-      ? `<script type="module"${capability} src="${assetPath(metadata.base, "assets/kudzu-native.js")}"></script>`
+      ? `<script type="module"${capability} src="${escapeAttribute(metadata.nativeAsset ?? assetPath(metadata.base, "assets/kudzu-native.js"))}"></script>`
       : ""
     const paramRuntime = renderContext.hasParams
       ? `<script type="module"${capability} src="${escapeAttribute(metadata.paramAsset)}"></script>`
@@ -675,7 +675,7 @@ async function renderNode(node, namespace, selectValue = noSelectValue) {
       continue
     }
 
-    const name = rawName === "className" ? "class" : rawName === "htmlFor" ? "for" : svg ? svgAttributeAliases[rawName] ?? rawName : rawName
+    const name = rawName === "className" ? "class" : rawName === "htmlFor" ? "for" : rawName === "defaultValue" && tag === "input" ? "value" : svg ? svgAttributeAliases[rawName] ?? rawName : rawName
     const propertyTarget = name === "class" || name === "disabled" || name === "value" || name === "checked" || name === "style"
     if (value?.[listFieldMarker]) {
       attributes += renderAttribute(name, value.value)

package/framework/list-runtime.js

@@ -6,6 +6,7 @@ const mountedLists = new WeakSet()
 const imports = __KUDZU_LIST_ASYNC_PARTS__ ? new Map() : undefined
 const revisions = __KUDZU_LIST_ASYNC_PARTS__ ? new WeakMap() : undefined
 const itemParts = new WeakMap()
+const listItems = new WeakMap()
 const conditionOwners = __KUDZU_LIST_CONDITIONS__ ? new WeakMap() : undefined
 const itemPartsSelector = `[data-k-list-text]${__KUDZU_LIST_ATTRIBUTES__ ? ",[data-k-list-attrs]" : ""}${__KUDZU_LIST_EVENTS__ ? ",[data-k-list-events]" : ""}${__KUDZU_LIST_EXPRESSIONS__ ? ",[data-k-list-expression]" : ""}${__KUDZU_LIST_EXPRESSION_ATTRIBUTES__ ? ",[data-k-list-expression-attrs]" : ""}${__KUDZU_LIST_CONDITIONS__ ? ",[data-k-list-condition]" : ""}${__KUDZU_LIST_EFFECTS__ ? ",[data-k-effects]" : ""}`
 
@@ -25,6 +26,9 @@ registerUnmountHook(unmountLists)
 if (typeof document !== "undefined") mountDom(document)
 
 function mountLists(root) {
+  let owner = root.nodeType === Node.ELEMENT_NODE ? root : root.parentElement
+  while (owner && !listItems.has(owner)) owner = owner.parentElement
+  if (owner) fillListParts(root, listItemParts(root), listItems.get(owner), 0)
   for (const start of matching(root, "template[data-k-list]")) {
     if (mountedLists.has(start)) continue
     mountedLists.add(start)
@@ -136,6 +140,7 @@ function updateList(list) {
       fillListItem(node, item)
       if (__KUDZU_LIST_ITEM_HOOKS__) notifyListItem(list.descriptor.state, node)
     }
+    listItems.set(node, item)
     next.push([token, node])
     values.set(token, value)
   }
@@ -234,6 +239,7 @@ function addListRoot(list, { item, key, token, value }) {
   if (__KUDZU_LIST_ROW_STATES__ && list.descriptor.rowStates) initializeRowStates(list.descriptor, key, node)
   mapListItemParts(list.parts, node)
   fillListItem(node, item)
+  listItems.set(node, item)
   const parent = list.container ?? list.start.parentNode
   parent.insertBefore(node, list.boundary)
   if (__KUDZU_LIST_MOUNTS__ && list.descriptor.mount) mountDom(node)

package/framework/native-runtime.js

@@ -2,6 +2,11 @@ import { browserState, commitDom, registerMountHook, registerUnmountHook } from
 import { deserialize } from "./serialization.js"
 
 const registrations = new WeakMap()
+const modules = new Map()
+
+export function registerNativeModules(entries) {
+  for (const [url, module] of entries) modules.set(url, module)
+}
 
 export function createNativeContext(state, stateIds, commit, serializedScope = {}) {
   const changed = new Set()
@@ -52,7 +57,6 @@ export function createNativeContext(state, stateIds, commit, serializedScope = {
 
 if (typeof document !== "undefined") {
   const eventNames = ["click", "input", "change", "submit", "keydown", "keyup"]
-  const modules = new Map([])
   const mount = root => mountNative(root, eventNames, modules)
   registerMountHook(mount)
   registerUnmountHook(unmountNative)

package/package.json

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