@madojs/mado 0.6.0 → 0.7.0

package/starters/admin/src/components/x-input.ts

@@ -1,43 +1,74 @@
-// <x-input label name type placeholder required value @input @blur>
+// <x-input label name type placeholder required value error @input @blur>
 //
 // Labeled input that proxies its events. Use inside `useForm()`:
 //
 //   <x-input name="email" type="email" required
 //            @input=${form.onInput} @blur=${form.onBlur}></x-input>
+//
+// Shadow DOM integration notes:
+//   - `name` and `value` are exposed as DOM properties on the host so that
+//     event retargeting (e.target → <x-input>) still works with useForm().
+//     useForm.onInput reads e.target.name and e.target.value — without these
+//     getters the form silently receives undefined.
+//   - The inner <input> dispatches its events with `composed: true` (native
+//     behaviour), so @input/@blur bubble through the shadow boundary.
 
 import { component, css, html } from "@madojs/mado";
 
 component(
   "x-input",
-  ({ host }) => () => {
-    const label = host.getAttribute("label") ?? "";
-    const name = host.getAttribute("name") ?? "";
-    const type = host.getAttribute("type") ?? "text";
-    const placeholder = host.getAttribute("placeholder") ?? "";
-    const required = host.hasAttribute("required");
-    const value = host.getAttribute("value") ?? "";
-    const error = host.getAttribute("error");
+  ({ host, attr }) => {
+    const label = attr("label", "");
+    const name = attr("name", "");
+    const type = attr("type", "text");
+    const placeholder = attr("placeholder", "");
+    const required = attr("required");
+    const value = attr("value", "");
+    const error = attr("error");
+
+    // Proxy properties so useForm().onInput can read e.target.name / .value
+    // even after Shadow DOM retargets e.target from <input> to <x-input>.
+    Object.defineProperty(host, "name", {
+      get: () => host.getAttribute("name") ?? "",
+      configurable: true,
+    });
+    Object.defineProperty(host, "value", {
+      get: () => host.shadowRoot?.querySelector("input")?.value ?? "",
+      set: (v: string) => {
+        const input = host.shadowRoot?.querySelector("input");
+        if (input) input.value = v;
+      },
+      configurable: true,
+    });
 
-    return html`
+    return () => html`
       <label>
-        ${label
-          ? html`<span class="lbl">${label}${required ? html`<em>*</em>` : null}</span>`
-          : null}
+        ${() =>
+          label()
+            ? html`<span class="lbl"
+                >${label}${() =>
+                  required() !== "" ? html`<em>*</em>` : null}</span
+              >`
+            : null}
         <input
           name=${name}
           type=${type}
           placeholder=${placeholder}
-          ?required=${required}
+          ?required=${() => required() !== ""}
           .value=${value}
-        >
-        ${error ? html`<small class="err">${error}</small>` : null}
+        />
+        ${() => (error() ? html`<small class="err">${error}</small>` : null)}
       </label>
     `;
   },
   {
     styles: css`
-      :host { display: block; }
-      label { display: block; }
+      :host {
+        display: block;
+      }
+      label {
+        display: block;
+      }
       .lbl {
         display: block;
         font-size: 12px;
@@ -71,4 +102,4 @@ component(
       }
     `,
   },
-);
+);

package/starters/admin/src/lib/api.ts

@@ -71,9 +71,9 @@ export function createApiClient(baseUrl: string) {
           credentials: "include",
         });
         if (!res.ok) return false;
-        const data = (await res.json().catch(() => null)) as
-          | { accessToken?: string }
-          | null;
+        const data = (await res.json().catch(() => null)) as {
+          accessToken?: string;
+        } | null;
         if (!data?.accessToken) return false;
         accessToken.set(data.accessToken);
         return true;
@@ -118,7 +118,11 @@ export function createApiClient(baseUrl: string) {
     }
     if (!res.ok) {
       const body = await res.json().catch(() => null);
-      throw new ApiError(res.status, body, `HTTP ${res.status} ${res.statusText}`);
+      throw new ApiError(
+        res.status,
+        body,
+        `HTTP ${res.status} ${res.statusText}`,
+      );
     }
     if (res.status === 204) return null as unknown as T;
     return (await res.json()) as T;
@@ -131,3 +135,50 @@ export function createApiClient(baseUrl: string) {
 
 /** Default app-wide client. Change the base URL via mado.config.json dev.proxy. */
 export const api = createApiClient("/api");
+
+/**
+ * Fetcher for resource() that attaches the Bearer token automatically.
+ * Use this instead of jsonFetcher() for protected endpoints:
+ *
+ *   const stats = resource(() => "/api/admin/stats", apiFetcher<Stats>());
+ *
+ * Unlike jsonFetcher(), this:
+ *   - Sends the access token from memory (no cookie-based auth needed).
+ *   - Does NOT prepend a base URL — the key is the full URL (matches
+ *     resource key semantics).
+ *   - Throws ApiError on non-2xx (consistent with api()).
+ */
+export function apiFetcher<T>(): (
+  url: string,
+  signal: AbortSignal,
+) => Promise<T> {
+  return async (url, abortSignal) => {
+    const token = accessToken();
+    const headers = new Headers();
+    headers.set("accept", "application/json");
+    if (token) headers.set("authorization", `Bearer ${token}`);
+
+    const res = await fetch(url, {
+      signal: abortSignal,
+      headers,
+      credentials: "include",
+    });
+
+    if (!res.ok) {
+      let body: unknown = null;
+      try {
+        const ct = res.headers.get("content-type") ?? "";
+        body = ct.includes("json") ? await res.json() : await res.text();
+      } catch {
+        body = null;
+      }
+      throw new ApiError(
+        res.status,
+        body,
+        `HTTP ${res.status} ${res.statusText}`,
+      );
+    }
+    if (res.status === 204) return null as unknown as T;
+    return (await res.json()) as T;
+  };
+}

package/starters/admin/src/pages/admin/order-detail.ts

@@ -1,7 +1,7 @@
 // Order detail page. Reads :id from params, fetches the order, and shows
 // inline loading/error/empty/ready states.
 
-import { html, jsonFetcher, page, resource } from "@madojs/mado";
+import { each, html, jsonFetcher, page, resource } from "@madojs/mado";
 
 interface OrderDetail {
   id: string;
@@ -46,7 +46,9 @@ export default page<{ id: string }>({
                 </tr>
               </thead>
               <tbody>
-                ${o.items.map(
+                ${each(
+                  o.items,
+                  (it) => it.sku,
                   (it) => html`
                     <tr style="border-bottom:1px solid var(--border);">
                       <td style="padding:8px 0;">${it.sku}</td>

package/starters/admin/src/pages/home.ts

@@ -1,5 +1,10 @@
 // Public landing page. Demonstrates that the marketing surface can live
 // alongside the admin app without a guard, and can be baked for SEO.
+//
+// `bake` is declared so that `mado bake` (and `mado release`) actually
+// prerender at least one static page out of the box. Without it the
+// release output ships only the SPA shell with no SEO-friendly HTML
+// for crawlers landing on "/".
 
 import { html, page } from "@madojs/mado";
 
@@ -13,6 +18,10 @@ export default page({
       type: "website",
     },
   }),
+  bake: {
+    paths: () => [{}],
+    data: () => ({}),
+  },
   view: () => html`
     <main style="max-width:720px;margin:0 auto;padding:64px 24px;">
       <h1>__APP_NAME__</h1>
@@ -22,4 +31,4 @@ export default page({
       </p>
     </main>
   `,
-});
+});

package/starters/crud/index.html

@@ -4,17 +4,25 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>__APP_NAME__</title>
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+    <!--
+      Paths below MUST be root-absolute (start with "/"), not "./...".
+      Mado is an SPA: hard-refreshing /users/42 still serves this same
+      index.html, and the browser resolves "./dist/main.js" against the
+      current URL → /users/dist/main.js → 404 → blank page.
+      Root-absolute paths always resolve to /dist/main.js regardless of route.
+    -->
     <script type="importmap">
       {
         "imports": {
-          "@madojs/mado": "./node_modules/@madojs/mado/dist/src/index.js",
-          "@madojs/mado/": "./node_modules/@madojs/mado/dist/src/"
+          "@madojs/mado": "/node_modules/@madojs/mado/dist/src/index.js",
+          "@madojs/mado/": "/node_modules/@madojs/mado/dist/src/"
         }
       }
     </script>
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="./dist/main.js"></script>
+    <script type="module" src="/dist/main.js"></script>
   </body>
-</html>
+</html>

package/starters/crud/package.json

@@ -17,6 +17,8 @@
     "@madojs/mado": "__MADOJS_VERSION__"
   },
   "devDependencies": {
+    "esbuild": "^0.24.0",
+    "linkedom": "^0.18.0",
     "typescript": "^6.0.3"
   }
-}
+}

package/starters/crud/src/pages/home.ts

@@ -1,7 +1,23 @@
+// Public landing page. `bake` is declared so that `mado bake` (and
+// `mado release`) actually prerender at least one SEO-friendly HTML page
+// out of the box. Without it the build output ships only the SPA shell.
+
 import { html, page } from "@madojs/mado";
 
 export default page({
   title: "__APP_NAME__",
+  head: () => ({
+    description: "A CRUD scaffold built with Mado.",
+    og: {
+      title: "__APP_NAME__",
+      description: "A CRUD scaffold built with Mado.",
+      type: "website",
+    },
+  }),
+  bake: {
+    paths: () => [{}],
+    data: () => ({}),
+  },
   view: () => html`
     <section class="page">
       <div class="hero">

package/starters/minimal/index.html

@@ -4,17 +4,25 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>__APP_NAME__</title>
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+    <!--
+      Paths below MUST be root-absolute (start with "/"), not "./...".
+      Mado is an SPA: hard-refreshing any nested route still serves this same
+      index.html, and the browser resolves "./dist/main.js" against the
+      current URL → /some/nested/dist/main.js → 404 → blank page.
+      Root-absolute paths always resolve to /dist/main.js regardless of route.
+    -->
     <script type="importmap">
       {
         "imports": {
-          "@madojs/mado": "./node_modules/@madojs/mado/dist/src/index.js",
-          "@madojs/mado/": "./node_modules/@madojs/mado/dist/src/"
+          "@madojs/mado": "/node_modules/@madojs/mado/dist/src/index.js",
+          "@madojs/mado/": "/node_modules/@madojs/mado/dist/src/"
         }
       }
     </script>
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="./dist/main.js"></script>
+    <script type="module" src="/dist/main.js"></script>
   </body>
-</html>
+</html>

package/starters/minimal/package.json

@@ -17,6 +17,8 @@
     "@madojs/mado": "__MADOJS_VERSION__"
   },
   "devDependencies": {
+    "esbuild": "^0.24.0",
+    "linkedom": "^0.18.0",
     "typescript": "^6.0.3"
   }
 }

package/starters/minimal/src/pages/home.ts

@@ -1,7 +1,24 @@
+// Public landing page. `bake` is declared so that `mado bake` (and
+// `mado release`) actually prerender a static HTML page out of the box.
+// Without it the build output ships only the SPA shell — bots that hit
+// "/" see an empty <body> instead of the welcome content.
+
 import { html, page } from "@madojs/mado";
 
 export default page({
   title: "__APP_NAME__",
+  head: () => ({
+    description: "A minimal Mado starter app.",
+    og: {
+      title: "__APP_NAME__",
+      description: "A minimal Mado starter app.",
+      type: "website",
+    },
+  }),
+  bake: {
+    paths: () => [{}],
+    data: () => ({}),
+  },
   view: () => html`
     <main class="shell">
       <section class="panel">