@build-in-blocks/dom.autoquery

Built with: Node.js v24.0.2

Supported Node.js versions: Node.js v20.x, v22.x, v24.x and v25.x

Overview: Intuitive accessibility-oriented DOM manipulation for your typescript web app projects.

Description: The @build-in-blocks/dom.autoquery package provides HTML attributes that work like commands, providing clear instructions for dynamically swapping, adding and/or removing elements from the DOM on page load and on resize.

User guide: See docs.users README.md

Contributor guide: See docs.contributors README.md

Run into any issues? Report them via our product issue reports repo

Quick installation & usage guide

1. Main package installation

• Needed: Install and setup @build-in-blocks/dev.build in your typescript web app project.

• Optional: Install and setup @build-in-blocks/dev.setup in your typescript web app project.

• Needed: Install the dom autoquery package as a devDependency in your typescript web app project:

  npm install -D @build-in-blocks/dom.autoquery --save-exact

2. Do I need to install typescript?

Since you are to use both this library and @build-in-blocks/dev.build together in your project, you don't need to install typescript in your project (the @build-in-blocks/dev.build library already does that internally, relative to your project).

See typescript table in the general guide for more information: Typescript compatibility and usage.

3. Initialize your app's device screen sizes

In your index.ts file (or whatever your app's entry point .ts file is named), import the DOMautoquery object, call and use the .devices method to specify the range of device sizes that you want your app to cater for.

For example:

import { DOMautoquery } from '@build-in-blocks/dom.autoquery';

DOMautoquery.devices({
  //-------------------------------------------------------
  // Specify as little or as much device sizes as you want.
  // Update the sizes (names & startpoints) as you see fit.
  //-------------------------------------------------------
  sizes: {
    1: { name: 'mobile', startPoint: 0},
    2: { name: 'tablet', startPoint: 768 },
    3: { name: 'desktop', startPoint: 1024 },
    4: { name: 'wide', startPoint: 1280 },
    5: { name: 'ultraWide', startPoint: 1600 },
  },
});

4. Use the "HTML attribute command" that you need

For example, copy this code and add it in your index.html. Then resize your web browser to see the html element swap take place.

<header>
  <nav _refelem="navElem">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>
  <button _replacesibling="navElem" _uptosize="2">&#9776</button>
</header>

5. Explore more HTML attribute commands

Visit the user guide link (towards the top 👆🏽 of this README) to see the full list of HTML attribute commands available.

Contributors

Thanks to these amazing contributors to the @build-in-blocks/dom.autoquery project. This project follows the all-contributors specification. See emoji key. Contributions of any kind welcome!