@madojs/mado 0.7.0 → 0.9.0

package/docs/fr/00-the-mado-way.md

@@ -2,9 +2,12 @@
 
 > Une seule bonne façon. Des contrats stricts. Pas de magie.
 
-Mado n'est pas seulement un framework — c'est un **ensemble de conventions**. Si vous les
-respectez, le projet reste compréhensible même avec 200 écrans et 5 développeurs. Si vous
-les enfreignez — les types et le linter vous le diront immédiatement.
+Mado est un framework pour les équipes qui construisent des panneaux d'admin,
+des outils internes et des SPA métier — des apps qui doivent être simples à
+créer et ennuyeuses à maintenir. Pour cela, il impose un **ensemble de
+conventions**. Si vous les respectez, le projet reste compréhensible même avec
+200 écrans et 5 développeurs. Si vous les enfreignez — les types et le linter
+vous le diront immédiatement.
 
 ## Principes
 
@@ -42,13 +45,21 @@ tous écrire de la même manière.
 
 ```ts
 // src/components/user-card.ts
-import { component, html, css } from '@madojs/mado';
-
-component('x-user-card', () => {
-  return () => html`<div class="card"><slot/></div>`;
-}, {
-  styles: css`.card { padding: 1rem; }`,
-});
+import { component, html, css } from "@madojs/mado";
+
+component(
+  "x-user-card",
+  () => {
+    return () => html`<div class="card"><slot /></div>`;
+  },
+  {
+    styles: css`
+      .card {
+        padding: 1rem;
+      }
+    `,
+  },
+);
 ```
 
 `import './components/user-card.js'` **enregistre** le composant via
@@ -63,7 +74,7 @@ component('x-user-card', () => {
 const user = resource(() => `/api/users/${id()}`, jsonFetcher());
 
 // écriture → mutation
-const save = mutation(api.save, { invalidates: ['/api/users*'] });
+const save = mutation(api.save, { invalidates: ["/api/users*"] });
 ```
 
 Cela fournit la mise en cache, l'annulation, la gestion des erreurs et l'invalidation automatique.
@@ -72,11 +83,11 @@ Cela fournit la mise en cache, l'annulation, la gestion des erreurs et l'invalid
 
 ```ts
 // src/pages/user-profile.ts
-import { page, html, resource, jsonFetcher } from '@madojs/mado';
+import { page, html, resource, jsonFetcher } from "@madojs/mado";
 
 export default page({
   title: ({ id }) => `Utilisateur #${id}`,
-  view:  ({ params }) => html`...`,
+  view: ({ params }) => html`...`,
 });
 ```
 
@@ -101,6 +112,7 @@ Voir [`01-routing.md`](./01-routing.md).
 ## En cas de doute
 
 Si vous vous demandez "quelle est la meilleure façon ici ?" — c'est un signal que :
+
 1. Soit il existe un helper intégré que vous ne connaissez pas (consultez `docs/`).
 2. Soit c'est une nouvelle situation — discutez-en et **consignez-la** dans ce document
    comme une convention supplémentaire.

package/docs/fr/07-llm-pitfalls.md

@@ -619,5 +619,7 @@ Plus de détails : [`17-shadow-dom-forms.md`](./17-shadow-dom-forms.md).
 | `@customElement('x')`                 | `component('x-name', setup)`                |
 | `host.getAttribute('x')` dans render  | `ctx.attr('x', default)` (réactif)          |
 | `jsonFetcher()` avec auth             | `apiFetcher()` (attache le Bearer token)    |
+| `setInterval` dans page view          | `onDispose(() => clearInterval(id))`        |
+| lecture signal dans async init view()  | `untracked(() => cursor())`                 |
 
 Si quelque chose ne rentre pas dans cette liste — ouvrez `src/` et **lisez 500 lignes**. Sérieusement. Mado est intentionnellement petit pour être lisible.

package/docs/ru/00-the-mado-way.md

@@ -2,7 +2,11 @@
 
 > Один правильный путь. Жёсткие контракты. Никакой магии.
 
-Mado — это не просто фреймворк, это **набор соглашений**. Если ты следуешь им, проект остаётся понятным даже когда в нём 200 экранов и 5 разработчиков. Если нарушаешь — типы и линтер скажут об этом сразу.
+Mado — фреймворк для команд, которые строят админки, внутренние инструменты
+и бизнес-SPA — приложения, которые должны быть просты в разработке и скучны
+в поддержке. Для этого он задаёт **набор соглашений**. Если ты следуешь им,
+проект остаётся понятным даже когда в нём 200 экранов и 5 разработчиков. Если
+нарушаешь — типы и линтер скажут об этом сразу.
 
 ## Принципы
 
@@ -32,13 +36,21 @@ src/
 
 ```ts
 // src/components/user-card.ts
-import { component, html, css } from '@madojs/mado';
-
-component('x-user-card', () => {
-  return () => html`<div class="card"><slot/></div>`;
-}, {
-  styles: css`.card { padding: 1rem; }`,
-});
+import { component, html, css } from "@madojs/mado";
+
+component(
+  "x-user-card",
+  () => {
+    return () => html`<div class="card"><slot /></div>`;
+  },
+  {
+    styles: css`
+      .card {
+        padding: 1rem;
+      }
+    `,
+  },
+);
 ```
 
 Импорт `import './components/user-card.js'` **регистрирует** компонент через `customElements.define`. Это side-effect. Где компонент нужен — там и импортируем.
@@ -52,7 +64,7 @@ component('x-user-card', () => {
 const user = resource(() => `/api/users/${id()}`, jsonFetcher());
 
 // запись → mutation
-const save = mutation(api.save, { invalidates: ['/api/users*'] });
+const save = mutation(api.save, { invalidates: ["/api/users*"] });
 ```
 
 Это даёт кеш, отмену, обработку ошибок, авто-инвалидацию.
@@ -61,11 +73,11 @@ const save = mutation(api.save, { invalidates: ['/api/users*'] });
 
 ```ts
 // src/pages/user-profile.ts
-import { page, html, resource, jsonFetcher } from '@madojs/mado';
+import { page, html, resource, jsonFetcher } from "@madojs/mado";
 
 export default page({
   title: ({ id }) => `User #${id}`,
-  view:  ({ params }) => html`...`,
+  view: ({ params }) => html`...`,
 });
 ```
 
@@ -87,6 +99,7 @@ export default page({
 ## Когда сомневаешься
 
 Если ты задаёшься вопросом "а как тут лучше?" — это сигнал, что:
+
 1. Либо есть встроенный хелпер, который ты не знаешь (загляни в `docs/`).
 2. Либо это новая ситуация — её надо обсудить и **зафиксировать** в этом документе как ещё одно соглашение.
 

package/docs/ru/07-llm-pitfalls.md

@@ -618,5 +618,7 @@ component("x-input", ({ host, attr }) => {
 | `@customElement('x')`                 | `component('x-name', setup)`                |
 | `host.getAttribute('x')` в render     | `ctx.attr('x', default)` (реактивно)        |
 | `jsonFetcher()` с авторизацией        | `apiFetcher()` (прикрепляет Bearer токен)   |
+| `setInterval` в page view             | `onDispose(() => clearInterval(id))`        |
+| чтение сигнала в async init view()    | `untracked(() => cursor())`                 |
 
 Если что-то не подходит из этого списка — открой `src/` и **прочитай 500 строк**. Это серьёзно. Mado специально маленький, чтобы быть читаемым.

package/docs/uk/00-the-mado-way.md

@@ -2,7 +2,9 @@
 
 > Один зрозумілий шлях. Жорсткі контракти. Мінімум магії.
 
-Mado — це не лише набір API, а набір домовленостей. Якщо їх дотримуватись,
+Mado — фреймворк для команд, що будують адмін-панелі, внутрішні інструменти
+та бізнес-SPA — застосунки, які мають бути простими у розробці та нудними в
+підтримці. Для цього він задає **набір домовленостей**. Якщо їх дотримуватись,
 проєкт залишається читабельним навіть тоді, коли в ньому десятки сторінок і
 кілька розробників.
 

package/docs/uk/07-llm-pitfalls.md

@@ -141,3 +141,5 @@ Object.defineProperty(host, "value", {
 | `class extends HTMLElement` | `component('x-name', setup)` |
 | `host.getAttribute('x')`    | `ctx.attr('x', default)`     |
 | `jsonFetcher()` з auth      | `apiFetcher()`               |
+| `setInterval` в page view   | `onDispose(() => clearInterval(id))` |
+| читання сигналу в async init | `untracked(() => cursor())`  |

package/llms.txt

@@ -1,9 +1,9 @@
 # Mado
 
-> Small native-web SPA framework on the platform (Web Components + signals + tagged-template `html`).  
-> No build step (only `tsc`), no runtime dependencies, readable in an evening.
+> A calm browser-native SPA framework for internal tools, admin panels and business apps.  
+> Routing, forms, state, data fetching and prerendering. TypeScript-only build (`tsc`), zero runtime dependencies.
 
-Mado is a narrowly-focused frontend framework that deliberately avoids React patterns (no JSX, no hooks, no VDOM, no Vite). Target audience: backend developers and senior frontend engineers who are tired of the infrastructure complexity of React/Next.
+Mado is a focused frontend framework for admin panels, internal tools and CRUD-heavy SPA. It deliberately avoids React patterns (no JSX, no hooks, no VDOM, no Vite). Target audience: backend developers and small teams who want a complete app stack without frontend infrastructure overhead.
 
 ## Key things an AI assistant needs to know
 
@@ -13,7 +13,9 @@ Mado is a narrowly-focused frontend framework that deliberately avoids React pat
 - **Components are Web Components.** Registered via `component('x-name', setupFn, options)`. Names must include a hyphen (`x-foo`, `my-button`).
 - **Component files register tags as side effects.** The browser does not auto-import files by tag name. If `<x-card>` works, some imported module already ran `customElements.define("x-card", ...)`.
 - **Cleanup via `ctx.onDispose(fn)`** in setup, not via return from effect.
-- **Reactive attributes via `ctx.attr(name, default?)`** — returns a Signal<string> that auto-updates when the attribute changes. No MutationObserver needed.
+- **Page cleanup via `onDispose`** in view: `view: ({ onDispose }) => { ... onDispose(() => cleanup()); }`. Only needed for raw APIs (setInterval, WebSocket). `resource()`/`effect()` auto-cleanup.
+- **`untracked()` in page view async** — functions called synchronously in `view()` that read signals must wrap reads in `untracked()` to avoid effect cycles with the router.
+- **Reactive attributes via `ctx.attr(name, default?)`** — returns a Signal<string> that auto-updates when the attribute changes. Uses `observedAttributes` when available, falls back to a per-instance `MutationObserver` for attrs registered during setup. No boilerplate needed.
 
 ## Critical template rules
 
@@ -219,7 +221,7 @@ export default page({
 
 ## Version
 
-`0.7.0` — pre-1.0 product-surface release. API may still change before 1.0.
+`0.8.0` — pre-1.0 product-surface release. API may still change before 1.0.
 Semver is not guaranteed on minor versions before 1.0.
 
 ## License

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@madojs/mado",
-  "version": "0.7.0",
-  "description": "Mado — a small native-web SPA framework with Web Components, signals, tagged-template html, router, resources, and forms. TypeScript-only build, zero runtime dependencies.",
+  "version": "0.9.0",
+  "description": "Mado — a calm browser-native SPA framework for internal tools, admin panels and business apps. Routing, forms, state and data fetching without frontend infrastructure overhead.",
   "type": "module",
   "license": "MIT",
   "keywords": [
@@ -80,4 +80,4 @@
   "engines": {
     "node": ">=20"
   }
-}
+}

package/scripts/bundle.mjs

@@ -120,14 +120,14 @@ const result = await build({
   legalComments: "none",
 });
 
-const entryOutput = Object.entries(result.metafile.outputs).find(
-  ([name, info]) => info.entryPoint && name.endsWith(".js"),
-);
-if (!entryOutput) {
-  console.error("[bundle] entry not found in outputs");
+// With splitting: true, esbuild marks all dynamic-import chunks as having
+// entryPoint. We identify the real app entry by the `entryNames` prefix "main-".
+const mainBundle = (await readdir(ASSETS_DIR))
+  .find((f) => f.startsWith("main-") && f.endsWith(".js") && !f.endsWith(".js.map"));
+if (!mainBundle) {
+  console.error("[bundle] entry not found in outputs (no main-*.js in assets dir)");
   process.exit(1);
 }
-const mainBundle = basename(entryOutput[0]);
 
 // Collect all js chunks in the assets dir.
 const allJs = (await readdir(ASSETS_DIR)).filter((f) => f.endsWith(".js"));