@pfern/elements 0.1.7 → 0.1.9

package/elements.js

@@ -24,9 +24,10 @@ const svgNS = 'http://www.w3.org/2000/svg'
  */
 const rootMap = new WeakMap()
 
-const isNodeEnv = typeof document === 'undefined'
+const isNodeEnv = () => typeof document === 'undefined'
 
 let componentUpdateDepth = 0
+let currentEventRoot = null
 
 /**
  * Determines whether two nodes have changed enough to require replacement.
@@ -99,6 +100,8 @@ const assignProperties = (el, props) =>
         while (target && !target.__root) target = target.parentNode
         if (!target) return
 
+        const prevEventRoot = currentEventRoot
+        currentEventRoot = target
         try {
           const event = args[0]
           const isFormEvent = /^(oninput|onsubmit|onchange)$/.test(key)
@@ -142,6 +145,8 @@ const assignProperties = (el, props) =>
           }
         } catch (error) {
           console.error(error)
+        } finally {
+          currentEventRoot = prevEventRoot
         }
       }
     } else if (key === 'style' && typeof value === 'object') {
@@ -174,7 +179,7 @@ const assignProperties = (el, props) =>
  */
 const renderTree = (node, isRoot = true) => {
   if (typeof node === 'string' || typeof node === 'number') {
-    return isNodeEnv ? node : document.createTextNode(node)
+    return isNodeEnv() ? node : document.createTextNode(node)
   }
 
   if (!node || node.length === 0) {
@@ -213,6 +218,11 @@ const renderTree = (node, isRoot = true) => {
             ? document.createElementNS(svgNS, tag)
             : document.createElement(tag)
 
+  if (!el && (tag === 'head' || tag === 'body')) {
+    el = document.createElement(tag)
+    document.documentElement.appendChild(el)
+  }
+
   el.__vnode = node
 
   if (isRoot && tag !== 'html' && tag !== 'head' && tag !== 'body') {
@@ -284,7 +294,9 @@ export const render = (vtree, container = null) => {
   if (!prevVNode) {
     const dom = renderTree(vtree)
     if (target === document.documentElement) {
-      document.replaceChild(dom, document.documentElement)
+      if (dom !== document.documentElement) {
+        document.replaceChild(dom, document.documentElement)
+      }
     } else {
       target.appendChild(dom)
     }
@@ -297,6 +309,34 @@ export const render = (vtree, container = null) => {
   rootMap.set(vtree, target)
 }
 
+/**
+ * Updates the browser URL via the History API (no full page load).
+ * No-ops outside the browser.
+ *
+ * @param {string} to - The target URL (path/search/hash).
+ * @param {Object} [options]
+ * @param {boolean} [options.replace=false] - Use replaceState instead of pushState.
+ * @param {boolean} [options.force=false] - Update even if URL is already `to`.
+ * @param {any} [options.state={}] - History state.
+ * @param {string} [options.title=''] - History title (mostly ignored by browsers).
+ */
+export const navigate = (to, {
+  replace = false,
+  force = false,
+  state = {},
+  title = ''
+} = {}) => {
+  if (typeof window === 'undefined') return
+  if (typeof to !== 'string' || !to.length) return
+
+  const { pathname, search, hash } = window.location
+  const current = `${pathname}${search}${hash}`
+  if (!force && current === to) return
+
+  const method = replace ? 'replaceState' : 'pushState'
+  window.history[method](state, title, to)
+}
+
 /**
  * Wraps a function component so that it participates in reconciliation.
  *
@@ -308,11 +348,18 @@ export const component = fn => {
   return (...args) => {
     try {
       const prevEl = rootMap.get(instance)
-      const canUpdateInPlace = !!prevEl?.parentNode && componentUpdateDepth === 0
+      const canUpdateInPlace =
+        !!prevEl?.parentNode
+        && componentUpdateDepth === 0
+        && !currentEventRoot
 
       componentUpdateDepth++
-      const vnode = fn(...args)
-      componentUpdateDepth--
+      let vnode
+      try {
+        vnode = fn(...args)
+      } finally {
+        componentUpdateDepth--
+      }
 
       if (canUpdateInPlace) {
         const replacement = renderTree(['wrap', { __instance: instance }, vnode], true)
@@ -322,7 +369,6 @@ export const component = fn => {
 
       return ['wrap', { __instance: instance }, vnode]
     } catch (err) {
-      componentUpdateDepth = Math.max(0, componentUpdateDepth - 1)
       console.error('Component error:', err)
       return ['div', {}, `Error: ${err.message}`]
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pfern/elements",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "A minimalist, pure functional declarative UI toolkit.",
   "type": "module",
   "main": "elements.js",

package/types/elements.d.ts

@@ -12,6 +12,15 @@
 export const DEBUG: boolean;
 export function render(vtree: any, container?: any): void;
 export function component(fn: (...args: any[]) => any): (...args: any[]) => any;
+export function navigate(
+  to: string,
+  options?: {
+    replace?: boolean;
+    force?: boolean;
+    state?: any;
+    title?: string;
+  }
+): void;
 /**
  * @typedef {Record<string, any>} Props
  * @typedef {any[] | string | number | boolean | null | undefined | Node} Child