@rayburst/cli 0.1.16 → 0.1.18

package/bin/rayburst.js

@@ -2,7 +2,7 @@
 
 import { Command } from 'commander';
 import chalk from 'chalk';
-import { spawn, exec } from 'child_process';
+import { spawn } from 'child_process';
 import { fileURLToPath } from 'url';
 import { dirname, join, resolve } from 'path';
 import {
@@ -29,7 +29,7 @@ program
   .command('start')
   .description('Start the Rayburst application')
   .option('-p, --port <port>', 'Port to run the server on', '3105')
-  .option('-e, --env <environment>', 'Environment (local|staging|production)', 'production')
+  .option('-e, --env <environment>', 'Environment (development|staging|production)', 'development')
   .action((options) => {
     console.log(chalk.blue('🚀 Starting Rayburst CLI...'));
     console.log(chalk.gray(`   Port: ${options.port}`));
@@ -48,22 +48,6 @@ program
       stdio: 'inherit',
     });
 
-    // Open browser after server starts
-    let browserOpened = false;
-    setTimeout(() => {
-      if (!browserOpened) {
-        browserOpened = true;
-        const url = `http://localhost:${options.port}`;
-        const openCommand = process.platform === 'darwin' ? 'open' :
-                           process.platform === 'win32' ? 'start' : 'xdg-open';
-        exec(`${openCommand} ${url}`, (err) => {
-          if (err) {
-            console.log(chalk.dim(`\n💡 Open your browser to: ${url}`));
-          }
-        });
-      }
-    }, 2000);
-
     server.on('error', (err) => {
       console.error(chalk.red('Failed to start server:'), err);
       process.exit(1);

package/package.json

@@ -1,22 +1,12 @@
 {
   "name": "@rayburst/cli",
-  "version": "0.1.16",
+  "version": "0.1.18",
   "description": "Rayburst CLI - A module federation host for Rayburst app",
   "type": "module",
   "bin": {
     "rayburst": "./bin/rayburst.js"
   },
   "main": "./server.js",
-  "files": [
-    "bin",
-    "src",
-    "scripts",
-    "dist",
-    "server.js",
-    "vite.config.ts",
-    "vite-plugin-api.js",
-    "index.html"
-  ],
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -39,9 +29,12 @@
   },
   "devDependencies": {
     "@module-federation/vite": "^1.9.0",
+    "@tailwindcss/vite": "^4.1.17",
     "@vitejs/plugin-react": "^4.2.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "tailwindcss": "^4.1.17",
+    "tw-animate-css": "^1.4.0",
     "vite": "^7.1.7"
   },
   "peerDependencies": {

package/server.js

@@ -25,14 +25,13 @@ const hasBuilt = existsSync(distPath);
 // Environment-specific remote URLs
 function getRemoteUrl(env) {
   switch (env) {
-    case 'local':
-      return 'http://localhost:3000';
+    case 'production':
+      return 'https://www.rayburst.app';
     case 'staging':
       return 'https://dev.rayburst.app';
     case 'development':
-    case 'production':
     default:
-      return 'https://www.rayburst.app';
+      return 'http://localhost:3000';
   }
 }
 

package/src/main.tsx

@@ -86,14 +86,113 @@ class ErrorBoundary extends React.Component<
   }
 }
 
+// Function to load remote CSS
+const loadRemoteCSS = async () => {
+  try {
+    // Determine the remote URL based on environment
+    const isDevelopment = import.meta.env.DEV;
+    const remoteUrl = isDevelopment
+      ? 'http://localhost:3000'
+      : import.meta.env.PROD
+        ? 'https://www.rayburst.app'
+        : 'https://dev.rayburst.app';
+
+    console.log('[CLI] Attempting to load CSS from:', remoteUrl, '(dev mode:', isDevelopment, ')');
+
+    if (isDevelopment) {
+      // In development mode, Vite serves CSS as a JavaScript module
+      // We need to dynamically import it to trigger Vite's CSS injection
+      console.log('[CLI] Development mode: Importing CSS module from Vite dev server');
+
+      const cssModuleUrl = `${remoteUrl}/src/styles.css`;
+
+      try {
+        // Check if we've already loaded this CSS module
+        if (!(window as any).__rayburstCssLoaded) {
+          console.log('[CLI] Dynamically importing CSS module:', cssModuleUrl);
+
+          // Create a script tag to load the CSS module
+          const script = document.createElement('script');
+          script.type = 'module';
+          script.textContent = `import '${cssModuleUrl}';`;
+          document.head.appendChild(script);
+
+          // Mark as loaded
+          (window as any).__rayburstCssLoaded = true;
+          console.log('[CLI] CSS module import initiated');
+
+          // Give it a moment to process
+          await new Promise(resolve => setTimeout(resolve, 100));
+        } else {
+          console.log('[CLI] CSS module already loaded');
+        }
+      } catch (cssErr) {
+        console.warn('[CLI] Could not load CSS module, styles may be missing:', cssErr);
+      }
+    } else {
+      // In production/staging, fetch the index.html to find the CSS file
+      const response = await fetch(remoteUrl);
+      const html = await response.text();
+
+      // Extract CSS filename from the HTML
+      const cssMatch = html.match(/href="\/assets\/(style-[^"]+\.css)"/);
+
+      if (cssMatch && cssMatch[1]) {
+        const cssFile = cssMatch[1];
+        const cssUrl = `${remoteUrl}/assets/${cssFile}`;
+
+        console.log('[CLI] Loading remote CSS:', cssUrl);
+
+        // Check if CSS is already loaded
+        const existingLink = document.querySelector(`link[href="${cssUrl}"]`);
+        if (!existingLink) {
+          const link = document.createElement('link');
+          link.rel = 'stylesheet';
+          link.href = cssUrl;
+          document.head.appendChild(link);
+          console.log('[CLI] Remote CSS loaded successfully');
+
+          // Wait for CSS to load
+          await new Promise((resolve) => {
+            link.onload = resolve;
+            link.onerror = resolve;
+          });
+        }
+      } else {
+        console.warn('[CLI] No CSS file found in remote HTML');
+      }
+    }
+  } catch (err) {
+    console.error('[CLI] Failed to load remote CSS:', err);
+  }
+};
+
 // Dynamically import the remote app
-const RemoteApp = lazy(() => {
-  // @ts-ignore - Module federation import
-  return import('rayburstApp/App')
-    .catch((err) => {
-      console.error('[CLI] Failed to load remote app:', err);
-      throw new Error('Could not load Rayburst application from remote.');
+const RemoteApp = lazy(async () => {
+  console.log('[CLI] Attempting to load remote app from rayburstApp/App');
+  console.log('[CLI] Expected remote URL:', 'http://localhost:3000/remoteEntry.js');
+
+  // Load the remote CSS first (in parallel with module loading)
+  const cssPromise = loadRemoteCSS();
+
+  try {
+    // @ts-ignore - Module federation import
+    const module = await import('rayburstApp/App');
+    console.log('[CLI] Successfully loaded remote app module:', module);
+
+    // Wait for CSS to finish loading
+    await cssPromise;
+
+    return module;
+  } catch (err: any) {
+    console.error('[CLI] Failed to load remote app:', err);
+    console.error('[CLI] Error details:', {
+      name: err.name,
+      message: err.message,
+      stack: err.stack
     });
+    throw new Error('Could not load Rayburst application. Make sure it is running on port 3000.');
+  }
 });
 
 function App() {

package/vite.config.ts

@@ -6,14 +6,13 @@ import { apiPlugin } from './vite-plugin-api.js';
 // Determine remote URL based on environment
 function getRemoteUrl(env: string): string {
   switch (env) {
-    case 'local':
-      return 'http://localhost:3000';
+    case 'production':
+      return 'https://www.rayburst.app';
     case 'staging':
       return 'https://dev.rayburst.app';
     case 'development':
-    case 'production':
     default:
-      return 'https://www.rayburst.app';
+      return 'http://localhost:3000';
   }
 }
 

package/dist/assets/_commonjsHelpers-B85MJLTf.js

@@ -1,5 +0,0 @@
-function getDefaultExportFromCjs (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-
-export { getDefaultExportFromCjs as g };

package/dist/assets/hostInit-CxHGTmfB.js

@@ -1,9 +0,0 @@
-import { _ as __vitePreload } from './preload-helper-Dea3Szod.js';
-
-const remoteEntryPromise = __vitePreload(() => import('./remoteEntry-lfoFMEF5.js'),true              ?[]:void 0);
-    // __tla only serves as a hack for vite-plugin-top-level-await.
-    Promise.resolve(remoteEntryPromise)
-      .then(remoteEntry => {
-        return Promise.resolve(remoteEntry.__tla)
-          .then(remoteEntry.init).catch(remoteEntry.init)
-      });