@cajoa/dom 0.7.0 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.cjs +72 -3
  2. package/dist/index.js +72 -3
  3. package/package.json +2 -2
package/dist/index.cjs CHANGED
@@ -32,6 +32,65 @@ module.exports = __toCommonJS(index_exports);
32
32
  var import_core2 = require("@cajoa/core");
33
33
 
34
34
  // src/dom-renderer.ts
35
+ var PROPERTIES = /* @__PURE__ */ new Set(["value", "checked", "selected", "indeterminate"]);
36
+ var ATTRIBUTE_NAMES = {
37
+ className: "class",
38
+ htmlFor: "for"
39
+ };
40
+ var EVENT_NAMES = {
41
+ doubleclick: "dblclick"
42
+ };
43
+ var listeners = /* @__PURE__ */ new WeakMap();
44
+ var selectValues = /* @__PURE__ */ new WeakMap();
45
+ function isEvent(el, key) {
46
+ return /^on[A-Z]/.test(key) || key.startsWith("on") && key in el;
47
+ }
48
+ function setEvent(el, key, value) {
49
+ const raw = key.slice(2).toLowerCase();
50
+ const name = EVENT_NAMES[raw] ?? raw;
51
+ let byName = listeners.get(el);
52
+ if (!byName) {
53
+ byName = /* @__PURE__ */ new Map();
54
+ listeners.set(el, byName);
55
+ }
56
+ const previous = byName.get(name);
57
+ if (previous) {
58
+ el.removeEventListener(name, previous);
59
+ byName.delete(name);
60
+ }
61
+ if (typeof value === "function") {
62
+ el.addEventListener(name, value);
63
+ byName.set(name, value);
64
+ }
65
+ }
66
+ function toCssName(name) {
67
+ if (name.startsWith("--") || name.includes("-")) return name;
68
+ return name.replace(/[A-Z]/g, (c) => "-" + c.toLowerCase());
69
+ }
70
+ function setStyle(el, value) {
71
+ const style = el.style;
72
+ if (typeof value === "string") {
73
+ style.cssText = value;
74
+ return;
75
+ }
76
+ style.cssText = "";
77
+ if (value && typeof value === "object") {
78
+ for (const [name, v] of Object.entries(value)) {
79
+ if (v == null || v === false || v === "") continue;
80
+ style.setProperty(toCssName(name), String(v));
81
+ }
82
+ }
83
+ }
84
+ function setProperty(el, name, value) {
85
+ const target = el;
86
+ if (name === "value") {
87
+ const next = value == null ? "" : String(value);
88
+ if (target.value !== next) target.value = next;
89
+ if (el.tagName === "SELECT") selectValues.set(el, next);
90
+ } else {
91
+ target[name] = !!value;
92
+ }
93
+ }
35
94
  var domRenderer = {
36
95
  createElement: (tag) => document.createElement(tag),
37
96
  createText: (value) => document.createTextNode(value),
@@ -40,6 +99,8 @@ var domRenderer = {
40
99
  isNode: (v) => typeof Node !== "undefined" && v instanceof Node,
41
100
  insert: (parent, node, anchor = null) => {
42
101
  parent.insertBefore(node, anchor);
102
+ const wanted = selectValues.get(parent);
103
+ if (wanted !== void 0) parent.value = wanted;
43
104
  },
44
105
  remove: (node) => {
45
106
  node.remove();
@@ -51,11 +112,19 @@ var domRenderer = {
51
112
  },
52
113
  setProp(el, key, value) {
53
114
  const e = el;
54
- if (key.startsWith("on") && typeof value === "function") {
55
- e.addEventListener(key.slice(2).toLowerCase(), value);
115
+ if (isEvent(e, key)) {
116
+ setEvent(e, key, value);
117
+ return;
118
+ }
119
+ if (key === "style") {
120
+ setStyle(e, value);
121
+ return;
122
+ }
123
+ if (PROPERTIES.has(key) && key in e) {
124
+ setProperty(e, key, value);
56
125
  return;
57
126
  }
58
- const name = key === "className" ? "class" : key;
127
+ const name = ATTRIBUTE_NAMES[key] ?? key;
59
128
  if (value == null || value === false) e.removeAttribute(name);
60
129
  else e.setAttribute(name, value === true ? "" : String(value));
61
130
  }
package/dist/index.js CHANGED
@@ -2,6 +2,65 @@
2
2
  import { setRenderer } from "@cajoa/core";
3
3
 
4
4
  // src/dom-renderer.ts
5
+ var PROPERTIES = /* @__PURE__ */ new Set(["value", "checked", "selected", "indeterminate"]);
6
+ var ATTRIBUTE_NAMES = {
7
+ className: "class",
8
+ htmlFor: "for"
9
+ };
10
+ var EVENT_NAMES = {
11
+ doubleclick: "dblclick"
12
+ };
13
+ var listeners = /* @__PURE__ */ new WeakMap();
14
+ var selectValues = /* @__PURE__ */ new WeakMap();
15
+ function isEvent(el, key) {
16
+ return /^on[A-Z]/.test(key) || key.startsWith("on") && key in el;
17
+ }
18
+ function setEvent(el, key, value) {
19
+ const raw = key.slice(2).toLowerCase();
20
+ const name = EVENT_NAMES[raw] ?? raw;
21
+ let byName = listeners.get(el);
22
+ if (!byName) {
23
+ byName = /* @__PURE__ */ new Map();
24
+ listeners.set(el, byName);
25
+ }
26
+ const previous = byName.get(name);
27
+ if (previous) {
28
+ el.removeEventListener(name, previous);
29
+ byName.delete(name);
30
+ }
31
+ if (typeof value === "function") {
32
+ el.addEventListener(name, value);
33
+ byName.set(name, value);
34
+ }
35
+ }
36
+ function toCssName(name) {
37
+ if (name.startsWith("--") || name.includes("-")) return name;
38
+ return name.replace(/[A-Z]/g, (c) => "-" + c.toLowerCase());
39
+ }
40
+ function setStyle(el, value) {
41
+ const style = el.style;
42
+ if (typeof value === "string") {
43
+ style.cssText = value;
44
+ return;
45
+ }
46
+ style.cssText = "";
47
+ if (value && typeof value === "object") {
48
+ for (const [name, v] of Object.entries(value)) {
49
+ if (v == null || v === false || v === "") continue;
50
+ style.setProperty(toCssName(name), String(v));
51
+ }
52
+ }
53
+ }
54
+ function setProperty(el, name, value) {
55
+ const target = el;
56
+ if (name === "value") {
57
+ const next = value == null ? "" : String(value);
58
+ if (target.value !== next) target.value = next;
59
+ if (el.tagName === "SELECT") selectValues.set(el, next);
60
+ } else {
61
+ target[name] = !!value;
62
+ }
63
+ }
5
64
  var domRenderer = {
6
65
  createElement: (tag) => document.createElement(tag),
7
66
  createText: (value) => document.createTextNode(value),
@@ -10,6 +69,8 @@ var domRenderer = {
10
69
  isNode: (v) => typeof Node !== "undefined" && v instanceof Node,
11
70
  insert: (parent, node, anchor = null) => {
12
71
  parent.insertBefore(node, anchor);
72
+ const wanted = selectValues.get(parent);
73
+ if (wanted !== void 0) parent.value = wanted;
13
74
  },
14
75
  remove: (node) => {
15
76
  node.remove();
@@ -21,11 +82,19 @@ var domRenderer = {
21
82
  },
22
83
  setProp(el, key, value) {
23
84
  const e = el;
24
- if (key.startsWith("on") && typeof value === "function") {
25
- e.addEventListener(key.slice(2).toLowerCase(), value);
85
+ if (isEvent(e, key)) {
86
+ setEvent(e, key, value);
87
+ return;
88
+ }
89
+ if (key === "style") {
90
+ setStyle(e, value);
91
+ return;
92
+ }
93
+ if (PROPERTIES.has(key) && key in e) {
94
+ setProperty(e, key, value);
26
95
  return;
27
96
  }
28
- const name = key === "className" ? "class" : key;
97
+ const name = ATTRIBUTE_NAMES[key] ?? key;
29
98
  if (value == null || value === false) e.removeAttribute(name);
30
99
  else e.setAttribute(name, value === true ? "" : String(value));
31
100
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cajoa/dom",
3
- "version": "0.7.0",
3
+ "version": "0.8.0",
4
4
  "description": "Cajoa for the browser: DOM renderer and router.",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
@@ -26,7 +26,7 @@
26
26
  ],
27
27
  "sideEffects": true,
28
28
  "peerDependencies": {
29
- "@cajoa/core": "^0.7.0"
29
+ "@cajoa/core": "^0.8.0"
30
30
  },
31
31
  "scripts": {
32
32
  "build": "tsup src/index.ts --format esm,cjs --dts --clean",