micra.js 1.1.0 → 2.1.0

package/README.md

@@ -1,6 +1,6 @@
 # Micra.js
 
-Micra.js is a lightweight reactive TypeScript framework for small sites and SaaS apps. It gives you reactive state, DOM directives, keyed list rendering, an event bus, SSR-friendly props, and auto-mounting in about 3.7 KB gzip.
+Micra.js is a lightweight reactive TypeScript framework for small sites and SaaS apps. It gives you reactive state, DOM directives, keyed list rendering, an event bus, SSR-friendly props, and auto-mounting in about 5 KB gzip.
 
 ## What is Micra.js?
 
@@ -27,15 +27,19 @@ Use it when you want:
   <button @click="increment">+</button>
 </div>
 
-<script src="https://unpkg.com/micra.js/dist/micra.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/micra.js/dist/micra.min.js"></script>
 <script>
-  Micra.define('counter', {
+  Micra.define("counter", {
     state: { count: 0 },
-    increment() { this.state.count++ },
-    decrement() { this.state.count-- },
-  })
-
-  Micra.start()
+    increment() {
+      this.state.count++;
+    },
+    decrement() {
+      this.state.count--;
+    },
+  });
+
+  Micra.start();
 </script>
 ```
 
@@ -44,7 +48,7 @@ Use it when you want:
 ### CDN
 
 ```html
-<script src="https://unpkg.com/micra.js/dist/micra.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/micra.js/dist/micra.min.js"></script>
 ```
 
 ### npm
@@ -54,7 +58,7 @@ npm install micra.js
 ```
 
 ```ts
-import * as Micra from 'micra.js'
+import * as Micra from "micra.js";
 ```
 
 ## Basic usage
@@ -71,42 +75,42 @@ A counter mounted automatically from `data-component`:
 ```
 
 ```ts
-import * as Micra from 'micra.js'
+import * as Micra from "micra.js";
 
-Micra.define('counter', {
+Micra.define("counter", {
   state: { count: 0 },
 
   increment() {
-    this.state.count++
+    this.state.count++;
   },
 
   decrement() {
-    this.state.count--
+    this.state.count--;
   },
 
   reset() {
-    this.state.count = 0
+    this.state.count = 0;
   },
-})
+});
 
-Micra.start()
+Micra.start();
 ```
 
 ## Directives
 
-| Directive | Example | Description |
-|---|---|---|
-| `data-text` | `data-text="name"` | Set `textContent` |
-| `data-html` | `data-html="content"` | Set `innerHTML` |
-| `data-if` | `data-if="count > 0"` | Toggle display |
-| `data-show` | `data-show="loaded"` | Alias of `data-if` |
-| `data-bind` | `data-bind="href:url, disabled:loading"` | Bind attributes |
-| `data-model` | `data-model="search"` | Two-way input binding |
-| `data-each` | `data-each="items" data-key="id"` | List rendering |
-| `data-ref` | `data-ref="chart"` | DOM ref in `this.refs` |
-| `data-class` | `data-class="active:isActive"` | Toggle classes additively |
-| `data-on` | `data-on="click:save"` | Bind DOM events |
-| `@event` | `@click="increment"` | Shorthand event binding |
+| Directive    | Example                                  | Description               |
+| ------------ | ---------------------------------------- | ------------------------- |
+| `data-text`  | `data-text="name"`                       | Set `textContent`         |
+| `data-html`  | `data-html="content"`                    | Set `innerHTML`           |
+| `data-if`    | `data-if="count > 0"`                    | Toggle display            |
+| `data-show`  | `data-show="loaded"`                     | Alias of `data-if`        |
+| `data-bind`  | `data-bind="href:url, disabled:loading"` | Bind attributes           |
+| `data-model` | `data-model="search"`                    | Two-way input binding     |
+| `data-each`  | `data-each="items" data-key="id"`        | List rendering            |
+| `data-ref`   | `data-ref="chart"`                       | DOM ref in `this.refs`    |
+| `data-class` | `data-class="active:isActive"`           | Toggle classes additively |
+| `data-on`    | `data-on="click:save"`                   | Bind DOM events           |
+| `@event`     | `@click="increment"`                     | Shorthand event binding   |
 
 ## API reference summary
 
@@ -164,3 +168,6 @@ this.on(event, handler)
 - [SSR](./docs/ssr.md)
 - [Examples](./docs/examples.md)
 - [API reference](./docs/api-reference.md)
+- Recipes:
+  - [Todo app](./docs/recipes/todo-app.md)
+  - [Server-sent events (SSE)](./docs/recipes/sse.md)

package/dist/dom/query.d.ts

@@ -21,3 +21,9 @@ export declare function queryAll(root: ParentNode, sel: string): Element[];
  * owned by that nested component, not by root's component — so we skip it.
  */
 export declare function queryOwn(root: Element, attr: string): Element[];
+/**
+ * Like queryOwn but accepts an arbitrary CSS selector. Used by bindAtEvents
+ * which scans `*` for `@`-prefixed attribute names (no attribute selector exists
+ * for those).
+ */
+export declare function queryOwnAll(root: Element, sel: string): Element[];

package/dist/index.d.ts

@@ -17,7 +17,7 @@
  *   - SSR-friendly: Micra.start() is safe to call multiple times
  *   - Directive cache: O(1) re-renders after first mount
  *
- * Size target: < 5 KB minified+gzipped
+ * Size target: < 5.5 KB minified+gzipped
  *
  * @module Micra
  */

package/dist/micra.cjs.js

@@ -1,4 +1,4 @@
-/* Micra.js v1.1.0 — https://github.com/micra-js/micra — MIT */
+/* Micra.js v2.1.0 — https://github.com/micra-js/micra — MIT */
 "use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -62,17 +62,19 @@ async function micraFetch(url, options = {}) {
   if (method === "GET" || method === "HEAD") {
     const params = {};
     for (const [k, v] of Object.entries(options)) {
-      if (k !== "method" && k !== "headers" && v != null) params[k] = String(v);
+      if (k !== "method" && k !== "headers" && k !== "signal" && v != null)
+        params[k] = String(v);
     }
     if (Object.keys(params).length)
       finalUrl += (url.includes("?") ? "&" : "?") + new URLSearchParams(params);
-  } else {
+  } else if (options.body !== void 0) {
     headers["Content-Type"] = "application/json";
-    body = JSON.stringify(options.body !== void 0 ? options.body : options);
+    body = JSON.stringify(options.body);
   }
   const res = await fetch(finalUrl, {
     method,
     headers,
+    ...options.signal !== void 0 ? { signal: options.signal } : {},
     ...body !== void 0 ? { body } : {}
   });
   if (!res.ok)
@@ -259,7 +261,13 @@ function queryAll(root, sel) {
   return Array.from(root.querySelectorAll(sel));
 }
 function queryOwn(root, attr) {
-  return queryAll(root, `[${attr}]`).filter((el) => {
+  return filterOwn(root, queryAll(root, `[${attr}]`));
+}
+function queryOwnAll(root, sel) {
+  return filterOwn(root, queryAll(root, sel));
+}
+function filterOwn(root, els) {
+  return els.filter((el) => {
     let node = el.parentElement;
     while (node && node !== root) {
       if (node.hasAttribute("data-component")) return false;
@@ -279,7 +287,21 @@ function applyHtml(el, expr, state) {
   var _a;
   el.innerHTML = String((_a = evalExpr(expr, state)) != null ? _a : "");
 }
-function applyIf(el, expr, state) {
+function applyIf(binding, state) {
+  const el = binding.el;
+  const truthy = !!evalExpr(binding.expr, state);
+  if (truthy) {
+    const ph = binding.placeholder;
+    if (ph && ph.parentNode) ph.parentNode.replaceChild(el, ph);
+  } else {
+    const parent = el.parentNode;
+    if (parent) {
+      if (!binding.placeholder) binding.placeholder = document.createComment("if");
+      parent.replaceChild(binding.placeholder, el);
+    }
+  }
+}
+function applyShow(el, expr, state) {
   el.style.display = evalExpr(expr, state) ? "" : "none";
 }
 function applyBind(el, pairs, state) {
@@ -354,10 +376,10 @@ function applyDirectives(root, state, rawState, _instance) {
   applyFromList(el.__micraCache, state, rawState);
 }
 function applyFromList(cache, state, rawState) {
+  cache.if.forEach((b) => applyIf(b, state));
   cache.text.forEach((b) => applyText(b.el, b.expr, state));
   cache.html.forEach((b) => applyHtml(b.el, b.expr, state));
-  cache.if.forEach((b) => applyIf(b.el, b.expr, state));
-  cache.show.forEach((b) => applyIf(b.el, b.expr, state));
+  cache.show.forEach((b) => applyShow(b.el, b.expr, state));
   cache.bind.forEach((b) => applyBind(b.el, b.pairs, state));
   cache.model.forEach((b) => applyModel(b.el, b.expr.trim(), rawState));
   cache.class.forEach((b) => applyClass(b.el, b.pairs, state));
@@ -432,7 +454,7 @@ function bindDataOn(root, instance) {
 }
 function bindAtEvents(root, instance) {
   const isFragment = root.nodeType === 11;
-  const all = isFragment ? queryAll(root, "*") : queryAll(root, "*");
+  const all = isFragment ? queryAll(root, "*") : queryOwnAll(root, "*");
   if (!isFragment && !all.includes(root)) all.unshift(root);
   for (const el of all) {
     const mEl = el;
@@ -503,6 +525,7 @@ function renderList(root, state, rawState, instance) {
     const marker = tmpl.__micraMarker;
     const keyMap = tmpl.__micraNodes;
     const parent = marker.parentNode;
+    if (!parent) return;
     if (!Array.isArray(items)) {
       tmpl.__micraList.forEach((n) => n.remove());
       tmpl.__micraList = [];