refactor: consolidate dataSource and client initialization in App component and remove obsolete dataSource file

Author: hotlong

examples/crm-app/src/App.tsx

@@ -7,10 +7,9 @@ import { registerLayout } from '@object-ui/layout';
 import '@object-ui/plugin-dashboard'; 
 import { ObjectForm } from '@object-ui/plugin-form';
 import { ObjectGrid } from '@object-ui/plugin-grid';
-import { dataSource } from './config/dataSource';
 import { registerPlaceholders } from '@object-ui/components';
 import { SidebarNav } from './components/SidebarNav';
-import { client } from './client';
+import { client, dataSource } from './client';
 
 // Schemas
 import { dashboardSchema } from './schemas/dashboard';

examples/crm-app/src/client.ts

@@ -1,11 +1,25 @@
 import { ObjectStackClient } from '@objectstack/client';
+import { ObjectStackAdapter } from '@object-ui/data-objectstack';
+
+// Use empty string to use current origin. 
+// Matches MSW baseUrl: ''
+const BASE_URL = '/api/v1'; 
 
 export const client = new ObjectStackClient({
-  baseUrl: '/api/v1',
+  baseUrl: BASE_URL, 
+  fetch: globalThis.fetch.bind(globalThis)
+});
+
+export const dataSource = new ObjectStackAdapter({
+  baseUrl: BASE_URL,
+  token: 'mock-token',
   fetch: globalThis.fetch.bind(globalThis)
 });
 
 export const initClient = async () => {
+    console.log('[Client] Connecting...');
+    // Only connect client (adapter connects lazily or we can connect it too)
     await client.connect();
-    console.log('[Client] Connected to ObjectStack');
-}
+    // await dataSource.connect(); // Adapter usually auto-connects on request
+    console.log('[Client] Connected');
+}

examples/crm-app/src/config/dataSource.ts

@@ -6,18 +6,29 @@ import './index.css';
 import { startMockServer } from './mocks/browser';
 import { initClient } from './client';
 
-async function enableMocking() {
-  if (process.env.NODE_ENV !== 'development') {
-    return;
+async function bootstrap() {
+  // 1. Start MSW Mock Server (Critical: Must be first)
+  if (process.env.NODE_ENV === 'development') {
+    console.log('🛑 Bootstrapping Mock Server...');
+    await startMockServer();
   }
-  await startMockServer();
-  await initClient(); // Ensure client is connected after server starts
-}
 
-enableMocking().then(() => {
+  // 2. Initialize Clients (Must happen AFTER MSW is ready)
+  // This ensures discovery requests (/api/v1/metadata) are intercepted by MSW
+  // instead of falling through to the Vite Dev Server (which returns 404 HTML).
+  console.log('🔌 Connecting Clients...');
+  await initClient(); 
+
+  // 3. Render React App
+  console.log('🚀 Rendering App...');
   ReactDOM.createRoot(document.getElementById('root')!).render(
     <React.StrictMode>
       <App />
     </React.StrictMode>
   );
-});
+}
+
+bootstrap().catch(err => {
+    console.error("FATAL: Application failed to start", err);
+    document.body.innerHTML = `<div style="color:red; padding: 20px;"><h1>Application Error</h1><pre>${err.message}</pre></div>`;
+});

examples/crm-app/src/main.tsx

@@ -11,61 +11,58 @@ export async function startMockServer() {
   if (kernel) return kernel;
 
   console.log('[MSW] Starting ObjectStack Runtime (Browser Mode)...');
+  console.log('[MSW] Loaded Config:', crmConfig ? 'Found' : 'Missing', crmConfig?.apps?.length);
 
   const driver = new InMemoryDriver();
-
-  // Create kernel with MiniKernel architecture
   kernel = new ObjectKernel();
-  
-  kernel
-    // Register ObjectQL engine
-    .use(new ObjectQLPlugin())
-    // Register the driver
-    .use(new DriverPlugin(driver, 'memory'))
-    // Load app config as a plugin
-    .use(new AppPlugin(crmConfig))
-    // MSW Plugin (intercepts network requests)
-    .use(new MSWPlugin({
-      enableBrowser: true,
-      baseUrl: '/api/v1',
-      logRequests: true,
-      customHandlers: [
-          // Custom handlers that are not part of standard CRUD
-          http.get('/api/bootstrap', async () => {
-             // We use closure 'driver' variable to bypass objectql service issues
-             try {
-                // Use IDataEngine interface directly via driver
-                // const user = (await driver.findOne('user', 'current')) || {};
+
+  try {
+    kernel
+        .use(new ObjectQLPlugin())
+        .use(new DriverPlugin(driver, 'memory'));
+
+    if (crmConfig) {
+        kernel.use(new AppPlugin(crmConfig));
+    } else {
+        console.error('❌ CRM Config is missing! Skipping AppPlugin.');
+    }
+
+    kernel.use(new MSWPlugin({
+        enableBrowser: true,
+        baseUrl: '/api/v1', // Use root to match client
+        logRequests: true,
+        customHandlers: [
+            http.get('/api/bootstrap', async () => {
                 const contacts = await driver.find('contact', { object: 'contact' });
-                const opportunities = await driver.find('opportunity', { object: 'opportunity' });
                 const stats = { revenue: 125000, leads: 45, deals: 12 };
-
                 return HttpResponse.json({
-                    user: { name: "Demo User", role: "admin" }, // simple mock
+                    user: { name: "Demo User", role: "admin" },
                     stats,
-                    contacts,
-                    opportunities
+                    contacts: contacts || []
                 });
-             } catch (e) {
-                 console.error(e);
-                 return new HttpResponse(null, { status: 500 });
-             }
-          })
-      ]
+            })
+        ]
     }));
-  
-  await kernel.bootstrap();
+    
+    console.log('[Kernel] Bootstrapping...');
+    await kernel.bootstrap();
+    console.log('[Kernel] Bootstrap Complete');
 
-  // Seed Data
-  await initializeMockData(driver);
+    // Seed Data
+    if (crmConfig) {
+        await initializeMockData(driver);
+    }
+  } catch (err: any) {
+    console.error('❌ Mock Server Start Failed:', err);
+    throw err;
+  }
 
   return kernel;
 }
 
 // Helper to seed data into the in-memory driver
 async function initializeMockData(driver: InMemoryDriver) {
-    console.log('[MockServer] Initializing mock data from manifest...');
-    
+    console.log('[MockServer] Initializing mock data...');
     // @ts-ignore
     const manifest = crmConfig.manifest;
     if (manifest && manifest.data) {
@@ -78,5 +75,4 @@ async function initializeMockData(driver: InMemoryDriver) {
             }
         }
     }
-}
-
+}