@timber-js/app 0.2.0-alpha.139 → 0.2.0-alpha.140

package/dist/plugins/client-chunks.d.ts

@@ -20,6 +20,13 @@
  *   - `facade:app/layout.tsx` (root layout) → `"client-shared"`
  *   - `shared:...` (shared across chunks) → `"client-shared"`
  *
+ * When a 'use client' module lives outside the app directory (e.g. in
+ * src/posts/ or src/components/), the function falls back to deriving
+ * the layout boundary from the serverChunk's facade path. This prevents
+ * lazily-loaded client dependencies (e.g. via import.meta.glob) from
+ * being hoisted into the shared chunk when they're only used by a
+ * specific route.
+ *
  * This balances route-scoped code splitting with HTTP request count:
  * fewer chunks than per-serverChunk, but still avoids downloading every
  * client component on every page.
@@ -28,5 +35,5 @@ export declare function clientChunkGroup(meta: {
     id: string;
     normalizedId: string;
     serverChunk: string;
-}, appDir: string): string;
+}, appDir: string, root: string): string;
 //# sourceMappingURL=client-chunks.d.ts.map

package/dist/plugins/client-chunks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"client-chunks.d.ts","sourceRoot":"","sources":["../../src/plugins/client-chunks.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,YAAY,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,EAC/D,MAAM,EAAE,MAAM,GACb,MAAM,CAkCR"}
+{"version":3,"file":"client-chunks.d.ts","sourceRoot":"","sources":["../../src/plugins/client-chunks.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAoCH;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,YAAY,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,EAC/D,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,MAAM,GACX,MAAM,CAwCR"}

package/dist/plugins/fonts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fonts.d.ts","sourceRoot":"","sources":["../../src/plugins/fonts.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,EAAE,MAAM,EAAiB,MAAM,MAAM,CAAC;AAClD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AA0B1D,OAAO,EAAE,YAAY,EAAE,oBAAoB,EAAE,KAAK,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAC7F,OAAO,EACL,cAAc,EACd,iBAAiB,EACjB,qBAAqB,EACrB,sBAAsB,EACtB,uBAAuB,EACvB,wBAAwB,GACzB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAElF;;GAEG;AACH,wBAAgB,WAAW,CAAC,GAAG,EAAE,aAAa,GAAG,MAAM,CAsLtD"}
+{"version":3,"file":"fonts.d.ts","sourceRoot":"","sources":["../../src/plugins/fonts.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,EAAE,MAAM,EAAiB,MAAM,MAAM,CAAC;AAClD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AA0B1D,OAAO,EAAE,YAAY,EAAE,oBAAoB,EAAE,KAAK,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAC7F,OAAO,EACL,cAAc,EACd,iBAAiB,EACjB,qBAAqB,EACrB,sBAAsB,EACtB,uBAAuB,EACvB,wBAAwB,GACzB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAElF;;GAEG;AACH,wBAAgB,WAAW,CAAC,GAAG,EAAE,aAAa,GAAG,MAAM,CAuLtD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@timber-js/app",
-  "version": "0.2.0-alpha.139",
+  "version": "0.2.0-alpha.140",
   "description": "Vite-native React framework built for Servers and Serverless Platforms — correct HTTP semantics, real status codes, pages that work without JavaScript",
   "keywords": [
     "cloudflare-workers",
@@ -114,11 +114,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "scripts": {
-    "build": "vite build --config vite.lib.config.ts && tsc --emitDeclarationOnly --project tsconfig.json --outDir dist",
-    "typecheck": "tsgo --noEmit",
-    "prepublishOnly": "pnpm run build"
-  },
   "dependencies": {
     "@opentelemetry/api": "^1.9.1",
     "@opentelemetry/context-async-hooks": "^2.7.1",
@@ -162,5 +157,9 @@
   },
   "engines": {
     "node": ">=22.12.0"
+  },
+  "scripts": {
+    "build": "vite build --config vite.lib.config.ts && tsc --emitDeclarationOnly --project tsconfig.json --outDir dist",
+    "typecheck": "tsgo --noEmit"
   }
-}
+}

package/src/fonts/bundle.ts

@@ -10,8 +10,9 @@
  */
 
 import { readFileSync, existsSync } from 'node:fs';
-import { resolve, normalize } from 'node:path';
+import { resolve, normalize, extname } from 'node:path';
 import type { ManifestFontEntry, BuildManifest } from '../server/build-manifest.js';
+import { contentHash } from './google.js';
 
 /**
  * Minimal shape of the asset descriptor accepted by Rollup's `emitFile`.
@@ -67,7 +68,7 @@ export function emitFontAssets(
     });
   }
 
-  // Local font files (emitted by basename)
+  // Local font files (content-hashed for immutable caching)
   for (const font of pipeline.fonts()) {
     if (font.provider !== 'local' || !font.localSources) continue;
     for (const src of font.localSources) {
@@ -76,11 +77,11 @@ export function emitFontAssets(
         warn(`Local font file not found: ${absolutePath}`);
         continue;
       }
-      const basename = src.path.split('/').pop() ?? src.path;
+      const filename = src.hashedBasename ?? src.path.split('/').pop() ?? src.path;
       const data = readFileSync(absolutePath);
       emitFile({
         type: 'asset',
-        fileName: `_timber/fonts/${basename}`,
+        fileName: `_timber/fonts/${filename}`,
         source: data,
       });
     }
@@ -89,17 +90,13 @@ export function emitFontAssets(
 
 /**
  * Populate `buildManifest.fonts` with `ManifestFontEntry[]` keyed by the
- * importer module path (relative to the project root, matching how Vite's
- * `manifest.json` keys css/js).
+ * absolute importer path. This matches the runtime route manifest's
+ * `filePath` values (which are absolute) and is consistent with how
+ * `buildManifest.css` keys work after TIM-1014.
  *
- * Google fonts use the content-hashed filenames produced during
- * `buildStart`. Local fonts use the source basename.
+ * All font binaries use content-hashed filenames for immutable caching.
  */
-export function writeFontManifest(
-  pipeline: FontPipeline,
-  buildManifest: BuildManifest,
-  rootDir: string
-): void {
+export function writeFontManifest(pipeline: FontPipeline, buildManifest: BuildManifest): void {
   const fontsByImporter = new Map<string, ManifestFontEntry[]>();
 
   for (const entry of pipeline.entries()) {
@@ -107,7 +104,7 @@ export function writeFontManifest(
 
     if (entry.provider === 'local' && entry.localSources) {
       for (const src of entry.localSources) {
-        const filename = src.path.split('/').pop() ?? src.path;
+        const filename = src.hashedBasename ?? src.path.split('/').pop() ?? src.path;
         const format = inferFontFormat(src.path);
         manifestEntries.push({
           href: `/_timber/fonts/${filename}`,
@@ -116,9 +113,6 @@ export function writeFontManifest(
         });
       }
     } else if (entry.cachedFiles) {
-      // Google fonts: use the per-entry cached files attached during
-      // buildStart. Each entry owns its own cached binaries (TIM-829),
-      // so we no longer need a family-grouped lookup.
       for (const cf of entry.cachedFiles) {
         manifestEntries.push({
           href: `/_timber/fonts/${cf.hashedFilename}`,
@@ -131,12 +125,7 @@ export function writeFontManifest(
     fontsByImporter.set(entry.importer, manifestEntries);
   }
 
-  // Normalize importer paths to be relative to project root (matching how
-  // Vite's manifest.json keys work for css/js).
   for (const [importer, entries] of fontsByImporter) {
-    const relativePath = importer.startsWith(rootDir)
-      ? importer.slice(rootDir.length + 1)
-      : importer;
-    buildManifest.fonts[relativePath] = entries;
+    buildManifest.fonts[importer] = entries;
   }
 }

package/src/fonts/local.ts

@@ -112,10 +112,10 @@ export function generateLocalFontFaces(
 ): FontFaceDescriptor[] {
   return sources.map((entry) => {
     const format = inferFontFormat(entry.path);
-    const basename = entry.path.split('/').pop() ?? entry.path;
+    const filename = entry.hashedBasename ?? entry.path.split('/').pop() ?? entry.path;
     return {
       family,
-      src: `url('${urlPrefix}/${basename}') format('${format}')`,
+      src: `url('${urlPrefix}/${filename}') format('${format}')`,
       weight: entry.weight,
       style: entry.style,
       display,

package/src/fonts/pipeline.ts

@@ -26,8 +26,11 @@
  * Design doc: 24-fonts.md
  */
 
+import { readFileSync, existsSync } from 'node:fs';
+import { resolve, normalize, extname } from 'node:path';
 import type { ExtractedFont, FontEntry, FontFaceDescriptor } from './types.js';
 import type { CachedFont } from './google.js';
+import { contentHash } from './google.js';
 import { generateVariableClass, generateFontFamilyClass, generateFontFaces } from './css.js';
 import { generateFallbackCss } from './fallbacks.js';
 import { generateLocalFontFaces } from './local.js';
@@ -56,6 +59,13 @@ export class FontPipeline {
    */
   private readonly _entries = new Map<string, FontEntry>();
 
+  /** When true, local font sources are content-hashed at registration time. */
+  private readonly _hashOnRegister: boolean;
+
+  constructor(opts?: { hashOnRegister?: boolean }) {
+    this._hashOnRegister = opts?.hashOnRegister ?? false;
+  }
+
   /**
    * Per-importer virtual CSS module id registry. Populated by the
    * transform hook when it inlines a font function call, read by the
@@ -140,7 +150,20 @@ export class FontPipeline {
     // Wholesale replace — never merge faces/cachedFiles from a previous
     // registration. Re-registration with the same ID always represents the
     // newest authoritative config and must start from a clean slate.
-    this._entries.set(extracted.id, { ...extracted });
+    const entry: FontEntry = { ...extracted };
+    if (this._hashOnRegister && entry.provider === 'local' && entry.localSources) {
+      for (const src of entry.localSources) {
+        const absolutePath = normalize(resolve(src.path));
+        if (!existsSync(absolutePath)) continue;
+        const data = readFileSync(absolutePath);
+        const hash = contentHash(data);
+        const basename = src.path.split('/').pop() ?? src.path;
+        const ext = extname(basename);
+        const stem = ext ? basename.slice(0, -ext.length) : basename;
+        src.hashedBasename = `${stem}-${hash}${ext}`;
+      }
+    }
+    this._entries.set(entry.id, entry);
   }
 
   /** Attach pre-resolved `@font-face` descriptors to a font entry. */

package/src/fonts/types.ts

@@ -26,6 +26,8 @@ export interface LocalFontSrc {
   path: string;
   weight?: string;
   style?: string;
+  /** Content-hashed basename for production builds (e.g. `MyFont-Bold-a1b2c3d4.woff2`). */
+  hashedBasename?: string;
 }
 
 /** Configuration passed to `localFont()`. */

package/src/index.ts

@@ -157,7 +157,7 @@ function createRscOptions(
     // Layout-boundary grouping is the middle ground: components under the same
     // layout segment share a chunk. See design/27-chunking-strategy.md, TIM-440, TIM-499.
     clientChunks: (meta: { id: string; normalizedId: string; serverChunk: string }) =>
-      clientChunkGroup(meta, ctx.appDir),
+      clientChunkGroup(meta, ctx.appDir, ctx.root),
   };
 
   // Bound args encryption — AES-256-GCM authenticated encryption for

package/src/plugins/client-chunks.ts

@@ -10,6 +10,40 @@
  * See design/27-chunking-strategy.md, TIM-440, TIM-499.
  */
 
+import { relative } from 'node:path';
+
+/**
+ * Check whether a root-relative path lives under the app directory,
+ * and if so return the first non-group route segment.
+ *
+ * `appPrefix` is the root-relative app directory with a trailing slash
+ * (e.g. "app/" or "src/app/"), computed once from the resolved appDir
+ * and root. Matching uses `startsWith` — no ambiguity.
+ *
+ * Returns:
+ *   { inApp: false }                       — path is not under app/
+ *   { inApp: true, segment: null }         — root of app/ (e.g. app/layout.tsx)
+ *   { inApp: true, segment: "dashboard" }  — nested route boundary
+ */
+function findAppBoundary(
+  path: string,
+  appPrefix: string
+): { inApp: false } | { inApp: true; segment: string | null } {
+  const relPath = path.replace(/\\/g, '/');
+  if (!relPath.startsWith(appPrefix)) return { inApp: false };
+
+  const withinApp = relPath.slice(appPrefix.length);
+  const segments = withinApp.split('/');
+
+  for (const seg of segments) {
+    if (seg.includes('.')) break;
+    if (seg.startsWith('(') && seg.endsWith(')')) continue;
+    return { inApp: true, segment: seg };
+  }
+
+  return { inApp: true, segment: null };
+}
+
 /**
  * Derive a chunk group name for a client reference module.
  *
@@ -21,42 +55,56 @@
  *   - `facade:app/layout.tsx` (root layout) → `"client-shared"`
  *   - `shared:...` (shared across chunks) → `"client-shared"`
  *
+ * When a 'use client' module lives outside the app directory (e.g. in
+ * src/posts/ or src/components/), the function falls back to deriving
+ * the layout boundary from the serverChunk's facade path. This prevents
+ * lazily-loaded client dependencies (e.g. via import.meta.glob) from
+ * being hoisted into the shared chunk when they're only used by a
+ * specific route.
+ *
  * This balances route-scoped code splitting with HTTP request count:
  * fewer chunks than per-serverChunk, but still avoids downloading every
  * client component on every page.
  */
 export function clientChunkGroup(
   meta: { id: string; normalizedId: string; serverChunk: string },
-  appDir: string
+  appDir: string,
+  root: string
 ): string {
   const { normalizedId, serverChunk } = meta;
 
   // Shared chunks (not associated with a single route entry) get one group.
   if (serverChunk.startsWith('shared:')) return 'client-shared';
 
-  // Derive the layout boundary from the file's location relative to the
-  // app directory. normalizedId is root-relative (e.g. "app/dashboard/shell.tsx"
-  // or "src/app/dashboard/shell.tsx"). We find the "app/" prefix and walk
-  // segments after it to find the first non-group directory.
-  const relPath = normalizedId.replace(/\\/g, '/');
+  // Compute the root-relative app directory prefix once. Both normalizedId
+  // and serverChunk paths from the RSC plugin are root-relative (via
+  // path.relative(root, absoluteId)), so this prefix matches exactly —
+  // no ambiguity with content directories that happen to share a name.
+  const appPrefix = relative(root, appDir).replace(/\\/g, '/') + '/';
 
-  // Find the app directory boundary in the path. The last segment of appDir
-  // is the app folder name (usually "app").
-  const appDirName = appDir.replace(/\\/g, '/').split('/').pop() || 'app';
-  const appIdx = relPath.indexOf(appDirName + '/');
-  if (appIdx === -1) return 'client-shared';
+  // Try the client module's own path first.
+  const result = findAppBoundary(normalizedId, appPrefix);
+  if (result.inApp && result.segment) return `client-${result.segment}`;
+  if (result.inApp) return 'client-shared';
 
-  const withinApp = relPath.slice(appIdx + appDirName.length + 1);
-  const segments = withinApp.split('/');
+  // The client module lives outside the app directory (e.g. src/posts/,
+  // src/components/). Fall back to the serverChunk's facade path — the
+  // RSC entry point that imported this module — to derive the route's
+  // layout boundary. This keeps dependencies of lazily-loaded 'use client'
+  // components (e.g. from import.meta.glob) in per-route async chunks
+  // instead of hoisting them into client-shared.
+  if (serverChunk.startsWith('facade:')) {
+    const facadePath = serverChunk.slice('facade:'.length).replace(/\\/g, '/');
+    const facadeResult = findAppBoundary(facadePath, appPrefix);
+    if (facadeResult.inApp && facadeResult.segment) return `client-${facadeResult.segment}`;
+    if (facadeResult.inApp) return 'client-shared';
 
-  // Find first directory segment that isn't a route group like (group-a)
-  for (const seg of segments) {
-    // Skip the filename itself
-    if (seg.includes('.')) break;
-    // Skip route groups — parenthesized segments like (group-a)
-    if (seg.startsWith('(') && seg.endsWith(')')) continue;
-    // Found a real route segment
-    return `client-${seg}`;
+    // Both module and facade are outside app/. Derive a chunk name from
+    // the full facade path to keep these isolated from client-shared.
+    // Uses the full path (minus extension) to avoid collisions between
+    // facades with the same basename (e.g. foo/index.mdx vs bar/index.mdx).
+    const facadeName = facadePath.replace(/\.[^.]+$/, '').replace(/\//g, '-');
+    if (facadeName) return `client-${facadeName}`;
   }
 
   // Root-level files (layout.tsx, page.tsx directly in app/) go into the

package/src/plugins/fonts.ts

@@ -60,7 +60,7 @@ export { generateFontCss, generateAllFontCss } from '../fonts/virtual-modules.js
  * Create the timber-fonts Vite plugin.
  */
 export function timberFonts(ctx: PluginContext): Plugin {
-  const pipeline = new FontPipeline();
+  const pipeline = new FontPipeline({ hashOnRegister: !ctx.dev });
 
   return {
     name: 'timber-fonts',
@@ -189,8 +189,10 @@ export function timberFonts(ctx: PluginContext): Plugin {
      *
      * In dev mode this is a no-op — fonts point to the Google CDN and are
      * resolved lazily inside `load()` when the side-effect module runs.
-     * The registry is populated by the transform hook which runs before
-     * `buildStart` in the build pipeline, so all fonts are known here.
+     *
+     * Local font hashing is handled at registration time by the pipeline
+     * (when `hashOnRegister` is set) so hashed filenames are available
+     * before the virtual CSS `load()` hook runs.
      */
     async buildStart() {
       if (ctx.dev) return;
@@ -226,10 +228,9 @@ export function timberFonts(ctx: PluginContext): Plugin {
     /**
      * Emit font binaries and build-manifest entries.
      *
-     * Google fonts use the content-hashed filenames produced during
-     * `buildStart`. Local fonts are emitted by basename. Font CSS is
-     * handled by Vite's CSS pipeline via virtual modules — we only emit
-     * binaries here.
+     * All font binaries (Google and local) use content-hashed filenames
+     * for immutable caching. Font CSS is handled by Vite's CSS pipeline
+     * via virtual modules — we only emit binaries here.
      */
     generateBundle() {
       emitFontAssets(
@@ -238,7 +239,7 @@ export function timberFonts(ctx: PluginContext): Plugin {
         (msg) => this.warn(msg)
       );
       if (!ctx.buildManifest) return;
-      writeFontManifest(pipeline, ctx.buildManifest, ctx.root);
+      writeFontManifest(pipeline, ctx.buildManifest);
     },
   };
 }