feat: add ?legacy feature

Author: joshunrau

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') {
@@ -43,6 +44,21 @@ export const plugin = (options: { inputs: BundlerInput[] }): Plugin => {
         }
         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' };
       });
@@ -67,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/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(),

runtime/v1/env.d.ts

@@ -49,3 +49,8 @@ declare module '*?raw' {
   const src: string;
   export default src;
 }
+
+declare module '*?legacy' {
+  const src: void;
+  export default src;
+}