{"id":15498202,"url":"https://github.com/getify/domio","last_synced_at":"2025-04-22T22:15:40.721Z","repository":{"id":45144074,"uuid":"330998227","full_name":"getify/domio","owner":"getify","description":"DOM and Event helpers for Monio","archived":false,"fork":false,"pushed_at":"2022-08-27T14:31:16.000Z","size":65,"stargazers_count":30,"open_issues_count":0,"forks_count":3,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-29T19:21:50.487Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/getify.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-01-19T14:00:08.000Z","updated_at":"2023-09-12T19:34:54.000Z","dependencies_parsed_at":"2022-07-21T06:18:16.662Z","dependency_job_id":null,"html_url":"https://github.com/getify/domio","commit_stats":null,"previous_names":[],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/getify%2Fdomio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/getify%2Fdomio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/getify%2Fdomio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/getify%2Fdomio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/getify","download_url":"https://codeload.github.com/getify/domio/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249297774,"owners_count":21246475,"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-02T08:42:22.553Z","updated_at":"2025-04-17T01:31:51.382Z","avatar_url":"https://github.com/getify.png","language":"JavaScript","readme":"# Domio\n\n[![npm Module](https://badge.fury.io/js/domio.svg)](https://www.npmjs.org/package/domio)\n[![Modules](https://img.shields.io/badge/modules-ESM%2BUMD%2BCJS-a1356a)](https://nodejs.org/api/packages.html#dual-commonjses-module-packages)\n[![License](https://img.shields.io/badge/license-MIT-a1356a)](LICENSE.txt)\n\n**Domio** (dä'me-yo) is a companion lib to [Monio](https://github.com/getify/monio), providing a collection of helpers to manage/manipulate the DOM with IO monads, and listen for DOM events via IO-Event-Streams and route the event handling.\n\n## Overview\n\n**Domio** is a tightly-coupled companion to [Monio](https://github.com/getify/monio). It's a collection of helper utilities, which together (with Monio) form a sort of foundational, FP-friendly, loose \"framework\" for JS (especially browser-based) applications.\n\nThis \"framework\" is opinionated in the sense that you should use Monio's IO monad for managing *all* side-effects in a JS application, and thus standardizes around that as its guiding principle. Monio's IO supports \"do\" syntax, via JS generators, so you can still write more familiar looking (imperative-style) code while adhering to FP and monadic principles.\n\nThe four collections of helpers provided:\n\n* `FP-Helpers`: a collection of typical FP utilities, including `eq(..)`, `listMap(..)`, `compose(..)`, etc; these aren't IO or even monad specific; if you already use a library like [Ramda](https://ramdajs.com/), you probably don't need most of these, but the rest of **Domio** uses them extensively\n\n* `Misc-Helpers`: a collection of miscellaneous IO-specific helpers, such as basic *State*-monad'ish capability (stored in IO's Reader env under `state`) using `getState(..)`, `setState(..)`, `updateState(..)`, etc\n\n* `DOM-Helpers`: a collection of DOM-focused IO-specific helpers, including `getElement(..)`, `addClass(..)`, etc\n\n* `Event-Helpers`: a collection of Event-focused IO-specific helpers, for managing DOM events with streams and routers (via `manageDOMEvents(..)` and its returned API methods), sending events on a standard Event-Emitter (like [Node's EventEmitter](https://nodejs.org/api/events.html#events_class_eventemitter) or [EventEmitter2](https://github.com/EventEmitter2/EventEmitter2) for the browser), waiting for one-time events, etc\n\n## Details\n\nMore details coming soon.\n\n## npm Package\n\n[![npm Module](https://badge.fury.io/js/domio.svg)](https://www.npmjs.org/package/domio)\n[![Modules](https://img.shields.io/badge/modules-ESM%2BUMD%2BCJS-a1356a)](https://nodejs.org/api/packages.html#dual-commonjses-module-packages)\n\nTo install this package from `npm`:\n\n```\nnpm install domio\n```\n\nThe files you'll need from **Domio** are included in the `dist/` directory. They come in three forms:\n\n* [UMD (Univeral Module Definition)](https://github.com/umdjs/umd) for use in the browser in classic `\u003cscript src=..\u003e\u003c/script\u003e` tags, or with AMD-compatible script loaders, from the `dist/umd/` directory.\n\n    You'll likely deploy the single `bundle.js` file for **Domio**, as well Monio's `bundle.js` file (suggested: rename them!), for most convenience. You *can* however deploy individual files (assuming they're loaded in the correct order) from here if you choose, but it's not as recommended/optimal.\n\n* [Browser ESM (ES Modules)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) for use in modern browser applications, using `\u003cscript type=module src=..\u003e\u003c/script\u003e` tags and `import` / `export` statements, from the `dist/esm-browser/` directory.\n\n    You'll likely deploy all of the files in this directory, exactly as they appear in there, including the `monio` sub-directory and its files. The build for **Domio** uses [Import-Remap](https://github.com/getify/import-remap) to ensure all references to Monio's files in its `import` statements resolve properly to that relative location.\n\n    In other words, you won't need to separately deploy Monio when using **Domio**, you'll just use the files it ships with.\n\n* Plain ESM from the `dist/esm/` directory, for potential use in non-browser environments (ie, Node). These files may prove useful in some endeavors, and are provided for completeness sake. But **Domio** is definitely geared more for use in browsers.\n\n## Browser Usage\n\nUsing the UMD-style files from `dist/umd/`, loaded as normal scripts, you'll have automatic globals to interact with in your app:\n\n```js\nvar { curry, compose } = FPHelpers;\nvar { whenDOMReady } = DOMHelpers;\n\nIO;  // IO(..)\n```\n\nOr using them in an AMD-style module (assuming the **Domio** and Monio AMD files/bundles have already been loaded):\n\n```js\ndefine(\n    [\"FPHelpers\",\"DOMHelpers\",\"IO\"],\n    function def(FPHelpers,DOMHelpers,IO){\n        var { curry, compose } = FPHelpers;\n        var { whenDOMReady } = DOMHelpers;\n\n        IO;  // IO(..)\n    }\n);\n```\n\nOr importing them into an ES module (in the browser):\n\n```js\nimport {\n    FPHelpers,\n    MiscHelpers,\n    DOMHelpers,\n    EventHelpers,\n} from \"url/to/domio/index.mjs\";\n\n// or:\nimport FPHelpers from \"url/to/domio/fp-helpers.mjs\";\nvar { curry, compose } = FPHelpers;\n\n// or:\nimport { whenDOMReady } from \"url/to/domio/dom-helpers.mjs\";\n\n// you'll also want Monio's IO, which comes along\n// with Domio automatically\nimport IO from \"url/to/domio/monio/io.mjs\";\n```\n\nWhen using ES modules in the browser, unless you use [import-maps](https://github.com/WICG/import-maps), which are [not currently supported in any/most browsers](https://caniuse.com/import-maps), you'll have to specify a URL (relative or absolute) to the **Domio** (and thus, Monio) files you deploy from the `dist/esm-browser/` directory, as in `url/to/domio/..` above. These URLs typically need a file extension, which for both **Domio** and Monio is always `.mjs`.\n\nAs explained earlier, and illustrated here, the path to use for Monio is relative to (aka, inside of) where you deploy **Domio** (`url/to/domio/monio/..`).\n\n## Node Usage\n\nYou typically *won't* use **Domio** on the server, as it's heavily focused on browser-based environments (DOM, etc). However, should you wish to, here's how to require it in a Node script:\n\n```js\nvar {\n    FPHelpers,\n    MiscHelpers,\n    DOMHelpers,\n    EventHelpers,\n} = require(\"domio\");\n\n// or:\nvar FPHelpers = require(\"domio/fp-helpers\");\nvar { curry, compose } = FPHelpers;\n\n// or:\nvar { whenDOMReady } = require(\"domio/dom-helpers\");\n\n// you'll also want Monio's IO, which comes along\n// with Domio automatically\nvar IO = require(\"monio/io\");\n```\n\nOr in a Node ES module:\n\n```js\nimport {\n    FPHelpers,\n    MiscHelpers,\n    DOMHelpers,\n    EventHelpers,\n} from \"domio\";\n\n// or:\nimport FPHelpers from \"domio/fp-helpers\";\nvar { curry, compose } = FPHelpers;\n\n// or:\nimport { whenDOMReady } from \"domio/dom-helpers\";\n\n// you'll also want monio, which comes along\n// with Domio automatically\nimport IO from \"monio/io\";\n```\n\n**Note:** As of v0.4.0, the previously required ESM import specifier segment `/esm` in **Domio** `import` paths has been deprecated (and will eventually be removed), in favor of unified import specifier paths via [Node Conditional Exports](https://nodejs.org/api/packages.html#packages_conditional_exports). For ESM `import` statements, always use the specifier style `\"domio\"` or `\"domio/dom-helpers\"`, instead of `\"domio/esm\"` and `\"domio/esm/dom-helpers\"`, respectively. This does not affect the separate `/esm-browser` paths, should you (for some reason) need to access the browser-build of the ESM files via `import` statements in Node (not supported).\n\n## License\n\n[![License](https://img.shields.io/badge/license-MIT-a1356a)](LICENSE.txt)\n\nAll code and documentation are (c) 2021 Kyle Simpson and released under the [MIT License](http://getify.mit-license.org/). A copy of the MIT License [is also included](LICENSE.txt).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgetify%2Fdomio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgetify%2Fdomio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgetify%2Fdomio/lists"}