µDOM

Table of Contents generated with DocToc

• What it Is
• Installation
• API
  • DOM
  • TEXT
  • KB
• How to Use It
• To Do

What it Is

utilities to handle DOM-related tasks

Installation

npm install -g mudom
browserify -r mudom -o app/static/browserified/mudom.js

API

DOM

TEXT

KB

Demo on https://loveencounterflow.github.io/hengist/dev/mudom/static/index.html

How to Use It

• runs in the browser using browserify

To Do

• [–] absorb µ.keyboard-modifier-emitter.js (svelte app2)

• [–] absorb src/components/Toolbox/index.svelte#µ_DOM_detect_doublekey_events()

• [–] documentation

• [–] offer browserified builds

• [–] allow lists of elements with event binding

• [–] include things like computedStyleMap(), attributeStyleMap, computedStyleMap() from CSS Houdini

  • https://www.smashingmagazine.com/2020/03/practical-overview-css-houdini/
  • https://web.dev/houdini-how/?utm_campaign=CSS%2BLayout%2BNews&utm_medium=web&utm_source=CSS_Layout_News_281
  • https://web.dev/css-props-and-vals/
  • https://houdini.how/

• [–] export classes Dom, Text, &c.

• [–] this should work but doesn't:

  sub_document  = iframe.contentDocument
  first_tracker = µ.DOM.select_first_from sub_document, '.tracker'

  Error message is not a valid delement: HTMLDocument{...; suspicion is that HTMLDocument should be accepted as a (DOM) element

  Note the real problem is not the test x instanceof Element, the problem lies in the realm-crossing nature of the <iframe> element

  • solution might be to just check for presence of relevant API (like element.querySelectorAll?)

• [–] allow to instantiate with virtual DOM object so µDOM can be used outside the browser

• [–] integrate XPath &c from playlist µDOM2

• [–] remove µ.DOM.select_*_from() methods; instead allow µ.DOM.select_first(), µ.DOM.select_all() to take one or two parameters

• [–] ??? allow to pass in document on creation as it can differ from main document within iframes

• [–] don't reference µ from with libraries, use private ref to avoid name collisions

• [–] move loupe.js to deps

• [–] integrate method to monitor all events in document or on given element as discussed in https://stackoverflow.com/a/72945018:

  for (const key in document) if (key.startsWith('on')) document.addEventListener(key.slice(2), console.log);

  // https://stackoverflow.com/a/72945018/319266
  function monitorEvents(element) {
    for (const key in element) {
      if (key.startsWith('on')) {
        element.addEventListener(key.slice(2), console.log);
      }
    }
  }