Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

TinyJS – Shorten JavaScript QuerySelect with $ and $$

github.com

Post reply on HN
Print view View original

81–90 of 94 posts

Re: TinyJS – Shorten JavaScript QuerySelect with $ and $$

#81

Post by spencerchubb »

tomp wrote: post #25

Why would this make any sense? const myDiv = div( {id: 'container', className: 'my-class'}, h1('Hello World'), p('This is a dynamically generated paragraph.') ); document.body.appendChild(myDiv); That's completely unnecessary these days with template strings. It's gonna be much faster as well to use browser's native parsing. const div = document.createElement('div'); let text = 'This is a dynamically generated paragr…

how would you add listeners if you were doing an html string? the first approach allows you to do something like this

``` const myButton = button({ onclick: e => console.log(e), textContent: "Click me" }) ```

Re: TinyJS – Shorten JavaScript QuerySelect with $ and $$

#82

Post by SahAssar »

The title ("TinyJS – Shorten JavaScript QuerySelect with $ and $$") seems to be about these two lines:

    window['$'] = selector => document.querySelector(selector)
    window['$$'] = selector => Array.from(document.querySelectorAll(selector))
The other part is a small & naive (and I mean that in the best way) DOM abstraction.

I think the discussion here seems to be about one or the other, not the thing as a whole.

Re: TinyJS – Shorten JavaScript QuerySelect with $ and $$

#85

Post by [deleted] »

synergy20 wrote: post #6

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', 'd…

[deleted]

Re: TinyJS – Shorten JavaScript QuerySelect with $ and $$

#87

Post by o11c »

akira2501 wrote: post #50

I've been using this for years: const $id = new Proxy({}, { // get element from cache, or from DOM get: (tgt, k, r) => (tgt[k] || ((r = document.getElementById(k)) && (tgt[k] = r))), // prevent programming errors set: () => $throw(`Attempt to overwrite id cache key!`) }); It's nice to be able to refer to elements by property name, so: Is reachable with: $id.thing And, since the underlying structure is just an object,…

Should that be `Object.create(null)` to avoid problems with ``?

Re: TinyJS – Shorten JavaScript QuerySelect with $ and $$

#88

Post by TimTheTinker »

spencerchubb wrote: post #81
tomp wrote: post #25

Why would this make any sense? const myDiv = div( {id: 'container', className: 'my-class'}, h1('Hello World'), p('This is a dynamically generated paragraph.') ); document.body.appendChild(myDiv); That's completely unnecessary these days with template strings. It's gonna be much faster as well to use browser's native parsing. const div = document.createElement('div'); let text = 'This is a dynamically generated paragr…

how would you add listeners if you were doing an html string? the first approach allows you to do something like this ``` const myButton = button({ onclick: e => console.log(e), textContent: "Click me" }) ```

Use topElement.querySelector('button'), then add the listener programmatically.

Re: TinyJS – Shorten JavaScript QuerySelect with $ and $$

#89

Post by makingstuffs »

TimTheTinker wrote: post #48
tomp wrote: post #25

Why would this make any sense? const myDiv = div( {id: 'container', className: 'my-class'}, h1('Hello World'), p('This is a dynamically generated paragraph.') ); document.body.appendChild(myDiv); That's completely unnecessary these days with template strings. It's gonna be much faster as well to use browser's native parsing. const div = document.createElement('div'); let text = 'This is a dynamically generated paragr…

Generally, I would recommend avoiding directly setting the innerHTML property, since it's vulnerable to XSS and other injection attacks. If you do, make sure you HTML-escape each variable you interpolate. Here's a way to do that with a tagged template function (named it `htmlFragment` to make it super clear what it's for): // a couple of functions to help const sanitizeHTML = (unsafeStr) => { const div = document.cre…

Would you not just be able to do the following:

    const div = document.createElement('div');
    const text = 'This is a dynamically generated paragraph';


    div.insertAdjacentHTML("beforeend", `
        Hello world
        
${text}

      `);

    document.body.append(...div.children);
Edit, figured I'd add the docs: https://developer.mozilla.org/en-US/docs/Web/API/Element/ins...

Re: TinyJS – Shorten JavaScript QuerySelect with $ and $$

#90

Post by gmac »

Reminds me of some simple tools I used years ago when CoffeeScript was big: https://github.com/jawj/affogato/blob/master/functions.coffe...

Nowadays I tend to use Mithril instead, because immediate-mode UI is so much less hassle than retained-mode: https://mithril.js.org/

Post reply on HN