)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}

selectAll Thoughts

  1. const lookup = new WeakMap() 
  2.  
  3. let id = 0;
  4.  
  5. export const els = selectAll(document.body)
  6. export const parentOf = el => lookup.get(el)
  7.  
  8. export function selectAll(parent) {
  9.   const els = { id, el: parent, all: {} }
  10.   const allEls = [...parent.querySelectorAll('*')]
  11.  
  12.   id++
  13.  
  14.   for (let i in allEls) {
  15.     const el = allEls[i]
  16.  
  17.     // any element can lookup `els`
  18.     lookup.set(el, els)
  19.  
  20.     const tag = el.tagName.toLowerCase()
  21.  
  22.     if (el.id) {
  23.       els[el.id] = el
  24.  
  25.       tag === 'template' &&
  26.         (els[el.id + 'Tmpl'] = () => {
  27.           const instanceEl = el.content
  28.             .cloneNode(true)
  29.             .firstElementChild
  30.           return selectAll(
  31.             instanceEl
  32.           )
  33.         })
  34.     }
  35.  
  36.     if (el.classList.length > 0) {
  37.       const name = el.classList[0]
  38.  
  39.       if (!els[name]) { 
  40.         els[name] = el
  41.         els.all[name] = [el]
  42.       } else {
  43.         els.all[name].push(el)
  44.       }
  45.     }
  46.   }
  47.   return els;
  48. }

Whenever I code a vanilla gui for some personal project/experiment I write some variation of this. I did this one a few days back to see how it would work with template tags.

// tricks // ui
snippet.zone ~ 2021-22 /// {s/z}