@shellui/cli 0.0.1

package/README.md

@@ -0,0 +1,80 @@
+# ShellUI
+
+> 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.
+
+## Installation
+
+Install ShellUI globally or locally:
+
+```bash
+npm install -g shellui
+```
+
+Or install it as a dev dependency in your project:
+
+```bash
+npm install --save-dev shellui
+```
+
+## Usage
+
+After installation, you can use the `shellui` command directly:
+
+```bash
+npx shellui start [path/to/project]
+```
+
+Or if installed globally:
+
+```bash
+shellui start [path/to/project]
+```
+
+You can also use it via npm scripts in your `package.json`:
+
+```json
+{
+  "scripts": {
+    "start": "shellui start",
+    "build": "shellui build"
+  }
+}
+```
+
+By default, it looks for configuration in the current directory.
+
+## Configuration
+
+ShellUI looks for a `shellui.json` file in your project root.
+
+**Example `shellui.json`:**
+
+```json
+{
+  "port": 4000
+}
+```
+
+- **port**: The port number to start the server on (default: `3000`).
+
+## Development
+
+This repository contains the core logic for the shell.
+
+- `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.
+
+## License
+
+MIT
+

package/bin/shellui.js

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

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@shellui/cli",
+  "version": "0.0.1",
+  "description": "ShellUI - a lightweight microfrontend shell to ship apps faster",
+  "main": "index.js",
+  "type": "module",
+  "bin": {
+    "shellui": "./bin/shellui.js"
+  },
+  "files": [
+    "bin",
+    "src",
+    "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",
+    "cli",
+    "vite",
+    "react",
+    "frontend"
+  ],
+  "author": "ShellUI",
+  "license": "MIT",
+  "dependencies": {
+    "@vitejs/plugin-react": "^5.1.2",
+    "cac": "^6.7.14",
+    "picocolors": "^1.1.1",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "vite": "^7.3.0"
+  }
+}

package/src/app.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+
+const App = () => {
+  // __SHELLUI_CONFIG__ is replaced by Vite at build time
+  const config = typeof __SHELLUI_CONFIG__ !== 'undefined' ? __SHELLUI_CONFIG__ : {};
+
+  return (
+    <div style={{ fontFamily: 'system-ui, sans-serif', padding: '2rem' }}>
+      <h1>ShellUI</h1>
+      <p>Welcome to ShellUI</p>
+      
+      <div style={{ 
+        marginTop: '2rem', 
+        padding: '1rem', 
+        background: '#f5f5f5', 
+        borderRadius: '8px' 
+      }}>
+        <h2>Configuration</h2>
+        <pre>{JSON.stringify(config, null, 2)}</pre>
+      </div>
+    </div>
+  );
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+

package/src/cli.js

@@ -0,0 +1,127 @@
+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';
+
+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');
+
+    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.help();
+cli.version('0.0.1');
+cli.parse();
+

package/src/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ShellUI</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/app.jsx"></script>
+  </body>
+</html>