bruh 1.13.1 → 2.0.0-beta.1

package/src/dom/index.browser.mjs

@@ -1,270 +0,0 @@
-import { isReactive, reactiveDo } from "../reactive/index.mjs"
-
-//#region Bruh child functions e.g. bruhChildrenToNodes()
-
-// 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 isBruhChild = x =>
-  // Reactives and DOM nodes
-  x?.[isReactive] ||
-  x instanceof Node ||
-  // Any array, just assume it contains valid children
-  Array.isArray(x) ||
-  // 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 unreactiveChildToNode = x => {
-  // Existing DOM nodes are untouched
-  if (x instanceof Node)
-    return x
-  // booleans and nullish are ignored
-  else if (typeof x === "boolean" || x === undefined || x === null)
-    return document.createComment(x)
-  // Anything else is treated as text
-  else
-    return document.createTextNode(x)
-}
-
-// Auto-swapping single reactive node
-const reactiveChildToNode = child => {
-  let node = unreactiveChildToNode(child.value)
-
-  const stopReacting = child.addReaction(() => {
-    // Stop swapping if no longer possible
-    if (!node.parentNode) {
-      stopReacting()
-      return
-    }
-
-    // Normal swap
-    if (!Array.isArray(child.value)) {
-      const oldNode = node
-      node = unreactiveChildToNode(child.value)
-      oldNode.replaceWith(node)
-    }
-    // If an array now, stop swapping, then switch to reactive array swapping
-    else {
-      stopReacting()
-      node.replaceWith(...reactiveArrayChildToNodes(child))
-    }
-  })
-
-  return node
-}
-
-// Auto-swapping reactive array of nodes
-const reactiveArrayChildToNodes = child => {
-  // Markers owned by the swapper here itself, so that
-  // the values in the array can be swapped separately
-  const first = document.createComment("[")
-  const last  = document.createComment("]")
-
-  const stopReacting = child.addReaction(() => {
-    // Stop swapping if there is no parent to swap within
-    if (!first.parentNode) {
-      stopReacting()
-      return
-    }
-
-    // Make a range starting after the first marker
-    const range = document.createRange()
-    range.setStartAfter(first)
-
-    // Normal swap, replacing content between the first and last markers
-    if (Array.isArray(child.value)) {
-      range.setEndBefore(last)
-      range.deleteContents()
-      first.after(...bruhChildrenToNodes(child.value))
-    }
-    // Switch to single swapping node by replacing everything
-    else {
-      stopReacting()
-      range.setEndAfter(last)
-      range.deleteContents()
-      first.replaceWith(reactiveChildToNode(child))
-    }
-  })
-
-  return [
-    first,
-    ...bruhChildrenToNodes(child.value),
-    last
-  ]
-}
-
-// 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 child
-      if (!child?.[isReactive])
-        return [unreactiveChildToNode(child)]
-
-      // Single reactive value
-      if (!Array.isArray(child.value))
-        return [reactiveChildToNode(child)]
-
-      // Reactive array
-      return reactiveArrayChildToNodes(child)
-    })
-
-//#endregion
-
-//#region Reactive-aware element helper functions e.g. applyAttributes()
-
-// 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)
-    })
-}
-
-// 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)
-    })
-}
-
-// 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)
-    })
-}
-
-//#endregion
-
-//#region t() for text nodes and e() for element nodes
-
-// Text nodes
-export const t = textContent => {
-  // Non-reactive values are just text nodes
-  if (!textContent[isReactive])
-    return document.createTextNode(textContent)
-
-  // Reactive values auto-update the node's text content
-  const node = document.createTextNode(textContent.value)
-  textContent.addReaction(() => {
-    node.textContent = textContent.value
-  })
-  return node
-}
-
-// Elements
-export const e = name => (...variadic) => {
-  if (variadic.length === 0)
-    return document.createElement(name)
-
-  // If there are no props
-  if (isBruhChild(variadic[0])) {
-    const element = document.createElement(name)
-    element.append(...bruhChildrenToNodes(variadic))
-    return element
-  }
-
-  // If props exist as the first variadic argument
-  const [props, ...children] = variadic
-
-  // Extract explicit options from the bruh prop
-  const { namespace } = props.bruh ?? {}
-  delete props.bruh
-
-  // Make an element with optional namespace
-  const element =
-    namespace
-      ? document.createElementNS(namespace, name)
-      : document.createElement  (           name)
-
-  // Apply overloaded props, if possible
-
-  // Inline style object
-  if (typeof props.style === "object" && !props.style[isReactive]) {
-    applyStyles(element, props.style)
-    delete props.style
-  }
-  // Classes object
-  if (typeof props.class === "object" && !props.class[isReactive]) {
-    applyClasses(element, props.class)
-    delete props.class
-  }
-  for (const name in props) {
-    // Event listener functions
-    if (name.startsWith("on") && typeof props[name] === "function") {
-      element.addEventListener(name.slice(2), props[name])
-      delete props[name]
-    }
-  }
-
-  // The rest of the props are attributes
-  applyAttributes(element, props)
-
-  // Add the children to the element
-  element.append(...bruhChildrenToNodes(children))
-  return element
-}
-
-//#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
-
-
-
-// Hydration of all bruh-textnode's from prerendered html
-export const hydrateTextNodes = () => {
-  const tagged = {}
-  const bruhTextNodes = document.getElementsByTagName("bruh-textnode")
-
-  for (const bruhTextNode of bruhTextNodes) {
-    const textNode = document.createTextNode(bruhTextNode.textContent)
-
-    const tag = bruhTextNode.getAttribute("tag")
-    if (tag)
-      tagged[tag] = textNode
-
-    bruhTextNode.replaceWith(textNode)
-  }
-
-  return tagged
-}

package/src/dom/index.server.mjs

@@ -1,280 +0,0 @@
-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",
-  "link",
-  "meta",
-
-  "hr",
-  "br",
-  "wbr",
-
-  "area",
-  "img",
-  "track",
-
-  "embed",
-  "param",
-  "source",
-
-  "col",
-
-  "input"
-]
-
-const isVoidElement = element =>
-  voidElements.includes(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, "&")
-    .replace(/</g, "&lt;")
-
-// https://html.spec.whatwg.org/multipage/syntax.html#syntax-attribute-value
-const escapeForDoubleQuotedAttribute = x =>
-  (x + "")
-    .replace(/&/g, "&amp;")
-    .replace(/"/g, "&quot;")
-
-// 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 isMetaChild = x =>
-  // meta nodes, reactives, and DOM nodes
-  x?.[isMetaNode] ||
-  x?.[isMetaRawString] ||
-  // Any array, just assume it contains valid children
-  Array.isArray(x) ||
-  // Allow nullish
-  x == null ||
-  // Disallow functions and objects
-  !(typeof x === "function" || typeof x === "object")
-  // Everything else can be a child when stringified
-
-
-//#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 {
-  [isMetaNode]     = true;
-  [isMetaTextNode] = true
-
-  textContent
-  tag
-
-  constructor(textContent) {
-    this.textContent = textContent
-  }
-
-  toString() {
-    const tag = this.tag
-      ? ` tag="${escapeForDoubleQuotedAttribute(this.tag)}"`
-      : ""
-    return `<bruh-textnode style="all:unset;display:inline"${tag}>${
-      escapeForElement(this.textContent)
-    }</bruh-textnode>`
-  }
-
-  setTag(tag) {
-    this.tag = tag
-
-    return this
-  }
-}
-
-// A light model of an element
-export class MetaElement {
-  [isMetaNode]    = true;
-  [isMetaElement] = true
-
-  name
-  attributes = {}
-  children = []
-
-  constructor(name) {
-    this.name = name
-  }
-
-  toString() {
-    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)
-      .filter(x => typeof x !== "boolean" && x !== undefined && x !== null)
-      .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
-  }
-}
-
-// 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
-
-  constructor(string) {
-    super(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(";")
-}
-
-// 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
-
-//#region rawString(), t(), and e()
-
-export const rawString = string =>
-  new MetaRawString(string)
-
-export const t = textContent =>
-  new MetaTextNode(textContent)
-
-export const e = name => (...variadic) => {
-  const element = new MetaElement(name)
-
-  if (variadic.length === 0)
-    return element
-
-  // If there are no props
-  if (isMetaChild(variadic[0])) {
-    element.children.push(...variadic)
-    return element
-  }
-
-  // If props exist as the first variadic argument
-  const [props, ...children] = variadic
-
-  // The bruh prop is reserved for future use
-  delete props.bruh
-
-  // 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)
-
-  // Add the children to the element
-  element.children.push(...children)
-  return element
-}
-
-//#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/index.browser.mjs

@@ -1,3 +0,0 @@
-export * as dom          from "./dom/index.browser.mjs"
-export * as reactive     from "./reactive/index.mjs"
-export * as util         from "./util/index.mjs"

package/src/media/images.node.mjs

@@ -1,70 +0,0 @@
-import sharp from "sharp"
-import { readdir, writeFile } from "fs/promises"
-import { extname, join } from "path"
-
-const avif = async (filePath, sharpInstance) =>
-  sharpInstance
-    .avif({  })
-    .toFile(`${filePath}.avif`)
-
-const webp = async (filePath, sharpInstance) =>
-  sharpInstance
-    .webp({  })
-    .toFile(`${filePath}.webp`)
-
-// Low Quality Image Placeholder inline css for the <img> style attribute
-const json = async (filePath, sharpInstance) => {
-  const imageManifest = {}
-
-  const metadata = await sharpInstance.metadata()
-  imageManifest.format = metadata.format
-  imageManifest.width  = metadata.width
-  imageManifest.height = metadata.height
-
-  const buffer = await sharpInstance
-    .resize({ fit: "inside", width: 16, height: 16 })
-    .blur()
-    .webp({ reductionEffort: 6 })
-    .toBuffer()
-
-  imageManifest.lqip = `data:image/webp;base64,${buffer.toString("base64")}`
-  return writeFile(`${filePath}.json`, JSON.stringify(imageManifest))
-}
-
-const getUnprocessedImages = async directory => {
-  const directoryEntries = await readdir(directory, { withFileTypes: true })
-  
-  const promisedUnproccessedImages = directoryEntries
-    .map(async entry => {
-      const entryPath = join(directory, entry.name)
-
-      if (entry.isDirectory())
-        return await getUnprocessedImages(entryPath)
-
-      if (
-        entry.name[0] == "." ||
-        [".avif", ".webp", ".json"]
-          .includes(extname(entry.name)) ||
-        directoryEntries.some(siblingEntry =>
-          [".avif", ".webp", ".json"]
-            .map(processedExtention => `${entry.name}${processedExtention}`)
-            .includes(siblingEntry.name)
-        )
-      )
-        return []
-
-      return [entryPath]
-    })
-  
-  return (await Promise.all(promisedUnproccessedImages)).flat()
-}
-
-export const processImages = async directory => {
-  const unprocessedImages = await getUnprocessedImages(directory)
-  for (const filePath of unprocessedImages) {
-    await Promise.all(
-      [avif, webp, json]
-        .map(process => process(filePath, sharp(filePath)))
-    )
-  }
-}