zero-query 0.4.9 → 0.5.2

package/README.md

@@ -162,7 +162,7 @@ my-app/
 
 ## CLI Bundler
 
-The CLI can compile your entire app — ES modules, the library, external templates, and assets — into a **single bundled file**.
+The CLI compiles your entire app — ES modules, the library, external templates, and assets — into a **single production-ready bundle**. It outputs two builds in one step: a `server/` build for deploying to any web server, and a `local/` build that works straight from disk. No config, no flags — just point it at your app.
 
 ```bash
 # Auto-detect entry from any .html with a module script
@@ -170,6 +170,9 @@ npx zquery bundle
 
 # Or point to an app directory from anywhere
 npx zquery bundle my-app/
+
+# Or pass a direct entry file (skips auto-detection)
+npx zquery bundle my-app/scripts/main.js
 ```
 
 Output goes to `dist/` next to your `index.html`:
@@ -192,7 +195,8 @@ dist/
 | Flag | Short | Description |
 | --- | --- | --- |
 | `--out <path>` | `-o` | Custom output directory |
-| `--html <file>` | — | Use a specific HTML file |
+| `--index <file>` | `-i` | Index HTML file (default: auto-detected) |
+| `--minimal` | `-m` | Only output HTML + bundled JS (skip static assets) |
 
 ### What the Bundler Does
 
@@ -261,8 +265,8 @@ location / {
 | CLI Command | Description |
 | --- | --- |
 | `zquery create [dir]` | Scaffold a new project (index.html, components, store, styles) |
-| `zquery dev [root]` | Dev server with live-reload &amp; error overlay (port 3100) |
-| `zquery bundle [dir]` | Bundle app into a single IIFE file |
+| `zquery dev [root]` | Dev server with live-reload &amp; error overlay (port 3100). `--index` for custom HTML. |
+| `zquery bundle [dir\|file]` | Bundle app into a single IIFE file. Accepts dir or direct entry file. |
 | `zquery build` | Build the zQuery library (`dist/zQuery.min.js`) |
 | `zquery --help` | Show CLI usage |
 

package/cli/commands/bundle.js

@@ -13,7 +13,7 @@ const fs     = require('fs');
 const path   = require('path');
 const crypto = require('crypto');
 
-const { args, option }        = require('../args');
+const { args, flag, option }   = require('../args');
 const { minify, sizeKB }      = require('../utils');
 const buildLibrary             = require('./build');
 
@@ -104,6 +104,8 @@ function rewriteResourceUrls(code, filePath, projectRoot) {
     (match, prefix, quote, url) => {
       if (url.startsWith('/') || url.includes('://')) return match;
       const abs = path.resolve(fileDir, url);
+      // Only rewrite if the file actually exists — avoids mangling code examples
+      if (!fs.existsSync(abs)) return match;
       const rel = path.relative(projectRoot, abs).replace(/\\/g, '/');
       return `${prefix}${quote}${rel}${quote}`;
     }
@@ -379,18 +381,68 @@ function rewriteHtml(projectRoot, htmlRelPath, bundleFile, includeLib, bundledFi
   console.log(`  ✓ Copied ${copiedCount} asset(s) into both dist dirs`);
 }
 
+// ---------------------------------------------------------------------------
+// Static asset copying
+// ---------------------------------------------------------------------------
+
+/**
+ * Copy the entire app directory into both dist/server and dist/local,
+ * skipping only build outputs and tooling dirs.  This ensures all static
+ * assets (icons/, images/, fonts/, styles/, scripts/, manifests, etc.)
+ * are available in the built output without maintaining a fragile whitelist.
+ */
+function copyStaticAssets(appRoot, serverDir, localDir, bundledFiles) {
+  const SKIP_DIRS = new Set(['dist', 'node_modules', '.git', '.vscode', 'scripts']);
+
+  let copiedCount = 0;
+
+  function copyEntry(srcPath, relPath) {
+    const stat = fs.statSync(srcPath);
+    if (stat.isDirectory()) {
+      if (SKIP_DIRS.has(path.basename(srcPath))) return;
+      for (const child of fs.readdirSync(srcPath)) {
+        copyEntry(path.join(srcPath, child), path.join(relPath, child));
+      }
+    } else {
+      if (bundledFiles && bundledFiles.has(path.resolve(srcPath))) return;
+      for (const distDir of [serverDir, localDir]) {
+        const dest = path.join(distDir, relPath);
+        if (fs.existsSync(dest)) continue; // already copied by rewriteHtml
+        const dir = path.dirname(dest);
+        if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
+        fs.copyFileSync(srcPath, dest);
+      }
+      copiedCount++;
+    }
+  }
+
+  for (const entry of fs.readdirSync(appRoot, { withFileTypes: true })) {
+    if (entry.isDirectory()) {
+      if (SKIP_DIRS.has(entry.name)) continue;
+      copyEntry(path.join(appRoot, entry.name), entry.name);
+    } else {
+      copyEntry(path.join(appRoot, entry.name), entry.name);
+    }
+  }
+
+  if (copiedCount > 0) {
+    console.log(`  \u2713 Copied ${copiedCount} additional static asset(s) into both dist dirs`);
+  }
+}
+
 // ---------------------------------------------------------------------------
 // Main bundleApp function
 // ---------------------------------------------------------------------------
 
 function bundleApp() {
   const projectRoot = process.cwd();
+  const minimal = flag('minimal', 'm');
 
-  // Entry point — accepts a directory (auto-detects entry inside it) or a file
+  // Entry point — positional arg (directory or file) or auto-detection
   let entry = null;
   let targetDir = null;
   for (let i = 1; i < args.length; i++) {
-    if (!args[i].startsWith('-') && args[i - 1] !== '-o' && args[i - 1] !== '--out' && args[i - 1] !== '--html') {
+    if (!args[i].startsWith('-') && args[i - 1] !== '-o' && args[i - 1] !== '--out' && args[i - 1] !== '--index') {
       const resolved = path.resolve(projectRoot, args[i]);
       if (fs.existsSync(resolved) && fs.statSync(resolved).isDirectory()) {
         targetDir = resolved;
@@ -405,16 +457,19 @@ function bundleApp() {
 
   if (!entry || !fs.existsSync(entry)) {
     console.error(`\n  \u2717 Could not find entry file.`);
-    console.error(`    Provide an app directory: zquery bundle my-app/\n`);
+    console.error(`    Provide an app directory: zquery bundle my-app/`);
+    console.error(`    Or pass a direct entry file: zquery bundle my-app/scripts/main.js\n`);
     process.exit(1);
   }
 
   const outPath = option('out', 'o', null);
 
-  // Auto-detect index.html
-  let htmlFile = option('html', null, null);
+  // Auto-detect HTML file
+  let htmlFile = option('index', 'i', null);
   let htmlAbs  = htmlFile ? path.resolve(projectRoot, htmlFile) : null;
   if (!htmlFile) {
+    // Strategy: first look for index.html walking up from entry, then
+    // scan for any .html that references the entry via a module script tag.
     const htmlCandidates = [];
     let entryDir = path.dirname(entry);
     while (entryDir.length >= projectRoot.length) {
@@ -432,6 +487,47 @@ function bundleApp() {
         break;
       }
     }
+
+    // If no index.html found, scan for any .html file that references
+    // the entry point (supports home.html, app.html, etc.)
+    if (!htmlAbs) {
+      const searchRoot = targetDir || projectRoot;
+      const htmlScan = [];
+      for (const e of fs.readdirSync(searchRoot, { withFileTypes: true })) {
+        if (e.isFile() && e.name.endsWith('.html')) {
+          htmlScan.push(path.join(searchRoot, e.name));
+        } else if (e.isDirectory() && !e.name.startsWith('.') && e.name !== 'node_modules' && e.name !== 'dist') {
+          try {
+            for (const child of fs.readdirSync(path.join(searchRoot, e.name), { withFileTypes: true })) {
+              if (child.isFile() && child.name.endsWith('.html')) {
+                htmlScan.push(path.join(searchRoot, e.name, child.name));
+              }
+            }
+          } catch { /* skip */ }
+        }
+      }
+      // Prefer the HTML file that references our entry via a module script
+      const moduleScriptRe = /<script[^>]+type\s*=\s*["']module["'][^>]+src\s*=\s*["']([^"']+)["']/g;
+      for (const hp of htmlScan) {
+        const content = fs.readFileSync(hp, 'utf-8');
+        let m;
+        moduleScriptRe.lastIndex = 0;
+        while ((m = moduleScriptRe.exec(content)) !== null) {
+          const resolved = path.resolve(path.dirname(hp), m[1]);
+          if (resolved === path.resolve(entry)) {
+            htmlAbs  = hp;
+            htmlFile = path.relative(projectRoot, hp);
+            break;
+          }
+        }
+        if (htmlAbs) break;
+      }
+      // Last resort: use the first .html found
+      if (!htmlAbs && htmlScan.length > 0) {
+        htmlAbs  = htmlScan[0];
+        htmlFile = path.relative(projectRoot, htmlScan[0]);
+      }
+    }
   }
 
   // Output directory
@@ -459,7 +555,8 @@ function bundleApp() {
   console.log(`  Entry:   ${entryRel}`);
   console.log(`  Output:  ${path.relative(projectRoot, baseDistDir)}/server/ & local/`);
   console.log(`  Library: embedded`);
-  console.log(`  HTML:    ${htmlFile || 'not found (no index.html detected)'}`);
+  console.log(`  HTML:    ${htmlFile || 'not found (no HTML detected)'}`);
+  if (minimal) console.log(`  Mode:    minimal (HTML + bundle only)`);
   console.log('');
 
   // ------ doBuild (inlined) ------
@@ -571,10 +668,16 @@ function bundleApp() {
   console.log(`\n  ✓ ${bundleBase} (${sizeKB(fs.readFileSync(bundleFile))} KB)`);
   console.log(`  ✓ ${minBase} (${sizeKB(fs.readFileSync(minFile))} KB)`);
 
-  // Rewrite HTML
+  // Rewrite HTML (use full bundle — minified version mangles template literal whitespace)
+  const bundledFileSet = new Set(files);
   if (htmlFile) {
-    const bundledFileSet = new Set(files);
-    rewriteHtml(projectRoot, htmlFile, minFile, true, bundledFileSet, serverDir, localDir);
+    rewriteHtml(projectRoot, htmlFile, bundleFile, true, bundledFileSet, serverDir, localDir);
+  }
+
+  // Copy static asset directories (icons/, images/, fonts/, etc.)
+  if (!minimal) {
+    const appRoot = htmlAbs ? path.dirname(htmlAbs) : (targetDir || projectRoot);
+    copyStaticAssets(appRoot, serverDir, localDir, bundledFileSet);
   }
 
   const elapsed = Date.now() - start;

package/cli/commands/dev.js

@@ -321,10 +321,13 @@ function devServer() {
 
   const { createApp, static: serveStatic } = zeroHttp;
 
+  // Custom HTML entry file (default: index.html)
+  const htmlEntry = option('index', 'i', 'index.html');
+
   // Determine the project root to serve
   let root = null;
   for (let i = 1; i < args.length; i++) {
-    if (!args[i].startsWith('-') && args[i - 1] !== '-p' && args[i - 1] !== '--port') {
+    if (!args[i].startsWith('-') && args[i - 1] !== '-p' && args[i - 1] !== '--port' && args[i - 1] !== '--index') {
       root = path.resolve(process.cwd(), args[i]);
       break;
     }
@@ -336,7 +339,7 @@ function devServer() {
       path.join(process.cwd(), 'src'),
     ];
     for (const c of candidates) {
-      if (fs.existsSync(path.join(c, 'index.html'))) { root = c; break; }
+      if (fs.existsSync(path.join(c, htmlEntry))) { root = c; break; }
     }
     if (!root) root = process.cwd();
   }
@@ -389,9 +392,9 @@ function devServer() {
       res.status(404).send('Not Found');
       return;
     }
-    const indexPath = path.join(root, 'index.html');
+    const indexPath = path.join(root, htmlEntry);
     if (!fs.existsSync(indexPath)) {
-      res.status(404).send('index.html not found');
+      res.status(404).send(`${htmlEntry} not found`);
       return;
     }
     let html = fs.readFileSync(indexPath, 'utf-8');
@@ -495,6 +498,7 @@ function devServer() {
     console.log(`  \x1b[2m${'-'.repeat(40)}\x1b[0m`);
     console.log(`  Local:       \x1b[36mhttp://localhost:${PORT}/\x1b[0m`);
     console.log(`  Root:        ${path.relative(process.cwd(), root) || '.'}`);
+    if (htmlEntry !== 'index.html') console.log(`  HTML:        \x1b[36m${htmlEntry}\x1b[0m`);
     console.log(`  Live Reload: \x1b[32menabled\x1b[0m (SSE)`);
     console.log(`  Overlay:     \x1b[32menabled\x1b[0m (syntax + runtime errors)`);
     if (noIntercept) console.log(`  Intercept:   \x1b[33mdisabled\x1b[0m (--no-intercept)`);

package/cli/help.js

@@ -12,6 +12,7 @@ function showHelp() {
 
     dev [root]                 Start a dev server with live-reload
       --port, -p <number>     Port number (default: 3100)
+      --index, -i <file>        Index HTML file (default: index.html)
       --no-intercept           Disable auto-resolution of zquery.min.js
                                (serve the on-disk vendor copy instead)
 
@@ -20,9 +21,10 @@ function showHelp() {
                                overlay in the browser. Runtime errors and
                                unhandled rejections are also captured.
 
-    bundle [dir]              Bundle app ES modules into a single file
-      --out, -o <path>         Output directory (default: dist/ next to index.html)
-      --html <file>            Use a specific HTML file (default: auto-detected)
+    bundle [dir|file]          Bundle app ES modules into a single file
+      --out, -o <path>         Output directory (default: dist/ next to HTML file)
+      --index, -i <file>        Index HTML file (default: auto-detected)
+      --minimal, -m            Only output HTML + bundled JS (skip static assets)
 
     build                      Build the zQuery library \u2192 dist/      --watch, -w              Watch src/ and rebuild on changes                               (must be run from the project root where src/ lives)
 
@@ -34,9 +36,10 @@ function showHelp() {
         2. Within HTML: module script pointing to app.js, else first module script
         3. JS scan: $.router( first (entry point), then $.mount( / $.store(
         4. Convention fallbacks (scripts/app.js, app.js, etc.)
-      \u2022 zquery.min.js is always embedded (auto-built from source if not found)
-      \u2022 index.html is rewritten for both server and local (file://) use
-      \u2022 Output goes to dist/server/ and dist/local/ next to the detected index.html
+      • Passing a directory auto-detects the entry; passing a file uses it directly
+      • zquery.min.js is always embedded (auto-built from source if not found)
+      • HTML file is auto-detected (any .html, not just index.html)
+      • Output goes to dist/server/ and dist/local/ next to the detected HTML file
 
   OUTPUT
 
@@ -79,9 +82,18 @@ function showHelp() {
     # Bundle an app from the project root
     zquery bundle my-app/
 
+    # Pass a direct entry file (skip auto-detection)
+    zquery bundle my-app/scripts/main.js
+
     # Custom output directory
     zquery bundle my-app/ -o build/
 
+    # Minimal build (only HTML + bundled JS, no static assets)
+    zquery bundle my-app/ --minimal
+
+    # Dev server with a custom index page
+    zquery dev my-app/ --index home.html
+
   The bundler walks the ES module import graph starting from the entry
   file, topologically sorts dependencies, strips import/export syntax,
   and concatenates everything into a single IIFE with content-hashed

package/dist/zquery.js

@@ -1,5 +1,5 @@
 /**
- * zQuery (zeroQuery) v0.4.9
+ * zQuery (zeroQuery) v0.5.2
  * Lightweight Frontend Library
  * https://github.com/tonywied17/zero-query
  * (c) 2026 Anthony Wiedman — MIT License
@@ -605,6 +605,16 @@ query.id       = (id) => document.getElementById(id);
 query.class    = (name) => document.querySelector(`.${name}`);
 query.classes  = (name) => Array.from(document.getElementsByClassName(name));
 query.tag      = (name) => Array.from(document.getElementsByTagName(name));
+Object.defineProperty(query, 'name', {
+  value: (name) => Array.from(document.getElementsByName(name)),
+  writable: true, configurable: true
+});
+query.attr     = (attr, value) => Array.from(
+  document.querySelectorAll(value !== undefined ? `[${attr}="${value}"]` : `[${attr}]`)
+);
+query.data     = (key, value) => Array.from(
+  document.querySelectorAll(value !== undefined ? `[data-${key}="${value}"]` : `[data-${key}]`)
+);
 query.children = (parentId) => {
   const p = document.getElementById(parentId);
   return p ? Array.from(p.children) : [];
@@ -2862,11 +2872,16 @@ function $(selector, context) {
 }
 
 
-// --- Quick refs ------------------------------------------------------------
+// --- Quick refs (DOM selectors) --------------------------------------------
 $.id       = query.id;
 $.class    = query.class;
 $.classes  = query.classes;
 $.tag      = query.tag;
+Object.defineProperty($, 'name', {
+  value: query.name, writable: true, configurable: true
+});
+$.attr     = query.attr;
+$.data     = query.data;
 $.children = query.children;
 
 // --- Collection selector ---------------------------------------------------
@@ -2895,6 +2910,7 @@ $.fn       = query.fn;
 
 // --- Reactive primitives ---------------------------------------------------
 $.reactive = reactive;
+$.Signal   = Signal;
 $.signal   = signal;
 $.computed = computed;
 $.effect   = effect;
@@ -2946,7 +2962,7 @@ $.session    = session;
 $.bus        = bus;
 
 // --- Meta ------------------------------------------------------------------
-$.version = '0.4.9';
+$.version = '0.5.2';
 $.meta    = {};                // populated at build time by CLI bundler
 
 $.noConflict = () => {

package/dist/zquery.min.js

@@ -1,5 +1,5 @@
 /**
- * zQuery (zeroQuery) v0.4.9
+ * zQuery (zeroQuery) v0.5.2
  * Lightweight Frontend Library
  * https://github.com/tonywied17/zero-query
  * (c) 2026 Anthony Wiedman — MIT License
@@ -7,11 +7,11 @@
 (function(global) {
 'use strict';
 function reactive(target, onChange, _path = '') { if (typeof target !== 'object' || target === null) return target; const proxyCache = new WeakMap(); const handler = { get(obj, key) { if (key === '__isReactive') return true; if (key === '__raw') return obj; const value = obj[key]; if (typeof value === 'object' && value !== null) { if (proxyCache.has(value)) return proxyCache.get(value); const childProxy = new Proxy(value, handler); proxyCache.set(value, childProxy); return childProxy; } return value; }, set(obj, key, value) { const old = obj[key]; if (old === value) return true; obj[key] = value; onChange(key, value, old); return true; }, deleteProperty(obj, key) { const old = obj[key]; delete obj[key]; onChange(key, undefined, old); return true; } }; return new Proxy(target, handler);
-class ZQueryCollection { constructor(elements) { this.elements = Array.isArray(elements) ? elements : [elements]; this.length = this.elements.length; this.elements.forEach((el, i) => { this[i] = el; }); } each(fn) { this.elements.forEach((el, i) => fn.call(el, i, el)); return this; } map(fn) { return this.elements.map((el, i) => fn.call(el, i, el)); } first() { return this.elements[0] || null; } last() { return this.elements[this.length - 1] || null; } eq(i) { return new ZQueryCollection(this.elements[i] ? [this.elements[i]] : []); } toArray(){ return [...this.elements]; } [Symbol.iterator]() { return this.elements[Symbol.iterator](); } find(selector) { const found = []; this.elements.forEach(el => found.push(...el.querySelectorAll(selector))); return new ZQueryCollection(found); } parent() { const parents = [...new Set(this.elements.map(el => el.parentElement).filter(Boolean))]; return new ZQueryCollection(parents); } closest(selector) { return new ZQueryCollection( this.elements.map(el => el.closest(selector)).filter(Boolean) ); } children(selector) { const kids = []; this.elements.forEach(el => { kids.push(...(selector ? el.querySelectorAll(`:scope > ${selector}`) : el.children)); }); return new ZQueryCollection([...kids]); } siblings() { const sibs = []; this.elements.forEach(el => { sibs.push(...[...el.parentElement.children].filter(c => c !== el)); }); return new ZQueryCollection(sibs); } next() { return new ZQueryCollection(this.elements.map(el => el.nextElementSibling).filter(Boolean)); } prev() { return new ZQueryCollection(this.elements.map(el => el.previousElementSibling).filter(Boolean)); } filter(selector) { if (typeof selector === 'function') { return new ZQueryCollection(this.elements.filter(selector)); } return new ZQueryCollection(this.elements.filter(el => el.matches(selector))); } not(selector) { if (typeof selector === 'function') { return new ZQueryCollection(this.elements.filter((el, i) => !selector.call(el, i, el))); } return new ZQueryCollection(this.elements.filter(el => !el.matches(selector))); } has(selector) { return new ZQueryCollection(this.elements.filter(el => el.querySelector(selector))); } addClass(...names) { const classes = names.flatMap(n => n.split(/\s+/)); return this.each((_, el) => el.classList.add(...classes)); } removeClass(...names) { const classes = names.flatMap(n => n.split(/\s+/)); return this.each((_, el) => el.classList.remove(...classes)); } toggleClass(name, force) { return this.each((_, el) => el.classList.toggle(name, force)); } hasClass(name) { return this.first()?.classList.contains(name) || false; } attr(name, value) { if (value === undefined) return this.first()?.getAttribute(name); return this.each((_, el) => el.setAttribute(name, value)); } removeAttr(name) { return this.each((_, el) => el.removeAttribute(name)); } prop(name, value) { if (value === undefined) return this.first()?.[name]; return this.each((_, el) => { el[name] = value; }); } data(key, value) { if (value === undefined) { if (key === undefined) return this.first()?.dataset; const raw = this.first()?.dataset[key]; try { return JSON.parse(raw); } catch { return raw; } } return this.each((_, el) => { el.dataset[key] = typeof value === 'object' ? JSON.stringify(value) : value; }); } css(props) { if (typeof props === 'string') { return getComputedStyle(this.first())[props]; } return this.each((_, el) => Object.assign(el.style, props)); } width() { return this.first()?.getBoundingClientRect().width; } height() { return this.first()?.getBoundingClientRect().height; } offset() { const r = this.first()?.getBoundingClientRect(); return r ? { top: r.top + window.scrollY, left: r.left + window.scrollX, width: r.width, height: r.height } : null; } position() { const el = this.first(); return el ? { top: el.offsetTop, left: el.offsetLeft } : null; } html(content) { if (content === undefined) return this.first()?.innerHTML; return this.each((_, el) => { el.innerHTML = content; }); } text(content) { if (content === undefined) return this.first()?.textContent; return this.each((_, el) => { el.textContent = content; }); } val(value) { if (value === undefined) return this.first()?.value; return this.each((_, el) => { el.value = value; }); } append(content) { return this.each((_, el) => { if (typeof content === 'string') el.insertAdjacentHTML('beforeend', content); else if (content instanceof ZQueryCollection) content.each((__, c) => el.appendChild(c)); else if (content instanceof Node) el.appendChild(content); }); } prepend(content) { return this.each((_, el) => { if (typeof content === 'string') el.insertAdjacentHTML('afterbegin', content); else if (content instanceof Node) el.insertBefore(content, el.firstChild); }); } after(content) { return this.each((_, el) => { if (typeof content === 'string') el.insertAdjacentHTML('afterend', content); else if (content instanceof Node) el.parentNode.insertBefore(content, el.nextSibling); }); } before(content) { return this.each((_, el) => { if (typeof content === 'string') el.insertAdjacentHTML('beforebegin', content); else if (content instanceof Node) el.parentNode.insertBefore(content, el); }); } wrap(wrapper) { return this.each((_, el) => { const w = typeof wrapper === 'string' ? createFragment(wrapper).firstElementChild : wrapper.cloneNode(true); el.parentNode.insertBefore(w, el); w.appendChild(el); }); } remove() { return this.each((_, el) => el.remove()); } empty() { return this.each((_, el) => { el.innerHTML = ''; }); } clone(deep = true) { return new ZQueryCollection(this.elements.map(el => el.cloneNode(deep))); } replaceWith(content) { return this.each((_, el) => { if (typeof content === 'string') { el.insertAdjacentHTML('afterend', content); el.remove(); } else if (content instanceof Node) { el.parentNode.replaceChild(content, el); } }); } show(display = '') { return this.each((_, el) => { el.style.display = display; }); } hide() { return this.each((_, el) => { el.style.display = 'none'; }); } toggle(display = '') { return this.each((_, el) => { el.style.display = (el.style.display === 'none' || getComputedStyle(el).display === 'none') ? display : 'none'; }); } on(event, selectorOrHandler, handler) { const events = event.split(/\s+/); return this.each((_, el) => { events.forEach(evt => { if (typeof selectorOrHandler === 'function') { el.addEventListener(evt, selectorOrHandler); } else { el.addEventListener(evt, (e) => { const target = e.target.closest(selectorOrHandler); if (target && el.contains(target)) handler.call(target, e); }); } }); }); } off(event, handler) { const events = event.split(/\s+/); return this.each((_, el) => { events.forEach(evt => el.removeEventListener(evt, handler)); }); } one(event, handler) { return this.each((_, el) => { el.addEventListener(event, handler, { once: true }); }); } trigger(event, detail) { return this.each((_, el) => { el.dispatchEvent(new CustomEvent(event, { detail, bubbles: true, cancelable: true })); }); } click(fn) { return fn ? this.on('click', fn) : this.trigger('click'); } submit(fn) { return fn ? this.on('submit', fn) : this.trigger('submit'); } focus() { this.first()?.focus(); return this; } blur() { this.first()?.blur(); return this; } animate(props, duration = 300, easing = 'ease') { return new Promise(resolve => { const count = { done: 0 }; this.each((_, el) => { el.style.transition = `all ${duration}ms ${easing}`; requestAnimationFrame(() => { Object.assign(el.style, props); const onEnd = () => { el.removeEventListener('transitionend', onEnd); el.style.transition = ''; if (++count.done >= this.length) resolve(this); }; el.addEventListener('transitionend', onEnd); }); }); setTimeout(() => resolve(this), duration + 50); }); } fadeIn(duration = 300) { return this.css({ opacity: '0', display: '' }).animate({ opacity: '1' }, duration); } fadeOut(duration = 300) { return this.animate({ opacity: '0' }, duration).then(col => col.hide()); } slideToggle(duration = 300) { return this.each((_, el) => { if (el.style.display === 'none' || getComputedStyle(el).display === 'none') { el.style.display = ''; el.style.overflow = 'hidden'; const h = el.scrollHeight + 'px'; el.style.maxHeight = '0'; el.style.transition = `max-height ${duration}ms ease`; requestAnimationFrame(() => { el.style.maxHeight = h; }); setTimeout(() => { el.style.maxHeight = ''; el.style.overflow = ''; el.style.transition = ''; }, duration); } else { el.style.overflow = 'hidden'; el.style.maxHeight = el.scrollHeight + 'px'; el.style.transition = `max-height ${duration}ms ease`; requestAnimationFrame(() => { el.style.maxHeight = '0'; }); setTimeout(() => { el.style.display = 'none'; el.style.maxHeight = ''; el.style.overflow = ''; el.style.transition = ''; }, duration); } }); } serialize() { const form = this.first(); if (!form || form.tagName !== 'FORM') return ''; return new URLSearchParams(new FormData(form)).toString(); } serializeObject() { const form = this.first(); if (!form || form.tagName !== 'FORM') return {}; const obj = {}; new FormData(form).forEach((v, k) => { if (obj[k] !== undefined) { if (!Array.isArray(obj[k])) obj[k] = [obj[k]]; obj[k].push(v); } else { obj[k] = v; } }); return obj; }
+class ZQueryCollection { constructor(elements) { this.elements = Array.isArray(elements) ? elements : [elements]; this.length = this.elements.length; this.elements.forEach((el, i) => { this[i] = el; }); } each(fn) { this.elements.forEach((el, i) => fn.call(el, i, el)); return this; } map(fn) { return this.elements.map((el, i) => fn.call(el, i, el)); } first() { return this.elements[0] || null; } last() { return this.elements[this.length - 1] || null; } eq(i) { return new ZQueryCollection(this.elements[i] ? [this.elements[i]] : []); } toArray(){ return [...this.elements]; } [Symbol.iterator]() { return this.elements[Symbol.iterator](); } find(selector) { const found = []; this.elements.forEach(el => found.push(...el.querySelectorAll(selector))); return new ZQueryCollection(found); } parent() { const parents = [...new Set(this.elements.map(el => el.parentElement).filter(Boolean))]; return new ZQueryCollection(parents); } closest(selector) { return new ZQueryCollection( this.elements.map(el => el.closest(selector)).filter(Boolean) ); } children(selector) { const kids = []; this.elements.forEach(el => { kids.push(...(selector ? el.querySelectorAll(`:scope > ${selector}`) : el.children)); }); return new ZQueryCollection([...kids]); } siblings() { const sibs = []; this.elements.forEach(el => { sibs.push(...[...el.parentElement.children].filter(c => c !== el)); }); return new ZQueryCollection(sibs); } next() { return new ZQueryCollection(this.elements.map(el => el.nextElementSibling).filter(Boolean)); } prev() { return new ZQueryCollection(this.elements.map(el => el.previousElementSibling).filter(Boolean)); } filter(selector) { if (typeof selector === 'function') { return new ZQueryCollection(this.elements.filter(selector)); } return new ZQueryCollection(this.elements.filter(el => el.matches(selector))); } not(selector) { if (typeof selector === 'function') { return new ZQueryCollection(this.elements.filter((el, i) => !selector.call(el, i, el))); } return new ZQueryCollection(this.elements.filter(el => !el.matches(selector))); } has(selector) { return new ZQueryCollection(this.elements.filter(el => el.querySelector(selector))); } addClass(...names) { const classes = names.flatMap(n => n.split(/\s+/)); return this.each((_, el) => el.classList.add(...classes)); } removeClass(...names) { const classes = names.flatMap(n => n.split(/\s+/)); return this.each((_, el) => el.classList.remove(...classes)); } toggleClass(name, force) { return this.each((_, el) => el.classList.toggle(name, force)); } hasClass(name) { return this.first()?.classList.contains(name) || false; } attr(name, value) { if (value === undefined) return this.first()?.getAttribute(name); return this.each((_, el) => el.setAttribute(name, value)); } removeAttr(name) { return this.each((_, el) => el.removeAttribute(name)); } prop(name, value) { if (value === undefined) return this.first()?.[name]; return this.each((_, el) => { el[name] = value; }); } data(key, value) { if (value === undefined) { if (key === undefined) return this.first()?.dataset; const raw = this.first()?.dataset[key]; try { return JSON.parse(raw); } catch { return raw; } } return this.each((_, el) => { el.dataset[key] = typeof value === 'object' ? JSON.stringify(value) : value; }); } css(props) { if (typeof props === 'string') { return getComputedStyle(this.first())[props]; } return this.each((_, el) => Object.assign(el.style, props)); } width() { return this.first()?.getBoundingClientRect().width; } height() { return this.first()?.getBoundingClientRect().height; } offset() { const r = this.first()?.getBoundingClientRect(); return r ? { top: r.top + window.scrollY, left: r.left + window.scrollX, width: r.width, height: r.height } : null; } position() { const el = this.first(); return el ? { top: el.offsetTop, left: el.offsetLeft } : null; } html(content) { if (content === undefined) return this.first()?.innerHTML; return this.each((_, el) => { el.innerHTML = content; }); } text(content) { if (content === undefined) return this.first()?.textContent; return this.each((_, el) => { el.textContent = content; }); } val(value) { if (value === undefined) return this.first()?.value; return this.each((_, el) => { el.value = value; }); } append(content) { return this.each((_, el) => { if (typeof content === 'string') el.insertAdjacentHTML('beforeend', content); else if (content instanceof ZQueryCollection) content.each((__, c) => el.appendChild(c)); else if (content instanceof Node) el.appendChild(content); }); } prepend(content) { return this.each((_, el) => { if (typeof content === 'string') el.insertAdjacentHTML('afterbegin', content); else if (content instanceof Node) el.insertBefore(content, el.firstChild); }); } after(content) { return this.each((_, el) => { if (typeof content === 'string') el.insertAdjacentHTML('afterend', content); else if (content instanceof Node) el.parentNode.insertBefore(content, el.nextSibling); }); } before(content) { return this.each((_, el) => { if (typeof content === 'string') el.insertAdjacentHTML('beforebegin', content); else if (content instanceof Node) el.parentNode.insertBefore(content, el); }); } wrap(wrapper) { return this.each((_, el) => { const w = typeof wrapper === 'string' ? createFragment(wrapper).firstElementChild : wrapper.cloneNode(true); el.parentNode.insertBefore(w, el); w.appendChild(el); }); } remove() { return this.each((_, el) => el.remove()); } empty() { return this.each((_, el) => { el.innerHTML = ''; }); } clone(deep = true) { return new ZQueryCollection(this.elements.map(el => el.cloneNode(deep))); } replaceWith(content) { return this.each((_, el) => { if (typeof content === 'string') { el.insertAdjacentHTML('afterend', content); el.remove(); } else if (content instanceof Node) { el.parentNode.replaceChild(content, el); } }); } show(display = '') { return this.each((_, el) => { el.style.display = display; }); } hide() { return this.each((_, el) => { el.style.display = 'none'; }); } toggle(display = '') { return this.each((_, el) => { el.style.display = (el.style.display === 'none' || getComputedStyle(el).display === 'none') ? display : 'none'; }); } on(event, selectorOrHandler, handler) { const events = event.split(/\s+/); return this.each((_, el) => { events.forEach(evt => { if (typeof selectorOrHandler === 'function') { el.addEventListener(evt, selectorOrHandler); } else { el.addEventListener(evt, (e) => { const target = e.target.closest(selectorOrHandler); if (target && el.contains(target)) handler.call(target, e); }); } }); }); } off(event, handler) { const events = event.split(/\s+/); return this.each((_, el) => { events.forEach(evt => el.removeEventListener(evt, handler)); }); } one(event, handler) { return this.each((_, el) => { el.addEventListener(event, handler, { once: true }); }); } trigger(event, detail) { return this.each((_, el) => { el.dispatchEvent(new CustomEvent(event, { detail, bubbles: true, cancelable: true })); }); } click(fn) { return fn ? this.on('click', fn) : this.trigger('click'); } submit(fn) { return fn ? this.on('submit', fn) : this.trigger('submit'); } focus() { this.first()?.focus(); return this; } blur() { this.first()?.blur(); return this; } animate(props, duration = 300, easing = 'ease') { return new Promise(resolve => { const count = { done: 0 }; this.each((_, el) => { el.style.transition = `all ${duration}ms ${easing}`; requestAnimationFrame(() => { Object.assign(el.style, props); const onEnd = () => { el.removeEventListener('transitionend', onEnd); el.style.transition = ''; if (++count.done >= this.length) resolve(this); }; el.addEventListener('transitionend', onEnd); }); }); setTimeout(() => resolve(this), duration + 50); }); } fadeIn(duration = 300) { return this.css({ opacity: '0', display: '' }).animate({ opacity: '1' }, duration); } fadeOut(duration = 300) { return this.animate({ opacity: '0' }, duration).then(col => col.hide()); } slideToggle(duration = 300) { return this.each((_, el) => { if (el.style.display === 'none' || getComputedStyle(el).display === 'none') { el.style.display = ''; el.style.overflow = 'hidden'; const h = el.scrollHeight + 'px'; el.style.maxHeight = '0'; el.style.transition = `max-height ${duration}ms ease`; requestAnimationFrame(() => { el.style.maxHeight = h; }); setTimeout(() => { el.style.maxHeight = ''; el.style.overflow = ''; el.style.transition = ''; }, duration); } else { el.style.overflow = 'hidden'; el.style.maxHeight = el.scrollHeight + 'px'; el.style.transition = `max-height ${duration}ms ease`; requestAnimationFrame(() => { el.style.maxHeight = '0'; }); setTimeout(() => { el.style.display = 'none'; el.style.maxHeight = ''; el.style.overflow = ''; el.style.transition = ''; }, duration); } }); } serialize() { const form = this.first(); if (!form || form.tagName !== 'FORM') return ''; return new URLSearchParams(new FormData(form)).toString(); } serializeObject() { const form = this.first(); if (!form || form.tagName !== 'FORM') return {}; const obj = {}; new FormData(form).forEach((v, k) => { if (obj[k] !== undefined) { if (!Array.isArray(obj[k])) obj[k] = [obj[k]]; obj[k].push(v); } else { obj[k] = v; } }); return obj; }
 const _registry = new Map(); const _instances = new Map(); const _resourceCache = new Map(); let _uid = 0;
 class Router { constructor(config = {}) { this._el = null; const isFile = typeof location !== 'undefined' && location.protocol === 'file:'; this._mode = isFile ? 'hash' : (config.mode || 'history'); let rawBase = config.base; if (rawBase == null) { rawBase = (typeof window !== 'undefined' && window.__ZQ_BASE) || ''; if (!rawBase && typeof document !== 'undefined') { const baseEl = document.querySelector('base'); if (baseEl) { try { rawBase = new URL(baseEl.href).pathname; } catch { rawBase = baseEl.getAttribute('href') || ''; } if (rawBase === '/') rawBase = ''; } } } this._base = String(rawBase).replace(/\/+$/, ''); if (this._base && !this._base.startsWith('/')) this._base = '/' + this._base; this._routes = []; this._fallback = config.fallback || null; this._current = null; this._guards = { before: [], after: [] }; this._listeners = new Set(); this._instance = null; this._resolving = false; if (config.el) { this._el = typeof config.el === 'string' ? document.querySelector(config.el) : config.el; } if (config.routes) { config.routes.forEach(r => this.add(r)); } if (this._mode === 'hash') { window.addEventListener('hashchange', () => this._resolve()); } else { window.addEventListener('popstate', () => this._resolve()); } document.addEventListener('click', (e) => { if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return; const link = e.target.closest('[z-link]'); if (!link) return; if (link.getAttribute('target') === '_blank') return; e.preventDefault(); this.navigate(link.getAttribute('z-link')); }); if (this._el) { queueMicrotask(() => this._resolve()); } } add(route) { const keys = []; const pattern = route.path .replace(/:(\w+)/g, (_, key) => { keys.push(key); return '([^/]+)'; }) .replace(/\*/g, '(.*)'); const regex = new RegExp(`^${pattern}$`); this._routes.push({ ...route, _regex: regex, _keys: keys }); if (route.fallback) { const fbKeys = []; const fbPattern = route.fallback .replace(/:(\w+)/g, (_, key) => { fbKeys.push(key); return '([^/]+)'; }) .replace(/\*/g, '(.*)'); const fbRegex = new RegExp(`^${fbPattern}$`); this._routes.push({ ...route, path: route.fallback, _regex: fbRegex, _keys: fbKeys }); } return this; } remove(path) { this._routes = this._routes.filter(r => r.path !== path); return this; } navigate(path, options = {}) { const [cleanPath, fragment] = (path || '').split('#'); let normalized = this._normalizePath(cleanPath); const hash = fragment ? '#' + fragment : ''; if (this._mode === 'hash') { if (fragment) window.__zqScrollTarget = fragment; window.location.hash = '#' + normalized; } else { window.history.pushState(options.state || {}, '', this._base + normalized + hash); this._resolve(); } return this; } replace(path, options = {}) { const [cleanPath, fragment] = (path || '').split('#'); let normalized = this._normalizePath(cleanPath); const hash = fragment ? '#' + fragment : ''; if (this._mode === 'hash') { if (fragment) window.__zqScrollTarget = fragment; window.location.replace('#' + normalized); } else { window.history.replaceState(options.state || {}, '', this._base + normalized + hash); this._resolve(); } return this; } _normalizePath(path) { let p = path && path.startsWith('/') ? path : (path ? `/${path}` : '/'); if (this._base) { if (p === this._base) return '/'; if (p.startsWith(this._base + '/')) p = p.slice(this._base.length) || '/'; } return p; } resolve(path) { const normalized = path && path.startsWith('/') ? path : (path ? `/${path}` : '/'); return this._base + normalized; } back() { window.history.back(); return this; } forward() { window.history.forward(); return this; } go(n) { window.history.go(n); return this; } beforeEach(fn) { this._guards.before.push(fn); return this; } afterEach(fn) { this._guards.after.push(fn); return this; } onChange(fn) { this._listeners.add(fn); return () => this._listeners.delete(fn); } get current() { return this._current; } get base() { return this._base; } get path() { if (this._mode === 'hash') { const raw = window.location.hash.slice(1) || '/'; if (raw && !raw.startsWith('/')) { window.__zqScrollTarget = raw; const fallbackPath = (this._current && this._current.path) || '/'; window.location.replace('#' + fallbackPath); return fallbackPath; } return raw; } let pathname = window.location.pathname || '/'; if (pathname.length > 1 && pathname.endsWith('/')) { pathname = pathname.slice(0, -1); } if (this._base) { if (pathname === this._base) return '/'; if (pathname.startsWith(this._base + '/')) { return pathname.slice(this._base.length) || '/'; } } return pathname; } get query() { const search = this._mode === 'hash' ? (window.location.hash.split('?')[1] || '') : window.location.search.slice(1); return Object.fromEntries(new URLSearchParams(search)); } async _resolve() { if (this._resolving) return; this._resolving = true; try { await this.__resolve(); } finally { this._resolving = false; } } async __resolve() { const fullPath = this.path; const [pathPart, queryString] = fullPath.split('?'); const path = pathPart || '/'; const query = Object.fromEntries(new URLSearchParams(queryString || '')); let matched = null; let params = {}; for (const route of this._routes) { const m = path.match(route._regex); if (m) { matched = route; route._keys.forEach((key, i) => { params[key] = m[i + 1]; }); break; } } if (!matched && this._fallback) { matched = { component: this._fallback, path: '*', _keys: [], _regex: /.*/ }; } if (!matched) return; const to = { route: matched, params, query, path }; const from = this._current; for (const guard of this._guards.before) { const result = await guard(to, from); if (result === false) return; if (typeof result === 'string') { return this.navigate(result); } } if (matched.load) { try { await matched.load(); } catch (err) { console.error(`zQuery Router: Failed to load module for "${matched.path}"`, err); return; } } this._current = to; if (this._el && matched.component) { if (this._instance) { this._instance.destroy(); this._instance = null; } this._el.innerHTML = ''; const props = { ...params, $route: to, $query: query, $params: params }; if (typeof matched.component === 'string') { const container = document.createElement(matched.component); this._el.appendChild(container); this._instance = mount(container, matched.component, props); } else if (typeof matched.component === 'function') { this._el.innerHTML = matched.component(to); } } for (const guard of this._guards.after) { await guard(to, from); } this._listeners.forEach(fn => fn(to, from)); } destroy() { if (this._instance) this._instance.destroy(); this._listeners.clear(); this._routes = []; this._guards = { before: [], after: [] }; }
 class Store { constructor(config = {}) { this._subscribers = new Map(); this._wildcards = new Set(); this._actions = config.actions || {}; this._getters = config.getters || {}; this._middleware = []; this._history = []; this._debug = config.debug || false; const initial = typeof config.state === 'function' ? config.state() : { ...(config.state || {}) }; this.state = reactive(initial, (key, value, old) => { const subs = this._subscribers.get(key); if (subs) subs.forEach(fn => fn(value, old, key)); this._wildcards.forEach(fn => fn(key, value, old)); }); this.getters = {}; for (const [name, fn] of Object.entries(this._getters)) { Object.defineProperty(this.getters, name, { get: () => fn(this.state.__raw || this.state), enumerable: true }); } } dispatch(name, ...args) { const action = this._actions[name]; if (!action) { console.warn(`zQuery Store: Unknown action "${name}"`); return; } for (const mw of this._middleware) { const result = mw(name, args, this.state); if (result === false) return; } if (this._debug) { console.log(`%c[Store] ${name}`, 'color: #4CAF50; font-weight: bold;', ...args); } const result = action(this.state, ...args); this._history.push({ action: name, args, timestamp: Date.now() }); return result; } subscribe(keyOrFn, fn) { if (typeof keyOrFn === 'function') { this._wildcards.add(keyOrFn); return () => this._wildcards.delete(keyOrFn); } if (!this._subscribers.has(keyOrFn)) { this._subscribers.set(keyOrFn, new Set()); } this._subscribers.get(keyOrFn).add(fn); return () => this._subscribers.get(keyOrFn)?.delete(fn); } snapshot() { return JSON.parse(JSON.stringify(this.state.__raw || this.state)); } replaceState(newState) { const raw = this.state.__raw || this.state; for (const key of Object.keys(raw)) { delete this.state[key]; } Object.assign(this.state, newState); } use(fn) { this._middleware.push(fn); return this; } get history() { return [...this._history]; } reset(initialState) { this.replaceState(initialState); this._history = []; }
 const _config = { baseURL: '', headers: { 'Content-Type': 'application/json' }, timeout: 30000,
 function debounce(fn, ms = 250) { let timer; const debounced = (...args) => { clearTimeout(timer); timer = setTimeout(() => fn(...args), ms); }; debounced.cancel = () => clearTimeout(timer); return debounced;
-function $(selector, context) { if (typeof selector === 'function') { query.ready(selector); return; } return query(selector, context);
+function $(selector, context) { if (typeof selector === 'function') { query.ready(selector); return; } return query(selector, context);
 })(typeof window !== 'undefined' ? window : globalThis);

package/index.d.ts

@@ -4,7 +4,7 @@
  * Lightweight modern frontend library — jQuery-like selectors, reactive
  * components, SPA router, state management, HTTP client & utilities.
  *
- * @version 0.4.9
+ * @version 0.5.2
  * @license MIT
  * @see https://z-query.com/docs
  */
@@ -1086,6 +1086,12 @@ interface ZQueryStatic {
   classes(name: string): Element[];
   /** `document.getElementsByTagName(name)` as array. */
   tag(name: string): Element[];
+  /** `document.getElementsByName(name)` as array. */
+  name(name: string): Element[];
+  /** `document.querySelectorAll('[attr]')` or `[attr="value"]` as array. */
+  attr(attr: string, value?: string): Element[];
+  /** `document.querySelectorAll('[data-key]')` or `[data-key="value"]` as array. */
+  data(key: string, value?: string): Element[];
   /** Children of `#parentId` as array. */
   children(parentId: string): Element[];
 
@@ -1117,6 +1123,7 @@ interface ZQueryStatic {
 
   // -- Reactive ------------------------------------------------------------
   reactive: typeof reactive;
+  Signal: typeof Signal;
   signal: typeof signal;
   computed: typeof computed;
   effect: typeof effect;

package/index.js

@@ -10,7 +10,7 @@
  */
 
 import { query, queryAll, ZQueryCollection } from './src/core.js';
-import { reactive, signal, computed, effect } from './src/reactive.js';
+import { reactive, Signal, signal, computed, effect } from './src/reactive.js';
 import { component, mount, mountAll, getInstance, destroy, getRegistry, style } from './src/component.js';
 import { createRouter, getRouter } from './src/router.js';
 import { createStore, getStore } from './src/store.js';
@@ -49,11 +49,16 @@ function $(selector, context) {
 }
 
 
-// --- Quick refs ------------------------------------------------------------
+// --- Quick refs (DOM selectors) --------------------------------------------
 $.id       = query.id;
 $.class    = query.class;
 $.classes  = query.classes;
 $.tag      = query.tag;
+Object.defineProperty($, 'name', {
+  value: query.name, writable: true, configurable: true
+});
+$.attr     = query.attr;
+$.data     = query.data;
 $.children = query.children;
 
 // --- Collection selector ---------------------------------------------------
@@ -82,6 +87,7 @@ $.fn       = query.fn;
 
 // --- Reactive primitives ---------------------------------------------------
 $.reactive = reactive;
+$.Signal   = Signal;
 $.signal   = signal;
 $.computed = computed;
 $.effect   = effect;
@@ -161,7 +167,7 @@ export {
   $ as zQuery,
   ZQueryCollection,
   queryAll,
-  reactive, signal, computed, effect,
+  reactive, Signal, signal, computed, effect,
   component, mount, mountAll, getInstance, destroy, getRegistry, style,
   createRouter, getRouter,
   createStore, getStore,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zero-query",
-  "version": "0.4.9",
+  "version": "0.5.2",
   "description": "Lightweight modern frontend library — jQuery-like selectors, reactive components, SPA router, and state management with zero dependencies.",
   "main": "index.js",
   "types": "index.d.ts",
@@ -21,7 +21,7 @@
     "dev": "node cli/index.js dev zquery-website",
     "dev-lib": "node cli/index.js build --watch",
     "bundle": "node cli/index.js bundle",
-    "bundle:app": "node cli/index.js bundle zquery-website"
+    "bundle:app": "node cli/index.js bundle zquery-website --minimal"
   },
   "keywords": [
     "dom",

package/src/core.js

@@ -468,6 +468,16 @@ query.id       = (id) => document.getElementById(id);
 query.class    = (name) => document.querySelector(`.${name}`);
 query.classes  = (name) => Array.from(document.getElementsByClassName(name));
 query.tag      = (name) => Array.from(document.getElementsByTagName(name));
+Object.defineProperty(query, 'name', {
+  value: (name) => Array.from(document.getElementsByName(name)),
+  writable: true, configurable: true
+});
+query.attr     = (attr, value) => Array.from(
+  document.querySelectorAll(value !== undefined ? `[${attr}="${value}"]` : `[${attr}]`)
+);
+query.data     = (key, value) => Array.from(
+  document.querySelectorAll(value !== undefined ? `[data-${key}="${value}"]` : `[data-${key}]`)
+);
 query.children = (parentId) => {
   const p = document.getElementById(parentId);
   return p ? Array.from(p.children) : [];