@kudzujs/core 0.6.19 → 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>`

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.19",
+  "version": "0.6.20",
   "description": "HTML-first TSX framework with synchronous state semantics and no virtual DOM",
   "type": "module",
   "license": "MIT",