slicejs-web-framework 1.0.6 → 1.0.9

package/Slice/Components/Structural/Router/Router.js

@@ -1,4 +1,3 @@
-
 export default class Router {
    constructor(routes) {
       this.routes = routes;
@@ -11,16 +10,30 @@ export default class Router {
       window.addEventListener('popstate', this.onRouteChange.bind(this));
    }
 
-   createPathToRouteMap(routes, basePath = '') {
+   createPathToRouteMap(routes, basePath = '', parentRoute = null) {
       const pathToRouteMap = new Map();
   
       for (const route of routes) {
-          const fullPath = `${basePath}${route.path}`.replace(/\/+/g, '/'); // Normaliza las barras diagonales
-          pathToRouteMap.set(fullPath, { ...route, fullPath });
+          const fullPath = `${basePath}${route.path}`.replace(/\/+/g, '/');
+          
+          // Guardar la referencia a la ruta padre
+          const routeWithParent = { 
+              ...route, 
+              fullPath,
+              parentPath: parentRoute ? parentRoute.fullPath : null,
+              parentRoute: parentRoute
+          };
+          
+          pathToRouteMap.set(fullPath, routeWithParent);
   
           // Si tiene rutas secundarias, también agregarlas al mapa
           if (route.children) {
-              const childPathToRouteMap = this.createPathToRouteMap(route.children, fullPath);
+              const childPathToRouteMap = this.createPathToRouteMap(
+                  route.children, 
+                  fullPath, 
+                  routeWithParent // Pasar la ruta actual como padre
+              );
+              
               for (const [childPath, childRoute] of childPathToRouteMap.entries()) {
                   pathToRouteMap.set(childPath, childRoute);
               }
@@ -28,7 +41,7 @@ export default class Router {
       }
   
       return pathToRouteMap;
-  }
+   }
 
    async renderRoutesComponentsInPage() {
       const routeContainers = document.querySelectorAll('slice-route, slice-multi-route');
@@ -41,7 +54,6 @@ export default class Router {
             routerContainersFlag = true;
          }
       }
-
       return routerContainersFlag;
    }
 
@@ -66,7 +78,12 @@ export default class Router {
 
    async handleRoute(route, params) {
       const targetElement = document.querySelector('#app');
-      const existingComponent = slice.controller.getComponent(`route-${route.component}`);
+      
+      // Si tenemos una ruta con parentRoute, usamos el componente del padre
+      const componentName = route.parentRoute ? route.parentRoute.component : route.component;
+      const sliceId = `route-${componentName}`;
+      
+      const existingComponent = slice.controller.getComponent(sliceId);
 
       if (slice.loading) {
          slice.loading.start();
@@ -80,9 +97,9 @@ export default class Router {
          }
          targetElement.appendChild(existingComponent);
       } else {
-         const component = await slice.build(route.component, {
+         const component = await slice.build(componentName, {
             params,
-            sliceId: `route-${route.component}`,
+            sliceId: sliceId,
          });
          targetElement.innerHTML = '';
          targetElement.appendChild(component);
@@ -100,7 +117,6 @@ export default class Router {
       const { route, params } = this.matchRoute(path);
 
       await this.handleRoute(route, params);
-
       await this.renderRoutesComponentsInPage();
    }
 
@@ -108,10 +124,19 @@ export default class Router {
       // 1. Buscar coincidencia exacta en el mapa
       const exactMatch = this.pathToRouteMap.get(path);
       if (exactMatch) {
+         // Si es una ruta hija y tiene un padre definido, devolvemos el padre en su lugar
+         if (exactMatch.parentRoute) {
+            // Mantenemos la información de parámetros que viene de la ruta actual
+            return { 
+               route: exactMatch.parentRoute, 
+               params: {},
+               childRoute: exactMatch // Guardamos la referencia a la ruta hija original
+            };
+         }
          return { route: exactMatch, params: {} };
       }
    
-      // 2. Buscar coincidencias en rutas con parámetros (que contengan la sintaxis `${...}`)
+      // 2. Buscar coincidencias en rutas con parámetros
       for (const [routePattern, route] of this.pathToRouteMap.entries()) {
          if (routePattern.includes('${')) {
             const { regex, paramNames } = this.compilePathPattern(routePattern);
@@ -119,34 +144,35 @@ export default class Router {
             if (match) {
                const params = {};
                paramNames.forEach((name, i) => {
-                  params[name] = match[i + 1]; // El grupo 0 es la coincidencia completa
+                  params[name] = match[i + 1];
                });
+               
+               // Si es una ruta hija, devolvemos el padre con los parámetros
+               if (route.parentRoute) {
+                  return { 
+                     route: route.parentRoute, 
+                     params: params,
+                     childRoute: route
+                  };
+               }
+               
                return { route, params };
             }
          }
       }
    
-      // 3. Si no hay coincidencias, retornar la ruta 404 (suponiendo que exista)
+      // 3. Si no hay coincidencias, retornar la ruta 404
       const notFoundRoute = this.pathToRouteMap.get('/404');
       return { route: notFoundRoute, params: {} };
    }
 
-   /**
- * Convierte un patrón de ruta con parámetros en una expresión regular.
- * Por ejemplo, el patrón "/User/${id}" se convertirá en:
- *   - regex: /^\/User\/([^/]+)$/
- *   - paramNames: ['id']
- */
-compilePathPattern(pattern) {
-   const paramNames = [];
-   // Reemplaza cada aparición de ${param} por un grupo capturador que coincida con cualquier cosa
-   // que no sea una barra (para que solo capture hasta la siguiente barra)
-   const regexPattern = '^' + pattern.replace(/\$\{([^}]+)\}/g, (_, paramName) => {
-      paramNames.push(paramName);
-      return '([^/]+)';
-   }) + '$';
-
-   return { regex: new RegExp(regexPattern), paramNames };
-}
-
-}
+   compilePathPattern(pattern) {
+      const paramNames = [];
+      const regexPattern = '^' + pattern.replace(/\$\{([^}]+)\}/g, (_, paramName) => {
+         paramNames.push(paramName);
+         return '([^/]+)';
+      }) + '$';
+
+      return { regex: new RegExp(regexPattern), paramNames };
+   }
+}

package/api/index.js

@@ -0,0 +1,99 @@
+import express from 'express';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { dirname } from 'path';
+import inquirer from 'inquirer';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+import sliceConfig from '../src/sliceConfig.json' with { type: 'json' };
+
+let server;
+
+const app = express();
+const PORT = 3001;
+
+const isProduction = sliceConfig.production === true;
+const folderDeployed = isProduction ? 'dist' : 'src';
+
+// Servir archivos estáticos desde la carpeta 'Slice'
+app.use('/Slice/', express.static(path.join(__dirname, '..', 'node_modules', 'slicejs-web-framework', 'Slice')));
+// Servir archivos estáticos desde la carpeta 'App'
+
+
+
+
+
+app.get('/testing1', (req, res) => {
+   res.send(` Actual route in server: __dirname: ${__dirname} __filename: ${__filename} - checking if file exists: ${path.join(__dirname, '..', 'src','App', 'index.html')}`);
+});
+
+
+app.use(express.static(path.join(__dirname,'..', folderDeployed)));
+
+
+app.get('/testing2', (req, res) => {
+   res.send(` Actual route in server: __dirname: ${__dirname} __filename: ${__filename} - checking if file exists: ${path.join(__dirname, '..', 'src','App', 'index.html')}`);
+});
+
+if(isProduction){
+   
+}
+
+
+// Ruta para servir el index.html desde la carpeta 'App'
+app.get('*', (req, res) => {
+   const filePath = path.join(__dirname, '..', 'src','App', 'index.html');
+   res.sendFile(filePath);
+});
+
+function startServer() {
+   server = app.listen(PORT, () => {    
+      showMenu();
+   });
+}
+
+async function showMenu() {
+
+   console.clear();
+   console.log("\n=================================");
+   console.log("       SLICE SERVER MENU       ");
+   console.log("=================================\n");
+
+   const url = `http://localhost:${PORT}`;
+      console.log(`Server is running on port ${PORT}, ${url}\n`);
+
+   while (true) {
+      const { action } = await inquirer.prompt([
+         {
+            type: 'list',
+            name: 'action',
+            message: 'Select an option:',
+            choices: ['Restart Server', 'Stop Server (Exit)']
+         }
+      ]);
+      
+      if (action === 'Stop Server (Exit)') {
+         console.log('\nShutting down server...');
+         server.close(() => {
+            console.log('Server stopped.');
+            process.exit(0);
+         });
+         break;
+      } else if (action === 'Restart Server') {
+         console.log('\nRestarting server...');
+         server.close(() => {
+            console.log('Server stopped. Restarting...');
+            startServer();
+         });
+         break;
+      }
+   }
+}
+
+startServer();
+
+
+export default app;
+
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slicejs-web-framework",
-  "version": "1.0.6",
+  "version": "1.0.9",
   "description": "",
   "engines": {
     "node": "20.x"

package/src/App/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Slice - Documentation</title>
+    <link rel="icon" type="image/x-icon" href="/../../images/favicon.ico" />
+    <link rel="stylesheet" type="text/css" href="/App/style.css" />
+
+    <!-- Prism -->
+
+   
+
+    <!-- Eliminar Prism despues-->
+  </head>
+
+  <body>
+    <div id="app">
+      <script src="/App/index.js" type="module"></script>
+    </div>
+  </body>
+</html>

package/src/App/index.js

@@ -0,0 +1,63 @@
+import Slice from '/Slice/Slice.js';
+
+const CACHE_NAME = 'slice-cache-v1';
+const urlsToCache = [
+   // Añade aquí las rutas de los archivos que deseas almacenar
+   './Slice/Slice.js',
+   './Slice/Components/Structural/Logger/Logger.js',
+   './Slice/Components/Structural/Debugger/Debugger.js',
+   './Slice/Components/Structural/Router/Router.js',
+   './Slice/Components/Structural/Router/routes.js',
+   './Slice/Components/Structural/Controller/Controller.js',
+   './Slice/Components/Structural/StylesManager/StylesManager.js',
+   './Slice/Components/Structural/StylesManager/ThemeManager/ThemeManager.js',
+];
+
+self.addEventListener('install', (event) => {
+   event.waitUntil(
+      caches.open(CACHE_NAME).then((cache) => {
+         console.log('Opened cache');
+         return cache.addAll(urlsToCache);
+      })
+   );
+});
+
+self.addEventListener('fetch', (event) => {
+   event.respondWith(
+      caches.match(event.request).then((response) => {
+         if (response) {
+            return response;
+         }
+         return fetch(event.request);
+      })
+   );
+});
+
+self.addEventListener('activate', (event) => {
+   const cacheWhitelist = [CACHE_NAME];
+
+   event.waitUntil(
+      caches.keys().then((cacheNames) => {
+         return Promise.all(
+            cacheNames.map((cacheName) => {
+               if (cacheWhitelist.indexOf(cacheName) === -1) {
+                  return caches.delete(cacheName);
+               }
+            })
+         );
+      })
+   );
+});
+
+if ('serviceWorker' in navigator) {
+   window.addEventListener('load', () => {
+      navigator.serviceWorker
+         .register('/service-worker.js')
+         .then((registration) => {
+            console.log('Service Worker registrado con éxito:', registration);
+         })
+         .catch((error) => {
+            console.log('Error al registrar el Service Worker:', error);
+         });
+   });
+}

package/src/App/style.css

@@ -0,0 +1,40 @@
+/* :root {
+  --docs-width: 64%;
+}
+slice-layout {
+  display: flex;
+  justify-content: center;
+}
+
+p {
+  text-align: justify;
+}
+h1 {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid var(--secondary-background-color);
+}
+h2 {
+  padding-top: 10px;
+}
+.grid-container {
+  overflow-x: auto;
+}
+@media only screen and (max-width: 770px) {
+  :root {
+    --docs-width: 100%;
+  }
+}
+* {
+  font-family: var(--font-family);
+}
+.docs_container {
+  color: var(--font-primary-color);
+  margin-top: 100px;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  width: var(--docs-width);
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-bottom: 25px;
+} */

package/src/Components/AppComponents/ButtonDocumentation/ButtonDocumentation.css

@@ -0,0 +1,16 @@
+.buttonsGrid {
+  width: 100%;
+}
+.buttons {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+.buttonsContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  /* width: 100%; */
+}

package/src/Components/AppComponents/ButtonDocumentation/ButtonDocumentation.html

@@ -0,0 +1,22 @@
+<h1 id="sliceButton">Slice Button</h1>
+<div class="myButton">
+  <p>
+    To build a simple Slice Button you only need to use the "slice.build"
+    method, just like that you have a Slice Button that you can customize with a
+    value prop.
+  </p>
+</div>
+<div class="colorButton">
+  <h2 id="customization">Customization</h2>
+  <p>
+    You can also cutomize your Slice Button specifying it's background color
+    with "customColor.button" and it's font color with "customColor.label".
+  </p>
+</div>
+<div class="onClick">
+  <h2 id="onClickCallback">onClickCallback</h2>
+  <p>
+    At last but not least you can add a function to your button with the prop
+    "onClickCallback".
+  </p>
+</div>

package/src/Components/AppComponents/ButtonDocumentation/ButtonDocumentation.js

@@ -0,0 +1,102 @@
+export default class ButtonDocumentation extends HTMLElement {
+   constructor(props) {
+      super();
+      slice.attachTemplate(this);
+
+      slice.controller.setComponentProps(this, props);
+      this.debuggerProps = [];
+   }
+
+   async init() {
+      const grid = await slice.build('Grid', { columns: 2, rows: 1 });
+      grid.classList.add('buttonsGrid');
+
+      const simpleButton = await this.createButton(null, {});
+      const myButton = await this.createButton(
+         null,
+         {
+            value: 'Slice Button',
+         },
+         `{
+        value: "Slice Button",
+      }`
+      );
+
+      if (window.screen.width <= 770) {
+         grid.columns = 1;
+      }
+
+      await grid.setItem(simpleButton);
+      await grid.setItem(myButton);
+
+      this.querySelector('.myButton').appendChild(grid);
+
+      await this.createButton(
+         this.querySelector('.colorButton'),
+         {
+            value: 'Color Button',
+            customColor: { label: 'black', button: 'red' },
+         },
+         `{
+        value: "Color Button",
+        customColor: { label: "black", button: "red" },
+      }`
+      );
+      const clickButton = await this.createButton(
+         this.querySelector('.onClick'),
+         {
+            value: 'Click',
+            onClickCallback: () => {
+               if (clickButton.value === 'Click') {
+                  clickButton.value = 'Clicked';
+               } else {
+                  clickButton.value = 'Click';
+               }
+            },
+         },
+         `{
+        value: "Click",
+        onClickCallback: () => {
+          if (myButton.value === "Click") {
+            myButton.value = "Clicked";
+          } else {
+            myButton.value = "Click";
+          }
+        },
+      }`
+      );
+   }
+
+   async createButton(appendTo, buttonProps, codeProps) {
+      if (!codeProps) {
+         codeProps = '{}';
+      }
+      const myButton = await slice.build('Button', buttonProps);
+
+      const componentCode = await slice.build('CodeVisualizer', {
+         value: `const myButton = await slice.build("Button", ${codeProps});
+
+`,
+         language: 'javascript',
+      });
+
+      const div = document.createElement('div');
+      const buttonDiv = document.createElement('div');
+      buttonDiv.classList.add('buttons');
+      buttonDiv.appendChild(myButton);
+      div.classList.add('buttonsContainer');
+      div.appendChild(buttonDiv);
+      div.appendChild(componentCode);
+
+      if (appendTo) {
+         appendTo.appendChild(div);
+      }
+      if (buttonProps.onClickCallback) {
+         return myButton;
+      }
+
+      return div;
+   }
+}
+
+customElements.define('slice-buttondocumentation', ButtonDocumentation);

package/src/Components/AppComponents/CardDocumentation/CardDocumentation.css

@@ -0,0 +1,15 @@
+:root {
+  --cards-padding: 30%;
+}
+.cards {
+  padding-left: var(--cards-padding);
+  padding-right: var(--cards-padding);
+  margin-top: 50px;
+  margin-bottom: 50px;
+}
+
+@media only screen and (max-width: 770px) {
+  :root {
+    --cards-padding: 20px;
+  }
+}

package/src/Components/AppComponents/CardDocumentation/CardDocumentation.html

@@ -0,0 +1,38 @@
+<h1 id="sliceCard">Slice Card</h1>
+<div class="sliceCard">
+  <p>
+    When building a "Card" component, by default it's created with the Slice
+    logo, and with a default title and text.
+  </p>
+</div>
+<div class="myCard">
+  <h2 id="myCard">Title and Text</h2>
+  <p>
+    To build your own Slice Card with your information it's as simple as just
+    adding "title" and "text" props to your component.
+  </p>
+</div>
+<div class="cardClick">
+  <h2 id="cardClick">Click Event | "isOpen" prop</h2>
+  <p>
+    The Slice Card component has an click eventListener. While the card is
+    uncovered and shows the information inside, it's cover can be clicked to
+    keep open. Changing it's "isOpen" prop to true. That same eventListener can
+    change it back to false, and cover up the card again.
+  </p>
+</div>
+<h1 id="customization">Customization</h1>
+<div class="cardIcon">
+  <h2 id="icon">Icon</h2>
+  <p>
+    You can start your Slice Card customization by assignin another icon to it.
+  </p>
+</div>
+<div class="cardColor">
+  <h2 id="customColor">Custom Color</h2>
+  <p>
+    You can also change card color by using "customColor" props, using
+    "customColor.card" to change it's background, and "customColor.icon" to
+    change the icon's color.
+  </p>
+</div>