feat: use enqueue function

Author: thejackshelton

packages/qwik/src/core/ssr/ssr-render-jsx.ts

@@ -5,7 +5,13 @@ import { Fragment, directGetPropsProxyProp } from '../shared/jsx/jsx-runtime';
 import { Slot } from '../shared/jsx/slot.public';
 import type { JSXNodeInternal, JSXOutput } from '../shared/jsx/types/jsx-node';
 import type { JSXChildren } from '../shared/jsx/types/jsx-qwik-attributes';
-import { SSRComment, SSRRaw, SSRStream, type SSRStreamChildren } from '../shared/jsx/utils.public';
+import {
+  SSRBackpatch,
+  SSRComment,
+  SSRRaw,
+  SSRStream,
+  type SSRStreamChildren,
+} from '../shared/jsx/utils.public';
 import { createQRL, type QRLInternal } from '../shared/qrl/qrl-class';
 import type { QRL } from '../shared/qrl/qrl.public';
 import { qrlToString, type SerializationContext } from '../shared/shared-serialization';
@@ -245,13 +251,7 @@ function processJSXNode(
             ssr.closeFragment();
           }
         } else if (type === SSRComment) {
-          const commentData = directGetPropsProxyProp(jsx, 'data') || '';
-          const commentContent = String(commentData);
-          if (commentContent.startsWith('qwik:backpatch')) {
-            ssr.commentNode(handleBackpatchComment(ssr, commentContent));
-          } else {
-            ssr.commentNode(commentContent);
-          }
+          ssr.commentNode(directGetPropsProxyProp(jsx, 'data') || '');
         } else if (type === SSRStream) {
           ssr.commentNode(FLUSH_COMMENT);
           const generator = jsx.children as SSRStreamChildren;
@@ -274,6 +274,18 @@ function processJSXNode(
           isPromise(value) && enqueue(Promise);
         } else if (type === SSRRaw) {
           ssr.htmlNode(directGetPropsProxyProp(jsx, 'data'));
+        } else if (type === SSRBackpatch) {
+          const backpatchScopeId = getNextUniqueIndex(ssr);
+          ssr.enterBackpatchScope?.(backpatchScopeId);
+
+          enqueue(() => {
+            if (ssr.currentBackpatchScope === backpatchScopeId) {
+              ssr.exitBackpatchScope?.(backpatchScopeId);
+            }
+          });
+
+          const children = jsx.children as JSXOutput;
+          children != null && enqueue(children);
         } else if (isQwikComponent(type)) {
           // prod: use new instance of an array for props, we always modify props for a component
           ssr.openComponent(isDev ? [DEBUG_TYPE, VirtualType.Component] : []);
@@ -554,18 +566,3 @@ function appendClassIfScopedStyleExists(jsx: JSXNodeInternal, styleScoped: strin
     jsx.constProps['class'] = '';
   }
 }
-
-function handleBackpatchComment(ssr: SSRContainer, commentContent: string): string {
-  if (commentContent === 'qwik:backpatch:start') {
-    const backpatchScopeId = getNextUniqueIndex(ssr);
-    ssr.enterBackpatchScope?.(backpatchScopeId);
-    return `${commentContent}:${backpatchScopeId}`;
-  } else if (commentContent === 'qwik:backpatch:end') {
-    const currentBackpatchScope = ssr.currentBackpatchScope;
-    if (currentBackpatchScope) {
-      ssr.exitBackpatchScope?.(currentBackpatchScope);
-    }
-    return commentContent;
-  }
-  return commentContent;
-}

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

@@ -14,7 +14,7 @@ import { SSRBackpatch } from '../shared/jsx/utils.public';
 const debug = false;
 
 describe('SSR Backpatching (attributes only, wrapper-scoped)', () => {
-  it('emits marker and JSON blob inside wrapper when signal-derived attribute changes', async () => {
+  it('emits marker and JSON blob when signal-derived attribute changes', async () => {
     const Ctx = createContextId<{ descId: Signal<string> }>('bp-ctx-1');
 
     const Child = component$(() => {
@@ -39,7 +39,8 @@ describe('SSR Backpatching (attributes only, wrapper-scoped)', () => {
     const { document } = await ssrRenderToDom(<Root />, { debug });
     const html = document.documentElement.outerHTML;
 
-    expect(html).toMatch(/<input[^>]*\sq:reactive-id="/);
+    // Should have reactive-id marker and patch data
+    expect(html).toMatch(/q:reactive-id="/);
     expect(html).toMatch(/data-qwik-backpatch="/);
     expect(html).toContain('"type":"attribute"');
     expect(html).toContain('"name":"aria-describedby"');
@@ -71,8 +72,7 @@ describe('SSR Backpatching (attributes only, wrapper-scoped)', () => {
     const { document } = await ssrRenderToDom(<Root />, { debug });
     const html = document.documentElement.outerHTML;
 
-    expect(html).toMatch(/<input[^>]*\sq:reactive-id="/);
-
+    expect(html).toMatch(/q:reactive-id="/);
     expect(html).not.toMatch(/data-qwik-backpatch=/);
   });