npm - @madojs/mado - Versions diffs - 0.5.0 - Mend

@madojs/mado 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (162) hide show

package/AGENTS.md +291 -0
package/CHANGELOG.md +23 -0
package/LICENSE +21 -0
package/README.md +371 -0
package/ROADMAP.md +52 -0
package/dist/src/component.d.ts +48 -0
package/dist/src/component.js +140 -0
package/dist/src/component.js.map +1 -0
package/dist/src/context.d.ts +40 -0
package/dist/src/context.js +67 -0
package/dist/src/context.js.map +1 -0
package/dist/src/css.d.ts +54 -0
package/dist/src/css.js +137 -0
package/dist/src/css.js.map +1 -0
package/dist/src/devtools.d.ts +22 -0
package/dist/src/devtools.js +63 -0
package/dist/src/devtools.js.map +1 -0
package/dist/src/diagnostics.d.ts +11 -0
package/dist/src/diagnostics.js +28 -0
package/dist/src/diagnostics.js.map +1 -0
package/dist/src/each.d.ts +39 -0
package/dist/src/each.js +35 -0
package/dist/src/each.js.map +1 -0
package/dist/src/forms.d.ts +71 -0
package/dist/src/forms.js +161 -0
package/dist/src/forms.js.map +1 -0
package/dist/src/head.d.ts +19 -0
package/dist/src/head.js +97 -0
package/dist/src/head.js.map +1 -0
package/dist/src/html/bindings.d.ts +78 -0
package/dist/src/html/bindings.js +304 -0
package/dist/src/html/bindings.js.map +1 -0
package/dist/src/html/parser.d.ts +64 -0
package/dist/src/html/parser.js +521 -0
package/dist/src/html/parser.js.map +1 -0
package/dist/src/html/template-types.d.ts +27 -0
package/dist/src/html/template-types.js +8 -0
package/dist/src/html/template-types.js.map +1 -0
package/dist/src/html/template.d.ts +45 -0
package/dist/src/html/template.js +119 -0
package/dist/src/html/template.js.map +1 -0
package/dist/src/html.d.ts +16 -0
package/dist/src/html.js +16 -0
package/dist/src/html.js.map +1 -0
package/dist/src/index.d.ts +35 -0
package/dist/src/index.js +39 -0
package/dist/src/index.js.map +1 -0
package/dist/src/lazy.d.ts +38 -0
package/dist/src/lazy.js +73 -0
package/dist/src/lazy.js.map +1 -0
package/dist/src/lifecycle.d.ts +45 -0
package/dist/src/lifecycle.js +66 -0
package/dist/src/lifecycle.js.map +1 -0
package/dist/src/page.d.ts +161 -0
package/dist/src/page.js +38 -0
package/dist/src/page.js.map +1 -0
package/dist/src/persisted.d.ts +47 -0
package/dist/src/persisted.js +119 -0
package/dist/src/persisted.js.map +1 -0
package/dist/src/resource.d.ts +120 -0
package/dist/src/resource.js +275 -0
package/dist/src/resource.js.map +1 -0
package/dist/src/router/manifest.d.ts +56 -0
package/dist/src/router/manifest.js +302 -0
package/dist/src/router/manifest.js.map +1 -0
package/dist/src/router/match.d.ts +62 -0
package/dist/src/router/match.js +117 -0
package/dist/src/router/match.js.map +1 -0
package/dist/src/router/navigation.d.ts +89 -0
package/dist/src/router/navigation.js +263 -0
package/dist/src/router/navigation.js.map +1 -0
package/dist/src/router.d.ts +13 -0
package/dist/src/router.js +13 -0
package/dist/src/router.js.map +1 -0
package/dist/src/signal.d.ts +67 -0
package/dist/src/signal.js +238 -0
package/dist/src/signal.js.map +1 -0
package/docs/README.md +12 -0
package/docs/en/00-the-mado-way.md +106 -0
package/docs/en/01-routing.md +204 -0
package/docs/en/02-project-layout.md +58 -0
package/docs/en/03-static-bake.md +251 -0
package/docs/en/04-ide-setup.md +162 -0
package/docs/en/05-why-mado.md +193 -0
package/docs/en/06-for-backenders.md +422 -0
package/docs/en/07-llm-pitfalls.md +486 -0
package/docs/en/08-llm-zero-history-test.md +56 -0
package/docs/en/09-shadow-vs-light-dom.md +122 -0
package/docs/en/README.md +16 -0
package/docs/fr/00-the-mado-way.md +108 -0
package/docs/fr/01-routing.md +202 -0
package/docs/fr/02-project-layout.md +58 -0
package/docs/fr/03-static-bake.md +290 -0
package/docs/fr/04-ide-setup.md +162 -0
package/docs/fr/05-why-mado.md +193 -0
package/docs/fr/06-for-backenders.md +432 -0
package/docs/fr/07-llm-pitfalls.md +487 -0
package/docs/fr/08-llm-zero-history-test.md +60 -0
package/docs/fr/09-shadow-vs-light-dom.md +121 -0
package/docs/fr/README.md +16 -0
package/docs/ru/00-the-mado-way.md +93 -0
package/docs/ru/01-routing.md +194 -0
package/docs/ru/02-project-layout.md +57 -0
package/docs/ru/03-static-bake.md +251 -0
package/docs/ru/04-ide-setup.md +144 -0
package/docs/ru/05-why-mado.md +193 -0
package/docs/ru/06-for-backenders.md +422 -0
package/docs/ru/07-llm-pitfalls.md +485 -0
package/docs/ru/08-llm-zero-history-test.md +56 -0
package/docs/ru/09-shadow-vs-light-dom.md +122 -0
package/docs/ru/README.md +14 -0
package/docs/uk/00-the-mado-way.md +54 -0
package/docs/uk/01-routing.md +82 -0
package/docs/uk/02-project-layout.md +46 -0
package/docs/uk/03-static-bake.md +49 -0
package/docs/uk/04-ide-setup.md +26 -0
package/docs/uk/05-why-mado.md +34 -0
package/docs/uk/06-for-backenders.md +50 -0
package/docs/uk/07-llm-pitfalls.md +82 -0
package/docs/uk/08-llm-zero-history-test.md +31 -0
package/docs/uk/09-shadow-vs-light-dom.md +40 -0
package/docs/uk/README.md +16 -0
package/llms.txt +155 -0
package/package.json +81 -0
package/scripts/bake.mjs +406 -0
package/scripts/bundle.mjs +146 -0
package/scripts/cli.mjs +382 -0
package/scripts/new.mjs +80 -0
package/scripts/preview.mjs +176 -0
package/scripts/release-notes.mjs +66 -0
package/scripts/showcase-regression.mjs +392 -0
package/server/serve.mjs +292 -0
package/starters/crud/README.md +21 -0
package/starters/crud/index.html +20 -0
package/starters/crud/package.json +17 -0
package/starters/crud/src/components/app-shell.ts +51 -0
package/starters/crud/src/components/ticket-detail.ts +33 -0
package/starters/crud/src/components/ticket-form.ts +69 -0
package/starters/crud/src/components/ticket-list.ts +66 -0
package/starters/crud/src/lib/api.ts +76 -0
package/starters/crud/src/main.ts +12 -0
package/starters/crud/src/pages/home.ts +18 -0
package/starters/crud/src/pages/not-found.ts +12 -0
package/starters/crud/src/pages/ticket-detail.ts +6 -0
package/starters/crud/src/pages/ticket-new.ts +6 -0
package/starters/crud/src/pages/tickets.ts +6 -0
package/starters/crud/src/routes.ts +9 -0
package/starters/crud/src/styles/global.ts +155 -0
package/starters/crud/tsconfig.json +15 -0
package/starters/minimal/README.md +19 -0
package/starters/minimal/index.html +20 -0
package/starters/minimal/package.json +17 -0
package/starters/minimal/src/components/app-counter.ts +31 -0
package/starters/minimal/src/main.ts +9 -0
package/starters/minimal/src/pages/home.ts +18 -0
package/starters/minimal/src/pages/not-found.ts +14 -0
package/starters/minimal/src/routes.ts +6 -0
package/starters/minimal/src/styles/global.ts +60 -0
package/starters/minimal/tsconfig.json +15 -0
package/templates/page-detail.ts +63 -0
package/templates/page-form.ts +94 -0
package/templates/page-list.ts +79 -0

package/starters/crud/index.html ADDED Viewed

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>__APP_NAME__</title>
+    <script type="importmap">
+      {
+        "imports": {
+          "@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>
+  </body>
+</html>

package/starters/crud/package.json ADDED Viewed

@@ -0,0 +1,17 @@
+{
+  "name": "__PACKAGE_NAME__",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "serve": "mado serve"
+  },
+  "dependencies": {
+    "@madojs/mado": "__MADOJS_VERSION__"
+  },
+  "devDependencies": {
+    "typescript": "^6.0.3"
+  }
+}

package/starters/crud/src/components/app-shell.ts ADDED Viewed

@@ -0,0 +1,51 @@
+import { component, css, html } from "@madojs/mado";
+component(
+  "app-shell",
+  () => () => html`
+    <header>
+      <a class="brand" href="/" data-link>__APP_NAME__</a>
+      <nav>
+        <a href="/" data-link>Home</a>
+        <a href="/tickets" data-link>Tickets</a>
+        <a href="/tickets/new" data-link>New ticket</a>
+      </nav>
+    </header>
+    <slot></slot>
+  `,
+  {
+    shadow: false,
+    styles: css`
+      app-shell {
+        min-height: 100vh;
+        display: block;
+      }
+      app-shell header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 1rem;
+        border-bottom: 1px solid var(--line);
+        background: white;
+        padding: 0.9rem 1.25rem;
+      }
+      app-shell nav {
+        display: flex;
+        gap: 0.75rem;
+        flex-wrap: wrap;
+      }
+      app-shell a {
+        color: #334155;
+        text-decoration: none;
+      }
+      app-shell .brand {
+        color: #111827;
+        font-weight: 800;
+      }
+    `,
+  },
+);

package/starters/crud/src/components/ticket-detail.ts ADDED Viewed

@@ -0,0 +1,33 @@
+import { component, html, resource } from "@madojs/mado";
+import { api } from "../lib/api.js";
+component("ticket-detail", ({ host }) => {
+  const id = () => host.getAttribute("ticket-id") ?? "";
+  const ticket = resource(
+    () => `tickets/${id()}`,
+    () => api.getTicket(id()),
+  );
+  return () => html`
+    <section class="page narrow">
+      ${() => ticket.loading()
+        ? html`<p>Loading...</p>`
+        : ticket.error()
+          ? html`<p class="error">${ticket.error()?.message}</p>`
+          : html`
+              <a href="/tickets" data-link>Back to tickets</a>
+              <h1>${ticket.data()?.title}</h1>
+              <dl>
+                <dt>Customer</dt>
+                <dd>${ticket.data()?.customer}</dd>
+                <dt>Status</dt>
+                <dd><span class=${`badge ${ticket.data()?.status}`}>${ticket.data()?.status}</span></dd>
+                <dt>Priority</dt>
+                <dd>${ticket.data()?.priority}</dd>
+                <dt>Notes</dt>
+                <dd>${ticket.data()?.notes}</dd>
+              </dl>
+            `}
+    </section>
+  `;
+}, { shadow: false });

package/starters/crud/src/components/ticket-form.ts ADDED Viewed

@@ -0,0 +1,69 @@
+import { component, html, mutation, navigate, useForm } from "@madojs/mado";
+import { api, type TicketInput } from "../lib/api.js";
+component("ticket-form", () => {
+  const form = useForm({
+    title: { required: true, default: "" },
+    customer: { required: true, default: "" },
+    status: { required: true, default: "open" },
+    priority: { required: true, default: "normal" },
+    notes: { default: "" },
+  });
+  const createTicket = mutation(
+    (input: TicketInput) => api.createTicket(input),
+    { invalidates: ["tickets*"] },
+  );
+  const submit = form.onSubmit(async (values) => {
+    const ticket = await createTicket.run(values as TicketInput);
+    navigate(`/tickets/${ticket.id}`);
+  });
+  return () => html`
+    <section class="page narrow">
+      <h1>New ticket</h1>
+      <form @submit=${submit}>
+        <label>
+          Title
+          <input name="title" @input=${form.onInput} @blur=${form.onBlur}>
+          ${() => form.touched().title && form.errors().title ? html`<small>${form.errors().title}</small>` : null}
+        </label>
+        <label>
+          Customer
+          <input name="customer" @input=${form.onInput} @blur=${form.onBlur}>
+          ${() => form.touched().customer && form.errors().customer ? html`<small>${form.errors().customer}</small>` : null}
+        </label>
+        <label>
+          Status
+          <select name="status" @input=${form.onInput} @blur=${form.onBlur}>
+            <option value="open">Open</option>
+            <option value="pending">Pending</option>
+            <option value="closed">Closed</option>
+          </select>
+        </label>
+        <label>
+          Priority
+          <select name="priority" @input=${form.onInput} @blur=${form.onBlur}>
+            <option value="low">Low</option>
+            <option value="normal" selected>Normal</option>
+            <option value="high">High</option>
+          </select>
+        </label>
+        <label>
+          Notes
+          <textarea name="notes" rows="4" @input=${form.onInput}></textarea>
+        </label>
+        <div class="actions">
+          <a href="/tickets" data-link>Cancel</a>
+          <button ?disabled=${() => !form.isValid() || form.submitting()}>Create ticket</button>
+        </div>
+      </form>
+    </section>
+  `;
+}, { shadow: false });

package/starters/crud/src/components/ticket-list.ts ADDED Viewed

@@ -0,0 +1,66 @@
+import { component, computed, each, html, queryParam, resource } from "@madojs/mado";
+import { api, type Ticket } from "../lib/api.js";
+component("ticket-list", () => {
+  const search = queryParam("search", "");
+  const status = queryParam("status", "all");
+  const tickets = resource(
+    () => `tickets?search=${search()}&status=${status()}`,
+    () => api.listTickets({ search: search(), status: status() }),
+  );
+  const openCount = computed(() => (tickets.data() ?? []).filter((ticket) => ticket.status === "open").length);
+  const row = (ticket: Ticket) => html`
+    <tr>
+      <td><a href=${`/tickets/${ticket.id}`} data-link>${ticket.title}</a></td>
+      <td>${ticket.customer}</td>
+      <td><span class=${`badge ${ticket.status}`}>${ticket.status}</span></td>
+      <td>${ticket.priority}</td>
+    </tr>
+  `;
+  return () => html`
+    <section class="page">
+      <div class="toolbar">
+        <div>
+          <h1>Tickets</h1>
+          <p>${() => openCount()} open tickets</p>
+        </div>
+        <a class="button" href="/tickets/new" data-link>New ticket</a>
+      </div>
+      <div class="filters">
+        <input
+          type="search"
+          placeholder="Search tickets"
+          .value=${search}
+          @input=${(event: Event) => search.set((event.target as HTMLInputElement).value)}
+        >
+        <select
+          .value=${status}
+          @change=${(event: Event) => status.set((event.target as HTMLSelectElement).value)}
+        >
+          <option value="all">All statuses</option>
+          <option value="open">Open</option>
+          <option value="pending">Pending</option>
+          <option value="closed">Closed</option>
+        </select>
+      </div>
+      ${() => tickets.loading()
+        ? html`<p>Loading...</p>`
+        : tickets.error()
+          ? html`<p class="error">${tickets.error()?.message}</p>`
+          : html`
+              <table>
+                <thead>
+                  <tr><th>Title</th><th>Customer</th><th>Status</th><th>Priority</th></tr>
+                </thead>
+                <tbody>
+                  ${each(tickets.data() ?? [], (ticket) => ticket.id, row)}
+                </tbody>
+              </table>
+            `}
+    </section>
+  `;
+}, { shadow: false });

package/starters/crud/src/lib/api.ts ADDED Viewed

@@ -0,0 +1,76 @@
+export type TicketStatus = "open" | "pending" | "closed";
+export type Ticket = {
+  id: string;
+  title: string;
+  customer: string;
+  status: TicketStatus;
+  priority: "low" | "normal" | "high";
+  notes: string;
+};
+export type TicketInput = Omit<Ticket, "id">;
+const delay = (ms = 180) => new Promise((resolve) => setTimeout(resolve, ms));
+let tickets: Ticket[] = [
+  {
+    id: "101",
+    title: "Invoice export is missing VAT",
+    customer: "Northwind",
+    status: "open",
+    priority: "high",
+    notes: "Finance team needs the export before Monday.",
+  },
+  {
+    id: "102",
+    title: "Invite email copy update",
+    customer: "Acme",
+    status: "pending",
+    priority: "normal",
+    notes: "Waiting for legal approval.",
+  },
+  {
+    id: "103",
+    title: "Archive old workspace",
+    customer: "Globex",
+    status: "closed",
+    priority: "low",
+    notes: "Done after customer confirmation.",
+  },
+];
+export const api = {
+  async listTickets(params: { search?: string; status?: string }) {
+    await delay();
+    const search = (params.search ?? "").trim().toLowerCase();
+    return tickets.filter((ticket) => {
+      const matchesSearch = !search
+        || ticket.title.toLowerCase().includes(search)
+        || ticket.customer.toLowerCase().includes(search);
+      const matchesStatus = !params.status || params.status === "all" || ticket.status === params.status;
+      return matchesSearch && matchesStatus;
+    });
+  },
+  async getTicket(id: string) {
+    await delay();
+    const ticket = tickets.find((item) => item.id === id);
+    if (!ticket) throw new Error("Ticket not found");
+    return ticket;
+  },
+  async createTicket(input: TicketInput) {
+    await delay();
+    const ticket = { ...input, id: String(Date.now()) };
+    tickets = [ticket, ...tickets];
+    return ticket;
+  },
+  async updateTicket(id: string, input: TicketInput) {
+    await delay();
+    const next = { ...input, id };
+    tickets = tickets.map((ticket) => ticket.id === id ? next : ticket);
+    return next;
+  },
+};

package/starters/crud/src/main.ts ADDED Viewed

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

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

@@ -0,0 +1,18 @@
+import { html, page } from "@madojs/mado";
+export default page({
+  title: "__APP_NAME__",
+  view: () => html`
+    <section class="page">
+      <div class="hero">
+        <p class="eyebrow">Mado CRUD starter</p>
+        <h1>Small admin apps without frontend ceremony.</h1>
+        <p>
+          This starter shows routes, resources, mutations, forms, query params
+          and keyed lists in a compact ticket admin.
+        </p>
+        <a class="button" href="/tickets" data-link>Open tickets</a>
+      </div>
+    </section>
+  `,
+});

package/starters/crud/src/pages/not-found.ts ADDED Viewed

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

package/starters/crud/src/pages/ticket-detail.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import { html, page } from "@madojs/mado";
+export default page<{ id: string }>({
+  title: ({ id }) => `Ticket ${id}`,
+  view: ({ params }) => html`<ticket-detail ticket-id=${params.id}></ticket-detail>`,
+});

package/starters/crud/src/pages/ticket-new.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import { html, page } from "@madojs/mado";
+export default page({
+  title: "New ticket",
+  view: () => html`<ticket-form></ticket-form>`,
+});

package/starters/crud/src/pages/tickets.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import { html, page } from "@madojs/mado";
+export default page({
+  title: "Tickets",
+  view: () => html`<ticket-list></ticket-list>`,
+});

package/starters/crud/src/routes.ts ADDED Viewed

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

package/starters/crud/src/styles/global.ts ADDED Viewed

@@ -0,0 +1,155 @@
+import { css } from "@madojs/mado";
+const sheet = css`
+  :root {
+    --bg: #f6f7f9;
+    --panel: #ffffff;
+    --text: #172033;
+    --muted: #64748b;
+    --line: #d9dee8;
+    --accent: #2563eb;
+    font-family:
+      Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+      "Segoe UI", sans-serif;
+    color: var(--text);
+    background: var(--bg);
+  }
+  body {
+    margin: 0;
+  }
+  .page {
+    width: min(100% - 2rem, 72rem);
+    margin: 0 auto;
+    padding: 2rem 0;
+  }
+  .narrow {
+    width: min(100% - 2rem, 42rem);
+  }
+  .hero,
+  form,
+  table,
+  dl {
+    border: 1px solid var(--line);
+    border-radius: 8px;
+    background: var(--panel);
+  }
+  .hero,
+  form,
+  dl {
+    padding: 1.25rem;
+  }
+  h1 {
+    margin: 0 0 0.5rem;
+    letter-spacing: 0;
+  }
+  .eyebrow,
+  p {
+    color: var(--muted);
+  }
+  .toolbar,
+  .filters,
+  .actions {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    flex-wrap: wrap;
+  }
+  .filters {
+    margin: 1rem 0;
+  }
+  input,
+  select,
+  textarea,
+  button,
+  .button {
+    border: 1px solid var(--line);
+    border-radius: 6px;
+    padding: 0.6rem 0.75rem;
+    font: inherit;
+  }
+  input,
+  select,
+  textarea {
+    box-sizing: border-box;
+    width: 100%;
+    background: white;
+  }
+  label {
+    display: grid;
+    gap: 0.35rem;
+    margin-bottom: 1rem;
+    font-weight: 700;
+  }
+  small,
+  .error {
+    color: #dc2626;
+  }
+  button,
+  .button {
+    display: inline-flex;
+    align-items: center;
+    background: var(--accent);
+    color: white;
+    text-decoration: none;
+    cursor: pointer;
+  }
+  button:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    overflow: hidden;
+  }
+  th,
+  td {
+    border-bottom: 1px solid var(--line);
+    padding: 0.75rem;
+    text-align: left;
+  }
+  .badge {
+    border-radius: 999px;
+    padding: 0.2rem 0.55rem;
+    background: #e2e8f0;
+    color: #334155;
+    font-size: 0.8rem;
+    font-weight: 800;
+  }
+  .badge.open {
+    background: #dbeafe;
+    color: #1d4ed8;
+  }
+  .badge.pending {
+    background: #fef3c7;
+    color: #92400e;
+  }
+  .badge.closed {
+    background: #dcfce7;
+    color: #166534;
+  }
+`;
+document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];

package/starters/crud/tsconfig.json ADDED Viewed

@@ -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/starters/minimal/README.md ADDED Viewed

@@ -0,0 +1,19 @@
+# __APP_NAME__
+Generated with Mado __MADO_VERSION__.
+```bash
+npm install
+npm run build
+npm run serve
+```
+Open http://localhost:5173.
+## Files
+- `src/main.ts` mounts the router into `#app`.
+- `src/routes.ts` defines lazy page routes.
+- `src/pages/` contains route pages.
+- `src/components/` contains Web Components.
+- `src/styles/global.ts` contains global styles.

package/starters/minimal/index.html ADDED Viewed

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>__APP_NAME__</title>
+    <script type="importmap">
+      {
+        "imports": {
+          "@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>
+  </body>
+</html>

package/starters/minimal/package.json ADDED Viewed

@@ -0,0 +1,17 @@
+{
+  "name": "__PACKAGE_NAME__",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "serve": "mado serve"
+  },
+  "dependencies": {
+    "@madojs/mado": "__MADOJS_VERSION__"
+  },
+  "devDependencies": {
+    "typescript": "^6.0.3"
+  }
+}

package/starters/minimal/src/components/app-counter.ts ADDED Viewed

@@ -0,0 +1,31 @@
+import { component, css, html, signal } from "@madojs/mado";
+component(
+  "app-counter",
+  () => {
+    const count = signal(0);
+    return () => html`
+      <button @click=${() => count.update((n) => n + 1)}>
+        Count: ${count}
+      </button>
+    `;
+  },
+  {
+    styles: css`
+      :host {
+        display: inline-block;
+        margin-top: 1rem;
+      }
+      button {
+        border: 1px solid #1f2937;
+        border-radius: 6px;
+        background: #111827;
+        color: white;
+        padding: 0.65rem 0.9rem;
+        font: inherit;
+        cursor: pointer;
+      }
+    `,
+  },
+);