You didn’t need a library to do this. Just alias document.querySelector and document.querySelectorAll to something shorter. Polluting the global namespace with functions to document.createElement on every possible html tag is not a good idea.
TinyJS – Shorten JavaScript QuerySelect with $ and $$
21–30 of 94 posts
Re: TinyJS – Shorten JavaScript QuerySelect with $ and $$
#22may I ask what's the point of `const tagNames =`? removing it would make no difference, as far as I can tell - just make sure the previous line ends with a semicolon (or add it at the same line as the opening square bracket)
Yes, exactly. The first two statements have no use in the last two lines that this library is for. Or may be I don't understand Javascript much.
Re: TinyJS – Shorten JavaScript QuerySelect with $ and $$
#23This 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…
window['$'] = selector => document.querySelector(selector) window['$$'] = selector => Array.from(document.querySelectorAll(selector)) is really what I want to have
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'
}),
});
Re: TinyJS – Shorten JavaScript QuerySelect with $ and $$
#24This 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…
window['$'] = selector => document.querySelector(selector) window['$$'] = selector => Array.from(document.querySelectorAll(selector)) is really what I want to have
What's the point of the rest of the code? Looks useless.
Re: TinyJS – Shorten JavaScript QuerySelect with $ and $$
#25Why 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);
const div = document.createElement('div');
let text = 'This is a dynamically generated paragraph';
div.innerHTML = `
Hello world
${text}
`;
document.body.append(...div.children);
Re: TinyJS – Shorten JavaScript QuerySelect with $ and $$
#26Like jQuery but for 2024?
jQuery? What are you, five?
We use jjQuey.
Re: TinyJS – Shorten JavaScript QuerySelect with $ and $$
#27If ya don't want to do includes,
` window.$ = document.querySelector.bind(document) window.$$ = document.querySelectorAll.bind(document) `
Re: TinyJS – Shorten JavaScript QuerySelect with $ and $$
#28Why 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…
One big difference and why I've been experimenting with JSX[1] is that in that example, if the `text` comes from an untrusted source it can lead to XSS, which TinyJS prevents (I checked)!
Re: TinyJS – Shorten JavaScript QuerySelect with $ and $$
#29may I ask what's the point of `const tagNames =`? removing it would make no difference, as far as I can tell - just make sure the previous line ends with a semicolon (or add it at the same line as the opening square bracket)
Well, it's polluting the global window scope with all those helpers. That's a reason to never use this imo. There are plenty of other jquery-lite helper libraries out there. 95 percent the utility with hardly any cost in terms of script size. Converting querySelectorAll to an array is honestly most of the benefit of these libraries.
> Converting querySelectorAll to an array is honestly most of the benefit of these libraries.
Now that NodeList is iterable, I don't even know that converting to an array is that useful anymore.
[...document.querySelector('div')] is pretty easy.
Iterator.from(document.querySelector('div')) too (doesn't work yet in Safari).
Re: TinyJS – Shorten JavaScript QuerySelect with $ and $$
#30Code is actually tiny. Impressive!
You could make it even smaller by removing all the element names, and just have it be passed in as an argument. Would also reduce the amount of functions you need to declare, though function count is likely not a problem for modern JS engines.
Anyway, great job you did there!