slicejs-web-framework 1.0.0

package/node_modules/slicejs-cli/commands/Validations.js

@@ -0,0 +1,56 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+class Validations {
+    constructor() {
+        this.config = this.loadConfig(); // Cargamos la configuración solo una vez al instanciar
+        this.categories = this.config?.paths?.components;
+
+    }
+
+    isValidComponentName(componentName) {
+        // Expresión regular para verificar si el nombre contiene caracteres especiales
+        const regex = /^[a-zA-Z][a-zA-Z0-9]*$/;
+        return regex.test(componentName);
+    }
+
+    loadConfig() {
+        try {
+            const configPath = path.join(__dirname, '../../../src/sliceConfig.json');
+            const rawData = fs.readFileSync(configPath, 'utf-8');
+            return JSON.parse(rawData);
+        } catch (error) {
+            console.error(`Error cargando configuración: ${error.message}`);
+            return null;
+        }
+    }
+
+    getCategories() {
+        return this.categories; // Usamos las categorías cargadas en el constructor
+    }
+
+    getCategoryPath(category) {
+        return  this.categories[category].path;
+    }
+
+    getCategoryType(category){
+        return this.categories[category].type;
+    }
+
+    isValidCategory(category) {
+        const availableCategories = Object.keys(this.categories).map(cat => cat.toLowerCase()); 
+
+        if (availableCategories.includes(category.toLowerCase())) {
+            return { isValid: true, category };
+        } else {
+            return { isValid: false, category: null };
+        }
+    }
+}
+
+const validations = new Validations();
+
+export default validations;

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

@@ -0,0 +1,47 @@
+export default class componentTemplates{
+
+  static visual(componentName, props){
+    const propGettersSetters = props.map(prop => `
+  get ${prop}() {
+      return this._${prop};
+  }
+
+  set ${prop}(value) {
+      this._${prop} = value;
+  }
+  `).join('\n');
+
+  return `export default class ${componentName} extends HTMLElement {
+  constructor(props) {
+    super();
+    slice.attachTemplate(this);
+
+    slice.controller.setComponentProps(this, props);
+    this.debuggerProps = [${props.map(prop => `"${prop}"`).join(',')}];
+  }
+
+  init() {}
+
+  ${propGettersSetters}
+}
+
+customElements.define("slice-${componentName.toLowerCase()}", ${componentName});
+`;
+  }
+
+  static service(componentName) {
+
+  
+    return `export default class ${componentName} {
+    constructor(props) {
+      // Constructor
+    }
+  
+    init() {
+      // Método init
+    }
+  }
+  `;
+  }
+}
+

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

@@ -0,0 +1,81 @@
+
+import componentTemplates from './VisualComponentTemplate.js';
+import fs from 'fs-extra';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import Validations from '../Validations.js';
+import Print from '../Print.js';
+const __dirname = path.dirname(new URL(import.meta.url).pathname);
+
+function createComponent(componentName, category, properties) {
+    if (!componentName) {
+        Print.error('Component name is required');
+        return;
+    }
+
+    if (!Validations.isValidComponentName(componentName)) {
+        Print.error('Invalid component name. Please use only alphanumeric characters and start with a letter.');
+        return;
+    }
+
+    let flagCategory = Validations.isValidCategory(category);
+
+
+    if (!flagCategory.isValid) {
+        Print.error('Invalid category. Please use one of the following categories: Service, Visual, Provider, Structural');
+        return;
+    }
+    category = flagCategory.category;
+
+    // Crear el nombre de la clase y del archivo
+    const className = componentName.charAt(0).toUpperCase() + componentName.slice(1);
+    const fileName = `${className}.js`;
+    let template;
+
+    const type = Validations.getCategoryType(category);
+
+    
+    if(type==='Visual'){
+       template = componentTemplates.visual(className, properties);
+    }
+
+    if(type==='Service'){
+         template = componentTemplates.service(className);
+     }
+
+    const categoryPath = Validations.getCategoryPath(category);
+
+
+    // Determinar la ruta del archivo
+    let componentDir = path.join(__dirname, '../../../../src/', categoryPath, className);
+    componentDir=componentDir.slice(1);
+    fs.ensureDirSync(componentDir);
+    
+
+    // Determinar la ruta del archivo
+    let componentPath = path.join(componentDir, fileName);
+
+
+    // Verificar si el archivo ya existe
+    if (fs.existsSync(componentPath)) {
+        Print.error(`Component '${componentName}' already exists.`);
+        return;
+    }
+
+
+
+    // Escribir el código del componente en el archivo
+    fs.writeFileSync(componentPath, template);
+
+    if(type==='Visual'){
+        fs.writeFileSync(`${componentDir}/${className}.css`, '');
+        fs.writeFileSync(`${componentDir}/${className}.html`, `<div>${componentName}</div>`);
+    }
+
+    Print.success(`Component '${componentName}' created successfully.`);
+    return true;
+}
+
+
+export default createComponent;
+

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

@@ -0,0 +1,46 @@
+import fs from 'fs-extra';
+import path from 'path';
+import Validations from '../Validations.js';
+import Print from '../Print.js';
+const __dirname = path.dirname(new URL(import.meta.url).pathname);
+
+function deleteComponent(componentName, category) {
+    if (!componentName) {
+        Print.error('Component name is required');
+        return;
+    }
+
+    if (!Validations.isValidComponentName(componentName)) {
+        Print.error('Invalid component name. Please use only alphanumeric characters and start with a letter.');
+        return;
+    }
+
+    let flagCategory = Validations.isValidCategory(category);
+
+    if (!flagCategory.isValid) {
+        Print.error('Invalid category. Please use one of the following categories: Service, Visual, Provider, Structural');
+        return;
+    }
+    category = flagCategory.category;
+    
+    const categoryPath = Validations.getCategoryPath(category);
+
+
+    // Construir la ruta del directorio del componente
+    let componentDir = path.join(__dirname, '../../../../src/', categoryPath, componentName);
+    componentDir = componentDir.slice(1);
+
+    // Verificar si el directorio del componente existe
+    if (!fs.existsSync(componentDir)) {
+        Print.error(`Component '${componentName}' does not exist.`);
+        return;
+    }
+
+    // Eliminar el directorio del componente y su contenido
+    fs.removeSync(componentDir);
+
+    Print.success(`Component '${componentName}' deleted successfully.`);
+    return true;
+}
+
+export default deleteComponent;

package/node_modules/slicejs-cli/commands/init/init.js

@@ -0,0 +1,37 @@
+import fs from 'fs-extra';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import Print from '../Print.js';
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export default async function initializeProject(projectType) {
+    try {
+        // Directorio de origen en el paquete
+        let sliceDir;
+        let basicPosibilities = ["basic", "Basic", "-b", "-B", "b", "B"];
+        if (basicPosibilities.includes(projectType)) {
+            sliceDir = path.join(__dirname, '../../PROJECT_TEMPLATES/Basic/Slice');
+        }
+
+        // Directorio de destino en la raíz del proyecto
+        const destinationDir = path.join(__dirname, '../../../../Slice');
+        const destinationSrc = path.join(__dirname, '../../../../src')
+        const srcDir = path.join(__dirname, '../../PROJECT_TEMPLATES/Basic/src')
+
+        // Verificar si el directorio de destino ya existe
+        if (fs.existsSync(destinationDir)) {
+            Print.error('El proyecto ya cuenta con un directorio "Slice". No es posible inicializar el proyecto nuevamente');
+            return;
+        }
+
+        // Copiar el contenido del directorio de origen al directorio de destino 
+        await fs.copy(sliceDir, destinationDir, { recursive: true });
+        await fs.copy(srcDir, destinationSrc, { recursive: true });
+
+        Print.success('Proyecto inicializado correctamente.');
+    } catch (error) {
+        Print.error('Error al inicializar el proyecto:', error);
+    }
+}
+
+

package/node_modules/slicejs-cli/commands/listComponents/listComponents.js

@@ -0,0 +1,83 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import Print from '../Print.js';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+/**
+ * Carga la configuración desde sliceConfig.json
+ * @returns {object} - Objeto de configuración
+ */
+const loadConfig = () => {
+    try {
+        const configPath = path.join(__dirname, '../../../../src/sliceConfig.json');
+        const rawData = fs.readFileSync(configPath, 'utf-8');
+        return JSON.parse(rawData);
+    } catch (error) {
+        console.error(`Error cargando configuración: ${error.message}`);
+        return null;
+    }
+};
+
+/**
+ * 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
+ */
+const listComponents = (folderPath) => {
+    try {
+        const result = fs.readdirSync(folderPath)
+        return result;
+    } catch (error) {
+        console.error(`Error leyendo carpeta ${folderPath}: ${error.message}`);
+        return [];
+    }
+};
+
+/**
+ * Obtiene los componentes dinámicamente desde sliceConfig.json
+ * @returns {object} - Mapeo de componentes con su categoría
+ */
+const getComponents = () => {
+    const config = loadConfig();
+    if (!config) return {};
+
+    const isProduction = config.production.enabled===true;
+    const folderSuffix = isProduction ? 'dist' : 'src';
+
+    const componentPaths = config.paths?.components || {}; // Obtiene dinámicamente las rutas de los componentes
+    let allComponents = new Map();
+
+    Object.entries(componentPaths).forEach(([category, { path: folderPath }]) => {
+        const fullPath = path.join(__dirname, `../../../../${folderSuffix}`, folderPath);
+        const files = listComponents(fullPath);
+
+
+        files.forEach(file => {
+            const componentName = path.basename(file, '.js');
+            allComponents.set(componentName, category);
+        });
+    });
+
+
+
+    return Object.fromEntries(allComponents);
+};
+
+function listComponentsReal(){
+    // Obtener componentes dinámicamente
+const components = getComponents();
+
+// Ruta donde se generará components.js
+const outputPath = path.join(__dirname, '../../../../src/Components/components.js');
+
+// Generar archivo components.js con los componentes detectados
+fs.writeFileSync(outputPath, `const components = ${JSON.stringify(components, null, 2)}; export default components;`);
+
+Print.success('Lista de componentes actualizada dinámicamente');
+}
+
+export default listComponentsReal;
+
+

package/node_modules/slicejs-cli/commands/modifyComponent/modifyComponent copy.js

@@ -0,0 +1,111 @@
+import fs from 'fs';
+import path from 'path';
+
+const __dirname = path.dirname(new URL(import.meta.url).pathname);
+
+function modifyComponent(componentName, category, addProperties, removeProperties) {
+    if (!componentName) {
+        console.error('Component name is required');
+        return;
+    }
+
+    if (!isValidComponentName(componentName)) {
+        console.error('Invalid component name. Please use only alphanumeric characters and start with a letter.');
+        return;
+    }
+
+    if (!['Service', 'Visual', 'Provider', 'Structural'].includes(category)) {
+        console.error('Invalid category. Please use one of the following categories: Service, Visual, Provider, Structural');
+        return;
+    }
+
+    const fileName = `${componentName}.js`;
+    const componentPath = path.join('Components', category, fileName);
+
+    if (!fs.existsSync(componentPath)) {
+        console.error(`Component '${componentName}' does not exist.`);
+        return;
+    }
+
+    let componentContent = fs.readFileSync(componentPath, 'utf-8');
+    let existingProperties = extractProperties(componentContent);
+
+    addProperties.forEach(property => {
+        if (!existingProperties.includes(property)) {
+            existingProperties.push(property);
+            console.log(`Property '${property}' added to component '${componentName}'.`);
+            // Agregar getters y setters al componente
+            componentContent = addGetterSetter(componentContent, property);
+        } else {
+            console.log(`Property '${property}' already exists in component '${componentName}'.`);
+        }
+    });
+
+    removeProperties.forEach(property => {
+        if (existingProperties.includes(property)) {
+            existingProperties = existingProperties.filter(prop => prop !== property);
+            console.log(`Property '${property}' removed from component '${componentName}'.`);
+            componentContent = removeGetterSetter(componentContent, property);
+        } else {
+            console.log(`Property '${property}' does not exist in component '${componentName}'.`);
+        }
+    });
+
+    componentContent = updateComponentProps(componentContent, existingProperties);
+    fs.writeFileSync(componentPath, componentContent);
+    console.log(`Component '${componentName}' modified successfully.`);
+}
+
+function isValidComponentName(componentName) {
+    const regex = /^[a-zA-Z][a-zA-Z0-9]*$/;
+    return regex.test(componentName);
+}
+
+function extractProperties(componentContent) {
+    const propRegex = /this\.debuggerProps\s*=\s*\[(.*?)\];/s;
+    const match = componentContent.match(propRegex);
+    if (match && match[1]) {
+        return match[1].split(',').map(prop => prop.trim().replace(/['"]/g, ''));
+    }
+    return [];
+}
+
+function addGetterSetter(componentContent, property) {
+    // Agregar los métodos getters y setters al componente
+    const getterSetterCode = `
+    get ${property}() {
+        return this._${property};
+    }
+
+    set ${property}(value) {
+        this._${property} = value;
+    }\n\n`;
+
+    const classEndIndex = componentContent.lastIndexOf('}');
+    if (classEndIndex !== -1) {
+        const updatedComponentContent = componentContent.slice(0, classEndIndex) + getterSetterCode + componentContent.slice(classEndIndex);
+        return updatedComponentContent;
+    }
+    return componentContent;
+}
+
+function removeGetterSetter(componentContent, property) {
+    // Eliminar los métodos getters y setters del componente
+    const getterSetterRegex = new RegExp(`get ${property}\\(\\)\\s*{[^}]+}\\s*set ${property}\\([^)]+\\)\\s*{[^}]+}`);
+
+    const updatedComponentContent = componentContent.replace(getterSetterRegex, '');
+    return updatedComponentContent;
+}
+
+function updateComponentProps(componentContent, properties) {
+    const updatedPropsList = properties.map(prop => `'${prop}'`).join(', ');
+    const propIndex = componentContent.indexOf('this.debuggerProps = [');
+    const propsStartIndex = componentContent.indexOf('[', propIndex);
+    const propsEndIndex = componentContent.indexOf(']', propIndex);
+    const updatedComponentContent = `${componentContent.slice(0, propsStartIndex + 1)}${updatedPropsList}${componentContent.slice(propsEndIndex)}`;
+    return updatedComponentContent;
+}
+
+export default modifyComponent;
+
+modifyComponent('Input', 'Visual', ['placeholder', 'conditions'], []);

package/node_modules/slicejs-cli/commands/modifyComponent/modifyComponent.js

@@ -0,0 +1,151 @@
+import fs from 'fs';
+import path from 'path';
+import Validations from '../Validations.js';
+const __dirname = path.dirname(new URL(import.meta.url).pathname);
+import Print from '../Print.js';
+
+function modifyComponent(componentName, category, addProperties, removeProperties) {
+    if (!componentName) {
+        Print.error('Component name is required');
+        return;
+    }
+
+    if (!Validations.isValidComponentName(componentName)) {
+        Print.error('Invalid component name. Please use only alphanumeric characters and start with a letter.');
+        return;
+    }
+
+
+    
+    
+    let flagCategory = Validations.isValidCategory(category);
+
+    if (!flagCategory.isValid) {
+        Print.error('Invalid category. Please use one of the following categories: Service, Visual, Provider, Structural');
+        return;
+    }
+
+    category = flagCategory.category;
+
+    let componentDir = path.join(__dirname, '../../../../src/Components', category, componentName);
+    componentDir = componentDir.slice(1);
+
+   // let componentPath = path.join(componentDir, fileName);
+    //componentPath=componentPath.slice(1);
+
+    if (!fs.existsSync(componentPath)) {
+        Print.error(`Component '${componentName}' does not exist.`);
+        return;
+    }
+
+
+    let componentContent = fs.readFileSync(componentPath, 'utf-8');
+    let existingProperties = extractProperties(componentContent);
+
+    addProperties.forEach(property => {
+        if (!existingProperties.includes(property)) {
+            existingProperties.push(property);
+            Print.success(`Property '${property}' added to component '${componentName}'.`);
+            // Verificar si existen getters y setters para la propiedad y agregarlos si es necesario
+            componentContent = addGetterSetterIfNeeded(componentContent, property);
+        } else {
+            Print.error(`Property '${property}' already exists in component '${componentName}'.`);
+        }
+    });
+
+    removeProperties.forEach(property => {
+        if (existingProperties.includes(property)) {
+            existingProperties = existingProperties.filter(prop => prop !== property);
+            Print.success(`Property '${property}' removed from component '${componentName}'.`);
+            componentContent = removePropertyIfNeeded(componentContent, property);
+        } else {
+            Print.error(`Property '${property}' does not exist in component '${componentName}'.`);
+        }
+    });
+
+    componentContent = updateComponentProps(componentContent, existingProperties);
+    fs.writeFileSync(componentPath, componentContent);
+    Print.success(`Component '${componentName}' modified successfully.`);
+}
+
+
+function extractProperties(componentContent) {
+    const propRegex = /this\.debuggerProps\s*=\s*\[(.*?)\];/s;
+    const match = componentContent.match(propRegex);
+    if (match && match[1]) {
+        return match[1].split(',').map(prop => prop.trim().replace(/['"]/g, ''));
+    }
+    return [];
+}
+
+function addGetterSetterIfNeeded(componentContent, property) {
+    // Verificar si existen getters y setters para la propiedad
+    const hasGetterSetter = hasGetterSetterForProperty(componentContent, property);
+    if (!hasGetterSetter) {
+        // Agregar getters y setters al componente
+        componentContent = addGetterSetter(componentContent, property);
+    }
+    return componentContent;
+}
+
+function removePropertyIfNeeded(componentContent, property) {
+    // Eliminar la propiedad de debuggerProps si está presente
+    const propRegex = /this\.debuggerProps\s*=\s*\[(.*?)\];/s;
+    const match = componentContent.match(propRegex);
+    if (match && match[1]) {
+        let props = match[1].split(',').map(prop => prop.trim().replace(/['"]/g, ''));
+        const propIndex = props.indexOf(property);
+        if (propIndex !== -1) {
+            props.splice(propIndex, 1);
+            componentContent = componentContent.replace(propRegex, `this.debuggerProps = [${props.map(prop => `'${prop}'`).join(', ')}];`);
+        }
+    }
+
+    // Eliminar los getters y setters de la propiedad
+    componentContent = removeGetterSetter(componentContent, property);
+
+    return componentContent;
+}
+
+function hasGetterSetterForProperty(componentContent, property) {
+    const getterRegex = new RegExp(`get ${property}\\(\\)\\s*{`);
+    const setterRegex = new RegExp(`set ${property}\\([^)]+\\)\\s*{`);
+    return getterRegex.test(componentContent) && setterRegex.test(componentContent);
+}
+
+function addGetterSetter(componentContent, property) {
+    // Agregar los métodos getters y setters al componente
+    const getterSetterCode = `
+    get ${property}() {
+        return this._${property};
+    }
+
+    set ${property}(value) {
+        this._${property} = value;
+    }\n\n`;
+
+    const classEndIndex = componentContent.lastIndexOf('}');
+    if (classEndIndex !== -1) {
+        const updatedComponentContent = componentContent.slice(0, classEndIndex) + getterSetterCode + componentContent.slice(classEndIndex);
+        return updatedComponentContent;
+    }
+    return componentContent;
+}
+
+function removeGetterSetter(componentContent, property) {
+    // Eliminar los métodos getters y setters del componente
+    const getterSetterRegex = new RegExp(`get ${property}\\(\\)\\s*{[^}]+}\\s*set ${property}\\([^)]+\\)\\s*{[^}]+}`);
+    return componentContent.replace(getterSetterRegex, '');
+}
+
+function updateComponentProps(componentContent, properties) {
+    const updatedPropsList = properties.map(prop => `'${prop}'`).join(', ');
+    const propIndex = componentContent.indexOf('this.debuggerProps = [');
+    const propsStartIndex = componentContent.indexOf('[', propIndex);
+    const propsEndIndex = componentContent.indexOf(']', propIndex);
+    const updatedComponentContent = `${componentContent.slice(0, propsStartIndex + 1)}${updatedPropsList}${componentContent.slice(propsEndIndex)}`;
+    return updatedComponentContent;
+}
+
+export default modifyComponent;
+

package/node_modules/slicejs-cli/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "slicejs-cli",
+  "version": "2.0.1",
+  "description": "Command client for developing web applications with Slice.js framework",
+  "main": "client.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "postinstall": "node post.js"
+  },
+  "keywords": [
+    "framework",
+    "web",
+    "client",
+    "cli"
+  ],
+  "author": "vkneider",
+  "type": "module",
+  "license": "ISC",
+  "dependencies": {
+    "commander": "^12.0.0",
+    "fs-extra": "^11.2.0",
+    "inquirer": "^12.4.2"
+  }
+}