@shellui/cli 0.0.1 → 0.0.5

package/README.md

@@ -1,80 +1,87 @@
-# ShellUI
+# @shellui/cli
 
-> A lightweight microfrontend shell to ship apps faster.
-
-ShellUI is a CLI tool that spins up a React-based microfrontend shell. It is powered by Vite and designed to be easily configurable.
-
-## Features
-
-- 🚀 **Fast**: Built on top of Vite for instant server start.
-- ⚛️ **React-based**: The shell is a React application.
-- ⚙️ **Configurable**: Loads configuration from `shellui.json` in your project root.
-- 🔌 **Injectable Config**: Configuration is automatically injected into the shell application.
+ShellUI CLI - Command-line tool for ShellUI
 
 ## Installation
 
-Install ShellUI globally or locally:
-
 ```bash
-npm install -g shellui
+npm install -g @shellui/cli
 ```
 
-Or install it as a dev dependency in your project:
+Or install as a dev dependency:
 
 ```bash
-npm install --save-dev shellui
+npm install --save-dev @shellui/cli
 ```
 
 ## Usage
 
-After installation, you can use the `shellui` command directly:
-
 ```bash
-npx shellui start [path/to/project]
+shellui start [path/to/project]
+shellui build [path/to/project]
 ```
 
-Or if installed globally:
+### Commands
 
-```bash
-shellui start [path/to/project]
-```
+- **start** - Start the ShellUI development server
 
-You can also use it via npm scripts in your `package.json`:
+  ```bash
+  shellui start
+  shellui start ./my-project
+  ```
 
-```json
-{
-  "scripts": {
-    "start": "shellui start",
-    "build": "shellui build"
-  }
-}
-```
+- **build** - Build the ShellUI application for production
+  ```bash
+  shellui build
+  shellui build ./my-project
+  ```
 
-By default, it looks for configuration in the current directory.
+## Project Structure
 
-## Configuration
+The CLI is organized for maintainability with a clear separation of concerns:
 
-ShellUI looks for a `shellui.json` file in your project root.
+```
+src/
+├── cli.js              # Main CLI orchestrator
+├── commands/           # All commands in separate files
+│   ├── index.js       # Command registry
+│   ├── start.js       # Start command implementation
+│   └── build.js       # Build command implementation
+└── utils/             # Utility functions
+    ├── index.js       # Utilities export
+    ├── config.js      # Configuration loading
+    └── vite.js        # Vite-specific utilities
+```
+
+## Development
+
+### Adding a New Command
 
-**Example `shellui.json`:**
+1. Create a new file in `src/commands/` (e.g., `new-command.js`)
+2. Export a command function:
 
-```json
-{
-  "port": 4000
+```javascript
+export async function newCommandCommand(args) {
+  // Command implementation
 }
 ```
 
-- **port**: The port number to start the server on (default: `3000`).
+3. Register it in `src/cli.js`:
 
-## Development
+```javascript
+import { newCommandCommand } from './commands/index.js';
 
-This repository contains the core logic for the shell.
+cli.command('new-command [args]', 'Description').action(newCommandCommand);
+```
+
+4. Export it from `src/commands/index.js`:
 
-- `bin/shellui.js`: The CLI entry point.
-- `src/cli.js`: Main CLI logic using `cac` and `vite`.
-- `src/app.jsx`: The shell's React application entry point.
+```javascript
+export { newCommandCommand } from './new-command.js';
+```
+
+See `src/commands/README.md` for more details.
 
 ## License
 
 MIT
-

package/bin/shellui.js

@@ -1,4 +1,3 @@
 #!/usr/bin/env node
 
 import '../src/cli.js';
-

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@shellui/cli",
-  "version": "0.0.1",
-  "description": "ShellUI - a lightweight microfrontend shell to ship apps faster",
-  "main": "index.js",
+  "version": "0.0.5",
+  "description": "ShellUI CLI - Command-line tool for ShellUI",
+  "main": "src/cli.js",
   "type": "module",
   "bin": {
     "shellui": "./bin/shellui.js"
@@ -13,27 +13,34 @@
     "README.md",
     "package.json"
   ],
-  "scripts": {
-    "start": "node bin/shellui.js start",
-    "build": "node bin/shellui.js build",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
   "keywords": [
-    "microfrontend",
-    "shell",
+    "shellui",
     "cli",
-    "vite",
-    "react",
-    "frontend"
+    "microfrontend",
+    "vite"
   ],
   "author": "ShellUI",
   "license": "MIT",
   "dependencies": {
+    "@tailwindcss/postcss": "^4.1.18",
     "@vitejs/plugin-react": "^5.1.2",
+    "autoprefixer": "^10.4.23",
     "cac": "^6.7.14",
     "picocolors": "^1.1.1",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
-    "vite": "^7.3.0"
+    "tsx": "^4.21.0",
+    "vite": "7.3.1",
+    "workbox-build": "^7.1.0",
+    "@shellui/core": "0.0.5"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "vitest": "^4.0.16"
+  },
+  "scripts": {
+    "build": "echo 'CLI build complete'",
+    "test": "node scripts/test.js",
+    "test:watch": "vitest"
   }
-}
+}

package/src/cli.js

@@ -1,127 +1,14 @@
 import { cac } from 'cac';
-import { createServer, build } from 'vite';
-import react from '@vitejs/plugin-react';
-import path from 'path';
-import fs from 'fs';
-import { fileURLToPath } from 'url';
-import pc from 'picocolors';
+import { startCommand, buildCommand } from './commands/index.js';
 
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const cli = cac('shellui');
 
-cli
-  .command('start [root]', 'Start the shellui server')
-  .action(async (root = '.') => {
-    const cwd = process.cwd();
-    const configDir = path.resolve(cwd, root);
-    const configPath = path.join(configDir, 'shellui.json');
-    const legacyConfigPath = path.join(configDir, 'shellioj.json');
+// Register commands
+cli.command('start [root]', 'Start the shellui server').action(startCommand);
 
-    console.log(pc.blue(`Starting ShellUI...`));
-    
-    let config = {};
-    let activeConfigPath = null;
-
-    if (fs.existsSync(configPath)) {
-        activeConfigPath = configPath;
-    } else if (fs.existsSync(legacyConfigPath)) {
-        activeConfigPath = legacyConfigPath;
-    }
-
-    if (activeConfigPath) {
-      try {
-        const configFile = fs.readFileSync(activeConfigPath, 'utf-8');
-        config = JSON.parse(configFile);
-        console.log(pc.green(`Loaded config from ${activeConfigPath}`));
-      } catch (e) {
-        console.error(pc.red(`Failed to load config: ${e.message}`));
-      }
-    } else {
-      console.log(pc.yellow(`No shellui.json (or shellioj.json) found, using defaults.`));
-    }
-
-    // Path to the index.html inside the package
-    const packageRoot = path.resolve(__dirname, '..');
-    const templateRoot = path.join(__dirname); // src folder
-
-    try {
-      const server = await createServer({
-        root: templateRoot, // Serve from src/ where index.html is
-        plugins: [react()],
-        define: {
-          '__SHELLUI_CONFIG__': JSON.stringify(config),
-        },
-        server: {
-          port: config.port || 3000,
-          open: true,
-          fs: {
-            allow: [packageRoot, cwd]
-          }
-        },
-      });
-
-      await server.listen();
-      server.printUrls();
-    } catch (e) {
-      console.error(pc.red(`Error starting server: ${e.message}`));
-      process.exit(1);
-    }
-  });
-
-cli
-  .command('build [root]', 'Build the shellui application')
-  .action(async (root = '.') => {
-    const cwd = process.cwd();
-    const configDir = path.resolve(cwd, root);
-    const configPath = path.join(configDir, 'shellui.json');
-    const legacyConfigPath = path.join(configDir, 'shellioj.json');
-
-    console.log(pc.blue(`Building ShellUI...`));
-    
-    let config = {};
-    let activeConfigPath = null;
-
-    if (fs.existsSync(configPath)) {
-        activeConfigPath = configPath;
-    } else if (fs.existsSync(legacyConfigPath)) {
-        activeConfigPath = legacyConfigPath;
-    }
-
-    if (activeConfigPath) {
-      try {
-        const configFile = fs.readFileSync(activeConfigPath, 'utf-8');
-        config = JSON.parse(configFile);
-        console.log(pc.green(`Loaded config from ${activeConfigPath}`));
-      } catch (e) {
-        console.error(pc.red(`Failed to load config: ${e.message}`));
-      }
-    } else {
-      console.log(pc.yellow(`No shellui.json (or shellioj.json) found, using defaults.`));
-    }
-
-    // Path to the index.html inside the package
-    const templateRoot = path.join(__dirname); // src folder
-
-    try {
-      await build({
-        root: templateRoot, // Serve from src/ where index.html is
-        plugins: [react()],
-        define: {
-          '__SHELLUI_CONFIG__': JSON.stringify(config),
-        },
-        build: {
-          outDir: path.resolve(cwd, 'dist'),
-          emptyOutDir: true,
-        }
-      });
-      console.log(pc.green('Build complete!'));
-    } catch (e) {
-      console.error(pc.red(`Error building: ${e.message}`));
-      process.exit(1);
-    }
-  });
+cli.command('build [root]', 'Build the shellui application').action(buildCommand);
 
+// Setup CLI metadata
 cli.help();
 cli.version('0.0.1');
 cli.parse();
-

package/src/commands/README.md

@@ -0,0 +1,40 @@
+# CLI Commands
+
+This directory contains all CLI commands, each in its own file for better maintainability.
+
+## Structure
+
+Each command is a separate file that exports a command function:
+
+- `start.js` - Start the ShellUI development server
+- `build.js` - Build the ShellUI application for production
+
+## Adding a New Command
+
+1. Create a new file in this directory (e.g., `new-command.js`)
+2. Export a function that implements the command logic:
+
+```javascript
+export async function newCommandCommand(args) {
+  // Command implementation
+}
+```
+
+3. Register it in `cli.js`:
+
+```javascript
+import { newCommandCommand } from './commands/index.js';
+
+cli.command('new-command [args]', 'Description of the command').action(newCommandCommand);
+```
+
+4. Export it from `commands/index.js`:
+
+```javascript
+export { newCommandCommand } from './new-command.js';
+```
+
+## Available Commands
+
+- **start** - Starts the development server
+- **build** - Builds the application for production

package/src/commands/build.js

@@ -0,0 +1,200 @@
+import { build } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+import fs from 'fs';
+import pc from 'picocolors';
+import { injectManifest } from 'workbox-build';
+import {
+  loadConfig,
+  getCoreSrcPath,
+  createResolveAlias,
+  createPostCSSConfig,
+  createViteDefine,
+  resolvePackagePath,
+} from '../utils/index.js';
+
+/**
+ * Recursively copy a directory
+ * @param {string} src - Source directory
+ * @param {string} dest - Destination directory
+ */
+function copyDir(src, dest) {
+  if (!fs.existsSync(src)) {
+    return;
+  }
+
+  if (!fs.existsSync(dest)) {
+    fs.mkdirSync(dest, { recursive: true });
+  }
+
+  const entries = fs.readdirSync(src, { withFileTypes: true });
+
+  for (const entry of entries) {
+    const srcPath = path.join(src, entry.name);
+    const destPath = path.join(dest, entry.name);
+
+    if (entry.isDirectory()) {
+      copyDir(srcPath, destPath);
+    } else {
+      fs.copyFileSync(srcPath, destPath);
+    }
+  }
+}
+
+/**
+ * Build command - Builds the ShellUI application for production
+ * @param {string} root - Root directory (default: '.')
+ */
+export async function buildCommand(root = '.') {
+  const cwd = process.cwd();
+
+  console.log(pc.blue(`Building ShellUI...`));
+
+  // Set environment variable to indicate this is a build
+  // This allows shellui.config.ts to detect build mode and generate build ID
+  process.env.SHELLUI_BUILD = 'true';
+  process.env.NODE_ENV = 'production';
+
+  // Load configuration
+  const config = await loadConfig(root);
+
+  // Log config summary for debugging
+  console.log(pc.blue(`Config loaded:`));
+  console.log(pc.gray(`  - Title: ${config.title || '(not set)'}`));
+  console.log(pc.gray(`  - Navigation items: ${config.navigation?.length || 0}`));
+  console.log(pc.gray(`  - Layout: ${config.layout || 'sidebar'}`));
+
+  // Verify config is serializable
+  try {
+    const testSerialize = JSON.parse(JSON.stringify(config));
+    console.log(pc.green(`  ✓ Config is serializable`));
+  } catch (e) {
+    console.error(pc.red(`  ✗ Config is not serializable: ${e.message}`));
+    throw e;
+  }
+
+  // Get core package paths
+  const corePackagePath = resolvePackagePath('@shellui/core');
+  const coreSrcPath = getCoreSrcPath();
+  const resolveAlias = createResolveAlias();
+  const postcssConfig = createPostCSSConfig();
+
+  try {
+    // Build main app
+    await build({
+      root: coreSrcPath,
+      plugins: [react()],
+      define: createViteDefine(config),
+      resolve: {
+        alias: resolveAlias,
+      },
+      css: {
+        postcss: postcssConfig,
+      },
+      build: {
+        outDir: path.resolve(cwd, 'dist'),
+        emptyOutDir: true,
+        sourcemap: true,
+        // Ensure every build generates unique filenames with content hashes
+        // Content hash changes when file content changes, ensuring cache busting
+        rollupOptions: {
+          input: {
+            main: path.join(coreSrcPath, 'index.html'),
+          },
+          output: {
+            // Use content hash in filenames for cache busting
+            // [hash] is based on file content, so same content = same hash
+            // Different content = different hash, ensuring unique filenames per build when content changes
+            entryFileNames: 'assets/[name]-[hash].js',
+            chunkFileNames: 'assets/[name]-[hash].js',
+            assetFileNames: 'assets/[name]-[hash].[ext]',
+          },
+        },
+      },
+    });
+
+    // Build service worker with Vite first
+    console.log(pc.blue('Building service worker...'));
+    const swInputPath = path.join(corePackagePath, 'src', 'service-worker', 'sw.ts');
+    const distPath = path.resolve(cwd, 'dist');
+    const swTempPath = path.join(distPath, 'sw-temp.js');
+
+    // Build service worker TypeScript to JavaScript
+    await build({
+      root: coreSrcPath,
+      define: createViteDefine(config),
+      resolve: {
+        alias: resolveAlias,
+      },
+      build: {
+        outDir: distPath,
+        emptyOutDir: false,
+        sourcemap: true,
+        rollupOptions: {
+          input: swInputPath,
+          output: {
+            dir: distPath,
+            entryFileNames: 'sw-temp.js',
+            format: 'es',
+          },
+        },
+        write: true,
+      },
+    });
+
+    // Use workbox-build to inject manifest
+    const { count, size, warnings } = await injectManifest({
+      swSrc: swTempPath,
+      swDest: path.join(distPath, 'sw.js'),
+      globDirectory: distPath,
+      globPatterns: ['**/*.{js,css,html,svg,png,jpg,jpeg,gif,webp,woff,woff2,ttf,eot,ico}'],
+      // Don't precache the service worker itself or source maps
+      globIgnores: ['sw.js', 'sw-temp.js', '**/*.map', '**/node_modules/**'],
+      // Maximum file size to precache (5MB)
+      maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
+    });
+
+    // Remove temporary file
+    if (fs.existsSync(swTempPath)) {
+      fs.unlinkSync(swTempPath);
+    }
+
+    if (warnings.length > 0) {
+      warnings.forEach((warning) => console.warn(pc.yellow(`Warning: ${warning}`)));
+    }
+
+    console.log(
+      pc.green(
+        `Service worker generated: ${count} files precached (${(size / 1024).toFixed(2)} KB)`,
+      ),
+    );
+
+    // Copy static folder contents to dist if it exists
+    // This ensures icons are served from the same path in dev and prod
+    const staticPath = path.resolve(cwd, 'static');
+
+    if (fs.existsSync(staticPath)) {
+      console.log(pc.blue('Copying static assets...'));
+      // Copy contents of static directly to dist (not dist/static)
+      // This way /icons/... works in both dev and prod
+      copyDir(staticPath, distPath);
+      console.log(pc.green('Static assets copied!'));
+    }
+
+    // Copy index.html to 404.html for SPA routing support
+    // This allows hosting providers (like Netlify, Vercel) to serve index.html for all routes
+    const indexPath = path.join(distPath, 'index.html');
+    const notFoundPath = path.join(distPath, '404.html');
+
+    if (fs.existsSync(indexPath)) {
+      console.log(pc.blue('Creating 404.html for SPA routing...'));
+      fs.copyFileSync(indexPath, notFoundPath);
+      console.log(pc.green('404.html created!'));
+    }
+
+    console.log(pc.green('Build complete!'));
+  } catch (e) {
+    console.error(pc.red(`Error building: ${e.message}`));
+    process.exit(1);
+  }
+}

package/src/commands/index.js

@@ -0,0 +1,9 @@
+/**
+ * Commands index - Export all available commands
+ *
+ * This file serves as a central registry of all CLI commands.
+ * Each command is in its own file for better maintainability.
+ */
+
+export { startCommand } from './start.js';
+export { buildCommand } from './build.js';