bruh 1.10.0 → 1.10.1
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/dist/bruh.es.js +4 -2
- package/dist/bruh.es.js.map +1 -1
- package/dist/bruh.umd.js +1 -1
- package/dist/bruh.umd.js.map +1 -1
- package/package.json +3 -2
- package/src/reactive/index.mjs +4 -2
package/dist/bruh.es.js
CHANGED
|
@@ -144,8 +144,10 @@ const _FunctionalReactive = class {
|
|
|
144
144
|
x.forEach((d) => __privateGet(d, _derivatives).add(this));
|
|
145
145
|
}
|
|
146
146
|
get value() {
|
|
147
|
-
if (__privateGet(_FunctionalReactive, _settersQueue).size)
|
|
148
|
-
_FunctionalReactive.
|
|
147
|
+
if (__privateGet(_FunctionalReactive, _settersQueue).size) {
|
|
148
|
+
if (__privateGet(this, _depth) !== 0 || __privateGet(_FunctionalReactive, _settersQueue).has(this))
|
|
149
|
+
_FunctionalReactive.applyUpdates();
|
|
150
|
+
}
|
|
149
151
|
return __privateGet(this, _value2);
|
|
150
152
|
}
|
|
151
153
|
set value(newValue) {
|
package/dist/bruh.es.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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, go ahead and apply them first\n // It's ok that there's already a microtask queued for this\n if (FunctionalReactive.#settersQueue.size)\n FunctionalReactive.applyUpdates()\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
|
+
{"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 relevant pending updates, apply them first\n // It's ok that there's already a microtask queued for this\n if (FunctionalReactive.#settersQueue.size)\n // Heuristic quick check\n if (this.#depth !== 0 || FunctionalReactive.#settersQueue.has(this))\n FunctionalReactive.applyUpdates()\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
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var ne=Object.defineProperty,
|
|
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,l)=>(O(n,s,"write to private field"),l?l.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,g,de,p,S,k,b,A,f,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 l=Symbol.for("bruh reactive");class J{constructor(e){E(this,ce,!0);u(this,y,void 0);u(this,g,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,g))t()}}addReaction(e){return a(this,g).add(e),()=>a(this,g).delete(e)}}ce=l,y=new WeakMap,g=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(){return a(c,f).size&&(a(this,b)!==0||a(c,f).has(this))&&c.applyUpdates(),a(this,p)}set value(e){a(this,b)===0&&(a(c,f).size||queueMicrotask(c.applyUpdates),a(c,f).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,f).size){for(const[d,h]of a(c,f).entries())P(e=d,j,q).call(e,h);a(c,f).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 v=c;de=l,p=new WeakMap,S=new WeakMap,k=new WeakMap,b=new WeakMap,A=new WeakMap,f=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(v,f,new Map),u(v,M,[]),u(v,N,[]);const X=(r,e)=>new v(r,e),w=(r,e)=>{if(r==null?void 0:r[l])return e(r.value),r.addReaction(()=>e(r.value));e(r)};var H=Object.freeze({__proto__:null,[Symbol.toStringTag]:"Module",isReactive:l,SimpleReactive:J,FunctionalReactive:v,r:X,reactiveDo:w});const I=r=>(r==null?void 0:r[l])||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[l])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]}),_=(r,e)=>{for(const t in e)w(e[t],o=>{o!==void 0?r.style.setProperty(t,o):r.style.removeProperty(t)})},B=(r,e)=>{for(const t in e)w(e[t],o=>{r.classList.toggle(t,o)})},D=(r,e)=>{for(const t in e)w(e[t],o=>{o!==void 0?r.setAttribute(t,o):r.removeAttribute(t)})},$=r=>{if(!r[l])return document.createTextNode(r);const e=document.createTextNode(r.value);return r.addReaction(()=>{e.textContent=r.value}),e},L=r=>(...e)=>{var U;if(I(e[0])){const Q=document.createElement(r);return Q.append(...T(...e)),Q}const[t,...o]=e,{namespace:d}=(U=t.bruh)!=null?U:{};delete t.bruh;const h=d?document.createElementNS(d,r):document.createElement(r);return typeof t.style=="object"&&(_(h,t.style),delete t.style),typeof t.class=="object"&&(B(h,t.class),delete t.class),D(h,t),h.append(...T(...o)),h},G=(r,e,...t)=>{if(typeof r=="string"){const o=L(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:_,applyClasses:B,applyAttributes:D,t:$,e:L,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
2
|
//# sourceMappingURL=bruh.umd.js.map
|
package/dist/bruh.umd.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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, go ahead and apply them first\n // It's ok that there's already a microtask queued for this\n if (FunctionalReactive.#settersQueue.size)\n FunctionalReactive.applyUpdates()\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
|
+
{"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 relevant pending updates, apply them first\n // It's ok that there's already a microtask queued for this\n if (FunctionalReactive.#settersQueue.size)\n // Heuristic quick check\n if (this.#depth !== 0 || FunctionalReactive.#settersQueue.has(this))\n FunctionalReactive.applyUpdates()\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/package.json
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
"library",
|
|
11
11
|
"modern"
|
|
12
12
|
],
|
|
13
|
-
"version": "1.10.
|
|
13
|
+
"version": "1.10.1",
|
|
14
14
|
"license": "MIT",
|
|
15
15
|
"author": {
|
|
16
16
|
"name": "Daniel Ethridge",
|
|
@@ -26,7 +26,8 @@
|
|
|
26
26
|
"type": "module",
|
|
27
27
|
"exports": {
|
|
28
28
|
"./": {
|
|
29
|
-
"browser": "./
|
|
29
|
+
"browser": "./dist/bruh.es.js",
|
|
30
|
+
"default": "./dist/bruh.umd.js"
|
|
30
31
|
},
|
|
31
32
|
"./dom": {
|
|
32
33
|
"node": "./src/dom/index.node.mjs",
|
package/src/reactive/index.mjs
CHANGED
|
@@ -70,10 +70,12 @@ export class FunctionalReactive {
|
|
|
70
70
|
}
|
|
71
71
|
|
|
72
72
|
get value() {
|
|
73
|
-
// If there are any pending updates,
|
|
73
|
+
// If there are any relevant pending updates, apply them first
|
|
74
74
|
// It's ok that there's already a microtask queued for this
|
|
75
75
|
if (FunctionalReactive.#settersQueue.size)
|
|
76
|
-
|
|
76
|
+
// Heuristic quick check
|
|
77
|
+
if (this.#depth !== 0 || FunctionalReactive.#settersQueue.has(this))
|
|
78
|
+
FunctionalReactive.applyUpdates()
|
|
77
79
|
|
|
78
80
|
return this.#value
|
|
79
81
|
}
|