update workers

apps/web-tss/src/components/ui/inputs/AppCodeEditor/AppCodeEditor.tsx

@@ -100,10 +100,17 @@ export const AppCodeEditor = forwardRef<AppCodeEditorHandle, AppCodeEditorProps>
     const onMountCodeEditor = useCallback(
       async (editor: editor.IStandaloneCodeEditor, monaco: typeof import('monaco-editor')) => {
         // Setup Monaco web workers (client-side only)
-        if (typeof window !== 'undefined') {
-          const { setupMonacoWorkers } = await import('./setupMonacoWorkers');
-          await setupMonacoWorkers();
-        }
+        // if (typeof window !== 'undefined') {
+        //   try {
+        //     // Use string concatenation to avoid static analysis during build
+        //     const workerPath = './setup' + 'Monaco' + 'Workers';
+        //     const { setupMonacoWorkers } = await import(/* @vite-ignore */ workerPath);
+        //     await setupMonacoWorkers();
+        //   } catch (error) {
+        //     // Fallback for SSR or when workers can't be loaded
+        //     console.warn('Could not load Monaco workers:', error);
+        //   }
+        // }
 
         const [GithubLightTheme, NightOwlTheme] = await Promise.all([
           (await import('./themes/github_light_theme')).default,

apps/web-tss/src/components/ui/inputs/AppCodeEditor/setupMonacoWorkers.ts

@@ -1,25 +1,25 @@
-// This file is only imported client-side, so worker imports won't be processed during SSR
-export const setupMonacoWorkers = async () => {
-  if (typeof window === 'undefined') return;
+// // This file is only imported client-side, so worker imports won't be processed during SSR
+// export const setupMonacoWorkers = async () => {
+//   if (typeof window === 'undefined') return;
 
-  self.MonacoEnvironment = {
-    async getWorker(_, label) {
-      if (label === 'json') {
-        const { default: Worker } = await import(
-          'monaco-editor/esm/vs/language/json/json.worker?worker'
-        );
-        return new Worker();
-      }
-      if (label === 'yaml') {
-        // For YAML, we'll use the JSON worker as it provides similar functionality
-        const { default: Worker } = await import(
-          'monaco-editor/esm/vs/language/json/json.worker?worker'
-        );
-        return new Worker();
-      }
-      // Default to editorWorkerService for all other languages
-      const { default: Worker } = await import('monaco-editor/esm/vs/editor/editor.worker?worker');
-      return new Worker();
-    },
-  };
-};
+//   self.MonacoEnvironment = {
+//     async getWorker(_, label) {
+//       if (label === 'json') {
+//         const { default: Worker } = await import(
+//           'monaco-editor/esm/vs/language/json/json.worker?worker'
+//         );
+//         return new Worker();
+//       }
+//       if (label === 'yaml') {
+//         // For YAML, we'll use the JSON worker as it provides similar functionality
+//         const { default: Worker } = await import(
+//           'monaco-editor/esm/vs/language/json/json.worker?worker'
+//         );
+//         return new Worker();
+//       }
+//       // Default to editorWorkerService for all other languages
+//       const { default: Worker } = await import('monaco-editor/esm/vs/editor/editor.worker?worker');
+//       return new Worker();
+//     },
+//   };
+// };

apps/web-tss/src/integrations/tanstack-dev-tools/tanstack-devtools-impl.tsx

@@ -1,8 +1,6 @@
 import { ClientOnly } from '@tanstack/react-router';
 import { lazy, Suspense } from 'react';
 
-//import StoreDevtools from './metric-store-devtools';
-
 const LazyTanstackDevtools = lazy(() =>
   import('@tanstack/react-devtools').then((mod) => ({
     default: mod.TanStackDevtools,

apps/web-tss/src/integrations/tanstack-dev-tools/tanstack-devtools.tsx

@@ -8,11 +8,11 @@ const ENABLE_TANSTACK_PANEL =
   (process.env.VITE_ENABLE_TANSTACK_PANEL === 'true' || isDev) && !isServer;
 
 // Lazy load the actual devtools component
-const LazyTanstackDevtools = lazy(() =>
-  import('./tanstack-devtools-impl').then((mod) => ({
-    default: mod.default,
-  }))
-);
+// const LazyTanstackDevtools = lazy(() =>
+//   import('./tanstack-devtools-impl').then((mod) => ({
+//     default: mod.default,
+//   }))
+// );
 
 // Export component with Suspense wrapper
 export const TanstackDevtools: React.FC = React.memo(() => {
@@ -33,20 +33,16 @@ export const TanstackDevtools: React.FC = React.memo(() => {
     { enabled: ENABLE_TANSTACK_PANEL }
   );
 
-  // Only render in development and on the client
-  if (!mounted || !useDevTools) {
-    return null;
-  }
-
-  if (!ENABLE_TANSTACK_PANEL) {
+  if (!ENABLE_TANSTACK_PANEL || !mounted || !useDevTools) {
     return null;
   }
 
   return (
     <ClientOnly>
-      <Suspense fallback={null}>
+      <div>SWAG</div>
+      {/* <Suspense fallback={null}>
         <LazyTanstackDevtools />
-      </Suspense>
+      </Suspense> */}
     </ClientOnly>
   );
 });

apps/web-tss/vite.config.ts

@@ -15,32 +15,11 @@ const config = defineConfig(({ command, mode }) => {
 
   return {
     server: { port: 3000 },
-    ssr: {
-      // Exclude Monaco Editor and related from SSR bundle
-      external: (id) => {
-        // Monaco Editor and related
-        if (
-          id.includes('monaco-editor') ||
-          id.includes('@monaco-editor') ||
-          id.includes('setupMonacoWorkers')
-        ) {
-          return true;
-        }
-        // TanStack devtools (now handled via dynamic imports, but keep basic exclusions)
-        if (id.includes('@tanstack/devtools')) {
-          return true;
-        }
-
-        return false;
-      },
-      // Exclude Monaco Editor workers specifically
-      noExternal: ['!**/monaco-editor/**/*worker*'],
-    },
     plugins: [
       // this is the plugin that enables path aliases
       viteTsConfigPaths({ projects: ['./tsconfig.json'] }),
       tailwindcss(),
-      tanstackStart({ customViteReactPlugin: true, target: 'cloudflare-module' }),
+      tanstackStart({ customViteReactPlugin: true, target: 'bun' }),
       viteReact(),
       useChecker
         ? checker({
@@ -58,14 +37,7 @@ const config = defineConfig(({ command, mode }) => {
           if (/\.(test|stories)\.(js|ts|jsx|tsx)$/.test(id)) {
             return true;
           }
-          // Exclude Monaco Editor from server-side bundle (Cloudflare Workers can't handle it)
-          if (id.includes('monaco-editor') || id.includes('@monaco-editor')) {
-            return true;
-          }
-          // Exclude Monaco worker setup file from SSR
-          if (id.includes('setupMonacoWorkers')) {
-            return true;
-          }
+
           // Don't externalize React and React DOM - let them be bundled
           return false;
         },