@timber-js/app 0.2.0-alpha.144 → 0.2.0-alpha.146

package/src/dev-tools/dev-page-shell.ts

@@ -0,0 +1,256 @@
+/**
+ * Shared scaffold for dev-mode HTML pages (dev error page, dev 404 page).
+ *
+ * Both pages are self-contained HTML documents served when the normal
+ * render pipeline can't produce a page. They share:
+ * - The document scaffold (head, container, footer)
+ * - Base CSS (layout, light/dark variables, common components)
+ * - The HMR auto-reload script that watches Vite's WebSocket and reloads
+ *   when the developer fixes the error / adds the missing route
+ *
+ * Dev-only: this module is only imported by dev-mode code paths. It is
+ * never included in production builds.
+ *
+ * Design doc: 21-dev-server.md §"Error Overlay", §"Dev 404 Page"
+ */
+
+import { escapeHtml } from '../server/utils/escape-html.js';
+
+// ─── HMR Options ────────────────────────────────────────────────────────────
+
+/**
+ * HMR connection options for the dev page auto-reload WebSocket.
+ * Derived from Vite's resolved server config so the page can connect
+ * to the correct HMR endpoint (TIM-789).
+ */
+export interface DevErrorHmrOptions {
+  protocol?: string;
+  host?: string;
+  port?: number;
+  path?: string;
+  token?: string;
+}
+
+/**
+ * Extract HMR connection options from a Vite resolved config.
+ * Used by the dev server to pass HMR config to the dev page generators
+ * so the auto-reload WebSocket connects to the correct endpoint.
+ */
+export function extractHmrOptions(config: {
+  server?: { hmr?: { protocol?: string; host?: string; port?: number; path?: string } | boolean };
+  webSocketToken?: string;
+}): DevErrorHmrOptions | undefined {
+  const hmr = config.server?.hmr;
+  if (hmr === false) return undefined;
+  const hmrOpts = typeof hmr === 'object' ? hmr : {};
+  const opts: DevErrorHmrOptions = {
+    protocol: hmrOpts.protocol,
+    host: hmrOpts.host,
+    port: hmrOpts.port,
+    path: hmrOpts.path,
+    token: config.webSocketToken,
+  };
+  // If no HMR fields were explicitly configured, return undefined so the
+  // reload script derives everything from the browser's location, which
+  // correctly includes the current port (TIM-805).
+  if (!opts.protocol && !opts.host && !opts.port && !opts.path && !opts.token) {
+    return undefined;
+  }
+  return opts;
+}
+
+// ─── Auto-Reload Script ─────────────────────────────────────────────────────
+
+/**
+ * Build the inline auto-reload script for dev pages.
+ *
+ * The page is static HTML, not a Vite-managed module, so the normal HMR
+ * update flow can't reach it. Instead we connect to Vite's HMR WebSocket
+ * directly and reload on any update event.
+ *
+ * URL construction mirrors Vite's own client.mjs: explicitly configured
+ * values win, and the browser's location fills any gaps at runtime. This
+ * matters because Vite 8 requires a `?token=` on browser WS upgrades in
+ * every config — a config with only a token still needs the host and port
+ * from `location` (TIM-1067).
+ */
+export function buildReloadScript(hmrOptions?: DevErrorHmrOptions): string {
+  // `<` is escaped as a unicode escape so config text can never close the
+  // <script> block (same defense as escJsonForScript in error-page.ts, TIM-788).
+  const opts = JSON.stringify(hmrOptions ?? {}).replace(/</g, '\\u003c');
+  return `    (function() {
+      try {
+        var o = ${opts};
+        var protocol = o.protocol || (location.protocol === 'https:' ? 'wss' : 'ws');
+        var host = o.host || location.hostname;
+        var port = o.port || location.port;
+        var url = protocol + '://' + host + (port ? ':' + port : '') + (o.path || '')
+          + (o.token ? '?token=' + encodeURIComponent(o.token) : '');
+        var ws = new WebSocket(url, 'vite-hmr');
+        ws.addEventListener('message', function(e) {
+          try {
+            var data = JSON.parse(e.data);
+            if (data.type === 'full-reload' || data.type === 'update') {
+              location.reload();
+            }
+          } catch (ex) {}
+        });
+      } catch (ex) {}
+    })();`;
+}
+
+// ─── Page Shell ─────────────────────────────────────────────────────────────
+
+export interface DevPageShellOptions {
+  /** Page title — escaped by the shell. */
+  title: string;
+  /** Page-specific CSS appended after the shared base (badge colors, etc.). */
+  extraCss?: string;
+  /** Inner HTML of the container — must already be escaped by the caller. */
+  bodyHtml: string;
+  /** Hint text shown next to the timber logo in the footer. */
+  footerHint: string;
+  /** Additional inline script placed before the auto-reload script. */
+  extraScript?: string;
+  /** HMR connection options for the auto-reload WebSocket. */
+  hmrOptions?: DevErrorHmrOptions;
+}
+
+/**
+ * Render a self-contained dev page: scaffold + shared CSS + footer +
+ * HMR auto-reload script.
+ */
+export function renderDevPageShell(opts: DevPageShellOptions): string {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>${escapeHtml(opts.title)}</title>
+  <style>${SHARED_CSS}${opts.extraCss ?? ''}</style>
+</head>
+<body>
+  <div class="container">
+    ${opts.bodyHtml}
+
+    <footer class="footer">
+      <span class="timber-logo">🪵 timber.js</span>
+      <span class="footer-hint">${opts.footerHint}</span>
+    </footer>
+  </div>
+
+  <script>
+${opts.extraScript ?? ''}
+    // Auto-reload when Vite HMR signals an update (file fixed, route added).
+${buildReloadScript(opts.hmrOptions)}
+  </script>
+</body>
+</html>`;
+}
+
+// ─── Shared CSS ─────────────────────────────────────────────────────────────
+
+/**
+ * Base CSS shared by all dev pages. Pages override the --badge-* variables
+ * (and add their own component styles) via `extraCss`.
+ */
+const SHARED_CSS = `
+  :root {
+    --bg: #fff;
+    --fg: #1a1a1a;
+    --fg-dim: #6b7280;
+    --border: #e5e7eb;
+    --source-bg: #fafafa;
+    --link: #2563eb;
+    --code-bg: #f3f4f6;
+    --btn-bg: #f3f4f6;
+    --btn-fg: #374151;
+    --btn-border: #d1d5db;
+    --code-font: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --bg: #0a0a0a;
+      --fg: #f5f5f5;
+      --fg-dim: #9ca3af;
+      --border: #27272a;
+      --source-bg: #18181b;
+      --link: #60a5fa;
+      --code-bg: #27272a;
+      --btn-bg: #27272a;
+      --btn-fg: #e5e7eb;
+      --btn-border: #3f3f46;
+    }
+  }
+
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+
+  body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    background: var(--bg);
+    color: var(--fg);
+    line-height: 1.6;
+    padding: 2rem;
+  }
+
+  .container { max-width: 56rem; margin: 0 auto; }
+  .header { margin-bottom: 1.5rem; }
+
+  .badge {
+    display: inline-block;
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    padding: 0.25rem 0.625rem;
+    border-radius: 0.375rem;
+    background: var(--badge-bg);
+    color: var(--badge-fg);
+    border: 1px solid var(--badge-border);
+    margin-bottom: 0.75rem;
+  }
+
+  .message {
+    font-size: 1.375rem;
+    font-weight: 600;
+    line-height: 1.3;
+    word-break: break-word;
+  }
+
+  .hint {
+    margin-top: 0.5rem;
+    color: var(--fg-dim);
+    font-size: 0.875rem;
+  }
+
+  .section {
+    margin-bottom: 1rem;
+    border: 1px solid var(--border);
+    border-radius: 0.5rem;
+    overflow: hidden;
+  }
+
+  .section-header {
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    padding: 0.5rem 0.75rem;
+    background: var(--source-bg);
+    border-bottom: 1px solid var(--border);
+    color: var(--fg-dim);
+  }
+
+  .footer {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--border);
+    font-size: 0.75rem;
+    color: var(--fg-dim);
+  }
+
+  .timber-logo { font-weight: 600; white-space: nowrap; }
+`;

package/src/dev-tools/error-page.ts

@@ -8,15 +8,18 @@
  * This is NOT a replacement for Vite's error overlay — it's the fallback
  * for when the overlay's transport (WebSocket) isn't available yet.
  *
- * Dev-only: this module is only imported by dev-server.ts (apply: 'serve').
- * It is never included in production builds.
+ * Dev-only: this module is only imported by dev-server.ts (apply: 'serve')
+ * and via dynamic import from fallback-error.ts in dev mode. It is never
+ * included in production builds.
  *
  * Design doc: 21-dev-server.md §"Error Overlay"
  */
 
+import { readFileSync } from 'node:fs';
 import { extractComponentStack, parseFirstAppFrame, type ErrorPhase } from './overlay.js';
 import { classifyStack } from './stack-classifier.js';
 import { escapeHtml } from '../server/utils/escape-html.js';
+import { renderDevPageShell, type DevErrorHmrOptions } from './dev-page-shell.js';
 
 // ─── Phase Labels ───────────────────────────────────────────────────────────
 
@@ -46,6 +49,10 @@ const PHASE_HINTS: Record<ErrorPhase, string> = {
 /**
  * Try to read a few lines of source code around the error location.
  * Returns null if the file can't be read (e.g., virtual modules).
+ *
+ * Uses a top-level `node:fs` import — this module is dev-server-only and
+ * Node-only. A bare `require()` here would throw in the ESM build and the
+ * code frame would silently never render (TIM-1067, B48).
  */
 function readSourceContext(
   filePath: string,
@@ -53,8 +60,6 @@ function readSourceContext(
   contextLines = 3
 ): { lines: Array<{ num: number; text: string; highlight: boolean }>; startLine: number } | null {
   try {
-    // eslint-disable-next-line no-var-requires -- sync require needed at render time
-    const { readFileSync } = require('node:fs');
     const content = readFileSync(filePath, 'utf-8');
     const allLines = content.split('\n');
 
@@ -83,8 +88,9 @@ const esc = escapeHtml;
  *
  * `JSON.stringify` does not escape `</script>`, so error text containing
  * that sequence breaks out of the script block — an XSS vector.
- * We replace all `<` with `\u003c` which is valid in JSON strings and
- * prevents the HTML parser from seeing a closing `</script>` tag.
+ * We replace all `<` with the equivalent unicode escape, which is valid in
+ * JSON strings and prevents the HTML parser from seeing a closing
+ * `</script>` tag.
  *
  * Security: TIM-788
  */
@@ -92,62 +98,6 @@ function escJsonForScript(json: string): string {
   return json.replace(/</g, '\\u003c');
 }
 
-// ─── HMR Options ────────────────────────────────────────────────────────────
-
-/**
- * HMR connection options for the dev error page auto-reload WebSocket.
- * Derived from Vite's resolved server config so the error page can
- * connect to the correct HMR endpoint (TIM-789).
- */
-export interface DevErrorHmrOptions {
-  protocol?: string;
-  host?: string;
-  port?: number;
-  path?: string;
-  token?: string;
-}
-
-/**
- * Build a WebSocket URL from Vite HMR options.
- * Mirrors the logic in Vite's client.mjs for constructing the WS connection URL.
- */
-function buildWsUrl(opts: DevErrorHmrOptions): string {
-  const protocol = opts.protocol ?? 'ws';
-  const host = opts.host ?? 'localhost';
-  const port = opts.port ? `:${opts.port}` : '';
-  const path = opts.path ?? '';
-  const token = opts.token ? `?token=${opts.token}` : '';
-  return `${protocol}://${host}${port}${path}${token}`;
-}
-
-/**
- * Extract HMR connection options from a Vite resolved config.
- * Used by the dev server to pass HMR config to the error page generator
- * so the auto-reload WebSocket connects to the correct endpoint.
- */
-export function extractHmrOptions(config: {
-  server?: { hmr?: { protocol?: string; host?: string; port?: number; path?: string } | boolean };
-  webSocketToken?: string;
-}): DevErrorHmrOptions | undefined {
-  const hmr = config.server?.hmr;
-  if (hmr === false) return undefined;
-  const hmrOpts = typeof hmr === 'object' ? hmr : {};
-  const opts: DevErrorHmrOptions = {
-    protocol: hmrOpts.protocol,
-    host: hmrOpts.host,
-    port: hmrOpts.port,
-    path: hmrOpts.path,
-    token: config.webSocketToken,
-  };
-  // If no HMR fields were explicitly configured, return undefined so the
-  // error page falls back to `'ws://' + location.host` which correctly
-  // includes the browser's current port (TIM-805).
-  if (!opts.protocol && !opts.host && !opts.port && !opts.path && !opts.token) {
-    return undefined;
-  }
-  return opts;
-}
-
 // ─── HTML Generation ────────────────────────────────────────────────────────
 
 /**
@@ -188,17 +138,7 @@ export function generateDevErrorPage(
     ? loc.file.slice(projectRoot.length + 1)
     : loc?.file;
 
-  return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Error — ${esc(phaseLabel)} | timber.js</title>
-  <style>${CSS}</style>
-</head>
-<body>
-  <div class="container">
-    <header class="header">
+  const bodyHtml = `<header class="header">
       <div class="badge">${esc(phaseLabel)} Error</div>
       <h1 class="message">${esc(message)}</h1>
       ${phaseHint ? `<p class="hint">${esc(phaseHint)}</p>` : ''}
@@ -209,7 +149,7 @@ export function generateDevErrorPage(
     ${
       sourceContext
         ? `<div class="source-context">
-        <div class="source-header">Source</div>
+        <div class="section-header">Source</div>
         <pre class="source-code"><code>${sourceContext.lines
           .map(
             (l) =>
@@ -253,16 +193,9 @@ export function generateDevErrorPage(
 
     <div class="actions">
       <button class="btn" onclick="copyError()">Copy Error</button>
-    </div>
+    </div>`;
 
-    <footer class="footer">
-      <span class="timber-logo">🪵 timber.js</span>
-      <span class="footer-hint">Fix the error and save — the page will reload automatically via HMR.</span>
-    </footer>
-  </div>
-
-  <script>
-    function copyError() {
+  const copyScript = `    function copyError() {
       var text = ${escJsonForScript(
         JSON.stringify(
           `${phaseLabel} Error: ${message}\n\n` +
@@ -276,117 +209,41 @@ export function generateDevErrorPage(
         if (btn) { btn.textContent = 'Copied!'; setTimeout(function() { btn.textContent = 'Copy Error'; }, 1500); }
       });
     }
+`;
 
-    // Auto-reload when Vite HMR reconnects.
-    // When the developer fixes the error and saves, Vite's module graph
-    // invalidates. We can't rely on the normal HMR update flow (the page
-    // is a static error page, not a Vite-managed module), so we connect
-    // to Vite's WebSocket and reload on any update event.
-    (function() {
-      try {
-        var wsUrl = ${hmrOptions ? escJsonForScript(JSON.stringify(buildWsUrl(hmrOptions))) : "'ws://' + location.host"};
-        var ws = new WebSocket(wsUrl, 'vite-hmr');
-        ws.addEventListener('message', function(e) {
-          try {
-            var data = JSON.parse(e.data);
-            if (data.type === 'full-reload' || data.type === 'update' || data.type === 'connected') {
-              if (data.type !== 'connected') location.reload();
-            }
-          } catch(ex) {}
-        });
-      } catch(ex) {}
-    })();
-  </script>
-</body>
-</html>`;
+  return renderDevPageShell({
+    title: `Error — ${phaseLabel} | timber.js`,
+    extraCss: ERROR_CSS,
+    bodyHtml,
+    footerHint: 'Fix the error and save — the page will reload automatically via HMR.',
+    extraScript: copyScript,
+    hmrOptions,
+  });
 }
 
-// ─── CSS ────────────────────────────────────────────────────────────────────
+// ─── Page-Specific CSS ──────────────────────────────────────────────────────
 
-const CSS = `
+const ERROR_CSS = `
   :root {
-    --bg: #fff;
-    --fg: #1a1a1a;
-    --fg-dim: #6b7280;
-    --border: #e5e7eb;
     --badge-bg: #fef2f2;
     --badge-fg: #991b1b;
     --badge-border: #fecaca;
-    --source-bg: #fafafa;
     --highlight-bg: #fef2f2;
     --highlight-border: #ef4444;
     --line-num: #9ca3af;
-    --btn-bg: #f3f4f6;
-    --btn-fg: #374151;
-    --btn-border: #d1d5db;
-    --link: #2563eb;
-    --code-font: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
   }
 
   @media (prefers-color-scheme: dark) {
     :root {
-      --bg: #0a0a0a;
-      --fg: #f5f5f5;
-      --fg-dim: #9ca3af;
-      --border: #27272a;
       --badge-bg: #450a0a;
       --badge-fg: #fca5a5;
       --badge-border: #7f1d1d;
-      --source-bg: #18181b;
       --highlight-bg: #450a0a;
       --highlight-border: #dc2626;
       --line-num: #6b7280;
-      --btn-bg: #27272a;
-      --btn-fg: #e5e7eb;
-      --btn-border: #3f3f46;
-      --link: #60a5fa;
     }
   }
 
-  * { margin: 0; padding: 0; box-sizing: border-box; }
-
-  body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-    background: var(--bg);
-    color: var(--fg);
-    line-height: 1.6;
-    padding: 2rem;
-  }
-
-  .container {
-    max-width: 56rem;
-    margin: 0 auto;
-  }
-
-  .header { margin-bottom: 1.5rem; }
-
-  .badge {
-    display: inline-block;
-    font-size: 0.75rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    padding: 0.25rem 0.625rem;
-    border-radius: 0.375rem;
-    background: var(--badge-bg);
-    color: var(--badge-fg);
-    border: 1px solid var(--badge-border);
-    margin-bottom: 0.75rem;
-  }
-
-  .message {
-    font-size: 1.375rem;
-    font-weight: 600;
-    line-height: 1.3;
-    word-break: break-word;
-  }
-
-  .hint {
-    margin-top: 0.5rem;
-    color: var(--fg-dim);
-    font-size: 0.875rem;
-  }
-
   .location {
     font-family: var(--code-font);
     font-size: 0.8125rem;
@@ -405,17 +262,6 @@ const CSS = `
     overflow: hidden;
   }
 
-  .source-header, .section-header {
-    font-size: 0.75rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    padding: 0.5rem 0.75rem;
-    background: var(--source-bg);
-    border-bottom: 1px solid var(--border);
-    color: var(--fg-dim);
-  }
-
   .source-code {
     overflow-x: auto;
     font-family: var(--code-font);
@@ -449,13 +295,6 @@ const CSS = `
     user-select: none;
   }
 
-  .section {
-    margin-bottom: 1rem;
-    border: 1px solid var(--border);
-    border-radius: 0.5rem;
-    overflow: hidden;
-  }
-
   .clickable { cursor: pointer; }
   .clickable:hover { background: var(--btn-bg); }
 
@@ -489,19 +328,4 @@ const CSS = `
   }
 
   .btn:hover { opacity: 0.85; }
-
-  .footer {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    padding-top: 1rem;
-    border-top: 1px solid var(--border);
-    font-size: 0.75rem;
-    color: var(--fg-dim);
-  }
-
-  .timber-logo {
-    font-weight: 600;
-    white-space: nowrap;
-  }
 `;

package/src/dev-tools/index.ts

@@ -42,7 +42,13 @@ export {
 } from './overlay.js';
 
 // HTML error pages
-export { generateDevErrorPage, extractHmrOptions, type DevErrorHmrOptions } from './error-page.js';
+export { generateDevErrorPage } from './error-page.js';
+export {
+  extractHmrOptions,
+  renderDevPageShell,
+  buildReloadScript,
+  type DevErrorHmrOptions,
+} from './dev-page-shell.js';
 export { generateDev404Page, collectRoutes, findSimilarRoutes } from './404-page.js';
 
 // Terminal error formatting

package/src/dev-tools/instrumentation.ts

@@ -28,13 +28,29 @@ import {
 
 export type DevFetchCleanup = () => void;
 
+/**
+ * Well-known key holding the active fetch patch's cleanup function.
+ *
+ * The RSC entry module re-evaluates on every HMR invalidation and calls
+ * instrumentDevFetch() again. Without this guard each call would wrap the
+ * previous wrapper — N nested wrappers emitting N duplicate timber.fetch
+ * spans per request. Symbol.for() survives module re-evaluation (same
+ * pattern as __timber_dev_browser_log_script). See TIM-1067, B49.
+ */
+const FETCH_PATCH_KEY = Symbol.for('timber.dev.fetch-instrumentation-cleanup');
+
 /**
  * Patch globalThis.fetch to wrap every call in an OTEL span.
  *
  * Returns a cleanup function that restores the original fetch.
- * Only call this in dev mode.
+ * Idempotent: a repeated call restores the previous patch before
+ * re-patching, so wrappers never stack. Only call this in dev mode.
  */
 export function instrumentDevFetch(): DevFetchCleanup {
+  const globals = globalThis as Record<symbol, unknown>;
+  const priorCleanup = globals[FETCH_PATCH_KEY] as DevFetchCleanup | undefined;
+  priorCleanup?.();
+
   const originalFetch = globalThis.fetch;
   const tracer = api.trace.getTracer('timber.js');
 
@@ -78,9 +94,14 @@ export function instrumentDevFetch(): DevFetchCleanup {
     );
   };
 
-  return () => {
+  const cleanup: DevFetchCleanup = () => {
     globalThis.fetch = originalFetch;
+    if (globals[FETCH_PATCH_KEY] === cleanup) {
+      delete globals[FETCH_PATCH_KEY];
+    }
   };
+  globals[FETCH_PATCH_KEY] = cleanup;
+  return cleanup;
 }
 
 /**
@@ -122,6 +143,16 @@ function extractFetchInfo(
  * systems that can drift.
  */
 export class DevSpanProcessor implements SpanProcessor {
+  /**
+   * Max traces retained while waiting for their root span. Traces are only
+   * deleted when an `http.server.request` root ends — orphan fetches (no
+   * active request) and spans ending after their root would otherwise
+   * accumulate for the dev-server lifetime. Beyond the cap, the
+   * oldest-inserted trace is evicted (Map preserves insertion order).
+   * See TIM-1067, B49.
+   */
+  private static readonly MAX_PENDING_TRACES = 512;
+
   private spansByTrace = new Map<string, ReadableSpan[]>();
   private mode: DevLogMode;
   private config: DevLoggerConfig;
@@ -140,6 +171,12 @@ export class DevSpanProcessor implements SpanProcessor {
 
     let spans = this.spansByTrace.get(traceId);
     if (!spans) {
+      if (this.spansByTrace.size >= DevSpanProcessor.MAX_PENDING_TRACES) {
+        const oldest = this.spansByTrace.keys().next().value;
+        if (oldest !== undefined) {
+          this.spansByTrace.delete(oldest);
+        }
+      }
       spans = [];
       this.spansByTrace.set(traceId, spans);
     }

package/src/index.ts

@@ -385,6 +385,7 @@ export function timber(config?: TimberUserConfig): PluginOption[] {
         '@timber-js/app/cache',
         '@timber-js/app/search-params',
         '@timber-js/app/segment-params',
+        '@timber-js/app/params',
         '@timber-js/app/codec',
       ];