@timber-js/app 0.2.0-alpha.10 → 0.2.0-alpha.101

package/src/plugins/mdx.ts

@@ -11,7 +11,9 @@
 import type { Plugin } from 'vite';
 import { existsSync } from 'node:fs';
 import { join } from 'node:path';
-import type { PluginContext } from '#/index.js';
+import { createRequire } from 'node:module';
+import { pathToFileURL } from 'node:url';
+import type { PluginContext } from '../plugin-context.js';
 
 const MDX_EXTENSIONS = ['mdx', 'md'];
 
@@ -54,15 +56,45 @@ function shouldActivate(ctx: PluginContext): boolean {
 }
 
 /**
- * Try to dynamically import a module by name. Returns the default export
- * or the module itself, or undefined if the module is not installed.
+ * Try to dynamically import a module by name, resolving from the user's
+ * project root rather than from `@timber-js/app`'s own location.
+ *
+ * Why this matters: pnpm only hoists declared (peer) dependencies into a
+ * package's resolution scope. The MDX integration's optional companions
+ * — `remark-frontmatter`, `remark-mdx-frontmatter`, `@mdx-js/rollup` — are
+ * installed as direct deps of the consumer (e.g. `packages/website`), not
+ * `@timber-js/app`. A bare `import('remark-frontmatter')` from inside this
+ * file resolves against `packages/timber-app/node_modules` and silently
+ * fails with `ERR_MODULE_NOT_FOUND`, which made `tryImport` return
+ * `undefined` and skipped frontmatter parsing entirely — leaving MDX to
+ * choke on YAML as JS expressions (TIM-840).
+ *
+ * Resolving relative to `projectRoot` (via `createRequire`) makes the
+ * lookup walk the consumer's `node_modules` tree first, which is where
+ * pnpm puts the user's deps.
+ *
+ * Returns the default export, the module itself, or undefined if the
+ * module is not installed.
  */
-async function tryImport(name: string): Promise<unknown | undefined> {
+async function tryImport(name: string, projectRoot: string): Promise<unknown | undefined> {
   try {
-    const mod = await import(name);
+    // Anchor resolution at the consumer's package.json so we walk their
+    // node_modules tree, not @timber-js/app's. createRequire().resolve()
+    // returns an absolute file path that ESM dynamic import accepts when
+    // wrapped as a file:// URL.
+    const require = createRequire(join(projectRoot, 'package.json'));
+    const resolved = require.resolve(name);
+    const mod = await import(pathToFileURL(resolved).href);
     return mod.default ?? mod;
   } catch {
-    return undefined;
+    // Fall back to a bare import — covers the rare case where the package
+    // lives next to @timber-js/app (e.g. monorepo with hoisted deps).
+    try {
+      const mod = await import(name);
+      return mod.default ?? mod;
+    } catch {
+      return undefined;
+    }
   }
 }
 
@@ -80,7 +112,7 @@ export function timberMdx(ctx: PluginContext): Plugin {
   async function activate(): Promise<void> {
     if (innerPlugin !== null || !shouldActivate(ctx)) return;
 
-    const createMdxPlugin = (await tryImport('@mdx-js/rollup')) as
+    const createMdxPlugin = (await tryImport('@mdx-js/rollup', ctx.root)) as
       | ((options?: Record<string, unknown>) => Plugin)
       | undefined;
 
@@ -99,10 +131,11 @@ export function timberMdx(ctx: PluginContext): Plugin {
 
     const mdxConfig = ctx.config.mdx ?? {};
 
-    // Auto-register frontmatter plugins
+    // Auto-register frontmatter plugins. Resolve from the consumer's root
+    // so pnpm finds packages declared in the user's package.json (TIM-840).
     const remarkPlugins: unknown[] = [];
-    const remarkFrontmatter = await tryImport('remark-frontmatter');
-    const remarkMdxFrontmatter = await tryImport('remark-mdx-frontmatter');
+    const remarkFrontmatter = await tryImport('remark-frontmatter', ctx.root);
+    const remarkMdxFrontmatter = await tryImport('remark-mdx-frontmatter', ctx.root);
     if (remarkFrontmatter) remarkPlugins.push(remarkFrontmatter);
     if (remarkMdxFrontmatter) remarkPlugins.push(remarkMdxFrontmatter);
 

package/src/plugins/routing.ts

@@ -10,25 +10,43 @@
 
 import type { Plugin, ViteDevServer } from 'vite';
 import { writeFile, mkdir } from 'node:fs/promises';
+import { existsSync, readFileSync } from 'node:fs';
 import { join } from 'node:path';
-import { scanRoutes } from '#/routing/scanner.js';
-import { generateRouteMap } from '#/routing/codegen.js';
-import { collectInterceptionRewrites } from '#/routing/interception.js';
+import { scanRoutes } from '../routing/scanner.js';
+import { generateRouteMap } from '../routing/codegen.js';
+import { collectInterceptionRewrites } from '../routing/interception.js';
+
 import {
-  lintStatusFileDirectives,
-  formatStatusFileLintWarnings,
-} from '#/routing/status-file-lint.js';
-import type { RouteTree, SegmentNode, RouteFile } from '#/routing/types.js';
-import type { PluginContext } from '#/index.js';
+  lintConventions,
+  checkAppDirExists,
+  formatConventionWarnings,
+} from '../routing/convention-lint.js';
+import type { RouteTree, SegmentNode, RouteFile } from '../routing/types.js';
+import type { PluginContext } from '../plugin-context.js';
 
 const VIRTUAL_MODULE_ID = 'virtual:timber-route-manifest';
 const RESOLVED_VIRTUAL_ID = `\0${VIRTUAL_MODULE_ID}`;
 
+// TIM-830: Search-params registry virtual module.
+//
+// Statically imports the `searchParams` named export from every page
+// that exports one, and registers each definition into the shared
+// search-params registry keyed by the un-interpolated route pattern
+// (e.g. '/products/[id]'). This lets `<Link>` serialize flat
+// `Partial<T>` values at runtime without callers importing the
+// definition at the call site.
+//
+// The imports are STATIC (`import { searchParams as r0 } from '...'`)
+// so Vite/Rolldown tree-shakes each page's component body out of the
+// registry chunk — only the `searchParams` named export is pulled in.
+const SEARCH_PARAMS_REGISTRY_ID = 'virtual:timber-search-params-registry';
+const RESOLVED_SEARCH_PARAMS_REGISTRY_ID = `\0${SEARCH_PARAMS_REGISTRY_ID}`;
+
 /**
  * File convention names we track for changes that require manifest regeneration.
  */
 const ROUTE_FILE_PATTERNS =
-  /\/(page|layout|middleware|access|route|error|default|denied|search-params|\d{3}|[45]xx|not-found|forbidden|unauthorized|sitemap|robots|manifest|favicon|icon|opengraph-image|twitter-image|apple-icon)\./;
+  /\/(page|layout|middleware|access|route|error|global-error|default|denied|params|\d{3}|[45]xx|not-found|forbidden|unauthorized|sitemap|robots|manifest|favicon|icon|opengraph-image|twitter-image|apple-icon)\./;
 
 /**
  * Create the timber-routing Vite plugin.
@@ -83,6 +101,24 @@ export function timberRouting(ctx: PluginContext): Plugin {
   const warnedFiles = new Set<string>();
 
   function rescan(): void {
+    // Check app/ directory exists before scanning
+    const appDirWarning = checkAppDirExists(ctx.appDir);
+    if (appDirWarning) {
+      const formatted = formatConventionWarnings([appDirWarning]);
+      if (formatted) process.stderr.write(`${formatted}\n`);
+      // Still create an empty tree so the rest of the pipeline doesn't crash
+      ctx.routeTree = {
+        root: {
+          segmentName: '',
+          segmentType: 'static',
+          urlPath: '/',
+          children: [],
+          slots: {},
+        },
+      };
+      return;
+    }
+
     ctx.timer.start('route-scan');
     ctx.routeTree = scanRoutes(ctx.appDir, {
       pageExtensions: ctx.config.pageExtensions,
@@ -90,12 +126,13 @@ export function timberRouting(ctx: PluginContext): Plugin {
     ctx.timer.end('route-scan');
     writeCodegen(ctx);
 
-    // Lint status files for missing 'use client' directive
-    const warnings = lintStatusFileDirectives(ctx.routeTree);
-    const newWarnings = warnings.filter((w) => !warnedFiles.has(w.filePath));
-    if (newWarnings.length > 0) {
-      for (const w of newWarnings) warnedFiles.add(w.filePath);
-      console.warn(formatStatusFileLintWarnings(newWarnings));
+    // Lint conventions (empty app, missing methods, missing root layout)
+    const conventionWarnings = lintConventions(ctx.routeTree, ctx.appDir);
+    const newConventionWarnings = conventionWarnings.filter((w) => !warnedFiles.has(w.id));
+    if (newConventionWarnings.length > 0) {
+      for (const w of newConventionWarnings) warnedFiles.add(w.id);
+      const formatted = formatConventionWarnings(newConventionWarnings);
+      if (formatted) process.stderr.write(`${formatted}\n`);
     }
   }
 
@@ -123,6 +160,14 @@ export function timberRouting(ctx: PluginContext): Plugin {
         return RESOLVED_VIRTUAL_ID;
       }
 
+      // TIM-830: Search-params registry virtual module
+      if (
+        cleanId === SEARCH_PARAMS_REGISTRY_ID ||
+        cleanId.endsWith(`/${SEARCH_PARAMS_REGISTRY_ID}`)
+      ) {
+        return RESOLVED_SEARCH_PARAMS_REGISTRY_ID;
+      }
+
       return null;
     },
 
@@ -133,14 +178,22 @@ export function timberRouting(ctx: PluginContext): Plugin {
      * with absolute import paths for all file references.
      */
     load(id: string) {
-      if (id !== RESOLVED_VIRTUAL_ID) return null;
+      if (id === RESOLVED_VIRTUAL_ID) {
+        // If routeTree hasn't been built yet (shouldn't happen), scan now
+        if (!ctx.routeTree) {
+          rescan();
+        }
+        return generateManifestModule(ctx.routeTree!, ctx.root);
+      }
 
-      // If routeTree hasn't been built yet (shouldn't happen), scan now
-      if (!ctx.routeTree) {
-        rescan();
+      if (id === RESOLVED_SEARCH_PARAMS_REGISTRY_ID) {
+        if (!ctx.routeTree) {
+          rescan();
+        }
+        return generateSearchParamsRegistryModule(ctx.routeTree!);
       }
 
-      return generateManifestModule(ctx.routeTree!);
+      return null;
     },
 
     /**
@@ -168,20 +221,49 @@ export function timberRouting(ctx: PluginContext): Plugin {
       // Watch the app directory
       devServer.watcher.add(ctx.appDir);
 
-      const handleFileChange = (filePath: string) => {
-        // Only react to route-significant files in the app directory
+      /** Snapshot of the last generated manifest, used to detect structural changes. */
+      let lastManifest = ctx.routeTree ? generateManifestModule(ctx.routeTree, ctx.root) : '';
+
+      /**
+       * Handle a route-significant file being added or removed.
+       * Always triggers a full-reload since the route tree structure changed.
+       */
+      const handleStructuralChange = (filePath: string) => {
         if (!filePath.startsWith(ctx.appDir)) return;
         if (!ROUTE_FILE_PATTERNS.test(filePath)) return;
 
-        // Rescan the route tree
         rescan();
-
-        // Invalidate the virtual module in all environments
+        lastManifest = ctx.routeTree ? generateManifestModule(ctx.routeTree, ctx.root) : '';
         invalidateManifest(devServer);
       };
 
-      devServer.watcher.on('add', handleFileChange);
-      devServer.watcher.on('unlink', handleFileChange);
+      /**
+       * Handle a route file's content changing.
+       *
+       * Most content edits (JSX changes, fixing typos) don't affect route
+       * metadata — Vite's React Fast Refresh handles those via normal HMR.
+       * Only rescan and full-reload when route metadata actually changed
+       * (e.g., searchParams export added/removed, metadata export changed).
+       */
+      const handleContentChange = (filePath: string) => {
+        if (!filePath.startsWith(ctx.appDir)) return;
+        if (!ROUTE_FILE_PATTERNS.test(filePath)) return;
+
+        rescan();
+        const newManifest = ctx.routeTree ? generateManifestModule(ctx.routeTree, ctx.root) : '';
+        if (newManifest !== lastManifest) {
+          lastManifest = newManifest;
+          invalidateManifest(devServer);
+        }
+        // Otherwise: content edit didn't change route metadata — let Vite HMR handle it
+      };
+
+      devServer.watcher.on('add', handleStructuralChange);
+      devServer.watcher.on('unlink', handleStructuralChange);
+      // Watch content changes to page files — searchParams detection depends
+      // on file contents (export const searchParams), not just file presence.
+      // But only full-reload when route metadata actually changes.
+      devServer.watcher.on('change', handleContentChange);
       // Also watch renames (which are add+unlink) — handled by the above
     },
   };
@@ -198,9 +280,11 @@ function invalidateManifest(server: ViteDevServer): void {
     const env = server.environments[envName];
     if (!env?.moduleGraph) continue;
 
-    const mod = env.moduleGraph.getModuleById(RESOLVED_VIRTUAL_ID);
-    if (mod) {
-      env.moduleGraph.invalidateModule(mod);
+    for (const virtualId of [RESOLVED_VIRTUAL_ID, RESOLVED_SEARCH_PARAMS_REGISTRY_ID]) {
+      const mod = env.moduleGraph.getModuleById(virtualId);
+      if (mod) {
+        env.moduleGraph.invalidateModule(mod);
+      }
     }
   }
 
@@ -208,13 +292,88 @@ function invalidateManifest(server: ViteDevServer): void {
   server.hot.send({ type: 'full-reload' });
 }
 
+/**
+ * TIM-830: Walk the route tree and collect every page that exports a
+ * `searchParams` definition, then emit a module that statically imports
+ * each export and registers it into the shared search-params registry.
+ *
+ * Keys use the un-interpolated route pattern (e.g. '/products/[id]') so
+ * <Link> can look up the definition from the original `href` prop before
+ * segmentParams are interpolated.
+ */
+function generateSearchParamsRegistryModule(tree: RouteTree): string {
+  const entries: Array<{ urlPath: string; filePath: string }> = [];
+
+  function walk(node: SegmentNode): void {
+    // params.ts is the canonical location for `export const searchParams`;
+    // page.tsx is the legacy fallback (see codegen.ts `collectRoutes`).
+    if (node.page) {
+      if (node.params && fileHasSearchParamsExport(node.params.filePath)) {
+        entries.push({ urlPath: node.urlPath, filePath: node.params.filePath });
+      } else if (fileHasSearchParamsExport(node.page.filePath)) {
+        entries.push({ urlPath: node.urlPath, filePath: node.page.filePath });
+      }
+    }
+    for (const child of node.children) walk(child);
+    for (const slot of Object.values(node.slots)) walk(slot);
+  }
+  walk(tree.root);
+
+  // Deterministic order for stable output / snapshots
+  entries.sort((a, b) => a.urlPath.localeCompare(b.urlPath));
+
+  const lines: string[] = [];
+  lines.push('// Auto-generated search-params registry — do not edit.');
+  lines.push('// Generated by timber-routing plugin (TIM-830).');
+  lines.push('');
+  lines.push("import { registerSearchParams } from '@timber-js/app/search-params';");
+  lines.push('');
+
+  // Static imports — Vite/Rolldown tree-shakes the page component body out
+  // of this chunk, leaving only the `searchParams` named export.
+  entries.forEach((entry, i) => {
+    lines.push(`import { searchParams as r${i} } from ${JSON.stringify(entry.filePath)};`);
+  });
+  lines.push('');
+
+  entries.forEach((entry, i) => {
+    lines.push(`registerSearchParams(${JSON.stringify(entry.urlPath)}, r${i});`);
+  });
+  lines.push('');
+
+  // Exporting an empty object keeps the module a real ESM module even
+  // when there are zero entries (no top-level imports in that case).
+  lines.push('export {};');
+  lines.push('');
+
+  return lines.join('\n');
+}
+
+/**
+ * Lightweight check for a `searchParams` named export. Mirrors
+ * `fileHasExport('searchParams')` in routing/codegen.ts so we stay
+ * in sync with what the type codegen detects.
+ */
+function fileHasSearchParamsExport(filePath: string): boolean {
+  try {
+    if (!existsSync(filePath)) return false;
+    const content = readFileSync(filePath, 'utf-8');
+    return (
+      /export\s+(const|let|var)\s+searchParams\b/.test(content) ||
+      /export\s*\{[^}]*\bsearchParams\b[^}]*\}/.test(content)
+    );
+  } catch {
+    return false;
+  }
+}
+
 /**
  * Generate the virtual module source code for the route manifest.
  *
  * The output is a default-exported object containing the serialized route tree.
  * All file references use absolute paths (required for virtual modules).
  */
-function generateManifestModule(tree: RouteTree): string {
+function generateManifestModule(tree: RouteTree, viteRoot: string): string {
   const imports: string[] = [];
   let importIndex = 0;
 
@@ -301,17 +460,20 @@ function generateManifestModule(tree: RouteTree): string {
         `${nextIndent}denied: { load: ${v}, filePath: ${JSON.stringify(node.denied.filePath)} },`
       );
     }
-    if (node.searchParams) {
-      const v = addImport(node.searchParams);
+    if (node.params) {
+      const v = addImport(node.params);
       parts.push(
-        `${nextIndent}searchParams: { load: ${v}, filePath: ${JSON.stringify(node.searchParams.filePath)} },`
+        `${nextIndent}params: { load: ${v}, filePath: ${JSON.stringify(node.params.filePath)} },`
       );
     }
+    // searchParams is now a named export from page.tsx, not a separate file.
+    // The page module's searchParams export is loaded via the page's lazy import.
+    // Runtime registration happens in the route loader using the page module.
 
     // Status-code files
-    if (node.statusFiles && node.statusFiles.size > 0) {
+    if (node.statusFiles && Object.keys(node.statusFiles).length > 0) {
       const statusEntries: string[] = [];
-      for (const [code, file] of node.statusFiles) {
+      for (const [code, file] of Object.entries(node.statusFiles)) {
         const v = addImport(file);
         statusEntries.push(
           `${nextIndent}    ${JSON.stringify(code)}: { load: ${v}, filePath: ${JSON.stringify(file.filePath)} }`
@@ -321,9 +483,9 @@ function generateManifestModule(tree: RouteTree): string {
     }
 
     // JSON status-code files
-    if (node.jsonStatusFiles && node.jsonStatusFiles.size > 0) {
+    if (node.jsonStatusFiles && Object.keys(node.jsonStatusFiles).length > 0) {
       const jsonEntries: string[] = [];
-      for (const [code, file] of node.jsonStatusFiles) {
+      for (const [code, file] of Object.entries(node.jsonStatusFiles)) {
         const v = addImport(file);
         jsonEntries.push(
           `${nextIndent}    ${JSON.stringify(code)}: { load: ${v}, filePath: ${JSON.stringify(file.filePath)} }`
@@ -333,9 +495,9 @@ function generateManifestModule(tree: RouteTree): string {
     }
 
     // Legacy status files
-    if (node.legacyStatusFiles && node.legacyStatusFiles.size > 0) {
+    if (node.legacyStatusFiles && Object.keys(node.legacyStatusFiles).length > 0) {
       const legacyEntries: string[] = [];
-      for (const [name, file] of node.legacyStatusFiles) {
+      for (const [name, file] of Object.entries(node.legacyStatusFiles)) {
         const v = addImport(file);
         legacyEntries.push(
           `${nextIndent}    ${JSON.stringify(name)}: { load: ${v}, filePath: ${JSON.stringify(file.filePath)} }`
@@ -347,9 +509,9 @@ function generateManifestModule(tree: RouteTree): string {
     }
 
     // Metadata route files (sitemap.ts, robots.ts, icon.tsx, etc.)
-    if (node.metadataRoutes && node.metadataRoutes.size > 0) {
+    if (node.metadataRoutes && Object.keys(node.metadataRoutes).length > 0) {
       const metaEntries: string[] = [];
-      for (const [name, file] of node.metadataRoutes) {
+      for (const [name, file] of Object.entries(node.metadataRoutes)) {
         const v = addImport(file);
         metaEntries.push(
           `${nextIndent}    ${JSON.stringify(name)}: { load: ${v}, filePath: ${JSON.stringify(file.filePath)} }`
@@ -367,9 +529,11 @@ function generateManifestModule(tree: RouteTree): string {
     }
 
     // Parallel slots
-    if (node.slots.size > 0) {
+    const slotKeys = Object.keys(node.slots);
+    if (slotKeys.length > 0) {
       const slotEntries: string[] = [];
-      for (const [slotName, slotNode] of node.slots) {
+      for (const slotName of slotKeys) {
+        const slotNode = node.slots[slotName]!;
         slotEntries.push(
           `${nextIndent}    ${JSON.stringify(slotName)}: ${serializeNode(slotNode, nextIndent + '  ')}`
         );
@@ -391,6 +555,13 @@ function generateManifestModule(tree: RouteTree): string {
     proxyLine = `  proxy: { load: ${v}, filePath: ${JSON.stringify(tree.proxy.filePath)} },`;
   }
 
+  // Global error page (Tier 2)
+  let globalErrorLine = '';
+  if (tree.globalError) {
+    const v = addImport(tree.globalError);
+    globalErrorLine = `  globalError: { load: ${v}, filePath: ${JSON.stringify(tree.globalError.filePath)} },`;
+  }
+
   // Interception rewrites — computed at build time from the route tree.
   // Only interceptedPattern and interceptingPrefix are needed at runtime.
   const rewrites = collectInterceptionRewrites(tree.root);
@@ -406,7 +577,9 @@ function generateManifestModule(tree: RouteTree): string {
     ...imports,
     '',
     'const manifest = {',
+    `  viteRoot: ${JSON.stringify(viteRoot)},`,
     proxyLine,
+    globalErrorLine,
     rewritesLine,
     `  root: ${rootSerialized},`,
     '};',

package/src/plugins/server-bundle.ts

@@ -137,5 +137,36 @@ export function timberServerBundle(): Plugin[] {
     },
   };
 
-  return [bundlePlugin, esmInitFixPlugin];
+  // Fix Rolldown's `createRequire(import.meta.url)` CJS interop shim for
+  // Cloudflare Workers. Rolldown emits this for CJS dependencies (e.g.
+  // @opentelemetry/context-async-hooks) that use `require()`. On Workers,
+  // `import.meta.url` is `undefined` for non-entry modules, causing:
+  //   TypeError: The argument 'path' must be a file URL object, a file URL
+  //   string, or an absolute path string. Received 'undefined'
+  //
+  // The fix: provide a fallback URL when `import.meta.url` is undefined.
+  // The actual URL doesn't matter — `createRequire` only needs it for
+  // resolving relative paths, but the only `__require()` calls are for
+  // Node built-ins (events, async_hooks) which resolve from any base.
+  //
+  // The top-level `ssr: { target: 'webworker' }` was supposed to prevent
+  // this, but it doesn't propagate to custom environments (rsc) in Vite's
+  // Environment API. See LOCAL-405.
+  const createRequireFixPlugin: Plugin = {
+    name: 'timber-create-require-fix',
+    applyToEnvironment(environment) {
+      return environment.name === 'rsc' || environment.name === 'ssr';
+    },
+    renderChunk(code) {
+      const pattern = 'createRequire(import.meta.url)';
+      if (!code.includes(pattern)) return null;
+
+      return {
+        code: code.replace(pattern, 'createRequire(import.meta.url || "file:///app")'),
+        map: null,
+      };
+    },
+  };
+
+  return [bundlePlugin, esmInitFixPlugin, createRequireFixPlugin];
 }