lightview 2.1.0 → 2.2.2

package/lightview.js

@@ -1 +1,613 @@
-!function(){"use strict";const e=globalThis.__LIGHTVIEW_INTERNALS__||(globalThis.__LIGHTVIEW_INTERNALS__={currentEffect:null,registry:new Map,dependencyMap:new WeakMap}),t=(t,n)=>{let o="string"==typeof n?n:null==n?void 0:n.name;const r=null==n?void 0:n.storage;if(o&&r)try{const e=r.getItem(o);null!==e&&(t=JSON.parse(e))}catch(l){}let s=t;const i=new Set,a=(...e)=>{if(0===e.length)return a.value;a.value=e[0]};if(Object.defineProperty(a,"value",{get:()=>(e.currentEffect&&(i.add(e.currentEffect),e.currentEffect.dependencies.add(i)),s),set(e){if(s!==e){if(s=e,o&&r)try{r.setItem(o,JSON.stringify(s))}catch(l){}[...i].forEach(e=>e())}}}),o)if(e.registry.has(o)){if(e.registry.get(o)!==a)throw new Error(`Lightview: A signal or state with the name "${o}" is already registered.`)}else e.registry.set(o,a);return a};t.get=(n,o)=>e.registry.has(n)||void 0===o?e.registry.get(n):t(o,n);const n=t=>{const n=()=>{if(n.active&&!n.running){n.dependencies.forEach(e=>e.delete(n)),n.dependencies.clear(),n.running=!0,e.currentEffect=n;try{t()}finally{e.currentEffect=null,n.running=!1}}};return n.active=!0,n.running=!1,n.dependencies=new Set,n.stop=()=>{n.dependencies.forEach(e=>e.delete(n)),n.dependencies.clear(),n.active=!1},n(),n},o=(e,t)=>Object.getOwnPropertyNames(e).filter(n=>"function"==typeof e[n]&&t(n));o(Date.prototype,e=>/^(to|get|valueOf)/.test(e)),o(Date.prototype,e=>/^set/.test(e));const r=(e,t,n)=>{let o=e.get(t);return o||(o=n(),e.set(t,o)),o},s={get currentEffect(){return(globalThis.__LIGHTVIEW_INTERNALS__||(globalThis.__LIGHTVIEW_INTERNALS__={})).currentEffect}},i=new WeakMap,a=()=>({effects:[],onmount:null,onunmount:null}),l=e.registry,c=(e,t)=>{const n=r(i,e,a);n.effects||(n.effects=[]),n.effects.push(t)},d=Symbol("lightview.shadowDOM"),u=e=>e&&"object"==typeof e&&!0===e[d],f=(e,t)=>{if(t.shadowRoot)return void console.warn("Lightview: Element already has a shadowRoot, skipping shadowDOM directive");const n=t.attachShadow({mode:e.mode}),o=[],r=[...e.styles||[]];if(e.adoptedStyleSheets&&e.adoptedStyleSheets.length>0&&e.adoptedStyleSheets.forEach(e=>{e instanceof CSSStyleSheet?o.push(e):"string"==typeof e&&r.push(e)}),o.length>0)try{n.adoptedStyleSheets=o}catch(s){console.warn("Lightview: adoptedStyleSheets not supported")}for(const i of r){const e=document.createElement("link");e.rel="stylesheet",e.href=i,n.appendChild(e)}e.children&&e.children.length>0&&L(e.children,n)};let h=!1;const p=new WeakMap,g=(e,t,n={},o=[])=>{const r=b({tag:t,attributes:n,children:o,get domEl(){return e}});return p.set(e,r),r},m=(e,t={},o=[])=>{if(N[e]&&(e=N[e]),"function"==typeof e){const n=e({...t},o);return y(n)}if("shadowDOM"===e)return((e,t)=>({[d]:!0,mode:e.mode||"open",styles:e.styles||[],adoptedStyleSheets:e.adoptedStyleSheets||[],children:t}))(t,o);if("text"===e&&!h){const r=document.createTextNode(""),s={tag:e,attributes:t,children:o,get domEl(){return r}},i=()=>{const e=(Array.isArray(s.children)?s.children:[s.children]).flat(1/0).map(e=>{const t="function"==typeof e?e():e;return t&&"object"==typeof t&&t.domEl?t.domEl.textContent:null==t?"":String(t)});r.textContent=e.join(" ")},a=new Proxy(s,{set:(e,t,n)=>(e[t]=n,"children"===t&&i(),!0)});if(o.flat(1/0).some(e=>"function"==typeof e)){const e=n(i);c(r,e)}return i(),a}const r="svg"===e.toLowerCase(),s=h;r&&(h=!0);const i=h?document.createElementNS("http://www.w3.org/2000/svg",e):document.createElement(e),a=g(i,e,t,o);return a.attributes=t,a.children=o,r&&(h=s),a},y=e=>{if(!e)return null;if(j.hooks.processChild&&(e=j.hooks.processChild(e)??e),e.domEl)return e;const t=typeof e;if("object"===t&&e instanceof HTMLElement)return g(e,e.tagName.toLowerCase(),{},[]);if("object"===t&&e instanceof String){const t=document.createElement("span");return t.textContent=e.toString(),g(t,"span",{},[])}if("string"===t){const t=document.createElement("template");t.innerHTML=e.trim();const n=t.content;if(1===n.childNodes.length&&n.firstChild instanceof HTMLElement){const e=n.firstChild;return g(e,e.tagName.toLowerCase(),{},[])}{const e=document.createElement("span");return e.style.display="contents",e.appendChild(n),g(e,"span",{},[])}}return"object"==typeof e&&e.tag?m(e.tag,e.attributes||{},e.children||[]):null},b=e=>{const t=e.domEl;return new Proxy(e,{set:(e,n,o)=>(e[n]="attributes"===n?v(o,t):"children"===n?C(o,t):o,!0)})},w=new Set(["value","checked","selected","selectedIndex","className","innerHTML","innerText"]),E=(e,t,n)=>{const o="boolean"==typeof e[t];"href"!==t&&"src"!==t||"string"!=typeof n||!/^(javascript|vbscript|data:text\/html|data:application\/javascript)/i.test(n)||(console.warn(`[Lightview] Blocked dangerous protocol in ${t}: ${n}`),n="javascript:void(0)"),w.has(t)||o?e[t]=o?null!=n&&!1!==n&&"false"!==n:n:null==n?e.removeAttribute(t):e.setAttribute(t,n)},v=(e,t)=>{const o={};for(let[s,l]of Object.entries(e))if("onmount"===s||"onunmount"===s){r(i,t,a)[s]=l,"onmount"===s&&t.isConnected&&l(t)}else if(s.startsWith("on")){if("function"==typeof l){const e=s.slice(2).toLowerCase();t.addEventListener(e,l)}else"string"==typeof l&&t.setAttribute(s,l);o[s]=l}else if("function"==typeof l){const e=n(()=>{const e=l();"style"===s&&"object"==typeof e?Object.assign(t.style,e):E(t,s,e)});c(t,e),o[s]=l}else"style"===s&&"object"==typeof l?(Object.entries(l).forEach(([e,o])=>{if("function"==typeof o){const r=n(()=>{t.style[e]=o()});c(t,r)}else t.style[e]=o}),o[s]=l):(E(t,s,l),o[s]=l);return o},S=(e,t,o=!0)=>{o&&void 0!==t.innerHTML&&(t.innerHTML="");const r=[],s=t.tagName&&("script"===t.tagName.toLowerCase()||"style"===t.tagName.toLowerCase()),i=e.flat(1/0);for(let a of i){if(j.hooks.processChild&&!s&&(a=j.hooks.processChild(a)??a),u(a)){if(t instanceof ShadowRoot){console.warn("Lightview: Cannot nest shadowDOM inside another shadowDOM");continue}f(a,t);continue}const e=typeof a;if("function"===e){const e=document.createComment("lv:s"),o=document.createComment("lv:e");let s;t.appendChild(e),t.appendChild(o);const i=()=>{for(;e.nextSibling&&e.nextSibling!==o;)e.nextSibling.remove();const t=a();if(null!=t)if(!s||e.isConnected)if("object"==typeof t&&t instanceof String){const e=document.createTextNode(t);o.parentNode.insertBefore(e,o)}else{const e=document.createDocumentFragment(),n=Array.isArray(t)?t:[t];S(n,e,!1),o.parentNode.insertBefore(e,o)}else s.stop()};s=n(i),c(e,s),r.push(a)}else if(["string","number","boolean","symbol"].includes(e)||a&&"object"===e&&a instanceof String)t.appendChild(document.createTextNode(a)),r.push(a);else if(a&&"object"===e&&a.tag){const e=a.domEl?a:m(a.tag,a.attributes||{},a.children||[]);t.appendChild(e.domEl),r.push(e)}}return r},L=(e,t)=>S(e,t,!1),C=(e,t)=>S(e,t,!0),N={},T=new Proxy({},{get(e,t){if("_customTags"===t)return{...N};const n=(...e)=>{let n={},o=e;const r=e[0];return e.length>0&&r&&"object"==typeof r&&!r.tag&&!r.domEl&&!Array.isArray(r)&&(n=r,o=e.slice(1)),m(N[t]||t,n,o)};return N[t]&&Object.assign(n,N[t]),n},set:(e,t,n)=>(N[t]=n,!0)}),j={signal:t,get:t.get,computed:e=>{const o=t(void 0);return n(()=>{o.value=e()}),o},effect:n,registry:l,element:m,enhance:(e,t={})=>{const o="string"==typeof e?document.querySelector(e):e,r=o.domEl||o;if(!(r instanceof HTMLElement))return null;const s=r.tagName.toLowerCase();let i=p.get(r);i||(i=g(r,s));const{innerText:a,innerHTML:l,...c}=t;return void 0!==a&&("function"==typeof a?n(()=>{r.innerText=a()}):r.innerText=a),void 0!==l&&("function"==typeof l?n(()=>{r.innerHTML=l()}):r.innerHTML=l),Object.keys(c).length>0&&(i.attributes=c),i},tags:T,$:(e,t=document.body)=>{const n="string"==typeof e?t.querySelector(e):e;return n?(Object.defineProperty(n,"content",{value(e,t="inner"){t=t.toLowerCase(),j.tags;const o=n.tagName&&("script"===n.tagName.toLowerCase()||"style"===n.tagName.toLowerCase()),r=(Array.isArray(e)?e:[e]).map(e=>(j.hooks.processChild&&!o&&(e=j.hooks.processChild(e)??e),e.tag&&!e.domEl?m(e.tag,e.attributes||{},e.children||[]).domEl:e.domEl||e)),s="shadow"===t?n.shadowRoot||n.attachShadow({mode:"open"}):n;return"inner"===t||"shadow"===t?s.replaceChildren(...r):"outer"===t?s.replaceWith(...r):"afterbegin"===t?s.prepend(...r):"beforeend"===t?s.append(...r):r.forEach(e=>n.insertAdjacentElement(t,e)),n},configurable:!0,writable:!0}),n):null},hooks:{onNonStandardHref:null,processChild:null,validateUrl:null},internals:{core:s,domToElement:p,wrapDomElement:g,setupChildren:C}};if("undefined"!=typeof module&&module.exports&&(module.exports=j),"undefined"!=typeof window&&(globalThis.Lightview=j,globalThis.addEventListener("click",e=>{const t=e.composedPath().find(e=>{var t,n;return"A"===e.tagName&&(null==(n=null==(t=e.getAttribute)?void 0:t.call(e,"href"))?void 0:n.startsWith("#"))});if(t&&!e.defaultPrevented){const n=t.getAttribute("href");if(n.length>1){const o=n.slice(1),r=t.getRootNode(),s=(r.getElementById?r.getElementById(o):null)||(r.querySelector?r.querySelector(`#${o}`):null);s&&(e.preventDefault(),requestAnimationFrame(()=>{requestAnimationFrame(()=>{s.style.scrollMarginTop="calc(var(--site-nav-height, 0px) + 2rem)",s.scrollIntoView({behavior:"smooth",block:"start",inline:"start"})})}))}}j.hooks.onNonStandardHref&&j.hooks.onNonStandardHref(e)}),"undefined"!=typeof MutationObserver)){const e=(t,n)=>{var o;n(t),null==(o=t.childNodes)||o.forEach(t=>e(t,n)),t.shadowRoot&&e(t.shadowRoot,n)},t=t=>e(t,e=>{var t,n;const o=i.get(e);o&&(null==(t=o.effects)||t.forEach(e=>e.stop()),null==(n=o.onunmount)||n.call(o,e),i.delete(e))}),n=t=>e(t,e=>{var t,n;null==(n=null==(t=i.get(e))?void 0:t.onmount)||n.call(t,e)}),o=new MutationObserver(e=>{e.forEach(e=>{e.removedNodes.forEach(t),e.addedNodes.forEach(n)})}),r=()=>{document.body&&o.observe(document.body,{childList:!0,subtree:!0})};"loading"===document.readyState?document.addEventListener("DOMContentLoaded",r):r()}}();
+(function() {
+  "use strict";
+  const _LV = globalThis.__LIGHTVIEW_INTERNALS__ || (globalThis.__LIGHTVIEW_INTERNALS__ = {
+    currentEffect: null,
+    registry: /* @__PURE__ */ new Map(),
+    dependencyMap: /* @__PURE__ */ new WeakMap()
+    // Tracking signals -> subscribers
+  });
+  const signal = (initialValue, optionsOrName) => {
+    let name = typeof optionsOrName === "string" ? optionsOrName : optionsOrName == null ? void 0 : optionsOrName.name;
+    const storage = optionsOrName == null ? void 0 : optionsOrName.storage;
+    if (name && storage) {
+      try {
+        const stored = storage.getItem(name);
+        if (stored !== null) {
+          initialValue = JSON.parse(stored);
+        }
+      } catch (e) {
+      }
+    }
+    let value = initialValue;
+    const subscribers = /* @__PURE__ */ new Set();
+    const f = (...args) => {
+      if (args.length === 0) return f.value;
+      f.value = args[0];
+    };
+    Object.defineProperty(f, "value", {
+      get() {
+        if (_LV.currentEffect) {
+          subscribers.add(_LV.currentEffect);
+          _LV.currentEffect.dependencies.add(subscribers);
+        }
+        return value;
+      },
+      set(newValue) {
+        if (value !== newValue) {
+          value = newValue;
+          if (name && storage) {
+            try {
+              storage.setItem(name, JSON.stringify(value));
+            } catch (e) {
+            }
+          }
+          [...subscribers].forEach((effect2) => effect2());
+        }
+      }
+    });
+    if (name) {
+      if (_LV.registry.has(name)) {
+        if (_LV.registry.get(name) !== f) {
+          throw new Error(`Lightview: A signal or state with the name "${name}" is already registered.`);
+        }
+      } else {
+        _LV.registry.set(name, f);
+      }
+    }
+    return f;
+  };
+  const getSignal = (name, defaultValue) => {
+    if (!_LV.registry.has(name) && defaultValue !== void 0) {
+      return signal(defaultValue, name);
+    }
+    return _LV.registry.get(name);
+  };
+  signal.get = getSignal;
+  const effect = (fn) => {
+    const execute = () => {
+      if (!execute.active || execute.running) return;
+      execute.dependencies.forEach((dep) => dep.delete(execute));
+      execute.dependencies.clear();
+      execute.running = true;
+      _LV.currentEffect = execute;
+      try {
+        fn();
+      } finally {
+        _LV.currentEffect = null;
+        execute.running = false;
+      }
+    };
+    execute.active = true;
+    execute.running = false;
+    execute.dependencies = /* @__PURE__ */ new Set();
+    execute.stop = () => {
+      execute.dependencies.forEach((dep) => dep.delete(execute));
+      execute.dependencies.clear();
+      execute.active = false;
+    };
+    execute();
+    return execute;
+  };
+  const computed = (fn) => {
+    const sig = signal(void 0);
+    effect(() => {
+      sig.value = fn();
+    });
+    return sig;
+  };
+  const getRegistry = () => _LV.registry;
+  const protoMethods = (proto, test) => Object.getOwnPropertyNames(proto).filter((k) => typeof proto[k] === "function" && test(k));
+  protoMethods(Date.prototype, (k) => /^(to|get|valueOf)/.test(k));
+  protoMethods(Date.prototype, (k) => /^set/.test(k));
+  const getOrSet = (map, key, factory) => {
+    let v = map.get(key);
+    if (!v) {
+      v = factory();
+      map.set(key, v);
+    }
+    return v;
+  };
+  const core = {
+    get currentEffect() {
+      return (globalThis.__LIGHTVIEW_INTERNALS__ || (globalThis.__LIGHTVIEW_INTERNALS__ = {})).currentEffect;
+    }
+  };
+  const nodeState = /* @__PURE__ */ new WeakMap();
+  const nodeStateFactory = () => ({ effects: [], onmount: null, onunmount: null });
+  const registry = getRegistry();
+  const trackEffect = (node, effectFn) => {
+    const state = getOrSet(nodeState, node, nodeStateFactory);
+    if (!state.effects) state.effects = [];
+    state.effects.push(effectFn);
+  };
+  const SHADOW_DOM_MARKER = Symbol("lightview.shadowDOM");
+  const createShadowDOMMarker = (attributes, children) => ({
+    [SHADOW_DOM_MARKER]: true,
+    mode: attributes.mode || "open",
+    styles: attributes.styles || [],
+    adoptedStyleSheets: attributes.adoptedStyleSheets || [],
+    children
+  });
+  const isShadowDOMMarker = (obj) => obj && typeof obj === "object" && obj[SHADOW_DOM_MARKER] === true;
+  const processShadowDOM = (marker, parentNode) => {
+    if (parentNode.shadowRoot) {
+      console.warn("Lightview: Element already has a shadowRoot, skipping shadowDOM directive");
+      return;
+    }
+    const shadowRoot = parentNode.attachShadow({ mode: marker.mode });
+    const sheets = [];
+    const linkUrls = [...marker.styles || []];
+    if (marker.adoptedStyleSheets && marker.adoptedStyleSheets.length > 0) {
+      marker.adoptedStyleSheets.forEach((item) => {
+        if (item instanceof CSSStyleSheet) {
+          sheets.push(item);
+        } else if (typeof item === "string") {
+          linkUrls.push(item);
+        }
+      });
+    }
+    if (sheets.length > 0) {
+      try {
+        shadowRoot.adoptedStyleSheets = sheets;
+      } catch (e) {
+        console.warn("Lightview: adoptedStyleSheets not supported");
+      }
+    }
+    for (const styleUrl of linkUrls) {
+      const link = document.createElement("link");
+      link.rel = "stylesheet";
+      link.href = styleUrl;
+      shadowRoot.appendChild(link);
+    }
+    if (marker.children && marker.children.length > 0) {
+      setupChildrenInTarget(marker.children, shadowRoot);
+    }
+  };
+  let inSVG = false;
+  const domToElement = /* @__PURE__ */ new WeakMap();
+  const wrapDomElement = (domNode, tag, attributes = {}, children = []) => {
+    const el = {
+      tag,
+      attributes,
+      children,
+      get domEl() {
+        return domNode;
+      }
+    };
+    const proxy = makeReactive(el);
+    domToElement.set(domNode, proxy);
+    return proxy;
+  };
+  const element = (tag, attributes = {}, children = []) => {
+    if (customTags[tag]) tag = customTags[tag];
+    if (typeof tag === "function") {
+      const result = tag({ ...attributes }, children);
+      return processComponentResult(result);
+    }
+    if (tag === "shadowDOM") {
+      return createShadowDOMMarker(attributes, children);
+    }
+    if (tag === "text" && !inSVG) {
+      const domNode2 = document.createTextNode("");
+      const el = {
+        tag,
+        attributes,
+        children,
+        get domEl() {
+          return domNode2;
+        }
+      };
+      const update = () => {
+        const flat = (Array.isArray(el.children) ? el.children : [el.children]).flat(Infinity);
+        const bits = flat.map((c) => {
+          const val = typeof c === "function" ? c() : c;
+          if (val && typeof val === "object" && val.domEl) return val.domEl.textContent;
+          return val === null || val === void 0 ? "" : String(val);
+        });
+        domNode2.textContent = bits.join(" ");
+      };
+      const proxy2 = new Proxy(el, {
+        set(target, prop, value) {
+          target[prop] = value;
+          if (prop === "children") update();
+          return true;
+        }
+      });
+      const hasReactive = children.flat(Infinity).some((c) => typeof c === "function");
+      if (hasReactive) {
+        const runner = effect(update);
+        trackEffect(domNode2, runner);
+      }
+      update();
+      return proxy2;
+    }
+    const isSVG = tag.toLowerCase() === "svg";
+    const wasInSVG = inSVG;
+    if (isSVG) inSVG = true;
+    const domNode = inSVG ? document.createElementNS("http://www.w3.org/2000/svg", tag) : document.createElement(tag);
+    const proxy = wrapDomElement(domNode, tag, attributes, children);
+    proxy.attributes = attributes;
+    proxy.children = children;
+    if (isSVG) inSVG = wasInSVG;
+    return proxy;
+  };
+  const processComponentResult = (result) => {
+    if (!result) return null;
+    if (Lightview.hooks.processChild) {
+      result = Lightview.hooks.processChild(result) ?? result;
+    }
+    if (result.domEl) return result;
+    const type = typeof result;
+    if (type === "object" && result instanceof HTMLElement) {
+      return wrapDomElement(result, result.tagName.toLowerCase(), {}, []);
+    }
+    if (type === "object" && result instanceof String) {
+      const span = document.createElement("span");
+      span.textContent = result.toString();
+      return wrapDomElement(span, "span", {}, []);
+    }
+    if (type === "string") {
+      const template = document.createElement("template");
+      template.innerHTML = result.trim();
+      const content = template.content;
+      if (content.childNodes.length === 1 && content.firstChild instanceof HTMLElement) {
+        const el = content.firstChild;
+        return wrapDomElement(el, el.tagName.toLowerCase(), {}, []);
+      } else {
+        const wrapper = document.createElement("span");
+        wrapper.style.display = "contents";
+        wrapper.appendChild(content);
+        return wrapDomElement(wrapper, "span", {}, []);
+      }
+    }
+    if (typeof result === "object" && result.tag) {
+      return element(result.tag, result.attributes || {}, result.children || []);
+    }
+    return null;
+  };
+  const makeReactive = (el) => {
+    const domNode = el.domEl;
+    return new Proxy(el, {
+      set(target, prop, value) {
+        if (prop === "attributes") {
+          target[prop] = makeReactiveAttributes(value, domNode);
+        } else if (prop === "children") {
+          target[prop] = setupChildren(value, domNode);
+        } else {
+          target[prop] = value;
+        }
+        return true;
+      }
+    });
+  };
+  const NODE_PROPERTIES = /* @__PURE__ */ new Set(["value", "checked", "selected", "selectedIndex", "className", "innerHTML", "innerText"]);
+  const setAttributeValue = (domNode, key, value) => {
+    const isBool = typeof domNode[key] === "boolean";
+    if ((key === "href" || key === "src") && typeof value === "string" && /^(javascript|vbscript|data:text\/html|data:application\/javascript)/i.test(value)) {
+      console.warn(`[Lightview] Blocked dangerous protocol in ${key}: ${value}`);
+      value = "javascript:void(0)";
+    }
+    if (NODE_PROPERTIES.has(key) || isBool || key.startsWith("cdom-")) {
+      domNode[key] = isBool ? value !== null && value !== void 0 && value !== false && value !== "false" : value;
+    } else if (value === null || value === void 0) {
+      domNode.removeAttribute(key);
+    } else {
+      domNode.setAttribute(key, value);
+    }
+  };
+  const makeReactiveAttributes = (attributes, domNode) => {
+    const reactiveAttrs = {};
+    for (let [key, value] of Object.entries(attributes)) {
+      if (key === "onmount" || key === "onunmount") {
+        const state = getOrSet(nodeState, domNode, nodeStateFactory);
+        state[key] = value;
+        if (key === "onmount" && domNode.isConnected) {
+          value(domNode);
+        }
+      } else if (key.startsWith("on")) {
+        if (typeof value === "function") {
+          const eventName = key.slice(2).toLowerCase();
+          domNode.addEventListener(eventName, value);
+        } else if (typeof value === "string") {
+          domNode.setAttribute(key, value);
+        }
+        reactiveAttrs[key] = value;
+      } else if (typeof value === "function") {
+        const runner = effect(() => {
+          const result = value();
+          if (key === "style" && typeof result === "object") {
+            Object.assign(domNode.style, result);
+          } else {
+            setAttributeValue(domNode, key, result);
+          }
+        });
+        trackEffect(domNode, runner);
+        reactiveAttrs[key] = value;
+      } else if (key === "style" && typeof value === "object") {
+        Object.entries(value).forEach(([styleKey, styleValue]) => {
+          if (typeof styleValue === "function") {
+            const runner = effect(() => {
+              domNode.style[styleKey] = styleValue();
+            });
+            trackEffect(domNode, runner);
+          } else {
+            domNode.style[styleKey] = styleValue;
+          }
+        });
+        reactiveAttrs[key] = value;
+      } else {
+        setAttributeValue(domNode, key, value);
+        reactiveAttrs[key] = value;
+      }
+    }
+    return reactiveAttrs;
+  };
+  const processChildren = (children, targetNode, clearExisting = true) => {
+    if (clearExisting && targetNode.innerHTML !== void 0) {
+      targetNode.innerHTML = "";
+    }
+    const childElements = [];
+    const isSpecialElement = targetNode.tagName && (targetNode.tagName.toLowerCase() === "script" || targetNode.tagName.toLowerCase() === "style");
+    const flatChildren = children.flat(Infinity);
+    for (let child of flatChildren) {
+      if (Lightview.hooks.processChild && !isSpecialElement) {
+        child = Lightview.hooks.processChild(child) ?? child;
+      }
+      if (isShadowDOMMarker(child)) {
+        if (targetNode instanceof ShadowRoot) {
+          console.warn("Lightview: Cannot nest shadowDOM inside another shadowDOM");
+          continue;
+        }
+        processShadowDOM(child, targetNode);
+        continue;
+      }
+      const type = typeof child;
+      if (type === "function") {
+        const startMarker = document.createComment("lv:s");
+        const endMarker = document.createComment("lv:e");
+        targetNode.appendChild(startMarker);
+        targetNode.appendChild(endMarker);
+        let runner;
+        const update = () => {
+          while (startMarker.nextSibling && startMarker.nextSibling !== endMarker) {
+            startMarker.nextSibling.remove();
+          }
+          const val = child();
+          if (val === void 0 || val === null) return;
+          if (runner && !startMarker.isConnected) {
+            runner.stop();
+            return;
+          }
+          if (typeof val === "object" && val instanceof String) {
+            const textNode = document.createTextNode(val);
+            endMarker.parentNode.insertBefore(textNode, endMarker);
+          } else {
+            const fragment = document.createDocumentFragment();
+            const childrenToProcess = Array.isArray(val) ? val : [val];
+            processChildren(childrenToProcess, fragment, false);
+            endMarker.parentNode.insertBefore(fragment, endMarker);
+          }
+        };
+        runner = effect(update);
+        trackEffect(startMarker, runner);
+        childElements.push(child);
+      } else if (["string", "number", "boolean", "symbol"].includes(type) || child && type === "object" && child instanceof String) {
+        targetNode.appendChild(document.createTextNode(child));
+        childElements.push(child);
+      } else if (child instanceof Node) {
+        const node = child.domEl || child;
+        if (node instanceof HTMLElement || node instanceof SVGElement) {
+          const wrapped = wrapDomElement(node, node.tagName.toLowerCase());
+          targetNode.appendChild(node);
+          childElements.push(wrapped);
+        } else {
+          targetNode.appendChild(node);
+          childElements.push(child);
+        }
+      } else if (child && type === "object" && child.tag) {
+        const childEl = child.domEl ? child : element(child.tag, child.attributes || {}, child.children || []);
+        targetNode.appendChild(childEl.domEl);
+        childElements.push(childEl);
+      }
+    }
+    return childElements;
+  };
+  const setupChildrenInTarget = (children, targetNode) => {
+    return processChildren(children, targetNode, false);
+  };
+  const setupChildren = (children, domNode) => {
+    return processChildren(children, domNode, true);
+  };
+  const enhance = (selectorOrNode, options = {}) => {
+    const domNode = typeof selectorOrNode === "string" ? document.querySelector(selectorOrNode) : selectorOrNode;
+    const node = domNode.domEl || domNode;
+    if (!(node instanceof HTMLElement)) return null;
+    const tagName = node.tagName.toLowerCase();
+    let el = domToElement.get(node);
+    if (!el) {
+      el = wrapDomElement(node, tagName);
+    }
+    const { innerText, innerHTML, ...attrs } = options;
+    if (innerText !== void 0) {
+      if (typeof innerText === "function") {
+        effect(() => {
+          node.innerText = innerText();
+        });
+      } else {
+        node.innerText = innerText;
+      }
+    }
+    if (innerHTML !== void 0) {
+      if (typeof innerHTML === "function") {
+        effect(() => {
+          node.innerHTML = innerHTML();
+        });
+      } else {
+        node.innerHTML = innerHTML;
+      }
+    }
+    if (Object.keys(attrs).length > 0) {
+      el.attributes = attrs;
+    }
+    return el;
+  };
+  const $ = (cssSelectorOrElement, startingDomEl = document.body) => {
+    const el = typeof cssSelectorOrElement === "string" ? startingDomEl.querySelector(cssSelectorOrElement) : cssSelectorOrElement;
+    if (!el) return null;
+    Object.defineProperty(el, "content", {
+      value(child, location = "inner") {
+        location = location.toLowerCase();
+        Lightview.tags;
+        const isSpecialElement = el.tagName && (el.tagName.toLowerCase() === "script" || el.tagName.toLowerCase() === "style");
+        const array = (Array.isArray(child) ? child : [child]).map((item) => {
+          if (Lightview.hooks.processChild && !isSpecialElement) {
+            item = Lightview.hooks.processChild(item) ?? item;
+          }
+          if (item.tag && !item.domEl) {
+            return element(item.tag, item.attributes || {}, item.children || []).domEl;
+          } else {
+            return item.domEl || item;
+          }
+        });
+        const target = location === "shadow" ? el.shadowRoot || el.attachShadow({ mode: "open" }) : el;
+        if (location === "inner" || location === "shadow") {
+          target.replaceChildren(...array);
+        } else if (location === "outer") {
+          target.replaceWith(...array);
+        } else if (location === "afterbegin") {
+          target.prepend(...array);
+        } else if (location === "beforeend") {
+          target.append(...array);
+        } else {
+          array.forEach((item) => el.insertAdjacentElement(location, item));
+        }
+        return el;
+      },
+      configurable: true,
+      writable: true
+    });
+    return el;
+  };
+  const customTags = {};
+  const tags = new Proxy({}, {
+    get(_, tag) {
+      if (tag === "_customTags") return { ...customTags };
+      const wrapper = (...args) => {
+        let attributes = {};
+        let children = args;
+        const arg0 = args[0];
+        if (args.length > 0 && arg0 && typeof arg0 === "object" && !arg0.tag && !arg0.domEl && !Array.isArray(arg0)) {
+          attributes = arg0;
+          children = args.slice(1);
+        }
+        return element(customTags[tag] || tag, attributes, children);
+      };
+      if (customTags[tag]) {
+        Object.assign(wrapper, customTags[tag]);
+      }
+      return wrapper;
+    },
+    set(_, tag, value) {
+      customTags[tag] = value;
+      return true;
+    }
+  });
+  const Lightview = {
+    signal,
+    get: signal.get,
+    computed,
+    effect,
+    registry,
+    element,
+    // do not document this
+    enhance,
+    tags,
+    $,
+    // Extension hooks
+    hooks: {
+      onNonStandardHref: null,
+      processChild: null,
+      validateUrl: null
+    },
+    // Internals exposed for extensions
+    internals: {
+      core,
+      domToElement,
+      wrapDomElement,
+      setupChildren
+    }
+  };
+  if (typeof module !== "undefined" && module.exports) {
+    module.exports = Lightview;
+  }
+  if (typeof window !== "undefined") {
+    globalThis.Lightview = Lightview;
+    globalThis.addEventListener("click", (e) => {
+      const path = e.composedPath();
+      const link = path.find((el) => {
+        var _a, _b;
+        return el.tagName === "A" && ((_b = (_a = el.getAttribute) == null ? void 0 : _a.call(el, "href")) == null ? void 0 : _b.startsWith("#"));
+      });
+      if (link && !e.defaultPrevented) {
+        const href = link.getAttribute("href");
+        if (href.length > 1) {
+          const id = href.slice(1);
+          const root = link.getRootNode();
+          const target = (root.getElementById ? root.getElementById(id) : null) || (root.querySelector ? root.querySelector(`#${id}`) : null);
+          if (target) {
+            e.preventDefault();
+            requestAnimationFrame(() => {
+              requestAnimationFrame(() => {
+                target.style.scrollMarginTop = "calc(var(--site-nav-height, 0px) + 2rem)";
+                target.scrollIntoView({ behavior: "smooth", block: "start", inline: "start" });
+              });
+            });
+          }
+        }
+      }
+      if (Lightview.hooks.onNonStandardHref) {
+        Lightview.hooks.onNonStandardHref(e);
+      }
+    });
+    if (typeof MutationObserver !== "undefined") {
+      const walkNodes = (node, fn) => {
+        var _a;
+        fn(node);
+        (_a = node.childNodes) == null ? void 0 : _a.forEach((n) => walkNodes(n, fn));
+        if (node.shadowRoot) walkNodes(node.shadowRoot, fn);
+      };
+      const cleanupNode = (node) => walkNodes(node, (n) => {
+        var _a, _b;
+        const s = nodeState.get(n);
+        if (s) {
+          (_a = s.effects) == null ? void 0 : _a.forEach((e) => e.stop());
+          (_b = s.onunmount) == null ? void 0 : _b.call(s, n);
+          nodeState.delete(n);
+        }
+      });
+      const mountNode = (node) => walkNodes(node, (n) => {
+        var _a, _b;
+        (_b = (_a = nodeState.get(n)) == null ? void 0 : _a.onmount) == null ? void 0 : _b.call(_a, n);
+      });
+      const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+          mutation.removedNodes.forEach(cleanupNode);
+          mutation.addedNodes.forEach(mountNode);
+        });
+      });
+      const startObserving = () => {
+        if (document.body) {
+          observer.observe(document.body, {
+            childList: true,
+            subtree: true
+          });
+        }
+      };
+      if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", startObserving);
+      } else {
+        startObserving();
+      }
+    }
+  }
+})();

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "lightview",
-  "version": "2.1.0",
+  "version": "2.2.2",
   "description": "A lightweight reactive UI library with features of Bau, Juris, and HTMX",
   "main": "lightview.js",
+  "workspaces": [
+    "jprx"
+  ],
   "directories": {
     "doc": "docs"
   },
@@ -10,7 +13,7 @@
     "dev": "wrangler pages dev . --port 3000",
     "preview": "npm run build && wrangler pages dev ./dist --port 8788",
     "build": "node build-bundles.mjs && node build.js",
-    "watch": "node watch.js",
+    "watch": "node build-bundles.mjs && node build.js --watch --env=dev",
     "deploy": "npm run build && wrangler pages deploy dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },