bruh 1.12.0 → 1.13.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.
- package/mod.mjs +3 -0
- package/package.json +8 -10
- package/src/dom/index.browser.mjs +83 -25
- package/src/dom/{index.node.mjs → index.server.mjs} +3 -0
- package/src/{index.mjs → index.browser.mjs} +0 -1
- package/src/media/{images.mjs → images.node.mjs} +0 -0
- package/src/util/index.mjs +1 -0
- package/vite.config.mjs +1 -1
- package/dist/bruh.es.js +0 -376
- package/dist/bruh.es.js.map +0 -1
- package/dist/bruh.umd.js +0 -2
- package/dist/bruh.umd.js.map +0 -1
- package/src/dom/live-fragment.mjs +0 -75
package/mod.mjs
ADDED
package/package.json
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
"library",
|
|
11
11
|
"modern"
|
|
12
12
|
],
|
|
13
|
-
"version": "1.
|
|
13
|
+
"version": "1.13.0",
|
|
14
14
|
"license": "MIT",
|
|
15
15
|
"author": {
|
|
16
16
|
"name": "Daniel Ethridge",
|
|
@@ -25,23 +25,21 @@
|
|
|
25
25
|
},
|
|
26
26
|
"type": "module",
|
|
27
27
|
"main": "./dist/bruh.umd.js",
|
|
28
|
+
"sideEffects": false,
|
|
28
29
|
"exports": {
|
|
29
|
-
"
|
|
30
|
+
".": {
|
|
30
31
|
"browser": "./dist/bruh.es.js",
|
|
31
32
|
"default": "./dist/bruh.umd.js"
|
|
32
33
|
},
|
|
33
34
|
"./dom": {
|
|
34
|
-
"node": "./src/dom/index.
|
|
35
|
+
"node": "./src/dom/index.server.mjs",
|
|
35
36
|
"browser": "./src/dom/index.browser.mjs"
|
|
36
37
|
},
|
|
37
|
-
"./dom/live-fragment": {
|
|
38
|
-
"browser": "./src/dom/live-fragment.mjs"
|
|
39
|
-
},
|
|
40
38
|
"./reactive": "./src/reactive/index.mjs",
|
|
41
39
|
"./util": "./src/util/index.mjs",
|
|
42
40
|
"./components/*": "./src/components/*.mjs",
|
|
43
41
|
"./media/images": {
|
|
44
|
-
"node": "./src/media/images.mjs"
|
|
42
|
+
"node": "./src/media/images.node.mjs"
|
|
45
43
|
}
|
|
46
44
|
},
|
|
47
45
|
"bin": {
|
|
@@ -52,10 +50,10 @@
|
|
|
52
50
|
"prepare": "npm run build"
|
|
53
51
|
},
|
|
54
52
|
"optionalDependencies": {
|
|
55
|
-
"cac": "^6.7.
|
|
56
|
-
"sharp": "^0.
|
|
53
|
+
"cac": "^6.7.14",
|
|
54
|
+
"sharp": "^0.31.0"
|
|
57
55
|
},
|
|
58
56
|
"devDependencies": {
|
|
59
|
-
"vite": "^
|
|
57
|
+
"vite": "^3.1.0"
|
|
60
58
|
}
|
|
61
59
|
}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { LiveFragment } from "./live-fragment.mjs"
|
|
2
1
|
import { isReactive, reactiveDo } from "../reactive/index.mjs"
|
|
3
2
|
|
|
4
3
|
//#region Bruh child functions e.g. bruhChildrenToNodes()
|
|
@@ -18,7 +17,7 @@ const isBruhChild = x =>
|
|
|
18
17
|
// Everything else can be a child when stringified
|
|
19
18
|
|
|
20
19
|
// Coerces input into a DOM node, if it isn't already one
|
|
21
|
-
const
|
|
20
|
+
const unreactiveChildToNode = x => {
|
|
22
21
|
// Existing DOM nodes are untouched
|
|
23
22
|
if (x instanceof Node)
|
|
24
23
|
return x
|
|
@@ -30,34 +29,90 @@ const toNode = x => {
|
|
|
30
29
|
return document.createTextNode(x)
|
|
31
30
|
}
|
|
32
31
|
|
|
32
|
+
// Auto-swapping single reactive node
|
|
33
|
+
const reactiveChildToNode = child => {
|
|
34
|
+
let node = unreactiveChildToNode(child.value)
|
|
35
|
+
|
|
36
|
+
const stopReacting = child.addReaction(() => {
|
|
37
|
+
// Stop swapping if no longer possible
|
|
38
|
+
if (!node.parentNode) {
|
|
39
|
+
stopReacting()
|
|
40
|
+
return
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
// Normal swap
|
|
44
|
+
if (!Array.isArray(child.value)) {
|
|
45
|
+
const oldNode = node
|
|
46
|
+
node = unreactiveChildToNode(child.value)
|
|
47
|
+
oldNode.replaceWith(node)
|
|
48
|
+
}
|
|
49
|
+
// If an array now, stop swapping, then switch to reactive array swapping
|
|
50
|
+
else {
|
|
51
|
+
stopReacting()
|
|
52
|
+
node.replaceWith(...reactiveArrayChildToNodes(child))
|
|
53
|
+
}
|
|
54
|
+
})
|
|
55
|
+
|
|
56
|
+
return node
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
// Auto-swapping reactive array of nodes
|
|
60
|
+
const reactiveArrayChildToNodes = child => {
|
|
61
|
+
// Markers owned by the swapper here itself, so that
|
|
62
|
+
// the values in the array can be swapped separately
|
|
63
|
+
const first = document.createComment("[")
|
|
64
|
+
const last = document.createComment("]")
|
|
65
|
+
|
|
66
|
+
const stopReacting = child.addReaction(() => {
|
|
67
|
+
// Stop swapping if there is no parent to swap within
|
|
68
|
+
if (!first.parentNode) {
|
|
69
|
+
stopReacting()
|
|
70
|
+
return
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
// Make a range starting after the first marker
|
|
74
|
+
const range = document.createRange()
|
|
75
|
+
range.setStartAfter(first)
|
|
76
|
+
|
|
77
|
+
// Normal swap, replacing content between the first and last markers
|
|
78
|
+
if (Array.isArray(child.value)) {
|
|
79
|
+
range.setEndBefore(last)
|
|
80
|
+
range.deleteContents()
|
|
81
|
+
first.after(...bruhChildrenToNodes(child.value))
|
|
82
|
+
}
|
|
83
|
+
// Switch to single swapping node by replacing everything
|
|
84
|
+
else {
|
|
85
|
+
stopReacting()
|
|
86
|
+
range.setEndAfter(last)
|
|
87
|
+
range.deleteContents()
|
|
88
|
+
first.replaceWith(reactiveChildToNode(child))
|
|
89
|
+
}
|
|
90
|
+
})
|
|
91
|
+
|
|
92
|
+
return [
|
|
93
|
+
first,
|
|
94
|
+
...bruhChildrenToNodes(child.value),
|
|
95
|
+
last
|
|
96
|
+
]
|
|
97
|
+
}
|
|
98
|
+
|
|
33
99
|
// Processes bruh children into an array of DOM nodes
|
|
34
100
|
// Reactive values are automatically replaced, so the output must be placed into a parent node
|
|
35
101
|
// before any top level (after flattening arrays) reactions run
|
|
36
|
-
export const bruhChildrenToNodes =
|
|
102
|
+
export const bruhChildrenToNodes = children =>
|
|
37
103
|
children
|
|
38
104
|
.flat(Infinity)
|
|
39
105
|
.flatMap(child => {
|
|
40
|
-
// Non-reactive
|
|
106
|
+
// Non-reactive child
|
|
41
107
|
if (!child?.[isReactive])
|
|
42
|
-
return [
|
|
43
|
-
|
|
44
|
-
//
|
|
45
|
-
if (Array.isArray(child.value))
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
return [liveFragment.startMarker, ...bruhChildrenToNodes(...child.value), liveFragment.endMarker]
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
// Reactive values become auto-swapped DOM nodes
|
|
54
|
-
let node = toNode(child.value)
|
|
55
|
-
child.addReaction(() => {
|
|
56
|
-
const oldNode = node
|
|
57
|
-
node = toNode(child.value)
|
|
58
|
-
oldNode.replaceWith(node)
|
|
59
|
-
})
|
|
60
|
-
return [node]
|
|
108
|
+
return [unreactiveChildToNode(child)]
|
|
109
|
+
|
|
110
|
+
// Single reactive value
|
|
111
|
+
if (!Array.isArray(child.value))
|
|
112
|
+
return [reactiveChildToNode(child)]
|
|
113
|
+
|
|
114
|
+
// Reactive array
|
|
115
|
+
return reactiveArrayChildToNodes(child)
|
|
61
116
|
})
|
|
62
117
|
|
|
63
118
|
//#endregion
|
|
@@ -117,10 +172,13 @@ export const t = textContent => {
|
|
|
117
172
|
|
|
118
173
|
// Elements
|
|
119
174
|
export const e = name => (...variadic) => {
|
|
175
|
+
if (variadic.length === 0)
|
|
176
|
+
return document.createElement(name)
|
|
177
|
+
|
|
120
178
|
// If there are no props
|
|
121
179
|
if (isBruhChild(variadic[0])) {
|
|
122
180
|
const element = document.createElement(name)
|
|
123
|
-
element.append(...bruhChildrenToNodes(
|
|
181
|
+
element.append(...bruhChildrenToNodes(variadic))
|
|
124
182
|
return element
|
|
125
183
|
}
|
|
126
184
|
|
|
@@ -161,7 +219,7 @@ export const e = name => (...variadic) => {
|
|
|
161
219
|
applyAttributes(element, props)
|
|
162
220
|
|
|
163
221
|
// Add the children to the element
|
|
164
|
-
element.append(...bruhChildrenToNodes(
|
|
222
|
+
element.append(...bruhChildrenToNodes(children))
|
|
165
223
|
return element
|
|
166
224
|
}
|
|
167
225
|
|
|
@@ -221,6 +221,9 @@ export const t = textContent =>
|
|
|
221
221
|
export const e = name => (...variadic) => {
|
|
222
222
|
const element = new MetaElement(name)
|
|
223
223
|
|
|
224
|
+
if (variadic.length === 0)
|
|
225
|
+
return element
|
|
226
|
+
|
|
224
227
|
// If there are no props
|
|
225
228
|
if (isMetaChild(variadic[0])) {
|
|
226
229
|
element.children.push(...variadic)
|
|
File without changes
|
package/src/util/index.mjs
CHANGED
|
@@ -4,6 +4,7 @@ export const pipe = (x, ...fs) =>
|
|
|
4
4
|
|
|
5
5
|
// Dispatch a custom event to (capturing) and from (bubbling) a target (usually a DOM node)
|
|
6
6
|
// Returns false if the event was cancelled (preventDefault()) and true otherwise
|
|
7
|
+
// Note that this is synchronous
|
|
7
8
|
export const dispatch = (target, type, options) =>
|
|
8
9
|
target.dispatchEvent(
|
|
9
10
|
// Default to behave like most DOM events
|
package/vite.config.mjs
CHANGED
package/dist/bruh.es.js
DELETED
|
@@ -1,376 +0,0 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __defProps = Object.defineProperties;
|
|
3
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
-
var __spreadValues = (a, b) => {
|
|
9
|
-
for (var prop in b || (b = {}))
|
|
10
|
-
if (__hasOwnProp.call(b, prop))
|
|
11
|
-
__defNormalProp(a, prop, b[prop]);
|
|
12
|
-
if (__getOwnPropSymbols)
|
|
13
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
-
if (__propIsEnum.call(b, prop))
|
|
15
|
-
__defNormalProp(a, prop, b[prop]);
|
|
16
|
-
}
|
|
17
|
-
return a;
|
|
18
|
-
};
|
|
19
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
-
var __publicField = (obj, key, value) => {
|
|
21
|
-
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
22
|
-
return value;
|
|
23
|
-
};
|
|
24
|
-
var __accessCheck = (obj, member, msg) => {
|
|
25
|
-
if (!member.has(obj))
|
|
26
|
-
throw TypeError("Cannot " + msg);
|
|
27
|
-
};
|
|
28
|
-
var __privateGet = (obj, member, getter) => {
|
|
29
|
-
__accessCheck(obj, member, "read from private field");
|
|
30
|
-
return getter ? getter.call(obj) : member.get(obj);
|
|
31
|
-
};
|
|
32
|
-
var __privateAdd = (obj, member, value) => {
|
|
33
|
-
if (member.has(obj))
|
|
34
|
-
throw TypeError("Cannot add the same private member more than once");
|
|
35
|
-
member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
|
|
36
|
-
};
|
|
37
|
-
var __privateSet = (obj, member, value, setter) => {
|
|
38
|
-
__accessCheck(obj, member, "write to private field");
|
|
39
|
-
setter ? setter.call(obj, value) : member.set(obj, value);
|
|
40
|
-
return value;
|
|
41
|
-
};
|
|
42
|
-
var __privateMethod = (obj, member, method) => {
|
|
43
|
-
__accessCheck(obj, member, "access private method");
|
|
44
|
-
return method;
|
|
45
|
-
};
|
|
46
|
-
var _a, _value, _reactions, _b, _value2, _reactions2, _f, _depth, _derivatives, _settersQueue, _derivativesQueue, _reactionsQueue, _applyUpdate, applyUpdate_fn;
|
|
47
|
-
class LiveFragment {
|
|
48
|
-
constructor() {
|
|
49
|
-
__publicField(this, "startMarker", document.createTextNode(""));
|
|
50
|
-
__publicField(this, "endMarker", document.createTextNode(""));
|
|
51
|
-
}
|
|
52
|
-
static from(firstNode, lastNode) {
|
|
53
|
-
const liveFragment2 = new this();
|
|
54
|
-
firstNode.before(liveFragment2.startMarker);
|
|
55
|
-
lastNode.after(liveFragment2.endMarker);
|
|
56
|
-
return liveFragment2;
|
|
57
|
-
}
|
|
58
|
-
before(...xs) {
|
|
59
|
-
this.startMarker.before(...xs);
|
|
60
|
-
}
|
|
61
|
-
prepend(...xs) {
|
|
62
|
-
this.startMarker.after(...xs);
|
|
63
|
-
}
|
|
64
|
-
append(...xs) {
|
|
65
|
-
this.endMarker.before(...xs);
|
|
66
|
-
}
|
|
67
|
-
after(...xs) {
|
|
68
|
-
this.endMarker.after(...xs);
|
|
69
|
-
}
|
|
70
|
-
remove() {
|
|
71
|
-
const range = document.createRange();
|
|
72
|
-
range.setStartBefore(this.startMarker);
|
|
73
|
-
range.setEndAfter(this.endMarker);
|
|
74
|
-
range.deleteContents();
|
|
75
|
-
}
|
|
76
|
-
replaceChildren(...xs) {
|
|
77
|
-
const range = document.createRange();
|
|
78
|
-
range.setStartAfter(this.startMarker);
|
|
79
|
-
range.setEndBefore(this.endMarker);
|
|
80
|
-
range.deleteContents();
|
|
81
|
-
this.startMarker.after(...xs);
|
|
82
|
-
}
|
|
83
|
-
replaceWith(...xs) {
|
|
84
|
-
this.endMarker.after(...xs);
|
|
85
|
-
this.remove();
|
|
86
|
-
}
|
|
87
|
-
get childNodes() {
|
|
88
|
-
const childNodes = [];
|
|
89
|
-
for (let currentNode = this.startMarker.nextSibling; currentNode != this.endMarker && currentNode; currentNode = currentNode.nextSibling)
|
|
90
|
-
childNodes.push(currentNode);
|
|
91
|
-
return childNodes;
|
|
92
|
-
}
|
|
93
|
-
get children() {
|
|
94
|
-
return this.childNodes.filter((node) => node instanceof HTMLElement);
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
var liveFragment = /* @__PURE__ */ Object.freeze({
|
|
98
|
-
__proto__: null,
|
|
99
|
-
[Symbol.toStringTag]: "Module",
|
|
100
|
-
LiveFragment
|
|
101
|
-
});
|
|
102
|
-
const isReactive = Symbol.for("bruh reactive");
|
|
103
|
-
class SimpleReactive {
|
|
104
|
-
constructor(value) {
|
|
105
|
-
__publicField(this, _a, true);
|
|
106
|
-
__privateAdd(this, _value, void 0);
|
|
107
|
-
__privateAdd(this, _reactions, new Set());
|
|
108
|
-
__privateSet(this, _value, value);
|
|
109
|
-
}
|
|
110
|
-
get value() {
|
|
111
|
-
return __privateGet(this, _value);
|
|
112
|
-
}
|
|
113
|
-
set value(newValue) {
|
|
114
|
-
if (newValue === __privateGet(this, _value))
|
|
115
|
-
return;
|
|
116
|
-
__privateSet(this, _value, newValue);
|
|
117
|
-
for (const reaction of __privateGet(this, _reactions))
|
|
118
|
-
reaction();
|
|
119
|
-
}
|
|
120
|
-
addReaction(reaction) {
|
|
121
|
-
__privateGet(this, _reactions).add(reaction);
|
|
122
|
-
return () => __privateGet(this, _reactions).delete(reaction);
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
_a = isReactive;
|
|
126
|
-
_value = new WeakMap();
|
|
127
|
-
_reactions = new WeakMap();
|
|
128
|
-
const _FunctionalReactive = class {
|
|
129
|
-
constructor(x, f) {
|
|
130
|
-
__privateAdd(this, _applyUpdate);
|
|
131
|
-
__publicField(this, _b, true);
|
|
132
|
-
__privateAdd(this, _value2, void 0);
|
|
133
|
-
__privateAdd(this, _reactions2, new Set());
|
|
134
|
-
__privateAdd(this, _f, void 0);
|
|
135
|
-
__privateAdd(this, _depth, 0);
|
|
136
|
-
__privateAdd(this, _derivatives, new Set());
|
|
137
|
-
if (!f) {
|
|
138
|
-
__privateSet(this, _value2, x);
|
|
139
|
-
return;
|
|
140
|
-
}
|
|
141
|
-
__privateSet(this, _value2, f());
|
|
142
|
-
__privateSet(this, _f, f);
|
|
143
|
-
__privateSet(this, _depth, Math.max(...x.map((d) => __privateGet(d, _depth))) + 1);
|
|
144
|
-
x.forEach((d) => __privateGet(d, _derivatives).add(this));
|
|
145
|
-
}
|
|
146
|
-
get value() {
|
|
147
|
-
if (__privateGet(_FunctionalReactive, _settersQueue).size) {
|
|
148
|
-
if (__privateGet(this, _depth) !== 0)
|
|
149
|
-
_FunctionalReactive.applyUpdates();
|
|
150
|
-
else if (__privateGet(_FunctionalReactive, _settersQueue).has(this))
|
|
151
|
-
return __privateGet(_FunctionalReactive, _settersQueue).get(this);
|
|
152
|
-
}
|
|
153
|
-
return __privateGet(this, _value2);
|
|
154
|
-
}
|
|
155
|
-
set value(newValue) {
|
|
156
|
-
if (__privateGet(this, _depth) !== 0)
|
|
157
|
-
return;
|
|
158
|
-
if (!__privateGet(_FunctionalReactive, _settersQueue).size)
|
|
159
|
-
queueMicrotask(_FunctionalReactive.applyUpdates);
|
|
160
|
-
__privateGet(_FunctionalReactive, _settersQueue).set(this, newValue);
|
|
161
|
-
}
|
|
162
|
-
addReaction(reaction) {
|
|
163
|
-
__privateGet(this, _reactions2).add(reaction);
|
|
164
|
-
return () => __privateGet(this, _reactions2).delete(reaction);
|
|
165
|
-
}
|
|
166
|
-
static applyUpdates() {
|
|
167
|
-
var _a2, _b2, _c;
|
|
168
|
-
if (!__privateGet(_FunctionalReactive, _settersQueue).size)
|
|
169
|
-
return;
|
|
170
|
-
for (const [sourceNode, newValue] of __privateGet(_FunctionalReactive, _settersQueue).entries())
|
|
171
|
-
__privateMethod(_a2 = sourceNode, _applyUpdate, applyUpdate_fn).call(_a2, newValue);
|
|
172
|
-
__privateGet(_FunctionalReactive, _settersQueue).clear();
|
|
173
|
-
for (const depthSet of __privateGet(_FunctionalReactive, _derivativesQueue))
|
|
174
|
-
if (depthSet)
|
|
175
|
-
for (const derivative of depthSet)
|
|
176
|
-
__privateMethod(_c = derivative, _applyUpdate, applyUpdate_fn).call(_c, __privateGet(_b2 = derivative, _f).call(_b2));
|
|
177
|
-
__privateGet(_FunctionalReactive, _derivativesQueue).length = 0;
|
|
178
|
-
for (const reaction of __privateGet(_FunctionalReactive, _reactionsQueue))
|
|
179
|
-
reaction();
|
|
180
|
-
__privateGet(_FunctionalReactive, _reactionsQueue).length = 0;
|
|
181
|
-
}
|
|
182
|
-
};
|
|
183
|
-
let FunctionalReactive = _FunctionalReactive;
|
|
184
|
-
_b = isReactive;
|
|
185
|
-
_value2 = new WeakMap();
|
|
186
|
-
_reactions2 = new WeakMap();
|
|
187
|
-
_f = new WeakMap();
|
|
188
|
-
_depth = new WeakMap();
|
|
189
|
-
_derivatives = new WeakMap();
|
|
190
|
-
_settersQueue = new WeakMap();
|
|
191
|
-
_derivativesQueue = new WeakMap();
|
|
192
|
-
_reactionsQueue = new WeakMap();
|
|
193
|
-
_applyUpdate = new WeakSet();
|
|
194
|
-
applyUpdate_fn = function(newValue) {
|
|
195
|
-
if (newValue === __privateGet(this, _value2))
|
|
196
|
-
return;
|
|
197
|
-
__privateSet(this, _value2, newValue);
|
|
198
|
-
__privateGet(_FunctionalReactive, _reactionsQueue).push(...__privateGet(this, _reactions2));
|
|
199
|
-
const queue = __privateGet(_FunctionalReactive, _derivativesQueue);
|
|
200
|
-
for (const derivative of __privateGet(this, _derivatives)) {
|
|
201
|
-
const depth = __privateGet(derivative, _depth);
|
|
202
|
-
if (!queue[depth])
|
|
203
|
-
queue[depth] = new Set();
|
|
204
|
-
queue[depth].add(derivative);
|
|
205
|
-
}
|
|
206
|
-
};
|
|
207
|
-
__privateAdd(FunctionalReactive, _settersQueue, new Map());
|
|
208
|
-
__privateAdd(FunctionalReactive, _derivativesQueue, []);
|
|
209
|
-
__privateAdd(FunctionalReactive, _reactionsQueue, []);
|
|
210
|
-
const r = (x, f) => new FunctionalReactive(x, f);
|
|
211
|
-
const reactiveDo = (x, f) => {
|
|
212
|
-
if (x == null ? void 0 : x[isReactive]) {
|
|
213
|
-
f(x.value);
|
|
214
|
-
return x.addReaction(() => f(x.value));
|
|
215
|
-
}
|
|
216
|
-
f(x);
|
|
217
|
-
};
|
|
218
|
-
var index$1 = /* @__PURE__ */ Object.freeze({
|
|
219
|
-
__proto__: null,
|
|
220
|
-
[Symbol.toStringTag]: "Module",
|
|
221
|
-
isReactive,
|
|
222
|
-
SimpleReactive,
|
|
223
|
-
FunctionalReactive,
|
|
224
|
-
r,
|
|
225
|
-
reactiveDo
|
|
226
|
-
});
|
|
227
|
-
const isBruhChild = (x) => (x == null ? void 0 : x[isReactive]) || x instanceof Node || Array.isArray(x) || x == null || !(typeof x === "function" || typeof x === "object");
|
|
228
|
-
const toNode = (x) => {
|
|
229
|
-
if (x instanceof Node)
|
|
230
|
-
return x;
|
|
231
|
-
else if (typeof x === "boolean" || x === void 0 || x === null)
|
|
232
|
-
return document.createComment(x);
|
|
233
|
-
else
|
|
234
|
-
return document.createTextNode(x);
|
|
235
|
-
};
|
|
236
|
-
const bruhChildrenToNodes = (...children) => children.flat(Infinity).flatMap((child) => {
|
|
237
|
-
if (!(child == null ? void 0 : child[isReactive]))
|
|
238
|
-
return [toNode(child)];
|
|
239
|
-
if (Array.isArray(child.value)) {
|
|
240
|
-
const liveFragment2 = new LiveFragment();
|
|
241
|
-
child.addReaction(() => {
|
|
242
|
-
liveFragment2.replaceChildren(...bruhChildrenToNodes(...child.value));
|
|
243
|
-
});
|
|
244
|
-
return [liveFragment2.startMarker, ...bruhChildrenToNodes(...child.value), liveFragment2.endMarker];
|
|
245
|
-
}
|
|
246
|
-
let node = toNode(child.value);
|
|
247
|
-
child.addReaction(() => {
|
|
248
|
-
const oldNode = node;
|
|
249
|
-
node = toNode(child.value);
|
|
250
|
-
oldNode.replaceWith(node);
|
|
251
|
-
});
|
|
252
|
-
return [node];
|
|
253
|
-
});
|
|
254
|
-
const applyStyles = (element, styles) => {
|
|
255
|
-
for (const property in styles)
|
|
256
|
-
reactiveDo(styles[property], (value) => {
|
|
257
|
-
if (value !== void 0)
|
|
258
|
-
element.style.setProperty(property, value);
|
|
259
|
-
else
|
|
260
|
-
element.style.removeProperty(property);
|
|
261
|
-
});
|
|
262
|
-
};
|
|
263
|
-
const applyClasses = (element, classes) => {
|
|
264
|
-
for (const name in classes)
|
|
265
|
-
reactiveDo(classes[name], (value) => {
|
|
266
|
-
element.classList.toggle(name, value);
|
|
267
|
-
});
|
|
268
|
-
};
|
|
269
|
-
const applyAttributes = (element, attributes) => {
|
|
270
|
-
for (const name in attributes)
|
|
271
|
-
reactiveDo(attributes[name], (value) => {
|
|
272
|
-
if (value !== void 0)
|
|
273
|
-
element.setAttribute(name, value);
|
|
274
|
-
else
|
|
275
|
-
element.removeAttribute(name);
|
|
276
|
-
});
|
|
277
|
-
};
|
|
278
|
-
const t = (textContent) => {
|
|
279
|
-
if (!textContent[isReactive])
|
|
280
|
-
return document.createTextNode(textContent);
|
|
281
|
-
const node = document.createTextNode(textContent.value);
|
|
282
|
-
textContent.addReaction(() => {
|
|
283
|
-
node.textContent = textContent.value;
|
|
284
|
-
});
|
|
285
|
-
return node;
|
|
286
|
-
};
|
|
287
|
-
const e = (name) => (...variadic) => {
|
|
288
|
-
var _a2;
|
|
289
|
-
if (isBruhChild(variadic[0])) {
|
|
290
|
-
const element2 = document.createElement(name);
|
|
291
|
-
element2.append(...bruhChildrenToNodes(...variadic));
|
|
292
|
-
return element2;
|
|
293
|
-
}
|
|
294
|
-
const [props, ...children] = variadic;
|
|
295
|
-
const { namespace } = (_a2 = props.bruh) != null ? _a2 : {};
|
|
296
|
-
delete props.bruh;
|
|
297
|
-
const element = namespace ? document.createElementNS(namespace, name) : document.createElement(name);
|
|
298
|
-
if (typeof props.style === "object" && !props.style[isReactive]) {
|
|
299
|
-
applyStyles(element, props.style);
|
|
300
|
-
delete props.style;
|
|
301
|
-
}
|
|
302
|
-
if (typeof props.class === "object" && !props.class[isReactive]) {
|
|
303
|
-
applyClasses(element, props.class);
|
|
304
|
-
delete props.class;
|
|
305
|
-
}
|
|
306
|
-
for (const name2 in props) {
|
|
307
|
-
if (name2.startsWith("on") && typeof props[name2] === "function") {
|
|
308
|
-
element.addEventListener(name2.slice(2), props[name2]);
|
|
309
|
-
delete props[name2];
|
|
310
|
-
}
|
|
311
|
-
}
|
|
312
|
-
applyAttributes(element, props);
|
|
313
|
-
element.append(...bruhChildrenToNodes(...children));
|
|
314
|
-
return element;
|
|
315
|
-
};
|
|
316
|
-
const h = (nameOrComponent, props, ...children) => {
|
|
317
|
-
if (typeof nameOrComponent === "string") {
|
|
318
|
-
const makeElement = e(nameOrComponent);
|
|
319
|
-
return props ? makeElement(props, ...children) : makeElement(...children);
|
|
320
|
-
}
|
|
321
|
-
return nameOrComponent(__spreadProps(__spreadValues({}, props), { children }));
|
|
322
|
-
};
|
|
323
|
-
const JSXFragment = ({ children }) => children;
|
|
324
|
-
const hydrateTextNodes = () => {
|
|
325
|
-
const tagged = {};
|
|
326
|
-
const bruhTextNodes = document.getElementsByTagName("bruh-textnode");
|
|
327
|
-
for (const bruhTextNode of bruhTextNodes) {
|
|
328
|
-
const textNode = document.createTextNode(bruhTextNode.textContent);
|
|
329
|
-
const tag = bruhTextNode.getAttribute("tag");
|
|
330
|
-
if (tag)
|
|
331
|
-
tagged[tag] = textNode;
|
|
332
|
-
bruhTextNode.replaceWith(textNode);
|
|
333
|
-
}
|
|
334
|
-
return tagged;
|
|
335
|
-
};
|
|
336
|
-
var index_browser = /* @__PURE__ */ Object.freeze({
|
|
337
|
-
__proto__: null,
|
|
338
|
-
[Symbol.toStringTag]: "Module",
|
|
339
|
-
bruhChildrenToNodes,
|
|
340
|
-
applyStyles,
|
|
341
|
-
applyClasses,
|
|
342
|
-
applyAttributes,
|
|
343
|
-
t,
|
|
344
|
-
e,
|
|
345
|
-
h,
|
|
346
|
-
JSXFragment,
|
|
347
|
-
hydrateTextNodes
|
|
348
|
-
});
|
|
349
|
-
const pipe = (x, ...fs) => fs.reduce((y, f) => f(y), x);
|
|
350
|
-
const dispatch = (target, type, options) => target.dispatchEvent(new CustomEvent(type, __spreadValues({
|
|
351
|
-
bubbles: true,
|
|
352
|
-
cancelable: true,
|
|
353
|
-
composed: true
|
|
354
|
-
}, options)));
|
|
355
|
-
const createDestructable = (object, iterable) => {
|
|
356
|
-
const destructable = __spreadProps(__spreadValues({}, object), {
|
|
357
|
-
[Symbol.iterator]: () => iterable[Symbol.iterator]()
|
|
358
|
-
});
|
|
359
|
-
Object.defineProperty(destructable, Symbol.iterator, {
|
|
360
|
-
enumerable: false
|
|
361
|
-
});
|
|
362
|
-
return destructable;
|
|
363
|
-
};
|
|
364
|
-
const functionAsObject = (f) => new Proxy({}, {
|
|
365
|
-
get: (_, property) => f(property)
|
|
366
|
-
});
|
|
367
|
-
var index = /* @__PURE__ */ Object.freeze({
|
|
368
|
-
__proto__: null,
|
|
369
|
-
[Symbol.toStringTag]: "Module",
|
|
370
|
-
pipe,
|
|
371
|
-
dispatch,
|
|
372
|
-
createDestructable,
|
|
373
|
-
functionAsObject
|
|
374
|
-
});
|
|
375
|
-
export { index_browser as dom, liveFragment, index$1 as reactive, index as util };
|
|
376
|
-
//# sourceMappingURL=bruh.es.js.map
|
package/dist/bruh.es.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"bruh.es.js","sources":["../src/dom/live-fragment.mjs","../src/reactive/index.mjs","../src/dom/index.browser.mjs","../src/util/index.mjs"],"sourcesContent":["// Lightweight and performant DOM fragment that keeps its place,\n// useful for grouping siblings without making a parent element.\n// Not a true analog of the DocumentFragment, because the implementation\n// would be infeasible with that scope, adding a performance penalty as well.\n// Works as long as the start & end placeholders are siblings in that order\n// and they do not overlap other LiveFragment's:\n// Works: (start A)(start B)(end B)(end A)\n// Fails: (start A)(start B)(end A)(end B)\n// Also, make sure not to call .normalize() on the parent element,\n// because that would ruin the placeholders.\nexport class LiveFragment {\n startMarker = document.createTextNode(\"\")\n endMarker = document.createTextNode(\"\")\n\n static from(firstNode, lastNode) {\n const liveFragment = new this()\n firstNode.before(liveFragment.startMarker)\n lastNode.after(liveFragment.endMarker)\n return liveFragment\n }\n\n before(...xs) {\n this.startMarker.before(...xs)\n }\n\n prepend(...xs) {\n this.startMarker.after(...xs)\n }\n\n append(...xs) {\n this.endMarker.before(...xs)\n }\n\n after(...xs) {\n this.endMarker.after(...xs)\n }\n\n remove() {\n const range = document.createRange()\n range.setStartBefore(this.startMarker)\n range.setEndAfter(this.endMarker)\n range.deleteContents()\n }\n\n replaceChildren(...xs) {\n const range = document.createRange()\n range.setStartAfter(this.startMarker)\n range.setEndBefore(this.endMarker)\n range.deleteContents()\n this.startMarker.after(...xs)\n }\n\n replaceWith(...xs) {\n this.endMarker.after(...xs)\n this.remove()\n }\n\n get childNodes() {\n const childNodes = []\n\n for (\n let currentNode = this.startMarker.nextSibling;\n currentNode != this.endMarker && currentNode;\n currentNode = currentNode.nextSibling\n )\n childNodes.push(currentNode)\n\n return childNodes\n }\n\n get children() {\n return this.childNodes\n .filter(node => node instanceof HTMLElement)\n }\n}\n","export const isReactive = Symbol.for(\"bruh reactive\")\n\n// A super simple and performant reactive value implementation\nexport class SimpleReactive {\n [isReactive] = true\n\n #value\n #reactions = new Set()\n\n constructor(value) {\n this.#value = value\n }\n\n get value() {\n return this.#value\n }\n\n set value(newValue) {\n if (newValue === this.#value)\n return\n\n this.#value = newValue\n for (const reaction of this.#reactions)\n reaction()\n }\n\n addReaction(reaction) {\n this.#reactions.add(reaction)\n\n return () =>\n this.#reactions.delete(reaction)\n }\n}\n\n// A reactive implementation for building functional reactive graphs\n// Ensures state consistency, minimal node updates, and transparent update batching\nexport class FunctionalReactive {\n [isReactive] = true\n\n #value\n #reactions = new Set()\n\n // For derived nodes, f is the derivation function\n #f\n // Source nodes are 0 deep in the derivation graph\n // This is for topological sort\n #depth = 0\n // All nodes have a set of derivatives that update when the node changes\n #derivatives = new Set()\n\n // Keep track of all the pending changes from the value setter\n static #settersQueue = new Map()\n // A queue of derivatives to potentially update, sorted into sets by depth\n // This starts with depth 1 and can potentially have holes\n static #derivativesQueue = []\n // A queue of reactions to run after the graph is fully updated\n static #reactionsQueue = []\n\n constructor(x, f) {\n if (!f) {\n this.#value = x\n return\n }\n\n this.#value = f()\n this.#f = f\n this.#depth = Math.max(...x.map(d => d.#depth)) + 1\n\n x.forEach(d => d.#derivatives.add(this))\n }\n\n get value() {\n // If there are any pending updates\n if (FunctionalReactive.#settersQueue.size) {\n // Heuristic quick invalidation for derived nodes\n // Apply updates now, it's ok that there's already a microtask queued for this\n if (this.#depth !== 0)\n FunctionalReactive.applyUpdates()\n // If this is a source node that was updated, just return that\n // new value without actually updating any derived nodes yet\n else if (FunctionalReactive.#settersQueue.has(this))\n return FunctionalReactive.#settersQueue.get(this)\n }\n\n return this.#value\n }\n\n set value(newValue) {\n // Only allow source nodes to be directly updated\n if (this.#depth !== 0)\n return\n\n // Unless asked for earlier, these updates are just queued up until the microtasks run\n if (!FunctionalReactive.#settersQueue.size)\n queueMicrotask(FunctionalReactive.applyUpdates)\n\n FunctionalReactive.#settersQueue.set(this, newValue)\n }\n\n addReaction(reaction) {\n this.#reactions.add(reaction)\n\n return () =>\n this.#reactions.delete(reaction)\n }\n\n // Apply an update for a node and queue its derivatives if it actually changed\n #applyUpdate(newValue) {\n if (newValue === this.#value)\n return\n\n this.#value = newValue\n FunctionalReactive.#reactionsQueue.push(...this.#reactions)\n\n const queue = FunctionalReactive.#derivativesQueue\n for (const derivative of this.#derivatives) {\n const depth = derivative.#depth\n if (!queue[depth])\n queue[depth] = new Set()\n\n queue[depth].add(derivative)\n }\n }\n\n // Apply pending updates from actually changed source nodes\n static applyUpdates() {\n if (!FunctionalReactive.#settersQueue.size)\n return\n\n // Bootstrap by applying the updates from the pending setters\n for (const [sourceNode, newValue] of FunctionalReactive.#settersQueue.entries())\n sourceNode.#applyUpdate(newValue)\n FunctionalReactive.#settersQueue.clear()\n\n // Iterate down the depths, ignoring holes\n // Note that both the queue (Array) and each depth Set iterators update as items are added\n for (const depthSet of FunctionalReactive.#derivativesQueue) if (depthSet)\n for (const derivative of depthSet)\n derivative.#applyUpdate(derivative.#f())\n FunctionalReactive.#derivativesQueue.length = 0\n\n // Call all reactions now that the graph has a fully consistent state\n for (const reaction of FunctionalReactive.#reactionsQueue)\n reaction()\n FunctionalReactive.#reactionsQueue.length = 0\n }\n}\n\n// A little convenience function\nexport const r = (x, f) => new FunctionalReactive(x, f)\n\n// Do something with a value, updating if it is reactive\nexport const reactiveDo = (x, f) => {\n if (x?.[isReactive]) {\n f(x.value)\n return x.addReaction(() => f(x.value))\n }\n\n f(x)\n}\n","import { LiveFragment } from \"./live-fragment.mjs\"\nimport { isReactive, reactiveDo } from \"../reactive/index.mjs\"\n\n//#region Bruh child functions e.g. bruhChildrenToNodes()\n\n// A basic check for if a value is allowed as a child in bruh\n// It's responsible for quickly checking the type, not deep validation\nconst isBruhChild = x =>\n // Reactives and DOM nodes\n x?.[isReactive] ||\n x instanceof Node ||\n // Any array, just assume it contains valid children\n Array.isArray(x) ||\n // Allow nullish\n x == null ||\n // Disallow functions and objects\n !(typeof x === \"function\" || typeof x === \"object\")\n // Everything else can be a child when stringified\n\n// Coerces input into a DOM node, if it isn't already one\nconst toNode = x => {\n // Existing DOM nodes are untouched\n if (x instanceof Node)\n return x\n // booleans and nullish are ignored\n else if (typeof x === \"boolean\" || x === undefined || x === null)\n return document.createComment(x)\n // Anything else is treated as text\n else\n return document.createTextNode(x)\n}\n\n// Processes bruh children into an array of DOM nodes\n// Reactive values are automatically replaced, so the output must be placed into a parent node\n// before any top level (after flattening arrays) reactions run\nexport const bruhChildrenToNodes = (...children) =>\n children\n .flat(Infinity)\n .flatMap(child => {\n // Non-reactive values are untouched\n if (!child?.[isReactive])\n return [toNode(child)]\n\n // Reactive arrays become live fragments with auto-swapped children\n if (Array.isArray(child.value)) {\n const liveFragment = new LiveFragment()\n child.addReaction(() => {\n liveFragment.replaceChildren(...bruhChildrenToNodes(...child.value))\n })\n return [liveFragment.startMarker, ...bruhChildrenToNodes(...child.value), liveFragment.endMarker]\n }\n\n // Reactive values become auto-swapped DOM nodes\n let node = toNode(child.value)\n child.addReaction(() => {\n const oldNode = node\n node = toNode(child.value)\n oldNode.replaceWith(node)\n })\n return [node]\n })\n\n//#endregion\n\n//#region Reactive-aware element helper functions e.g. applyAttributes()\n\n// Style attribute rules from an object with\n// potentially reactive and/or undefined values\nexport const applyStyles = (element, styles) => {\n for (const property in styles)\n reactiveDo(styles[property], value => {\n if (value !== undefined)\n element.style.setProperty (property, value)\n else\n element.style.removeProperty(property)\n })\n}\n\n// Class list from an object mapping from\n// class names to potentially reactive booleans\nexport const applyClasses = (element, classes) => {\n for (const name in classes)\n reactiveDo(classes[name], value => {\n element.classList.toggle(name, value)\n })\n}\n\n// Attributes from an object with\n// potentially reactive and/or undefined values\nexport const applyAttributes = (element, attributes) => {\n for (const name in attributes)\n reactiveDo(attributes[name], value => {\n if (value !== undefined)\n element.setAttribute (name, value)\n else\n element.removeAttribute(name)\n })\n}\n\n//#endregion\n\n//#region t() for text nodes and e() for element nodes\n\n// Text nodes\nexport const t = textContent => {\n // Non-reactive values are just text nodes\n if (!textContent[isReactive])\n return document.createTextNode(textContent)\n\n // Reactive values auto-update the node's text content\n const node = document.createTextNode(textContent.value)\n textContent.addReaction(() => {\n node.textContent = textContent.value\n })\n return node\n}\n\n// Elements\nexport const e = name => (...variadic) => {\n // If there are no props\n if (isBruhChild(variadic[0])) {\n const element = document.createElement(name)\n element.append(...bruhChildrenToNodes(...variadic))\n return element\n }\n\n // If props exist as the first variadic argument\n const [props, ...children] = variadic\n\n // Extract explicit options from the bruh prop\n const { namespace } = props.bruh ?? {}\n delete props.bruh\n\n // Make an element with optional namespace\n const element =\n namespace\n ? document.createElementNS(namespace, name)\n : document.createElement ( name)\n\n // Apply overloaded props, if possible\n\n // Inline style object\n if (typeof props.style === \"object\" && !props.style[isReactive]) {\n applyStyles(element, props.style)\n delete props.style\n }\n // Classes object\n if (typeof props.class === \"object\" && !props.class[isReactive]) {\n applyClasses(element, props.class)\n delete props.class\n }\n for (const name in props) {\n // Event listener functions\n if (name.startsWith(\"on\") && typeof props[name] === \"function\") {\n element.addEventListener(name.slice(2), props[name])\n delete props[name]\n }\n }\n\n // The rest of the props are attributes\n applyAttributes(element, props)\n\n // Add the children to the element\n element.append(...bruhChildrenToNodes(...children))\n return element\n}\n\n//#endregion\n\n//#region JSX integration\n\n// The function that jsx tags (except fragments) compile to\nexport const h = (nameOrComponent, props, ...children) => {\n // If we are making an element, this is just a wrapper of e()\n // This is likely when the JSX tag name begins with a lowercase character\n if (typeof nameOrComponent === \"string\") {\n const makeElement = e(nameOrComponent)\n return props\n ? makeElement(props, ...children)\n : makeElement(...children)\n }\n\n // It must be a component, then, as bruh components are just functions\n // Due to JSX, this would mean a function with only one parameter - props\n // This object includes the all of the normal props and a \"children\" key\n return nameOrComponent({ ...props, children })\n}\n\n// The JSX fragment is made into a bruh fragment (just an array)\nexport const JSXFragment = ({ children }) => children\n\n//#endregion\n\n\n\n// Hydration of all bruh-textnode's from prerendered html\nexport const hydrateTextNodes = () => {\n const tagged = {}\n const bruhTextNodes = document.getElementsByTagName(\"bruh-textnode\")\n\n for (const bruhTextNode of bruhTextNodes) {\n const textNode = document.createTextNode(bruhTextNode.textContent)\n\n const tag = bruhTextNode.getAttribute(\"tag\")\n if (tag)\n tagged[tag] = textNode\n\n bruhTextNode.replaceWith(textNode)\n }\n\n return tagged\n}\n","// Create a pipeline with an initial value and a series of functions\nexport const pipe = (x, ...fs) =>\n fs.reduce((y, f) => f(y), x)\n\n// Dispatch a custom event to (capturing) and from (bubbling) a target (usually a DOM node)\n// Returns false if the event was cancelled (preventDefault()) and true otherwise\nexport const dispatch = (target, type, options) =>\n target.dispatchEvent(\n // Default to behave like most DOM events\n new CustomEvent(type, {\n bubbles: true,\n cancelable: true,\n composed: true,\n ...options\n })\n )\n\n// Inspired by https://antfu.me/posts/destructuring-with-object-or-array#take-away\n// Creates an object that is both destructable with {...} and [...]\n// Useful for writing library functions à la react-use & vueuse\nexport const createDestructable = (object, iterable) => {\n const destructable = {\n ...object,\n [Symbol.iterator]: () => iterable[Symbol.iterator]()\n }\n\n Object.defineProperty(destructable, Symbol.iterator, {\n enumerable: false\n })\n\n return destructable\n}\n\n// Creates an object (as a Proxy) that acts as a function\n// So functionAsObject(f).property is equivalent to f(\"property\")\n// This is can be useful when combined with destructuring syntax, e.g.:\n// const { html, head, title, body, main, h1, p } = functionAsObject(e)\nexport const functionAsObject = f =>\n new Proxy({}, {\n get: (_, property) => f(property)\n })\n"],"names":[],"mappings":"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"}
|
package/dist/bruh.umd.js
DELETED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
var ne=Object.defineProperty,se=Object.defineProperties;var oe=Object.getOwnPropertyDescriptors;var Q=Object.getOwnPropertySymbols;var ae=Object.prototype.hasOwnProperty,ie=Object.prototype.propertyIsEnumerable;var F=(n,s,i)=>s in n?ne(n,s,{enumerable:!0,configurable:!0,writable:!0,value:i}):n[s]=i,z=(n,s)=>{for(var i in s||(s={}))ae.call(s,i)&&F(n,i,s[i]);if(Q)for(var i of Q(s))ie.call(s,i)&&F(n,i,s[i]);return n},O=(n,s)=>se(n,oe(s));var w=(n,s,i)=>(F(n,typeof s!="symbol"?s+"":s,i),i),L=(n,s,i)=>{if(!s.has(n))throw TypeError("Cannot "+i)};var a=(n,s,i)=>(L(n,s,"read from private field"),i?i.call(n):s.get(n)),l=(n,s,i)=>{if(s.has(n))throw TypeError("Cannot add the same private member more than once");s instanceof WeakSet?s.add(n):s.set(n,i)},y=(n,s,i,u)=>(L(n,s,"write to private field"),u?u.call(n,i):s.set(n,i),i);var P=(n,s,i)=>(L(n,s,"access private method"),i);(function(n,s){typeof exports=="object"&&typeof module!="undefined"?s(exports):typeof define=="function"&&define.amd?define(["exports"],s):(n=typeof globalThis!="undefined"?globalThis:n||self,s(n.bruh={}))})(this,function(n){var ce,v,S,de,h,M,A,m,j,f,N,T,E,q;"use strict";class s{constructor(){w(this,"startMarker",document.createTextNode(""));w(this,"endMarker",document.createTextNode(""))}static from(e,t){const o=new this;return e.before(o.startMarker),t.after(o.endMarker),o}before(...e){this.startMarker.before(...e)}prepend(...e){this.startMarker.after(...e)}append(...e){this.endMarker.before(...e)}after(...e){this.endMarker.after(...e)}remove(){const e=document.createRange();e.setStartBefore(this.startMarker),e.setEndAfter(this.endMarker),e.deleteContents()}replaceChildren(...e){const t=document.createRange();t.setStartAfter(this.startMarker),t.setEndBefore(this.endMarker),t.deleteContents(),this.startMarker.after(...e)}replaceWith(...e){this.endMarker.after(...e),this.remove()}get childNodes(){const e=[];for(let t=this.startMarker.nextSibling;t!=this.endMarker&&t;t=t.nextSibling)e.push(t);return e}get children(){return this.childNodes.filter(e=>e instanceof HTMLElement)}}var i=Object.freeze({__proto__:null,[Symbol.toStringTag]:"Module",LiveFragment:s});const u=Symbol.for("bruh reactive");class J{constructor(e){w(this,ce,!0);l(this,v,void 0);l(this,S,new Set);y(this,v,e)}get value(){return a(this,v)}set value(e){if(e!==a(this,v)){y(this,v,e);for(const t of a(this,S))t()}}addReaction(e){return a(this,S).add(e),()=>a(this,S).delete(e)}}ce=u,v=new WeakMap,S=new WeakMap;const c=class{constructor(e,t){l(this,E);w(this,de,!0);l(this,h,void 0);l(this,M,new Set);l(this,A,void 0);l(this,m,0);l(this,j,new Set);if(!t){y(this,h,e);return}y(this,h,t()),y(this,A,t),y(this,m,Math.max(...e.map(o=>a(o,m)))+1),e.forEach(o=>a(o,j).add(this))}get value(){if(a(c,f).size){if(a(this,m)!==0)c.applyUpdates();else if(a(c,f).has(this))return a(c,f).get(this)}return a(this,h)}set value(e){a(this,m)===0&&(a(c,f).size||queueMicrotask(c.applyUpdates),a(c,f).set(this,e))}addReaction(e){return a(this,M).add(e),()=>a(this,M).delete(e)}static applyUpdates(){var e,t,o;if(!!a(c,f).size){for(const[d,p]of a(c,f).entries())P(e=d,E,q).call(e,p);a(c,f).clear();for(const d of a(c,N))if(d)for(const p of d)P(o=p,E,q).call(o,a(t=p,A).call(t));a(c,N).length=0;for(const d of a(c,T))d();a(c,T).length=0}}};let g=c;de=u,h=new WeakMap,M=new WeakMap,A=new WeakMap,m=new WeakMap,j=new WeakMap,f=new WeakMap,N=new WeakMap,T=new WeakMap,E=new WeakSet,q=function(e){if(e===a(this,h))return;y(this,h,e),a(c,T).push(...a(this,M));const t=a(c,N);for(const o of a(this,j)){const d=a(o,m);t[d]||(t[d]=new Set),t[d].add(o)}},l(g,f,new Map),l(g,N,[]),l(g,T,[]);const X=(r,e)=>new g(r,e),R=(r,e)=>{if(r==null?void 0:r[u])return e(r.value),r.addReaction(()=>e(r.value));e(r)};var H=Object.freeze({__proto__:null,[Symbol.toStringTag]:"Module",isReactive:u,SimpleReactive:J,FunctionalReactive:g,r:X,reactiveDo:R});const I=r=>(r==null?void 0:r[u])||r instanceof Node||Array.isArray(r)||r==null||!(typeof r=="function"||typeof r=="object"),C=r=>r instanceof Node?r:typeof r=="boolean"||r===void 0||r===null?document.createComment(r):document.createTextNode(r),k=(...r)=>r.flat(1/0).flatMap(e=>{if(!(e==null?void 0:e[u]))return[C(e)];if(Array.isArray(e.value)){const o=new s;return e.addReaction(()=>{o.replaceChildren(...k(...e.value))}),[o.startMarker,...k(...e.value),o.endMarker]}let t=C(e.value);return e.addReaction(()=>{const o=t;t=C(e.value),o.replaceWith(t)}),[t]}),B=(r,e)=>{for(const t in e)R(e[t],o=>{o!==void 0?r.style.setProperty(t,o):r.style.removeProperty(t)})},D=(r,e)=>{for(const t in e)R(e[t],o=>{r.classList.toggle(t,o)})},U=(r,e)=>{for(const t in e)R(e[t],o=>{o!==void 0?r.setAttribute(t,o):r.removeAttribute(t)})},$=r=>{if(!r[u])return document.createTextNode(r);const e=document.createTextNode(r.value);return r.addReaction(()=>{e.textContent=r.value}),e},W=r=>(...e)=>{var _;if(I(e[0])){const b=document.createElement(r);return b.append(...k(...e)),b}const[t,...o]=e,{namespace:d}=(_=t.bruh)!=null?_:{};delete t.bruh;const p=d?document.createElementNS(d,r):document.createElement(r);typeof t.style=="object"&&!t.style[u]&&(B(p,t.style),delete t.style),typeof t.class=="object"&&!t.class[u]&&(D(p,t.class),delete t.class);for(const b in t)b.startsWith("on")&&typeof t[b]=="function"&&(p.addEventListener(b.slice(2),t[b]),delete t[b]);return U(p,t),p.append(...k(...o)),p},G=(r,e,...t)=>{if(typeof r=="string"){const o=W(r);return e?o(e,...t):o(...t)}return r(O(z({},e),{children:t}))},K=({children:r})=>r,Y=()=>{const r={},e=document.getElementsByTagName("bruh-textnode");for(const t of e){const o=document.createTextNode(t.textContent),d=t.getAttribute("tag");d&&(r[d]=o),t.replaceWith(o)}return r};var Z=Object.freeze({__proto__:null,[Symbol.toStringTag]:"Module",bruhChildrenToNodes:k,applyStyles:B,applyClasses:D,applyAttributes:U,t:$,e:W,h:G,JSXFragment:K,hydrateTextNodes:Y});const V=(r,...e)=>e.reduce((t,o)=>o(t),r),x=(r,e,t)=>r.dispatchEvent(new CustomEvent(e,z({bubbles:!0,cancelable:!0,composed:!0},t))),ee=(r,e)=>{const t=O(z({},r),{[Symbol.iterator]:()=>e[Symbol.iterator]()});return Object.defineProperty(t,Symbol.iterator,{enumerable:!1}),t},te=r=>new Proxy({},{get:(e,t)=>r(t)});var re=Object.freeze({__proto__:null,[Symbol.toStringTag]:"Module",pipe:V,dispatch:x,createDestructable:ee,functionAsObject:te});n.dom=Z,n.liveFragment=i,n.reactive=H,n.util=re,Object.defineProperty(n,"__esModule",{value:!0}),n[Symbol.toStringTag]="Module"});
|
|
2
|
-
//# sourceMappingURL=bruh.umd.js.map
|
package/dist/bruh.umd.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"bruh.umd.js","sources":["../src/dom/live-fragment.mjs","../src/reactive/index.mjs","../src/dom/index.browser.mjs","../src/util/index.mjs"],"sourcesContent":["// Lightweight and performant DOM fragment that keeps its place,\n// useful for grouping siblings without making a parent element.\n// Not a true analog of the DocumentFragment, because the implementation\n// would be infeasible with that scope, adding a performance penalty as well.\n// Works as long as the start & end placeholders are siblings in that order\n// and they do not overlap other LiveFragment's:\n// Works: (start A)(start B)(end B)(end A)\n// Fails: (start A)(start B)(end A)(end B)\n// Also, make sure not to call .normalize() on the parent element,\n// because that would ruin the placeholders.\nexport class LiveFragment {\n startMarker = document.createTextNode(\"\")\n endMarker = document.createTextNode(\"\")\n\n static from(firstNode, lastNode) {\n const liveFragment = new this()\n firstNode.before(liveFragment.startMarker)\n lastNode.after(liveFragment.endMarker)\n return liveFragment\n }\n\n before(...xs) {\n this.startMarker.before(...xs)\n }\n\n prepend(...xs) {\n this.startMarker.after(...xs)\n }\n\n append(...xs) {\n this.endMarker.before(...xs)\n }\n\n after(...xs) {\n this.endMarker.after(...xs)\n }\n\n remove() {\n const range = document.createRange()\n range.setStartBefore(this.startMarker)\n range.setEndAfter(this.endMarker)\n range.deleteContents()\n }\n\n replaceChildren(...xs) {\n const range = document.createRange()\n range.setStartAfter(this.startMarker)\n range.setEndBefore(this.endMarker)\n range.deleteContents()\n this.startMarker.after(...xs)\n }\n\n replaceWith(...xs) {\n this.endMarker.after(...xs)\n this.remove()\n }\n\n get childNodes() {\n const childNodes = []\n\n for (\n let currentNode = this.startMarker.nextSibling;\n currentNode != this.endMarker && currentNode;\n currentNode = currentNode.nextSibling\n )\n childNodes.push(currentNode)\n\n return childNodes\n }\n\n get children() {\n return this.childNodes\n .filter(node => node instanceof HTMLElement)\n }\n}\n","export const isReactive = Symbol.for(\"bruh reactive\")\n\n// A super simple and performant reactive value implementation\nexport class SimpleReactive {\n [isReactive] = true\n\n #value\n #reactions = new Set()\n\n constructor(value) {\n this.#value = value\n }\n\n get value() {\n return this.#value\n }\n\n set value(newValue) {\n if (newValue === this.#value)\n return\n\n this.#value = newValue\n for (const reaction of this.#reactions)\n reaction()\n }\n\n addReaction(reaction) {\n this.#reactions.add(reaction)\n\n return () =>\n this.#reactions.delete(reaction)\n }\n}\n\n// A reactive implementation for building functional reactive graphs\n// Ensures state consistency, minimal node updates, and transparent update batching\nexport class FunctionalReactive {\n [isReactive] = true\n\n #value\n #reactions = new Set()\n\n // For derived nodes, f is the derivation function\n #f\n // Source nodes are 0 deep in the derivation graph\n // This is for topological sort\n #depth = 0\n // All nodes have a set of derivatives that update when the node changes\n #derivatives = new Set()\n\n // Keep track of all the pending changes from the value setter\n static #settersQueue = new Map()\n // A queue of derivatives to potentially update, sorted into sets by depth\n // This starts with depth 1 and can potentially have holes\n static #derivativesQueue = []\n // A queue of reactions to run after the graph is fully updated\n static #reactionsQueue = []\n\n constructor(x, f) {\n if (!f) {\n this.#value = x\n return\n }\n\n this.#value = f()\n this.#f = f\n this.#depth = Math.max(...x.map(d => d.#depth)) + 1\n\n x.forEach(d => d.#derivatives.add(this))\n }\n\n get value() {\n // If there are any pending updates\n if (FunctionalReactive.#settersQueue.size) {\n // Heuristic quick invalidation for derived nodes\n // Apply updates now, it's ok that there's already a microtask queued for this\n if (this.#depth !== 0)\n FunctionalReactive.applyUpdates()\n // If this is a source node that was updated, just return that\n // new value without actually updating any derived nodes yet\n else if (FunctionalReactive.#settersQueue.has(this))\n return FunctionalReactive.#settersQueue.get(this)\n }\n\n return this.#value\n }\n\n set value(newValue) {\n // Only allow source nodes to be directly updated\n if (this.#depth !== 0)\n return\n\n // Unless asked for earlier, these updates are just queued up until the microtasks run\n if (!FunctionalReactive.#settersQueue.size)\n queueMicrotask(FunctionalReactive.applyUpdates)\n\n FunctionalReactive.#settersQueue.set(this, newValue)\n }\n\n addReaction(reaction) {\n this.#reactions.add(reaction)\n\n return () =>\n this.#reactions.delete(reaction)\n }\n\n // Apply an update for a node and queue its derivatives if it actually changed\n #applyUpdate(newValue) {\n if (newValue === this.#value)\n return\n\n this.#value = newValue\n FunctionalReactive.#reactionsQueue.push(...this.#reactions)\n\n const queue = FunctionalReactive.#derivativesQueue\n for (const derivative of this.#derivatives) {\n const depth = derivative.#depth\n if (!queue[depth])\n queue[depth] = new Set()\n\n queue[depth].add(derivative)\n }\n }\n\n // Apply pending updates from actually changed source nodes\n static applyUpdates() {\n if (!FunctionalReactive.#settersQueue.size)\n return\n\n // Bootstrap by applying the updates from the pending setters\n for (const [sourceNode, newValue] of FunctionalReactive.#settersQueue.entries())\n sourceNode.#applyUpdate(newValue)\n FunctionalReactive.#settersQueue.clear()\n\n // Iterate down the depths, ignoring holes\n // Note that both the queue (Array) and each depth Set iterators update as items are added\n for (const depthSet of FunctionalReactive.#derivativesQueue) if (depthSet)\n for (const derivative of depthSet)\n derivative.#applyUpdate(derivative.#f())\n FunctionalReactive.#derivativesQueue.length = 0\n\n // Call all reactions now that the graph has a fully consistent state\n for (const reaction of FunctionalReactive.#reactionsQueue)\n reaction()\n FunctionalReactive.#reactionsQueue.length = 0\n }\n}\n\n// A little convenience function\nexport const r = (x, f) => new FunctionalReactive(x, f)\n\n// Do something with a value, updating if it is reactive\nexport const reactiveDo = (x, f) => {\n if (x?.[isReactive]) {\n f(x.value)\n return x.addReaction(() => f(x.value))\n }\n\n f(x)\n}\n","import { LiveFragment } from \"./live-fragment.mjs\"\nimport { isReactive, reactiveDo } from \"../reactive/index.mjs\"\n\n//#region Bruh child functions e.g. bruhChildrenToNodes()\n\n// A basic check for if a value is allowed as a child in bruh\n// It's responsible for quickly checking the type, not deep validation\nconst isBruhChild = x =>\n // Reactives and DOM nodes\n x?.[isReactive] ||\n x instanceof Node ||\n // Any array, just assume it contains valid children\n Array.isArray(x) ||\n // Allow nullish\n x == null ||\n // Disallow functions and objects\n !(typeof x === \"function\" || typeof x === \"object\")\n // Everything else can be a child when stringified\n\n// Coerces input into a DOM node, if it isn't already one\nconst toNode = x => {\n // Existing DOM nodes are untouched\n if (x instanceof Node)\n return x\n // booleans and nullish are ignored\n else if (typeof x === \"boolean\" || x === undefined || x === null)\n return document.createComment(x)\n // Anything else is treated as text\n else\n return document.createTextNode(x)\n}\n\n// Processes bruh children into an array of DOM nodes\n// Reactive values are automatically replaced, so the output must be placed into a parent node\n// before any top level (after flattening arrays) reactions run\nexport const bruhChildrenToNodes = (...children) =>\n children\n .flat(Infinity)\n .flatMap(child => {\n // Non-reactive values are untouched\n if (!child?.[isReactive])\n return [toNode(child)]\n\n // Reactive arrays become live fragments with auto-swapped children\n if (Array.isArray(child.value)) {\n const liveFragment = new LiveFragment()\n child.addReaction(() => {\n liveFragment.replaceChildren(...bruhChildrenToNodes(...child.value))\n })\n return [liveFragment.startMarker, ...bruhChildrenToNodes(...child.value), liveFragment.endMarker]\n }\n\n // Reactive values become auto-swapped DOM nodes\n let node = toNode(child.value)\n child.addReaction(() => {\n const oldNode = node\n node = toNode(child.value)\n oldNode.replaceWith(node)\n })\n return [node]\n })\n\n//#endregion\n\n//#region Reactive-aware element helper functions e.g. applyAttributes()\n\n// Style attribute rules from an object with\n// potentially reactive and/or undefined values\nexport const applyStyles = (element, styles) => {\n for (const property in styles)\n reactiveDo(styles[property], value => {\n if (value !== undefined)\n element.style.setProperty (property, value)\n else\n element.style.removeProperty(property)\n })\n}\n\n// Class list from an object mapping from\n// class names to potentially reactive booleans\nexport const applyClasses = (element, classes) => {\n for (const name in classes)\n reactiveDo(classes[name], value => {\n element.classList.toggle(name, value)\n })\n}\n\n// Attributes from an object with\n// potentially reactive and/or undefined values\nexport const applyAttributes = (element, attributes) => {\n for (const name in attributes)\n reactiveDo(attributes[name], value => {\n if (value !== undefined)\n element.setAttribute (name, value)\n else\n element.removeAttribute(name)\n })\n}\n\n//#endregion\n\n//#region t() for text nodes and e() for element nodes\n\n// Text nodes\nexport const t = textContent => {\n // Non-reactive values are just text nodes\n if (!textContent[isReactive])\n return document.createTextNode(textContent)\n\n // Reactive values auto-update the node's text content\n const node = document.createTextNode(textContent.value)\n textContent.addReaction(() => {\n node.textContent = textContent.value\n })\n return node\n}\n\n// Elements\nexport const e = name => (...variadic) => {\n // If there are no props\n if (isBruhChild(variadic[0])) {\n const element = document.createElement(name)\n element.append(...bruhChildrenToNodes(...variadic))\n return element\n }\n\n // If props exist as the first variadic argument\n const [props, ...children] = variadic\n\n // Extract explicit options from the bruh prop\n const { namespace } = props.bruh ?? {}\n delete props.bruh\n\n // Make an element with optional namespace\n const element =\n namespace\n ? document.createElementNS(namespace, name)\n : document.createElement ( name)\n\n // Apply overloaded props, if possible\n\n // Inline style object\n if (typeof props.style === \"object\" && !props.style[isReactive]) {\n applyStyles(element, props.style)\n delete props.style\n }\n // Classes object\n if (typeof props.class === \"object\" && !props.class[isReactive]) {\n applyClasses(element, props.class)\n delete props.class\n }\n for (const name in props) {\n // Event listener functions\n if (name.startsWith(\"on\") && typeof props[name] === \"function\") {\n element.addEventListener(name.slice(2), props[name])\n delete props[name]\n }\n }\n\n // The rest of the props are attributes\n applyAttributes(element, props)\n\n // Add the children to the element\n element.append(...bruhChildrenToNodes(...children))\n return element\n}\n\n//#endregion\n\n//#region JSX integration\n\n// The function that jsx tags (except fragments) compile to\nexport const h = (nameOrComponent, props, ...children) => {\n // If we are making an element, this is just a wrapper of e()\n // This is likely when the JSX tag name begins with a lowercase character\n if (typeof nameOrComponent === \"string\") {\n const makeElement = e(nameOrComponent)\n return props\n ? makeElement(props, ...children)\n : makeElement(...children)\n }\n\n // It must be a component, then, as bruh components are just functions\n // Due to JSX, this would mean a function with only one parameter - props\n // This object includes the all of the normal props and a \"children\" key\n return nameOrComponent({ ...props, children })\n}\n\n// The JSX fragment is made into a bruh fragment (just an array)\nexport const JSXFragment = ({ children }) => children\n\n//#endregion\n\n\n\n// Hydration of all bruh-textnode's from prerendered html\nexport const hydrateTextNodes = () => {\n const tagged = {}\n const bruhTextNodes = document.getElementsByTagName(\"bruh-textnode\")\n\n for (const bruhTextNode of bruhTextNodes) {\n const textNode = document.createTextNode(bruhTextNode.textContent)\n\n const tag = bruhTextNode.getAttribute(\"tag\")\n if (tag)\n tagged[tag] = textNode\n\n bruhTextNode.replaceWith(textNode)\n }\n\n return tagged\n}\n","// Create a pipeline with an initial value and a series of functions\nexport const pipe = (x, ...fs) =>\n fs.reduce((y, f) => f(y), x)\n\n// Dispatch a custom event to (capturing) and from (bubbling) a target (usually a DOM node)\n// Returns false if the event was cancelled (preventDefault()) and true otherwise\nexport const dispatch = (target, type, options) =>\n target.dispatchEvent(\n // Default to behave like most DOM events\n new CustomEvent(type, {\n bubbles: true,\n cancelable: true,\n composed: true,\n ...options\n })\n )\n\n// Inspired by https://antfu.me/posts/destructuring-with-object-or-array#take-away\n// Creates an object that is both destructable with {...} and [...]\n// Useful for writing library functions à la react-use & vueuse\nexport const createDestructable = (object, iterable) => {\n const destructable = {\n ...object,\n [Symbol.iterator]: () => iterable[Symbol.iterator]()\n }\n\n Object.defineProperty(destructable, Symbol.iterator, {\n enumerable: false\n })\n\n return destructable\n}\n\n// Creates an object (as a Proxy) that acts as a function\n// So functionAsObject(f).property is equivalent to f(\"property\")\n// This is can be useful when combined with destructuring syntax, e.g.:\n// const { html, head, title, body, main, h1, p } = functionAsObject(e)\nexport const functionAsObject = f =>\n new Proxy({}, {\n get: (_, property) => f(property)\n })\n"],"names":[],"mappings":"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"}
|
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
// Lightweight and performant DOM fragment that keeps its place,
|
|
2
|
-
// useful for grouping siblings without making a parent element.
|
|
3
|
-
// Not a true analog of the DocumentFragment, because the implementation
|
|
4
|
-
// would be infeasible with that scope, adding a performance penalty as well.
|
|
5
|
-
// Works as long as the start & end placeholders are siblings in that order
|
|
6
|
-
// and they do not overlap other LiveFragment's:
|
|
7
|
-
// Works: (start A)(start B)(end B)(end A)
|
|
8
|
-
// Fails: (start A)(start B)(end A)(end B)
|
|
9
|
-
// Also, make sure not to call .normalize() on the parent element,
|
|
10
|
-
// because that would ruin the placeholders.
|
|
11
|
-
export class LiveFragment {
|
|
12
|
-
startMarker = document.createTextNode("")
|
|
13
|
-
endMarker = document.createTextNode("")
|
|
14
|
-
|
|
15
|
-
static from(firstNode, lastNode) {
|
|
16
|
-
const liveFragment = new this()
|
|
17
|
-
firstNode.before(liveFragment.startMarker)
|
|
18
|
-
lastNode.after(liveFragment.endMarker)
|
|
19
|
-
return liveFragment
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
before(...xs) {
|
|
23
|
-
this.startMarker.before(...xs)
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
prepend(...xs) {
|
|
27
|
-
this.startMarker.after(...xs)
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
append(...xs) {
|
|
31
|
-
this.endMarker.before(...xs)
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
after(...xs) {
|
|
35
|
-
this.endMarker.after(...xs)
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
remove() {
|
|
39
|
-
const range = document.createRange()
|
|
40
|
-
range.setStartBefore(this.startMarker)
|
|
41
|
-
range.setEndAfter(this.endMarker)
|
|
42
|
-
range.deleteContents()
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
replaceChildren(...xs) {
|
|
46
|
-
const range = document.createRange()
|
|
47
|
-
range.setStartAfter(this.startMarker)
|
|
48
|
-
range.setEndBefore(this.endMarker)
|
|
49
|
-
range.deleteContents()
|
|
50
|
-
this.startMarker.after(...xs)
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
replaceWith(...xs) {
|
|
54
|
-
this.endMarker.after(...xs)
|
|
55
|
-
this.remove()
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
get childNodes() {
|
|
59
|
-
const childNodes = []
|
|
60
|
-
|
|
61
|
-
for (
|
|
62
|
-
let currentNode = this.startMarker.nextSibling;
|
|
63
|
-
currentNode != this.endMarker && currentNode;
|
|
64
|
-
currentNode = currentNode.nextSibling
|
|
65
|
-
)
|
|
66
|
-
childNodes.push(currentNode)
|
|
67
|
-
|
|
68
|
-
return childNodes
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
get children() {
|
|
72
|
-
return this.childNodes
|
|
73
|
-
.filter(node => node instanceof HTMLElement)
|
|
74
|
-
}
|
|
75
|
-
}
|