Merge pull request #1191 from joshunrau/legacy-js-support

add new feature to easily inject sloppy non-strict mode scripts in iFrame document head

Author: joshunrau

apps/playground/src/instruments/examples/interactive/Interactive-With-Legacy-Script/index.ts

@@ -3,7 +3,7 @@
 import { defineInstrument } from '/runtime/v1/@opendatacapture/runtime-core';
 import { z } from '/runtime/v1/[email protected]';
 
-import './legacy.js';
+import './legacy.js?legacy';
 
 export default defineInstrument({
   kind: 'INTERACTIVE',

package.json

@@ -1,7 +1,7 @@
 {
   "name": "opendatacapture",
   "type": "module",
-  "version": "1.11.0",
+  "version": "1.11.1",
   "private": true,
   "packageManager": "[email protected]",
   "license": "Apache-2.0",

packages/instrument-bundler/src/build.ts

@@ -28,7 +28,7 @@ function parseBuildResult(result: BuildResult): BuildOutput {
       `Unexpected number of exports in output file: expected '0', found '${exportsCount}'`
     );
   }
-  return { css: cssOutput?.text, js: jsOutput.text };
+  return { css: cssOutput?.text, js: jsOutput.text, legacyScripts: result.legacyScripts };
 }
 
 export async function build({ inputs }: { inputs: BundlerInput[] }): Promise<BuildOutput> {

packages/instrument-bundler/src/bundle.ts

@@ -42,8 +42,12 @@ const GLOBALS = `
  */
 export async function createBundle(output: BuildOutput, options: { minify: boolean }) {
   let inject = '';
-  if (output.css) {
-    inject = `Object.defineProperty(__exports.content, '__injectHead', { value: Object.freeze({ style: "${btoa(output.css)}" }), writable: false });`;
+  const style = output.css ? `"${btoa(output.css)}"` : undefined;
+  const scripts = output.legacyScripts
+    ? `[${output.legacyScripts.map((content) => `"${btoa(content)}"`).join(', ')}]`
+    : undefined;
+  if (style || scripts) {
+    inject = `Object.defineProperty(__exports.content, '__injectHead', { value: Object.freeze({ scripts: ${scripts}, style: ${style} }), writable: false });`;
   }
   const bundle = `(async () => {
     ${GLOBALS}

packages/instrument-bundler/src/plugin.ts

@@ -9,6 +9,7 @@ export const plugin = (options: { inputs: BundlerInput[] }): Plugin => {
     name: 'instrument-bundler-plugin',
     setup(build) {
       const namespaces = { bundle: 'bundle' };
+      const legacyScripts: string[] = [];
       build.onResolve({ filter: /.*/ }, (args) => {
         // css @import statement
         if (args.kind === 'import-rule') {
@@ -29,6 +30,35 @@ export const plugin = (options: { inputs: BundlerInput[] }): Plugin => {
           path: args.path
         };
       });
+      build.onLoad({ filter: /.+\?raw$/, namespace: namespaces.bundle }, (args) => {
+        const input = resolveInput(/(.+)\?raw$/.exec(args.path)![1]!, options.inputs);
+        if (!input) {
+          return {
+            errors: [
+              {
+                location: { file: args.path },
+                text: `Failed to resolve '${args.path}' from input filenames: ${options.inputs.map((file) => `'${file.name}'`).join(', ')}`
+              }
+            ]
+          };
+        }
+        return { contents: input?.content, loader: 'text' };
+      });
+      build.onLoad({ filter: /.+\?legacy$/, namespace: namespaces.bundle }, (args) => {
+        const input = resolveInput(/(.+)\?legacy$/.exec(args.path)![1]!, options.inputs);
+        if (!input) {
+          return {
+            errors: [
+              {
+                location: { file: args.path },
+                text: `Failed to resolve '${args.path}' from input filenames: ${options.inputs.map((file) => `'${file.name}'`).join(', ')}`
+              }
+            ]
+          };
+        }
+        legacyScripts.push(input.content as string);
+        return { contents: input.content, loader: 'empty' };
+      });
       build.onLoad({ filter: /^\/runtime\/v1\/.*.css$/, namespace: namespaces.bundle }, (args) => {
         return { contents: `@import "${args.path}";`, loader: 'css' };
       });
@@ -53,6 +83,9 @@ export const plugin = (options: { inputs: BundlerInput[] }): Plugin => {
         }
         return { contents, loader };
       });
+      build.onEnd((result) => {
+        result.legacyScripts = legacyScripts;
+      });
     }
   };
 };

packages/instrument-bundler/src/types.ts

@@ -17,4 +17,5 @@ export type BundlerInputFileExtension =
 export type BuildOutput = {
   css?: string;
   js: string;
+  legacyScripts?: string[];
 };

packages/instrument-bundler/src/vendor/esbuild.ts

@@ -1,5 +1,19 @@
 /* eslint-disable no-var */
 
+declare module 'esbuild' {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/consistent-type-definitions
+  export interface BuildResult<ProvidedOptions extends BuildOptions = BuildOptions> {
+    legacyScripts?: string[];
+  }
+}
+
+declare module 'esbuild-wasm' {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/consistent-type-definitions
+  export interface BuildResult<ProvidedOptions extends BuildOptions = BuildOptions> {
+    legacyScripts?: string[];
+  }
+}
+
 if (typeof window === 'undefined') {
   var { build, transform } = await import('esbuild');
 } else {

packages/react-core/src/components/InteractiveContent/bootstrap.js

@@ -52,6 +52,16 @@ if (!bundle) {
 }
 
 const instrument = await evaluateInstrument(bundle);
+
+/** @type {string[] | undefined} */
+const scripts = instrument.content.__injectHead?.scripts;
+scripts?.forEach((encodedScript) => {
+  const script = document.createElement('script');
+  script.type = 'text/javascript';
+  script.textContent = atob(encodedScript);
+  document.head.appendChild(script);
+});
+
 const encodedStyle = instrument.content.__injectHead?.style;
 if (encodedStyle) {
   const style = atob(encodedStyle);

packages/runtime-core/src/types/instrument.interactive.ts

@@ -20,8 +20,10 @@ declare type InteractiveInstrument<
     content: {
       /** attributes to inject in the iframe head */
       readonly __injectHead?: {
+        /** an array of base64 encoded legacy scripts */
+        readonly scripts?: readonly string[];
         /** base64 encoded css */
-        readonly style: string;
+        readonly style?: string;
       };
       render: (done: (data: TData) => void) => Promisable<void>;
     };

packages/schemas/src/instrument/instrument.interactive.ts

@@ -8,7 +8,8 @@ const $InteractiveInstrument = $ScalarInstrument.extend({
   content: z.object({
     __injectHead: z
       .object({
-        style: z.string().readonly()
+        scripts: z.array(z.string().readonly()).readonly().optional(),
+        style: z.string().readonly().optional()
       })
       .optional()
       .readonly(),