slicejs-web-framework 1.0.19 → 1.0.20

package/src/Components/AppComponents/CodeVisualizer/CodeVisualizer.js

@@ -1,263 +0,0 @@
-export default class CodeVisualizer extends HTMLElement {
-   constructor(props) {
-      super();
-      slice.attachTemplate(this);
-
-      this.$container = this.querySelector('.codevisualizer_container');
-      this.$code = this.querySelector('.codevisualizer');
-      this.$copyButton = this.querySelector('.copy-button');
-
-      // Configurar el botón de copiado
-      this.$copyButton.addEventListener('click', () => this.copyCodeToClipboard());
-
-      slice.controller.setComponentProps(this, props);
-      this.debuggerProps = ['language', 'value'];
-   }
-
-   set value(value) {
-      this._value = value;
-   }
-
-   get value() {
-      return this._value;
-   }
-
-   set language(value) {
-      this._language = value;
-   }
-
-   get language() {
-      return this._language;
-   }
-
-   init() {
-      this.visualizeCode();
-   }
-
-   visualizeCode() {
-      if (this._value && this._language) {
-         const highlightedCode = this.highlightCode(this._value, this._language);
-         this.$code.innerHTML = `<pre><code class="language-${this._language}">${highlightedCode}</code></pre>`;
-      }
-   }
-
-   copyCodeToClipboard() {
-      // Obtenemos el texto sin formato (sin las etiquetas HTML de resaltado)
-      const textToCopy = this._value;
-      
-      // Utilizar el API de clipboard
-      navigator.clipboard.writeText(textToCopy)
-         .then(() => {
-            // Cambiar el texto del botón temporalmente para indicar éxito
-            this.$copyButton.textContent = '✓ Copiado!';
-            this.$copyButton.classList.add('copied');
-            
-            // Restaurar el texto original después de 1.5 segundos
-            setTimeout(() => {
-               this.$copyButton.textContent = 'Copiar';
-               this.$copyButton.classList.remove('copied');
-            }, 1500);
-         })
-         .catch(err => {
-            console.error('Error al copiar al portapapeles: ', err);
-            this.$copyButton.textContent = '❌ Error!';
-            
-            setTimeout(() => {
-               this.$copyButton.textContent = 'Copiar';
-            }, 1500);
-         });
-   }
-
-   highlightCode(code, language) {
-      // Escape HTML to prevent XSS
-      const escapedCode = this.escapeHtml(code);
-      
-      switch (language.toLowerCase()) {
-         case 'javascript':
-         case 'js':
-            return this.highlightJavaScript(escapedCode);
-         case 'html':
-            return this.highlightHtml(escapedCode);
-         case 'css':
-            return this.highlightCss(escapedCode);
-         default:
-            return escapedCode;
-      }
-   }
-
-   escapeHtml(text) {
-      return text
-         .replace(/&/g, '&amp;')
-         .replace(/</g, '&lt;')
-         .replace(/>/g, '&gt;')
-         .replace(/"/g, '&quot;')
-         .replace(/'/g, '&#039;');
-   }
-
-   highlightJavaScript(code) {
-      // Este método fue rediseñado por completo para evitar problemas de superposición
-      let tokenizedCode = code;
-      
-      // Creamos una estructura para almacenar todos los tokens y luego reemplazarlos de una sola vez
-      const tokens = [];
-      
-      // Función para generar un ID único para cada token
-      const generateTokenId = (index) => `__TOKEN_${index}__`;
-      
-      // Función para extraer tokens y reemplazarlos con marcadores
-      const extractTokens = (regex, className) => {
-         tokenizedCode = tokenizedCode.replace(regex, (match) => {
-            const tokenId = generateTokenId(tokens.length);
-            tokens.push({ id: tokenId, content: match, className });
-            return tokenId;
-         });
-      };
-      
-      // Extraer los tokens en orden específico para evitar interferencias
-      
-      // 1. Primero los comentarios
-      extractTokens(/\/\/.*$/gm, 'code-comment');
-      extractTokens(/\/\*[\s\S]*?\*\//g, 'code-comment');
-      
-      // 2. Luego las cadenas de texto
-      extractTokens(/(['"`])(?:\\.|[^\\])*?\1/g, 'code-string');
-      
-      // 3. Luego los números
-      extractTokens(/\b(\d+(?:\.\d+)?)\b/g, 'code-number');
-      
-      // 4. Palabras clave
-      const keywords = [
-         'await', 'async', 'break', 'case', 'catch', 'class', 'const', 'continue',
-         'debugger', 'default', 'delete', 'do', 'else', 'export', 'extends', 'false',
-         'finally', 'for', 'function', 'if', 'import', 'in', 'instanceof', 'new',
-         'null', 'return', 'super', 'switch', 'this', 'throw', 'true', 'try',
-         'typeof', 'var', 'void', 'while', 'with', 'yield', 'let'
-      ];
-      extractTokens(new RegExp(`\\b(${keywords.join('|')})\\b`, 'g'), 'code-keyword');
-      
-      // 5. Objetos y métodos integrados
-      const builtins = [
-         'Array', 'Boolean', 'Date', 'Error', 'Function', 'JSON', 'Math',
-         'Number', 'Object', 'Promise', 'RegExp', 'String', 'console', 'document',
-         'window', 'slice', 'Map', 'Set', 'Symbol', 'setTimeout', 'setInterval'
-      ];
-      extractTokens(new RegExp(`\\b(${builtins.join('|')})\\b`, 'g'), 'code-builtin');
-      
-      // 6. Métodos y llamadas a funciones (esto debe ir después de extraer las palabras clave)
-      extractTokens(/(\.)([a-zA-Z_$][\w$]*)\s*(?=\()/g, 'code-method');
-      
-      // Reemplazar los tokens con el HTML resaltado
-      tokens.forEach(token => {
-         tokenizedCode = tokenizedCode.replace(
-            token.id, 
-            `<span class="${token.className}">${token.content}</span>`
-         );
-      });
-      
-      return tokenizedCode;
-   }
-
-   highlightHtml(code) {
-      // Utilizamos un enfoque similar al de JavaScript para HTML
-      let tokenizedCode = code;
-      const tokens = [];
-      const generateTokenId = (index) => `__TOKEN_${index}__`;
-      
-      const extractTokens = (regex, className) => {
-         tokenizedCode = tokenizedCode.replace(regex, (match) => {
-            const tokenId = generateTokenId(tokens.length);
-            tokens.push({ id: tokenId, content: match, className });
-            return tokenId;
-         });
-      };
-      
-      // Extraer tokens HTML en orden
-      
-      // 1. Comentarios HTML
-      extractTokens(/&lt;!--[\s\S]*?--&gt;/g, 'code-comment');
-      
-      // 2. Etiquetas HTML
-      extractTokens(/(&lt;\/?[a-zA-Z0-9-]+)(\s|&gt;)/g, (match, tag, end) => {
-         const tokenId = generateTokenId(tokens.length);
-         tokens.push({ 
-            id: tokenId, 
-            content: `<span class="code-tag">${tag}</span>${end}`,
-            className: 'no-class' // Ya incluye su propio elemento span
-         });
-         return tokenId;
-      });
-      
-      // 3. Atributos HTML
-      extractTokens(/\s([a-zA-Z0-9-]+)=(&quot;|&#039;)/g, (match, attr, quote) => {
-         const tokenId = generateTokenId(tokens.length);
-         tokens.push({ 
-            id: tokenId, 
-            content: ` <span class="code-attribute">${attr}</span>=${quote}`,
-            className: 'no-class' // Ya incluye su propio elemento span
-         });
-         return tokenId;
-      });
-      
-      // Reemplazar los tokens con el HTML resaltado
-      tokens.forEach(token => {
-         tokenizedCode = tokenizedCode.replace(
-            token.id, 
-            token.className === 'no-class' ? token.content : `<span class="${token.className}">${token.content}</span>`
-         );
-      });
-      
-      return tokenizedCode;
-   }
-
-   highlightCss(code) {
-      // Utilizamos el mismo enfoque para CSS
-      let tokenizedCode = code;
-      const tokens = [];
-      const generateTokenId = (index) => `__TOKEN_${index}__`;
-      
-      const extractTokens = (regex, className, processor = null) => {
-         tokenizedCode = tokenizedCode.replace(regex, (match, ...groups) => {
-            const tokenId = generateTokenId(tokens.length);
-            const content = processor ? processor(match, ...groups) : match;
-            tokens.push({ id: tokenId, content, className });
-            return tokenId;
-         });
-      };
-      
-      // Comentarios CSS
-      extractTokens(/\/\*[\s\S]*?\*\//g, 'code-comment');
-      
-      // Selectores CSS
-      extractTokens(/([^\{\}]+)(?=\{)/g, 'code-selector');
-      
-      // Propiedad y valor CSS (manipulando la coincidencia para preservar la estructura)
-      tokenizedCode = tokenizedCode.replace(/(\s*)([a-zA-Z-]+)(\s*):(\s*)([^;\{\}]+)(?=;)/g, (match, space1, prop, space2, space3, value) => {
-         const propTokenId = generateTokenId(tokens.length);
-         tokens.push({ id: propTokenId, content: prop, className: 'code-property' });
-         
-         const valueTokenId = generateTokenId(tokens.length);
-         tokens.push({ id: valueTokenId, content: value, className: 'code-value' });
-         
-         return `${space1}<span class="code-property">${prop}</span>${space2}:${space3}<span class="code-value">${value}</span>`;
-      });
-      
-      // Colores CSS
-      extractTokens(/#([a-fA-F0-9]{3,6})\b/g, 'code-color');
-      
-      // Reemplazar los tokens restantes
-      tokens.forEach(token => {
-         if (token.className !== 'no-replace') {
-            tokenizedCode = tokenizedCode.replace(
-               token.id, 
-               `<span class="${token.className}">${token.content}</span>`
-            );
-         }
-      });
-      
-      return tokenizedCode;
-   }
-}
-
-customElements.define('slice-codevisualizer', CodeVisualizer);
-
-   

package/src/Components/AppComponents/Documentation/Documentation.html

@@ -1,30 +0,0 @@
-<h1>Slice Documentation</h1>
-<p>
-  The Slice Framework is a modular system based on components, designed to simplify web client development. Its architecture allows functionality to be divided into reusable modules, making maintenance and expansion easier.
-</p>
-<p>
-  Components are classified into three main categories: <span>Visual</span>, <span>Structural</span>, and <span>Services</span>. Visual components build the user interface, structural components manage the framework’s core infrastructure, and service components handle business logic and integrations.
-</p>
-
-<div class="visualComponents">
-    <h2>Visual Components</h2>
-    <p>
-        These components define the web client interface using custom HTML tags powered by the Web Components API. They encapsulate logic for dynamic styling, UI interactions, and backend communication via HTTP requests.
-    </p>
-</div>
-
-<div class="structuralComponents">
-    <h2>Structural Components</h2>
-    <p>
-        Structural components provide the core framework infrastructure, managing instances, tracking activities, and optimizing performance. They ensure seamless control over application behavior and debugging.
-    </p>
-</div>
-
-<div class="serviceComponents">
-    <h2>Service Components</h2>
-    <p>
-        Services encapsulate business logic and facilitate integrations with technologies like HTTP requests, local storage, and IndexedDB. They promote code reusability and simplify application development.
-    </p>
-</div>
-
-<div class="qna"></div>

package/src/Components/AppComponents/Documentation/Documentation.js

@@ -1,75 +0,0 @@
-export default class Documentation extends HTMLElement {
-   constructor(props) {
-      super();
-      slice.attachTemplate(this);
-
-      slice.controller.setComponentProps(this, props);
-      this.debuggerProps = [];
-   }
-
-   async init() {
-      const htmlCard = await slice.build('Card', {
-         title: 'HTML',
-         text: 'HyperText Markup Language is the most basic building block of the Web. It defines the meaning and structure of web content.',
-         icon: {
-            name: 'html',
-            iconStyle: 'filled',
-         },
-         customColor: {
-            card: '#E36A2F',
-            icon: 'white',
-         },
-      });
-      const jsCard = await slice.build('Card', {
-         title: 'JS',
-         text: 'JavaScript is a lightweight interpreted (or just-in-time compiled) programming language with first-class functions.',
-         icon: {
-            name: 'javascript',
-            iconStyle: 'filled',
-         },
-         customColor: {
-            card: 'gold',
-            icon: 'white',
-         },
-      });
-      const cssCard = await slice.build('Card', {
-         title: 'CSS',
-         text: 'Cascading Style Sheets is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.',
-         icon: {
-            name: 'css',
-            iconStyle: 'filled',
-         },
-         customColor: {
-            card: '#519ABA',
-            icon: 'white',
-         },
-      });
-      const grid = await slice.build('Grid', {
-         columns: 3,
-         rows: 1,
-         items: [htmlCard, jsCard, cssCard],
-      });
-
-      if (window.screen.width <= 770) {
-         grid.columns = 1;
-      }
-
-      this.querySelector('.visualComponents').appendChild(grid);
-
-      //Q & A
-      const buildQuestion = await slice.build('Details', {
-         title: 'How can i build a component?',
-         text: "To build a component you need to call the slice.build method with it's required props.",
-      });
-      const buildExample = await slice.build('CodeVisualizer', {
-         value: `const mySliceComponent = await slice.build("MySliceComponentName", props)`,
-         language: 'javascript',
-      });
-
-      buildQuestion.addDetail(buildExample);
-
-      this.querySelector('.qna').appendChild(buildQuestion);
-   }
-}
-
-customElements.define('slice-documentation', Documentation);

package/src/Components/AppComponents/DocumentationPage/DocumentationPage.css

@@ -1,62 +0,0 @@
-.visualComponents p span {
-  color: var(--primary-color);
-}
-:root {
-  --docs-width: 64%;
-}
-slice-documentation-page slice-route,
-slice-documentation-page slice-multi-route {
-  display: flex;
-  justify-content: center;
-}
-
-slice-mainmenu{
-  position: fixed;
-  top: 0;
-  left: 0;
-  font-family: var(--font-family);
-  background-color: var(--primary-background-color);
-  border-right: 1px solid var(--primary-color-shade);
-  /* box-shadow: 10px 0 10px 0px #00000020; */
-  display: flex;
-  align-items: center;
-  height: 100%;
-  width: 17%;
-  transition: transform 0.3s ease, width 0.3s ease;
-  overflow-x: hidden;
-}
-
-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);
-}
-
-slice-multi-route > :first-child {
-  margin-top: 60px;
-  color: var(--font-primary-color);
-  margin-top: 60px;
-  overflow-y: scroll;
-  overflow-x: hidden;
-  width: var(--docs-width);
-  padding-left: 10px;
-  padding-right: 10px;
-  padding-bottom: 25px;
-}