PooPooDom

Type declarations of dom lib.

Why and When

You are developing in a non-browser environment, but you need typings of DOM. Perhaps you are using puppeteer.

You may consider to use dom lib. However, it inserts lots of globals. So dirty!

Usage

1import type { Document, HTMLElement } from 'poopoodom'  // ✓ good
2// import { Document, HTMLElement } from 'poopoodom'    // ✗ bad
3
4function getElementByIdAndCheck<Element extends HTMLElement>(
5    document: Document,
6    id: string
7): Element {
8    const element = document.getElementById(id)
9    if (element === null) {
10        throw new Error(`Element not found: ${id}`)
11    }
12    return element as Element
13}

Always import types only: This package assumes everything is available at runtime and does not provide any implementation.

Modern browsers now provide dom.iterable API. To use it, import whatever you need from poopoodom/iterable. Note that types from poopoodom and poopoodom/iterable are irrelevant.

1import type { Document as OldDocument, HTMLElement as OldHTMLElement } from 'poopoodom'
2import type { Document, HTMLElement } from 'poopoodom/iterable'
3
4function getWideElementsInOldBrowser(document: OldDocument): OldHTMLElement[] {
5  const elements = document.body.querySelectorAll<OldHTMLElement>('*')
6  const ret: OldHTMLElement[] = []
7  for (let i = 0; i < elements.length; i++) {
8    if (elements[i].offsetWidth > 1000) {
9      ret.push(elements[i])
10    }
11  }
12  return ret
13}
14
15function getWideElementsInModernBrowser(document: Document): HTMLElement[] {
16  const elements = document.body.querySelectorAll<HTMLElement>('*')
17  const ret: HTMLElement[] = []
18  for (const element of elements) {
19    if (element.offsetWidth > 1000) {
20      ret.push(element)
21    }
22  }
23  return ret
24}

Working with ESLint

Add a typescript-eslint rule to prevent accidentally importing non-type elements.

1// .eslintrc.cjs
2module.exports = {
3  rules: {
4    '@typescript-eslint/no-restricted-imports': ['error', {
5      paths: [{
6        name: 'poopoodom',
7        allowTypeImports: true
8      }]
9    }]
10  }
11}