@shellui/cli 0.0.1 → 0.0.5

package/src/utils/config.js

@@ -0,0 +1,69 @@
+import path from 'path';
+import fs from 'fs';
+import pc from 'picocolors';
+import { loadTypeScriptConfig, loadJsonConfig } from './config-loaders.js';
+
+/**
+ * Merge Sentry config from env into the loaded config. Only adds sentry when
+ * SENTRY_DSN is set and Sentry is not disabled via SENTRY_ENABLED=false|0.
+ * @param {Object} config - Loaded config object
+ * @returns {Object} Config with sentry merged from env when enabled
+ */
+function mergeSentryFromEnv(config) {
+  const dsn = process.env.SENTRY_DSN;
+  const enabled = process.env.SENTRY_ENABLED;
+  if (!dsn || enabled === 'false' || enabled === '0') {
+    return config;
+  }
+  return {
+    ...config,
+    sentry: {
+      dsn,
+      ...(process.env.SENTRY_ENVIRONMENT && { environment: process.env.SENTRY_ENVIRONMENT }),
+      ...(process.env.SENTRY_RELEASE && { release: process.env.SENTRY_RELEASE }),
+    },
+  };
+}
+
+/**
+ * Load configuration from shellui.config.ts or shellui.config.json file
+ * Prefers TypeScript config over JSON config. Sentry is merged from env on load
+ * (SENTRY_DSN, SENTRY_ENABLED, SENTRY_ENVIRONMENT, SENTRY_RELEASE).
+ * @param {string} root - Root directory to search for config (default: current working directory)
+ * @returns {Promise<Object>} Configuration object
+ */
+export async function loadConfig(root = '.') {
+  const cwd = process.cwd();
+  const configDir = path.resolve(cwd, root);
+  const tsConfigPath = path.join(configDir, 'shellui.config.ts');
+  const jsonConfigPath = path.join(configDir, 'shellui.config.json');
+
+  let config = {};
+  let activeConfigPath = null;
+
+  // Prefer TypeScript config over JSON
+  if (fs.existsSync(tsConfigPath)) {
+    activeConfigPath = tsConfigPath;
+  } else if (fs.existsSync(jsonConfigPath)) {
+    activeConfigPath = jsonConfigPath;
+  }
+
+  if (activeConfigPath) {
+    try {
+      if (activeConfigPath === tsConfigPath) {
+        config = await loadTypeScriptConfig(activeConfigPath, configDir);
+      } else {
+        config = loadJsonConfig(activeConfigPath);
+      }
+    } catch (e) {
+      console.error(pc.red(`Failed to load config from ${activeConfigPath}: ${e.message}`));
+      if (e.stack) {
+        console.error(pc.red(e.stack));
+      }
+    }
+  } else {
+    console.log(pc.yellow(`No shellui.config.ts or shellui.config.json found, using defaults.`));
+  }
+
+  return mergeSentryFromEnv(config);
+}

package/src/utils/index.js

@@ -0,0 +1,15 @@
+/**
+ * Utilities index - Export all utility functions
+ *
+ * This is the main entry point for all utility functions.
+ * Import from './utils/index.js' to get all utilities.
+ */
+
+export { resolvePackagePath, resolveSdkEntry } from './package-path.js';
+export { loadConfig } from './config.js';
+export {
+  getCoreSrcPath,
+  createResolveAlias,
+  createPostCSSConfig,
+  createViteDefine,
+} from './vite.js';

package/src/utils/package-path.js

@@ -0,0 +1,54 @@
+import path from 'path';
+import fs from 'fs';
+import { fileURLToPath } from 'url';
+import { createRequire } from 'module';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const require = createRequire(import.meta.url);
+
+/**
+ * Resolve the path to a package in the monorepo or node_modules
+ * @param {string} packageName - The name of the package
+ * @returns {string} The absolute path to the package
+ */
+export function resolvePackagePath(packageName) {
+  try {
+    // Try to resolve the package using require.resolve
+    const packageJsonPath = require.resolve(`${packageName}/package.json`);
+    return path.dirname(packageJsonPath);
+  } catch (e) {
+    // Fallback: assume workspace structure or pnpm symlinked node_modules
+    // Go up from cli/src/utils/package-path.js -> cli/src/utils -> cli/src -> cli -> packages -> packageName
+    const packagesDir = path.resolve(__dirname, '../../../');
+    const resolved = path.join(packagesDir, packageName.replace('@shellui/', ''));
+    // Resolve symlinks to get the canonical path — pnpm uses symlinks that
+    // point to different .pnpm/ directories; Vite resolves real paths so we
+    // need to be consistent to avoid mismatched root vs input paths.
+    try {
+      return fs.realpathSync(resolved);
+    } catch {
+      return resolved;
+    }
+  }
+}
+
+/**
+ * Resolve the @shellui/sdk entry point for Vite alias.
+ * In workspace/monorepo mode, returns the source path (src/index.ts) so Vite
+ * can process TypeScript directly without a pre-build step.
+ * When installed from npm (no source), returns null so Vite uses normal
+ * node_modules resolution (dist/index.js via package exports).
+ * @returns {string|null} Absolute path to SDK source entry, or null to use normal resolution
+ */
+export function resolveSdkEntry() {
+  const sdkPackagePath = resolvePackagePath('@shellui/sdk');
+  const srcEntry = path.join(sdkPackagePath, 'src', 'index.ts');
+
+  // In workspace mode, source is available — alias to it for a no-build dev flow
+  if (fs.existsSync(srcEntry)) {
+    return srcEntry;
+  }
+
+  // When installed from npm only dist/ exists — let Vite resolve through package exports
+  return null;
+}

package/src/utils/service-worker-plugin.js

@@ -0,0 +1,151 @@
+import { build } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+import fs from 'fs';
+import { createResolveAlias } from './vite.js';
+
+/**
+ * Vite plugin to build and serve service worker in dev mode
+ */
+export function serviceWorkerDevPlugin(corePackagePath, coreSrcPath) {
+  let swCode = null;
+  let isBuilding = false;
+  let buildError = null;
+
+  const swPath = path.join(corePackagePath, 'src', 'service-worker', 'sw-dev.ts');
+
+  async function buildServiceWorker() {
+    if (isBuilding) {
+      return;
+    }
+
+    if (!fs.existsSync(swPath)) {
+      buildError = `Service worker source not found at: ${swPath}`;
+      console.warn(buildError);
+      return;
+    }
+
+    isBuilding = true;
+    buildError = null;
+    try {
+      // Use Vite's build API to properly resolve imports and bundle dependencies
+      // Use same root and resolve config as the main Vite server for consistent resolution
+      const result = await build({
+        root: coreSrcPath,
+        plugins: [react()],
+        resolve: {
+          alias: createResolveAlias(),
+        },
+        build: {
+          write: false,
+          sourcemap: false, // Disable source maps for service worker in dev mode
+          rollupOptions: {
+            input: swPath,
+            output: {
+              format: 'es',
+              entryFileNames: 'sw.js',
+            },
+          },
+        },
+      });
+
+      // Extract the built code from the output
+      // Vite build with write: false returns a RollupOutput object with output array
+      let outputChunk = null;
+
+      if (result && Array.isArray(result) && result.length > 0) {
+        // Handle array format (multiple outputs)
+        const buildOutput = result[0];
+        if (buildOutput && buildOutput.output && Array.isArray(buildOutput.output)) {
+          outputChunk = buildOutput.output.find((o) => o.type === 'chunk');
+        }
+      } else if (result && result.output && Array.isArray(result.output)) {
+        // Handle single output format
+        outputChunk = result.output.find((o) => o.type === 'chunk');
+      } else if (result && result.code) {
+        // Handle direct code format (unlikely but possible)
+        outputChunk = { code: result.code };
+      }
+
+      if (outputChunk && outputChunk.code) {
+        // Strip any source map references from the code
+        // This prevents browser devtools from trying to load non-existent source maps
+        swCode = outputChunk.code.replace(/\/\/# sourceMappingURL=.*$/gm, '');
+        console.log('✓ Dev service worker built successfully');
+      } else {
+        buildError = `Service worker build completed but no output chunk found. Result type: ${typeof result}, isArray: ${Array.isArray(result)}`;
+        console.warn(buildError);
+        console.warn('Build result structure:', JSON.stringify(Object.keys(result || {}), null, 2));
+      }
+    } catch (error) {
+      buildError = error.message;
+      console.error('Failed to build dev service worker:', error.message);
+      if (error.stack) {
+        console.error(error.stack);
+      }
+    } finally {
+      isBuilding = false;
+    }
+  }
+
+  return {
+    name: 'shellui-service-worker-dev',
+    async buildStart() {
+      // Try to build immediately when plugin loads
+      await buildServiceWorker();
+    },
+    configureServer(server) {
+      // Also build when server is ready (in case buildStart was too early)
+      server.httpServer?.once('listening', async () => {
+        if (!swCode && !buildError) {
+          await buildServiceWorker();
+        }
+      });
+
+      // Handle source map requests first - return empty source map instead of 404
+      // This prevents browser devtools from showing errors when source maps don't exist
+      // (e.g., from React DevTools or other browser extensions)
+      server.middlewares.use((req, res, next) => {
+        if (req.url && req.url.endsWith('.map')) {
+          // Return a valid but empty source map to satisfy devtools
+          // This prevents errors while still disabling source maps in dev mode
+          res.statusCode = 200;
+          res.setHeader('Content-Type', 'application/json');
+          res.end(
+            JSON.stringify({
+              version: 3,
+              sources: [],
+              names: [],
+              mappings: '',
+              file: req.url.replace('.map', ''),
+            }),
+          );
+          return;
+        }
+        next();
+      });
+
+      // Serve the service worker at /sw.js
+      server.middlewares.use(async (req, res, next) => {
+        if (req.url === '/sw.js' || req.url.startsWith('/sw.js?')) {
+          // Ensure it's built (try one more time if not ready)
+          if (!swCode && !buildError) {
+            await buildServiceWorker();
+          }
+
+          if (swCode) {
+            res.setHeader('Content-Type', 'application/javascript');
+            res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
+            res.end(swCode);
+          } else {
+            res.statusCode = 404;
+            const errorMsg = buildError || 'Service worker not available';
+            res.end(`// ${errorMsg}\n// Service worker build failed or not ready`);
+          }
+        } else {
+          next();
+        }
+      });
+    },
+  };
+}

package/src/utils/vite.js

@@ -0,0 +1,82 @@
+import path from 'path';
+import tailwindcssPlugin from '@tailwindcss/postcss';
+import autoprefixerPlugin from 'autoprefixer';
+import { resolvePackagePath, resolveSdkEntry } from './index.js';
+
+/**
+ * Get the path to the core package source directory
+ * @returns {string} Absolute path to core package src directory
+ */
+export function getCoreSrcPath() {
+  const corePackagePath = resolvePackagePath('@shellui/core');
+  return path.join(corePackagePath, 'src');
+}
+
+/**
+ * Create Vite resolve.alias configuration.
+ * Always sets '@' to core/src. Sets '@shellui/sdk' to source entry when in
+ * workspace mode; omits the alias when installed from npm so Vite resolves
+ * through the package's exports field (dist/index.js).
+ * @returns {Object} Vite resolve.alias object
+ */
+export function createResolveAlias() {
+  const corePackagePath = resolvePackagePath('@shellui/core');
+  const sdkEntry = resolveSdkEntry();
+
+  const alias = {
+    '@': path.join(corePackagePath, 'src'),
+  };
+
+  if (sdkEntry) {
+    alias['@shellui/sdk'] = sdkEntry;
+  }
+
+  return alias;
+}
+
+/**
+ * Create PostCSS configuration for Vite.
+ * Provides Tailwind CSS v4 and autoprefixer plugins programmatically so the
+ * CLI owns all CSS build dependencies — core doesn't need to ship postcss.config
+ * or have CSS tooling in its own dependencies.
+ * @returns {Object} PostCSS configuration for Vite's css.postcss option
+ */
+export function createPostCSSConfig() {
+  return {
+    plugins: [tailwindcssPlugin(), autoprefixerPlugin()],
+  };
+}
+
+/**
+ * Create Vite define configuration for ShellUI config injection
+ * App config is in __SHELLUI_CONFIG__; Sentry is in three separate globals
+ * (__SHELLUI_SENTRY_DSN__, __SHELLUI_SENTRY_ENVIRONMENT__, __SHELLUI_SENTRY_RELEASE__).
+ * @param {Object} config - Configuration object
+ * @returns {Object} Vite define configuration
+ */
+export function createViteDefine(config) {
+  // Ensure config is serializable; omit sentry so it is only in the three Sentry globals
+  const serializableConfig = JSON.parse(JSON.stringify(config));
+  delete serializableConfig.sentry;
+
+  // Verify navigation is preserved after serialization
+  if (config.navigation && !serializableConfig.navigation) {
+    console.warn('Warning: Navigation was lost during serialization. This should not happen.');
+  }
+
+  const sentry = config?.sentry;
+  // Double-stringify: Vite's define inserts the value as-is into the code
+  // If we pass '{"title":"shellui"}', Vite inserts it as: const x = {"title":"shellui"}; (invalid - object literal)
+  // If we pass '"{\"title\":\"shellui\"}"', Vite inserts it as: const x = "{\"title\":\"shellui\"}"; (valid - string literal)
+  // So we need to double-stringify to ensure it's inserted as a string
+  const configString = JSON.stringify(JSON.stringify(serializableConfig));
+
+  return {
+    __SHELLUI_CONFIG__: configString,
+    __SHELLUI_SENTRY_DSN__: sentry?.dsn ? JSON.stringify(sentry.dsn) : 'undefined',
+    __SHELLUI_SENTRY_ENVIRONMENT__: sentry?.environment
+      ? JSON.stringify(sentry.environment)
+      : 'undefined',
+    __SHELLUI_SENTRY_RELEASE__: sentry?.release ? JSON.stringify(sentry.release) : 'undefined',
+  };
+}

package/src/app.jsx

@@ -1,31 +0,0 @@
-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/index.html

@@ -1,12 +0,0 @@
-<!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>