@pfern/elements 0.1.6 → 0.1.8

package/elements.js

@@ -24,7 +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.
@@ -97,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)
@@ -140,6 +145,8 @@ const assignProperties = (el, props) =>
           }
         } catch (error) {
           console.error(error)
+        } finally {
+          currentEventRoot = prevEventRoot
         }
       }
     } else if (key === 'style' && typeof value === 'object') {
@@ -172,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) {
@@ -185,8 +192,12 @@ const renderTree = (node, isRoot = true) => {
   }
 
   if (Array.isArray(node) && node[0] === 'wrap') {
-    const [_tag, _props, child] = node
-    return renderTree(child, true)
+    const [_tag, props = {}, child] = node
+    const el = renderTree(child, true)
+    if (props && typeof props === 'object' && props.__instance) {
+      rootMap.set(props.__instance, el)
+    }
+    return el
   }
 
   const [tag, props = {}, ...children] = node
@@ -291,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.
  *
@@ -298,16 +337,30 @@ export const render = (vtree, container = null) => {
  * @returns {(...args: any[]) => any} - A callable component that can manage its own subtree.
  */
 export const component = fn => {
+  const instance = {}
   return (...args) => {
     try {
-      const vnode = fn(...args)
-      const prevEl = rootMap.get(vnode)
-      if (prevEl?.parentNode) {
-        const replacement = renderTree(['wrap', {}, vnode], true)
+      const prevEl = rootMap.get(instance)
+      const canUpdateInPlace =
+        !!prevEl?.parentNode
+        && componentUpdateDepth === 0
+        && !currentEventRoot
+
+      componentUpdateDepth++
+      let vnode
+      try {
+        vnode = fn(...args)
+      } finally {
+        componentUpdateDepth--
+      }
+
+      if (canUpdateInPlace) {
+        const replacement = renderTree(['wrap', { __instance: instance }, vnode], true)
         prevEl.parentNode.replaceChild(replacement, prevEl)
         return replacement.__vnode
       }
-      return ['wrap', {}, vnode]
+
+      return ['wrap', { __instance: instance }, vnode]
     } catch (err) {
       console.error('Component error:', err)
       return ['div', {}, `Error: ${err.message}`]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pfern/elements",
-  "version": "0.1.6",
+  "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