Merge pull request #1199 from joshunrau/interactive-features

handle encoding unicode characters in legacy scripts

Author: joshunrau

packages/instrument-bundler/package.json

@@ -22,6 +22,7 @@
     "tsx": "catalog:"
   },
   "dependencies": {
+    "@opendatacapture/runtime-internal": "workspace:*",
     "commander": "^12.1.0",
     "es-module-lexer": "^1.6.0",
     "esbuild": "catalog:",

packages/instrument-bundler/src/bundle.ts

@@ -1,3 +1,5 @@
+import { encodeUnicodeToBase64 } from '@opendatacapture/runtime-internal';
+
 import { build } from './build.js';
 import { preprocess } from './preprocess.js';
 import { transformImports } from './transform.js';
@@ -42,9 +44,9 @@ const GLOBALS = `
  */
 export async function createBundle(output: BuildOutput, options: { minify: boolean }) {
   let inject = '';
-  const style = output.css ? `"${btoa(output.css)}"` : undefined;
+  const style = output.css ? `"${encodeUnicodeToBase64(output.css)}"` : undefined;
   const scripts = output.legacyScripts?.length
-    ? `[${output.legacyScripts.map((content) => `"${btoa(content)}"`).join(', ')}]`
+    ? `[${output.legacyScripts.map((content) => `"${encodeUnicodeToBase64(content)}"`).join(', ')}]`
     : undefined;
   if (style || scripts) {
     inject = `Object.defineProperty(__exports.content, '__injectHead', { value: Object.freeze({ scripts: ${scripts}, style: ${style} }), writable: false });`;

packages/runtime-internal/src/index.d.ts

@@ -7,3 +7,9 @@
  * PLAYGROUND).**
  */
 export declare function evaluateInstrument(bundle: string): Promise<any>;
+
+/** Encodes a Unicode string into a Base64 string */
+export declare function encodeUnicodeToBase64(s: string): string;
+
+/** Decodes a Base64 string back into a Unicode string. */
+export declare function decodeBase64ToUnicode(s: string): string;

packages/runtime-internal/src/index.js

@@ -2,3 +2,22 @@
 export async function evaluateInstrument(bundle) {
   return await new Function(`return ${bundle}`)();
 }
+
+/** @type {import('./index.d.ts').encodeUnicodeToBase64} */
+export function encodeUnicodeToBase64(s) {
+  const utf8Bytes = new TextEncoder().encode(s);
+
+  let binaryString = '';
+  for (const byte of utf8Bytes) {
+    binaryString += String.fromCharCode(byte);
+  }
+
+  return btoa(binaryString);
+}
+
+/** @type {import('./index.d.ts').decodeBase64ToUnicode} */
+export function decodeBase64ToUnicode(s) {
+  const binaryString = atob(s);
+  const bytes = Uint8Array.from(binaryString, (c) => c.charCodeAt(0));
+  return new TextDecoder().decode(bytes);
+}

packages/runtime-internal/src/interactive/bootstrap.js

@@ -42,7 +42,7 @@ if (!bundle) {
 }
 
 (async function () {
-  const { evaluateInstrument } = await import('../index.js');
+  const { decodeBase64ToUnicode, evaluateInstrument } = await import('../index.js');
 
   /** @type {import('../../../runtime-core/src/types/instrument.interactive.js').InteractiveInstrument} */
   const instrument = await evaluateInstrument(bundle);
@@ -69,7 +69,7 @@ if (!bundle) {
 
   const encodedStyle = instrument.content.__injectHead?.style;
   if (encodedStyle) {
-    const style = atob(encodedStyle);
+    const style = decodeBase64ToUnicode(encodedStyle);
     document.head.insertAdjacentHTML('beforeend', `<style>${style}</style>`);
   }
 
@@ -81,7 +81,7 @@ if (!bundle) {
   scripts?.forEach((encodedScript) => {
     const script = document.createElement('script');
     script.type = 'text/javascript';
-    script.textContent = atob(encodedScript);
+    script.textContent = decodeBase64ToUnicode(encodedScript);
     document.head.appendChild(script);
   });
 

packages/serve-instrument/package.json

@@ -11,6 +11,7 @@
     "@douglasneuroinformatics/libui": "catalog:",
     "@opendatacapture/instrument-bundler": "workspace:",
     "@opendatacapture/react-core": "workspace:*",
+    "@opendatacapture/runtime-internal": "workspace:*",
     "@opendatacapture/runtime-v1": "workspace:*",
     "@opendatacapture/vite-plugin-runtime": "workspace:*",
     "@tailwindcss/vite": "catalog:",

packages/serve-instrument/src/cli.ts

@@ -5,6 +5,7 @@ import * as path from 'node:path';
 
 import { bundle, BUNDLER_FILE_EXT_REGEX, inferLoader } from '@opendatacapture/instrument-bundler';
 import type { BundlerInput } from '@opendatacapture/instrument-bundler';
+import { encodeUnicodeToBase64 } from '@opendatacapture/runtime-internal';
 import runtime from '@opendatacapture/vite-plugin-runtime';
 import tailwindcss from '@tailwindcss/vite';
 import { Command, InvalidArgumentError } from 'commander';
@@ -55,7 +56,7 @@ program.action(async (target: string) => {
         name: path.basename(filepath)
       });
     }
-    return btoa(await bundle({ inputs }));
+    return encodeUnicodeToBase64(await bundle({ inputs }));
   };
 
   const server = await createServer({

packages/serve-instrument/src/client/main.tsx

@@ -3,6 +3,7 @@ import { createRoot } from 'react-dom/client';
 
 import { i18n } from '@douglasneuroinformatics/libui/i18n';
 import { ScalarInstrumentRenderer } from '@opendatacapture/react-core';
+import { decodeBase64ToUnicode } from '@opendatacapture/runtime-internal';
 
 import '@opendatacapture/react-core/globals.css';
 
@@ -25,7 +26,7 @@ const App = () => {
     <div className="container h-screen py-16">
       <ScalarInstrumentRenderer
         key={encodedBundle}
-        target={{ bundle: atob(encodedBundle), id: null! }}
+        target={{ bundle: decodeBase64ToUnicode(encodedBundle), id: null! }}
         onSubmit={({ data }) => {
           // eslint-disable-next-line no-alert
           alert(JSON.stringify({ _message: 'The following data will be submitted', data }, null, 2));