micra.js 1.1.0 → 2.1.0

package/src/dom/events.ts

@@ -13,7 +13,7 @@
 
 import type { InternalInstance, MicraElement, StateRecord } from '../types'
 import { warn } from '../utils/expr'
-import { queryOwn, queryAll } from './query'
+import { queryOwn, queryOwnAll, queryAll } from './query'
 
 /** @internal Attach a DOM listener and track it on the instance for destroy(). */
 function track<S extends StateRecord>(
@@ -94,7 +94,7 @@ export function bindAtEvents<S extends StateRecord>(
   const isFragment = root.nodeType === 11
   const all = isFragment
     ? queryAll(root as unknown as ParentNode, '*')
-    : queryAll(root, '*')
+    : queryOwnAll(root, '*')
 
   // Include root itself for the regular-element case
   if (!isFragment && !all.includes(root)) all.unshift(root)

package/src/dom/query.ts

@@ -25,7 +25,21 @@ export function queryAll(root: ParentNode, sel: string): Element[] {
  * owned by that nested component, not by root's component — so we skip it.
  */
 export function queryOwn(root: Element, attr: string): Element[] {
-  return queryAll(root, `[${attr}]`).filter(el => {
+  return filterOwn(root, queryAll(root, `[${attr}]`))
+}
+
+/**
+ * Like queryOwn but accepts an arbitrary CSS selector. Used by bindAtEvents
+ * which scans `*` for `@`-prefixed attribute names (no attribute selector exists
+ * for those).
+ */
+export function queryOwnAll(root: Element, sel: string): Element[] {
+  return filterOwn(root, queryAll(root, sel))
+}
+
+/** @internal Shared subtree-ownership filter. */
+function filterOwn(root: Element, els: Element[]): Element[] {
+  return els.filter(el => {
     let node: Element | null = el.parentElement
     while (node && node !== root) {
       if (node.hasAttribute('data-component')) return false

package/src/index.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/src/types.ts

@@ -138,6 +138,15 @@ export interface CachedBinding {
   expr: string
 }
 
+/**
+ * @internal data-if binding — like CachedBinding but also carries the
+ * placeholder Comment that takes the element's slot in the DOM while the
+ * element is detached (unmounted).
+ */
+export interface CachedIfBinding extends CachedBinding {
+  placeholder?: Comment
+}
+
 /**
  * @internal Per-element directive binding with pre-parsed pairs.
  * Used by `data-bind` and `data-class` — both share the
@@ -159,7 +168,7 @@ export interface CachedPairBinding {
 export interface DirectiveCache {
   text:  CachedBinding[]
   html:  CachedBinding[]
-  if:    CachedBinding[]
+  if:    CachedIfBinding[]
   show:  CachedBinding[]
   bind:  CachedPairBinding[]
   model: CachedBinding[]

package/src/utils/fetch.ts

@@ -77,18 +77,20 @@ export async function micraFetch(url: string, options: FetchOptions = {}): Promi
   if (method === 'GET' || method === 'HEAD') {
     const params: Record<string, string> = {}
     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 !== undefined) {
     headers['Content-Type'] = 'application/json'
-    body = JSON.stringify(options.body !== undefined ? options.body : options)
+    body = JSON.stringify(options.body)
   }
 
   const res = await fetch(finalUrl, {
     method,
     headers,
+    ...(options.signal !== undefined ? { signal: options.signal as AbortSignal } : {}),
     ...(body !== undefined ? { body } : {}),
   })