fix: render nested Each components on the server

.changeset/calm-loops-render.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: render nested Each components on the server

packages/docs/src/repl/bundler/repl-bundler-worker.ts

@@ -186,7 +186,7 @@ async function performBundle(message: BundleMessage): Promise<ReplResult> {
         debug,
         srcInputs,
         entryStrategy,
-        experimental: ['suspense'],
+        experimental: ['each', 'show', 'suspense'],
         manifestOutput: (m: any) => {
           result.manifest = m;
         },
@@ -233,7 +233,7 @@ async function performBundle(message: BundleMessage): Promise<ReplResult> {
         debug,
         srcInputs,
         entryStrategy,
-        experimental: ['suspense'],
+        experimental: ['each', 'show', 'suspense'],
       }),
       replResolver(deps, { srcInputs, buildMode, replId }, 'ssr'),
       replMinify(buildMode),

packages/qwik/src/core/control-flow/each.ts

@@ -33,10 +33,10 @@ export const eachCmpTask = async ({ track }: TaskCtx) => {
   const context = tryGetInvokeContext()!;
   const host = context.$hostElement$!;
   const container = context.$container$!;
-  markVNodeDirty(container, host, ChoreBits.RECONCILE);
+  const renderPromise = markVNodeDirty(container, host, ChoreBits.RECONCILE);
   const isSsr = qTest ? isServerPlatform() : isServer;
   if (isSsr) {
-    await container.$renderPromise$;
+    await renderPromise;
   }
 };
 

packages/qwik/src/core/shared/vnode/vnode-dirty.ts

@@ -9,6 +9,7 @@ import { isServerPlatform } from '../platform/platform';
 import type { Container } from '../types';
 import { throwErrorAndStop } from '../utils/log';
 import { isPromise } from '../utils/promises';
+import type { ValueOrPromise } from '../utils/types';
 import {
   getNearestCursorBoundary,
   getOwnCursorBoundary,
@@ -136,7 +137,7 @@ export function markVNodeDirty(
   vNode: VNode | ISsrNode,
   bits: ChoreBits,
   cursorRoot: VNode | null = null
-): void {
+): ValueOrPromise<void> {
   const prevDirty = vNode.dirty;
   vNode.dirty |= bits;
   if (isSsrNodeGuard(vNode)) {
@@ -146,7 +147,7 @@ export function markVNodeDirty(
         ? container.$renderPromise$.then(() => result)
         : result;
     }
-    return;
+    return result;
   }
   const isRealDirty = bits & ChoreBits.DIRTY_MASK;
   // If already dirty, no need to propagate again

packages/qwik/src/core/tests/each.spec.tsx

@@ -43,6 +43,39 @@ describe.each([
     );
   });
 
+  it('should render nested each items', async () => {
+    const Cmp = component$(() => {
+      return (
+        <div id="loop">
+          <Each
+            items={[
+              ['a', 'b'],
+              ['c', 'd'],
+            ]}
+            key$={(_, index) => String(index)}
+            item$={(items) => (
+              <Each
+                items={items}
+                key$={(_, index) => String(index)}
+                item$={(item) => <span>{item}</span>}
+              />
+            )}
+          />
+        </div>
+      );
+    });
+
+    const { document } = await render(<Cmp />, { debug });
+    await expect(document.getElementById('loop')).toMatchDOM(
+      <div id="loop">
+        <span>a</span>
+        <span>b</span>
+        <span>c</span>
+        <span>d</span>
+      </div>
+    );
+  });
+
   it('should render long each item', async () => {
     const Cmp = component$(() => {
       return (