feat: support importing mp4 in instruments

Author: joshunrau

apps/playground/src/components/Editor/Editor.tsx

@@ -150,7 +150,8 @@ export const Editor = () => {
           'image/webp': ['.webp'],
           'text/css': ['.css'],
           'text/html': ['.html'],
-          'text/plain': ['.js', '.jsx', '.ts', '.tsx']
+          'text/plain': ['.js', '.jsx', '.ts', '.tsx'],
+          'video/mp4': ['.mp4']
         }}
         isOpen={isFileUploadDialogOpen}
         setIsOpen={setIsFileUploadDialogOpen}

apps/playground/src/components/Editor/EditorFileIcon.tsx

@@ -92,6 +92,14 @@ export const EditorFileIcon = ({ filename }: EditorFileIconProps) => {
             />
           </svg>
         ))
+        .with('.mp4', () => (
+          <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="m24 6 2 6h-4l-2-6h-3l2 6h-4l-2-6h-3l2 6H8L6 6H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h22a3 3 0 0 0 3-3V6Z"
+              fill="#ff9800"
+            />
+          </svg>
+        ))
         .with('.html', () => (
           <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
             <path

apps/playground/src/instruments/index.ts

@@ -13,7 +13,7 @@ const textFiles: { [key: string]: string } = import.meta.glob('./**/*.{css,js,js
   query: '?raw'
 });
 
-const binaryFiles: { [key: string]: string } = import.meta.glob('./**/*.{jpg,jpeg,png,webp}', {
+const binaryFiles: { [key: string]: string } = import.meta.glob('./**/*.{jpg,jpeg,png,webp,mp4}', {
   eager: true,
   import: 'default',
   query: '?url'

apps/playground/src/utils/file.ts

@@ -11,7 +11,7 @@ export function inferFileType(filename: string): FileType | null {
     .with('.css', () => 'css' as const)
     .with(P.union('.js', '.jsx'), () => 'javascript' as const)
     .with(P.union('.ts', '.tsx'), () => 'typescript' as const)
-    .with(P.union('.jpeg', '.jpg', '.png', '.webp'), () => 'asset' as const)
+    .with(P.union('.jpeg', '.jpg', '.png', '.webp', '.mp4'), () => 'asset' as const)
     .with(P.union('.html', '.svg'), () => 'html' as const)
     .with(null, () => null)
     .exhaustive();
@@ -30,7 +30,7 @@ export function editorFileToInput(file: EditorFile): BundlerInput {
 }
 
 export function isBase64EncodedFileType(filename: string) {
-  return ['.jpeg', '.jpg', '.png', '.webp'].includes(extractInputFileExtension(filename)!);
+  return ['.jpeg', '.jpg', '.mp4', '.png', '.webp'].includes(extractInputFileExtension(filename)!);
 }
 
 export function resolveIndexFile(files: EditorFile[]) {

packages/instrument-bundler/src/types.ts

@@ -5,6 +5,7 @@ export type BundlerInputFileExtension =
   | '.jpg'
   | '.js'
   | '.jsx'
+  | '.mp4'
   | '.png'
   | '.svg'
   | '.ts'

packages/instrument-bundler/src/utils.ts

@@ -6,7 +6,7 @@ import type { BundlerInputFileExtension } from './types.js';
 import type { Loader } from './vendor/esbuild.js';
 
 export function extractInputFileExtension(filename: string) {
-  const ext = /\.(css|html|jpeg|jpg|js|jsx|png|svg|ts|tsx|webp)$/i.exec(filename)?.[0];
+  const ext = /\.(css|html|jpeg|jpg|js|jsx|mp4|png|svg|ts|tsx|webp)$/i.exec(filename)?.[0];
   return (ext ?? null) as BundlerInputFileExtension | null;
 }
 
@@ -18,7 +18,7 @@ export function inferLoader(filename: string): Loader {
     .with('.jsx', () => 'jsx' as const)
     .with('.ts', () => 'ts' as const)
     .with('.tsx', () => 'tsx' as const)
-    .with(P.union('.jpeg', '.jpg', '.png', '.svg', '.webp'), () => 'dataurl' as const)
+    .with(P.union('.jpeg', '.jpg', '.png', '.svg', '.webp', '.mp4'), () => 'dataurl' as const)
     .with(null, () => {
       throw new InstrumentBundlerError(`Cannot infer loader due to unexpected extension for filename: ${filename}`);
     })

runtime/v1/env.d.ts

@@ -28,6 +28,11 @@ declare module '*.webp' {
   export default src;
 }
 
+declare module '*.mp4' {
+  const src: string;
+  export default src;
+}
+
 declare module 'react/jsx-runtime' {
   export * from '/runtime/v1/react@18.x/jsx-runtime';
 }