jaxs 0.4.2 → 0.4.3

package/dist/jaxs.d.ts

@@ -291,7 +291,6 @@ declare module "types" {
     };
     export interface Renderable {
         render: (renderKit: RenderKit, parentElement?: JaxsElement) => JaxsNode[];
-        isSvg: boolean;
     }
     export type StaticTemplate = () => Renderable;
     export type TypedTemplate<T> = (props: Props<T>) => Renderable;
@@ -421,7 +420,7 @@ declare module "rendering/dom/tag" {
 declare module "rendering/dom/svg" {
     import type { TagAttributes, JaxsElement } from "types";
     export const namespace = "http://www.w3.org/2000/svg";
-    export const isSvgTag: (tagType: string) => tagType is "svg";
+    export const isSvgTag: (tagType: string, attributeNamespace?: string) => boolean;
     export const createSvgNode: (type: string, attributes: TagAttributes, document: Document) => JaxsElement;
     export const elementIsSvg: (element: JaxsElement) => boolean;
 }
@@ -432,7 +431,6 @@ declare module "rendering/templates/text" {
     import { Renderable, TextValue, RenderKit } from "types";
     export class TextTemplate implements Renderable {
         value: string;
-        isSvg: boolean;
         constructor(content: TextValue);
         render(renderKit: RenderKit): Text[];
     }
@@ -444,13 +442,9 @@ declare module "rendering/templates/children/text" {
     export const textNode: (content: TextValue) => TextTemplate;
     export const replaceTextNodes: (child: TextValue | Renderable) => Renderable | TextTemplate;
 }
-declare module "rendering/templates/children/svg" {
-    import { Renderable } from "types";
-    export const withSvgFlag: (isSvg: boolean) => (template: Renderable) => Renderable;
-}
 declare module "rendering/templates/children/normalize" {
-    import { JsxCollection, Renderable, AttributesWithChildren } from "types";
-    export const normalizeJsxChildren: (jsxChildren: JsxCollection, isSvg: boolean) => Renderable[];
+    import { JsxCollection, AttributesWithChildren } from "types";
+    export const normalizeJsxChildren: (jsxChildren: JsxCollection) => (import("types").Renderable | import("rendering/templates/text").TextTemplate)[];
     export const normalizeToArray: <T>(children: T | T[]) => T[];
     export const ensureJsxChildrenArray: <T>(maybeChildren?: JsxCollection, attributes?: AttributesWithChildren<T>) => JsxCollection;
 }
@@ -468,8 +462,7 @@ declare module "rendering/templates/children" {
     export class Children implements Renderable {
         collection: Renderable[];
         parentElement?: JaxsElement;
-        isSvg: boolean;
-        constructor(jsxChildren: JsxCollection, isSvg?: boolean);
+        constructor(jsxChildren: JsxCollection);
         render(renderKit: RenderKit, parentElement: JaxsElement | undefined): JaxsNode[];
         generateDom(renderKit: RenderKit): JaxsNode[];
         attachToParent(dom: JaxsNodes): void;
@@ -496,7 +489,7 @@ declare module "rendering/templates/tag" {
         props: Props<T>;
         children: Children;
         isSvg: boolean;
-        constructor(tagType: string, props: Props<T>, children?: JsxCollection, isSvg?: boolean);
+        constructor(tagType: string, props: Props<T>, children?: JsxCollection);
         render(renderKit: RenderKit): JaxsNode[];
         generateDom(renderKit: RenderKit): import("types").JaxsElement;
         generateHtmlDom(renderKit: RenderKit): import("types").JaxsElement;

package/dist/jaxs.js

@@ -1,66 +1,129 @@
 const tt = (e, t) => t.createElement(e), et = (e, t) => {
   for (const s in t) {
     if (s === "__self") continue;
-    const n = t[s].toString();
-    s === "value" ? e.value = n : e.setAttribute(s, n);
+    const r = t[s].toString();
+    s === "value" ? e.value = r : e.setAttribute(s, r);
   }
 }, st = (e, t, s) => {
-  const n = {};
-  for (const r in t) {
-    const o = t[r], a = (h) => s(o, h);
-    e.addEventListener(r, a), n[r] = {
-      domEvent: r,
+  const r = {};
+  for (const n in t) {
+    const o = t[n], c = (h) => s(o, h);
+    e.addEventListener(n, c), r[n] = {
+      domEvent: n,
       busEvent: o,
-      listener: a
+      listener: c
     };
   }
-  e.eventMaps = n;
-}, nt = (e, t, s, n) => {
-  const r = tt(e, n.document);
-  return et(r, t), st(r, s, n.publish), r;
-}, N = "http://www.w3.org/2000/svg", rt = (e) => e === "svg", ot = (e, t, s) => {
-  const n = s.createElementNS(N, e);
-  for (const r in t)
-    r === "__self" || r === "xmlns" || n.setAttributeNS(null, r, t[r].toString());
-  return n;
-}, it = (e) => e.namespaceURI === N, at = (e, t) => t.createTextNode(e);
+  e.eventMaps = r;
+}, rt = (e, t, s, r) => {
+  const n = tt(e, r.document);
+  return et(n, t), st(n, s, r.publish), n;
+}, E = "http://www.w3.org/2000/svg", nt = {
+  animate: !0,
+  animateMotion: !0,
+  animateTransform: !0,
+  circle: !0,
+  clipPath: !0,
+  defs: !0,
+  desc: !0,
+  ellipse: !0,
+  feBlend: !0,
+  feColorMatrix: !0,
+  feComponentTransfer: !0,
+  feComposite: !0,
+  feConvolveMatrix: !0,
+  feDiffuseLighting: !0,
+  feDisplacementMap: !0,
+  feDistantLight: !0,
+  feDropShadow: !0,
+  feFlood: !0,
+  feFuncA: !0,
+  feFuncB: !0,
+  feFuncG: !0,
+  feFuncR: !0,
+  feGaussianBlur: !0,
+  feImage: !0,
+  feMerge: !0,
+  feMergeNode: !0,
+  feMorphology: !0,
+  feOffset: !0,
+  fePointLight: !0,
+  feSpecularLighting: !0,
+  feSpotLight: !0,
+  feTile: !0,
+  feTurbulence: !0,
+  filter: !0,
+  foreignObject: !0,
+  g: !0,
+  image: !0,
+  line: !0,
+  linearGradient: !0,
+  marker: !0,
+  mask: !0,
+  metadata: !0,
+  mpath: !0,
+  path: !0,
+  pattern: !0,
+  polygon: !0,
+  polyline: !0,
+  radialGradient: !0,
+  rect: !0,
+  script: !0,
+  set: !0,
+  stop: !0,
+  style: !0,
+  svg: !0,
+  switch: !0,
+  symbol: !0,
+  text: !0,
+  textPath: !0,
+  title: !0,
+  tspan: !0,
+  use: !0,
+  view: !0
+}, ot = (e, t) => !!(nt[e] || e === "a" && t === E), it = (e, t, s) => {
+  const r = s.createElementNS(E, e);
+  for (const n in t)
+    n === "__self" || n === "xmlns" || r.setAttributeNS(null, n, t[n].toString());
+  return r;
+}, ut = (e) => e.namespaceURI === E, at = (e, t) => t.createTextNode(e);
 class ct {
   constructor(t) {
-    this.value = t.toString(), this.isSvg = !1;
+    this.value = t.toString();
   }
   render(t) {
     const s = at(this.value, t.document);
     return s.__jsx = "TextNode", [s];
   }
 }
-const ut = (e) => typeof e == "string" || typeof e == "number", ht = (e) => new ct(e), lt = (e) => ut(e) ? ht(e) : e, dt = (e) => (t) => (t && (t.isSvg = t.isSvg || e), t), pt = (e, t) => mt(e).map(lt).flat().map(dt(t)), mt = (e) => Array.isArray(e) ? e.flat() : e ? [e] : [], j = (e, t = {}) => e || t.children || [], bt = (e, t = "") => {
-  const s = {}, n = {};
-  for (const r in e) {
-    const o = e[r];
-    if (r.match(/^on.+/i)) {
-      const a = r.slice(2).toLowerCase();
-      n[a] = o ? o.toString() : "";
+const ht = (e) => typeof e == "string" || typeof e == "number", lt = (e) => new ct(e), dt = (e) => ht(e) ? lt(e) : e, pt = (e) => mt(e).map(dt).flat(), mt = (e) => Array.isArray(e) ? e.flat() : e ? [e] : [], j = (e, t = {}) => e || t.children || [], ft = (e, t = "") => {
+  const s = {}, r = {};
+  for (const n in e) {
+    const o = e[n];
+    if (n.match(/^on.+/i)) {
+      const c = n.slice(2).toLowerCase();
+      r[c] = o ? o.toString() : "";
     } else {
       if (o === !1) continue;
-      r === "__source" ? s.__source = e.__source : s[r] = ft(r, o, t);
+      n === "__source" ? s.__source = e.__source : s[n] = bt(n, o, t);
     }
   }
   return {
     attributes: s,
-    events: n
+    events: r
   };
-}, ft = (e, t, s = "") => t == null ? s : t.toString(), vt = (e, t) => {
-  const s = e || {}, n = j(t, s);
-  return s.children = s.children || n, s;
-}, k = (e, t, s = []) => e.reduce(gt(t), s).flat(), gt = (e) => (t, s) => s ? Array.isArray(s) ? k(s, e, t) : (s.render(e).forEach((n) => t.push(n)), t) : t;
-class O {
-  constructor(t, s = !1) {
-    this.collection = pt(t, s), this.isSvg = s;
+}, bt = (e, t, s = "") => t == null ? s : t.toString(), vt = (e, t) => {
+  const s = e || {}, r = j(t, s);
+  return s.children = s.children || r, s;
+}, k = (e, t, s = []) => e.reduce(gt(t), s).flat(), gt = (e) => (t, s) => s ? Array.isArray(s) ? k(s, e, t) : (s.render(e).forEach((r) => t.push(r)), t) : t;
+class M {
+  constructor(t) {
+    this.collection = pt(t);
   }
   render(t, s) {
     this.parentElement = s;
-    const n = this.generateDom(t);
-    return this.attachToParent(n), n;
+    const r = this.generateDom(t);
+    return this.attachToParent(r), r;
   }
   generateDom(t) {
     return k(this.collection, t);
@@ -68,7 +131,7 @@ class O {
   attachToParent(t) {
     if (this.parentElement === void 0) return;
     const s = this.parentElement;
-    t.forEach((n) => s.appendChild(n));
+    t.forEach((r) => s.appendChild(r));
   }
 }
 class yt {
@@ -80,20 +143,20 @@ class yt {
   }
   sourceKey() {
     if (this.attributes.__source) {
-      const { fileName: t, lineNumber: s, columnNumber: n } = this.attributes.__source;
-      return `${t}:${s}:${n}`;
+      const { fileName: t, lineNumber: s, columnNumber: r } = this.attributes.__source;
+      return `${t}:${s}:${r}`;
     }
   }
   createKeyFromAttributes() {
-    const t = this.attributes.id ? `#${this.attributes.id}` : "", s = this.attributes.type ? `[type=${this.attributes.type}]` : "", n = this.attributes.name ? `[name=${this.attributes.name}]` : "";
-    return `${this.type}${t}${s}${n}`;
+    const t = this.attributes.id ? `#${this.attributes.id}` : "", s = this.attributes.type ? `[type=${this.attributes.type}]` : "", r = this.attributes.name ? `[name=${this.attributes.name}]` : "";
+    return `${this.type}${t}${s}${r}`;
   }
 }
 class Et {
-  constructor(t, s, n = [], r = !1) {
+  constructor(t, s, r = []) {
     this.type = t;
-    const { events: o, attributes: a } = bt(s);
-    this.events = o, this.attributes = a, this.isSvg = r || rt(this.type), this.children = new O(n, this.isSvg);
+    const { events: n, attributes: o } = ft(s);
+    this.events = n, this.attributes = o, this.isSvg = ot(this.type, this.attributes.xmlns), this.children = new M(r);
   }
   render(t) {
     const s = this.generateDom(t);
@@ -103,7 +166,7 @@ class Et {
     return this.isSvg ? this.generateSvgDom(t) : this.generateHtmlDom(t);
   }
   generateHtmlDom(t) {
-    const s = nt(
+    const s = rt(
       this.type,
       this.attributes,
       this.events,
@@ -112,21 +175,21 @@ class Et {
     return s.__jsx = this.jsxKey(), s;
   }
   generateSvgDom(t) {
-    const s = ot(this.type, this.attributes, t.document);
+    const s = it(this.type, this.attributes, t.document);
     return s.__jsx = this.jsxKey(), s;
   }
   jsxKey() {
     return new yt(this.type, this.attributes).generate();
   }
 }
-const At = (e, t, ...s) => typeof e == "string" ? new Et(e, t, s) : e(vt(t, s));
-At.fragment = (e, t) => {
+const xt = (e, t, ...s) => typeof e == "string" ? new Et(e, t, s) : e(vt(t, s));
+xt.fragment = (e, t) => {
   const s = j(t, e);
-  return new O(s);
+  return new M(s);
 };
-class St {
-  constructor(t, s, n) {
-    this.template = t, this.selector = s, this.renderKit = n, this.dom = [];
+class At {
+  constructor(t, s, r) {
+    this.template = t, this.selector = s, this.renderKit = r, this.dom = [];
   }
   renderAndAttach(t) {
     this.parentElement = this.getParentElement(), this.dom = this.render({ ...t, parent: this.parentElement }), this.parentElement && this.attach();
@@ -143,65 +206,65 @@ class St {
     return this.renderKit.document.querySelector(this.selector);
   }
 }
-const xt = (e, t, s) => {
-  const n = new St(e, t, s);
-  return n.renderAndAttach(s), n;
-}, $ = "go-to-href", m = "navigation:location-change", M = "navigation:route-change", wt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const wt = (e, t, s) => {
+  const r = new At(e, t, s);
+  return r.renderAndAttach(s), r;
+}, O = "go-to-href", m = "navigation:location-change", F = "navigation:route-change", St = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  linkNavigationEvent: $,
+  linkNavigationEvent: O,
   locationChangeEvent: m,
-  routeChangeEvent: M
-}, Symbol.toStringTag, { value: "Module" })), F = (e) => {
+  routeChangeEvent: F
+}, Symbol.toStringTag, { value: "Module" })), T = (e) => {
   e.createRecord("route", {
     host: "",
     path: "",
     query: {}
   });
-}, T = (e) => {
+}, $ = (e) => {
   const t = e.closest("[href]");
   return t && t.getAttribute("href") || "";
 }, D = (e, { publish: t, window: s }) => {
   s.history.pushState(null, "", e), t(m, null);
-}, U = (e, t) => {
+}, L = (e, t) => {
   if (!e || !e.target) return;
   e.preventDefault();
-  const s = T(e.target);
+  const s = $(e.target);
   D(s, t);
-}, z = (e) => e.replace(/^\?/, "").split("&").reduce((t, s) => {
+}, B = (e) => e.replace(/^\?/, "").split("&").reduce((t, s) => {
   if (!s) return t;
-  const n = s.split("=");
-  return t[n[0]] = n[1], t;
-}, {}), L = (e, t) => {
-  const { state: s, publish: n, window: r } = t, { host: o, pathname: a, search: h } = r.location, i = a, d = z(h), u = {
+  const r = s.split("=");
+  return t[r[0]] = r[1], t;
+}, {}), P = (e, t) => {
+  const { state: s, publish: r, window: n } = t, { host: o, pathname: c, search: h } = n.location, i = c, d = B(h), a = {
     host: o,
     path: i,
     query: d
   };
-  s.store("route").update(u), n(M, u);
-}, B = (e) => {
+  s.store("route").update(a), r(F, a);
+}, U = (e) => {
   const { subscribe: t } = e;
-  t($, U);
-}, P = (e) => {
-  const { publish: t, subscribe: s, state: n, window: r } = e;
-  F(n), r.addEventListener("popstate", () => t(m, null)), s(m, L);
+  t(O, L);
+}, z = (e) => {
+  const { publish: t, subscribe: s, state: r, window: n } = e;
+  T(r), n.addEventListener("popstate", () => t(m, null)), s(m, P);
 }, V = (e) => {
   setTimeout(() => e.publish(m, null), 0);
 }, K = (e) => {
-  P(e), B(e), V(e);
+  z(e), U(e), V(e);
 }, _t = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   publishLocation: V,
   startNavigation: K,
-  subscribeToHistoryChange: P,
-  subscribeToNavigation: B
+  subscribeToHistoryChange: z,
+  subscribeToNavigation: U
 }, Symbol.toStringTag, { value: "Module" }));
 class R {
-  constructor({ window: t, document: s, publish: n, subscribe: r, bus: o, state: a, renderKit: h }) {
-    this.window = t, this.document = s, this.publish = n, this.subscribe = r, this.bus = o, this.state = a, this.renderKit = h, this.roots = [];
+  constructor({ window: t, document: s, publish: r, subscribe: n, bus: o, state: c, renderKit: h }) {
+    this.window = t, this.document = s, this.publish = r, this.subscribe = n, this.bus = o, this.state = c, this.renderKit = h, this.roots = [];
   }
   render(t, s) {
-    const n = xt(t, s, this.renderKit);
-    return this.roots.push(n), n;
+    const r = wt(t, s, this.renderKit);
+    return this.roots.push(r), r;
   }
   startNavigation() {
     K(this);
@@ -215,17 +278,17 @@ class q {
   constructor() {
     this.lookup = {};
   }
-  add(t, s, n) {
+  add(t, s, r) {
     this.ensureArrayFor(t);
-    const r = {
+    const n = {
       listener: s,
-      index: n,
+      index: r,
       matcher: t
     };
-    return this.lookup[t].push(r), () => this.remove(r);
+    return this.lookup[t].push(n), () => this.remove(n);
   }
   remove(t) {
-    this.lookup[t.matcher] && (this.lookup[t.matcher] = this.lookup[t.matcher].reduce((s, n) => (n !== t && s.push(n), s), []));
+    this.lookup[t.matcher] && (this.lookup[t.matcher] = this.lookup[t.matcher].reduce((s, r) => (r !== t && s.push(r), s), []));
   }
   matches(t) {
     return this.lookup[t] || [];
@@ -238,16 +301,16 @@ class J {
   constructor() {
     this.lookup = [];
   }
-  add(t, s, n) {
-    const r = {
+  add(t, s, r) {
+    const n = {
       listener: s,
-      index: n,
+      index: r,
       matcher: t
     };
-    return this.lookup.push(r), () => this.remove(r);
+    return this.lookup.push(n), () => this.remove(n);
   }
   remove(t) {
-    this.lookup = this.lookup.reduce((s, n) => (n !== t && s.push(n), s), []);
+    this.lookup = this.lookup.reduce((s, r) => (r !== t && s.push(r), s), []);
   }
   matches(t) {
     return this.lookup.filter(
@@ -260,23 +323,23 @@ class H {
     this.exactSubscriptions = new q(), this.fuzzySubscriptions = new J(), this.currentIndex = 0;
   }
   subscribe(t, s) {
-    let n;
-    return typeof t == "string" ? n = this.exactSubscriptions.add(
+    let r;
+    return typeof t == "string" ? r = this.exactSubscriptions.add(
       t,
       s,
       this.currentIndex
-    ) : n = this.fuzzySubscriptions.add(
+    ) : r = this.fuzzySubscriptions.add(
       t,
       s,
       this.currentIndex
-    ), this.currentIndex += 1, n;
+    ), this.currentIndex += 1, r;
   }
   publish(t, s) {
     [
       ...this.exactSubscriptions.matches(t),
       ...this.fuzzySubscriptions.matches(t)
-    ].sort((r, o) => r.index - o.index).forEach((r) => {
-      r.listener(s, this.listenerOptions(t));
+    ].sort((n, o) => n.index - o.index).forEach((n) => {
+      n.listener(s, this.listenerOptions(t));
     });
   }
   addListenerOptions(t) {
@@ -294,8 +357,8 @@ const I = () => {
   const e = new H();
   return {
     bus: e,
-    publish: (n, r) => e.publish(n, r),
-    subscribe: (n, r) => e.subscribe(n, r)
+    publish: (r, n) => e.publish(r, n),
+    subscribe: (r, n) => e.subscribe(r, n)
   };
 }, me = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
@@ -303,14 +366,14 @@ const I = () => {
   FuzzySubscriptions: J,
   JaxsBus: H,
   createBus: I
-}, Symbol.toStringTag, { value: "Module" })), b = (e) => Array.isArray(e), g = (e) => e !== null && !b(e) && typeof e == "object", Nt = (e, t) => e === t, jt = (e, t) => Object.keys(e).length === Object.keys(t).length, kt = (e, t) => !(g(e) && g(t)) || !jt(e, t) ? !1 : Object.keys(e).every((s) => {
-  const n = e[s], r = t[s];
-  return E(n, r);
-}), Ot = (e, t) => !(b(e) && b(t)) || e.length !== t.length ? !1 : e.every((s, n) => {
-  const r = t[n];
-  return E(s, r);
-}), E = (e, t) => g(e) ? kt(e, t) : b(e) ? Ot(e, t) : Nt(e, t);
-class f {
+}, Symbol.toStringTag, { value: "Module" })), f = (e) => Array.isArray(e), g = (e) => e !== null && !f(e) && typeof e == "object", Nt = (e, t) => e === t, jt = (e, t) => Object.keys(e).length === Object.keys(t).length, kt = (e, t) => !(g(e) && g(t)) || !jt(e, t) ? !1 : Object.keys(e).every((s) => {
+  const r = e[s], n = t[s];
+  return x(r, n);
+}), Mt = (e, t) => !(f(e) && f(t)) || e.length !== t.length ? !1 : e.every((s, r) => {
+  const n = t[r];
+  return x(s, n);
+}), x = (e, t) => g(e) ? kt(e, t) : f(e) ? Mt(e, t) : Nt(e, t);
+class b {
   constructor(t) {
     this.store = t;
   }
@@ -324,9 +387,9 @@ class f {
     return this.store.value;
   }
   addUpdaterFunction(t, s) {
-    this.constructor.prototype[t] = (...n) => {
-      const r = s(this.value, ...n);
-      this.update(r);
+    this.constructor.prototype[t] = (...r) => {
+      const n = s(this.value, ...r);
+      this.update(n);
     };
   }
   addUpdaterFunctions(t) {
@@ -334,11 +397,11 @@ class f {
       this.addUpdaterFunction(s, t[s]);
   }
 }
-class A extends f {
+class A extends b {
   addUpdaterFunction(t, s) {
-    this.constructor.prototype[t] = (...n) => {
-      const r = s(this.value, ...n);
-      this.update(r);
+    this.constructor.prototype[t] = (...r) => {
+      const n = s(this.value, ...r);
+      this.update(n);
     };
   }
   push(t) {
@@ -367,13 +430,13 @@ class A extends f {
     s.sort(t), this.update(s);
   }
   insertAt(t, s) {
-    const n = [...this.value];
-    n.splice(t, 0, s), this.update(n);
+    const r = [...this.value];
+    r.splice(t, 0, s), this.update(r);
   }
 }
 class y {
   constructor(t) {
-    this.name = t.name, this.parent = t.parent, this._value = t.value, this.initialState = structuredClone(t.value), this.updater = new f(this);
+    this.name = t.name, this.parent = t.parent, this._value = t.value, this.initialState = structuredClone(t.value), this.updater = new b(this);
   }
   get value() {
     return this._value;
@@ -389,7 +452,7 @@ class y {
       this.updateValue(t);
   }
   updateValue(t) {
-    E(this._value, t) || (this._value = t, this.parent.notify(this.name));
+    x(this._value, t) || (this._value = t, this.parent.notify(this.name));
   }
   getUpdatedValue(t) {
     return t(this.value);
@@ -404,7 +467,7 @@ class y {
     this.updater instanceof A && this.updater.addSorter(t, s);
   }
 }
-class Q extends f {
+class G extends b {
   toggle() {
     const t = !this.value;
     this.update(t);
@@ -416,48 +479,48 @@ class Q extends f {
     this.update(!1);
   }
   addUpdaterFunction(t, s) {
-    this.constructor.prototype[t] = (...n) => {
-      const r = s(this.value, ...n);
-      this.update(r);
+    this.constructor.prototype[t] = (...r) => {
+      const n = s(this.value, ...r);
+      this.update(n);
     };
   }
 }
-class W extends f {
+class C extends b {
   addUpdaterFunction(t, s) {
-    this.constructor.prototype[t] = (...n) => {
-      const r = s(this.value, ...n);
-      this.update(r);
+    this.constructor.prototype[t] = (...r) => {
+      const n = s(this.value, ...r);
+      this.update(n);
     };
   }
   updateAttribute(t, s) {
-    const n = { ...this.value };
-    n[t] = s, this.update(n);
+    const r = { ...this.value };
+    r[t] = s, this.update(r);
   }
 }
-const S = "state";
-class G {
+const w = "state";
+class Q {
   constructor(t) {
-    this.publisher = t, this.stores = {}, this.eventNamePrefix = S, this.notifications = /* @__PURE__ */ new Set(), this.inTransaction = !1;
+    this.publisher = t, this.stores = {}, this.eventNamePrefix = w, this.notifications = /* @__PURE__ */ new Set(), this.inTransaction = !1;
   }
   create(t, s) {
-    const n = new y({
+    const r = new y({
       name: t,
       parent: this,
       value: s
     });
-    return this.stores[t] = n, n;
+    return this.stores[t] = r, r;
   }
   createBoolean(t, s) {
-    const n = this.create(t, s);
-    return n.updater = new Q(n), n;
+    const r = this.create(t, s);
+    return r.updater = new G(r), r;
   }
   createRecord(t, s) {
-    const n = this.create(t, s);
-    return n.updater = new W(n), n;
+    const r = this.create(t, s);
+    return r.updater = new C(r), r;
   }
   createList(t, s) {
-    const n = this.create(t, s);
-    return n.updater = new A(n), n;
+    const r = this.create(t, s);
+    return r.updater = new A(r), r;
   }
   store(t) {
     return this.stores[t] || new y({
@@ -470,7 +533,7 @@ class G {
     return this.store(t).value;
   }
   getAll(t) {
-    return t.reduce((s, n) => (s[n] = this.get(n), s), {});
+    return t.reduce((s, r) => (s[r] = this.get(r), s), {});
   }
   notify(t) {
     this.inTransaction ? this.notifications.add(t) : this.publish(t);
@@ -496,17 +559,17 @@ class G {
     return `${this.eventNamePrefix}:${t}`;
   }
 }
-const X = (e) => new G(e), be = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const W = (e) => new Q(e), fe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  State: G,
+  State: Q,
   Store: y,
-  StoreUpdaterBoolean: Q,
+  StoreUpdaterBoolean: G,
   StoreUpdaterList: A,
-  StoreUpdaterObject: W,
-  createState: X,
-  eventName: S
+  StoreUpdaterObject: C,
+  createState: W,
+  eventName: w
 }, Symbol.toStringTag, { value: "Module" }));
-class $t {
+class Ot {
   constructor(t) {
     this.setupDomEnvironment(t);
   }
@@ -525,11 +588,11 @@ class $t {
     t.window ? (this.window = t.window, this.document = this.window.document) : t.document ? (this.window = t.document.defaultView, this.document = t.document) : (this.window = window, this.document = document);
   }
   setupBus() {
-    const { publish: t, subscribe: s, bus: n } = I();
-    this.publish = t, this.subscribe = s, this.bus = n;
+    const { publish: t, subscribe: s, bus: r } = I();
+    this.publish = t, this.subscribe = s, this.bus = r;
   }
   setupState() {
-    this.state = X(this.publish);
+    this.state = W(this.publish);
   }
   addBusOptions() {
     this.bus.addListenerOptions({
@@ -548,94 +611,94 @@ class $t {
     };
   }
 }
-const fe = (e = {}) => {
-  const s = new $t(e).setup();
+const be = (e = {}) => {
+  const s = new Ot(e).setup();
   return s.startNavigation(), s;
 };
-var c = /* @__PURE__ */ ((e) => (e[e.removeNode = 0] = "removeNode", e[e.insertNode = 1] = "insertNode", e[e.replaceNode = 2] = "replaceNode", e[e.removeAttribute = 3] = "removeAttribute", e[e.addAttribute = 4] = "addAttribute", e[e.updateAttribute = 5] = "updateAttribute", e[e.removeEvent = 6] = "removeEvent", e[e.addEvent = 7] = "addEvent", e[e.updateEvent = 8] = "updateEvent", e[e.changeValue = 9] = "changeValue", e[e.changeText = 10] = "changeText", e))(c || {});
+var u = /* @__PURE__ */ ((e) => (e[e.removeNode = 0] = "removeNode", e[e.insertNode = 1] = "insertNode", e[e.replaceNode = 2] = "replaceNode", e[e.removeAttribute = 3] = "removeAttribute", e[e.addAttribute = 4] = "addAttribute", e[e.updateAttribute = 5] = "updateAttribute", e[e.removeEvent = 6] = "removeEvent", e[e.addEvent = 7] = "addEvent", e[e.updateEvent = 8] = "updateEvent", e[e.changeValue = 9] = "changeValue", e[e.changeText = 10] = "changeText", e))(u || {});
 const ve = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  ChangeInstructionTypes: c
-}, Symbol.toStringTag, { value: "Module" })), Mt = (e, t) => ({
+  ChangeInstructionTypes: u
+}, Symbol.toStringTag, { value: "Module" })), Ft = (e, t) => ({
   source: e,
   target: t,
-  type: c.changeText,
+  type: u.changeText,
   data: {}
-}), Ft = (e, t) => ({
+}), Tt = (e, t) => ({
   source: e,
   target: t,
-  type: c.replaceNode,
+  type: u.replaceNode,
   data: {}
-}), Tt = (e, t, s) => ({
+}), $t = (e, t, s) => ({
   source: e,
   target: t,
   data: s,
-  type: c.removeAttribute
+  type: u.removeAttribute
 }), Dt = (e, t, s) => ({
   source: e,
   target: t,
   data: s,
-  type: c.addAttribute
-}), Ut = (e, t, s) => ({
+  type: u.addAttribute
+}), Lt = (e, t, s) => ({
   source: e,
   target: t,
   data: s,
-  type: c.updateAttribute
-}), zt = (e, t, s) => ({
+  type: u.updateAttribute
+}), Bt = (e, t, s) => ({
   source: e,
   target: t,
   data: s,
-  type: c.removeEvent
-}), Lt = (e, t, s) => ({
+  type: u.removeEvent
+}), Pt = (e, t, s) => ({
   source: e,
   target: t,
   data: s,
-  type: c.addEvent
-}), Bt = (e, t, s) => ({
+  type: u.addEvent
+}), Ut = (e, t, s) => ({
   source: e,
   target: t,
   data: s,
-  type: c.updateEvent
-}), x = (e) => ({
+  type: u.updateEvent
+}), S = (e) => ({
   source: e,
   target: e,
   // for type crap only
-  type: c.removeNode,
+  type: u.removeNode,
   data: {}
 }), v = (e, t) => ({
   target: e,
   source: e,
   // for type crap only
-  type: c.insertNode,
+  type: u.insertNode,
   data: t
-}), Pt = (e, t, s) => ({
+}), zt = (e, t, s) => ({
   source: e,
   target: t,
-  type: c.changeValue,
+  type: u.changeValue,
   data: s
-}), Vt = (e, t) => e.type > t.type ? 1 : e.type < t.type ? -1 : 0, w = { index: -1 };
+}), Vt = (e, t) => e.type > t.type ? 1 : e.type < t.type ? -1 : 0, _ = { index: -1 };
 class Kt {
   constructor() {
     this.map = {};
   }
   populate(t) {
-    t.forEach((s, n) => {
-      const r = s.__jsx;
-      r && (this.map[r] = this.map[r] || [], this.map[r].push({
+    t.forEach((s, r) => {
+      const n = s.__jsx;
+      n && (this.map[n] = this.map[n] || [], this.map[n].push({
         element: s,
-        index: n
+        index: r
       }));
     });
   }
   pullMatch(t) {
     const s = t && t.__jsx;
-    return !s || !(this.map[s] && this.map[s].length) ? w : this.map[s].shift();
+    return !s || !(this.map[s] && this.map[s].length) ? _ : this.map[s].shift();
   }
   clear(t) {
     const s = t && t.__jsx;
     if (!(s && this.map[s] && this.map[s].length)) return;
-    const n = this.map[s];
-    this.map[s] = n.reduce((r, o) => (o.element !== t && r.push(o), r), []);
+    const r = this.map[s];
+    this.map[s] = r.reduce((n, o) => (o.element !== t && n.push(o), n), []);
   }
   check(t) {
     const s = t && t.__jsx;
@@ -645,46 +708,46 @@ class Kt {
     return Object.values(this.map).flat();
   }
 }
-const _ = (e) => {
+const N = (e) => {
   const t = new Kt();
   return t.populate(e), t;
-}, Y = (e, t, s = !1) => {
-  const n = [], r = e.attributes, o = r.length, a = t.attributes, h = a.length;
-  let i, d, u;
+}, X = (e, t, s = !1) => {
+  const r = [], n = e.attributes, o = n.length, c = t.attributes, h = c.length;
+  let i, d, a;
   for (i = 0; i < o; i++) {
-    u = null;
-    const l = r.item(i);
+    a = null;
+    const l = n.item(i);
     if (l) {
       for (d = 0; d < h; d++) {
-        const p = a.item(d);
+        const p = c.item(d);
         if (p && l.name == p.name) {
-          u = p;
+          a = p;
           break;
         }
       }
-      u ? l.value !== u.value && n.push(
-        Ut(e, t, {
+      a ? l.value !== a.value && r.push(
+        Lt(e, t, {
           name: l.name,
-          value: u.value,
+          value: a.value,
           isSvg: s
         })
-      ) : n.push(
-        Tt(e, t, { name: l.name, isSvg: s })
+      ) : r.push(
+        $t(e, t, { name: l.name, isSvg: s })
       );
     }
   }
   for (i = 0; i < h; i++) {
-    u = null;
-    const l = a.item(i);
+    a = null;
+    const l = c.item(i);
     if (l) {
       for (d = 0; d < o; d++) {
-        const p = r.item(d);
+        const p = n.item(d);
         if (p && p.name == l.name) {
-          u = p;
+          a = p;
           break;
         }
       }
-      u || n.push(
+      a || r.push(
         Dt(e, t, {
           name: l.name,
           value: l.value,
@@ -693,27 +756,27 @@ const _ = (e) => {
       );
     }
   }
-  return n;
+  return r;
 }, Rt = (e, t) => {
-  const s = [], n = e.eventMaps, r = t.eventMaps, o = Object.keys(n), a = Object.keys(r);
+  const s = [], r = e.eventMaps, n = t.eventMaps, o = Object.keys(r), c = Object.keys(n);
   return o.forEach((h) => {
-    const i = n[h], d = r[h];
+    const i = r[h], d = n[h];
     d ? d.busEvent !== i.busEvent && s.push(
-      Bt(e, t, {
+      Ut(e, t, {
         name: h,
         targetValue: d.listener,
         sourceValue: i.listener
       })
     ) : s.push(
-      zt(e, t, {
+      Bt(e, t, {
         name: i.domEvent,
         value: i.listener
       })
     );
-  }), a.forEach((h) => {
-    const i = n[h], d = r[h];
+  }), c.forEach((h) => {
+    const i = r[h], d = n[h];
     i || s.push(
-      Lt(e, t, {
+      Pt(e, t, {
         name: d.domEvent,
         value: d.listener
       })
@@ -722,37 +785,37 @@ const _ = (e) => {
 }, qt = (e) => e.tagName !== "INPUT", Jt = (e, t) => e.value === t.value, Ht = (e, t) => {
   if (qt(e) || Jt(e, t))
     return [];
-  const s = e, n = t;
-  return [Pt(s, n, { name: "value", value: n.value })];
+  const s = e, r = t;
+  return [zt(s, r, { name: "value", value: r.value })];
 }, It = (e, t) => {
-  const s = Y(e, t), n = Rt(e, t), r = Ht(e, t);
-  return s.concat(n).concat(r);
-}, Qt = (e, t) => Y(e, t, !0), Wt = (e, t) => e.textContent !== t.textContent ? [Mt(e, t)] : [], Gt = (e, t, s) => {
-  let n = [];
-  if (e.nodeType === 1 && it(e)) {
-    const r = e, o = t, a = Qt(r, o), h = s(
-      r.childNodes,
+  const s = X(e, t), r = Rt(e, t), n = Ht(e, t);
+  return s.concat(r).concat(n);
+}, Gt = (e, t) => X(e, t, !0), Ct = (e, t) => e.textContent !== t.textContent ? [Ft(e, t)] : [], Qt = (e, t, s) => {
+  let r = [];
+  if (e.nodeType === 1 && ut(e)) {
+    const n = e, o = t, c = Gt(n, o), h = s(
+      n.childNodes,
       o.childNodes,
-      r
+      n
     );
-    n = a.concat(h);
+    r = c.concat(h);
   } else if (e.nodeType === 1) {
-    const r = e, o = t, a = It(r, o), h = s(
-      r.childNodes,
+    const n = e, o = t, c = It(n, o), h = s(
+      n.childNodes,
       o.childNodes,
-      r
+      n
     );
-    n = a.concat(h);
-  } else e.nodeType === 3 && (n = Wt(e, t));
-  return n;
-}, Z = (e, t, s) => {
-  const n = [], r = Xt(e, t), o = _(e), a = _(t), h = [];
+    r = c.concat(h);
+  } else e.nodeType === 3 && (r = Ct(e, t));
+  return r;
+}, Y = (e, t, s) => {
+  const r = [], n = Wt(e, t), o = N(e), c = N(t), h = [];
   let i = 0;
-  for (; i < r; i++) {
-    const u = e[i], l = t[i];
-    if (l && a.check(l)) {
+  for (; i < n; i++) {
+    const a = e[i], l = t[i];
+    if (l && c.check(l)) {
       const p = o.pullMatch(l);
-      a.clear(l), p.element ? (p.index !== i && n.push(
+      c.clear(l), p.element ? (p.index !== i && r.push(
         v(p.element, {
           parent: s,
           index: i
@@ -760,35 +823,35 @@ const _ = (e) => {
       ), h.push({
         source: p.element,
         target: l
-      })) : u ? a.check(u) ? n.push(
+      })) : a ? c.check(a) ? r.push(
         v(l, { parent: s, index: i })
-      ) : (o.clear(u), n.push(
-        Ft(u, l)
-      )) : n.push(
+      ) : (o.clear(a), r.push(
+        Tt(a, l)
+      )) : r.push(
         v(l, { parent: s, index: i })
       );
-    } else u && o.pullMatch(u).element && n.push(x(u));
+    } else a && o.pullMatch(a).element && r.push(S(a));
   }
-  o.remaining().forEach(({ element: u }) => {
-    n.push(x(u));
+  o.remaining().forEach(({ element: a }) => {
+    r.push(S(a));
   });
   const d = h.reduce(
-    (u, { source: l, target: p }) => u.concat(
-      Gt(l, p, Z)
+    (a, { source: l, target: p }) => a.concat(
+      Qt(l, p, Y)
     ),
     []
   );
-  return n.concat(d).sort(Vt);
-}, Xt = (e, t) => {
-  const s = e.length, n = t.length;
-  return s > n ? s : n;
-}, Yt = (e, t, s) => {
-  Z(e, t, s).forEach((r) => {
-    Zt(r);
+  return r.concat(d).sort(Vt);
+}, Wt = (e, t) => {
+  const s = e.length, r = t.length;
+  return s > r ? s : r;
+}, Xt = (e, t, s) => {
+  Y(e, t, s).forEach((n) => {
+    Yt(n);
   });
+}, Yt = (e) => {
+  (he[e.type] || Zt)(e);
 }, Zt = (e) => {
-  (he[e.type] || Ct)(e);
-}, Ct = (e) => {
 }, te = (e) => {
   const { source: t, target: s } = e;
   t.nodeValue = s.textContent;
@@ -796,47 +859,47 @@ const _ = (e) => {
   const { source: t } = e;
   t.remove();
 }, se = (e) => {
-  const { target: t, data: s } = e, { parent: n, index: r } = s, o = n.childNodes[r];
-  o ? o && o !== t && n.insertBefore(t, o) : n.appendChild(t);
-}, ne = (e) => {
+  const { target: t, data: s } = e, { parent: r, index: n } = s, o = r.childNodes[n];
+  o ? o && o !== t && r.insertBefore(t, o) : r.appendChild(t);
+}, re = (e) => {
   const { source: t, target: s } = e;
   t.replaceWith(s);
-}, re = (e) => {
-  const { source: t, data: s } = e, { name: n, isSvg: r } = s;
-  r ? t.removeAttributeNS(null, n) : t.removeAttribute(n);
-}, C = (e) => {
-  const { source: t, data: s } = e, { name: n, value: r, isSvg: o } = s;
-  o ? t.setAttributeNS(null, n, r) : t.setAttribute(n, r);
+}, ne = (e) => {
+  const { source: t, data: s } = e, { name: r, isSvg: n } = s;
+  n ? t.removeAttributeNS(null, r) : t.removeAttribute(r);
+}, Z = (e) => {
+  const { source: t, data: s } = e, { name: r, value: n, isSvg: o } = s;
+  o ? t.setAttributeNS(null, r, n) : t.setAttribute(r, n);
 }, oe = (e) => {
-  C(e);
+  Z(e);
 }, ie = (e) => {
-  const t = e.data, s = e.source, { name: n, value: r } = t;
-  s.removeEventListener(n, r);
+  const t = e.data, s = e.source, { name: r, value: n } = t;
+  s.removeEventListener(r, n);
+}, ue = (e) => {
+  const t = e.data, s = e.source, { name: r, value: n } = t;
+  s.addEventListener(r, n);
 }, ae = (e) => {
-  const t = e.data, s = e.source, { name: n, value: r } = t;
-  s.addEventListener(n, r);
+  const t = e.data, s = e.source, { name: r, sourceValue: n, targetValue: o } = t;
+  s.removeEventListener(r, n), s.addEventListener(r, o);
 }, ce = (e) => {
-  const t = e.data, s = e.source, { name: n, sourceValue: r, targetValue: o } = t;
-  s.removeEventListener(n, r), s.addEventListener(n, o);
-}, ue = (e) => {
-  const t = e.data, s = e.source, { value: n } = t;
-  s.value = n;
+  const t = e.data, s = e.source, { value: r } = t;
+  s.value = r;
 }, he = {
-  [c.changeText]: te,
-  [c.removeNode]: ee,
-  [c.insertNode]: se,
-  [c.replaceNode]: ne,
-  [c.removeAttribute]: re,
-  [c.addAttribute]: C,
-  [c.updateAttribute]: oe,
-  [c.removeEvent]: ie,
-  [c.addEvent]: ae,
-  [c.updateEvent]: ce,
-  [c.changeValue]: ue
+  [u.changeText]: te,
+  [u.removeNode]: ee,
+  [u.insertNode]: se,
+  [u.replaceNode]: re,
+  [u.removeAttribute]: ne,
+  [u.addAttribute]: Z,
+  [u.updateAttribute]: oe,
+  [u.removeEvent]: ie,
+  [u.addEvent]: ue,
+  [u.updateEvent]: ae,
+  [u.changeValue]: ce
 };
 class le {
-  constructor({ Template: t, subscriptions: s, attributes: n, viewModel: r }) {
-    this.Template = t, this.viewModel = r, this.attributes = n, this.subscriptions = s, this.dom = [], this.parentElement = null;
+  constructor({ Template: t, subscriptions: s, attributes: r, viewModel: n }) {
+    this.Template = t, this.viewModel = n, this.attributes = r, this.subscriptions = s, this.dom = [], this.parentElement = null;
   }
   render(t) {
     return this.parentElement = t.parent, this.renderKit = t, this.subscribeForRerender(), this.dom = this.generateDom(t), this.dom;
@@ -847,8 +910,8 @@ class le {
       ...this.viewModel(
         t.state.getAll(this.subscriptions)
       )
-    }, n = this.Template(s);
-    return n ? n.render(t) : [];
+    }, r = this.Template(s);
+    return r ? r.render(t) : [];
   }
   rerender() {
     if (!this.parentElement && this.dom[0]) {
@@ -856,7 +919,7 @@ class le {
       this.parentElement = s;
     }
     const t = this.generateDom(this.renderKit);
-    Yt(this.dom, t, this.parentElement), this.parentElement && (this.dom = Array.from(this.parentElement.childNodes));
+    Xt(this.dom, t, this.parentElement), this.parentElement && (this.dom = Array.from(this.parentElement.childNodes));
   }
   subscribeForRerender() {
     const { subscribe: t } = this.renderKit;
@@ -865,31 +928,31 @@ class le {
     });
   }
   eventName(t) {
-    return `${S}:${t}`;
+    return `${w}:${t}`;
   }
 }
 const de = (e) => e, ge = ({
   Template: e,
   viewModel: t,
   subscriptions: s
-}) => (s = s || [], t = t || de, (n) => new le({ Template: e, viewModel: t, subscriptions: s, attributes: n })), ye = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}) => (s = s || [], t = t || de, (r) => new le({ Template: e, viewModel: t, subscriptions: s, attributes: r })), ye = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  createRouteState: F,
-  events: wt,
-  extractQueryParams: z,
-  findHref: T,
+  createRouteState: T,
+  events: St,
+  extractQueryParams: B,
+  findHref: $,
   navigate: D,
-  onLinkClick: U,
-  onLocationChange: L,
+  onLinkClick: L,
+  onLocationChange: P,
   start: _t
 }, Symbol.toStringTag, { value: "Module" }));
 export {
   ve as JaxsTypes,
   pe as appBuilding,
   ge as bind,
-  fe as createApp,
-  At as jsx,
+  be as createApp,
+  xt as jsx,
   me as messageBus,
   ye as navigation,
-  be as state
+  fe as state
 };

package/dist/jaxs.umd.cjs

@@ -1 +1 @@
-(function(m,b){typeof exports=="object"&&typeof module<"u"?b(exports):typeof define=="function"&&define.amd?define(["exports"],b):(m=typeof globalThis<"u"?globalThis:m||self,b(m.jaxs={}))})(this,function(m){"use strict";const b=(e,t)=>t.createElement(e),nt=(e,t)=>{for(const s in t){if(s==="__self")continue;const n=t[s].toString();s==="value"?e.value=n:e.setAttribute(s,n)}},rt=(e,t,s)=>{const n={};for(const r in t){const o=t[r],c=h=>s(o,h);e.addEventListener(r,c),n[r]={domEvent:r,busEvent:o,listener:c}}e.eventMaps=n},ot=(e,t,s,n)=>{const r=b(e,n.document);return nt(r,t),rt(r,s,n.publish),r},x="http://www.w3.org/2000/svg",it=e=>e==="svg",at=(e,t,s)=>{const n=s.createElementNS(x,e);for(const r in t)r==="__self"||r==="xmlns"||n.setAttributeNS(null,r,t[r].toString());return n},ct=e=>e.namespaceURI===x,ut=(e,t)=>t.createTextNode(e);class ht{constructor(t){this.value=t.toString(),this.isSvg=!1}render(t){const s=ut(this.value,t.document);return s.__jsx="TextNode",[s]}}const lt=e=>typeof e=="string"||typeof e=="number",dt=e=>new ht(e),pt=e=>lt(e)?dt(e):e,mt=e=>t=>(t&&(t.isSvg=t.isSvg||e),t),bt=(e,t)=>ft(e).map(pt).flat().map(mt(t)),ft=e=>Array.isArray(e)?e.flat():e?[e]:[],N=(e,t={})=>e||t.children||[],vt=(e,t="")=>{const s={},n={};for(const r in e){const o=e[r];if(r.match(/^on.+/i)){const c=r.slice(2).toLowerCase();n[c]=o?o.toString():""}else{if(o===!1)continue;r==="__source"?s.__source=e.__source:s[r]=gt(r,o,t)}}return{attributes:s,events:n}},gt=(e,t,s="")=>t==null?s:t.toString(),yt=(e,t)=>{const s=e||{},n=N(t,s);return s.children=s.children||n,s},j=(e,t,s=[])=>e.reduce(Et(t),s).flat(),Et=e=>(t,s)=>s?Array.isArray(s)?j(s,e,t):(s.render(e).forEach(n=>t.push(n)),t):t;class k{constructor(t,s=!1){this.collection=bt(t,s),this.isSvg=s}render(t,s){this.parentElement=s;const n=this.generateDom(t);return this.attachToParent(n),n}generateDom(t){return j(this.collection,t)}attachToParent(t){if(this.parentElement===void 0)return;const s=this.parentElement;t.forEach(n=>s.appendChild(n))}}class St{constructor(t,s){this.type=t,this.attributes=s}generate(){return this.attributes.key||this.sourceKey()||this.createKeyFromAttributes()}sourceKey(){if(this.attributes.__source){const{fileName:t,lineNumber:s,columnNumber:n}=this.attributes.__source;return`${t}:${s}:${n}`}}createKeyFromAttributes(){const t=this.attributes.id?`#${this.attributes.id}`:"",s=this.attributes.type?`[type=${this.attributes.type}]`:"",n=this.attributes.name?`[name=${this.attributes.name}]`:"";return`${this.type}${t}${s}${n}`}}class At{constructor(t,s,n=[],r=!1){this.type=t;const{events:o,attributes:c}=vt(s);this.events=o,this.attributes=c,this.isSvg=r||it(this.type),this.children=new k(n,this.isSvg)}render(t){const s=this.generateDom(t);return s?(this.children.render(t,s),[s]):[]}generateDom(t){return this.isSvg?this.generateSvgDom(t):this.generateHtmlDom(t)}generateHtmlDom(t){const s=ot(this.type,this.attributes,this.events,t);return s.__jsx=this.jsxKey(),s}generateSvgDom(t){const s=at(this.type,this.attributes,t.document);return s.__jsx=this.jsxKey(),s}jsxKey(){return new St(this.type,this.attributes).generate()}}const O=(e,t,...s)=>typeof e=="string"?new At(e,t,s):e(yt(t,s));O.fragment=(e,t)=>{const s=N(t,e);return new k(s)};class wt{constructor(t,s,n){this.template=t,this.selector=s,this.renderKit=n,this.dom=[]}renderAndAttach(t){this.parentElement=this.getParentElement(),this.dom=this.render({...t,parent:this.parentElement}),this.parentElement&&this.attach()}render(t){return this.template.render(t)}attach(){this.parentElement&&(this.parentElement.innerHTML=""),this.dom.forEach(t=>{this.parentElement&&this.parentElement.appendChild(t)})}getParentElement(){return this.renderKit.document.querySelector(this.selector)}}const _t=(e,t,s)=>{const n=new wt(e,t,s);return n.renderAndAttach(s),n},T="go-to-href",f="navigation:location-change",$="navigation:route-change",xt=Object.freeze(Object.defineProperty({__proto__:null,linkNavigationEvent:T,locationChangeEvent:f,routeChangeEvent:$},Symbol.toStringTag,{value:"Module"})),M=e=>{e.createRecord("route",{host:"",path:"",query:{}})},F=e=>{const t=e.closest("[href]");return t&&t.getAttribute("href")||""},D=(e,{publish:t,window:s})=>{s.history.pushState(null,"",e),t(f,null)},U=(e,t)=>{if(!e||!e.target)return;e.preventDefault();const s=F(e.target);D(s,t)},z=e=>e.replace(/^\?/,"").split("&").reduce((t,s)=>{if(!s)return t;const n=s.split("=");return t[n[0]]=n[1],t},{}),L=(e,t)=>{const{state:s,publish:n,window:r}=t,{host:o,pathname:c,search:h}=r.location,i=c,d=z(h),u={host:o,path:i,query:d};s.store("route").update(u),n($,u)},P=e=>{const{subscribe:t}=e;t(T,U)},B=e=>{const{publish:t,subscribe:s,state:n,window:r}=e;M(n),r.addEventListener("popstate",()=>t(f,null)),s(f,L)},V=e=>{setTimeout(()=>e.publish(f,null),0)},K=e=>{B(e),P(e),V(e)},Nt=Object.freeze(Object.defineProperty({__proto__:null,publishLocation:V,startNavigation:K,subscribeToHistoryChange:B,subscribeToNavigation:P},Symbol.toStringTag,{value:"Module"}));class R{constructor({window:t,document:s,publish:n,subscribe:r,bus:o,state:c,renderKit:h}){this.window=t,this.document=s,this.publish=n,this.subscribe=r,this.bus=o,this.state=c,this.renderKit=h,this.roots=[]}render(t,s){const n=_t(t,s,this.renderKit);return this.roots.push(n),n}startNavigation(){K(this)}}const jt=Object.freeze(Object.defineProperty({__proto__:null,App:R},Symbol.toStringTag,{value:"Module"}));class q{constructor(){this.lookup={}}add(t,s,n){this.ensureArrayFor(t);const r={listener:s,index:n,matcher:t};return this.lookup[t].push(r),()=>this.remove(r)}remove(t){this.lookup[t.matcher]&&(this.lookup[t.matcher]=this.lookup[t.matcher].reduce((s,n)=>(n!==t&&s.push(n),s),[]))}matches(t){return this.lookup[t]||[]}ensureArrayFor(t){this.lookup[t]||(this.lookup[t]=[])}}class J{constructor(){this.lookup=[]}add(t,s,n){const r={listener:s,index:n,matcher:t};return this.lookup.push(r),()=>this.remove(r)}remove(t){this.lookup=this.lookup.reduce((s,n)=>(n!==t&&s.push(n),s),[])}matches(t){return this.lookup.filter(s=>s.matcher.test(t))}}class H{constructor(){this.exactSubscriptions=new q,this.fuzzySubscriptions=new J,this.currentIndex=0}subscribe(t,s){let n;return typeof t=="string"?n=this.exactSubscriptions.add(t,s,this.currentIndex):n=this.fuzzySubscriptions.add(t,s,this.currentIndex),this.currentIndex+=1,n}publish(t,s){[...this.exactSubscriptions.matches(t),...this.fuzzySubscriptions.matches(t)].sort((r,o)=>r.index-o.index).forEach(r=>{r.listener(s,this.listenerOptions(t))})}addListenerOptions(t){this.options=t}listenerOptions(t){return{eventName:t,...this.options,publish:this.publish.bind(this)}}}const I=()=>{const e=new H;return{bus:e,publish:(n,r)=>e.publish(n,r),subscribe:(n,r)=>e.subscribe(n,r)}},kt=Object.freeze(Object.defineProperty({__proto__:null,ExactSubscriptions:q,FuzzySubscriptions:J,JaxsBus:H,createBus:I},Symbol.toStringTag,{value:"Module"})),v=e=>Array.isArray(e),y=e=>e!==null&&!v(e)&&typeof e=="object",Ot=(e,t)=>e===t,Tt=(e,t)=>Object.keys(e).length===Object.keys(t).length,$t=(e,t)=>!(y(e)&&y(t))||!Tt(e,t)?!1:Object.keys(e).every(s=>{const n=e[s],r=t[s];return E(n,r)}),Mt=(e,t)=>!(v(e)&&v(t))||e.length!==t.length?!1:e.every((s,n)=>{const r=t[n];return E(s,r)}),E=(e,t)=>y(e)?$t(e,t):v(e)?Mt(e,t):Ot(e,t);class g{constructor(t){this.store=t}update(t){this.store.update(t)}reset(){this.store.update(this.store.initialState)}get value(){return this.store.value}addUpdaterFunction(t,s){this.constructor.prototype[t]=(...n)=>{const r=s(this.value,...n);this.update(r)}}addUpdaterFunctions(t){for(const s in t)this.addUpdaterFunction(s,t[s])}}class S extends g{addUpdaterFunction(t,s){this.constructor.prototype[t]=(...n)=>{const r=s(this.value,...n);this.update(r)}}push(t){const s=[...this.value,t];this.update(s)}pop(){const t=[...this.value],s=t.pop();return this.update(t),s}unshift(t){const s=[t,...this.value];this.update(s)}shift(){const t=[...this.value],s=t.shift();return this.update(t),s}addSorter(t,s){this[t]=()=>{this.sortBy(s)}}sortBy(t){const s=[...this.value];s.sort(t),this.update(s)}insertAt(t,s){const n=[...this.value];n.splice(t,0,s),this.update(n)}}class A{constructor(t){this.name=t.name,this.parent=t.parent,this._value=t.value,this.initialState=structuredClone(t.value),this.updater=new g(this)}get value(){return this._value}set value(t){throw new Error("Cannot set value directly. Use an updater!")}update(t){if(typeof t=="function"){const s=this.getUpdatedValue(t);this.updateValue(s)}else this.updateValue(t)}updateValue(t){E(this._value,t)||(this._value=t,this.parent.notify(this.name))}getUpdatedValue(t){return t(this.value)}addUpdaters(t){this.updater.addUpdaterFunctions(t)}addUpdater(t,s){this.updater.addUpdaterFunction(t,s)}addSorter(t,s){this.updater instanceof S&&this.updater.addSorter(t,s)}}class Q extends g{toggle(){const t=!this.value;this.update(t)}setTrue(){this.update(!0)}setFalse(){this.update(!1)}addUpdaterFunction(t,s){this.constructor.prototype[t]=(...n)=>{const r=s(this.value,...n);this.update(r)}}}class W extends g{addUpdaterFunction(t,s){this.constructor.prototype[t]=(...n)=>{const r=s(this.value,...n);this.update(r)}}updateAttribute(t,s){const n={...this.value};n[t]=s,this.update(n)}}const w="state";class G{constructor(t){this.publisher=t,this.stores={},this.eventNamePrefix=w,this.notifications=new Set,this.inTransaction=!1}create(t,s){const n=new A({name:t,parent:this,value:s});return this.stores[t]=n,n}createBoolean(t,s){const n=this.create(t,s);return n.updater=new Q(n),n}createRecord(t,s){const n=this.create(t,s);return n.updater=new W(n),n}createList(t,s){const n=this.create(t,s);return n.updater=new S(n),n}store(t){return this.stores[t]||new A({name:t,parent:this,value:void 0})}get(t){return this.store(t).value}getAll(t){return t.reduce((s,n)=>(s[n]=this.get(n),s),{})}notify(t){this.inTransaction?this.notifications.add(t):this.publish(t)}update(t,s){this.store(t).update(s)}transaction(t){this.inTransaction=!0,t(this.stores),this.inTransaction=!1,this.publishAll()}publishAll(){this.notifications.forEach(t=>{this.publish(t)}),this.notifications.clear()}publish(t){this.publisher(this.event(t),{state:this,store:this.store(t)})}event(t){return`${this.eventNamePrefix}:${t}`}}const X=e=>new G(e),Ft=Object.freeze(Object.defineProperty({__proto__:null,State:G,Store:A,StoreUpdaterBoolean:Q,StoreUpdaterList:S,StoreUpdaterObject:W,createState:X,eventName:w},Symbol.toStringTag,{value:"Module"}));class Dt{constructor(t){this.setupDomEnvironment(t)}setup(){return this.setupBus(),this.setupState(),this.addBusOptions(),this.setRenderKit(),new R({window:this.window,document:this.document,publish:this.publish,subscribe:this.subscribe,bus:this.bus,state:this.state,renderKit:this.renderKit})}setupDomEnvironment(t){t.window?(this.window=t.window,this.document=this.window.document):t.document?(this.window=t.document.defaultView,this.document=t.document):(this.window=window,this.document=document)}setupBus(){const{publish:t,subscribe:s,bus:n}=I();this.publish=t,this.subscribe=s,this.bus=n}setupState(){this.state=X(this.publish)}addBusOptions(){this.bus.addListenerOptions({state:this.state,document:this.document,window:this.window})}setRenderKit(){this.renderKit={publish:this.publish,subscribe:this.subscribe,state:this.state,document:this.document,window:this.window}}}const Ut=(e={})=>{const s=new Dt(e).setup();return s.startNavigation(),s};var a=(e=>(e[e.removeNode=0]="removeNode",e[e.insertNode=1]="insertNode",e[e.replaceNode=2]="replaceNode",e[e.removeAttribute=3]="removeAttribute",e[e.addAttribute=4]="addAttribute",e[e.updateAttribute=5]="updateAttribute",e[e.removeEvent=6]="removeEvent",e[e.addEvent=7]="addEvent",e[e.updateEvent=8]="updateEvent",e[e.changeValue=9]="changeValue",e[e.changeText=10]="changeText",e))(a||{});const zt=Object.freeze(Object.defineProperty({__proto__:null,ChangeInstructionTypes:a},Symbol.toStringTag,{value:"Module"})),Lt=(e,t)=>({source:e,target:t,type:a.changeText,data:{}}),Pt=(e,t)=>({source:e,target:t,type:a.replaceNode,data:{}}),Bt=(e,t,s)=>({source:e,target:t,data:s,type:a.removeAttribute}),Vt=(e,t,s)=>({source:e,target:t,data:s,type:a.addAttribute}),Kt=(e,t,s)=>({source:e,target:t,data:s,type:a.updateAttribute}),Rt=(e,t,s)=>({source:e,target:t,data:s,type:a.removeEvent}),qt=(e,t,s)=>({source:e,target:t,data:s,type:a.addEvent}),Jt=(e,t,s)=>({source:e,target:t,data:s,type:a.updateEvent}),Y=e=>({source:e,target:e,type:a.removeNode,data:{}}),_=(e,t)=>({target:e,source:e,type:a.insertNode,data:t}),Ht=(e,t,s)=>({source:e,target:t,type:a.changeValue,data:s}),It=(e,t)=>e.type>t.type?1:e.type<t.type?-1:0,Z={index:-1};class Qt{constructor(){this.map={}}populate(t){t.forEach((s,n)=>{const r=s.__jsx;r&&(this.map[r]=this.map[r]||[],this.map[r].push({element:s,index:n}))})}pullMatch(t){const s=t&&t.__jsx;return!s||!(this.map[s]&&this.map[s].length)?Z:this.map[s].shift()}clear(t){const s=t&&t.__jsx;if(!(s&&this.map[s]&&this.map[s].length))return;const n=this.map[s];this.map[s]=n.reduce((r,o)=>(o.element!==t&&r.push(o),r),[])}check(t){const s=t&&t.__jsx;return s&&this.map[s]?this.map[s].length>0:!1}remaining(){return Object.values(this.map).flat()}}const C=e=>{const t=new Qt;return t.populate(e),t},tt=(e,t,s=!1)=>{const n=[],r=e.attributes,o=r.length,c=t.attributes,h=c.length;let i,d,u;for(i=0;i<o;i++){u=null;const l=r.item(i);if(l){for(d=0;d<h;d++){const p=c.item(d);if(p&&l.name==p.name){u=p;break}}u?l.value!==u.value&&n.push(Kt(e,t,{name:l.name,value:u.value,isSvg:s})):n.push(Bt(e,t,{name:l.name,isSvg:s}))}}for(i=0;i<h;i++){u=null;const l=c.item(i);if(l){for(d=0;d<o;d++){const p=r.item(d);if(p&&p.name==l.name){u=p;break}}u||n.push(Vt(e,t,{name:l.name,value:l.value,isSvg:s}))}}return n},Wt=(e,t)=>{const s=[],n=e.eventMaps,r=t.eventMaps,o=Object.keys(n),c=Object.keys(r);return o.forEach(h=>{const i=n[h],d=r[h];d?d.busEvent!==i.busEvent&&s.push(Jt(e,t,{name:h,targetValue:d.listener,sourceValue:i.listener})):s.push(Rt(e,t,{name:i.domEvent,value:i.listener}))}),c.forEach(h=>{const i=n[h],d=r[h];i||s.push(qt(e,t,{name:d.domEvent,value:d.listener}))}),s},Gt=e=>e.tagName!=="INPUT",Xt=(e,t)=>e.value===t.value,Yt=(e,t)=>{if(Gt(e)||Xt(e,t))return[];const s=e,n=t;return[Ht(s,n,{name:"value",value:n.value})]},Zt=(e,t)=>{const s=tt(e,t),n=Wt(e,t),r=Yt(e,t);return s.concat(n).concat(r)},Ct=(e,t)=>tt(e,t,!0),te=(e,t)=>e.textContent!==t.textContent?[Lt(e,t)]:[],ee=(e,t,s)=>{let n=[];if(e.nodeType===1&&ct(e)){const r=e,o=t,c=Ct(r,o),h=s(r.childNodes,o.childNodes,r);n=c.concat(h)}else if(e.nodeType===1){const r=e,o=t,c=Zt(r,o),h=s(r.childNodes,o.childNodes,r);n=c.concat(h)}else e.nodeType===3&&(n=te(e,t));return n},et=(e,t,s)=>{const n=[],r=se(e,t),o=C(e),c=C(t),h=[];let i=0;for(;i<r;i++){const u=e[i],l=t[i];if(l&&c.check(l)){const p=o.pullMatch(l);c.clear(l),p.element?(p.index!==i&&n.push(_(p.element,{parent:s,index:i})),h.push({source:p.element,target:l})):u?c.check(u)?n.push(_(l,{parent:s,index:i})):(o.clear(u),n.push(Pt(u,l))):n.push(_(l,{parent:s,index:i}))}else u&&o.pullMatch(u).element&&n.push(Y(u))}o.remaining().forEach(({element:u})=>{n.push(Y(u))});const d=h.reduce((u,{source:l,target:p})=>u.concat(ee(l,p,et)),[]);return n.concat(d).sort(It)},se=(e,t)=>{const s=e.length,n=t.length;return s>n?s:n},ne=(e,t,s)=>{et(e,t,s).forEach(r=>{re(r)})},re=e=>{(fe[e.type]||oe)(e)},oe=e=>{},ie=e=>{const{source:t,target:s}=e;t.nodeValue=s.textContent},ae=e=>{const{source:t}=e;t.remove()},ce=e=>{const{target:t,data:s}=e,{parent:n,index:r}=s,o=n.childNodes[r];o?o&&o!==t&&n.insertBefore(t,o):n.appendChild(t)},ue=e=>{const{source:t,target:s}=e;t.replaceWith(s)},he=e=>{const{source:t,data:s}=e,{name:n,isSvg:r}=s;r?t.removeAttributeNS(null,n):t.removeAttribute(n)},st=e=>{const{source:t,data:s}=e,{name:n,value:r,isSvg:o}=s;o?t.setAttributeNS(null,n,r):t.setAttribute(n,r)},le=e=>{st(e)},de=e=>{const t=e.data,s=e.source,{name:n,value:r}=t;s.removeEventListener(n,r)},pe=e=>{const t=e.data,s=e.source,{name:n,value:r}=t;s.addEventListener(n,r)},me=e=>{const t=e.data,s=e.source,{name:n,sourceValue:r,targetValue:o}=t;s.removeEventListener(n,r),s.addEventListener(n,o)},be=e=>{const t=e.data,s=e.source,{value:n}=t;s.value=n},fe={[a.changeText]:ie,[a.removeNode]:ae,[a.insertNode]:ce,[a.replaceNode]:ue,[a.removeAttribute]:he,[a.addAttribute]:st,[a.updateAttribute]:le,[a.removeEvent]:de,[a.addEvent]:pe,[a.updateEvent]:me,[a.changeValue]:be};class ve{constructor({Template:t,subscriptions:s,attributes:n,viewModel:r}){this.Template=t,this.viewModel=r,this.attributes=n,this.subscriptions=s,this.dom=[],this.parentElement=null}render(t){return this.parentElement=t.parent,this.renderKit=t,this.subscribeForRerender(),this.dom=this.generateDom(t),this.dom}generateDom(t){const s={...this.attributes,...this.viewModel(t.state.getAll(this.subscriptions))},n=this.Template(s);return n?n.render(t):[]}rerender(){if(!this.parentElement&&this.dom[0]){const s=this.dom[0].parentElement;this.parentElement=s}const t=this.generateDom(this.renderKit);ne(this.dom,t,this.parentElement),this.parentElement&&(this.dom=Array.from(this.parentElement.childNodes))}subscribeForRerender(){const{subscribe:t}=this.renderKit;this.subscriptions.forEach(s=>{t(this.eventName(s),()=>this.rerender())})}eventName(t){return`${w}:${t}`}}const ge=e=>e,ye=({Template:e,viewModel:t,subscriptions:s})=>(s=s||[],t=t||ge,n=>new ve({Template:e,viewModel:t,subscriptions:s,attributes:n})),Ee=Object.freeze(Object.defineProperty({__proto__:null,createRouteState:M,events:xt,extractQueryParams:z,findHref:F,navigate:D,onLinkClick:U,onLocationChange:L,start:Nt},Symbol.toStringTag,{value:"Module"}));m.JaxsTypes=zt,m.appBuilding=jt,m.bind=ye,m.createApp=Ut,m.jsx=O,m.messageBus=kt,m.navigation=Ee,m.state=Ft,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})});
+(function(m,f){typeof exports=="object"&&typeof module<"u"?f(exports):typeof define=="function"&&define.amd?define(["exports"],f):(m=typeof globalThis<"u"?globalThis:m||self,f(m.jaxs={}))})(this,function(m){"use strict";const f=(e,t)=>t.createElement(e),nt=(e,t)=>{for(const s in t){if(s==="__self")continue;const n=t[s].toString();s==="value"?e.value=n:e.setAttribute(s,n)}},rt=(e,t,s)=>{const n={};for(const r in t){const o=t[r],c=h=>s(o,h);e.addEventListener(r,c),n[r]={domEvent:r,busEvent:o,listener:c}}e.eventMaps=n},ot=(e,t,s,n)=>{const r=f(e,n.document);return nt(r,t),rt(r,s,n.publish),r},y="http://www.w3.org/2000/svg",it={animate:!0,animateMotion:!0,animateTransform:!0,circle:!0,clipPath:!0,defs:!0,desc:!0,ellipse:!0,feBlend:!0,feColorMatrix:!0,feComponentTransfer:!0,feComposite:!0,feConvolveMatrix:!0,feDiffuseLighting:!0,feDisplacementMap:!0,feDistantLight:!0,feDropShadow:!0,feFlood:!0,feFuncA:!0,feFuncB:!0,feFuncG:!0,feFuncR:!0,feGaussianBlur:!0,feImage:!0,feMerge:!0,feMergeNode:!0,feMorphology:!0,feOffset:!0,fePointLight:!0,feSpecularLighting:!0,feSpotLight:!0,feTile:!0,feTurbulence:!0,filter:!0,foreignObject:!0,g:!0,image:!0,line:!0,linearGradient:!0,marker:!0,mask:!0,metadata:!0,mpath:!0,path:!0,pattern:!0,polygon:!0,polyline:!0,radialGradient:!0,rect:!0,script:!0,set:!0,stop:!0,style:!0,svg:!0,switch:!0,symbol:!0,text:!0,textPath:!0,title:!0,tspan:!0,use:!0,view:!0},ut=(e,t)=>!!(it[e]||e==="a"&&t===y),at=(e,t,s)=>{const n=s.createElementNS(y,e);for(const r in t)r==="__self"||r==="xmlns"||n.setAttributeNS(null,r,t[r].toString());return n},ct=e=>e.namespaceURI===y,ht=(e,t)=>t.createTextNode(e);class lt{constructor(t){this.value=t.toString()}render(t){const s=ht(this.value,t.document);return s.__jsx="TextNode",[s]}}const dt=e=>typeof e=="string"||typeof e=="number",pt=e=>new lt(e),mt=e=>dt(e)?pt(e):e,ft=e=>bt(e).map(mt).flat(),bt=e=>Array.isArray(e)?e.flat():e?[e]:[],N=(e,t={})=>e||t.children||[],vt=(e,t="")=>{const s={},n={};for(const r in e){const o=e[r];if(r.match(/^on.+/i)){const c=r.slice(2).toLowerCase();n[c]=o?o.toString():""}else{if(o===!1)continue;r==="__source"?s.__source=e.__source:s[r]=gt(r,o,t)}}return{attributes:s,events:n}},gt=(e,t,s="")=>t==null?s:t.toString(),yt=(e,t)=>{const s=e||{},n=N(t,s);return s.children=s.children||n,s},j=(e,t,s=[])=>e.reduce(Et(t),s).flat(),Et=e=>(t,s)=>s?Array.isArray(s)?j(s,e,t):(s.render(e).forEach(n=>t.push(n)),t):t;class k{constructor(t){this.collection=ft(t)}render(t,s){this.parentElement=s;const n=this.generateDom(t);return this.attachToParent(n),n}generateDom(t){return j(this.collection,t)}attachToParent(t){if(this.parentElement===void 0)return;const s=this.parentElement;t.forEach(n=>s.appendChild(n))}}class At{constructor(t,s){this.type=t,this.attributes=s}generate(){return this.attributes.key||this.sourceKey()||this.createKeyFromAttributes()}sourceKey(){if(this.attributes.__source){const{fileName:t,lineNumber:s,columnNumber:n}=this.attributes.__source;return`${t}:${s}:${n}`}}createKeyFromAttributes(){const t=this.attributes.id?`#${this.attributes.id}`:"",s=this.attributes.type?`[type=${this.attributes.type}]`:"",n=this.attributes.name?`[name=${this.attributes.name}]`:"";return`${this.type}${t}${s}${n}`}}class wt{constructor(t,s,n=[]){this.type=t;const{events:r,attributes:o}=vt(s);this.events=r,this.attributes=o,this.isSvg=ut(this.type,this.attributes.xmlns),this.children=new k(n)}render(t){const s=this.generateDom(t);return s?(this.children.render(t,s),[s]):[]}generateDom(t){return this.isSvg?this.generateSvgDom(t):this.generateHtmlDom(t)}generateHtmlDom(t){const s=ot(this.type,this.attributes,this.events,t);return s.__jsx=this.jsxKey(),s}generateSvgDom(t){const s=at(this.type,this.attributes,t.document);return s.__jsx=this.jsxKey(),s}jsxKey(){return new At(this.type,this.attributes).generate()}}const M=(e,t,...s)=>typeof e=="string"?new wt(e,t,s):e(yt(t,s));M.fragment=(e,t)=>{const s=N(t,e);return new k(s)};class xt{constructor(t,s,n){this.template=t,this.selector=s,this.renderKit=n,this.dom=[]}renderAndAttach(t){this.parentElement=this.getParentElement(),this.dom=this.render({...t,parent:this.parentElement}),this.parentElement&&this.attach()}render(t){return this.template.render(t)}attach(){this.parentElement&&(this.parentElement.innerHTML=""),this.dom.forEach(t=>{this.parentElement&&this.parentElement.appendChild(t)})}getParentElement(){return this.renderKit.document.querySelector(this.selector)}}const St=(e,t,s)=>{const n=new xt(e,t,s);return n.renderAndAttach(s),n},O="go-to-href",b="navigation:location-change",T="navigation:route-change",_t=Object.freeze(Object.defineProperty({__proto__:null,linkNavigationEvent:O,locationChangeEvent:b,routeChangeEvent:T},Symbol.toStringTag,{value:"Module"})),F=e=>{e.createRecord("route",{host:"",path:"",query:{}})},$=e=>{const t=e.closest("[href]");return t&&t.getAttribute("href")||""},D=(e,{publish:t,window:s})=>{s.history.pushState(null,"",e),t(b,null)},L=(e,t)=>{if(!e||!e.target)return;e.preventDefault();const s=$(e.target);D(s,t)},P=e=>e.replace(/^\?/,"").split("&").reduce((t,s)=>{if(!s)return t;const n=s.split("=");return t[n[0]]=n[1],t},{}),B=(e,t)=>{const{state:s,publish:n,window:r}=t,{host:o,pathname:c,search:h}=r.location,i=c,d=P(h),a={host:o,path:i,query:d};s.store("route").update(a),n(T,a)},U=e=>{const{subscribe:t}=e;t(O,L)},z=e=>{const{publish:t,subscribe:s,state:n,window:r}=e;F(n),r.addEventListener("popstate",()=>t(b,null)),s(b,B)},V=e=>{setTimeout(()=>e.publish(b,null),0)},K=e=>{z(e),U(e),V(e)},Nt=Object.freeze(Object.defineProperty({__proto__:null,publishLocation:V,startNavigation:K,subscribeToHistoryChange:z,subscribeToNavigation:U},Symbol.toStringTag,{value:"Module"}));class R{constructor({window:t,document:s,publish:n,subscribe:r,bus:o,state:c,renderKit:h}){this.window=t,this.document=s,this.publish=n,this.subscribe=r,this.bus=o,this.state=c,this.renderKit=h,this.roots=[]}render(t,s){const n=St(t,s,this.renderKit);return this.roots.push(n),n}startNavigation(){K(this)}}const jt=Object.freeze(Object.defineProperty({__proto__:null,App:R},Symbol.toStringTag,{value:"Module"}));class q{constructor(){this.lookup={}}add(t,s,n){this.ensureArrayFor(t);const r={listener:s,index:n,matcher:t};return this.lookup[t].push(r),()=>this.remove(r)}remove(t){this.lookup[t.matcher]&&(this.lookup[t.matcher]=this.lookup[t.matcher].reduce((s,n)=>(n!==t&&s.push(n),s),[]))}matches(t){return this.lookup[t]||[]}ensureArrayFor(t){this.lookup[t]||(this.lookup[t]=[])}}class J{constructor(){this.lookup=[]}add(t,s,n){const r={listener:s,index:n,matcher:t};return this.lookup.push(r),()=>this.remove(r)}remove(t){this.lookup=this.lookup.reduce((s,n)=>(n!==t&&s.push(n),s),[])}matches(t){return this.lookup.filter(s=>s.matcher.test(t))}}class H{constructor(){this.exactSubscriptions=new q,this.fuzzySubscriptions=new J,this.currentIndex=0}subscribe(t,s){let n;return typeof t=="string"?n=this.exactSubscriptions.add(t,s,this.currentIndex):n=this.fuzzySubscriptions.add(t,s,this.currentIndex),this.currentIndex+=1,n}publish(t,s){[...this.exactSubscriptions.matches(t),...this.fuzzySubscriptions.matches(t)].sort((r,o)=>r.index-o.index).forEach(r=>{r.listener(s,this.listenerOptions(t))})}addListenerOptions(t){this.options=t}listenerOptions(t){return{eventName:t,...this.options,publish:this.publish.bind(this)}}}const I=()=>{const e=new H;return{bus:e,publish:(n,r)=>e.publish(n,r),subscribe:(n,r)=>e.subscribe(n,r)}},kt=Object.freeze(Object.defineProperty({__proto__:null,ExactSubscriptions:q,FuzzySubscriptions:J,JaxsBus:H,createBus:I},Symbol.toStringTag,{value:"Module"})),v=e=>Array.isArray(e),E=e=>e!==null&&!v(e)&&typeof e=="object",Mt=(e,t)=>e===t,Ot=(e,t)=>Object.keys(e).length===Object.keys(t).length,Tt=(e,t)=>!(E(e)&&E(t))||!Ot(e,t)?!1:Object.keys(e).every(s=>{const n=e[s],r=t[s];return A(n,r)}),Ft=(e,t)=>!(v(e)&&v(t))||e.length!==t.length?!1:e.every((s,n)=>{const r=t[n];return A(s,r)}),A=(e,t)=>E(e)?Tt(e,t):v(e)?Ft(e,t):Mt(e,t);class g{constructor(t){this.store=t}update(t){this.store.update(t)}reset(){this.store.update(this.store.initialState)}get value(){return this.store.value}addUpdaterFunction(t,s){this.constructor.prototype[t]=(...n)=>{const r=s(this.value,...n);this.update(r)}}addUpdaterFunctions(t){for(const s in t)this.addUpdaterFunction(s,t[s])}}class w extends g{addUpdaterFunction(t,s){this.constructor.prototype[t]=(...n)=>{const r=s(this.value,...n);this.update(r)}}push(t){const s=[...this.value,t];this.update(s)}pop(){const t=[...this.value],s=t.pop();return this.update(t),s}unshift(t){const s=[t,...this.value];this.update(s)}shift(){const t=[...this.value],s=t.shift();return this.update(t),s}addSorter(t,s){this[t]=()=>{this.sortBy(s)}}sortBy(t){const s=[...this.value];s.sort(t),this.update(s)}insertAt(t,s){const n=[...this.value];n.splice(t,0,s),this.update(n)}}class x{constructor(t){this.name=t.name,this.parent=t.parent,this._value=t.value,this.initialState=structuredClone(t.value),this.updater=new g(this)}get value(){return this._value}set value(t){throw new Error("Cannot set value directly. Use an updater!")}update(t){if(typeof t=="function"){const s=this.getUpdatedValue(t);this.updateValue(s)}else this.updateValue(t)}updateValue(t){A(this._value,t)||(this._value=t,this.parent.notify(this.name))}getUpdatedValue(t){return t(this.value)}addUpdaters(t){this.updater.addUpdaterFunctions(t)}addUpdater(t,s){this.updater.addUpdaterFunction(t,s)}addSorter(t,s){this.updater instanceof w&&this.updater.addSorter(t,s)}}class G extends g{toggle(){const t=!this.value;this.update(t)}setTrue(){this.update(!0)}setFalse(){this.update(!1)}addUpdaterFunction(t,s){this.constructor.prototype[t]=(...n)=>{const r=s(this.value,...n);this.update(r)}}}class C extends g{addUpdaterFunction(t,s){this.constructor.prototype[t]=(...n)=>{const r=s(this.value,...n);this.update(r)}}updateAttribute(t,s){const n={...this.value};n[t]=s,this.update(n)}}const S="state";class Q{constructor(t){this.publisher=t,this.stores={},this.eventNamePrefix=S,this.notifications=new Set,this.inTransaction=!1}create(t,s){const n=new x({name:t,parent:this,value:s});return this.stores[t]=n,n}createBoolean(t,s){const n=this.create(t,s);return n.updater=new G(n),n}createRecord(t,s){const n=this.create(t,s);return n.updater=new C(n),n}createList(t,s){const n=this.create(t,s);return n.updater=new w(n),n}store(t){return this.stores[t]||new x({name:t,parent:this,value:void 0})}get(t){return this.store(t).value}getAll(t){return t.reduce((s,n)=>(s[n]=this.get(n),s),{})}notify(t){this.inTransaction?this.notifications.add(t):this.publish(t)}update(t,s){this.store(t).update(s)}transaction(t){this.inTransaction=!0,t(this.stores),this.inTransaction=!1,this.publishAll()}publishAll(){this.notifications.forEach(t=>{this.publish(t)}),this.notifications.clear()}publish(t){this.publisher(this.event(t),{state:this,store:this.store(t)})}event(t){return`${this.eventNamePrefix}:${t}`}}const W=e=>new Q(e),$t=Object.freeze(Object.defineProperty({__proto__:null,State:Q,Store:x,StoreUpdaterBoolean:G,StoreUpdaterList:w,StoreUpdaterObject:C,createState:W,eventName:S},Symbol.toStringTag,{value:"Module"}));class Dt{constructor(t){this.setupDomEnvironment(t)}setup(){return this.setupBus(),this.setupState(),this.addBusOptions(),this.setRenderKit(),new R({window:this.window,document:this.document,publish:this.publish,subscribe:this.subscribe,bus:this.bus,state:this.state,renderKit:this.renderKit})}setupDomEnvironment(t){t.window?(this.window=t.window,this.document=this.window.document):t.document?(this.window=t.document.defaultView,this.document=t.document):(this.window=window,this.document=document)}setupBus(){const{publish:t,subscribe:s,bus:n}=I();this.publish=t,this.subscribe=s,this.bus=n}setupState(){this.state=W(this.publish)}addBusOptions(){this.bus.addListenerOptions({state:this.state,document:this.document,window:this.window})}setRenderKit(){this.renderKit={publish:this.publish,subscribe:this.subscribe,state:this.state,document:this.document,window:this.window}}}const Lt=(e={})=>{const s=new Dt(e).setup();return s.startNavigation(),s};var u=(e=>(e[e.removeNode=0]="removeNode",e[e.insertNode=1]="insertNode",e[e.replaceNode=2]="replaceNode",e[e.removeAttribute=3]="removeAttribute",e[e.addAttribute=4]="addAttribute",e[e.updateAttribute=5]="updateAttribute",e[e.removeEvent=6]="removeEvent",e[e.addEvent=7]="addEvent",e[e.updateEvent=8]="updateEvent",e[e.changeValue=9]="changeValue",e[e.changeText=10]="changeText",e))(u||{});const Pt=Object.freeze(Object.defineProperty({__proto__:null,ChangeInstructionTypes:u},Symbol.toStringTag,{value:"Module"})),Bt=(e,t)=>({source:e,target:t,type:u.changeText,data:{}}),Ut=(e,t)=>({source:e,target:t,type:u.replaceNode,data:{}}),zt=(e,t,s)=>({source:e,target:t,data:s,type:u.removeAttribute}),Vt=(e,t,s)=>({source:e,target:t,data:s,type:u.addAttribute}),Kt=(e,t,s)=>({source:e,target:t,data:s,type:u.updateAttribute}),Rt=(e,t,s)=>({source:e,target:t,data:s,type:u.removeEvent}),qt=(e,t,s)=>({source:e,target:t,data:s,type:u.addEvent}),Jt=(e,t,s)=>({source:e,target:t,data:s,type:u.updateEvent}),X=e=>({source:e,target:e,type:u.removeNode,data:{}}),_=(e,t)=>({target:e,source:e,type:u.insertNode,data:t}),Ht=(e,t,s)=>({source:e,target:t,type:u.changeValue,data:s}),It=(e,t)=>e.type>t.type?1:e.type<t.type?-1:0,Y={index:-1};class Gt{constructor(){this.map={}}populate(t){t.forEach((s,n)=>{const r=s.__jsx;r&&(this.map[r]=this.map[r]||[],this.map[r].push({element:s,index:n}))})}pullMatch(t){const s=t&&t.__jsx;return!s||!(this.map[s]&&this.map[s].length)?Y:this.map[s].shift()}clear(t){const s=t&&t.__jsx;if(!(s&&this.map[s]&&this.map[s].length))return;const n=this.map[s];this.map[s]=n.reduce((r,o)=>(o.element!==t&&r.push(o),r),[])}check(t){const s=t&&t.__jsx;return s&&this.map[s]?this.map[s].length>0:!1}remaining(){return Object.values(this.map).flat()}}const Z=e=>{const t=new Gt;return t.populate(e),t},tt=(e,t,s=!1)=>{const n=[],r=e.attributes,o=r.length,c=t.attributes,h=c.length;let i,d,a;for(i=0;i<o;i++){a=null;const l=r.item(i);if(l){for(d=0;d<h;d++){const p=c.item(d);if(p&&l.name==p.name){a=p;break}}a?l.value!==a.value&&n.push(Kt(e,t,{name:l.name,value:a.value,isSvg:s})):n.push(zt(e,t,{name:l.name,isSvg:s}))}}for(i=0;i<h;i++){a=null;const l=c.item(i);if(l){for(d=0;d<o;d++){const p=r.item(d);if(p&&p.name==l.name){a=p;break}}a||n.push(Vt(e,t,{name:l.name,value:l.value,isSvg:s}))}}return n},Ct=(e,t)=>{const s=[],n=e.eventMaps,r=t.eventMaps,o=Object.keys(n),c=Object.keys(r);return o.forEach(h=>{const i=n[h],d=r[h];d?d.busEvent!==i.busEvent&&s.push(Jt(e,t,{name:h,targetValue:d.listener,sourceValue:i.listener})):s.push(Rt(e,t,{name:i.domEvent,value:i.listener}))}),c.forEach(h=>{const i=n[h],d=r[h];i||s.push(qt(e,t,{name:d.domEvent,value:d.listener}))}),s},Qt=e=>e.tagName!=="INPUT",Wt=(e,t)=>e.value===t.value,Xt=(e,t)=>{if(Qt(e)||Wt(e,t))return[];const s=e,n=t;return[Ht(s,n,{name:"value",value:n.value})]},Yt=(e,t)=>{const s=tt(e,t),n=Ct(e,t),r=Xt(e,t);return s.concat(n).concat(r)},Zt=(e,t)=>tt(e,t,!0),te=(e,t)=>e.textContent!==t.textContent?[Bt(e,t)]:[],ee=(e,t,s)=>{let n=[];if(e.nodeType===1&&ct(e)){const r=e,o=t,c=Zt(r,o),h=s(r.childNodes,o.childNodes,r);n=c.concat(h)}else if(e.nodeType===1){const r=e,o=t,c=Yt(r,o),h=s(r.childNodes,o.childNodes,r);n=c.concat(h)}else e.nodeType===3&&(n=te(e,t));return n},et=(e,t,s)=>{const n=[],r=se(e,t),o=Z(e),c=Z(t),h=[];let i=0;for(;i<r;i++){const a=e[i],l=t[i];if(l&&c.check(l)){const p=o.pullMatch(l);c.clear(l),p.element?(p.index!==i&&n.push(_(p.element,{parent:s,index:i})),h.push({source:p.element,target:l})):a?c.check(a)?n.push(_(l,{parent:s,index:i})):(o.clear(a),n.push(Ut(a,l))):n.push(_(l,{parent:s,index:i}))}else a&&o.pullMatch(a).element&&n.push(X(a))}o.remaining().forEach(({element:a})=>{n.push(X(a))});const d=h.reduce((a,{source:l,target:p})=>a.concat(ee(l,p,et)),[]);return n.concat(d).sort(It)},se=(e,t)=>{const s=e.length,n=t.length;return s>n?s:n},ne=(e,t,s)=>{et(e,t,s).forEach(r=>{re(r)})},re=e=>{(be[e.type]||oe)(e)},oe=e=>{},ie=e=>{const{source:t,target:s}=e;t.nodeValue=s.textContent},ue=e=>{const{source:t}=e;t.remove()},ae=e=>{const{target:t,data:s}=e,{parent:n,index:r}=s,o=n.childNodes[r];o?o&&o!==t&&n.insertBefore(t,o):n.appendChild(t)},ce=e=>{const{source:t,target:s}=e;t.replaceWith(s)},he=e=>{const{source:t,data:s}=e,{name:n,isSvg:r}=s;r?t.removeAttributeNS(null,n):t.removeAttribute(n)},st=e=>{const{source:t,data:s}=e,{name:n,value:r,isSvg:o}=s;o?t.setAttributeNS(null,n,r):t.setAttribute(n,r)},le=e=>{st(e)},de=e=>{const t=e.data,s=e.source,{name:n,value:r}=t;s.removeEventListener(n,r)},pe=e=>{const t=e.data,s=e.source,{name:n,value:r}=t;s.addEventListener(n,r)},me=e=>{const t=e.data,s=e.source,{name:n,sourceValue:r,targetValue:o}=t;s.removeEventListener(n,r),s.addEventListener(n,o)},fe=e=>{const t=e.data,s=e.source,{value:n}=t;s.value=n},be={[u.changeText]:ie,[u.removeNode]:ue,[u.insertNode]:ae,[u.replaceNode]:ce,[u.removeAttribute]:he,[u.addAttribute]:st,[u.updateAttribute]:le,[u.removeEvent]:de,[u.addEvent]:pe,[u.updateEvent]:me,[u.changeValue]:fe};class ve{constructor({Template:t,subscriptions:s,attributes:n,viewModel:r}){this.Template=t,this.viewModel=r,this.attributes=n,this.subscriptions=s,this.dom=[],this.parentElement=null}render(t){return this.parentElement=t.parent,this.renderKit=t,this.subscribeForRerender(),this.dom=this.generateDom(t),this.dom}generateDom(t){const s={...this.attributes,...this.viewModel(t.state.getAll(this.subscriptions))},n=this.Template(s);return n?n.render(t):[]}rerender(){if(!this.parentElement&&this.dom[0]){const s=this.dom[0].parentElement;this.parentElement=s}const t=this.generateDom(this.renderKit);ne(this.dom,t,this.parentElement),this.parentElement&&(this.dom=Array.from(this.parentElement.childNodes))}subscribeForRerender(){const{subscribe:t}=this.renderKit;this.subscriptions.forEach(s=>{t(this.eventName(s),()=>this.rerender())})}eventName(t){return`${S}:${t}`}}const ge=e=>e,ye=({Template:e,viewModel:t,subscriptions:s})=>(s=s||[],t=t||ge,n=>new ve({Template:e,viewModel:t,subscriptions:s,attributes:n})),Ee=Object.freeze(Object.defineProperty({__proto__:null,createRouteState:F,events:_t,extractQueryParams:P,findHref:$,navigate:D,onLinkClick:L,onLocationChange:B,start:Nt},Symbol.toStringTag,{value:"Module"}));m.JaxsTypes=Pt,m.appBuilding=jt,m.bind=ye,m.createApp=Lt,m.jsx=M,m.messageBus=kt,m.navigation=Ee,m.state=$t,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -2,7 +2,7 @@
   "name": "jaxs",
   "description": "Modular J/TSX application framework",
   "private": false,
-  "version": "0.4.2",
+  "version": "0.4.3",
   "type": "module",
   "scripts": {
     "build": "vite build && npm run build:types",