feat(component): add @choojs/component — nanocomponent + on-load as ES classes

Ported from nanocomponent 6.6.0 and on-load 3.4.1 (MIT) with attribution:
render/update/morph lifecycle, proxy nodes with isSameNode identity, and
the MutationObserver-driven load/unload hooks. This class is the intended
island/hydration boundary for later phases. @choojs/core exposes ./timing
as a subpath for the instrumentation calls.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_014NgfSjHE11oFpoSnLVKLXd

packages/component/onload.js

@@ -0,0 +1,106 @@
+// Ported from on-load 3.4.1 (MIT) — https://github.com/shama/on-load
+// Fire load/unload callbacks when watched nodes enter or leave the DOM,
+// driven by a single document-wide MutationObserver.
+
+const watch = Object.create(null)
+const KEY_ID = 'onloadid' + Math.random().toString(36).slice(2, 8)
+const KEY_ATTR = 'data-' + KEY_ID
+let INDEX = 0
+
+if (typeof window !== 'undefined' && window.MutationObserver) {
+  const observer = new MutationObserver(function (mutations) {
+    if (Object.keys(watch).length < 1) return
+    for (let i = 0; i < mutations.length; i++) {
+      if (mutations[i].attributeName === KEY_ATTR) {
+        eachAttr(mutations[i], turnon, turnoff)
+        continue
+      }
+      eachMutation(mutations[i].removedNodes, turnoff)
+      eachMutation(mutations[i].addedNodes, turnon)
+    }
+  })
+  if (document.body) {
+    beginObserve(observer)
+  } else {
+    document.addEventListener('DOMContentLoaded', function () {
+      beginObserve(observer)
+    })
+  }
+}
+
+function beginObserve (observer) {
+  observer.observe(document.documentElement, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    attributeOldValue: true,
+    attributeFilter: [KEY_ATTR]
+  })
+}
+
+export default function onload (el, on, off, caller) {
+  if (!document.body) throw new Error('onload: will not work prior to DOMContentLoaded')
+  on = on || function () {}
+  off = off || function () {}
+  el.setAttribute(KEY_ATTR, 'o' + INDEX)
+  watch['o' + INDEX] = [on, off, 0, caller]
+  INDEX += 1
+  return el
+}
+
+onload.KEY_ATTR = KEY_ATTR
+onload.KEY_ID = KEY_ID
+
+export { KEY_ATTR, KEY_ID }
+
+function turnon (index, el) {
+  if (watch[index][0] && watch[index][2] === 0) {
+    watch[index][0](el)
+    watch[index][2] = 1
+  }
+}
+
+function turnoff (index, el) {
+  if (watch[index][1] && watch[index][2] === 1) {
+    watch[index][1](el)
+    watch[index][2] = 0
+  }
+}
+
+function eachAttr (mutation, on, off) {
+  const newValue = mutation.target.getAttribute(KEY_ATTR)
+  if (sameOrigin(mutation.oldValue, newValue)) {
+    watch[newValue] = watch[mutation.oldValue]
+    return
+  }
+  if (watch[mutation.oldValue]) {
+    off(mutation.oldValue, mutation.target)
+  }
+  if (watch[newValue]) {
+    on(newValue, mutation.target)
+  }
+}
+
+function sameOrigin (oldValue, newValue) {
+  if (!oldValue || !newValue) return false
+  if (!watch[oldValue] || !watch[newValue]) return false
+  return watch[oldValue][3] === watch[newValue][3]
+}
+
+function eachMutation (nodes, fn) {
+  const keys = Object.keys(watch)
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i]
+    if (node && node.getAttribute && node.getAttribute(KEY_ATTR)) {
+      const onloadid = node.getAttribute(KEY_ATTR)
+      keys.forEach(function (k) {
+        if (onloadid === k) {
+          fn(k, node)
+        }
+      })
+    }
+    if (node.childNodes && node.childNodes.length > 0) {
+      eachMutation(node.childNodes, fn)
+    }
+  }
+}