Merge pull request #7666 from QwikDev/v2-empty-props-ssr

fix: correctly serialize vnode props in production mode

Author: wmertens

.changeset/quick-moons-show.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: correctly serialize vnode props in production mode

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

@@ -512,7 +512,7 @@ describe('serializer v2', () => {
 
     describe('DocumentSerializer, //////', () => {
       it('should serialize and deserialize', async () => {
-        const obj = new SsrNode(null, '', [], [], [] as any);
+        const obj = new SsrNode(null, '', -1, [], [] as any);
         const container = await withContainer((ssr) => ssr.addRoot(obj));
         expect(container.$getObjectById$(0)).toEqual(container.element.ownerDocument);
       });

packages/qwik/src/server/ssr-node.spec.ts

@@ -0,0 +1,24 @@
+import { _EMPTY_ARRAY } from '@qwik.dev/core';
+import { describe, expect, it } from 'vitest';
+import { SsrNode } from './ssr-node';
+import { OPEN_FRAGMENT, type VNodeData } from './vnode-data';
+import { VNodeDataFlag } from './types';
+
+describe('ssr-node', () => {
+  it('should create empty array as attrs if attributesIndex is -1', () => {
+    const vNodeData: VNodeData = [VNodeDataFlag.VIRTUAL_NODE];
+    vNodeData.push(OPEN_FRAGMENT);
+    const ssrNode = new SsrNode(null, '1', -1, [], vNodeData);
+    ssrNode.setProp('a', 1);
+    expect(vNodeData[(ssrNode as any).attributesIndex]).toEqual(['a', 1]);
+  });
+
+  it('should create new empty array as attrs if attrs are equal to EMPTY_ARRAY', () => {
+    const vNodeData: VNodeData = [VNodeDataFlag.VIRTUAL_NODE];
+    const attrs = _EMPTY_ARRAY;
+    vNodeData.push(attrs, OPEN_FRAGMENT);
+    const ssrNode = new SsrNode(null, '1', 1, [], vNodeData);
+    ssrNode.setProp('a', 1);
+    expect(vNodeData[(ssrNode as any).attributesIndex]).toEqual(['a', 1]);
+  });
+});

packages/qwik/src/server/ssr-node.ts

@@ -39,6 +39,7 @@ export class SsrNode implements ISsrNode {
 
   public parentSsrNode: ISsrNode | null;
   public children: ISsrNode[] | null = null;
+  private attrs: SsrAttrs;
 
   /** Local props which don't serialize; */
   private localProps: SsrAttrs | null = null;
@@ -50,21 +51,23 @@ export class SsrNode implements ISsrNode {
   constructor(
     parentSsrNode: ISsrNode | null,
     id: string,
-    private attrs: SsrAttrs,
+    private attributesIndex: number,
     private cleanupQueue: CleanupQueue,
     public vnodeData: VNodeData
   ) {
     this.parentSsrNode = parentSsrNode;
     this.parentSsrNode?.addChild(this);
     this.id = id;
+    this.attrs =
+      this.attributesIndex >= 0 ? (this.vnodeData[this.attributesIndex] as SsrAttrs) : _EMPTY_ARRAY;
     if (isDev && id.indexOf('undefined') != -1) {
       throw new Error(`Invalid SSR node id: ${id}`);
     }
   }
 
   setProp(name: string, value: any): void {
     if (this.attrs === _EMPTY_ARRAY) {
-      this.attrs = [];
+      this.setEmptyArrayAsVNodeDataAttributes();
     }
     if (name.startsWith(NON_SERIALIZABLE_MARKER_PREFIX)) {
       mapArray_set(this.localProps || (this.localProps = []), name, value, 0);
@@ -78,6 +81,20 @@ export class SsrNode implements ISsrNode {
     }
   }
 
+  private setEmptyArrayAsVNodeDataAttributes() {
+    if (this.attributesIndex >= 0) {
+      this.vnodeData[this.attributesIndex] = [];
+      this.attrs = this.vnodeData[this.attributesIndex] as SsrAttrs;
+    } else {
+      // we need to insert a new empty array at index 1
+      // this can be inefficient, but it is only done once per node and probably not often
+      const newAttributesIndex = this.vnodeData.length > 1 ? 1 : 0;
+      this.vnodeData.splice(newAttributesIndex, 0, []);
+      this.attributesIndex = newAttributesIndex;
+      this.attrs = this.vnodeData[this.attributesIndex] as SsrAttrs;
+    }
+  }
+
   getProp(name: string): any {
     if (name.startsWith(NON_SERIALIZABLE_MARKER_PREFIX)) {
       return this.localProps ? mapArray_get(this.localProps, name, 0) : null;

packages/qwik/src/server/vnode-data.ts

@@ -87,13 +87,13 @@ export function vNodeData_createSsrNodeReference(
   cleanupQueue: CleanupQueue
 ): ISsrNode {
   vNodeData[0] |= VNodeDataFlag.REFERENCE;
-  let fragmentAttrs: SsrAttrs = _EMPTY_ARRAY;
   const stack: number[] = [-1];
   // We are referring to a virtual node. We need to descend into the tree to find the path to the node.
+  let attributesIndex = -1;
   for (let i = 1; i < vNodeData.length; i++) {
     const value = vNodeData[i];
     if (Array.isArray(value)) {
-      fragmentAttrs = value as SsrAttrs;
+      attributesIndex = i;
       i++; // skip the `OPEN_FRAGMENT` or `WRITE_ELEMENT_ATTRS` value
       if (vNodeData[i] !== WRITE_ELEMENT_ATTRS) {
         // ignore pushing to the stack for WRITE_ELEMENT_ATTRS, because we don't want to create more depth. It is the same element
@@ -102,7 +102,6 @@ export function vNodeData_createSsrNodeReference(
       }
     } else if (value === CLOSE_FRAGMENT) {
       stack.pop(); // pop count
-      fragmentAttrs = _EMPTY_ARRAY;
     } else if (value < 0) {
       // Negative numbers are element counts.
       const numberOfElements = 0 - value;
@@ -124,7 +123,7 @@ export function vNodeData_createSsrNodeReference(
       }
     }
   }
-  return new SsrNode(currentComponentNode, refId, fragmentAttrs, cleanupQueue, vNodeData);
+  return new SsrNode(currentComponentNode, refId, attributesIndex, cleanupQueue, vNodeData);
 }
 
 /**