@pfern/elements 0.1.7 → 0.1.8

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) {
@@ -297,6 +302,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 +341,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 +362,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.8",
   "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