@timber-js/app 0.2.0-alpha.201 → 0.2.0-alpha.202

package/dist/server/slot-resolver.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slot-resolver.d.ts","sourceRoot":"","sources":["../../src/server/slot-resolver.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"slot-resolver.d.ts","sourceRoot":"","sources":["../../src/server/slot-resolver.ts"],"names":[],"mappings":"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"}

package/dist/server/slot-subtree-contain.d.ts

@@ -50,5 +50,5 @@ import { type ReactNode } from 'react';
  * the walk must leave alone: a slot layout passes the `children` element it
  * received, so the page beneath it is not wrapped a second time.
  */
-export declare function containSlotSubtree(tree: ReactNode, fallback: ReactNode, opaque?: ReactNode): ReactNode;
+export declare function containSlotSubtree(tree: ReactNode, fallback: ReactNode, opaque?: ReactNode, slotName?: string): ReactNode;
 //# sourceMappingURL=slot-subtree-contain.d.ts.map

package/dist/server/slot-subtree-contain.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slot-subtree-contain.d.ts","sourceRoot":"","sources":["../../src/server/slot-subtree-contain.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AAEH,OAAO,EAAsD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAoM3F;;;;;;;;;;;GAWG;AACH,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,SAAS,EACf,QAAQ,EAAE,SAAS,EACnB,MAAM,CAAC,EAAE,SAAS,GACjB,SAAS,CAEX"}
+{"version":3,"file":"slot-subtree-contain.d.ts","sourceRoot":"","sources":["../../src/server/slot-subtree-contain.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AAEH,OAAO,EAAsD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AA4M3F;;;;;;;;;;;GAWG;AACH,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,SAAS,EACf,QAAQ,EAAE,SAAS,EACnB,MAAM,CAAC,EAAE,SAAS,EAClB,QAAQ,CAAC,EAAE,MAAM,GAChB,SAAS,CAEX"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@timber-js/app",
-  "version": "0.2.0-alpha.201",
+  "version": "0.2.0-alpha.202",
   "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",
@@ -152,7 +152,7 @@
     "@opentelemetry/sdk-trace-base": "^2.11.0",
     "cookie": "^2.0.1",
     "jsonc-parser": "^3.3.1",
-    "magic-string": "^1.3.1",
+    "magic-string": "^1.4.1",
     "nitro": "3.0.260903-beta",
     "oxc-transform-react": "^0.150.0",
     "srvx": "^1.0.5"

package/src/client/browser-dev.ts

@@ -235,8 +235,40 @@ export function hideCompilingOverlay(): void {
  *
  * The server receives 'timber:client-error' events, and echoes them
  * back as Vite '{ type: "error" }' payloads to trigger the overlay.
+ *
+ * Errors that fire before the Vite HMR WebSocket has connected are
+ * buffered and flushed once the connection is established, so
+ * `hot.send()` never throws `SendBeforeConnectError`. See TIM-1509.
  */
-export function setupClientErrorForwarding(hot: Pick<HotInterface, 'send'>): void {
+export function setupClientErrorForwarding(hot: HotInterface): void {
+  // Track WS connection state ourselves because Vite's HMRClient.send()
+  // is fire-and-forget: it catches transport rejections internally via
+  // .catch(err => logger.error(err)), so a pre-connect send doesn't throw
+  // into our code — it just logs a noisy SendBeforeConnectError. Buffering
+  // here prevents that noise entirely.
+  //
+  // The vite:ws:connect listener always fires AFTER registration because
+  // WebSocket.onopen is a macrotask and this code runs synchronously during
+  // module execution (setupHmr → setupClientErrorForwarding in browser-entry).
+  let connected = false;
+  const buffer: Array<{ event: string; data: unknown }> = [];
+
+  function send(event: string, data: unknown): void {
+    if (connected) {
+      hot.send(event, data);
+    } else {
+      buffer.push({ event, data });
+    }
+  }
+
+  hot.on('vite:ws:connect', () => {
+    connected = true;
+    for (const queued of buffer) {
+      hot.send(queued.event, queued.data);
+    }
+    buffer.length = 0;
+  });
+
   window.addEventListener('error', (event: ErrorEvent) => {
     // Skip errors without useful information
     if (!event.error && !event.message) return;
@@ -248,7 +280,7 @@ export function setupClientErrorForwarding(hot: Pick<HotInterface, 'send'>): voi
     if (isFrameworkSignalError(event.error)) return;
 
     const error = event.error;
-    hot.send('timber:client-error', {
+    send('timber:client-error', {
       message: error?.message ?? event.message,
       stack: error?.stack ?? '',
       componentStack: error?.componentStack ?? null,
@@ -266,7 +298,7 @@ export function setupClientErrorForwarding(hot: Pick<HotInterface, 'send'>): voi
     const message = reason instanceof Error ? reason.message : String(reason);
     const stack = reason instanceof Error ? (reason.stack ?? '') : '';
 
-    hot.send('timber:client-error', {
+    send('timber:client-error', {
       message,
       stack,
       componentStack: null,

package/src/server/slot-resolver.ts

@@ -156,7 +156,12 @@ export async function resolveSlotElement(
             const rendered = await scope(() =>
               (SlotPage as (props: Record<string, unknown>) => unknown)(props)
             );
-            return containSlotSubtree(rendered as React.ReactNode, denyFallback);
+            return containSlotSubtree(
+              rendered as React.ReactNode,
+              denyFallback,
+              undefined,
+              slotNode.segmentName
+            );
           } catch (error) {
             // RedirectSignal must propagate — the pipeline handles redirects
             // at the top level. Swallowing it here would silently return
@@ -189,12 +194,20 @@ export async function resolveSlotElement(
         element,
         h,
         scope,
-        denyFallback
+        denyFallback,
+        slotNode.segmentName
       );
 
       // Wrap with slot root's layout — INSIDE the access gate, so the layout
       // server component never executes when access.ts denies. See TIM-1074.
-      element = await wrapWithLayout(slotNode, element, h, scope, denyFallback);
+      element = await wrapWithLayout(
+        slotNode,
+        element,
+        h,
+        scope,
+        denyFallback,
+        slotNode.segmentName
+      );
 
       // Wrap in SlotAccessGate if slot root has access.ts. The gate is
       // OUTSIDE the layout, matching the segment model in
@@ -290,7 +303,8 @@ async function wrapWithIntermediateSegments(
   element: React.ReactElement,
   h: CreateElementFn,
   scope?: SlotParamScope,
-  denyFallback?: React.ReactNode
+  denyFallback?: React.ReactNode,
+  slotName?: string
 ): Promise<React.ReactElement> {
   for (let i = chain.length - 1; i > 0; i--) {
     const seg = chain[i];
@@ -300,7 +314,7 @@ async function wrapWithIntermediateSegments(
       errorBoundaryComponent: TimberErrorBoundary,
       isSlotBoundary: true,
     });
-    element = await wrapWithLayout(seg, element, h, scope, denyFallback);
+    element = await wrapWithLayout(seg, element, h, scope, denyFallback, slotName);
     element = await wrapWithAccessGate(seg, element, h, scope);
   }
   return element;
@@ -341,10 +355,16 @@ function ScopedSlotLayout(props: {
   layout: (props: Record<string, unknown>) => unknown;
   scope: SlotParamScope;
   denyFallback: React.ReactNode;
+  slotName: string | undefined;
   children: React.ReactElement;
 }): unknown {
   const rendered = props.scope(() => props.layout({ children: props.children }));
-  return containSlotSubtree(rendered as React.ReactNode, props.denyFallback, props.children);
+  return containSlotSubtree(
+    rendered as React.ReactNode,
+    props.denyFallback,
+    props.children,
+    props.slotName
+  );
 }
 
 /**
@@ -362,7 +382,8 @@ async function wrapWithLayout(
   element: React.ReactElement,
   h: CreateElementFn,
   scope?: SlotParamScope,
-  denyFallback: React.ReactNode = null
+  denyFallback: React.ReactNode = null,
+  slotName?: string
 ): Promise<React.ReactElement> {
   if (!node.layout) return element;
   const Layout = await loadComponent(node.layout);
@@ -373,6 +394,7 @@ async function wrapWithLayout(
     layout: Layout as (props: Record<string, unknown>) => unknown,
     scope,
     denyFallback,
+    slotName,
     children: element,
   });
 }

package/src/server/slot-subtree-contain.ts

@@ -65,6 +65,10 @@ interface Containment {
    * so the level below is not wrapped (and re-walked) a second time.
    */
   opaque: unknown;
+  /** Slot name (e.g. `@artists`) used as a key prefix for wrapped elements. */
+  slotName?: string;
+  /** Monotonic counter for disambiguating same-name sibling components. */
+  wrapCount: number;
 }
 
 function isThenable(value: unknown): value is Thenable<unknown> {
@@ -156,7 +160,7 @@ function ContainedSlotComponent(props: {
   fallback: ReactNode;
 }): ReactNode | Promise<ReactNode> {
   const { component: Component, componentProps, fallback } = props;
-  const containment: Containment = { fallback, opaque: undefined };
+  const containment: Containment = { fallback, opaque: undefined, wrapCount: 0 };
   let result: unknown;
   try {
     result = Component(componentProps);
@@ -204,12 +208,16 @@ function walk(node: unknown, c: Containment, seen: WeakSet<object>): unknown {
     const { type, key, props } = node;
     const component = type === ContainedSlotComponent ? undefined : serverComponentOf(type);
     if (component) {
+      const effectiveKey = key ?? (c.slotName ? `${c.slotName}:${c.wrapCount++}` : null);
       const wrapped = {
         component,
         componentProps: props as Record<string, unknown>,
         fallback: c.fallback,
       };
-      return createElement(ContainedSlotComponent, key === null ? wrapped : { ...wrapped, key });
+      return createElement(
+        ContainedSlotComponent,
+        effectiveKey === null ? wrapped : { ...wrapped, key: effectiveKey }
+      );
     }
     // Host elements, fragments, Suspense, client references, providers, and
     // wrappers this walk already made: keep the type, contain whatever server
@@ -249,7 +257,8 @@ function walk(node: unknown, c: Containment, seen: WeakSet<object>): unknown {
 export function containSlotSubtree(
   tree: ReactNode,
   fallback: ReactNode,
-  opaque?: ReactNode
+  opaque?: ReactNode,
+  slotName?: string
 ): ReactNode {
-  return walk(tree, { fallback, opaque }, new WeakSet()) as ReactNode;
+  return walk(tree, { fallback, opaque, slotName, wrapCount: 0 }, new WeakSet()) as ReactNode;
 }