slicejs-web-framework 3.2.3 → 3.3.0

package/package.json

@@ -1,38 +1,40 @@
-{
-  "name": "slicejs-web-framework",
-  "version": "3.2.3",
-  "description": "",
-  "engines": {
-    "node": ">=20"
-  },
-  "scripts": {
-    "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",
-    "format": "prettier --write \"**/*.js\"",
-    "run": "node api/index.js",
-    "development": "npm run",
-    "slice:modify": "node node_modules/slicejs-cli/client.js modify"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "type": "module",
-  "types": "./types/index.d.ts",
-  "dependencies": {
-    "express": "^4.19.2"
-  },
-  "devDependencies": {
-    "prettier": "3.3.3"
-  },
-  "prettier": {
-    "trailingComma": "es5",
-    "tabWidth": 3,
-    "semi": true,
-    "singleQuote": true,
-    "printWidth": 120
-  }
-}
+{
+  "name": "slicejs-web-framework",
+  "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 ./node_modules/slicejs-cli/client.js start",
+    "format": "prettier --write \"**/*.js\"",
+    "run": "node ./node_modules/slicejs-cli/client.js dev",
+    "slice:modify": "node ./node_modules/slicejs-cli/client.js modify"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "module",
+  "types": "./types/index.d.ts",
+  "dependencies": {
+    "express": "^4.19.2"
+  },
+  "devDependencies": {
+    "prettier": "3.3.3"
+  },
+  "prettier": {
+    "trailingComma": "es5",
+    "tabWidth": 3,
+    "semi": true,
+    "singleQuote": true,
+    "printWidth": 120
+  }
+}

package/sliceConfig.schema.json

@@ -1,109 +1,109 @@
-{
-  "$schema": "https://json-schema.org/draft/2020-12/schema",
-  "$id": "https://slicejs.local/sliceConfig.schema.json",
-  "title": "Slice.js Config",
-  "type": "object",
-  "additionalProperties": true,
-  "properties": {
-    "debugger": {
-      "type": "object",
-      "additionalProperties": true,
-      "properties": {
-        "enabled": { "type": "boolean" },
-        "click": { "type": "string", "enum": ["right", "left"] }
-      }
-    },
-    "stylesManager": {
-      "type": "object",
-      "additionalProperties": true,
-      "properties": {
-        "requestedStyles": { "type": "array", "items": { "type": "string" } }
-      }
-    },
-    "themeManager": {
-      "type": "object",
-      "additionalProperties": true,
-      "properties": {
-        "enabled": { "type": "boolean" },
-        "defaultTheme": { "type": "string" },
-        "saveThemeLocally": { "type": "boolean" },
-        "useBrowserTheme": { "type": "boolean" }
-      }
-    },
-    "logger": {
-      "type": "object",
-      "additionalProperties": true,
-      "properties": {
-        "enabled": { "type": "boolean" },
-        "showLogs": { "type": "object", "additionalProperties": true }
-      }
-    },
-    "events": {
-      "type": "object",
-      "additionalProperties": true,
-      "properties": {
-        "enabled": { "type": "boolean" },
-        "ui": {
-          "type": "object",
-          "additionalProperties": true,
-          "properties": {
-            "enabled": { "type": "boolean" },
-            "shortcut": { "type": "string" }
-          }
-        }
-      }
-    },
-    "context": {
-      "type": "object",
-      "additionalProperties": true,
-      "properties": {
-        "enabled": { "type": "boolean" },
-        "ui": {
-          "type": "object",
-          "additionalProperties": true,
-          "properties": {
-            "enabled": { "type": "boolean" },
-            "shortcut": { "type": "string" }
-          }
-        }
-      }
-    },
-    "paths": {
-      "type": "object",
-      "additionalProperties": true,
-      "properties": {
-        "components": { "type": "object", "additionalProperties": true },
-        "themes": { "type": "string" },
-        "styles": { "type": "string" },
-        "routesFile": { "type": "string" }
-      },
-      "required": ["components", "themes", "styles", "routesFile"]
-    },
-    "router": {
-      "type": "object",
-      "additionalProperties": true,
-      "properties": {
-        "defaultRoute": { "type": "string" }
-      }
-    },
-    "loading": {
-      "type": "object",
-      "additionalProperties": true,
-      "properties": {
-        "enabled": { "type": "boolean" }
-      }
-    },
-    "publicFolders": {
-      "type": "array",
-      "items": { "type": "string" }
-    },
-    "server": {
-      "type": "object",
-      "additionalProperties": true,
-      "properties": {
-        "port": { "type": "number" },
-        "host": { "type": "string" }
-      }
-    }
-  }
-}
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://slicejs.local/sliceConfig.schema.json",
+  "title": "Slice.js Config",
+  "type": "object",
+  "additionalProperties": true,
+  "properties": {
+    "debugger": {
+      "type": "object",
+      "additionalProperties": true,
+      "properties": {
+        "enabled": { "type": "boolean" },
+        "click": { "type": "string", "enum": ["right", "left"] }
+      }
+    },
+    "stylesManager": {
+      "type": "object",
+      "additionalProperties": true,
+      "properties": {
+        "requestedStyles": { "type": "array", "items": { "type": "string" } }
+      }
+    },
+    "themeManager": {
+      "type": "object",
+      "additionalProperties": true,
+      "properties": {
+        "enabled": { "type": "boolean" },
+        "defaultTheme": { "type": "string" },
+        "saveThemeLocally": { "type": "boolean" },
+        "useBrowserTheme": { "type": "boolean" }
+      }
+    },
+    "logger": {
+      "type": "object",
+      "additionalProperties": true,
+      "properties": {
+        "enabled": { "type": "boolean" },
+        "showLogs": { "type": "object", "additionalProperties": true }
+      }
+    },
+    "events": {
+      "type": "object",
+      "additionalProperties": true,
+      "properties": {
+        "enabled": { "type": "boolean" },
+        "ui": {
+          "type": "object",
+          "additionalProperties": true,
+          "properties": {
+            "enabled": { "type": "boolean" },
+            "shortcut": { "type": "string" }
+          }
+        }
+      }
+    },
+    "context": {
+      "type": "object",
+      "additionalProperties": true,
+      "properties": {
+        "enabled": { "type": "boolean" },
+        "ui": {
+          "type": "object",
+          "additionalProperties": true,
+          "properties": {
+            "enabled": { "type": "boolean" },
+            "shortcut": { "type": "string" }
+          }
+        }
+      }
+    },
+    "paths": {
+      "type": "object",
+      "additionalProperties": true,
+      "properties": {
+        "components": { "type": "object", "additionalProperties": true },
+        "themes": { "type": "string" },
+        "styles": { "type": "string" },
+        "routesFile": { "type": "string" }
+      },
+      "required": ["components", "themes", "styles", "routesFile"]
+    },
+    "router": {
+      "type": "object",
+      "additionalProperties": true,
+      "properties": {
+        "defaultRoute": { "type": "string" }
+      }
+    },
+    "loading": {
+      "type": "object",
+      "additionalProperties": true,
+      "properties": {
+        "enabled": { "type": "boolean" }
+      }
+    },
+    "publicFolders": {
+      "type": "array",
+      "items": { "type": "string" }
+    },
+    "server": {
+      "type": "object",
+      "additionalProperties": true,
+      "properties": {
+        "port": { "type": "number" },
+        "host": { "type": "string" }
+      }
+    }
+  }
+}

package/src/App/index.html

@@ -1,22 +1,16 @@
-<!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>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <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" />
+  </head>
+
+  <body>
+    <div id="app">
+      <script src="/App/index.js" type="module"></script>
+    </div>
+  </body>
+</html>

package/src/App/index.js

@@ -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();
-
-*/
+import Slice from '/Slice/Slice.js';
+
+// `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

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

package/src/Components/AppComponents/AboutSection/AboutSection.css

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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);