iblokz-dom

Small DOM manipulation and interaction helpers for browsers.

Install (npm / pnpm / yarn)

pnpm add iblokz-dom

import { select, create, on } from 'iblokz-dom';
// or
import dom from 'iblokz-dom';

TypeScript types ship in dist/index.d.ts (regenerated on pnpm run build from JSDoc in src/index.js).

CommonJS:

const { select, create } = require('iblokz-dom');

Legacy builds (ES5, for older bundlers or targets):

import { select } from 'iblokz-dom/legacy';

CDN (CodePen, static HTML)

After publishing to npm, jsDelivr and unpkg serve the IIFE bundle. The library attaches as iblokzDom on window.

Modern browsers:

<script src="https://cdn.jsdelivr.net/npm/iblokz-dom/dist/index.global.js"></script>
<script>
  const el = iblokzDom.create('div', { textContent: 'hello' });
  iblokzDom.append(document.body, el);
</script>

Older browsers (ES5 build):

<script src="https://cdn.jsdelivr.net/npm/iblokz-dom/dist/legacy/index.global.js"></script>

CodePen

1. JS → Add External Script / Package → search iblokz-dom, or paste the jsDelivr URL above.
2. In your pen script, use iblokzDom.select(...), iblokzDom.on(...), etc.

API

| Export | Description | |--------|-------------| | select | document.querySelector wrapper | | create | Create element with optional property assign | | on | Add event listener (element or selector string) | | insertBefore, append, remove | DOM tree helpers | | style, computeStyle, getDim | Layout / style helpers | | toggleClass, addClass, removeClass | classList helpers |

Default export is an object with all of the above.

Develop

pnpm install
pnpm run build    # dist/ (ES2020) + dist/legacy/ (ES5)
pnpm run dev      # watch mode

Build outputs:

| Path | Format | Target | |------|--------|--------| | dist/index.js | ESM | ES2020 | | dist/index.cjs | CJS | ES2020 | | dist/index.global.js | IIFE (iblokzDom) | ES2020 | | dist/index.d.ts | Type declarations | from JSDoc | | dist/legacy/* | Same shapes | ES5 |