bruh 1.8.1 → 1.10.0

package/src/dom/index.node.mjs

@@ -1,3 +1,10 @@
+const isMetaNode      = Symbol.for("bruh meta node")
+const isMetaTextNode  = Symbol.for("bruh meta text node")
+const isMetaElement   = Symbol.for("bruh meta element")
+const isMetaRawString = Symbol.for("bruh meta raw string")
+
+//#region HTML syntax functions
+
 // https://html.spec.whatwg.org/multipage/syntax.html#void-elements
 const voidElements = [
   "base",
@@ -26,6 +33,7 @@ const isVoidElement = element =>
 
 // https://html.spec.whatwg.org/multipage/syntax.html#elements-2
 // https://html.spec.whatwg.org/multipage/syntax.html#cdata-rcdata-restrictions
+// Does not work for https://html.spec.whatwg.org/multipage/syntax.html#raw-text-elements (script and style)
 const escapeForElement = x =>
   (x + "")
     .replace(/&/g, "&")
@@ -37,172 +45,232 @@ const escapeForDoubleQuotedAttribute = x =>
     .replace(/&/g, "&")
     .replace(/"/g, """)
 
-const isMetaNode      = Symbol.for("bruh meta node")
-const isMetaTextNode  = Symbol.for("bruh meta text node")
-const isMetaElement   = Symbol.for("bruh meta element")
-const isMetaRawString = Symbol.for("bruh meta raw string")
+// https://html.spec.whatwg.org/multipage/syntax.html#attributes-2
+const attributesToString = attributes =>
+  Object.entries(attributes)
+    .map(([name, value]) =>
+      value === ""
+        ? ` ${name}`
+        : ` ${name}="${escapeForDoubleQuotedAttribute(value)}"`
+    ).join("")
+
+//#endregion
 
 // A basic check for if a value is allowed as a meta node's child
 // It's responsible for quickly checking the type, not deep validation
-const isMetaNodeChild = x =>
+const isMetaChild = x =>
   // meta nodes, reactives, and DOM nodes
   x?.[isMetaNode] ||
   x?.[isMetaRawString] ||
   // 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"
+  // Allow nullish
+  x == null ||
+  // Disallow functions and objects
+  !(typeof x === "function" || typeof x === "object")
+  // Everything else can be a child when stringified
 
 
-// Meta Nodes
+//#region Meta Nodes that act like lightweight rendering-oriented DOM nodes
 
+// Text nodes have no individual HTML representation
+// We emulate this with a custom element <bruh-textnode> with an inline style reset
+// These elements can be hydrated very quickly and even be marked with a tag
 export class MetaTextNode {
-  constructor(textContent) {
-    this[isMetaNode] =
-    this[isMetaTextNode] = true
+  [isMetaNode]     = true;
+  [isMetaTextNode] = true
+
+  textContent
+  tag
 
+  constructor(textContent) {
     this.textContent = textContent
-    this.tag = undefined
   }
 
   toString() {
-    return `<bruh-textnode style="all:unset;display:inline"${
-      this.tag
-        ? ` data-tag="${escapeForDoubleQuotedAttribute(this.tag)}"`
-        : ""
-    }>${ escapeForElement(this.textContent) }</bruh-textnode>`
+    const tag = this.tag
+      ? ` tag="${escapeForDoubleQuotedAttribute(this.tag)}"`
+      : ""
+    return `<bruh-textnode style="all:unset;display:inline"${tag}>${
+      escapeForElement(this.textContent)
+    }</bruh-textnode>`
   }
 
-  setTag(tag = "") {
+  setTag(tag) {
     this.tag = tag
 
     return this
   }
 }
 
+// A light model of an element
 export class MetaElement {
-  constructor(name) {
-    this[isMetaNode] =
-    this[isMetaElement] = true
+  [isMetaNode]    = true;
+  [isMetaElement] = true
 
-    this.name = name
-    this.children = []
+  name
+  attributes = {}
+  children = []
 
-    this.attributes = {}
-    this.dataset = {}
+  constructor(name) {
+    this.name = name
   }
 
   toString() {
-    // https://html.spec.whatwg.org/multipage/syntax.html#attributes-2
-    const attributes =
-      [
-        ...Object.entries(this.attributes),
-        ...Object.entries(this.dataset)
-          .map(([name, value]) => {
-            // https://html.spec.whatwg.org/multipage/dom.html#dom-domstringmap-setitem
-            const skewered = name.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`)
-            return [`data-${skewered}`, value]
-          })
-      ]
-        .map(([name, value]) =>
-          value === ""
-            ? ` ${name}`
-            : ` ${name}="${escapeForDoubleQuotedAttribute(value)}"`
-        ).join("")
+    const attributes = attributesToString(this.attributes)
     // https://html.spec.whatwg.org/multipage/syntax.html#syntax-start-tag
     const startTag = `<${this.name}${attributes}>`
-
     if (isVoidElement(this.name))
       return startTag
 
-    const contents =
-      this.children
-        .flat(Infinity)
-        .map(child => {
-          return (child[isMetaNode] || child[isMetaRawString])
-            ? child.toString()
-            : escapeForElement(child)
-        }).join("")
+    const contents = this.children
+      .flat(Infinity)
+      .map(child =>
+        (child[isMetaNode] || child[isMetaRawString])
+          ? child.toString()
+          : escapeForElement(child)
+      )
+      .join("")
     // https://html.spec.whatwg.org/multipage/syntax.html#end-tags
     const endTag = `</${this.name}>`
     return startTag + contents + endTag
   }
+}
 
-  addAttributes(attributes = {}) {
-    Object.assign(this.attributes, attributes)
-
-    return this
-  }
-
-  addDataAttributes(dataAttributes = {}) {
-    Object.assign(this.dataset, dataAttributes)
+// Raw strings can be meta element children, where they bypass string escaping
+// This should be avoided in general, but is needed for unsupported HTML features
+export class MetaRawString extends String {
+  [isMetaRawString] = true
 
-    return this
+  constructor(string) {
+    super(string)
   }
 }
 
-export class MetaRawString {
-  constructor(string) {
-    this[isMetaRawString] = true
-    this.string = string
-  }
+//#endregion
+
+//#region Meta element helper functions e.g. applyAttributes()
+
+// Merge style rules with an object
+export const applyStyles = (element, styles) => {
+  // Doesn't support proper escaping
+  // https://www.w3.org/TR/css-syntax-3/#ref-for-parse-a-list-of-declarations%E2%91%A0
+  // https://www.w3.org/TR/css-syntax-3/#typedef-ident-token
+  const currentStyles = Object.fromEntries(
+    (element.attributes.style || "")
+      .split(";").filter(s => s.length)
+      .map(declaration => declaration.split(":").map(s => s.trim()))
+  )
+
+  Object.entries(styles)
+    .forEach(([property, value]) => {
+      if (value !== undefined)
+        currentStyles[property] = value
+      else
+        delete currentStyles[property]
+    })
+
+  element.attributes.style =
+    Object.entries(currentStyles)
+      .map(([property, value]) => `${property}:${value}`)
+      .join(";")
+}
 
-  toString() {
-    return this.string
-  }
+// Merge classes with an object mapping from class names to booleans
+export const applyClasses = (element, classes) => {
+  // Doesn't support proper escaping
+  // https://html.spec.whatwg.org/multipage/dom.html#global-attributes:classes-2
+  const currentClasses = new Set(
+    (element.attributes.class || "")
+      .split(/\s+/).filter(s => s.length)
+  )
+
+  Object.entries(classes)
+    .forEach(([name, value]) => {
+      if (value)
+        currentClasses.add(name)
+      else
+        currentClasses.delete(name)
+    })
+
+  element.attributes.class = [...currentClasses].join(" ")
 }
 
+// Merge attributes with an object
+export const applyAttributes = (element, attributes) => {
+  Object.entries(attributes)
+    .forEach(([name, value]) => {
+      if (value !== undefined)
+        element.attributes[name] = value
+      else
+        delete element.attributes[name]
+    })
+}
 
+//#endregion
 
-// Convenience functions
+//#region rawString(), t(), and e()
 
 export const rawString = string =>
   new MetaRawString(string)
 
-const createMetaTextNode = textContent =>
+export const t = textContent =>
   new MetaTextNode(textContent)
 
-const createMetaElement = name => (...variadic) => {
-  const meta = new MetaElement(name)
+export const e = name => (...variadic) => {
+  const element = new MetaElement(name)
 
-  // Implement optional attributes as first argument
-  if (!isMetaNodeChild(variadic[0]))
-    [meta.attributes, ...meta.children] = variadic
-  else {
-    meta.attributes = {}
-    meta.children = variadic
+  // If there are no props
+  if (isMetaChild(variadic[0])) {
+    element.children.push(...variadic)
+    return element
   }
 
-  return meta
-}
+  // If props exist as the first variadic argument
+  const [props, ...children] = variadic
 
-// 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)
+  // The bruh prop is reserved for future use
+  delete props.bruh
 
-    // These are attributes then, but they might be null/undefined
-    meta.attributes = attributesOrProps || {}
-    meta.children = children
-
-    return meta
+  // Apply overloaded props, if possible
+  if (typeof props.style === "object") {
+    applyStyles(element, props.style)
+    delete props.style
+  }
+  if (typeof props.class === "object") {
+    applyClasses(element, props.class)
+    delete props.class
   }
+  // The rest of the props are attributes
+  applyAttributes(element, props)
 
-  // 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 }) )
+  // Add the children to the element
+  element.children.push(...children)
+  return element
 }
 
-// These will be called with short names
-export {
-  createMetaTextNode   as t,
-  createMetaElement    as e,
-  createMetaElementJSX as h
+//#endregion
+
+//#region JSX integration
+
+// 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)
+  }
+
+  // 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

package/src/dom/live-fragment.mjs

@@ -9,10 +9,8 @@
 // Also, make sure not to call .normalize() on the parent element,
 // because that would ruin the placeholders.
 export class LiveFragment {
-  constructor() {
-    this.startMarker = document.createTextNode("")
-    this.endMarker   = document.createTextNode("")
-  }
+  startMarker = document.createTextNode("")
+  endMarker   = document.createTextNode("")
 
   static from(firstNode, lastNode) {
     const liveFragment = new this()

package/src/reactive/index.mjs

@@ -1,4 +1,4 @@
-const isReactive = Symbol.for("bruh reactive")
+export const isReactive = Symbol.for("bruh reactive")
 
 // A super simple and performant reactive value implementation
 export class SimpleReactive {
@@ -79,7 +79,7 @@ export class FunctionalReactive {
   }
 
   set value(newValue) {
-    // Only allow souce nodes to be directly updated
+    // Only allow source nodes to be directly updated
     if (this.#depth !== 0)
       return
 

package/src/util/index.mjs

@@ -31,20 +31,6 @@ export const createDestructable = (object, iterable) => {
   return destructable
 }
 
-// A function that acts like Maybe.from(x).ifExists(existsThen).ifEmpty(emptyThen)
-// Except we just use an array in place of a true Maybe type
-// This is useful for setting and removing reactive attributes
-export const maybeDo = (existsThen, emptyThen) => x => {
-  if (Array.isArray(x)) {
-    if (x.length)
-      existsThen(x[0])
-    else
-      emptyThen()
-  }
-  else
-    existsThen(x)
-}
-
 // Creates an object (as a Proxy) that acts as a function
 // So functionAsObject(f).property is equivalent to f("property")
 // This is can be useful when combined with destructuring syntax, e.g.:

package/src/reactive/index.d.ts

@@ -1,31 +0,0 @@
-export declare const isReactive: unique symbol
-
-export declare type Reactive<T> = {
-  [isReactive]: true
-  value: T
-  addReaction: (reaction: Function) => Function
-}
-
-export declare const reactiveDo: {
-  <T>(reactive: Reactive<T>, f: (value: T) => unknown): Function
-  <T>(value: T, f: (value: T) => unknown): void
-}
-
-export declare class SimpleReactive<T> implements Reactive<T> {
-  constructor(value: T)
-
-  [isReactive]: true
-  get value(): T
-  set value(newValue: T)
-  addReaction(reaction: Function): () => boolean
-}
-
-export declare class FunctionalReactive<T> implements Reactive<T> {
-  constructor(value: T)
-  constructor(dependencies: Iterable<FunctionalReactive<unknown>>, f: () => T)
-
-  [isReactive]: true
-  get value(): T
-  set value(newValue: T)
-  addReaction(reaction: Function): () => boolean
-}