Merge pull request #1076 from joshunrau/json

joshunrau · web-flow · commit 61759c29f1da · 2025-01-15T12:37:30.000-05:00
add json support for instruments and only persist user-defined instruments in playground
diff --git a/apps/playground/src/components/Editor/Editor.tsx b/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'],
diff --git a/apps/playground/src/components/Editor/EditorFileIcon.tsx b/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 />
         ))}
diff --git a/apps/playground/src/components/Editor/EditorPane.tsx b/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}
diff --git a/apps/playground/src/instruments/examples/interactive/Interactive-With-Embedded-Video/cat-video.mp4 b/apps/playground/src/instruments/examples/interactive/Interactive-With-Embedded-Video/cat-video.mp4
diff --git a/apps/playground/src/instruments/examples/interactive/Interactive-With-Embedded-Video/config.json b/apps/playground/src/instruments/examples/interactive/Interactive-With-Embedded-Video/config.json
@@ -0,0 +1,3 @@
+{
+  "timeLimit": 15
+}
diff --git a/apps/playground/src/instruments/examples/interactive/Interactive-With-Embedded-Video/index.tsx b/apps/playground/src/instruments/examples/interactive/Interactive-With-Embedded-Video/index.tsx
@@ -4,9 +4,10 @@ import { createRoot } from '/runtime/v1/react-dom@18.x/client.js';
 import { z } from '/runtime/v1/zod@3.23.x';
 
 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(() => {
@@ -71,7 +72,7 @@ export default defineInstrument({
     authors: ['Joshua Unrau'],
     description: 'This test assesses whether a person knows what a cat is',
     license: 'Apache-2.0',
-    title: 'Breakout Task'
+    title: 'Interactive With Embedded Video'
   },
   internal: {
     edition: 1,
diff --git a/apps/playground/src/instruments/index.ts b/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'
diff --git a/apps/playground/src/store/index.ts b/apps/playground/src/store/index.ts
@@ -27,6 +27,22 @@ export const useAppStore = create(
         }))
       ),
       {
+        merge: (_persistedState, currentState) => {
+          const persistedState = _persistedState as
+            | Partial<Pick<AppStore, 'instruments' | 'selectedInstrument' | 'settings'>>
+            | undefined;
+          const instruments = [
+            ...currentState.instruments,
+            ...(persistedState?.instruments ?? []).filter((instrument) => {
+              return instrument.category === 'Saved';
+            })
+          ];
+          const selectedInstrument =
+            instruments.find(({ id }) => id === persistedState?.selectedInstrument?.id) ??
+            currentState.selectedInstrument;
+          const settings = persistedState?.settings ?? currentState.settings;
+          return { ...currentState, instruments, selectedInstrument, settings };
+        },
         name: 'app',
         partialize: (state) => pick(state, ['instruments', 'selectedInstrument', 'settings']),
         storage: createJSONStorage(() => localStorage),
diff --git a/apps/playground/src/utils/file.ts b/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();
 }
diff --git a/packages/instrument-bundler/src/types.ts b/packages/instrument-bundler/src/types.ts
@@ -4,6 +4,7 @@ export type BundlerInputFileExtension =
   | '.jpeg'
   | '.jpg'
   | '.js'
+  | '.json'
   | '.jsx'
   | '.mp4'
   | '.png'
diff --git a/packages/instrument-bundler/src/utils.ts b/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)
diff --git a/runtime/v1/env.d.ts b/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/react@18.x/jsx-runtime';
 }
