slicejs-cli 3.4.0 → 3.5.0

package/commands/init/init.js

@@ -3,12 +3,10 @@ import path from 'path';
 import { fileURLToPath } from 'url';
 import ora from 'ora';
 import Print from '../Print.js';
-import { getProjectRoot, getApiPath, getSrcPath } from '../utils/PathHelper.js';
+import { getProjectRoot, getApiPath, getSrcPath, getPath } from '../utils/PathHelper.js';
 import { execSync } from 'child_process';
 
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-
-// Importar la clase ComponentRegistry del getComponent
+// Import ComponentRegistry class from getComponent
 import { ComponentRegistry } from '../getComponent/getComponent.js';
 
 // Visual components used by the App Shell + MultiRoute starter project.
@@ -23,6 +21,15 @@ const STARTER_VISUAL_COMPONENTS = [
    'Route'
 ];
 
+// Service components are now also pulled from the registry on init (instead of
+// being vendored in the framework package), so Visual and Service share a single
+// source of truth. Newcomers add more on demand with `slice get <Name>`.
+const STARTER_SERVICE_COMPONENTS = [
+   'FetchManager',
+   'IndexedDbManager',
+   'LocalStorageManager'
+];
+
 export default async function initializeProject(projectType) {
     try {
         const projectRoot = getProjectRoot(import.meta.url);
@@ -35,7 +42,7 @@ export default async function initializeProject(projectType) {
         try {
             const latest = execSync('npm view slicejs-web-framework version', { cwd: projectRoot }).toString().trim();
             latestVersion = latest;
-            const installedPkgPath = path.join(projectRoot, 'node_modules', 'slicejs-web-framework', 'package.json');
+            const installedPkgPath = getPath(import.meta.url, 'node_modules', 'slicejs-web-framework', 'package.json');
             let installed = null;
             if (await fs.pathExists(installedPkgPath)) {
                 const pkg = await fs.readJson(installedPkgPath);
@@ -44,9 +51,11 @@ export default async function initializeProject(projectType) {
             if (installed !== latest) {
                 execSync(`npm install slicejs-web-framework@${latest} --save`, { cwd: projectRoot, stdio: 'inherit' });
             }
-            sliceBaseDir = path.join(projectRoot, 'node_modules', 'slicejs-web-framework');
+            sliceBaseDir = getPath(import.meta.url, 'node_modules', 'slicejs-web-framework');
             fwSpinner.succeed(`slicejs-web-framework@${latest} ready`);
         } catch (err) {
+            // Fallback uses __dirname-style path because it looks for a local development copy,
+            // not a project-relative path — npm install failed, so we fall back to monorepo sibling.
             const fallback = path.join(path.dirname(fileURLToPath(import.meta.url)), '../../../slicejs-web-framework');
             if (await fs.pathExists(fallback)) {
                 sliceBaseDir = fallback;
@@ -58,6 +67,8 @@ export default async function initializeProject(projectType) {
             }
         }
 
+        // These derive from sliceBaseDir (which comes from npm install or fallback),
+        // so they're already dynamic — no PathHelper needed.
         const apiDir = path.join(sliceBaseDir, 'api');
         const srcDir = path.join(sliceBaseDir, 'src');
 
@@ -69,7 +80,7 @@ export default async function initializeProject(projectType) {
             return;
         }
 
-        // 1. COPIAR LA CARPETA API (mantener lógica original)
+        // 1. COPY API FOLDER (keep original logic)
         const apiSpinner = ora('Copying API structure...').start();
         try {
             if (!fs.existsSync(apiDir)) throw new Error(`API folder not found: ${apiDir}`);
@@ -81,15 +92,15 @@ export default async function initializeProject(projectType) {
             return;
         }
 
-        // 2. CREAR ESTRUCTURA SRC BÁSICA (sin copiar componentes Visual)
+        // 2. CREATE BASIC SRC STRUCTURE (without copying Visual components)
         const srcSpinner = ora('Creating src structure...').start();
         try {
             if (!fs.existsSync(srcDir)) throw new Error(`src folder not found: ${srcDir}`);
 
-            // Copiar solo los archivos base de src, excluyendo Components/Visual
+            // Copy only base src files, excluding Components/Visual
             await fs.ensureDir(destinationSrc);
 
-            // Copiar archivos y carpetas de src excepto Components/Visual
+            // Copy src files and folders except Components/Visual
             const srcItems = await fs.readdir(srcDir);
 
             for (const item of srcItems) {
@@ -99,7 +110,7 @@ export default async function initializeProject(projectType) {
 
                 if (stat.isDirectory()) {
                     if (item === 'Components') {
-                        // Crear estructura de Components pero sin copiar Visual
+                        // Create Components structure but without copying Visual or Service
                         await fs.ensureDir(destItemPath);
 
                         const componentItems = await fs.readdir(srcItemPath);
@@ -107,11 +118,11 @@ export default async function initializeProject(projectType) {
                             const componentItemPath = path.join(srcItemPath, componentItem);
                             const destComponentItemPath = path.join(destItemPath, componentItem);
 
-                            if (componentItem !== 'Visual') {
-                                // Copy Service and other component types
+                            if (componentItem !== 'Visual' && componentItem !== 'Service') {
+                                // Copy AppComponents and other template types from the framework
                                 await fs.copy(componentItemPath, destComponentItemPath, { recursive: true });
                             } else {
-                                // Only create empty Visual directory
+                                // Visual and Service are installed from the registry below
                                 await fs.ensureDir(destComponentItemPath);
                             }
                         }
@@ -132,7 +143,7 @@ export default async function initializeProject(projectType) {
             return;
         }
 
-        // 3. DESCARGAR TODOS LOS COMPONENTES VISUAL DESDE EL REPOSITORIO OFICIAL
+        // 3. DOWNLOAD ALL VISUAL COMPONENTS FROM OFFICIAL REPOSITORY
         const componentsSpinner = ora('Loading component registry...').start();
         try {
             const registry = new ComponentRegistry();
@@ -148,7 +159,7 @@ export default async function initializeProject(projectType) {
                 const results = await registry.installMultipleComponents(
                     allVisualComponents,
                     'Visual',
-                    true // force = true para instalación inicial
+                    true // force = true for initial installation
                 );
 
                 const successful = results.filter(r => r.success).length;
@@ -174,11 +185,47 @@ export default async function initializeProject(projectType) {
             Print.info('You can add them later using "slice get <component-name>"');
         }
 
-        // 4. CONFIGURAR SCRIPTS EN package.json DEL PROYECTO
+        // 3b. DOWNLOAD STARTER SERVICE COMPONENTS FROM OFFICIAL REPOSITORY
+        const serviceSpinner = ora('Installing starter Service components...').start();
+        try {
+            const registry = new ComponentRegistry();
+            await registry.loadRegistry();
+
+            if (STARTER_SERVICE_COMPONENTS.length > 0) {
+                Print.info(`Installing ${STARTER_SERVICE_COMPONENTS.length} starter Service components: ${STARTER_SERVICE_COMPONENTS.join(', ')}`);
+                serviceSpinner.text = `Installing ${STARTER_SERVICE_COMPONENTS.length} starter Service components...`;
+
+                const results = await registry.installMultipleComponents(
+                    STARTER_SERVICE_COMPONENTS,
+                    'Service',
+                    true // force = true for initial installation
+                );
+
+                const successful = results.filter(r => r.success).length;
+                const failed = results.filter(r => !r.success).length;
+
+                if (successful > 0 && failed === 0) {
+                    serviceSpinner.succeed(`All ${successful} Service components installed successfully`);
+                } else if (successful > 0) {
+                    serviceSpinner.warn(`${successful} Service components installed, ${failed} failed`);
+                    Print.info('You can install failed components later using "slice get <component-name>"');
+                } else {
+                    serviceSpinner.fail('Failed to install Service components');
+                }
+            } else {
+                serviceSpinner.succeed('No starter Service components to install');
+            }
+        } catch (error) {
+            serviceSpinner.fail('Could not download Service components from official repository');
+            Print.error(`Repository error: ${error.message}`);
+            Print.info('You can add them later using "slice get <component-name>"');
+        }
+
+        // 4. CONFIGURE SCRIPTS IN PROJECT package.json
         const pkgSpinner = ora('Configuring npm scripts...').start();
         try {
             const projectRoot = getProjectRoot(import.meta.url);
-            const pkgPath = path.join(projectRoot, 'package.json');
+            const pkgPath = getPath(import.meta.url, 'package.json');
 
             let pkg;
             if (await fs.pathExists(pkgPath)) {
@@ -200,7 +247,7 @@ export default async function initializeProject(projectType) {
             pkg.scripts['dev'] = 'slice dev';
             pkg.scripts['start'] = 'slice start';
 
-            // Gestión de componentes
+            // Component management
             pkg.scripts['component:create'] = 'slice component create';
             pkg.scripts['component:list'] = 'slice component list';
             pkg.scripts['component:delete'] = 'slice component delete';
@@ -215,7 +262,7 @@ export default async function initializeProject(projectType) {
             pkg.scripts['slice:update'] = 'slice update';
             pkg.scripts['slice:types'] = 'slice types generate';
 
-            // Legacy (compatibilidad)
+            // Legacy (compatibility)
             pkg.scripts['slice:init'] = 'slice init';
             pkg.scripts['slice:start'] = 'slice start';
             pkg.scripts['slice:dev'] = 'slice dev';
@@ -227,7 +274,7 @@ export default async function initializeProject(projectType) {
             pkg.scripts['slice:sync'] = 'slice sync';
             pkg.scripts['run'] = 'slice dev';
 
-            // Configuración de módulo
+            // Module configuration
             pkg.type = 'module';
             pkg.engines = pkg.engines || { node: '>=20.0.0' };
 
@@ -239,7 +286,7 @@ export default async function initializeProject(projectType) {
             await fs.writeFile(pkgPath, JSON.stringify(pkg, null, 2), 'utf8');
             pkgSpinner.succeed('npm scripts configured successfully');
 
-            console.log('\n🎯 New recommended commands:');
+            Print.title('New recommended commands:');
             console.log('  npm run dev            - Start development server');
             console.log('  npm run get            - Install components');
             console.log('  npm run browse         - Browse components');
@@ -248,9 +295,11 @@ export default async function initializeProject(projectType) {
         Print.error(error.message);
         }
 
-        Print.success('Project initialized successfully.');
+        const projectName = path.basename(process.cwd());
+        Print.success(`Project initialized successfully in "${projectName}/"`);
         Print.newLine();
-        Print.info('Next steps:');
+        Print.title('Next steps:');
+        console.log(`  cd ${projectName}`);
         console.log('  slice browse          - View available components');
         console.log('  slice get Button      - Install specific components');
         console.log('  slice sync            - Update all components to latest versions');
@@ -260,6 +309,8 @@ export default async function initializeProject(projectType) {
     }
 }
 
-// NOTE: `slice init` now installs only STARTER_VISUAL_COMPONENTS (see top of file).
+// NOTE: `slice init` installs only STARTER_VISUAL_COMPONENTS and
+// STARTER_SERVICE_COMPONENTS (see top of file); both Visual and Service are pulled
+// from the registry rather than vendored in the framework package.
 // To install every registry component instead, iterate
-// `Object.keys(registry.getAvailableComponents('Visual'))`.
+// `Object.keys(registry.getAvailableComponents('Visual'))` (and likewise 'Service').

package/commands/listComponents/listComponents.js

@@ -1,16 +1,13 @@
 import fs from 'fs';
 import path from 'path';
-import { fileURLToPath } from 'url';
 import Table from 'cli-table3';
 import chalk from 'chalk';
 import Print from '../Print.js';
 import { getSrcPath, getComponentsJsPath, getConfigPath } from '../utils/PathHelper.js';
 
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-
 /**
- * Carga la configuración desde sliceConfig.json
- * @returns {object} - Objeto de configuración
+ * Loads configuration from sliceConfig.json
+ * @returns {object} - Configuration object
  */
 const loadConfig = () => {
     try {
@@ -30,9 +27,9 @@ const loadConfig = () => {
 };
 
 /**
- * Lista los archivos en una carpeta dada, filtrando solo los archivos .js
- * @param {string} folderPath - Ruta de la carpeta a leer
- * @returns {string[]} - Lista de archivos encontrados
+ * Lists files in a given folder, filtering only .js files
+ * @param {string} folderPath - Path of the folder to read
+ * @returns {string[]} - List of found files
  */
 const listComponents = (folderPath) => {
     try {
@@ -48,7 +45,7 @@ const listComponents = (folderPath) => {
 };
 
 /**
- * Cuenta archivos en un directorio de componente
+ * Counts files in a component directory
  */
 const countComponentFiles = (componentPath) => {
     try {
@@ -61,14 +58,14 @@ const countComponentFiles = (componentPath) => {
 };
 
 /**
- * Obtiene los componentes dinámicamente desde sliceConfig.json
- * @returns {object} - Mapeo de componentes con su categoría
+ * Gets components dynamically from sliceConfig.json
+ * @returns {object} - Component mapping with their category
  */
 const getComponents = () => {
     const config = loadConfig();
     if (!config) return {};
 
-    const folderSuffix = 'src'; // Siempre usar 'src' para desarrollo
+    const folderSuffix = 'src'; // Always use 'src' for development
     const componentPaths = config.paths?.components || {};
     let allComponents = new Map();
 
@@ -91,7 +88,7 @@ const getComponents = () => {
 
 function listComponentsReal() {
     try {
-        // Obtener componentes dinámicamente
+        // Get components dynamically
         const components = getComponents();
 
         if (Object.keys(components).length === 0) {
@@ -100,7 +97,7 @@ function listComponentsReal() {
             return;
         }
 
-        // Crear tabla con cli-table3
+        // Create table with cli-table3
         const table = new Table({
             head: [
                 chalk.cyan.bold('Component'),
@@ -114,7 +111,7 @@ function listComponentsReal() {
             }
         });
 
-        // Agrupar por categoría para mejor visualización
+        // Group by category for better visualization
         const byCategory = {};
         Object.entries(components).forEach(([name, data]) => {
             if (!byCategory[data.category]) {
@@ -123,18 +120,18 @@ function listComponentsReal() {
             byCategory[data.category].push({ name, files: data.files });
         });
 
-        // Agregar filas a la tabla
+        // Add rows to the table
         Object.entries(byCategory).forEach(([category, comps]) => {
             comps.forEach((comp, index) => {
                 if (index === 0) {
-                    // Primera fila de la categoría
+                    // First row of the category
                     table.push([
                         chalk.bold(comp.name),
                         chalk.yellow(category),
                         comp.files.toString()
                     ]);
                 } else {
-                    // Resto de componentes en la categoría
+                    // Rest of components in the category
                     table.push([
                         chalk.bold(comp.name),
                         chalk.gray('″'),  // Ditto mark
@@ -151,16 +148,16 @@ function listComponentsReal() {
         Print.newLine();
         Print.info(`Total: ${Object.keys(components).length} component${Object.keys(components).length !== 1 ? 's' : ''} found`);
 
-        // Ruta donde se generará components.js
+        // Path where components.js will be generated
         const outputPath = getComponentsJsPath(import.meta.url);
 
-        // Asegurar que el directorio existe
+        // Ensure the directory exists
         const outputDir = path.dirname(outputPath);
         if (!fs.existsSync(outputDir)) {
             fs.mkdirSync(outputDir, { recursive: true });
         }
 
-        // Generar archivo components.js con los componentes detectados
+        // Generate components.js file with detected components
         const componentsForExport = Object.fromEntries(
             Object.entries(components).map(([name, data]) => [name, data.category])
         );

package/commands/startServer/startServer.js

@@ -1,19 +1,16 @@
-// commands/startServer/startServer.js - MEJORADO CON VALIDACIÓN Y FEEDBACK
+// commands/startServer/startServer.js - IMPROVED WITH VALIDATION AND FEEDBACK
 
 import fs from 'fs-extra';
 import path from 'path';
-import { fileURLToPath } from 'url';
 import { spawn } from 'child_process';
 import { createServer } from 'net';
 import setupWatcher, { stopWatcher } from './watchServer.js';
 import Print from '../Print.js';
-import { getConfigPath, getApiPath, getSrcPath, getDistPath } from '../utils/PathHelper.js';
+import { getConfigPath, getApiPath, getSrcPath, getDistPath, getPath } from '../utils/PathHelper.js';
 import build from '../build/build.js';
 
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-
 /**
- * Carga la configuración desde sliceConfig.json
+ * Loads configuration from sliceConfig.json
  */
 const loadConfig = () => {
   try {
@@ -27,7 +24,7 @@ const loadConfig = () => {
 };
 
 /**
- * Verifica si un puerto está disponible
+ * Checks if a port is available
  */
 async function isPortAvailable(port) {
   return new Promise((resolve) => {
@@ -51,16 +48,16 @@ async function isPortAvailable(port) {
 }
 
 /**
- * Verifica si existe un build de producción
+ * Checks if a production build exists
  */
 async function checkProductionBuild() {
   const distDir = getDistPath(import.meta.url);
-  const bundleConfigPath = path.join(distDir, 'bundles', 'bundle.config.json');
+  const bundleConfigPath = getPath(import.meta.url, 'dist', 'bundles', 'bundle.config.json');
   return (await fs.pathExists(distDir)) && (await fs.pathExists(bundleConfigPath));
 }
 
 /**
- * Verifica si existe la estructura de desarrollo
+ * Checks if the development structure exists
  */
 async function checkDevelopmentStructure() {
   const srcDir = getSrcPath(import.meta.url);
@@ -70,13 +67,13 @@ async function checkDevelopmentStructure() {
 }
 
 /**
- * Inicia el servidor Node.js con argumentos y mejor feedback
+ * Starts the Node.js server with arguments and improved feedback
  */
 function startNodeServer(port, mode) {
   return new Promise((resolve, reject) => {
     const apiIndexPath = getApiPath(import.meta.url, 'index.js');
 
-    // Verificar que el archivo existe
+    // Verify the file exists
     if (!fs.existsSync(apiIndexPath)) {
       reject(new Error(`Server file not found: ${apiIndexPath}`));
       return;
@@ -84,7 +81,7 @@ function startNodeServer(port, mode) {
 
     Print.serverStatus('starting', 'Starting server...');
 
-    // Construir argumentos basados en el modo
+    // Build arguments based on mode
     const args = [apiIndexPath];
     if (mode === 'production') {
       args.push('--production');
@@ -109,12 +106,12 @@ function startNodeServer(port, mode) {
     let serverStarted = false;
     let outputBuffer = '';
 
-    // Capturar la salida para detectar cuando el servidor está listo
+    // Capture output to detect when the server is ready
     serverProcess.stdout.on('data', (data) => {
       const output = data.toString();
       outputBuffer += output;
 
-      // Detectar mensajes comunes que indican que el servidor ha iniciado
+      // Detect common messages indicating the server has started
       if (!serverStarted && (
         output.includes('Server running') ||
         output.includes('listening on') ||
@@ -125,7 +122,7 @@ function startNodeServer(port, mode) {
         Print.serverReady(port);
       }
 
-      // Mostrar la salida del servidor
+      // Display server output
       process.stdout.write(output);
     });
 
@@ -161,7 +158,7 @@ function startNodeServer(port, mode) {
       serverProcess.kill('SIGTERM');
     });
 
-    // Si después de 3 segundos no detectamos inicio, asumimos que está listo
+    // If after 3 seconds we haven't detected startup, assume it's ready
     setTimeout(() => {
       if (!serverStarted) {
         serverStarted = true;
@@ -173,7 +170,7 @@ function startNodeServer(port, mode) {
 }
 
 /**
- * Función principal para iniciar servidor
+ * Main function to start the server
  */
 export default async function startServer(options = {}) {
   const config = loadConfig();
@@ -185,7 +182,7 @@ export default async function startServer(options = {}) {
     Print.title(`🚀 Starting Slice.js ${mode} server...`);
     Print.newLine();
 
-    // Verificar estructura del proyecto
+    // Verify project structure
     if (!await checkDevelopmentStructure()) {
       throw new Error('Project structure not found. Run "slice init" first.');
     }
@@ -204,7 +201,7 @@ export default async function startServer(options = {}) {
     Print.newLine();
 
     if (mode === 'production') {
-      // Verificar que existe build de producción
+      // Verify production build exists
       if (!await checkProductionBuild()) {
         Print.info('No production build found. Running "slice build"...');
         const success = await build({});
@@ -219,10 +216,10 @@ export default async function startServer(options = {}) {
 
     Print.newLine();
 
-    // Iniciar el servidor con argumentos
+    // Start the server with arguments
     let serverProcess = await startNodeServer(actualPort, mode);
 
-    // Configurar watch mode si está habilitado
+    // Configure watch mode if enabled
     if (watch) {
       Print.newLine();
       const watcher = setupWatcher(serverProcess, async (changedPath) => {
@@ -253,12 +250,12 @@ export default async function startServer(options = {}) {
 
   } catch (error) {
     Print.newLine();
-    Print.error(error.message);
+    Print.error(`Failed to start development server: ${error.message}`);
     throw error;
   }
 }
 
 /**
- * Funciones de utilidad exportadas
+ * Exported utility functions
  */
 export { checkProductionBuild, checkDevelopmentStructure, isPortAvailable };

package/commands/startServer/watchServer.js

@@ -3,9 +3,9 @@ import chalk from 'chalk';
 import Print from '../Print.js';
 
 /**
- * Configura el watcher para archivos del proyecto
- * @param {ChildProcess} serverProcess - Proceso del servidor
- * @returns {FSWatcher} - Watcher de chokidar
+ * Configures the watcher for project files
+ * @param {ChildProcess} serverProcess - Server process
+ * @returns {FSWatcher} - Chokidar watcher
  */
 export default function setupWatcher(serverProcess, onRestart) {
     Print.info('Watch mode enabled - monitoring file changes...');
@@ -13,7 +13,7 @@ export default function setupWatcher(serverProcess, onRestart) {
 
     const watcher = chokidar.watch(['src/**/*', 'api/**/*'], {
         ignored: [
-            /(^|[\/\\])\../,  // archivos ocultos
+            /(^|[\/\\])\../,  // hidden files
             '**/node_modules/**',
             '**/dist/**',
             '**/bundles/**',
@@ -31,7 +31,7 @@ export default function setupWatcher(serverProcess, onRestart) {
 
     watcher
         .on('change', (path) => {
-            // Debounce para evitar múltiples reloads
+            // Debounce to avoid multiple reloads
             clearTimeout(reloadTimeout);
             reloadTimeout = setTimeout(() => {
                 if(onRestart) {
@@ -68,8 +68,8 @@ export default function setupWatcher(serverProcess, onRestart) {
 }
 
 /**
- * Detiene el watcher de forma segura
- * @param {FSWatcher} watcher - Watcher a detener
+ * Stops the watcher safely
+ * @param {FSWatcher} watcher - Watcher to stop
  */
 export function stopWatcher(watcher) {
     if (watcher) {