fix: allow special characters in key attribute

Author: Varixo

.changeset/thirty-carrots-stand.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: allow special characters in key attribute

packages/qwik/src/core/client/vnode.ts

@@ -1549,17 +1549,21 @@ const processVNodeData = (
     peek: () => number,
     consumeValue: () => string,
     consume: () => number,
+    getChar: (idx: number) => number,
     nextToConsumeIdx: number
   ) => void
 ) => {
   let nextToConsumeIdx = 0;
   let ch = 0;
   let peekCh = 0;
+  const getChar = (idx: number) => {
+    return idx < vData.length ? vData.charCodeAt(idx) : 0;
+  };
   const peek = () => {
     if (peekCh !== 0) {
       return peekCh;
     } else {
-      return (peekCh = nextToConsumeIdx < vData.length ? vData.charCodeAt(nextToConsumeIdx) : 0);
+      return (peekCh = getChar(nextToConsumeIdx));
     }
   };
   const consume = () => {
@@ -1584,7 +1588,7 @@ const processVNodeData = (
   };
 
   while (peek() !== 0) {
-    callback(peek, consumeValue, consume, nextToConsumeIdx);
+    callback(peek, consumeValue, consume, getChar, nextToConsumeIdx);
   }
 };
 
@@ -1835,7 +1839,7 @@ function materializeFromVNodeData(
   let combinedText: string | null = null;
   let container: ClientContainer | null = null;
 
-  processVNodeData(vData, (peek, consumeValue, consume, nextToConsumeIdx) => {
+  processVNodeData(vData, (peek, consumeValue, consume, getChar, nextToConsumeIdx) => {
     if (isNumber(peek())) {
       // Element counts get encoded as numbers.
       while (
@@ -1876,7 +1880,16 @@ function materializeFromVNodeData(
     } else if (peek() === VNodeDataChar.PROPS) {
       vnode_setAttr(null, vParent, ELEMENT_PROPS, consumeValue());
     } else if (peek() === VNodeDataChar.KEY) {
-      vnode_setAttr(null, vParent, ELEMENT_KEY, consumeValue());
+      const isEscapedValue = getChar(nextToConsumeIdx + 1) === VNodeDataChar.SEPARATOR;
+      let value;
+      if (isEscapedValue) {
+        consume();
+        value = decodeURI(consumeValue());
+        consume();
+      } else {
+        value = consumeValue();
+      }
+      vnode_setAttr(null, vParent, ELEMENT_KEY, value);
     } else if (peek() === VNodeDataChar.SEQ) {
       vnode_setAttr(null, vParent, ELEMENT_SEQ, consumeValue());
     } else if (peek() === VNodeDataChar.SEQ_IDX) {

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

@@ -2811,7 +2811,13 @@ describe.each([
       const Cmp = component$(() => {
         const toggle = useSignal(true);
 
-        const places = ['Beaupré, Canada'];
+        const places = [
+          'Beaupré, Canada',
+          'Łódź, Poland',
+          '北京, China',
+          '|, Separator',
+          '||, Double Separator',
+        ];
         return (
           <div>
             <button

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

@@ -702,6 +702,7 @@ class SSRContainer extends _SharedContainer implements ISSRContainer {
       for (let i = 0; i < fragmentAttrs.length; ) {
         const key = fragmentAttrs[i++] as string;
         let value = fragmentAttrs[i++] as string;
+        let encodeValue = false;
         // if (key !== DEBUG_TYPE) continue;
         if (typeof value !== 'string') {
           const rootId = addRoot(value);
@@ -725,6 +726,7 @@ class SSRContainer extends _SharedContainer implements ISSRContainer {
             write(VNodeDataChar.PROPS_CHAR);
             break;
           case ELEMENT_KEY:
+            encodeValue = true;
             write(VNodeDataChar.KEY_CHAR);
             break;
           case ELEMENT_SEQ:
@@ -751,7 +753,16 @@ class SSRContainer extends _SharedContainer implements ISSRContainer {
             write(key);
             write(VNodeDataChar.SEPARATOR_CHAR);
         }
-        write(value);
+        const encodedValue = encodeValue ? encodeURI(value) : value;
+        const isEncoded = encodeValue ? encodedValue !== value : false;
+        if (isEncoded) {
+          // add separator only before and after the encoded value
+          write(VNodeDataChar.SEPARATOR_CHAR);
+          write(encodedValue);
+          write(VNodeDataChar.SEPARATOR_CHAR);
+        } else {
+          write(value);
+        }
       }
     }