feat: support html in instruments

joshunrau · joshunrau · commit aa9d36be9b89 · 2025-09-16T11:52:16.000-04:00
diff --git a/apps/playground/src/instruments/index.ts b/apps/playground/src/instruments/index.ts
@@ -8,7 +8,7 @@ import { loadAssetAsBase64 } from '@/utils/load';
 // Instruments in development
 const EXCLUDED_LABELS: string[] = [];
 
-const textFiles: { [key: string]: string } = import.meta.glob('./**/*.{css,js,jsx,json,ts,tsx,svg}', {
+const textFiles: { [key: string]: string } = import.meta.glob('./**/*.{css,js,jsx,json,ts,tsx,svg,html}', {
   eager: true,
   import: 'default',
   query: '?raw'
diff --git a/packages/react-core/src/components/InteractiveContent/InteractiveContent.tsx b/packages/react-core/src/components/InteractiveContent/InteractiveContent.tsx
@@ -121,7 +121,19 @@ export const InteractiveContent = React.memo<InteractiveContentProps>(function I
           lang={resolvedLanguage}
           name="interactive-instrument"
           ref={iFrameRef}
-          srcDoc={`<script type="module">${bootstrapScript}</script>`}
+          srcDoc={[
+            `<!DOCTYPE html>`,
+            `<html>`,
+            `<head>`,
+            `<meta charset="UTF-8">`,
+            `<meta name="viewport" content="width=device-width, initial-scale=1.0">`,
+            `<title>Document</title>`,
+            `<script type="module">${bootstrapScript}</script>`,
+            `</head>`,
+            `<body>`,
+            `</body>`,
+            `</html>`
+          ].join('')}
           style={{ backgroundColor: 'white', height: dimensions, scale: `${scale}%`, width: dimensions }}
           title="Open Data Capture - Interactive Instrument"
         />
diff --git a/packages/runtime-bundler/src/bundler.ts b/packages/runtime-bundler/src/bundler.ts
@@ -3,7 +3,7 @@ import * as path from 'path';
 
 import esbuild from 'esbuild';
 
-import { dtsPlugin } from './plugin.js';
+import { dtsPlugin, htmlPlugin } from './plugin.js';
 import { Resolver } from './resolver.js';
 
 import type { BundlerOptions, EntryPoint, ExportCondition, ResolvedPackage } from './types.js';
@@ -44,7 +44,8 @@ export class Bundler {
           entryPoints,
           outdir: this.options.outdir,
           packages
-        })
+        }),
+        htmlPlugin()
       ],
       sourcemap: 'linked',
       sourcesContent: true,
diff --git a/packages/runtime-bundler/src/plugin.ts b/packages/runtime-bundler/src/plugin.ts
@@ -126,3 +126,24 @@ export function dtsPlugin(options: DtsPluginOptions): Plugin {
     }
   };
 }
+
+export function htmlPlugin(): Plugin {
+  return {
+    name: 'html-plugin',
+    setup(build) {
+      const namespace = 'html';
+      build.onResolve({ filter: /.+\.html$/ }, (args) => {
+        return {
+          namespace,
+          path: args.path
+        };
+      });
+      build.onLoad({ filter: /.*/, namespace }, async (args) => {
+        return {
+          contents: await fs.readFile(args.path, 'utf-8'),
+          loader: 'copy'
+        };
+      });
+    }
+  };
+}
diff --git a/packages/runtime-bundler/src/resolver.ts b/packages/runtime-bundler/src/resolver.ts
@@ -152,6 +152,6 @@ export class Resolver {
   }
 
   private resolveSourceExport(exp: string, packageRoot: string): string {
-    return this.resolveExportFilepath(exp, packageRoot, ['.css', '.json', '.js', '.mjs']);
+    return this.resolveExportFilepath(exp, packageRoot, ['.css', '.json', '.js', '.mjs', '.html']);
   }
 }
diff --git a/packages/runtime-core/src/types/instrument.interactive.ts b/packages/runtime-core/src/types/instrument.interactive.ts
@@ -25,6 +25,10 @@ declare type InteractiveInstrument<
         /** base64 encoded css */
         readonly style?: string;
       };
+      html?: string;
+      meta?: {
+        [name: string]: string;
+      };
       render: (done: (data: TData) => void) => Promisable<void>;
     };
     kind: 'INTERACTIVE';
diff --git a/packages/schemas/src/instrument/instrument.interactive.ts b/packages/schemas/src/instrument/instrument.interactive.ts
@@ -13,6 +13,8 @@ const $InteractiveInstrument = $ScalarInstrument.extend({
       })
       .optional()
       .readonly(),
+    html: z.string().optional(),
+    meta: z.record(z.string(), z.string()).optional(),
     render: $AnyFunction
   }),
   details: $InstrumentDetails,

Original file line number	Diff line number	Diff line change
`@@ -152,6 +152,6 @@ export class Resolver {`
`152`	`152`	`}`
`153`	`153`
`154`	`154`	`private resolveSourceExport(exp: string, packageRoot: string): string {`
`155`		`- return this.resolveExportFilepath(exp, packageRoot, ['.css', '.json', '.js', '.mjs']);`
	`155`	`+ return this.resolveExportFilepath(exp, packageRoot, ['.css', '.json', '.js', '.mjs', '.html']);`
`156`	`156`	`}`
`157`	`157`	`}`