fix(utils): handle Unicode characters in serializeProperty (#6654)

Replace btoa/atob with Unicode-safe base64 encoding/decoding functions
to properly handle non-Latin1 characters (emoji, CJK, €, etc.) during
SSR hydration.

The btoa() function only accepts Latin1 characters (code points 0-255)
and throws InvalidCharacterError on Unicode content. This fix uses
TextEncoder/TextDecoder with UTF-8 encoding to properly handle all
Unicode characters.

fixes: #6643

Author: cyphercodes

src/utils/serialize.ts

@@ -2,6 +2,40 @@ import { SERIALIZED_PREFIX } from './constants';
 import { LocalValue } from './local-value';
 import { RemoteValue } from './remote-value';
 
+/**
+ * Unicode-safe base64 encoding that handles characters outside Latin1 range.
+ * Unlike btoa(), this properly handles Unicode characters including emoji,
+ * CJK characters, and currency symbols like €.
+ * @param {string} str - The string to encode.
+ * @returns {string} Base64 encoded string.
+ */
+function encodeBase64Unicode(str: string): string {
+  // First encode to UTF-8, then convert to base64
+  const utf8Bytes = new TextEncoder().encode(str);
+  let binary = '';
+  for (let i = 0; i < utf8Bytes.length; i++) {
+    binary += String.fromCharCode(utf8Bytes[i]);
+  }
+  return btoa(binary);
+}
+
+/**
+ * Unicode-safe base64 decoding that handles characters outside Latin1 range.
+ * Unlike atob(), this properly decodes Unicode characters including emoji,
+ * CJK characters, and currency symbols like €.
+ * @param {string} base64 - The base64 string to decode.
+ * @returns {string} Decoded string.
+ */
+function decodeBase64Unicode(base64: string): string {
+  // First decode from base64, then convert from UTF-8
+  const binary = atob(base64);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return new TextDecoder().decode(bytes);
+}
+
 /**
  * Serialize a value to a string that can be deserialized later.
  * @param {unknown} value - The value to serialize.
@@ -20,7 +54,7 @@ export function serializeProperty(value: unknown) {
   }
 
   const arg = LocalValue.getArgument(value);
-  return (SERIALIZED_PREFIX + btoa(JSON.stringify(arg))) as string;
+  return (SERIALIZED_PREFIX + encodeBase64Unicode(JSON.stringify(arg))) as string;
 }
 
 /**
@@ -33,5 +67,5 @@ export function deserializeProperty(value: string) {
   if (typeof value !== 'string' || !value.startsWith(SERIALIZED_PREFIX)) {
     return value;
   }
-  return RemoteValue.fromLocalValue(JSON.parse(atob(value.slice(SERIALIZED_PREFIX.length))));
+  return RemoteValue.fromLocalValue(JSON.parse(decodeBase64Unicode(value.slice(SERIALIZED_PREFIX.length))));
 }

src/utils/test/serialize.spec.ts

@@ -110,4 +110,22 @@ describe('serialize', () => {
 
     expect(() => serializeProperty(circular)).toThrow();
   });
+
+  it('should serialize and deserialize Unicode characters including emoji, CJK, and currency symbols', () => {
+    const toSerialize = {
+      euroPrice: 'Price: 100€',
+      japaneseText: '日本語',
+      chineseText: '中文字符',
+      emoji: '🎉🚀👋',
+      accentedChars: 'café résumé naïve',
+      mixed: {
+        title: 'Welcome to 日本! 🎌',
+        cost: '€50.00',
+        description: 'CJK: 中文 한국어 日本語',
+      },
+    };
+
+    const deserialized = deserializeProperty(serializeProperty(toSerialize) as string);
+    expect(deserialized).toEqual(toSerialize);
+  });
 });