@junejs/server 0.0.13 → 0.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@junejs/server",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "description": "June host adapters + dev server. Host-coupled; depends on the pure @junejs/core contract layer.",
   "type": "module",
   "license": "MIT",
@@ -30,8 +30,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@junejs/core": "0.0.13",
-    "@junejs/db": "0.0.13",
+    "@junejs/core": "0.0.15",
+    "@junejs/db": "0.0.15",
     "marked": "^18.0.5",
     "rolldown": "^1.1.0",
     "postcss": "^8.4.0",

package/src/app.ts

@@ -112,6 +112,12 @@ export function createApp({ appDir: appDirInput, config = {} }: CreateAppOptions
 
   const resources = memoizeResources(config.resources);
 
+  // Boot the opt-in Tier-3 data layer (e.g. `dataLayer: junoDataLayer()`) once:
+  // its install() wires the ambient `db` (Juno registers its SQL tagger). Explicit
+  // and config-declared — no import-time side-effect, and the framework still never
+  // imports the data layer (the user's config does).
+  config.dataLayer?.install();
+
   // The app's not-found.tsx is part of the dev surface too (the build freezes
   // it into the manifest as `notFound`), and importing it is async — so the
   // pipeline is built lazily on first fetch, memoized after.

package/src/build.ts

@@ -384,10 +384,20 @@ export async function juneBuild(
   const resourcesField = hasResources
     ? `\n  resources: bindWorkerResources(${JSON.stringify(resourceFlags)}),`
     : "";
+
+  // Opt-in Tier-3 data layer: import its installDataLayer from the declared module
+  // and call it at worker boot — the prod twin of the dev host's dataLayer.install()
+  // (createApp). The user's config names the module; the framework never hard-codes it.
+  const dataLayerModule = fullConfig.dataLayer?.module;
+  if (dataLayerModule) {
+    imports.push(`import { installDataLayer } from ${JSON.stringify(dataLayerModule)};`);
+  }
+  const dataLayerBoot = dataLayerModule ? "\ninstallDataLayer();\n" : "";
+
   const entry = `// AUTO-GENERATED by \`june build\` — do not edit. Regenerate: june build .
 ${adapterEntry.imports.join("\n")}
 ${imports.join("\n")}
-
+${dataLayerBoot}
 const pipeline = createWorker({
   routes: {
 ${statics.join("\n")}

package/src/dev-reload.ts

@@ -1,9 +1,12 @@
 // Dev live-reload — the browser half of the watch story. The supervisor
 // (cli watch.ts) restarts the SERVER on save; this module makes the BROWSER
 // follow: every dev HTML page gets a tiny script that holds an SSE connection
-// to /__june/events. A restart drops the connection; the script reconnects
-// and reloads on success. No version tokens, no diffing — the dropped socket
-// IS the signal, which is exactly right for a process-restart reload model.
+// to /__june/events. A restart drops the connection; the script reconnects,
+// and on success it tries a push-HMR MORPH (window.__juneLiveReload, set by the
+// islands runtime when clientRouter is on): re-fetch the current page's fragment
+// from the fresh server and morph it in place — island state, focus, and scroll
+// survive the edit. It falls back to a full reload when there's no morph hook
+// (no clientRouter) or the morph can't apply. The dropped socket IS the signal.
 //
 // This lives in the startDevServer WRAPPER, never in the pipeline: dev/built
 // parity (parity.test.ts compares pipeline outputs byte-for-byte) stays
@@ -32,7 +35,15 @@ const RELOAD_JS = `// june dev live-reload: reconnect-after-drop → reload; "cs
   const connect = () => {
     const es = new EventSource(${JSON.stringify(EVENTS_PATH)});
     es.addEventListener("open", () => {
-      if (dropped) location.reload();
+      if (dropped) {
+        // push-HMR: morph the freshly-restarted page in place (state survives);
+        // hard-reload only if there's no morph hook or it can't apply.
+        const hot = window.__juneLiveReload;
+        (hot ? hot() : Promise.resolve(false)).then(
+          (ok) => { if (!ok) location.reload(); },
+          () => location.reload(),
+        );
+      }
       dropped = false;
     });
     es.addEventListener("css", swapCss); // stylesheet edit → swap, no reload

package/src/index.ts

@@ -20,9 +20,11 @@ export {
   type WorkerEnv,
   type ResourceFlags,
 } from "./resources";
-// Ambient data resources (db/kv/blob) live in their own package, `@junejs/db` —
-// `import { db } from "@junejs/db"`. The host opens the resources and runs each
-// request in the scope they read (pipeline imports runInScope from @junejs/db).
+// Ambient data resources (db/kv/blob) live in `@junejs/db`; re-exported here so
+// `import { db } from "@junejs/server"` is the ONE canonical handle. It auto-tags
+// raw queries when Juno is installed (Juno registers the tagger via @junejs/db) —
+// so the framework never imports Juno, yet `db` is the tagging one in a Juno app.
+export { db, kv, blob } from "@junejs/db";
 export { loadJuneConfig } from "./config-loader";
 export {
   migrate,

package/src/negotiate.ts

@@ -8,12 +8,19 @@
 
 import type { RenderTarget } from "@junejs/core/route";
 
+// The fragment media type + title header are the client-router wire protocol —
+// defined once in @junejs/core so the browser router and this negotiator share
+// the exact strings. Re-exported so existing server-side importers are unaffected.
+export { FRAGMENT_ACCEPT, TITLE_HEADER } from "@junejs/core/nav-protocol";
+
 const EXT_TARGET: Record<string, RenderTarget> = {
   ".json": "json",
   ".md": "md",
 };
 
 const ACCEPT_TARGET: Array<[test: RegExp, target: RenderTarget]> = [
+  // fragment first: its media type is exact + can't collide with browser Accepts.
+  [/text\/vnd\.june\.fragment\+html/, "fragment"],
   [/text\/markdown/, "md"],
   [/application\/json/, "json"],
 ];

package/src/pipeline.ts

@@ -39,7 +39,7 @@ import { ensureScope, runInScope } from "@junejs/db";
 import type { AgentConfig } from "@junejs/core/config";
 import type { Resources } from "@junejs/core/resources";
 
-import { negotiate } from "./negotiate";
+import { negotiate, TITLE_HEADER } from "./negotiate";
 
 export type LayoutComponent = React.ComponentType<{ children: React.ReactNode }>;
 export type LoadingComponent = React.ComponentType;
@@ -124,25 +124,6 @@ function StreamedView({
   return provideLoaderData(data, def.view ? def.view(data, ctx) : null);
 }
 
-// renderToReadableStream does not emit the doctype; prepend it without buffering
-// the React stream (streaming stays incremental).
-function withDoctype(source: ReadableStream<Uint8Array>): ReadableStream<Uint8Array> {
-  const reader = source.getReader();
-  return new ReadableStream<Uint8Array>({
-    start(controller) {
-      controller.enqueue(new TextEncoder().encode("<!doctype html>\n"));
-    },
-    async pull(controller) {
-      const { done, value } = await reader.read();
-      if (done) controller.close();
-      else controller.enqueue(value);
-    },
-    cancel(reason) {
-      void reader.cancel(reason);
-    },
-  });
-}
-
 // The default favicon: the site name's first character in a rounded square —
 // a plain SVG string, so it needs no fonts, no rasterizer, and works for CJK
 // names as readily as latin ones. Served at /favicon.svg AND /favicon.ico
@@ -187,8 +168,33 @@ export function createPipeline(cfg: PipelineConfig): Pipeline {
       React.createElement(Document, { config: docConfigForRender(), metadata, children: wrapped }),
     );
     await stream.allReady; // fully resolved markup (no streamed Suspense fallbacks)
-    const html = "<!doctype html>\n" + (await new Response(stream).text());
-    return new Response(html, { status, headers: htmlHeaders() });
+    // React 19 emits <!DOCTYPE html> itself for an <html> root — don't prepend a
+    // second one.
+    return new Response(stream, { status, headers: htmlHeaders() });
+  }
+
+  // Route A: the [data-june-root] inner HTML for a soft-nav / live-apply request
+  // — the chain-wrapped view rendered WITHOUT the Document shell, so it is
+  // byte-identical to what a full load puts inside [data-june-root] (the morph
+  // parity contract). The title rides back in a header so the client updates
+  // document.title without parsing the body. allReady (no streamed fallback) so
+  // the applied DOM is complete.
+  async function renderFragment(
+    node: React.ReactNode,
+    metadata: Metadata | undefined,
+    chain: LayoutComponent[],
+  ): Promise<Response> {
+    const wrapped = chain.reduceRight<React.ReactNode>(
+      (acc, L) => React.createElement(L, null, acc),
+      node,
+    );
+    const stream = await renderToReadableStream(wrapped);
+    await stream.allReady;
+    const html = await new Response(stream).text();
+    const headers = new Headers({ "content-type": "text/html; charset=utf-8" });
+    const title = typeof metadata?.title === "string" ? metadata.title : undefined;
+    if (title) headers.set(TITLE_HEADER, title);
+    return new Response(html, { status: 200, headers });
   }
 
   // WebMCP: register the app's actions as browser tools. Computed per render
@@ -225,8 +231,9 @@ export function createPipeline(cfg: PipelineConfig): Pipeline {
       React.createElement(Document, { config: docConfigForRender(), metadata, children: wrapped }),
       { onError: (e: unknown) => console.error("[june] streaming render error:", e) },
     );
-    // NO allReady — return the live stream (shell first), doctype prepended.
-    return new Response(withDoctype(stream), { status: 200, headers: htmlHeaders() });
+    // NO allReady — return the live stream (shell first). React 19 streams the
+    // <!DOCTYPE html> as the first bytes, so nothing to prepend.
+    return new Response(stream, { status: 200, headers: htmlHeaders() });
   }
 
   function notFoundResponse(target: RenderTarget, pathname: string): Promise<Response> | Response {
@@ -270,8 +277,29 @@ export function createPipeline(cfg: PipelineConfig): Pipeline {
   ): Promise<Response> {
     const { def, chain } = resolved;
     // A projection declared `false` is disabled → 404 (and absent from discovery).
-    if (def[target] === false) return notFoundResponse(target, ctx.url.pathname);
+    // "fragment" isn't a declarable projection (it's the view rendered without the
+    // shell), so it's never disabled — exclude it from the check.
+    if (target !== "fragment" && def[target] === false) {
+      return notFoundResponse(target, ctx.url.pathname);
+    }
+
+    const res = await renderTarget(target, def, data, ctx, chain);
+    // Every projection here is chosen by the Accept header at the SAME url (a full
+    // page, its fragment, its .md and .json all live at the clean path). Without
+    // Vary, a shared/browser cache can hand a soft-nav fragment to a real page
+    // load — which surfaces as a document that starts mid-body. Make Accept part
+    // of the cache key.
+    res.headers.set("vary", "accept");
+    return res;
+  }
 
+  async function renderTarget(
+    target: RenderTarget,
+    def: Resolved["def"],
+    data: unknown,
+    ctx: RouteContext,
+    chain: LayoutComponent[],
+  ): Promise<Response> {
     if (target === "md") return renderMarkdown(def, data, ctx);
     if (target === "json") {
       // Convention: a json() fn customizes; absent → serialize the loader data.
@@ -279,7 +307,9 @@ export function createPipeline(cfg: PipelineConfig): Pipeline {
       return Response.json(payload);
     }
     const node = provideLoaderData(data, def.view ? def.view(data, ctx) : null);
-    return renderDocument(node, resolveMeta(def, data, ctx), 200, chain);
+    const meta = resolveMeta(def, data, ctx);
+    if (target === "fragment") return renderFragment(node, meta, chain);
+    return renderDocument(node, meta, 200, chain);
   }
 
   async function discovery(url: URL): Promise<Response | null> {

package/src/sqlite-driver.ts

@@ -35,21 +35,36 @@ export const NODE_SQLITE_MIN_ODD = "23.4.0";
 // synchronous, but the SURFACE is async, so swapping in D1 later is invisible to
 // every caller. (Moved here from host.ts with the driver it serves.)
 function asyncSqlite(db: SyncSqlite): JuneDb {
+  // Prepared-statement cache, keyed by SQL string — compile-once at the driver:
+  // parse + bytecode-compile each query ONCE, then re-bind. Essential on the
+  // node:sqlite path (`db.query` = `db.prepare`, which re-compiles every call);
+  // harmless on bun:sqlite (it already caches `query()` internally). The app's set
+  // of query SHAPES is finite (Juno compiles one per shape), so this stays bounded.
+  // Statements re-bind across calls — exactly what sqlite prepares are for.
+  const stmts = new Map<string, SyncStatement>();
+  const prep = (sql: string): SyncStatement => {
+    let s = stmts.get(sql);
+    if (!s) {
+      s = db.query(sql);
+      stmts.set(sql, s);
+    }
+    return s;
+  };
   const self: JuneDb = {
     async query<T>(sql: string, params: unknown[] = []) {
-      return db.query(sql).all(...params) as T[];
+      return prep(sql).all(...params) as T[];
     },
     async get<T>(sql: string, params: unknown[] = []) {
       // Normalize "no row" to undefined — bun:sqlite returns null, node:sqlite
       // returns undefined; the seam hides the difference.
-      return (db.query(sql).get(...params) ?? undefined) as T | undefined;
+      return (prep(sql).get(...params) ?? undefined) as T | undefined;
     },
     async run(sql: string, params: unknown[] = []) {
-      const r = db.query(sql).run(...params);
+      const r = prep(sql).run(...params);
       return { changes: Number(r.changes), lastInsertRowid: r.lastInsertRowid ?? 0 };
     },
     async exec(sql: string) {
-      db.exec(sql);
+      db.exec(sql); // DDL / multi-statement — not a cacheable prepared statement
     },
     async transaction<T>(fn: (tx: JuneDb) => Promise<T>) {
       db.exec("BEGIN");
@@ -63,6 +78,7 @@ function asyncSqlite(db: SyncSqlite): JuneDb {
       }
     },
     async close() {
+      stmts.clear();
       db.close();
     },
   };