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

41–50 of 94 posts

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

#41

Post by tomp »

nikeee wrote: post #38
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…

You can use tagged template functions to escape `${text}`. The result is pretty close to lit-html [1]. [1]: https://lit.dev/docs/v1/lit-html/introduction/

beautiful!

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

#42

Post by iudqnolq »

meow_catrix wrote: post #37
iudqnolq wrote: post #23

Earlier quoted context omitted.

I'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.

That’s React without the JSX sugar.

Yes, and?

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

#43

Post by KTibow »

EMM_386 wrote: post #5

I do believe I've seen something like this under another name. Using "$" to shorten JavaScript? That seems a lot like jQuery. > This README was generated by ChatGPT You don't need AI to explain this one.

I think the point is to be a more lightweight version, same spirit as HTMX

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

#44

Post by rikafurude21 »

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…

Makes sense to me, looks better. writing html strings like that is annoying

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

#45

Post by emmanueloga_ »

I use this:

    export const $ = document.querySelector.bind(document);
    export const $$ = document.querySelectorAll.bind(document);
When using TypeScript the types for querySelectorAll are a bit hairy to map but by defining the consts like above the types "just work".

    for (const tag of $$("p")) ...
I don't use Array.from in the result of $$ because sometimes creating an Array is not necessary. The NodeList returned can be iterated directly or converted to an array later if really needed:

    [...$$("p")].map(p => ...)
Since I use TypeScript I lean on TSX for building HTML. I use preact's render-to-string package to convert it to a string [1].

---

1: https://github.com/preactjs/preact-render-to-string

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

#46

Post by qingcharles »

dpweb wrote: post #27

If ya don't want to do includes, ` window.$ = document.querySelector.bind(document) window.$$ = document.querySelectorAll.bind(document) `

Thanks, this is the more useful bit of the code to me.

edit: how about this so you can use array functions too when you need?

window.$ = document.querySelector.bind(document);

window.$$ = document.querySelectorAll.bind(document);

window.$$$ = (selector) => Array.from(document.querySelectorAll(selector));

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

#48

Post by TimTheTinker »

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.createElement('div');
        div.textContent = unsafeStr;
        return div.innerHTML;
    };
    
    const htmlFragment = (fragments, ...variables) => {
        const result = variables.map((variable, i) => fragments[i] + sanitizeHTML(variable));
        result.push(fragments[fragments.length-1]);
        return result.join('');
    };
    
    // updated your code here
    
    const div = document.createElement('div');
    let text = 'This is a dynamically generated paragraph';
    
    div.innerHTML = htmlFragment`
      
        Hello world
        
${text}

      
    `;
    document.body.append(...div.children);
Unfortunately, to my knowledge there isn't yet a close-to-the-metal solution for templating and data binding in HTML/JS, although several proposals are currently being discussed.

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

#50

Post by akira2501 »

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, you can still enumerate it with Object.keys, which can sometimes be a useful debugging aid and general catalog of accessed elements.

Anyways.. Proxy is a wildly underappreciated and used class in JavaScript.

Post reply on HN