@madojs/mado 0.10.0 → 0.11.0

package/templates/page-detail.ts

@@ -1,63 +0,0 @@
-/**
- * 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

@@ -1,94 +0,0 @@
-/**
- * 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

@@ -1,79 +0,0 @@
-/**
- * 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>`,
-});