Merge pull request #7943 from QwikDev/v2-fix-shadow-dom-resuming

fix: resuming shadow dom container with multiple root children

Author: Varixo

.changeset/twelve-buckets-brake.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: resuming shadow dom container with multiple root children

eslint.config.mjs

@@ -45,7 +45,6 @@ const ignores = [
   // packages with eslint.config.mjs
   'packages/qwik-labs',
   'packages/insights',
-  'starters',
   // eslint.config.*
   '**/eslint.config.mjs',
   '**/eslint.config.js',

packages/qwik/src/core/client/process-vnode-data.ts

@@ -102,17 +102,17 @@ export function processVNodeData(document: Document) {
   ///////////////////////////////
 
   const enum NodeType {
-    CONTAINER_MASK /* ***************** */ = 0b00000001,
-    ELEMENT /* ************************ */ = 0b00000010, // regular element
-    ELEMENT_CONTAINER /* ************** */ = 0b00000011, // container element need to descend into it
-    ELEMENT_SHADOW_ROOT /* ************ */ = 0b00000110, // shadow root element
-    COMMENT_SKIP_START /* ************* */ = 0b00000101, // Comment but skip the content until COMMENT_SKIP_END
-    COMMENT_SKIP_END /* *************** */ = 0b00001000, // Comment end
-    COMMENT_IGNORE_START /* *********** */ = 0b00010000, // Comment ignore, descend into children and skip the content until COMMENT_ISLAND_START
-    COMMENT_IGNORE_END /* ************* */ = 0b00100000, // Comment ignore end
-    COMMENT_ISLAND_START /* *********** */ = 0b01000001, // Comment island, count elements for parent container until COMMENT_ISLAND_END
-    COMMENT_ISLAND_END /* ************* */ = 0b10000000, // Comment island end
-    OTHER /* ************************** */ = 0b00000000,
+    CONTAINER_MASK /* ***************** */ = 0b0000001,
+    ELEMENT /* ************************ */ = 0b0000010, // regular element
+    ELEMENT_CONTAINER /* ************** */ = 0b0000011, // container element need to descend into it
+    ELEMENT_SHADOW_ROOT_WRAPPER /* **** */ = 0b0000110, // shadow root wrapper element with q:shadowroot attribute
+    COMMENT_SKIP_START /* ************* */ = 0b0001001, // Comment but skip the content until COMMENT_SKIP_END
+    COMMENT_SKIP_END /* *************** */ = 0b0001000, // Comment end
+    COMMENT_IGNORE_START /* *********** */ = 0b0010000, // Comment ignore, descend into children and skip the content until COMMENT_ISLAND_START
+    COMMENT_IGNORE_END /* ************* */ = 0b0100000, // Comment ignore end
+    COMMENT_ISLAND_START /* *********** */ = 0b1000001, // Comment island, count elements for parent container until COMMENT_ISLAND_END
+    COMMENT_ISLAND_END /* ************* */ = 0b1000000, // Comment island end
+    OTHER /* ************************** */ = 0b0000000,
   }
 
   /**
@@ -126,7 +126,7 @@ export function processVNodeData(document: Document) {
       const qContainer = getAttribute.call(node, Q_CONTAINER);
       if (qContainer === null) {
         if (hasAttribute.call(node, Q_SHADOW_ROOT)) {
-          return NodeType.ELEMENT_SHADOW_ROOT;
+          return NodeType.ELEMENT_SHADOW_ROOT_WRAPPER;
         }
         const isQElement = hasAttribute.call(node, Q_PROPS_SEPARATOR);
         return isQElement ? NodeType.ELEMENT : NodeType.OTHER;
@@ -187,12 +187,6 @@ export function processVNodeData(document: Document) {
     return node;
   };
 
-  const firstChild = (node: Node | null) => {
-    // eslint-disable-next-line no-empty
-    while (node && (node = node.firstChild) && getFastNodeType(node) === NodeType.OTHER) {}
-    return node;
-  };
-
   /**
    * Process the container
    *
@@ -289,21 +283,20 @@ export function processVNodeData(document: Document) {
         } while (getFastNodeType(nextNode) !== NodeType.COMMENT_SKIP_END);
         // console.log('EXIT', nextNode?.outerHTML);
         walkContainer(walker, node, node, nextNode, '', null!, prefix + '  ');
-      } else if (nodeType === NodeType.ELEMENT_SHADOW_ROOT) {
+      } else if (nodeType === NodeType.ELEMENT_SHADOW_ROOT_WRAPPER) {
         // If we are in a shadow root, we need to get the shadow root element.
         nextNode = nextSibling(node);
         const shadowRootContainer = node as Element | null;
         const shadowRoot = shadowRootContainer?.shadowRoot;
         if (shadowRoot) {
-          const firstShadowRootChild = firstChild(shadowRoot)!;
           walkContainer(
             // we need to create a new walker for the shadow root
             document.createTreeWalker(
-              firstShadowRootChild,
+              shadowRoot,
               0x1 /* NodeFilter.SHOW_ELEMENT  */ | 0x80 /*  NodeFilter.SHOW_COMMENT */
             ),
             null,
-            firstShadowRootChild,
+            shadowRoot,
             null,
             '',
             null!,

pnpm-lock.yaml

@@ -1,4 +1,3 @@
-/* eslint-disable */
 import { component$, useComputed$, useSignal, useTask$ } from "@qwik.dev/core";
 
 export const ComputedRoot = component$(() => {

starters/apps/e2e/src/components/computed/computed.tsx

@@ -5,6 +5,11 @@ import {
   useSignal,
   useStyles$,
 } from "@qwik.dev/core";
+import {
+  SSRRaw,
+  SSRStream,
+  type SSRStreamWriter,
+} from "@qwik.dev/core/internal";
 
 interface ContainerProps {
   url: string;
@@ -20,6 +25,47 @@ export const Containers = component$(() => {
   );
 });
 
+const SSRStreamRemoteContainer = component$<{
+  url: string;
+  containerId?: string;
+}>(({ url, containerId }) => {
+  const decoder = new TextDecoder();
+  const getSSRStreamFunction =
+    (remoteUrl: string) => async (stream: SSRStreamWriter) => {
+      const _remoteUrl = new URL(
+        `http://localhost:${(globalThis as any).PORT}${remoteUrl}`,
+      );
+      const response = await fetch(_remoteUrl, {
+        headers: {
+          accept: "text/html",
+        },
+      });
+      if (response.ok) {
+        const reader = response.body!.getReader();
+        let fragmentChunk = await reader.read();
+        while (!fragmentChunk.done) {
+          const rawHtml = decoder.decode(fragmentChunk.value);
+          stream.write((<SSRRaw data={rawHtml} />) as string);
+          fragmentChunk = await reader.read();
+        }
+      } else {
+        console.error(
+          "Failed to connect with status:",
+          response.status,
+          response.statusText,
+        );
+      }
+    };
+
+  return (
+    <div id={containerId} q:shadowRoot>
+      <template shadowRootMode="open">
+        <SSRStream>{getSSRStreamFunction(url)}</SSRStream>
+      </template>
+    </div>
+  );
+});
+
 export const Container = component$((props: ContainerProps) => {
   useStyles$(`
     .container {
@@ -72,7 +118,7 @@ export const Container = component$((props: ContainerProps) => {
       </div>
       <div style={{ border: "1px solid red" }}>
         Shadow DOM
-        <div q:shadowRoot>
+        <div id="shadow-dom-resource" q:shadowRoot>
           <template shadowRootMode="open">
             <Resource
               value={resource}
@@ -87,6 +133,10 @@ export const Container = component$((props: ContainerProps) => {
             />
           </template>
         </div>
+        <SSRStreamRemoteContainer
+          url="/e2e/two-listeners?fragment&loader=false"
+          containerId="shadow-dom-stream"
+        />
       </div>
     </div>
   );

starters/apps/e2e/src/components/containers/container.tsx

@@ -16,7 +16,6 @@ export default component$(() => {
     number: 20,
   });
 
-  // eslint-disable-next-line qwik/no-use-visible-task
   useVisibleTask$(({ cleanup }) => {
     const timeout = setTimeout(() => (state.count = 1), 500);
     cleanup(() => clearTimeout(timeout));

starters/apps/playground/src/routes/demo/flower/index.tsx

@@ -8,6 +8,7 @@ export default component$(() => {
       <button
         onClick$={() => {
           showDynamic.value = true;
+          // eslint-disable-next-line no-console
           console.log(
             `
 ************************************************

starters/apps/preloader-test/src/components/generated/show-dynamic.tsx

@@ -215,6 +215,7 @@ export default component$(() => {
       <Counter100 />
       <Link
         href="/hidden"
+        // eslint-disable-next-line no-console
         onQVisible$={() => console.log("visible below fold")}
       >
         Home

starters/apps/preloader-test/src/routes/counters/index.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 import {
   component$,
   useTask$,