bruh 1.8.1 → 1.10.0

package/package.json

@@ -10,7 +10,7 @@
     "library",
     "modern"
   ],
-  "version": "1.8.1",
+  "version": "1.10.0",
   "license": "MIT",
   "author": {
     "name": "Daniel Ethridge",
@@ -50,18 +50,10 @@
     "prepare": "npm run build"
   },
   "optionalDependencies": {
-    "cac": "^6.7.3",
-    "sharp": "^0.28.3"
+    "cac": "^6.7.11",
+    "sharp": "^0.29.2"
   },
   "devDependencies": {
-    "vite": "^2.5.10"
-  },
-  "browserslist": [
-    "ios_saf >= 12.4",
-    "and_chr >= 88",
-    "chrome  >= 87",
-    "safari  >= 13.1",
-    "edge    >= 87",
-    "firefox >= 84"
-  ]
+    "vite": "^2.6.10"
+  }
 }

package/src/components/optimized-picture/render.mjs

@@ -1,4 +1,7 @@
-import { picture, source, img } from "bruh/dom/html"
+import { e } from "bruh/dom"
+import { functionAsObject } from "bruh/util"
+const { picture, source, img } = functionAsObject(e)
+
 import { readFile } from "fs/promises"
 
 export default async options => {

package/src/dom/index.browser.mjs

@@ -1,49 +1,49 @@
 import { LiveFragment } from "./live-fragment.mjs"
-import { reactiveDo } from "../reactive/index.mjs"
-import { maybeDo } from "../util/index.mjs"
+import { isReactive, reactiveDo } from "../reactive/index.mjs"
 
-const isReactive     = Symbol.for("bruh reactive")
-const isMetaNode     = Symbol.for("bruh meta node")
-const isMetaTextNode = Symbol.for("bruh meta text node")
-const isMetaElement  = Symbol.for("bruh meta element")
+//#region Bruh child functions e.g. bruhChildrenToNodes()
 
-// A basic check for if a value is allowed as a meta node's child
+// A basic check for if a value is allowed as a child in bruh
 // It's responsible for quickly checking the type, not deep validation
-const isMetaNodeChild = x =>
-  // meta nodes, reactives, and DOM nodes
-  x?.[isMetaNode] ||
+const isBruhChild = x =>
+  // Reactives and DOM nodes
   x?.[isReactive] ||
   x instanceof Node ||
   // Any array, just assume it contains valid children
   Array.isArray(x) ||
-  // Everything else, as long as it isn't a function, can be a child when stringified
-  typeof x !== "function"
-
-const toNode = x => {
-  if (x[isMetaNode])
-    return x.node
-
-  if (x instanceof Node)
-    return x
-
-  return document.createTextNode(x)
-}
-
-export const childrenToNodes = children =>
+  // Allow nullish
+  x == null ||
+  // Disallow functions and objects
+  !(typeof x === "function" || typeof x === "object")
+  // Everything else can be a child when stringified
+
+// Coerces input into a DOM node, if it isn't already one
+const toNode = x =>
+  x instanceof Node
+    ? x
+    : document.createTextNode(x)
+
+// Processes bruh children into an array of DOM nodes
+// Reactive values are automatically replaced, so the output must be placed into a parent node
+// before any top level (after flattening arrays) reactions run
+export const bruhChildrenToNodes = (...children) =>
   children
     .flat(Infinity)
     .flatMap(child => {
+      // Non-reactive values are untouched
       if (!child[isReactive])
         return [toNode(child)]
 
+      // Reactive arrays become live fragments with auto-swapped children
       if (Array.isArray(child.value)) {
         const liveFragment = new LiveFragment()
         child.addReaction(() => {
-          liveFragment.replaceChildren(...childrenToNodes(child.value))
+          liveFragment.replaceChildren(...bruhChildrenToNodes(...child.value))
         })
-        return [liveFragment.startMarker, ...childrenToNodes(child.value), liveFragment.endMarker]
+        return [liveFragment.startMarker, ...bruhChildrenToNodes(...child.value), liveFragment.endMarker]
       }
 
+      // Reactive values become auto-swapped DOM nodes
       let node = toNode(child.value)
       child.addReaction(() => {
         const oldNode = node
@@ -53,109 +53,129 @@ export const childrenToNodes = children =>
       return [node]
     })
 
+//#endregion
 
+//#region Reactive-aware element helper functions e.g. applyAttributes()
 
-// Meta Nodes
-
-export class MetaTextNode {
-  constructor(textContent) {
-    this[isMetaNode] =
-    this[isMetaTextNode] = true
-
-    if (textContent[isReactive]) {
-      this.node = document.createTextNode(textContent.value)
-      textContent.addReaction(() => {
-        this.node.textContent = textContent.value
-      })
-    }
-    else {
-      this.node = document.createTextNode(textContent)
-    }
-  }
+// Style attribute rules from an object with
+// potentially reactive and/or undefined values
+export const applyStyles = (element, styles) => {
+  for (const property in styles)
+    reactiveDo(styles[property], value => {
+      if (value !== undefined)
+        element.style.setProperty   (property, value)
+      else
+        element.style.removeProperty(property)
+    })
+}
 
-  addProperties(properties = {}) {
-    Object.assign(this.node, properties)
+// Class list from an object mapping from
+// class names to potentially reactive booleans
+export const applyClasses = (element, classes) => {
+  for (const name in classes)
+    reactiveDo(classes[name], value => {
+      element.classList.toggle(name, value)
+    })
+}
 
-    return this
-  }
+// Attributes from an object with
+// potentially reactive and/or undefined values
+export const applyAttributes = (element, attributes) => {
+  for (const name in attributes)
+    reactiveDo(attributes[name], value => {
+      if (value !== undefined)
+        element.setAttribute   (name, value)
+      else
+        element.removeAttribute(name)
+    })
 }
 
-export class MetaElement {
-  constructor(name, namespace) {
-    this[isMetaNode] =
-    this[isMetaElement] = true
+//#endregion
 
-    this.node =
-      namespace
-        ? document.createElementNS(namespace, name)
-        : document.createElement  (           name)
-  }
+//#region t() for text nodes and e() for element nodes
 
-  static from(element) {
-    const result = new this("div")
-    result.node = element
-    return result
-  }
+// Text nodes
+export const t = textContent => {
+  // Non-reactive values are just text nodes
+  if (!textContent[isReactive])
+    return document.createTextNode(textContent)
 
-  addProperties(properties = {}) {
-    Object.assign(this.node, properties)
+  // Reactive values auto-update the node's text content
+  const node = document.createTextNode(textContent.value)
+  textContent.addReaction(() => {
+    node.textContent = textContent.value
+  })
+  return node
+}
 
-    return this
+// Elements
+export const e = name => (...variadic) => {
+  // If there are no props
+  if (isBruhChild(variadic[0])) {
+    const element = document.createElement(name)
+    element.append(...bruhChildrenToNodes(...variadic))
+    return element
   }
 
-  addAttributes(attributes = {}) {
-    for (const name in attributes)
-      reactiveDo(attributes[name],
-        maybeDo(
-          value => this.node.setAttribute   (name, value),
-          ()    => this.node.removeAttribute(name)
-        )
-      )
+  // If props exist as the first variadic argument
+  const [props, ...children] = variadic
 
-    return this
-  }
+  // Extract explicit options from the bruh prop
+  const { namespace } = props.bruh ?? {}
+  delete props.bruh
 
-  addDataAttributes(dataAttributes = {}) {
-    for (const name in dataAttributes)
-      reactiveDo(dataAttributes[name],
-        maybeDo(
-          value =>        this.node.dataset[name] = value,
-          ()    => delete this.node.dataset[name]
-        )
-      )
+  // Make an element with optional namespace
+  const element =
+    namespace
+      ? document.createElementNS(namespace, name)
+      : document.createElement  (           name)
 
-    return this
+  // Apply overloaded props, if possible
+  if (typeof props.style === "object") {
+    applyStyles(element, props.style)
+    delete props.style
   }
-
-  before(...xs) {
-    this.node.before(...childrenToNodes(xs))
+  if (typeof props.class === "object") {
+    applyClasses(element, props.class)
+    delete props.class
   }
+  // The rest of the props are attributes
+  applyAttributes(element, props)
 
-  prepend(...xs) {
-    this.node.prepend(...childrenToNodes(xs))
-  }
+  // Add the children to the element
+  element.append(...bruhChildrenToNodes(...children))
+  return element
+}
 
-  append(...xs) {
-    this.node.append(...childrenToNodes(xs))
-  }
+//#endregion
 
-  after(...xs) {
-    this.node.after(...childrenToNodes(xs))
-  }
+//#region JSX integration
 
-  replaceChildren(...xs) {
-    this.node.replaceChildren(...childrenToNodes(xs))
+// The function that jsx tags (except fragments) compile to
+export const h = (nameOrComponent, props, ...children) => {
+  // If we are making an element, this is just a wrapper of e()
+  // This is likely when the JSX tag name begins with a lowercase character
+  if (typeof nameOrComponent === "string") {
+    const makeElement = e(nameOrComponent)
+    return props
+      ? makeElement(props, ...children)
+      : makeElement(...children)
   }
 
-  replaceWith(...xs) {
-    this.node.replaceWith(...childrenToNodes(xs))
-  }
+  // It must be a component, then, as bruh components are just functions
+  // Due to JSX, this would mean a function with only one parameter - props
+  // This object includes the all of the normal props and a "children" key
+  return nameOrComponent({ ...props, children })
 }
 
+// The JSX fragment is made into a bruh fragment (just an array)
+export const JSXFragment = ({ children }) => children
+
+//#endregion
 
 
-// Convenience functions
 
+// Hydration of all bruh-textnode's from prerendered html
 export const hydrateTextNodes = () => {
   const tagged = {}
   const bruhTextNodes = document.getElementsByTagName("bruh-textnode")
@@ -163,61 +183,12 @@ export const hydrateTextNodes = () => {
   for (const bruhTextNode of bruhTextNodes) {
     const textNode = document.createTextNode(bruhTextNode.textContent)
 
-    if (bruhTextNode.dataset.tag)
-      tagged[bruhTextNode.dataset.tag] = textNode
+    const tag = bruhTextNode.getAttribute("tag")
+    if (tag)
+      tagged[tag] = textNode
 
     bruhTextNode.replaceWith(textNode)
   }
 
   return tagged
 }
-
-const createMetaTextNode = textContent =>
-  new MetaTextNode(textContent)
-
-const createMetaElement = (name, namespace) => (...variadic) => {
-  const meta = new MetaElement(name, namespace)
-
-  // Implement optional attributes as first argument
-  if (!isMetaNodeChild(variadic[0])) {
-    const [attributes, ...children] = variadic
-    meta.addAttributes(attributes)
-    meta.append(children)
-  }
-  else {
-    meta.append(variadic)
-  }
-
-  return meta
-}
-
-// JSX integration
-const createMetaElementJSX = (nameOrComponent, attributesOrProps, ...children) => {
-  // If we are making a html element
-  // This is likely when the jsx tag name begins with a lowercase character
-  if (typeof nameOrComponent == "string") {
-    const meta = new MetaElement(nameOrComponent)
-
-    // These are attributes then, but they might be null/undefined
-    meta.addAttributes(attributesOrProps || {})
-    meta.append(children)
-
-    return meta
-  }
-
-  // It must be a component, then
-  // Bruh components are just functions that return meta elements
-  // Due to JSX, this would mean a function with only one parameter - a "props" object
-  // This object includes the all of the attributes and a "children" key
-  return nameOrComponent( Object.assign({}, attributesOrProps, { children }) )
-}
-
-// These will be called with short names
-export {
-  createMetaTextNode   as t,
-  createMetaElement    as e,
-  createMetaElementJSX as h
-}
-
-// The JSX fragment is made into a bruh fragment (just an array)
-export const JSXFragment = ({ children }) => children