5 ms·
This is the whole code: (() => { const assignDeep = (elm, props) => Object.entries(props).forEach(([key, value]) => typeof value === 'object' ? ass
by synergy20 2y ago
This is the whole code:
(() => {
const assignDeep = (elm, props) => Object.entries(props).forEach(([key, value]) =>
typeof value === 'object' ? assignDeep(elm[key], value) : Object.assign(elm, {[key]: value}))
const tagNames = ['a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', 'bdi', 'bdo', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'cite', 'code', 'col', 'colgroup', 'data', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hr', 'html', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'label', 'legend', 'li', 'link', 'main', 'map', 'mark', 'meta', 'meter', 'nav', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'section', 'select', 'small', 'source', 'span', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'template', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video', 'wbr' ].forEach(tag => window[tag] = function(...args) {
const props = typeof args[0] == 'object' && !(args[0] instanceof HTMLElement) ? args.shift() : null
const elm = document.createElement(tag)
props && assignDeep(elm, props)
elm.append(...args.map(a => typeof a == 'string' ? document.createTextNode(a) : a))
return elm
})
window['$'] = selector => document.querySelector(selector)
window['$$'] = selector => Array.from(document.querySelectorAll(selector))
})()
- synergy20 2y agowindow['$'] = selector => document.querySelector(selector) window['$$'] = selector => Array.from(document.querySelectorAll(selector)) is really what I want to have
- iudqnolq 2y agoI'm quite fond of a little helper like so: createElement({ className: 'p-2 flex justify-end', contents: createElement({ tag: 'img', src: '/os-logo-maps.svg' }), }); I got the idea from Lea Verou's blissfuljs. When you're creating a bunch of nested elements it comes in handy.
- meow_catrix 2y agoThat’s React without the JSX sugar.
- smusamashah 2y agoWhat's the point of the rest of the code? Looks useless.
- jazzypants 2y agoWhy do you pollute the global scope with all this crap? It's 2024, dude. Just make an ESM module.
- deleted 2y ago[deleted]