@madojs/mado 0.10.1 → 0.11.1

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

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

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

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

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

@@ -1,34 +0,0 @@
-// 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">
-        <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

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

@@ -1,7 +0,0 @@
-import { html, page } from "@madojs/mado";
-import "../components/ticket-detail.js";
-
-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

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

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

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

package/starters/crud/src/routes.ts

@@ -1,11 +0,0 @@
-import { routes } from "@madojs/mado";
-
-export const manifest = {
-  "/": () => 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"),
-};
-
-export default routes(manifest);

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

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

@@ -1,15 +0,0 @@
-{
-  "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

@@ -1,21 +0,0 @@
-# __APP_NAME__
-
-Generated with Mado __MADO_VERSION__.
-
-```bash
-npm install
-npm run dev
-```
-
-Open http://localhost:5173.
-
-Use `npm run build` for a production TypeScript build and `npm run serve` to
-serve an already-built app.
-
-## 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

@@ -1,28 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <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/"
-        }
-      }
-    </script>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/dist/main.js"></script>
-  </body>
-</html>

package/starters/minimal/mado.config.json

@@ -1,20 +0,0 @@
-{
-  "dev": {
-    "port": 5173,
-    "proxy": {}
-  },
-  "build": {
-    "out": "out",
-    "dist": "dist",
-    "publicDir": "public"
-  },
-  "bake": {
-    "entry": "src/routes.ts",
-    "template": "index.html",
-    "baseUrl": "https://example.com"
-  },
-  "bundle": {
-    "splitting": true,
-    "compress": ["gz", "br"]
-  }
-}

package/starters/minimal/package.json

@@ -1,24 +0,0 @@
-{
-  "name": "__PACKAGE_NAME__",
-  "version": "0.1.0",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "build": "mado build",
-    "typecheck": "mado typecheck",
-    "dev": "mado dev",
-    "serve": "mado serve",
-    "bundle": "mado bundle",
-    "bake": "mado bake",
-    "release": "mado release",
-    "preview": "mado preview"
-  },
-  "dependencies": {
-    "@madojs/mado": "__MADOJS_VERSION__"
-  },
-  "devDependencies": {
-    "esbuild": "^0.28.0",
-    "linkedom": "^0.18.12",
-    "typescript": "^6.0.3"
-  }
-}

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

@@ -1,31 +0,0 @@
-import { component, css, html, signal } from "@madojs/mado";
-
-component(
-  "x-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;
-      }
-    `,
-  },
-);

package/starters/minimal/src/main.ts

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

@@ -1,35 +0,0 @@
-// 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">
-        <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

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

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

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

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

@@ -1,15 +0,0 @@
-{
-  "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"]
-}