bruh 1.10.2 → 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/README.md CHANGED
@@ -16,6 +16,12 @@
16
16
  src="https://img.shields.io/npm/v/bruh"
17
17
  >
18
18
  </a>
19
+ <a href="https://www.npmjs.com/package/bruh">
20
+ <img
21
+ alt="Distributed download size for the entire library"
22
+ src="https://img.shields.io/bundlephobia/minzip/bruh"
23
+ >
24
+ </a>
19
25
  <a href="https://github.com/Technical-Source/bruh/discussions">
20
26
  <img
21
27
  alt="Github Discussions"
@@ -29,18 +35,72 @@
29
35
 
30
36
  # What's This?
31
37
 
32
- Bruh is an attempt to make it easier to target modern browser API's in
33
- development directly. There should be as few neccessary indirections as possible
34
- between what is written and what is run. But at the same time, the development
35
- cycle and production outputs should be tailored on an individual project level.
38
+ A js library for the web that places your control on a pedestal.
39
+ It packs flexible SSR (Server-Side HTML Rendering),
40
+ an awesome DOM interface,
41
+ and elegant functional reactivity in a tiny code size.
42
+
43
+ Along with modern build tooling integration ([vite](https://vitejs.dev)), you're one step away from:
44
+ - JSX and MDX (markdown with JSX instead of HTML) for both HTML rendering and DOM element creation
45
+ - Instant HMR (Hot Module Reloading) for both server rendered HTML and client CSS/JS/TS
46
+ - [Everything else vite provides](https://vitejs.dev/guide/features.html) - CSS modules, PostCSS, production builds, nearly 0 config, _&c_.
47
+
48
+ <br>
49
+
50
+ <p>
51
+ It looks like this, which is pretty epic:
36
52
 
37
- This is not a framework. It is a utilities library made exclusively for
38
- developers who know what they are doing - a group which you might fit into.
53
+ <a href="https://codepen.io/pen/?template=dyzRvZY&editors=0010">
54
+ <img
55
+ alt="Open in CodePen"
56
+ align="right"
57
+ src="https://img.shields.io/badge/Open_in_CodePen-blue?logo=codepen"
58
+ >
59
+ </a>
60
+ </p><br>
61
+
62
+ ```jsx
63
+ const Counter = () => {
64
+ // A reactive value
65
+ const count = r(0)
66
+ const increment = () => count.value++
67
+
68
+ // Declarative UI without vdom! (and build tools are completely optional)
69
+ const counter =
70
+ <button class="counter" onclick={ increment }>
71
+ Click to increment: { count }
72
+ </button>
73
+
74
+ return counter
75
+ }
76
+
77
+ // Yes, all of these are vanilla DOM nodes!
78
+ document.body.append(
79
+ <main>
80
+ <h1>Bruh</h1>
81
+ <Counter />
82
+ </main>
83
+ )
84
+ ```
39
85
 
40
86
  # How do I Get It?
41
87
 
42
- `npm install bruh`
88
+ `npm init bruh` and pick [the "vite" template](https://github.com/Technical-Source/bruh/tree/main/packages/create-bruh/vite)
89
+
90
+ <p>
91
+ Think that's too hard? 👉
92
+
93
+ <a href="https://codesandbox.io/s/github/Technical-Source/bruh/tree/main/packages/create-bruh/vite">
94
+ <img
95
+ alt="Open in CodeSandbox"
96
+ valign="middle"
97
+ src="https://img.shields.io/badge/Preview_the_template_in_CodeSandbox-blue?logo=codesandbox"
98
+ >
99
+ </a>
100
+ </p><br>
43
101
 
44
102
  # Where is the documentation?
45
103
 
46
- [Right here](https://technicalsource.dev/bruh)
104
+ [Right here](https://technicalsource.dev/bruh) - but it's not really complete.
105
+ The best way to use this project is to just read the code, it's pretty short.
106
+ If you have any questions, even without reading the code first, feel free to [ask all of them in the discussions](https://github.com/Technical-Source/bruh/discussions).
package/mod.mjs ADDED
@@ -0,0 +1,3 @@
1
+ export * as dom from "./src/dom/index.server.mjs"
2
+ export * as reactive from "./src/reactive/index.mjs"
3
+ export * as util from "./src/util/index.mjs"
package/package.json CHANGED
@@ -10,7 +10,7 @@
10
10
  "library",
11
11
  "modern"
12
12
  ],
13
- "version": "1.10.2",
13
+ "version": "1.13.0",
14
14
  "license": "MIT",
15
15
  "author": {
16
16
  "name": "Daniel Ethridge",
@@ -24,23 +24,22 @@
24
24
  "directory": "packages/bruh"
25
25
  },
26
26
  "type": "module",
27
+ "main": "./dist/bruh.umd.js",
28
+ "sideEffects": false,
27
29
  "exports": {
28
- "./": {
30
+ ".": {
29
31
  "browser": "./dist/bruh.es.js",
30
32
  "default": "./dist/bruh.umd.js"
31
33
  },
32
34
  "./dom": {
33
- "node": "./src/dom/index.node.mjs",
35
+ "node": "./src/dom/index.server.mjs",
34
36
  "browser": "./src/dom/index.browser.mjs"
35
37
  },
36
- "./dom/live-fragment": {
37
- "browser": "./src/dom/live-fragment.mjs"
38
- },
39
38
  "./reactive": "./src/reactive/index.mjs",
40
39
  "./util": "./src/util/index.mjs",
41
40
  "./components/*": "./src/components/*.mjs",
42
41
  "./media/images": {
43
- "node": "./src/media/images.mjs"
42
+ "node": "./src/media/images.node.mjs"
44
43
  }
45
44
  },
46
45
  "bin": {
@@ -51,10 +50,10 @@
51
50
  "prepare": "npm run build"
52
51
  },
53
52
  "optionalDependencies": {
54
- "cac": "^6.7.11",
55
- "sharp": "^0.29.2"
53
+ "cac": "^6.7.14",
54
+ "sharp": "^0.31.0"
56
55
  },
57
56
  "devDependencies": {
58
- "vite": "^2.6.10"
57
+ "vite": "^3.1.0"
59
58
  }
60
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,39 +17,102 @@ 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 toNode = x =>
22
- x instanceof Node
23
- ? x
24
- : document.createTextNode(x)
20
+ const unreactiveChildToNode = x => {
21
+ // Existing DOM nodes are untouched
22
+ if (x instanceof Node)
23
+ return x
24
+ // booleans and nullish are ignored
25
+ else if (typeof x === "boolean" || x === undefined || x === null)
26
+ return document.createComment(x)
27
+ // Anything else is treated as text
28
+ else
29
+ return document.createTextNode(x)
30
+ }
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
+ }
25
98
 
26
99
  // Processes bruh children into an array of DOM nodes
27
100
  // Reactive values are automatically replaced, so the output must be placed into a parent node
28
101
  // before any top level (after flattening arrays) reactions run
29
- export const bruhChildrenToNodes = (...children) =>
102
+ export const bruhChildrenToNodes = children =>
30
103
  children
31
104
  .flat(Infinity)
32
105
  .flatMap(child => {
33
- // Non-reactive values are untouched
34
- if (!child[isReactive])
35
- return [toNode(child)]
36
-
37
- // Reactive arrays become live fragments with auto-swapped children
38
- if (Array.isArray(child.value)) {
39
- const liveFragment = new LiveFragment()
40
- child.addReaction(() => {
41
- liveFragment.replaceChildren(...bruhChildrenToNodes(...child.value))
42
- })
43
- return [liveFragment.startMarker, ...bruhChildrenToNodes(...child.value), liveFragment.endMarker]
44
- }
45
-
46
- // Reactive values become auto-swapped DOM nodes
47
- let node = toNode(child.value)
48
- child.addReaction(() => {
49
- const oldNode = node
50
- node = toNode(child.value)
51
- oldNode.replaceWith(node)
52
- })
53
- return [node]
106
+ // Non-reactive child
107
+ if (!child?.[isReactive])
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)
54
116
  })
55
117
 
56
118
  //#endregion
@@ -110,10 +172,13 @@ export const t = textContent => {
110
172
 
111
173
  // Elements
112
174
  export const e = name => (...variadic) => {
175
+ if (variadic.length === 0)
176
+ return document.createElement(name)
177
+
113
178
  // If there are no props
114
179
  if (isBruhChild(variadic[0])) {
115
180
  const element = document.createElement(name)
116
- element.append(...bruhChildrenToNodes(...variadic))
181
+ element.append(...bruhChildrenToNodes(variadic))
117
182
  return element
118
183
  }
119
184
 
@@ -131,19 +196,30 @@ export const e = name => (...variadic) => {
131
196
  : document.createElement ( name)
132
197
 
133
198
  // Apply overloaded props, if possible
134
- if (typeof props.style === "object") {
199
+
200
+ // Inline style object
201
+ if (typeof props.style === "object" && !props.style[isReactive]) {
135
202
  applyStyles(element, props.style)
136
203
  delete props.style
137
204
  }
138
- if (typeof props.class === "object") {
205
+ // Classes object
206
+ if (typeof props.class === "object" && !props.class[isReactive]) {
139
207
  applyClasses(element, props.class)
140
208
  delete props.class
141
209
  }
210
+ for (const name in props) {
211
+ // Event listener functions
212
+ if (name.startsWith("on") && typeof props[name] === "function") {
213
+ element.addEventListener(name.slice(2), props[name])
214
+ delete props[name]
215
+ }
216
+ }
217
+
142
218
  // The rest of the props are attributes
143
219
  applyAttributes(element, props)
144
220
 
145
221
  // Add the children to the element
146
- element.append(...bruhChildrenToNodes(...children))
222
+ element.append(...bruhChildrenToNodes(children))
147
223
  return element
148
224
  }
149
225
 
@@ -125,6 +125,7 @@ export class MetaElement {
125
125
 
126
126
  const contents = this.children
127
127
  .flat(Infinity)
128
+ .filter(x => typeof x !== "boolean" && x !== undefined && x !== null)
128
129
  .map(child =>
129
130
  (child[isMetaNode] || child[isMetaRawString])
130
131
  ? child.toString()
@@ -220,6 +221,9 @@ export const t = textContent =>
220
221
  export const e = name => (...variadic) => {
221
222
  const element = new MetaElement(name)
222
223
 
224
+ if (variadic.length === 0)
225
+ return element
226
+
223
227
  // If there are no props
224
228
  if (isMetaChild(variadic[0])) {
225
229
  element.children.push(...variadic)
@@ -1,4 +1,3 @@
1
1
  export * as dom from "./dom/index.browser.mjs"
2
- export * as liveFragment from "./dom/live-fragment.mjs"
3
2
  export * as reactive from "./reactive/index.mjs"
4
3
  export * as util from "./util/index.mjs"
File without changes
@@ -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
@@ -4,7 +4,7 @@ export default defineConfig({
4
4
  build: {
5
5
  lib: {
6
6
  name: "bruh",
7
- entry: new URL("./src/index.mjs", import.meta.url).pathname,
7
+ entry: new URL("./src/index.browser.mjs", import.meta.url).pathname,
8
8
  fileName: format => `bruh.${format}.js`
9
9
  },
10
10
  sourcemap: true
package/dist/bruh.es.js DELETED
@@ -1,363 +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) => x instanceof Node ? x : document.createTextNode(x);
229
- const bruhChildrenToNodes = (...children) => children.flat(Infinity).flatMap((child) => {
230
- if (!child[isReactive])
231
- return [toNode(child)];
232
- if (Array.isArray(child.value)) {
233
- const liveFragment2 = new LiveFragment();
234
- child.addReaction(() => {
235
- liveFragment2.replaceChildren(...bruhChildrenToNodes(...child.value));
236
- });
237
- return [liveFragment2.startMarker, ...bruhChildrenToNodes(...child.value), liveFragment2.endMarker];
238
- }
239
- let node = toNode(child.value);
240
- child.addReaction(() => {
241
- const oldNode = node;
242
- node = toNode(child.value);
243
- oldNode.replaceWith(node);
244
- });
245
- return [node];
246
- });
247
- const applyStyles = (element, styles) => {
248
- for (const property in styles)
249
- reactiveDo(styles[property], (value) => {
250
- if (value !== void 0)
251
- element.style.setProperty(property, value);
252
- else
253
- element.style.removeProperty(property);
254
- });
255
- };
256
- const applyClasses = (element, classes) => {
257
- for (const name in classes)
258
- reactiveDo(classes[name], (value) => {
259
- element.classList.toggle(name, value);
260
- });
261
- };
262
- const applyAttributes = (element, attributes) => {
263
- for (const name in attributes)
264
- reactiveDo(attributes[name], (value) => {
265
- if (value !== void 0)
266
- element.setAttribute(name, value);
267
- else
268
- element.removeAttribute(name);
269
- });
270
- };
271
- const t = (textContent) => {
272
- if (!textContent[isReactive])
273
- return document.createTextNode(textContent);
274
- const node = document.createTextNode(textContent.value);
275
- textContent.addReaction(() => {
276
- node.textContent = textContent.value;
277
- });
278
- return node;
279
- };
280
- const e = (name) => (...variadic) => {
281
- var _a2;
282
- if (isBruhChild(variadic[0])) {
283
- const element2 = document.createElement(name);
284
- element2.append(...bruhChildrenToNodes(...variadic));
285
- return element2;
286
- }
287
- const [props, ...children] = variadic;
288
- const { namespace } = (_a2 = props.bruh) != null ? _a2 : {};
289
- delete props.bruh;
290
- const element = namespace ? document.createElementNS(namespace, name) : document.createElement(name);
291
- if (typeof props.style === "object") {
292
- applyStyles(element, props.style);
293
- delete props.style;
294
- }
295
- if (typeof props.class === "object") {
296
- applyClasses(element, props.class);
297
- delete props.class;
298
- }
299
- applyAttributes(element, props);
300
- element.append(...bruhChildrenToNodes(...children));
301
- return element;
302
- };
303
- const h = (nameOrComponent, props, ...children) => {
304
- if (typeof nameOrComponent === "string") {
305
- const makeElement = e(nameOrComponent);
306
- return props ? makeElement(props, ...children) : makeElement(...children);
307
- }
308
- return nameOrComponent(__spreadProps(__spreadValues({}, props), { children }));
309
- };
310
- const JSXFragment = ({ children }) => children;
311
- const hydrateTextNodes = () => {
312
- const tagged = {};
313
- const bruhTextNodes = document.getElementsByTagName("bruh-textnode");
314
- for (const bruhTextNode of bruhTextNodes) {
315
- const textNode = document.createTextNode(bruhTextNode.textContent);
316
- const tag = bruhTextNode.getAttribute("tag");
317
- if (tag)
318
- tagged[tag] = textNode;
319
- bruhTextNode.replaceWith(textNode);
320
- }
321
- return tagged;
322
- };
323
- var index_browser = /* @__PURE__ */ Object.freeze({
324
- __proto__: null,
325
- [Symbol.toStringTag]: "Module",
326
- bruhChildrenToNodes,
327
- applyStyles,
328
- applyClasses,
329
- applyAttributes,
330
- t,
331
- e,
332
- h,
333
- JSXFragment,
334
- hydrateTextNodes
335
- });
336
- const pipe = (x, ...fs) => fs.reduce((y, f) => f(y), x);
337
- const dispatch = (target, type, options) => target.dispatchEvent(new CustomEvent(type, __spreadValues({
338
- bubbles: true,
339
- cancelable: true,
340
- composed: true
341
- }, options)));
342
- const createDestructable = (object, iterable) => {
343
- const destructable = __spreadProps(__spreadValues({}, object), {
344
- [Symbol.iterator]: () => iterable[Symbol.iterator]()
345
- });
346
- Object.defineProperty(destructable, Symbol.iterator, {
347
- enumerable: false
348
- });
349
- return destructable;
350
- };
351
- const functionAsObject = (f) => new Proxy({}, {
352
- get: (_, property) => f(property)
353
- });
354
- var index = /* @__PURE__ */ Object.freeze({
355
- __proto__: null,
356
- [Symbol.toStringTag]: "Module",
357
- pipe,
358
- dispatch,
359
- createDestructable,
360
- functionAsObject
361
- });
362
- export { index_browser as dom, liveFragment, index$1 as reactive, index as util };
363
- //# sourceMappingURL=bruh.es.js.map
@@ -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 x instanceof Node\n ? x\n : document.createTextNode(x)\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 if (typeof props.style === \"object\") {\n applyStyles(element, props.style)\n delete props.style\n }\n if (typeof props.class === \"object\") {\n applyClasses(element, props.class)\n delete props.class\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 W=Object.getOwnPropertySymbols;var ae=Object.prototype.hasOwnProperty,ie=Object.prototype.propertyIsEnumerable;var C=(n,s,i)=>s in n?ne(n,s,{enumerable:!0,configurable:!0,writable:!0,value:i}):n[s]=i,R=(n,s)=>{for(var i in s||(s={}))ae.call(s,i)&&C(n,i,s[i]);if(W)for(var i of W(s))ie.call(s,i)&&C(n,i,s[i]);return n},F=(n,s)=>se(n,oe(s));var E=(n,s,i)=>(C(n,typeof s!="symbol"?s+"":s,i),i),O=(n,s,i)=>{if(!s.has(n))throw TypeError("Cannot "+i)};var a=(n,s,i)=>(O(n,s,"read from private field"),i?i.call(n):s.get(n)),u=(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)},m=(n,s,i,f)=>(O(n,s,"write to private field"),f?f.call(n,i):s.set(n,i),i);var P=(n,s,i)=>(O(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,y,v,de,p,S,k,b,A,l,M,N,j,q;"use strict";class s{constructor(){E(this,"startMarker",document.createTextNode(""));E(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 f=Symbol.for("bruh reactive");class J{constructor(e){E(this,ce,!0);u(this,y,void 0);u(this,v,new Set);m(this,y,e)}get value(){return a(this,y)}set value(e){if(e!==a(this,y)){m(this,y,e);for(const t of a(this,v))t()}}addReaction(e){return a(this,v).add(e),()=>a(this,v).delete(e)}}ce=f,y=new WeakMap,v=new WeakMap;const c=class{constructor(e,t){u(this,j);E(this,de,!0);u(this,p,void 0);u(this,S,new Set);u(this,k,void 0);u(this,b,0);u(this,A,new Set);if(!t){m(this,p,e);return}m(this,p,t()),m(this,k,t),m(this,b,Math.max(...e.map(o=>a(o,b)))+1),e.forEach(o=>a(o,A).add(this))}get value(){if(a(c,l).size){if(a(this,b)!==0)c.applyUpdates();else if(a(c,l).has(this))return a(c,l).get(this)}return a(this,p)}set value(e){a(this,b)===0&&(a(c,l).size||queueMicrotask(c.applyUpdates),a(c,l).set(this,e))}addReaction(e){return a(this,S).add(e),()=>a(this,S).delete(e)}static applyUpdates(){var e,t,o;if(!!a(c,l).size){for(const[d,h]of a(c,l).entries())P(e=d,j,q).call(e,h);a(c,l).clear();for(const d of a(c,M))if(d)for(const h of d)P(o=h,j,q).call(o,a(t=h,k).call(t));a(c,M).length=0;for(const d of a(c,N))d();a(c,N).length=0}}};let g=c;de=f,p=new WeakMap,S=new WeakMap,k=new WeakMap,b=new WeakMap,A=new WeakMap,l=new WeakMap,M=new WeakMap,N=new WeakMap,j=new WeakSet,q=function(e){if(e===a(this,p))return;m(this,p,e),a(c,N).push(...a(this,S));const t=a(c,M);for(const o of a(this,A)){const d=a(o,b);t[d]||(t[d]=new Set),t[d].add(o)}},u(g,l,new Map),u(g,M,[]),u(g,N,[]);const X=(r,e)=>new g(r,e),w=(r,e)=>{if(r==null?void 0:r[f])return e(r.value),r.addReaction(()=>e(r.value));e(r)};var H=Object.freeze({__proto__:null,[Symbol.toStringTag]:"Module",isReactive:f,SimpleReactive:J,FunctionalReactive:g,r:X,reactiveDo:w});const I=r=>(r==null?void 0:r[f])||r instanceof Node||Array.isArray(r)||r==null||!(typeof r=="function"||typeof r=="object"),z=r=>r instanceof Node?r:document.createTextNode(r),T=(...r)=>r.flat(1/0).flatMap(e=>{if(!e[f])return[z(e)];if(Array.isArray(e.value)){const o=new s;return e.addReaction(()=>{o.replaceChildren(...T(...e.value))}),[o.startMarker,...T(...e.value),o.endMarker]}let t=z(e.value);return e.addReaction(()=>{const o=t;t=z(e.value),o.replaceWith(t)}),[t]}),B=(r,e)=>{for(const t in e)w(e[t],o=>{o!==void 0?r.style.setProperty(t,o):r.style.removeProperty(t)})},D=(r,e)=>{for(const t in e)w(e[t],o=>{r.classList.toggle(t,o)})},L=(r,e)=>{for(const t in e)w(e[t],o=>{o!==void 0?r.setAttribute(t,o):r.removeAttribute(t)})},$=r=>{if(!r[f])return document.createTextNode(r);const e=document.createTextNode(r.value);return r.addReaction(()=>{e.textContent=r.value}),e},U=r=>(...e)=>{var _;if(I(e[0])){const Q=document.createElement(r);return Q.append(...T(...e)),Q}const[t,...o]=e,{namespace:d}=(_=t.bruh)!=null?_:{};delete t.bruh;const h=d?document.createElementNS(d,r):document.createElement(r);return typeof t.style=="object"&&(B(h,t.style),delete t.style),typeof t.class=="object"&&(D(h,t.class),delete t.class),L(h,t),h.append(...T(...o)),h},G=(r,e,...t)=>{if(typeof r=="string"){const o=U(r);return e?o(e,...t):o(...t)}return r(F(R({},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:T,applyStyles:B,applyClasses:D,applyAttributes:L,t:$,e:U,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,R({bubbles:!0,cancelable:!0,composed:!0},t))),ee=(r,e)=>{const t=F(R({},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
@@ -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 x instanceof Node\n ? x\n : document.createTextNode(x)\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 if (typeof props.style === \"object\") {\n applyStyles(element, props.style)\n delete props.style\n }\n if (typeof props.class === \"object\") {\n applyClasses(element, props.class)\n delete props.class\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
- }