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