npm - slicejs-web-framework - Versions diffs - 3.2.2 → 3.3.0 - Mend

slicejs-web-framework 3.2.2 → 3.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (36) hide show

package/.opencode/opencode.json +14 -0
package/README.md +57 -134
package/Slice/Components/Structural/ContextManager/ContextManagerDebugger.js +233 -110
package/Slice/Components/Structural/Controller/Controller.js +9 -0
package/Slice/Components/Structural/Controller/allowedValuesValidation.js +52 -0
package/Slice/Components/Structural/Debugger/Debugger.js +392 -442
package/Slice/Components/Structural/EventManager/EventManagerDebugger.js +264 -149
package/Slice/Components/Structural/Router/Router.js +45 -14
package/Slice/tests/props-allowed-values-validation.test.js +119 -0
package/package.json +11 -9
package/src/App/index.html +2 -8
package/src/App/index.js +18 -21
package/src/App/style.css +8 -37
package/src/Components/AppComponents/AboutSection/AboutSection.css +9 -0
package/src/Components/AppComponents/AboutSection/AboutSection.html +8 -0
package/src/Components/AppComponents/AboutSection/AboutSection.js +12 -0
package/src/Components/AppComponents/AppShell/AppShell.css +10 -0
package/src/Components/AppComponents/AppShell/AppShell.html +4 -0
package/src/Components/AppComponents/AppShell/AppShell.js +36 -0
package/src/Components/AppComponents/HomeSection/HomeSection.css +20 -0
package/src/Components/AppComponents/HomeSection/HomeSection.html +10 -0
package/src/Components/AppComponents/HomeSection/HomeSection.js +19 -0
package/src/Components/Visual/MultiRoute/MultiRoute.js +13 -6
package/src/Components/components.js +4 -16
package/src/routes.js +6 -12
package/src/sliceConfig.json +2 -1
package/Slice/Components/Structural/Debugger/Debugger.css +0 -620
package/src/Components/AppComponents/HomePage/HomePage.css +0 -201
package/src/Components/AppComponents/HomePage/HomePage.html +0 -37
package/src/Components/AppComponents/HomePage/HomePage.js +0 -210
package/src/Components/AppComponents/Playground/Playground.css +0 -12
package/src/Components/AppComponents/Playground/Playground.html +0 -0
package/src/Components/AppComponents/Playground/Playground.js +0 -111
package/src/images/Slice.js-logo.png +0 -0
package/src/images/im2/Slice.js-logo.png +0 -0
package/src/testing.js +0 -888

package/package.json CHANGED Viewed

@@ -1,21 +1,23 @@
 {
   "name": "slicejs-web-framework",
-  "version": "3.2.2",
+  "version": "3.3.0",
   "description": "",
   "engines": {
     "node": ">=20"
   },
   "scripts": {
+    "dev": "node ./node_modules/slicejs-cli/client.js dev",
+    "build": "node ./node_modules/slicejs-cli/client.js build",
+    "start": "node ./node_modules/slicejs-cli/client.js start",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "slice:init": "node node_modules/slicejs-cli/client.js init",
-    "slice:create": "node node_modules/slicejs-cli/client.js component create",
-    "slice:delete": "node node_modules/slicejs-cli/client.js component delete",
-    "slice:list": "node node_modules/slicejs-cli/client.js component list",
-    "slice:start": "node api/index.js",
+    "slice:init": "node ./node_modules/slicejs-cli/client.js init",
+    "slice:create": "node ./node_modules/slicejs-cli/client.js component create",
+    "slice:delete": "node ./node_modules/slicejs-cli/client.js component delete",
+    "slice:list": "node ./node_modules/slicejs-cli/client.js component list",
+    "slice:start": "node ./node_modules/slicejs-cli/client.js start",
     "format": "prettier --write \"**/*.js\"",
-    "run": "node api/index.js",
-    "development": "npm run",
-    "slice:modify": "node node_modules/slicejs-cli/client.js modify"
+    "run": "node ./node_modules/slicejs-cli/client.js dev",
+    "slice:modify": "node ./node_modules/slicejs-cli/client.js modify"
   },
   "keywords": [],
   "author": "",

package/src/App/index.html CHANGED Viewed

@@ -3,15 +3,9 @@
   <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" />
+    <title>Slice App</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>

package/src/App/index.js CHANGED Viewed

@@ -1,23 +1,20 @@
 import Slice from '/Slice/Slice.js';
-/*
-slice.router.beforeEach(async (to, from, next) => {
-   if(to.metadata.private){
-      const isAuthenticated = await //fetchlogic for validation
-      if(!isAuthenticated){
-         return next({ path: '/login', replace: true });
-      }
-      return next();
-   }
-   return next();
-});
-If any beforeEach or afterEach is defined, start the router after defining them
-await slice.router.start();
-*/
+// `slice` is now a global. Routes are declared in /routes.js and the router
+// auto-starts shortly after load, so this file can stay almost empty.
+//
+// If you need navigation guards (auth, page titles, analytics), define them
+// here and then start the router EXPLICITLY (this cancels the auto-start):
+//
+// slice.router.beforeEach(async (to, from, next) => {
+//   if (to.metadata?.private && !slice.context.getState('auth')?.isLoggedIn) {
+//     return next({ path: '/login', replace: true });
+//   }
+//   next();
+// });
+//
+// slice.router.afterEach((to) => {
+//   document.title = to.metadata?.title ?? 'Slice App';
+// });
+//
+// await slice.router.start();

package/src/App/style.css CHANGED Viewed

@@ -1,40 +1,11 @@
-/* :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%;
-  }
-}
+/* App-level base styles. Component styles live in each component's own .css. */
 * {
-  font-family: var(--font-family);
+  box-sizing: border-box;
+  font-family: var(--font-family, system-ui, -apple-system, Segoe UI, Roboto, sans-serif);
 }
-.docs_container {
+body {
+  margin: 0;
+  background: var(--primary-background-color);
   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/AboutSection/AboutSection.css ADDED Viewed

@@ -0,0 +1,9 @@
+.about {
+  padding: 16px 0;
+}
+.about p {
+  color: var(--font-secondary-color);
+  max-width: 65ch;
+  line-height: 1.6;
+}

package/src/Components/AppComponents/AboutSection/AboutSection.html ADDED Viewed

@@ -0,0 +1,8 @@
+<section class="about">
+  <h1>About</h1>
+  <p>
+    This starter uses the App Shell + MultiRoute pattern: a persistent shell (the navbar)
+    wraps a content area that swaps sections by URL. See the docs — Project Anatomy,
+    Your First Page, and The Development Loop — to learn the recommended workflow.
+  </p>
+</section>

package/src/Components/AppComponents/AboutSection/AboutSection.js ADDED Viewed

@@ -0,0 +1,12 @@
+export default class AboutSection extends HTMLElement {
+   constructor(props) {
+      super();
+      slice.attachTemplate(this);
+      slice.controller.setComponentProps(this, props);
+   }
+   // A static section needs no init(). Add async init() if it fetches data,
+   // and update() if it should refresh when revisited (MultiRoute caches it).
+}
+customElements.define('slice-about-section', AboutSection);

package/src/Components/AppComponents/AppShell/AppShell.css ADDED Viewed

@@ -0,0 +1,10 @@
+.app-shell {
+  min-height: 100vh;
+}
+.app-shell__content {
+  max-width: 960px;
+  margin: 0 auto;
+  /* top padding clears the fixed navbar */
+  padding: 96px 24px 48px;
+}

package/src/Components/AppComponents/AppShell/AppShell.html ADDED Viewed

@@ -0,0 +1,4 @@
+<div class="app-shell">
+  <header class="app-shell__header"></header>
+  <main class="app-shell__content"></main>
+</div>

package/src/Components/AppComponents/AppShell/AppShell.js ADDED Viewed

@@ -0,0 +1,36 @@
+export default class AppShell extends HTMLElement {
+   constructor(props) {
+      super();
+      slice.attachTemplate(this);
+      this.$header = this.querySelector('.app-shell__header');
+      this.$content = this.querySelector('.app-shell__content');
+      slice.controller.setComponentProps(this, props);
+   }
+   async init() {
+      // Persistent navbar — built once, stays across navigations.
+      const navbar = await slice.build('Navbar', {
+         sliceId: 'app-navbar',
+         position: 'fixed',
+         items: [
+            { text: 'Home', path: '/' },
+            { text: 'About', path: '/about' }
+         ]
+      });
+      this.$header.appendChild(navbar);
+      // Content area — a MultiRoute swaps the matching section by URL.
+      // MultiRoute caches each section instance, so give sections an update()
+      // method if they show dynamic data.
+      const content = await slice.build('MultiRoute', {
+         sliceId: 'app-content',
+         routes: [
+            { path: '/', component: 'HomeSection' },
+            { path: '/about', component: 'AboutSection' }
+         ]
+      });
+      this.$content.appendChild(content);
+   }
+}
+customElements.define('slice-app-shell', AppShell);

package/src/Components/AppComponents/HomeSection/HomeSection.css ADDED Viewed

@@ -0,0 +1,20 @@
+.home {
+  text-align: center;
+  padding: 32px 0;
+}
+.home__title {
+  font-size: 2rem;
+  margin-bottom: 12px;
+}
+.home__lead {
+  color: var(--font-secondary-color);
+  max-width: 60ch;
+  margin: 0 auto 24px;
+  line-height: 1.6;
+}
+.home__lead code {
+  color: var(--font-primary-color);
+}

package/src/Components/AppComponents/HomeSection/HomeSection.html ADDED Viewed

@@ -0,0 +1,10 @@
+<section class="home">
+  <h1 class="home__title">Welcome to your Slice app</h1>
+  <p class="home__lead">
+    This is the App Shell + MultiRoute starter. Edit
+    <code>src/Components/AppComponents/HomeSection/</code> to change this page, or add a
+    section: create an AppComponent, then register it in <code>src/routes.js</code> and in
+    the AppShell's MultiRoute.
+  </p>
+  <div class="home__cta"></div>
+</section>

package/src/Components/AppComponents/HomeSection/HomeSection.js ADDED Viewed

@@ -0,0 +1,19 @@
+export default class HomeSection extends HTMLElement {
+   constructor(props) {
+      super();
+      slice.attachTemplate(this);
+      this.$cta = this.querySelector('.home__cta');
+      slice.controller.setComponentProps(this, props);
+   }
+   async init() {
+      // Build child components with slice.build (always await).
+      const button = await slice.build('Button', {
+         value: 'Go to About',
+         onClickCallback: () => slice.router.navigate('/about')
+      });
+      this.$cta.appendChild(button);
+   }
+}
+customElements.define('slice-home-section', HomeSection);

package/src/Components/Visual/MultiRoute/MultiRoute.js CHANGED Viewed

@@ -27,9 +27,18 @@ export default class MultiRoute extends HTMLElement {
       */
    }
+   // Find the route whose path matches the current URL, case-insensitively.
+   // '/About' matches a route declared as '/about'. (Dynamic params like ${id}
+   // are still resolved by the top-level router, not by MultiRoute.)
+   matchRoute() {
+      const currentPath = window.location.pathname.toLowerCase();
+      return this.props.routes.find(
+         (route) => typeof route.path === 'string' && route.path.toLowerCase() === currentPath
+      );
+   }
    async render() {
-      const currentPath = window.location.pathname;
-      const routeMatch = this.props.routes.find((route) => route.path === currentPath);
+      const routeMatch = this.matchRoute();
       if (routeMatch) {
          const { component } = routeMatch;
@@ -68,8 +77,7 @@ export default class MultiRoute extends HTMLElement {
    }
    async renderIfCurrentRoute() {
-      const currentPath = window.location.pathname;
-      const routeMatch = this.props.routes.find((route) => route.path === currentPath);
+      const routeMatch = this.matchRoute();
       if (routeMatch) {
          await this.render(); // Llamamos a render() para manejar el renderizado desde la caché si es necesario
@@ -79,8 +87,7 @@ export default class MultiRoute extends HTMLElement {
    }
    removeComponent() {
-      const currentPath = window.location.pathname;
-      const routeMatch = this.props.routes.find((route) => route.path === currentPath);
+      const routeMatch = this.matchRoute();
       if (routeMatch) {
          const { component } = routeMatch;

package/src/Components/components.js CHANGED Viewed

@@ -1,26 +1,14 @@
 const components = {
-  "HomePage": "AppComponents",
-  "Playground": "AppComponents",
+  "AppShell": "AppComponents",
+  "HomeSection": "AppComponents",
+  "AboutSection": "AppComponents",
   "Button": "Visual",
-  "Card": "Visual",
-  "Checkbox": "Visual",
-  "CodeVisualizer": "Visual",
-  "Details": "Visual",
-  "DropDown": "Visual",
-  "Grid": "Visual",
-  "Icon": "Visual",
-  "Input": "Visual",
-  "Layout": "Visual",
+  "Link": "Visual",
   "Loading": "Visual",
   "MultiRoute": "Visual",
   "Navbar": "Visual",
   "NotFound": "Visual",
   "Route": "Visual",
-  "Link": "Visual",
-  "Select": "Visual",
-  "Switch": "Visual",
-  "TreeItem": "Visual",
-  "TreeView": "Visual",
   "FetchManager": "Service",
   "IndexedDbManager": "Service",
   "LocalStorageManager": "Service"

package/src/routes.js CHANGED Viewed

@@ -1,16 +1,10 @@
+// App Shell + MultiRoute starter.
+// Every section URL renders AppShell, which swaps the content area via a MultiRoute.
+// Dynamic params use ${name} (NOT :name). Keep the 404 route last.
 const routes = [
-   // Rutas principales
-   { path: '/', component: 'HomePage' },
-   { path: '/404', component: 'NotFound' },
-   {
-      path: '/Docum/${category}/${id}',
-      component: 'LandingPage',
-   },
-   {
-      path: "/Playground",
-      component: "Playground",
-   }
+   { path: '/',      component: 'AppShell', metadata: { title: 'Home' } },
+   { path: '/about', component: 'AppShell', metadata: { title: 'About' } },
+   { path: '/404',   component: 'NotFound', metadata: { title: 'Not Found' } }
 ];
 export default routes;

package/src/sliceConfig.json CHANGED Viewed

@@ -68,6 +68,7 @@
   "publicFolders": [
      "/Themes",
      "/Styles",
-     "/assets"
+     "/assets",
+     "/images"
   ]
 }