feat: add json support for instruments

Author: joshunrau

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

@@ -145,6 +145,7 @@ export const Editor = () => {
       />
       <FileUploadDialog
         accept={{
+          'application/json': ['.json'],
           'image/jpeg': ['.jpg', '.jpeg'],
           'image/png': ['.png'],
           'image/webp': ['.webp'],

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

@@ -108,6 +108,14 @@ export const EditorFileIcon = ({ filename }: EditorFileIconProps) => {
             />
           </svg>
         ))
+        .with('.json', () => (
+          <svg viewBox="0 -960 960 960" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M560-160v-80h120q17 0 28.5-11.5T720-280v-80q0-38 22-69t58-44v-14q-36-13-58-44t-22-69v-80q0-17-11.5-28.5T680-720H560v-80h120q50 0 85 35t35 85v80q0 17 11.5 28.5T840-560h40v160h-40q-17 0-28.5 11.5T800-360v80q0 50-35 85t-85 35zm-280 0q-50 0-85-35t-35-85v-80q0-17-11.5-28.5T120-400H80v-160h40q17 0 28.5-11.5T160-600v-80q0-50 35-85t85-35h120v80H280q-17 0-28.5 11.5T240-680v80q0 38-22 69t-58 44v14q36 13 58 44t22 69v80q0 17 11.5 28.5T280-240h120v80z"
+              fill="#f9a825"
+            />
+          </svg>
+        ))
         .otherwise(() => (
           <FileIcon />
         ))}

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

@@ -136,7 +136,7 @@ export const EditorPane = React.forwardRef<EditorPaneRef, EditorPaneProps>(funct
   return (
     <MonacoEditor
       className="h-full min-h-[576px]"
-      defaultLanguage={fileType satisfies 'css' | 'html' | 'javascript' | 'typescript'}
+      defaultLanguage={fileType satisfies 'css' | 'html' | 'javascript' | 'json' | 'typescript'}
       defaultValue={defaultFile.content}
       keepCurrentModel={true}
       key={defaultFile.id}

apps/playground/src/instruments/examples/interactive/Interactive-With-Embedded-Video/config.json

@@ -0,0 +1,3 @@
+{
+  "timeLimit": 15
+}

apps/playground/src/instruments/examples/interactive/Interactive-With-Embedded-Video/index.tsx

@@ -4,9 +4,10 @@ import { createRoot } from '/runtime/v1/[email protected]/client.js';
 import { z } from '/runtime/v1/[email protected]';
 
 import catVideo from './cat-video.mp4';
+import config from './config.json';
 
 const Task: React.FC<{ done: (data: { success: boolean }) => void }> = ({ done }) => {
-  const [secondsRemaining, setSecondsRemaining] = useState(15);
+  const [secondsRemaining, setSecondsRemaining] = useState<number>(config.timeLimit);
   const [value, setValue] = useState('');
 
   useEffect(() => {

apps/playground/src/instruments/index.ts

@@ -7,7 +7,7 @@ import { loadAssetAsBase64 } from '@/utils/load';
 // Instruments in development
 const EXCLUDED_LABELS: string[] = [];
 
-const textFiles: { [key: string]: string } = import.meta.glob('./**/*.{css,js,jsx,ts,tsx,svg}', {
+const textFiles: { [key: string]: string } = import.meta.glob('./**/*.{css,js,jsx,json,ts,tsx,svg}', {
   eager: true,
   import: 'default',
   query: '?raw'

apps/playground/src/utils/file.ts

@@ -4,7 +4,7 @@ import { match, P } from 'ts-pattern';
 
 import type { EditorFile } from '@/models/editor-file.model';
 
-export type FileType = 'asset' | 'css' | 'html' | 'javascript' | 'typescript';
+export type FileType = 'asset' | 'css' | 'html' | 'javascript' | 'json' | 'typescript';
 
 export function inferFileType(filename: string): FileType | null {
   return match(extractInputFileExtension(filename))
@@ -13,6 +13,7 @@ export function inferFileType(filename: string): FileType | null {
     .with(P.union('.ts', '.tsx'), () => 'typescript' as const)
     .with(P.union('.jpeg', '.jpg', '.png', '.webp', '.mp4'), () => 'asset' as const)
     .with(P.union('.html', '.svg'), () => 'html' as const)
+    .with('.json', () => 'json' as const)
     .with(null, () => null)
     .exhaustive();
 }

packages/instrument-bundler/src/types.ts

@@ -4,6 +4,7 @@ export type BundlerInputFileExtension =
   | '.jpeg'
   | '.jpg'
   | '.js'
+  | '.json'
   | '.jsx'
   | '.mp4'
   | '.png'

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|mp4|png|svg|ts|tsx|webp)$/i.exec(filename)?.[0];
+  const ext = /\.(css|html|jpeg|jpg|js|jsx|json|mp4|png|svg|ts|tsx|webp)$/i.exec(filename)?.[0];
   return (ext ?? null) as BundlerInputFileExtension | null;
 }
 
@@ -16,6 +16,7 @@ export function inferLoader(filename: string): Loader {
     .with('.html', () => 'text' as const)
     .with('.js', () => 'js' as const)
     .with('.jsx', () => 'jsx' as const)
+    .with('.json', () => 'json' as const)
     .with('.ts', () => 'ts' as const)
     .with('.tsx', () => 'tsx' as const)
     .with(P.union('.jpeg', '.jpg', '.png', '.svg', '.webp', '.mp4'), () => 'dataurl' as const)

runtime/v1/env.d.ts

@@ -33,6 +33,11 @@ declare module '*.mp4' {
   export default src;
 }
 
+declare module '*.json' {
+  const src: any;
+  export default src;
+}
+
 declare module 'react/jsx-runtime' {
   export * from '/runtime/v1/[email protected]/jsx-runtime';
 }