@madojs/mado 0.5.0

package/starters/minimal/src/main.ts

@@ -0,0 +1,9 @@
+import { html, render } from "@madojs/mado";
+import "./styles/global.js";
+import router from "./routes.js";
+import "./components/app-counter.js";
+
+const app = document.getElementById("app");
+if (!app) throw new Error("#app not found");
+
+render(html`${router.view}`, app);

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

@@ -0,0 +1,18 @@
+import { html, page } from "@madojs/mado";
+
+export default page({
+  title: "__APP_NAME__",
+  view: () => html`
+    <main class="shell">
+      <section class="panel">
+        <p class="eyebrow">Mado starter</p>
+        <h1>__APP_NAME__</h1>
+        <p>
+          A tiny native-web app with browser ESM, Web Components, signals and
+          tagged-template HTML.
+        </p>
+        <x-app-counter></x-app-counter>
+      </section>
+    </main>
+  `,
+});

package/starters/minimal/src/pages/not-found.ts

@@ -0,0 +1,14 @@
+import { html, page } from "@madojs/mado";
+
+export default page({
+  title: "Not found",
+  view: () => html`
+    <main class="shell">
+      <section class="panel">
+        <h1>Not found</h1>
+        <p>The page does not exist.</p>
+        <a href="/" data-link>Back home</a>
+      </section>
+    </main>
+  `,
+});

package/starters/minimal/src/routes.ts

@@ -0,0 +1,6 @@
+import { routes } from "@madojs/mado";
+
+export default routes({
+  "/": () => import("./pages/home.js"),
+  "*": () => import("./pages/not-found.js"),
+});

package/starters/minimal/src/styles/global.ts

@@ -0,0 +1,60 @@
+import { css } from "@madojs/mado";
+
+const sheet = css`
+  :root {
+    color-scheme: light;
+    font-family:
+      Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+      "Segoe UI", sans-serif;
+    color: #172033;
+    background: #f6f7f9;
+  }
+
+  body {
+    margin: 0;
+  }
+
+  a {
+    color: #2563eb;
+  }
+
+  .shell {
+    min-height: 100vh;
+    display: grid;
+    place-items: center;
+    padding: 2rem;
+    box-sizing: border-box;
+  }
+
+  .panel {
+    width: min(100%, 44rem);
+    border: 1px solid #d9dee8;
+    border-radius: 8px;
+    background: white;
+    padding: 2rem;
+    box-shadow: 0 16px 40px rgb(17 24 39 / 0.08);
+  }
+
+  .eyebrow {
+    margin: 0 0 0.5rem;
+    color: #64748b;
+    font-size: 0.8rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  h1 {
+    margin: 0 0 0.75rem;
+    font-size: clamp(2rem, 6vw, 4rem);
+    line-height: 1;
+    letter-spacing: 0;
+  }
+
+  p {
+    max-width: 34rem;
+    line-height: 1.6;
+  }
+`;
+
+document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];

package/starters/minimal/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "lib": ["ES2022", "DOM"],
+    "strict": true,
+    "skipLibCheck": true,
+    "outDir": "dist",
+    "rootDir": "src",
+    "declaration": false,
+    "sourceMap": true
+  },
+  "include": ["src/**/*.ts"]
+}

package/templates/page-detail.ts

@@ -0,0 +1,63 @@
+/**
+ * Template: detail page by :id (loads one entity).
+ *
+ * Add to routes.ts:
+ *   '/__name__/:id': () => import('./pages/__name__-detail.js'),
+ */
+
+import {
+  page,
+  component,
+  html,
+  css,
+  resource,
+  jsonFetcher,
+} from "@madojs/mado";
+
+interface Entity {
+  id: number;
+  name: string;
+}
+
+component(
+  "x-__name__-detail",
+  ({ host }) => {
+    // id comes from data-id; page() sets it from params.
+    const idAttr = () => host.dataset.id ?? "";
+
+    const item = resource<Entity>(
+      () => `/api/__name__/${idAttr()}`,
+      jsonFetcher(),
+      { staleTime: 60_000 },
+    );
+
+    return () => html`
+      <section>
+        ${() =>
+          item.loading()
+            ? html`<p><i>loading…</i></p>`
+            : item.error()
+              ? html`<p class="err">${item.error()!.message}</p>`
+              : item.data()
+                ? html`
+                    <h1>${item.data()!.name}</h1>
+                    <p>id: ${item.data()!.id}</p>
+                  `
+                : null}
+        <a href="/__name__" data-link>← back to list</a>
+      </section>
+    `;
+  },
+  {
+    styles: css`
+      :host { display: block; }
+      .err { color: #c00; }
+    `,
+  },
+);
+
+export default page<{ id: string }>({
+  title: ({ id }) => `__Name__ #${id}`,
+  view: ({ params }) =>
+    html`<x-__name__-detail data-id=${params.id}></x-__name__-detail>`,
+});

package/templates/page-form.ts

@@ -0,0 +1,94 @@
+/**
+ * Template: create/edit form page.
+ */
+
+import {
+  page,
+  component,
+  html,
+  css,
+  signal,
+  useForm,
+  mutation,
+} from "@madojs/mado";
+
+interface Values {
+  name: string;
+  email: string;
+  [k: string]: string | number | boolean | undefined;
+}
+
+component(
+  "x-__name__-page",
+  () => {
+    const f = useForm<Values>({
+      name: { required: true, minLength: 2, default: "" },
+      email: { required: true, type: "email", default: "" },
+    });
+
+    const save = mutation<Values, Values>(async (v) => {
+      const r = await fetch("/api/__name__", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify(v),
+      });
+      if (!r.ok) throw new Error(`HTTP ${r.status}`);
+      return (await r.json()) as Values;
+    });
+
+    const done = signal(false);
+
+    const submit = f.onSubmit(async (v) => {
+      await save.run(v);
+      done.set(true);
+      f.reset();
+    });
+
+    const err = (name: keyof Values) => () =>
+      f.touched()[name as string] && f.errors()[name as string]
+        ? html`<small class="err">${f.errors()[name as string]}</small>`
+        : null;
+
+    return () => html`
+      <section>
+        <h1>__Name__</h1>
+        <form @submit=${submit} novalidate>
+          <label>
+            Name
+            <input name="name" .value=${() => f.values().name ?? ""}
+              @input=${f.onInput} @blur=${f.onBlur} />
+            ${err("name")}
+          </label>
+          <label>
+            Email
+            <input name="email" type="email" .value=${() => f.values().email ?? ""}
+              @input=${f.onInput} @blur=${f.onBlur} />
+            ${err("email")}
+          </label>
+          <button type="submit"
+            ?disabled=${() => !f.isValid() || f.submitting() || save.loading()}>
+            ${() => (save.loading() || f.submitting() ? "saving…" : "save")}
+          </button>
+          ${() => (save.error() ? html`<p class="err">${save.error()!.message}</p>` : null)}
+          ${() => (done() ? html`<p class="ok">saved</p>` : null)}
+        </form>
+      </section>
+    `;
+  },
+  {
+    styles: css`
+      :host { display: block; }
+      label { display: block; margin: .5rem 0; }
+      input { display: block; margin-top: .25rem; padding: .25rem .5rem;
+              border: 1px solid #999; border-radius: 4px; min-width: 14rem; }
+      .err { color: #c00; }
+      .ok  { color: #060; }
+      button:disabled { opacity: .5; }
+    `,
+  },
+);
+
+export default page({
+  title: "__Name__",
+  view: () => html`<x-__name__-page></x-__name__-page>`,
+});

package/templates/page-list.ts

@@ -0,0 +1,79 @@
+/**
+ * Template: list page with URL filter and pagination.
+ * Copy into src/pages/ and rename.
+ */
+
+import {
+  page,
+  component,
+  html,
+  css,
+  each,
+  resource,
+  queryParam,
+  jsonFetcher,
+} from "@madojs/mado";
+
+interface Item {
+  id: number;
+  name: string;
+}
+
+component(
+  "x-__name__-page",
+  () => {
+    const search = queryParam("q", "");
+    const pageQ = queryParam("page", "1");
+    const limit = 20;
+
+    const items = resource<Item[]>(
+      () =>
+        `/api/__name__?q=${encodeURIComponent(search())}&page=${pageQ()}&limit=${limit}`,
+      jsonFetcher(),
+      { staleTime: 30_000 },
+    );
+
+    return () => html`
+      <section>
+        <h1>__Name__</h1>
+        <input
+          placeholder="search..."
+          .value=${search}
+          @input=${(e: Event) =>
+            search.set((e.target as HTMLInputElement).value)}
+        />
+        ${() => (items.loading() ? html`<p><i>loading…</i></p>` : null)}
+        ${() =>
+          items.error()
+            ? html`<p class="err">${items.error()!.message}</p>`
+            : null}
+        <ul>
+          ${() =>
+            each(
+              items.data() ?? [],
+              (it) => it.id,
+              (it) => html`<li>${it.name}</li>`,
+            )}
+        </ul>
+        <nav>
+          <button @click=${() =>
+            pageQ.set(String(Math.max(1, +pageQ() - 1)))}>‹</button>
+          <span>${pageQ}</span>
+          <button @click=${() => pageQ.set(String(+pageQ() + 1))}>›</button>
+        </nav>
+      </section>
+    `;
+  },
+  {
+    styles: css`
+      :host { display: block; }
+      .err { color: #c00; }
+      ul { padding-left: 1.2rem; }
+    `,
+  },
+);
+
+export default page({
+  title: "__Name__",
+  view: () => html`<x-__name__-page></x-__name__-page>`,
+});