slicejs-web-framework 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Victor Jose Kneider Alnahi and Julio Antonio Graterol Bracho
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,207 @@
+<!-- Improved compatibility of back to top link: See: https://github.com/VKneider/slice.js/pull/73 -->
+<a name="readme-top"></a>
+<!--
+*** Thanks for checking out the slice.js. If you have a suggestion
+*** that would make this better, please fork the repo and create a pull request
+*** or simply open an issue with the tag "enhancement".
+*** Don't forget to give the project a star!
+*** Thanks again! Now go create something AMAZING! :D
+-->
+
+
+
+<!-- PROJECT SHIELDS -->
+<!--
+*** I'm using markdown "reference style" links for readability.
+*** Reference links are enclosed in brackets [ ] instead of parentheses ( ).
+*** See the bottom of this document for the declaration of the reference variables
+*** for contributors-url, forks-url, etc. This is an optional, concise syntax you may use.
+*** https://www.markdownguide.org/basic-syntax/#reference-style-links
+-->
+[![Contributors][contributors-shield]][contributors-url]
+[![Forks][forks-shield]][forks-url]
+[![Stargazers][stars-shield]][stars-url]
+[![Issues][issues-shield]][issues-url]
+[![MIT License][license-shield]][license-url]
+
+
+
+<!-- PROJECT LOGO -->
+<br />
+<div align="center">
+  <a href="https://github.com/VKneider/slice.js">
+    <img src="readme_images/Slice.js-logo.svg" alt="Logo" width="150" height="150">
+  </a>
+
+  <h3 align="center">Slice.js</h3>
+
+  <p align="center">
+    Component-Based Web Development Framework
+    <br />
+    <a href="https://slice-js.vercel.app/src/App/Documentation/"><strong>Explore the docs »</strong></a>
+    <br />
+    <br />
+    <a href="https://slice-js.vercel.app/src/App/LandingPage/">View Demo</a>
+    ·
+    <a href="https://github.com/VKneider/slice.js/issues/new?labels=bug&template=bug-report---.md">Report Bug</a>
+    ·
+    <a href="https://github.com/VKneider/slice.js/issues/new?labels=enhancement&template=feature-request---.md">Request Feature</a>
+  </p>
+</div>
+
+
+
+<!-- TABLE OF CONTENTS -->
+<details>
+  <summary>Table of Contents</summary>
+  <ol>
+    <li>
+      <a href="#about-the-project">About The Project</a>
+    </li>
+    <li>
+      <a href="#getting-started">Getting Started</a>
+      <ul>
+        <li><a href="#prerequisites">Prerequisites</a></li>
+        <li><a href="#installation">Installation</a></li>
+      </ul>
+    </li>
+    <li><a href="#roadmap">Roadmap</a></li>
+    <li><a href="#contributing">Contributing</a></li>
+    <li><a href="#license">License</a></li>
+    <li><a href="#contact">Contact</a></li>
+  </ol>
+</details>
+
+
+
+<!-- ABOUT THE PROJECT -->
+## About The Project
+
+[![Product Name Screen Shot][product-screenshot]](https://slice-js.vercel.app/src/App/LandingPage/)
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<!-- GETTING STARTED -->
+## Getting Started
+
+This is an example of how you may give instructions on setting up your project locally.
+To get a local copy up and running follow these simple example steps.
+
+### Prerequisites
+
+This is an example of how to list things you need to use the software and how to install them.
+* npm
+  ```sh
+  npm install npm@latest -g
+  ```
+
+### Installation
+
+_Below is an example of how you can instruct your audience on installing and setting up your app. This template doesn't rely on any external dependencies or services._
+
+1. Get a free API Key at [https://example.com](https://example.com)
+2. Clone the repo
+   ```sh
+   git clone https://github.com/your_username_/Project-Name.git
+   ```
+3. Install NPM packages
+   ```sh
+   npm install
+   ```
+4. Enter your API in `config.js`
+   ```js
+   const API_KEY = 'ENTER YOUR API';
+   ```
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+
+
+<!-- ROADMAP -->
+## Roadmap
+
+- [x] Add Changelog
+- [x] Add Image visual component
+- [ ] Add Router structural component
+- [ ] Add "components" document to easily copy & paste sections of the readme
+- [ ] Multi-language Support
+    - [ ] Chinese
+    - [ ] Spanish
+
+See the [open issues](https://github.com/VKneider/slice.js/issues) for a full list of proposed features (and known issues).
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+
+
+<!-- CONTRIBUTING -->
+## Contributing
+
+Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
+
+If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
+Don't forget to give the project a star! Thanks again!
+
+1. Fork the Project
+2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
+3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
+4. Push to the Branch (`git push origin feature/AmazingFeature`)
+5. Open a Pull Request
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+
+
+<!-- LICENSE -->
+## License
+
+Distributed under the MIT License. See `LICENSE` for more information.
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+
+
+<!-- CONTACT -->
+## Contact
+
+Your Name - [@your_twitter](https://twitter.com/your_username) - email@example.com
+
+Project Link: [https://github.com/VKneider/slice.js](https://github.com/VKneider/slice.js)
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+
+
+
+
+<!-- MARKDOWN LINKS & IMAGES -->
+<!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->
+[contributors-shield]: https://img.shields.io/github/contributors/VKneider/slice.js.svg?style=for-the-badge
+[contributors-url]: https://github.com/VKneider/slice.js/graphs/contributors
+[forks-shield]: https://img.shields.io/github/forks/VKneider/slice.js.svg?style=for-the-badge
+[forks-url]: https://github.com/VKneider/slice.js/network/members
+[stars-shield]: https://img.shields.io/github/stars/VKneider/slice.js.svg?style=for-the-badge
+[stars-url]: https://github.com/VKneider/slice.js/stargazers
+[issues-shield]: https://img.shields.io/github/issues/VKneider/slice.js.svg?style=for-the-badge
+[issues-url]: https://github.com/VKneider/slice.js/issues
+[license-shield]: https://img.shields.io/github/license/VKneider/slice.js.svg?style=for-the-badge
+[license-url]: https://github.com/VKneider/slice.js/blob/master/LICENSE.txt
+[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
+[linkedin-url]: https://linkedin.com/in/VKneider
+[product-screenshot]: readme_images/screenshot.JPG
+[Next.js]: https://img.shields.io/badge/next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white
+[Next-url]: https://nextjs.org/
+[React.js]: https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB
+[React-url]: https://reactjs.org/
+[Vue.js]: https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge&logo=vuedotjs&logoColor=4FC08D
+[Vue-url]: https://vuejs.org/
+[Angular.io]: https://img.shields.io/badge/Angular-DD0031?style=for-the-badge&logo=angular&logoColor=white
+[Angular-url]: https://angular.io/
+[Svelte.dev]: https://img.shields.io/badge/Svelte-4A4A55?style=for-the-badge&logo=svelte&logoColor=FF3E00
+[Svelte-url]: https://svelte.dev/
+[Laravel.com]: https://img.shields.io/badge/Laravel-FF2D20?style=for-the-badge&logo=laravel&logoColor=white
+[Laravel-url]: https://laravel.com
+[Bootstrap.com]: https://img.shields.io/badge/Bootstrap-563D7C?style=for-the-badge&logo=bootstrap&logoColor=white
+[Bootstrap-url]: https://getbootstrap.com
+[JQuery.com]: https://img.shields.io/badge/jQuery-0769AD?style=for-the-badge&logo=jquery&logoColor=white
+[JQuery-url]: https://jquery.com 

package/Slice/Components/Structural/Controller/Controller.js

@@ -0,0 +1,175 @@
+import components from '/Components/components.js';
+
+export default class Controller {
+   constructor() {
+      this.componentCategories = new Map(Object.entries(components));
+      this.templates = new Map();
+      this.classes = new Map();
+      this.requestedStyles = new Set();
+      this.activeComponents = new Map();
+      this.idCounter = 0;
+   }
+
+   logActiveComponents() {
+      this.activeComponents.forEach((component) => {
+         let parent = component.parentComponent;
+         let parentName = parent ? parent.constructor.name : null;
+      });
+   }
+
+   getTopParentsLinkedToActiveComponents() {
+      let topParentsLinkedToActiveComponents = new Map();
+      this.activeComponents.forEach((component) => {
+         let parent = component.parentComponent;
+         while (parent && parent.parentComponent) {
+            parent = parent.parentComponent;
+         }
+         if (!topParentsLinkedToActiveComponents.has(parent)) {
+            topParentsLinkedToActiveComponents.set(parent, []);
+         }
+         topParentsLinkedToActiveComponents.get(parent).push(component);
+      });
+      return topParentsLinkedToActiveComponents;
+   }
+
+   verifyComponentIds(component) {
+      const htmlId = component.id;
+
+      if (htmlId && htmlId.trim() !== '') {
+         if (this.activeComponents.has(htmlId)) {
+            slice.logger.logError(
+               'Controller',
+               `A component with the same html id attribute is already registered: ${htmlId}`
+            );
+            return false;
+         }
+      }
+
+      let sliceId = component.sliceId;
+
+      if (sliceId && sliceId.trim() !== '') {
+         if (this.activeComponents.has(sliceId)) {
+            slice.logger.logError(
+               'Controller',
+               `A component with the same slice id attribute is already registered: ${sliceId}`
+            );
+            return false;
+         }
+      } else {
+         sliceId = `${component.constructor.name[0].toLowerCase()}${component.constructor.name.slice(1)}-${this.idCounter}`;
+         component.sliceId = sliceId;
+         this.idCounter++;
+      }
+
+      component.sliceId = sliceId;
+      return true;
+   }
+
+   registerComponent(component, parent = null) {
+      component.parentComponent = parent;
+      this.activeComponents.set(component.sliceId, component);
+      return true;
+   }
+
+   registerComponentsRecursively(component, parent = null) {
+      // Assign parent if not already set
+      if (!component.parentComponent) {
+         component.parentComponent = parent;
+      }
+
+      // Recursively assign parent to children
+      component.querySelectorAll('*').forEach((child) => {
+         if (child.tagName.startsWith('SLICE-')) {
+            if (!child.parentComponent) {
+               child.parentComponent = component;
+            }
+            this.registerComponentsRecursively(child, component);
+         }
+      });
+   }
+
+   getComponent(sliceId) {
+      return this.activeComponents.get(sliceId);
+   }
+
+   //Attach template to component
+   loadTemplateToComponent(component) {
+      const className = component.constructor.name;
+      const template = this.templates.get(className);
+
+      if (!template) {
+         slice.logger.logError(`Template not found for component: ${className}`);
+         return;
+      }
+
+      component.innerHTML = template.innerHTML;
+      return component;
+   }
+
+   getComponentCategory(componentSliceId) {
+      return this.componentCategories.get(componentSliceId);
+   }
+
+   async fetchText(componentName, resourceType, componentCategory, customPath) {
+      try {
+         const baseUrl = window.location.origin;
+         let path;
+
+         if (!componentCategory) {
+            componentCategory = this.componentCategories.get(componentName);
+         }
+
+         let isVisual = resourceType === 'html' || resourceType === 'css';
+
+         if(isVisual) {
+            path = `${slice.paths.components[componentCategory].path}/${componentName}`; 
+            resourceType === 'html' ? path += `/${componentName}.html` : path += `/${componentName}.css`;
+         }
+
+         if (resourceType === 'theme') {
+            path = `${baseUrl}${slice.paths.themes}/${componentName}.css`;
+         }
+
+         if (resourceType === 'styles') {
+            path = `${baseUrl}${slice.paths.styles}/${componentName}.css`;
+         }
+
+         if(customPath){
+            path = customPath;
+         }
+
+         const response = await fetch(path);
+
+         if (!response.ok) {
+            throw new Error(`Failed to fetch ${path}: ${response.statusText}`);
+         }
+
+         const html = await response.text();
+         return html;
+      } catch (error) {
+         slice.logger.logError('Controller', `Error fetching ${resourceType} for component ${componentName}:`, error);
+         // You can also re-throw the error if you want it to propagate
+         // throw error;
+      }
+   }
+
+  
+   
+
+   setComponentProps(component, props) {
+      for (const prop in props) {
+         component[`_${prop}`] = null;
+         component[prop] = props[prop];
+      }
+   }
+
+   destroyComponent(component) {
+      const sliceId = component.sliceId;
+      this.activeComponents.delete(sliceId);
+      component.remove();
+   }
+}
+
+function getRelativePath(levels) {
+   return '../'.repeat(levels);
+}

package/Slice/Components/Structural/Debugger/Debugger.css

@@ -0,0 +1,95 @@
+#debugger-container {
+  font-family: var(--font-family);
+  display: none;
+  position: fixed;
+  top: 20px;
+  left: 20px;
+  padding: 10px;
+  border: var(--slice-border) solid var(--primary-color);
+  background-color: var(--primary-background-color);
+  z-index: 1000;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+}
+
+#debugger-container.active {
+  display: block;
+}
+
+.slice_thead td {
+  font-weight: bold;
+  background-color: var(--primary-color);
+  color: var(--primary-color-contrast);
+}
+
+#close-debugger {
+  cursor: pointer;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-size: 14px;
+  color: var(--danger-color);
+}
+
+h3 {
+  color: var(--primary-color);
+  margin-bottom: 10px;
+}
+
+#component-details {
+  color: var(--font-primary-color);
+}
+.component-details-table {
+  overflow: scroll;
+  input {
+    outline: none;
+    border-bottom: 1px solid var(--tertiary-background-color);
+  }
+}
+.component-details-table::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+.component-details-table::-webkit-scrollbar-thumb {
+  background: var(--secondary-color);
+  border-radius: var(--border-radius-slice);
+}
+
+#component-details table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 10px;
+  /* border: 1px solid var(--primary-color); */
+}
+
+.debugger-header {
+  border-bottom: 1px solid var(--primary-color);
+  user-select: none;
+  cursor: grab;
+}
+
+.debugger-header:active {
+  cursor: grabbing;
+}
+
+#component-details th,
+#component-details td {
+  padding: 10px;
+  text-align: left;
+  border-bottom: 1px solid var(--primary-color);
+}
+
+input {
+  border: 0px;
+}
+
+.slice_component-details td,
+input {
+  background-color: var(--secondary-background-color);
+  color: var(--font-primary-color);
+}
+
+/* Estilo para las filas impares, solo para mejorar la legibilidad */
+#component-details tr:nth-child(odd) {
+  background-color: #f9f9f9;
+}

package/Slice/Components/Structural/Debugger/Debugger.html

@@ -0,0 +1,10 @@
+<div id="debugger-container">
+  <div class="debugger-header">
+    <div id="close-debugger">[×]</div>
+    <h3>Component Details</h3>
+  </div>
+  <div id="component-details">
+    <ul class="component-details-list"></ul>
+    <div class="component-details-table"></div>
+  </div>
+</div>