Playing Around With A Personal JavaScript Framework

April 2025

Giving It A Shot

This is from a while back. I was playing around with making my own basic Vanilla JavaScript framework (which I was calling YAGNI-JS because things are easier to talk about when they have a name).

The original draft post is here:

Introducing YAGNI JS

This is the code in its most recent state (which I'm not currently using because I'm messing with an overhaul as I write this)

////////////////////////////////////////////////////////////
// yagni-js

// TODO: Rename 'parent' to 'target'
// and internal 'target' to 'el'


function pageAddClassTo(target, className) {
  const el = pageGetEl(target)
  if (el) {
    el.classList.add(className)
    return el
  }
}

function pageAddListenerTo(target, event, func) {
  const el = pageGetEl(target)
  if (el) {
    el.addEventListener(event, func)
    return el
  }
}

function pageAddListenersTo(selector, event, func) {
  const els = document.querySelectorAll(selector)
  els.forEach((el) => {
    el.addEventListener(event, func)
  })
}

function pageAddSvgTo(target, tag, attrs = {}) {
  const el = pageGetEl(target)
  if (el) {
    const svg = document.createElementNS('http://www.w3.org/2000/svg', tag)
    pageUpdateSvgAttrs(svg, attrs)
    el.appendChild(svg)
    return svg
  }
}

function pageAddTo(target, tag, attrs = {}) {
  const el = pageGetEl(target)
  if (el) {
    const newEl = document.createElement(tag)
    pageUpdateAttrs(newEl, attrs)
    el.appendChild(newEl)
    return newEl
  }
}

function pageAddToFront(target, tag, attrs = {}) {
  const el = pageGetEl(target)
  if (el) {
    const newEl = document.createElement(tag)
    pageUpdateAttrs(newEl, attrs)
    if (el.hasChildNodes()) {
      const first_child = el.firstChild
      el.insertBefore(newEl, first_child)
    } else {
      el.appendChild(newEl)
    }
    return newEl
  }
}

function pageAppendText(target, text) {
  const el = pageGetEl(target)
  if (el) {
    el.innerText = el.innerText + text
  }
}

function pageGetData(target, key) {
  // TODO: get a data attribute value from an element
  // with JSON stringify
}

function pageGetEl(target) {
  if (typeof target === 'string') {
    const el = document.querySelector(target)
    if (el) {
      return el
    } else {
      pageLogError(`Could not find querySelector for: ${target}`)
      return undefined
    }
  } else if (target) {
    return target
  } else {
    pageLogError(`Could not get element: ${target}`)
    return

To Be Continued...

I'll probably play around with it again at some point. Leaving it here for now as a reference.

-a

end of line