slicejs-web-framework 3.4.2 → 3.4.4

package/slicejs-cli/commands/bundle/bundle.js

@@ -0,0 +1,236 @@
+// cli/commands/bundle/bundle.js
+import path from 'path';
+import fs from 'fs-extra';
+import DependencyAnalyzer from '../utils/bundling/DependencyAnalyzer.js';
+import BundleGenerator from '../utils/bundling/BundleGenerator.js';
+import Print from '..//Print.js';
+import { getProjectRoot, getSrcPath } from '../utils/PathHelper.js';
+
+/**
+ * Main bundling command
+ */
+export default async function bundle(options = {}) {
+  const startTime = Date.now();
+  const projectRoot = getProjectRoot(import.meta.url);
+
+  try {
+    Print.title('📦 Slice.js Bundle Generator');
+    Print.newLine();
+
+    // Validate that it's a Slice.js project
+    await validateProject(projectRoot);
+
+    // Create default bundle config if needed
+    const bundleGenerator = new BundleGenerator(import.meta.url, null);
+    await bundleGenerator.createDefaultBundleConfig();
+
+    // Phase 1: Analysis
+    Print.buildProgress('Analyzing project...');
+    const analyzer = new DependencyAnalyzer(import.meta.url);
+    const analysisData = await analyzer.analyze();
+
+    // Show report if in verbose mode
+    if (options.verbose || options.analyze) {
+      Print.newLine();
+      analyzer.generateReport(analysisData.metrics);
+      Print.newLine();
+    }
+
+    // If only analysis is requested, finish here
+    if (options.analyze) {
+      Print.success('Analysis completed');
+      return;
+    }
+
+    // Phase 2: Bundle generation
+    Print.buildProgress('Generating bundles...');
+    const generator = new BundleGenerator(import.meta.url, analysisData, {
+      minify: !!options.minify,
+      obfuscate: !!options.obfuscate,
+      output: options.output || 'src'
+    });
+    const result = await generator.generate();
+
+    // Phase 3: Save configuration
+    Print.buildProgress('Saving configuration...');
+    await generator.saveBundleConfig(result.config);
+
+    // Phase 4: Summary
+    Print.newLine();
+    printSummary(result, startTime);
+
+    // Show next step
+    Print.newLine();
+    Print.info('💡 Next step:');
+    console.log('   Update your Slice.js to use the generated bundles');
+    console.log('   Bundles will load automatically in production\n');
+
+  } catch (error) {
+    Print.error('Error generating bundles:', error.message);
+    console.error('\n📍 Complete stack trace:');
+    console.error(error.stack);
+
+    if (error.code) {
+      console.error('\n📍 Error code:', error.code);
+    }
+
+    throw error;
+  }
+}
+
+/**
+ * Validates that the project has the correct structure
+ */
+async function validateProject(projectRoot) {
+  const requiredPaths = [
+    getSrcPath(import.meta.url, 'Components', 'components.js'),
+    getSrcPath(import.meta.url, 'routes.js')
+  ];
+
+  for (const fullPath of requiredPaths) {
+    if (!await fs.pathExists(fullPath)) {
+      const relativePath = path.relative(projectRoot, fullPath);
+      throw new Error(`Required file not found: ${relativePath}`);
+    }
+  }
+}
+
+/**
+ * Prints summary of generated bundles
+ */
+function printSummary(result, startTime) {
+  const { bundles, config, files } = result;
+  const duration = ((Date.now() - startTime) / 1000).toFixed(2);
+
+  Print.success(`Bundles generated in ${duration}s\n`);
+
+  // Critical bundle
+  if (bundles.critical.components.length > 0) {
+    Print.info('📦 Critical Bundle:');
+    console.log(`   Components: ${bundles.critical.components.length}`);
+    console.log(`   Size: ${(bundles.critical.size / 1024).toFixed(1)} KB`);
+    console.log(`   File: ${bundles.critical.file}\n`);
+  }
+
+  // Route bundles
+  const routeCount = Object.keys(bundles.routes).length;
+  if (routeCount > 0) {
+    Print.info(`📦 Route Bundles (${routeCount}):`);
+
+    for (const [key, bundle] of Object.entries(bundles.routes)) {
+      console.log(`   ${key}:`);
+      const routeDisplay = Array.isArray(bundle.path) ? `${bundle.path.length} routes` : (bundle.path || key);
+      console.log(`     Route: ${routeDisplay}`);
+      console.log(`     Components: ${bundle.components.length}`);
+      console.log(`     Size: ${(bundle.size / 1024).toFixed(1)} KB`);
+      console.log(`     File: ${bundle.file}`);
+    }
+    Print.newLine();
+  }
+
+  // Global statistics
+  Print.info('📊 Statistics:');
+  console.log(`   Strategy: ${config.strategy}`);
+  console.log(`   Total components: ${config.stats.totalComponents}`);
+  console.log(`   Shared components: ${config.stats.sharedComponents}`);
+  console.log(`   Generated files: ${files.length}`);
+
+  // Calculate estimated improvement
+  const beforeRequests = config.stats.totalComponents;
+  const afterRequests = files.length;
+  const improvement = Math.round((1 - afterRequests / beforeRequests) * 100);
+
+  console.log(`   Request reduction: ${improvement}% (${beforeRequests} → ${afterRequests})`);
+}
+
+/**
+ * Subcommand: Clean bundles
+ */
+export async function cleanBundles() {
+  const srcPath = getSrcPath(import.meta.url);
+
+  try {
+    Print.title('🧹 Cleaning bundles...');
+
+    const files = await fs.readdir(srcPath);
+    const bundleFiles = files.filter(f => f.startsWith('slice-bundle.'));
+
+    if (bundleFiles.length === 0) {
+      Print.warning('No bundles found to clean');
+      return;
+    }
+
+    for (const file of bundleFiles) {
+      await fs.remove(path.join(srcPath, file));
+      console.log(`   ✓ Deleted: ${file}`);
+    }
+
+    // Remove config
+    const configPath = getSrcPath(import.meta.url, 'bundle.config.json');
+    if (await fs.pathExists(configPath)) {
+      await fs.remove(configPath);
+      console.log(`   ✓ Deleted: bundle.config.json`);
+    }
+
+    Print.newLine();
+    Print.success(`${bundleFiles.length} files deleted`);
+
+  } catch (error) {
+    Print.error('Error cleaning bundles:', error.message);
+    console.error(error.stack);
+    throw error;
+  }
+}
+
+/**
+ * Subcommand: Bundle information
+ */
+export async function bundleInfo() {
+  const configPath = getSrcPath(import.meta.url, 'bundle.config.json');
+
+  try {
+    if (!await fs.pathExists(configPath)) {
+      Print.warning('Bundle configuration not found');
+      Print.info('Run "slice bundle" to generate bundles');
+      return;
+    }
+
+    const config = await fs.readJson(configPath);
+
+    Print.title('📦 Bundle Information');
+    Print.newLine();
+
+    Print.info('Configuration:');
+    console.log(`   Version: ${config.version}`);
+    console.log(`   Strategy: ${config.strategy}`);
+    console.log(`   Generated: ${new Date(config.generated).toLocaleString()}`);
+    Print.newLine();
+
+    Print.info('Statistics:');
+    console.log(`   Total components: ${config.stats.totalComponents}`);
+    console.log(`   Total routes: ${config.stats.totalRoutes}`);
+    console.log(`   Shared components: ${config.stats.sharedComponents} (${config.stats.sharedPercentage}%)`);
+    console.log(`   Total size: ${(config.stats.totalSize / 1024).toFixed(1)} KB`);
+    Print.newLine();
+
+    Print.info('Bundles:');
+
+    // Critical
+    if (config.bundles.critical) {
+      console.log(`   Critical: ${config.bundles.critical.components.length} components, ${(config.bundles.critical.size / 1024).toFixed(1)} KB`);
+    }
+
+    // Routes
+    const routeCount = Object.keys(config.bundles.routes).length;
+    console.log(`   Routes: ${routeCount} bundles`);
+
+    for (const [key, bundle] of Object.entries(config.bundles.routes)) {
+      console.log(`     ${key}: ${bundle.components.length} components, ${(bundle.size / 1024).toFixed(1)} KB`);
+    }
+
+  } catch (error) {
+    Print.error('Error reading information:', error.message);
+    console.error(error.stack);
+    throw error;
+  }
+}

package/slicejs-cli/commands/createComponent/VisualComponentTemplate.js

@@ -0,0 +1,55 @@
+export default class componentTemplates{
+
+  static visual(componentName){
+    return `export default class ${componentName} extends HTMLElement {
+
+  static props = {
+    // Define your component props here
+    // Example: 
+    /*
+    "value": { 
+         type: 'string', 
+         default: 'Button', 
+         required: false 
+      },
+    */
+  }
+
+  constructor(props) {
+    super();
+    slice.attachTemplate(this);
+    slice.controller.setComponentProps(this, props);
+  }
+
+  init() {
+    // Component initialization logic (can be async)
+  }
+
+  update() {
+    // Component update logic (can be async)
+  }
+
+  // Add your custom methods here
+}
+
+customElements.define("slice-${componentName.toLowerCase()}", ${componentName});
+`;
+  }
+
+  static service(componentName) {
+    return `export default class ${componentName} {
+  constructor(props) {
+    // Initialize service with props
+    this.props = props || {};
+  }
+
+  init() {
+    // Service initialization logic (can be async)
+  }
+
+  // Add your service methods here
+}
+`;
+  }
+}
+

package/slicejs-cli/commands/createComponent/createComponent.js

@@ -0,0 +1,128 @@
+
+import componentTemplates from './VisualComponentTemplate.js';
+import fs from 'fs-extra';
+import path from 'path';
+import Validations from '../Validations.js';
+import Print from '../Print.js';
+import { getSrcPath } from '../utils/PathHelper.js';
+
+function createComponent(componentName, category) {
+    // Validation: Component name is required
+    if (!componentName) {
+        Print.error('Component name is required');
+        Print.commandExample("Create a component", "slice component create");
+        return false;
+    }
+
+    // Validation: Valid component name
+    if (!Validations.isValidComponentName(componentName)) {
+        Print.error(`Invalid component name: '${componentName}'`);
+        Print.info('Component name must start with a letter and contain only alphanumeric characters');
+        Print.commandExample("Valid names", "Button, UserCard, NavBar");
+        Print.commandExample("Invalid names", "1Button, user-card, Nav_Bar");
+        return false;
+    }
+
+    // Components follow a PascalCase convention: normalize the initial to
+    // uppercase so the folder name, registry entry and existence checks agree.
+    componentName = componentName.charAt(0).toUpperCase() + componentName.slice(1);
+
+    // Validation: Component already exists
+    if(Validations.componentExists(componentName)){
+        Print.error(`Component '${componentName}' already exists in your project`);
+        Print.info('Please use a different name or delete the existing component first');
+        Print.commandExample("Delete component", "slice component delete");
+        return false;
+    }
+
+    // Validation: Valid category
+    let flagCategory = Validations.isValidCategory(category);
+
+    if (!flagCategory.isValid) {
+        Print.error(`Invalid category: '${category}'`);
+        const availableCategories = Object.keys(Validations.getCategories()).join(', ');
+        Print.info(`Available categories: ${availableCategories}`);
+        return false;
+    }
+    category = flagCategory.category;
+
+    // Create class name and file name (componentName is already PascalCase).
+    const className = componentName;
+    const fileName = `${className}.js`;
+    let template;
+
+    const type = Validations.getCategoryType(category);
+
+    // Generate template based on type
+    if(type === 'Visual'){
+       template = componentTemplates.visual(className);
+    } else if(type === 'Service'){
+         template = componentTemplates.service(className);
+    } else {
+        Print.error(`Unsupported component type: '${type}'`);
+        Print.info('Only Visual and Service components are currently supported');
+        return false;
+    }
+
+    const categoryPath = Validations.getCategoryPath(category);
+    const categoryPathClean = categoryPath ? categoryPath.replace(/^[/\\]+/, '') : '';
+    const componentDir = getSrcPath(import.meta.url, categoryPathClean, className);
+    
+    try {
+        // Create component directory
+        fs.ensureDirSync(componentDir);
+    } catch (error) {
+        Print.error(`Failed to create component directory: '${componentDir}'`);
+        Print.info(`Error details: ${error.message}`);
+        return false;
+    }
+
+    // Determine the file path
+    let componentPath = path.join(componentDir, fileName);
+
+    // Verify if the file already exists (double check)
+    if (fs.existsSync(componentPath)) {
+        Print.error(`Component file already exists at: '${componentPath}'`);
+        Print.info('This component may have been created outside the CLI');
+        return false;
+    }
+
+    try {
+        // Write component code to file
+        fs.writeFileSync(componentPath, template);
+
+        // If Visual, create additional files (CSS and HTML)
+        if(type === 'Visual'){
+            const cssPath = path.join(componentDir, `${className}.css`);
+            const htmlPath = path.join(componentDir, `${className}.html`);
+            
+            fs.writeFileSync(cssPath, '/* Styles for ' + componentName + ' component */\n');
+            fs.writeFileSync(htmlPath, `<div class="${componentName.toLowerCase()}">\n  ${componentName}\n</div>`);
+            
+            Print.info(`Created files: ${fileName}, ${className}.css, ${className}.html`);
+        } else {
+            Print.info(`Created file: ${fileName}`);
+        }
+
+        return true;
+    } catch (error) {
+        Print.error(`Failed to create component files`);
+        Print.info(`Error details: ${error.message}`);
+        
+        // Try to clean up partially created files
+        try {
+            if (fs.existsSync(componentDir)) {
+                fs.removeSync(componentDir);
+                Print.info('Cleaned up partial files');
+            }
+        } catch (cleanupError) {
+            Print.warning('Could not clean up partial files. You may need to delete them manually');
+        }
+        
+        return false;
+    }
+}
+
+
+export default createComponent;
+

package/slicejs-cli/commands/deleteComponent/deleteComponent.js

@@ -0,0 +1,81 @@
+import fs from 'fs-extra';
+import path from 'path';
+import Validations from '../Validations.js';
+import Print from '../Print.js';
+import { fileURLToPath } from 'url';
+import { getSrcPath } from '../utils/PathHelper.js';
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+function deleteComponent(componentName, category) {
+    // Validation: Component name is required
+    if (!componentName) {
+        Print.error('Component name is required to delete');
+        Print.commandExample("Delete a component", "slice component delete");
+        return false;
+    }
+
+    // Validation: Valid component name
+    if (!Validations.isValidComponentName(componentName)) {
+        Print.error(`Invalid component name: '${componentName}'`);
+        Print.info('Component name must start with a letter and contain only alphanumeric characters');
+        return false;
+    }
+
+    // Components follow a PascalCase convention: normalize the initial so the
+    // lookup matches the folder name created by `slice component create`.
+    componentName = componentName.charAt(0).toUpperCase() + componentName.slice(1);
+
+    // Validation: Valid category
+    let flagCategory = Validations.isValidCategory(category);
+
+    if (!flagCategory.isValid) {
+        Print.error(`Invalid category: '${category}'`);
+        const availableCategories = Object.keys(Validations.getCategories()).join(', ');
+        Print.info(`Available categories: ${availableCategories}`);
+        return false;
+    }
+    category = flagCategory.category;
+    
+    const categoryPath = Validations.getCategoryPath(category);
+    const categoryPathClean = categoryPath ? categoryPath.replace(/^[/\\]+/, '') : '';
+    const componentDir = getSrcPath(import.meta.url, categoryPathClean, componentName);
+
+    // Check if component directory exists
+    if (!fs.existsSync(componentDir)) {
+        Print.error(`Component '${componentName}' does not exist in category '${category}'`);
+        Print.info('Make sure you selected the correct category');
+        Print.commandExample("List components", "slice component list");
+        return false;
+    }
+
+    // Verify it's a directory
+    try {
+        const stats = fs.statSync(componentDir);
+        if (!stats.isDirectory()) {
+            Print.error(`'${componentName}' is not a valid component directory`);
+            Print.info('Components must be stored in directories');
+            return false;
+        }
+    } catch (error) {
+        Print.error(`Failed to access component directory: '${componentDir}'`);
+        Print.info(`Error details: ${error.message}`);
+        return false;
+    }
+
+    // Try to delete the component directory and its contents
+    try {
+        const files = fs.readdirSync(componentDir);
+        Print.info(`Deleting ${files.length} file(s) from component directory...`);
+        
+        fs.removeSync(componentDir);
+        return true;
+    } catch (error) {
+        Print.error(`Failed to delete component '${componentName}'`);
+        Print.info(`Error details: ${error.message}`);
+        Print.warning('You may need to delete the component files manually');
+        Print.info(`Component location: ${componentDir}`);
+        return false;
+    }
+}
+
+export default deleteComponent;