{"id":15070087,"url":"https://github.com/jonathandion/ez-dom","last_synced_at":"2025-10-27T09:37:17.427Z","repository":{"id":57154228,"uuid":"90883307","full_name":"jonathandion/ez-dom","owner":"jonathandion","description":"ez-dom is a library to manipulate the DOM using composition","archived":false,"fork":false,"pushed_at":"2017-07-06T23:03:12.000Z","size":38,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-20T09:19:01.438Z","etag":null,"topics":["curry","dom","fp","functionnal","html","javascript","jquery-alternative"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jonathandion.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-10T16:03:27.000Z","updated_at":"2024-11-14T03:14:05.000Z","dependencies_parsed_at":"2022-09-06T19:42:16.962Z","dependency_job_id":null,"html_url":"https://github.com/jonathandion/ez-dom","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonathandion%2Fez-dom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonathandion%2Fez-dom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonathandion%2Fez-dom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonathandion%2Fez-dom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jonathandion","download_url":"https://codeload.github.com/jonathandion/ez-dom/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225715945,"owners_count":17512908,"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":["curry","dom","fp","functionnal","html","javascript","jquery-alternative"],"created_at":"2024-09-25T01:47:56.937Z","updated_at":"2025-10-27T09:37:12.372Z","avatar_url":"https://github.com/jonathandion.png","language":"JavaScript","funding_links":[],"categories":["Libraries"],"sub_categories":["[Javascript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)"],"readme":"\r\n![Travis CI](https://travis-ci.org/jonathandion/ez-dom.svg?branch=master)\r\n\r\n[![NPM](https://nodei.co/npm/ez-dom.png?downloads=true)](https://www.npmjs.com/package/ez-dom)\r\n\r\n\r\n\u003e ez-dom is a library to manipulate the DOM using composition.\r\n\r\n## Getting started\r\nez-dom promotes a functional programming (FP) style to manipulate the DOM. Most methods are auto-curried and data-last(dom element(s)).\r\n\r\n\r\n#### Curried methods\r\n\r\n cap iteratees to one argument:\r\n \r\n`addClass`\r\n`append`\r\n`removeClass`\r\n`toggleClass`\r\n`css`\r\n`html`\r\n`trigger`\r\n`setText`\r\n\r\nMethods that cap iteratees to two argument:\r\n\r\n`on`\r\n\r\nMethods that are not curried:\r\n\r\n`remove`, `ready`, `show`, `hide`, `offset`, `query`, `getText`\r\n\r\ne.g :\r\n`ez.remove(element)`\r\n\r\n\r\n## Installation\r\n\r\nnpm\r\n```js\r\n npm install ez-dom\r\n```\r\n\r\nyarn\r\n```js\r\n yarn add ez-dom\r\n```\r\n\r\n\r\n```js\r\nimport * as ez from 'ez-dom'\r\n```\r\nor destructuring\r\n```js\r\nimport { addClass }  from 'ez-dom'\r\n```\r\n\r\nTo reduce size all you need is to use bundler with tree shaking support like webpack 2 or Rollup.\r\n\r\nYou can do imports like below without actually including the entire library content.\r\n\r\n```js\r\nimport ready from 'ez-dom/lib/dom/ready'\r\nimport query from 'ez-dom/lib/dom/query'\r\nimport addClass from 'ez-dom/lib/dom/addClass'\r\n```\r\n\r\n## Examples\r\n\r\n```js\r\nez.ready(() =\u003e {\r\n\r\n\tconst body = ez.query('body')\r\n\tconst test = ez.query('.test')\r\n\r\n\tconst handleClick = function(e, el) {\r\n\t\te.preventDefault()\r\n\t\tez.addClass('bar', el)\r\n\t\tconsole.log(e.detail) // Object {derp: \"derp!\"}\r\n\t}\r\n\r\n\tconst addClassOnClick = ez.on(ez._, handleClick)\r\n\t\r\n\taddClassOnClick('click')(body)\r\n\taddClassOnClick('click', test)\r\n\r\n\tconst trigger = ez.trigger({ event : 'click', detail : { 'derp' : 'derp!' }})\r\n\ttrigger(body)\r\n\r\n\tconst applyStyle = ez.compose(\r\n\t\tez.addClass('elon'),\r\n\t\tez.css({ backgroundColor: 'red' })\r\n\t)\r\n\r\n\tapplyStyle(ez.query('div'))\r\n\r\n})\r\n```\r\n\r\n### API\r\n\r\n#### query \r\n\r\n`(selectors: any) =\u003e Array\u003cHTMLElement\u003e`\r\n\r\nQuery one or many element.\r\n\r\n```js \r\n const el = query('div')\r\n```\r\n\r\n#### ready \r\n\r\n`(callback: Function) =\u003e void`\r\n\r\nSpecify a function to execute when the DOM is fully loaded.\r\n\r\n```js \r\n ez.ready(() =\u003e { console.log('ready!') })\r\n```\r\n\r\n#### addClass \r\n\r\n`(classes: string, selectors: Array\u003cHTMLElement\u003e) =\u003e Array\u003cHTMLElement\u003e`\r\n\r\nAdds the specified class(es) to each element in the set of matched elements.\r\n\r\n```js\r\n addClass('myClass')(element)\r\n```\r\n\r\n#### append  \r\n\r\n`(html: any, selectors: Array\u003cHTMLElement\u003e) =\u003e Array\u003cHTMLElement\u003e`\r\n\r\nInsert content, specified by the parameter, to the end of each element in the set of matched elements.\r\n\r\n```js \r\n append(`\u003cdiv\u003ehi\u003c/div\u003e`)(element)\r\n```\r\n#### css \r\n\r\n`(css: object, selectors: Array\u003cHTMLElement\u003e) =\u003e Array\u003cHTMLElement\u003e`\r\n\r\nSet one or more CSS properties for every matched element.\r\n\r\n```js \r\n css({ backgroundColor: 'blue', fontSize: '20px' })(element)\r\n```\r\n\r\n#### getText \r\n\r\n`(selectors: Array\u003cHTMLElement\u003e) =\u003e string`\r\n\r\nGet the text of the first element\r\n\r\n```js \r\n getText(element)\r\n```\r\n#### hide \r\n\r\n`(selectors: Array\u003cHTMLElement\u003e) =\u003e Array\u003cHTMLElement\u003e`\r\n\r\nHide the matched elements.\r\n\r\n```js \r\n hide(element)\r\n```\r\n\r\n#### html \r\n\r\n`(selectors: Array\u003cHTMLElement\u003e) =\u003e string`\r\n\r\nGet the HTML contents of the first element.\r\n\r\n```js \r\n const html = html(element)\r\n```\r\n\r\n#### offset\r\n\r\n `(selectors: Array\u003cHTMLElement\u003e) =\u003e Object`\r\n\r\n\r\nGet the current coordinates of the first element.\r\n\r\n```js \r\nconst offset = offset(element)\r\n```\r\n\r\n#### on \r\n\r\n`(event: string, callback: Function, selectors: Array\u003cHTMLElement\u003e) =\u003e Array\u003cHTMLElement\u003e`\r\n\r\nAttach an event handler function for one or more events to the selected elements.\r\n\r\n```js \r\n on('click')(handleClick)(div)\r\n```\r\n\r\n#### remove \r\n\r\n`(selectors: Function) =\u003e Array\u003cHTMLElement\u003e`\r\n\r\nRemove the set of matched elements from the DOM.\r\n\r\n```js \r\n remove(element)\r\n```\r\n\r\n#### removeClass \r\n\r\n`(classes: string selectors: Array\u003cHTMLElement\u003e) =\u003e Array\u003cHTMLElement\u003e`\r\n\r\nRemove a single class, multiple classes, or all classes from each element in the set of matched elements\r\n\r\n```js \r\n removeClass('foo derp')(element)\r\n```\r\n\r\n#### setText \r\n\r\n`(text: string, selectors: Array\u003cHTMLElement\u003e) =\u003e Array\u003cHTMLElement\u003e`\r\n\r\nSet the text contents of the matched elements.\r\n\r\n```js \r\n setText('foo')(div)\r\n```\r\n\r\n#### show \r\n\r\n`(selectors: Array\u003cHTMLElement\u003e) =\u003e Array\u003cHTMLElement\u003e`\r\n\r\nDisplay the matched elements.\r\n\r\n```js \r\n show(div)\r\n```\r\n\r\n#### toggleClass \r\n\r\n`(classes: string, selectors: Array\u003cHTMLElement\u003e) =\u003e Array\u003cHTMLElement\u003e`\r\n\r\nAdd or remove one or more classes from each element in the set of matched elements.\r\n\r\n```js \r\n toggleClass('myToggleClass')(div)\r\n```\r\n\r\n\r\n#### trigger \r\n\r\n`({event, detail}: { event: string; detail: Object; }, selectors: Array\u003cHTMLElement\u003e ) =\u003e Array\u003cHTMLElement\u003e`\r\n\r\nExecute all handlers and behaviors attached to the matched elements for the given event type.\r\n\r\n```js \r\n trigger({ event : 'click', detail : { 'test' : 'hi' } })(element)\r\n```\r\n\r\n### Placeholder\r\n\r\nA special placeholder value used to specify \"gaps\" within curried functions, allowing partial application of any combination of arguments, regardless of their positions.\r\n\r\ne.g:\r\n\r\n```js\r\n const addClassOnClick = ez.on(_, handleClick)\r\n addClassOnClick('click')(body)\r\n```\r\n\r\n\r\n#### Browser support\r\n\r\nez-dom works on modern browsers such as Chrome, Firefox, and Safari.\r\n\r\n# License\r\n\r\nMIT\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonathandion%2Fez-dom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjonathandion%2Fez-dom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonathandion%2Fez-dom/lists"}