slicejs-web-framework 4.0.0 → 4.0.1

package/sliceConfig.schema.json

@@ -1,122 +1,122 @@
-{
-  "$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"] },
-        "leakInspector": {
-          "type": "object",
-          "additionalProperties": true,
-          "description": "Dev-only memory-leak panel. Disabled in production regardless of this flag.",
-          "properties": {
-            "enabled": { "type": "boolean" },
-            "shortcut": { "type": "string" }
-          }
-        }
-      }
-    },
-    "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 },
-        "ui": {
-          "type": "object",
-          "additionalProperties": true,
-          "properties": {
-            "enabled": { "type": "boolean" },
-            "shortcut": { "type": "string" }
-          }
-        }
-      }
-    },
-    "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" }
-      }
-    },
-    "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"] },
+        "leakInspector": {
+          "type": "object",
+          "additionalProperties": true,
+          "description": "Dev-only memory-leak panel. Disabled in production regardless of this flag.",
+          "properties": {
+            "enabled": { "type": "boolean" },
+            "shortcut": { "type": "string" }
+          }
+        }
+      }
+    },
+    "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 },
+        "ui": {
+          "type": "object",
+          "additionalProperties": true,
+          "properties": {
+            "enabled": { "type": "boolean" },
+            "shortcut": { "type": "string" }
+          }
+        }
+      }
+    },
+    "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" }
+      }
+    },
+    "server": {
+      "type": "object",
+      "additionalProperties": true,
+      "properties": {
+        "port": { "type": "number" },
+        "host": { "type": "string" }
+      }
+    }
+  }
+}

package/src/App/index.html

@@ -1,69 +1,69 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Slice.js Web Framework</title>
-    <meta name="description" content="Slice.js — a lightweight web framework built on native Web Components. Build web apps one slice at a time. No build step required." />
-    <meta name="robots" content="index, follow" />
-    <meta name="author" content="vkneider.dev" />
-    <link rel="canonical" href="https://slicejs.com" />
-    <link rel="icon" type="image/x-icon" href="/images/favicon.ico" />
-    <link rel="apple-touch-icon" href="/images/og-image.png" />
-    <link rel="manifest" href="/manifest.json" />
-    <meta name="theme-color" content="#F8F4FF" />
-    <meta name="color-scheme" content="light dark" />
-    <meta property="og:type" content="website" />
-    <meta property="og:title" content="Slice.js Web Framework" />
-    <meta property="og:description" content="Slice.js — a lightweight web framework built on native Web Components. Build web apps one slice at a time. No build step required." />
-    <meta property="og:url" content="https://slicejs.com" />
-    <meta property="og:image" content="https://slicejs.com/images/og-image.png" />
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:title" content="Slice.js Web Framework" />
-    <meta name="twitter:description" content="Slice.js — a lightweight web framework built on native Web Components." />
-    <meta name="twitter:image" content="https://slicejs.com/images/og-image.png" />
-    <link rel="stylesheet" type="text/css" href="/App/style.css" />
-    <script type="application/ld+json">
-      {
-        "@context": "https://schema.org",
-        "@type": "WebSite",
-        "name": "Slice.js Web Framework",
-        "url": "https://slicejs.com",
-        "description": "Slice.js — a lightweight web framework built on native Web Components. Build web apps one slice at a time.",
-        "author": {
-          "@type": "Organization",
-          "name": "VKneider",
-          "url": "https://github.com/VKneider"
-        },
-        "potentialAction": {
-          "@type": "SearchAction",
-          "target": {
-            "@type": "EntryPoint",
-            "urlTemplate": "https://slicejs.com/?q={search_term_string}"
-          },
-          "query-input": "required name=search_term_string"
-        }
-      }
-    </script>
-    <script type="application/ld+json">
-      {
-        "@context": "https://schema.org",
-        "@type": "BreadcrumbList",
-        "itemListElement": [
-          {
-            "@type": "ListItem",
-            "position": 1,
-            "name": "Home",
-            "item": "https://slicejs.com/"
-          }
-        ]
-      }
-    </script>
-  </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.js Web Framework</title>
+    <meta name="description" content="Slice.js — a lightweight web framework built on native Web Components. Build web apps one slice at a time. No build step required." />
+    <meta name="robots" content="index, follow" />
+    <meta name="author" content="vkneider.dev" />
+    <link rel="canonical" href="https://slicejs.com" />
+    <link rel="icon" type="image/x-icon" href="/images/favicon.ico" />
+    <link rel="apple-touch-icon" href="/images/og-image.png" />
+    <link rel="manifest" href="/manifest.json" />
+    <meta name="theme-color" content="#F8F4FF" />
+    <meta name="color-scheme" content="light dark" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="Slice.js Web Framework" />
+    <meta property="og:description" content="Slice.js — a lightweight web framework built on native Web Components. Build web apps one slice at a time. No build step required." />
+    <meta property="og:url" content="https://slicejs.com" />
+    <meta property="og:image" content="https://slicejs.com/images/og-image.png" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="Slice.js Web Framework" />
+    <meta name="twitter:description" content="Slice.js — a lightweight web framework built on native Web Components." />
+    <meta name="twitter:image" content="https://slicejs.com/images/og-image.png" />
+    <link rel="stylesheet" type="text/css" href="/App/style.css" />
+    <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "WebSite",
+        "name": "Slice.js Web Framework",
+        "url": "https://slicejs.com",
+        "description": "Slice.js — a lightweight web framework built on native Web Components. Build web apps one slice at a time.",
+        "author": {
+          "@type": "Organization",
+          "name": "VKneider",
+          "url": "https://github.com/VKneider"
+        },
+        "potentialAction": {
+          "@type": "SearchAction",
+          "target": {
+            "@type": "EntryPoint",
+            "urlTemplate": "https://slicejs.com/?q={search_term_string}"
+          },
+          "query-input": "required name=search_term_string"
+        }
+      }
+    </script>
+    <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "BreadcrumbList",
+        "itemListElement": [
+          {
+            "@type": "ListItem",
+            "position": 1,
+            "name": "Home",
+            "item": "https://slicejs.com/"
+          }
+        ]
+      }
+    </script>
+  </head>
+
+  <body>
+    <div id="app">
+      <script src="/App/index.js" type="module"></script>
+    </div>
+  </body>
+</html>

package/src/App/index.js

@@ -1,20 +1,20 @@
-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();
+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,11 +1,11 @@
-/* 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);
-}
+/* 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

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

@@ -1,8 +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>
+<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

@@ -1,12 +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);
+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

@@ -1,10 +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;
-}
+.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

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

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

@@ -1,36 +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);
+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);