Merge pull request #1296 from joshunrau/serve-instrument

rewrite serve-instrument as standalone dev server

Author: joshunrau

apps/gateway/vite.config.ts

@@ -9,6 +9,9 @@ export default defineConfig(({ mode }) => ({
   build: {
     chunkSizeWarningLimit: 1000,
     emptyOutDir: false,
+    rollupOptions: {
+      external: ['esbuild']
+    },
     sourcemap: true,
     target: 'es2022'
   },
@@ -21,7 +24,8 @@ export default defineConfig(({ mode }) => ({
   plugins: [
     react(),
     runtime({
-      disabled: mode === 'test'
+      disabled: mode === 'test',
+      rootDir: import.meta.dirname
     }) as any,
     tailwindcss()
   ],

apps/playground/src/components/Header/ActionsDropdown/StorageUsageDialog.tsx

@@ -4,6 +4,7 @@ import { formatByteSize } from '@douglasneuroinformatics/libjs';
 import { Button, Dialog } from '@douglasneuroinformatics/libui/components';
 
 import { useAppStore } from '@/store';
+
 export type StorageUsageDialogProps = {
   isOpen: boolean;
   setIsOpen: (value: boolean) => void;
@@ -17,7 +18,7 @@ export const StorageUsageDialog = ({ isOpen, setIsOpen }: StorageUsageDialogProp
   const updateStorage = async () => {
     setMessage('Loading...');
     const [updated] = await Promise.all([
-      await navigator.storage.estimate(),
+      navigator.storage.estimate(),
       new Promise((resolve) => setTimeout(resolve, 500))
     ]);
     setStorageEstimate(updated);

apps/playground/src/components/Viewer/CompileErrorFallback.tsx

@@ -1,7 +1,6 @@
-import { ViewerErrorFallback } from './ViewerErrorFallback';
+import { InstrumentErrorFallback } from '@opendatacapture/react-core';
+import type { InstrumentErrorFallbackProps } from '@opendatacapture/react-core';
 
-import type { ViewerErrorFallbackProps } from './ViewerErrorFallback';
-
-export const CompileErrorFallback = (props: Omit<ViewerErrorFallbackProps, 'title'>) => {
-  return <ViewerErrorFallback title="Failed to Compile" {...props} />;
+export const CompileErrorFallback = (props: Omit<InstrumentErrorFallbackProps, 'title'>) => {
+  return <InstrumentErrorFallback title="Failed to Compile" {...props} />;
 };

apps/playground/src/components/Viewer/RuntimeErrorFallback.tsx

@@ -1,10 +1,9 @@
-import { ViewerErrorFallback } from './ViewerErrorFallback';
+import { InstrumentErrorFallback } from '@opendatacapture/react-core';
+import type { InstrumentErrorFallbackProps } from '@opendatacapture/react-core';
 
-import type { ViewerErrorFallbackProps } from './ViewerErrorFallback';
-
-export const RuntimeErrorFallback = (props: Omit<ViewerErrorFallbackProps, 'title'>) => {
+export const RuntimeErrorFallback = (props: Omit<InstrumentErrorFallbackProps, 'title'>) => {
   return (
-    <ViewerErrorFallback
+    <InstrumentErrorFallback
       description="This means that your instrument successfully compiled, but caused an unexpected exception to be thrown in the browser. For example, this could happen in the render function of a dynamic form field. Although the bundler attempts to validate the structure of instruments at compile time, it is not possible to evaluate the runtime behavior of arbitrary JavaScript code."
       title="Unhandled Runtime Error"
       {...props}

apps/playground/src/components/Viewer/Viewer.tsx

@@ -15,8 +15,10 @@ import { editorFileToInput, hashFiles } from '@/utils/file';
 
 import { CompileErrorFallback } from './CompileErrorFallback';
 import { RuntimeErrorFallback } from './RuntimeErrorFallback';
+
 export const Viewer = () => {
   const editorFilesRef = useFilesRef();
+  const indexFilename = useAppStore((store) => store.indexFilename);
   const refreshInterval = useAppStore((store) => store.settings.refreshInterval);
   const [filesHash, setFilesHash] = useState<string>('');
 
@@ -58,7 +60,11 @@ export const Viewer = () => {
     >
       {match(state)
         .with({ status: 'built' }, ({ bundle }) => (
-          <ErrorBoundary FallbackComponent={RuntimeErrorFallback}>
+          <ErrorBoundary
+            FallbackComponent={(props) => (
+              <RuntimeErrorFallback context={{ files: editorFilesRef.current, indexFilename }} {...props} />
+            )}
+          >
             <ScalarInstrumentRenderer
               options={{ validate: true }}
               target={{ bundle, id: null! }}
@@ -70,7 +76,9 @@ export const Viewer = () => {
             />
           </ErrorBoundary>
         ))
-        .with({ status: 'error' }, CompileErrorFallback)
+        .with({ status: 'error' }, (props) => (
+          <CompileErrorFallback context={{ files: editorFilesRef.current, indexFilename }} {...props} />
+        ))
         .with({ status: P.union('building', 'initial') }, () => <Spinner />)
         .exhaustive()}
     </div>

apps/playground/src/components/Viewer/ViewerErrorFallback/index.ts

@@ -29,7 +29,7 @@ const IndexPage = () => {
     }
     for (const fileA of instrumentA.files) {
       const fileB = instrumentB.files.find((file) => file.name === fileA.name);
-      if (!fileB || fileA.content !== fileB.content) {
+      if (fileA.content !== fileB?.content) {
         return false;
       }
     }

apps/playground/src/pages/IndexPage.tsx

@@ -33,7 +33,7 @@ export const operators: { [key: string]: OperatorFunc } = {
     if (!vim.visualMode) {
       text = adapter.getRange(anchor, head);
       const lastState = vim.lastEditInputState;
-      if (lastState && lastState.motion === 'moveByWords' && !isWhiteSpaceString(text)) {
+      if (lastState?.motion === 'moveByWords' && !isWhiteSpaceString(text)) {
         // Exclude trailing whitespace if the range is not all whitespace.
         const match = /\s+$/.exec(text);
         if (match && lastState.motionArgs?.forward) {

apps/playground/src/vim/operators.ts

@@ -93,7 +93,7 @@ export class Register implements IRegister {
  */
 export function defineRegister(name: string, register: IRegister) {
   const registers = vimGlobalState.registerController.registers;
-  if (!name || name.length != 1) {
+  if (name?.length != 1) {
     throw Error('Register name must be 1 character');
   }
   if (registers[name]) {

apps/playground/src/vim/register-controller.ts

@@ -9,6 +9,9 @@ export default defineConfig(({ mode }) => ({
   build: {
     chunkSizeWarningLimit: 1000,
     emptyOutDir: false,
+    rollupOptions: {
+      external: ['esbuild']
+    },
     sourcemap: true,
     target: 'es2022'
   },
@@ -25,7 +28,8 @@ export default defineConfig(({ mode }) => ({
   plugins: [
     react(),
     runtime({
-      disabled: mode === 'test'
+      disabled: mode === 'test',
+      rootDir: import.meta.dirname
     }),
     tailwindcss()
   ],