{"id":17254263,"url":"https://github.com/waynevanson/dom-ts","last_synced_at":"2025-04-14T05:35:32.634Z","repository":{"id":57155159,"uuid":"342704410","full_name":"waynevanson/dom-ts","owner":"waynevanson","description":null,"archived":false,"fork":false,"pushed_at":"2021-02-26T21:55:30.000Z","size":184,"stargazers_count":5,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-06T03:58:00.755Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/waynevanson.png","metadata":{"files":{"readme":"readme.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-02-26T21:21:45.000Z","updated_at":"2021-11-26T11:47:08.000Z","dependencies_parsed_at":"2022-08-26T09:52:32.496Z","dependency_job_id":null,"html_url":"https://github.com/waynevanson/dom-ts","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/waynevanson%2Fdom-ts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/waynevanson%2Fdom-ts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/waynevanson%2Fdom-ts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/waynevanson%2Fdom-ts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/waynevanson","download_url":"https://codeload.github.com/waynevanson/dom-ts/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248483445,"owners_count":21111450,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-15T07:08:04.203Z","updated_at":"2025-04-14T05:35:32.597Z","avatar_url":"https://github.com/waynevanson.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# dom-ts\n\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n[`fp-ts`](https://github.com/gcanti/fp-ts) compatible implementations of DOM interfaces and related API's, as documented under [DOM interfaces at Mozilla](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model).\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\n- [Installation](#installation)\n - [Yarn](#yarn)\n - [NPM](#npm)\n- [Library Structure](#library-structure)\n- [Usage](#usage)\n - [Examples](#examples)\n - [Add Custom Elements, Events](#add-custom-elements-events)\n - [Custom Elements and Custom Events](#custom-elements-and-custom-events)\n - [Defining Elements](#defining-elements)\n- [Compatability](#compatability)\n - [Legend](#legend)\n - [Compatibility Table](#compatibility-table)\n- [Upcoming](#upcoming)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n## Installation\n\nThere are two release branches: `@latest` and `@beta`.\nIf you'd like to try the latest features, replace `dom-ts` with `dom-ts@beta`.\n\n### Yarn\n\n```sh\nyarn add dom-ts fp-ts fp-ts-contrib\n```\n\n### NPM\n\n```sh\nnpm install dom-ts fp-ts fp-ts-contrib\n```\n\n## Library Structure\n\nEach DOM interface (`Node`, `ChildNode`,`Event`)\n\n## Usage\n\n### Examples\n\n### Add Custom Elements, Events\n\nThe modules under `dom-ts/meta` exports maps that define relationships between the following:\n\n- `tagName`\n- `Element`\n- `EventMap`\n\nWe use this to infer some types from each other, like `EventMap` from `Element`\n\nThis is currently unsupported due to the way that Typescript has structured it's type definitions.\nAn issue has been opened up outlining these concerns in [Microsoft/Typescript #40689](https://github.com/microsoft/TypeScript/issues/40689)\n\n### Custom Elements and Custom Events\n\nWe need to use _module augmentation_ via _declaration merging_ in order to have the new types available in the API.\n\n#### Defining Elements\n\nWe have to define an element, by providing a `tagName`, `Element` and `EventMap`\n\nDefine an Element. We'll define a `HTMLGroovyElement`, named after the Emperors' New Groove\n\n```ts\nimport { either as E } from \"fp-ts\"\nimport { pipe } from \"fp-ts/lib/function\"\nimport { document, eventTarget, readerIOEither as RIOE } from \"../src\"\nimport { MetaHTMLElement } from \"../src/meta\"\n\n/**\n * @summary\n * This element is always groovy,\n * emitting the `groove` event every 4 seconds.\n */\nexport interface HTMLGroovyElement extends HTMLElement {}\n\nexport interface GrooveEvent {\n grooviness: number\n energy: number\n flow: number\n espanol: boolean\n}\n\nexport interface HTMLGroovyElementEventMap extends HTMLElementEventMap {\n groove: GrooveEvent\n}\n\nexport type MetaHTMLGroovyElement = MetaHTMLElement\u003c\n \"groovy\",\n HTMLGroovyElement,\n HTMLGroovyElementEventMap\n\u003e\n\ndeclare module \"../src/meta\" {\n export interface Custom {\n // Only HTMLElement's\n HTMLElements: MetaHTMLGroovyElement\n\n // Only SVGElement's\n // SVGElements: ...\n\n // Non {HTML,SVG}Element's\n // Elements: ...\n }\n}\n\n// Now we get intellisense\n\nconst program = pipe(\n document.createElement(\"groovy\"),\n RIOE.chainReaderIOK(\n eventTarget.addEventListener(\n \"groove\",\n (event) =\u003e () =\u003e console.dir(event),\n { capture: true }\n )\n )\n)\n\nprogram(globalThis.document)\n```\n\n## Compatability\n\nWe only add functions for methods on interfaces.\nWe don't need to add functions that get values.\n\nDeprecated interfaces and methods are displayed in this list, but are noted as deprecated. They will not be implemented.\nObsolete interfaces and methods are not displayed in this list.\n\n### Legend\n\n| Icon | Status Description |\n| :----------------: | :----------------------------------------- |\n| :heavy_check_mark: | Implemented, available for use. |\n| :o: | Unimplemented, with plans to implement. |\n| :x: | Unimplemented, with no plans to implement. |\n\n### Compatibility Table\n\n| Status | Methods | Base Interface | Notes |\n| :----: | :-------------------------- | :-------------------- | :------------------------------------------------------------------------------------------ |\n| :x: | | Attr | Interface has no specific methods |\n| :o: | | CDATASection | Interface has no specific methods |\n| :o: | | CharacterData | |\n| :o: | appendData | | |\n| :o: | deleteData | | |\n| :o: | insertData | | |\n| :o: | replaceData | | |\n| :o: | substringData | | |\n| :o: | remove | ChildNode | |\n| :o: | before | | |\n| :o: | after | | |\n| :o: | replaceWith | | |\n| :o: | Constructor | CustomEvent | |\n| :x: | initCustomEvent | | |\n| :o: | Constructor | Document | |\n| :o: | adoptNode | | |\n| :x: | createAttribute | | Constructors are available in their respective modules |\n| :x: | createAttributeNS | | \"..\" |\n| :x: | createCDATASection | | \"..\" |\n| :x: | createComment | | \"..\" |\n| :x: | createEvent | | \"..\" |\n| :x: | createNodeIterator | | \"..\" |\n| :x: | createProcessingInstruction | | \"..\" |\n| :x: | createRange | | \"..\" |\n| :x: | createTextNode | | \"..\" |\n| :x: | createTreeWalker | | \"..\" |\n| :o: | exitPictureInPicture | | \"..\" |\n| :o: | exitPointerLock | | \"..\" |\n| :o: | getElementsByClassName | | |\n| :o: | getElementsByTagName | | |\n| :o: | getElementsByTagNameNS | | |\n| :o: | hasStorageAccess | | |\n| :o: | importNode | | |\n| :o: | releaseCapture | | |\n| :o: | requestStorageAccess | | |\n| :o: | getElementById | | |\n| :o: | querySelector | | |\n| :o: | querySelectorAll | | |\n| :x: | | DocumentFragment | Interface has no specific methods |\n| :x: | | DocumentType | Interface has no specific methods |\n| :x: | | DOMError | Deprecated |\n| :o: | | DOMException | Interface has no specific methods, but will provide types for all different types of errors |\n| :x: | | DOMImplementation | Deprecated, but will need to double check. |\n| :x: | | DOMString | Interface has no specific methods |\n| :o: | | DOMTimeStamp | Interface has no specific methods |\n| :o: | | DOMStringList | Deprecated |\n| :o: | | DOMTokenList | |\n| :o: | item | | |\n| :o: | contains | | |\n| :o: | add | | |\n| :o: | remove | | |\n| :o: | replace | | |\n| :o: | supports | | |\n| :o: | toggle | | |\n| :o: | forEach (map) | | |\n| :o: | entries (toIterator) | | |\n| :o: | keys | | |\n| :o: | values | | |\n| :o: | Constructor | Element | |\n| :o: | attachShadow | | |\n| :o: | animate | | |\n| :o: | closests | | |\n| :x: | createShadowRoot | | Deprecated |\n| :o: | computedStyleMap | | |\n| :o: | getAnimations | | |\n| :o: | getAttribute | | |\n| :o: | getAttributenames | | |\n| :o: | getAttributeNS | | |\n| :o: | getboundingClientRect | | |\n| :o: | getClientRects | | |\n| :o: | getElementsByClassName | | |\n| :o: | getElementsByTagName | | |\n| :o: | getElementsbyTagnameNS | | |\n| :o: | hasAttribute | | |\n| :o: | hasAttributes | | |\n| :o: | hasPointerCapture | | |\n| :o: | insertAdjacentElement | | |\n| :o: | insertAdjacentElement | | |\n| :o: | insertAdjacentText | | |\n| :o: | matches | | |\n| :o: | pseudo | | |\n| :o: | querySelector | | |\n| :o: | querySelectorAll | | |\n| :o: | releasePointCapture | | |\n| :o: | removeAttribute | | |\n| :o: | removeAttributeNS | | |\n| :o: | requestFullScreen | | |\n| :o: | requestPointerLock | | |\n| :o: | scroll | | |\n| :o: | scrollby | | |\n| :o: | scrollintoView | | |\n| :o: | scrollTo | | |\n| :o: | setAttribute | | |\n| :o: | setAttributeNS | | |\n| :o: | setCapture | | |\n| :o: | setPointerCapture | | |\n| :o: | toggleAttribute | | |\n| :o: | Constructor | Event | |\n| :o: | composedPath | | |\n| :o: | preventDefault | | |\n| :o: | stopImmediatePropogation | | |\n| :o: | stopPropogation | | |\n| :o: | | | |\n| :o: | | | |\n| :o: | | | |\n| :o: | | | |\n| :o: | | | |\n| :o: | | | |\n| :o: | | | |\n| :o: | | | |\n| :o: | | | |\n| :o: | | | |\n| :o: | | | |\n| :o: | | | |\n| :o: | | EventTarget | |\n| :o: | | HTMLCollection | |\n| :o: | | MutationObserver | |\n| :o: | | MutationRecord | |\n| :o: | | NamedNodeMap | |\n| :o: | | NamedNodeMap | |\n| :o: | | Node | |\n| :o: | | NodeFilter | |\n| :o: | | NodeIterator | |\n| :o: | | NodeList | |\n| :o: | | ParentNode | |\n| :o: | | ProcessingInstruction | |\n| :o: | | Selection | |\n| :o: | | Range | |\n| :o: | | Text | |\n| :o: | | TextDecoder | |\n| :o: | | TextEncoder | |\n| :o: | | TimeRanges | |\n| :o: | | TreeWalker | |\n| :o: | | URL | |\n| :o: | | Window | |\n| :o: | | Worker | |\n| :o: | | XMLDocument | |\n\n## Upcoming\n\nGenerated `Meta` maps using the typescript compiler, so any updates are generated using the installed version of typescript.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwaynevanson%2Fdom-ts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwaynevanson%2Fdom-ts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwaynevanson%2Fdom-ts/lists"}