@cajoa/dom 0.7.0 → 0.9.0

package/dist/index.cjs

@@ -32,14 +32,159 @@ module.exports = __toCommonJS(index_exports);
 var import_core2 = require("@cajoa/core");
 
 // src/dom-renderer.ts
+var SVG_NS = "http://www.w3.org/2000/svg";
+var SVG_TAGS = /* @__PURE__ */ new Set([
+  "svg",
+  "g",
+  "defs",
+  "symbol",
+  "use",
+  "switch",
+  "view",
+  "desc",
+  "metadata",
+  "circle",
+  "ellipse",
+  "line",
+  "path",
+  "polygon",
+  "polyline",
+  "rect",
+  "image",
+  "text",
+  "tspan",
+  "textPath",
+  "foreignObject",
+  "linearGradient",
+  "radialGradient",
+  "stop",
+  "pattern",
+  "clipPath",
+  "mask",
+  "marker",
+  "filter",
+  "feBlend",
+  "feColorMatrix",
+  "feComponentTransfer",
+  "feComposite",
+  "feConvolveMatrix",
+  "feDiffuseLighting",
+  "feDisplacementMap",
+  "feDropShadow",
+  "feFlood",
+  "feGaussianBlur",
+  "feImage",
+  "feMerge",
+  "feMergeNode",
+  "feMorphology",
+  "feOffset",
+  "feSpecularLighting",
+  "feTile",
+  "feTurbulence",
+  "animate",
+  "animateMotion",
+  "animateTransform",
+  "set",
+  "mpath"
+]);
+var PROPERTIES = /* @__PURE__ */ new Set(["value", "checked", "selected", "indeterminate"]);
+var ATTRIBUTE_NAMES = {
+  className: "class",
+  htmlFor: "for"
+};
+var SVG_ATTRIBUTE_NAMES = {
+  strokeWidth: "stroke-width",
+  strokeLinecap: "stroke-linecap",
+  strokeLinejoin: "stroke-linejoin",
+  strokeDasharray: "stroke-dasharray",
+  strokeDashoffset: "stroke-dashoffset",
+  strokeOpacity: "stroke-opacity",
+  strokeMiterlimit: "stroke-miterlimit",
+  fillOpacity: "fill-opacity",
+  fillRule: "fill-rule",
+  clipRule: "clip-rule",
+  clipPath: "clip-path",
+  stopColor: "stop-color",
+  stopOpacity: "stop-opacity",
+  floodColor: "flood-color",
+  floodOpacity: "flood-opacity",
+  textAnchor: "text-anchor",
+  dominantBaseline: "dominant-baseline",
+  fontSize: "font-size",
+  fontFamily: "font-family",
+  fontWeight: "font-weight",
+  letterSpacing: "letter-spacing",
+  markerStart: "marker-start",
+  markerMid: "marker-mid",
+  markerEnd: "marker-end",
+  vectorEffect: "vector-effect",
+  shapeRendering: "shape-rendering",
+  pointerEvents: "pointer-events"
+};
+var EVENT_NAMES = {
+  doubleclick: "dblclick"
+};
+var listeners = /* @__PURE__ */ new WeakMap();
+var selectValues = /* @__PURE__ */ new WeakMap();
+function isEvent(el, key) {
+  return /^on[A-Z]/.test(key) || key.startsWith("on") && key in el;
+}
+function setEvent(el, key, value) {
+  const raw = key.slice(2).toLowerCase();
+  const name = EVENT_NAMES[raw] ?? raw;
+  let byName = listeners.get(el);
+  if (!byName) {
+    byName = /* @__PURE__ */ new Map();
+    listeners.set(el, byName);
+  }
+  const previous = byName.get(name);
+  if (previous) {
+    el.removeEventListener(name, previous);
+    byName.delete(name);
+  }
+  if (typeof value === "function") {
+    el.addEventListener(name, value);
+    byName.set(name, value);
+  }
+}
+function toCssName(name) {
+  if (name.startsWith("--") || name.includes("-")) return name;
+  return name.replace(/[A-Z]/g, (c) => "-" + c.toLowerCase());
+}
+function setStyle(el, value) {
+  const style = el.style;
+  if (typeof value === "string") {
+    style.cssText = value;
+    return;
+  }
+  style.cssText = "";
+  if (value && typeof value === "object") {
+    for (const [name, v] of Object.entries(value)) {
+      if (v == null || v === false || v === "") continue;
+      style.setProperty(toCssName(name), String(v));
+    }
+  }
+}
+function setProperty(el, name, value) {
+  const target = el;
+  if (name === "value") {
+    const next = value == null ? "" : String(value);
+    if (target.value !== next) target.value = next;
+    if (el.tagName === "SELECT") selectValues.set(el, next);
+  } else {
+    target[name] = !!value;
+  }
+}
 var domRenderer = {
-  createElement: (tag) => document.createElement(tag),
+  createElement: (tag) => SVG_TAGS.has(tag) ? document.createElementNS(SVG_NS, tag) : document.createElement(tag),
   createText: (value) => document.createTextNode(value),
   createMarker: () => document.createComment(""),
   createFragment: () => document.createDocumentFragment(),
   isNode: (v) => typeof Node !== "undefined" && v instanceof Node,
   insert: (parent, node, anchor = null) => {
     parent.insertBefore(node, anchor);
+    const wanted = selectValues.get(parent);
+    if (wanted !== void 0) parent.value = wanted;
   },
   remove: (node) => {
     node.remove();
@@ -51,11 +196,20 @@ var domRenderer = {
   },
   setProp(el, key, value) {
     const e = el;
-    if (key.startsWith("on") && typeof value === "function") {
-      e.addEventListener(key.slice(2).toLowerCase(), value);
+    if (isEvent(e, key)) {
+      setEvent(e, key, value);
+      return;
+    }
+    if (key === "style") {
+      setStyle(e, value);
+      return;
+    }
+    if (PROPERTIES.has(key) && key in e) {
+      setProperty(e, key, value);
       return;
     }
-    const name = key === "className" ? "class" : key;
+    const isSvg = e.namespaceURI === SVG_NS;
+    const name = (isSvg ? SVG_ATTRIBUTE_NAMES[key] : void 0) ?? ATTRIBUTE_NAMES[key] ?? key;
     if (value == null || value === false) e.removeAttribute(name);
     else e.setAttribute(name, value === true ? "" : String(value));
   }

package/dist/index.js

@@ -2,14 +2,159 @@
 import { setRenderer } from "@cajoa/core";
 
 // src/dom-renderer.ts
+var SVG_NS = "http://www.w3.org/2000/svg";
+var SVG_TAGS = /* @__PURE__ */ new Set([
+  "svg",
+  "g",
+  "defs",
+  "symbol",
+  "use",
+  "switch",
+  "view",
+  "desc",
+  "metadata",
+  "circle",
+  "ellipse",
+  "line",
+  "path",
+  "polygon",
+  "polyline",
+  "rect",
+  "image",
+  "text",
+  "tspan",
+  "textPath",
+  "foreignObject",
+  "linearGradient",
+  "radialGradient",
+  "stop",
+  "pattern",
+  "clipPath",
+  "mask",
+  "marker",
+  "filter",
+  "feBlend",
+  "feColorMatrix",
+  "feComponentTransfer",
+  "feComposite",
+  "feConvolveMatrix",
+  "feDiffuseLighting",
+  "feDisplacementMap",
+  "feDropShadow",
+  "feFlood",
+  "feGaussianBlur",
+  "feImage",
+  "feMerge",
+  "feMergeNode",
+  "feMorphology",
+  "feOffset",
+  "feSpecularLighting",
+  "feTile",
+  "feTurbulence",
+  "animate",
+  "animateMotion",
+  "animateTransform",
+  "set",
+  "mpath"
+]);
+var PROPERTIES = /* @__PURE__ */ new Set(["value", "checked", "selected", "indeterminate"]);
+var ATTRIBUTE_NAMES = {
+  className: "class",
+  htmlFor: "for"
+};
+var SVG_ATTRIBUTE_NAMES = {
+  strokeWidth: "stroke-width",
+  strokeLinecap: "stroke-linecap",
+  strokeLinejoin: "stroke-linejoin",
+  strokeDasharray: "stroke-dasharray",
+  strokeDashoffset: "stroke-dashoffset",
+  strokeOpacity: "stroke-opacity",
+  strokeMiterlimit: "stroke-miterlimit",
+  fillOpacity: "fill-opacity",
+  fillRule: "fill-rule",
+  clipRule: "clip-rule",
+  clipPath: "clip-path",
+  stopColor: "stop-color",
+  stopOpacity: "stop-opacity",
+  floodColor: "flood-color",
+  floodOpacity: "flood-opacity",
+  textAnchor: "text-anchor",
+  dominantBaseline: "dominant-baseline",
+  fontSize: "font-size",
+  fontFamily: "font-family",
+  fontWeight: "font-weight",
+  letterSpacing: "letter-spacing",
+  markerStart: "marker-start",
+  markerMid: "marker-mid",
+  markerEnd: "marker-end",
+  vectorEffect: "vector-effect",
+  shapeRendering: "shape-rendering",
+  pointerEvents: "pointer-events"
+};
+var EVENT_NAMES = {
+  doubleclick: "dblclick"
+};
+var listeners = /* @__PURE__ */ new WeakMap();
+var selectValues = /* @__PURE__ */ new WeakMap();
+function isEvent(el, key) {
+  return /^on[A-Z]/.test(key) || key.startsWith("on") && key in el;
+}
+function setEvent(el, key, value) {
+  const raw = key.slice(2).toLowerCase();
+  const name = EVENT_NAMES[raw] ?? raw;
+  let byName = listeners.get(el);
+  if (!byName) {
+    byName = /* @__PURE__ */ new Map();
+    listeners.set(el, byName);
+  }
+  const previous = byName.get(name);
+  if (previous) {
+    el.removeEventListener(name, previous);
+    byName.delete(name);
+  }
+  if (typeof value === "function") {
+    el.addEventListener(name, value);
+    byName.set(name, value);
+  }
+}
+function toCssName(name) {
+  if (name.startsWith("--") || name.includes("-")) return name;
+  return name.replace(/[A-Z]/g, (c) => "-" + c.toLowerCase());
+}
+function setStyle(el, value) {
+  const style = el.style;
+  if (typeof value === "string") {
+    style.cssText = value;
+    return;
+  }
+  style.cssText = "";
+  if (value && typeof value === "object") {
+    for (const [name, v] of Object.entries(value)) {
+      if (v == null || v === false || v === "") continue;
+      style.setProperty(toCssName(name), String(v));
+    }
+  }
+}
+function setProperty(el, name, value) {
+  const target = el;
+  if (name === "value") {
+    const next = value == null ? "" : String(value);
+    if (target.value !== next) target.value = next;
+    if (el.tagName === "SELECT") selectValues.set(el, next);
+  } else {
+    target[name] = !!value;
+  }
+}
 var domRenderer = {
-  createElement: (tag) => document.createElement(tag),
+  createElement: (tag) => SVG_TAGS.has(tag) ? document.createElementNS(SVG_NS, tag) : document.createElement(tag),
   createText: (value) => document.createTextNode(value),
   createMarker: () => document.createComment(""),
   createFragment: () => document.createDocumentFragment(),
   isNode: (v) => typeof Node !== "undefined" && v instanceof Node,
   insert: (parent, node, anchor = null) => {
     parent.insertBefore(node, anchor);
+    const wanted = selectValues.get(parent);
+    if (wanted !== void 0) parent.value = wanted;
   },
   remove: (node) => {
     node.remove();
@@ -21,11 +166,20 @@ var domRenderer = {
   },
   setProp(el, key, value) {
     const e = el;
-    if (key.startsWith("on") && typeof value === "function") {
-      e.addEventListener(key.slice(2).toLowerCase(), value);
+    if (isEvent(e, key)) {
+      setEvent(e, key, value);
+      return;
+    }
+    if (key === "style") {
+      setStyle(e, value);
+      return;
+    }
+    if (PROPERTIES.has(key) && key in e) {
+      setProperty(e, key, value);
       return;
     }
-    const name = key === "className" ? "class" : key;
+    const isSvg = e.namespaceURI === SVG_NS;
+    const name = (isSvg ? SVG_ATTRIBUTE_NAMES[key] : void 0) ?? ATTRIBUTE_NAMES[key] ?? key;
     if (value == null || value === false) e.removeAttribute(name);
     else e.setAttribute(name, value === true ? "" : String(value));
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cajoa/dom",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "Cajoa for the browser: DOM renderer and router.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -26,7 +26,7 @@
   ],
   "sideEffects": true,
   "peerDependencies": {
-    "@cajoa/core": "^0.7.0"
+    "@cajoa/core": "^0.9.0"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --clean",