slicejs-web-framework 4.0.2 → 4.1.1

package/api/index.js

@@ -1,7 +1,17 @@
-// api/index.js - Punto de entrada del servidor
+// api/index.js — server entrypoint.
+//
+// Everything you add goes between createSliceServer() and start(): ordinary
+// Express middleware, an /api router, auth, request logging. start() mounts the
+// terminal fallback (the only middleware that must be last), prepares SEO when
+// it is configured, and then listens.
+//
+//   const { app, start } = createSliceServer();
+//   app.use('/api/hooks', hooks);
+//   await start();
 import { createSliceServer } from 'slicejs-web-framework/api/framework/server.js';
 
-const server = createSliceServer();
-server.start();
+const { app, start } = createSliceServer();
 
-export default server.app;
+await start();
+
+export default app;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slicejs-web-framework",
-  "version": "4.0.2",
+  "version": "4.1.1",
   "description": "",
   "engines": {
     "node": ">=20"
@@ -17,7 +17,10 @@
     "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"
+    "slice:modify": "node ./node_modules/slicejs-cli/client.js modify",
+    "test:server": "node --test api/framework/*.test.js api/tests/*.test.js",
+    "check:pack": "node scripts/check-pack.mjs",
+    "verify:app": "node scripts/verify-app.mjs"
   },
   "keywords": [],
   "author": "",
@@ -27,6 +30,7 @@
     ".": "./Slice/Slice.js",
     "./api/framework/express.js": "./api/framework/express.js",
     "./api/framework/server.js": "./api/framework/server.js",
+    "./api/framework/seo.js": "./api/framework/seo.js",
     "./api/framework/devDepsOptimizer.js": "./api/framework/devDepsOptimizer.js"
   },
   "types": "./types/index.d.ts",

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>