{"id":13437968,"url":"https://github.com/webpro/DOMtastic","last_synced_at":"2025-03-19T18:31:22.526Z","repository":{"id":10148928,"uuid":"12226315","full_name":"webpro/DOMtastic","owner":"webpro","description":"Small, fast, and modular DOM and event library for modern browsers.","archived":true,"fork":false,"pushed_at":"2022-02-23T20:28:52.000Z","size":1418,"stargazers_count":762,"open_issues_count":0,"forks_count":38,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-03-11T16:03:28.939Z","etag":null,"topics":["dom","events","jquery","microjs","modular","performance","selector"],"latest_commit_sha":null,"homepage":"https://domtastic.js.org","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/webpro.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":"2013-08-19T20:00:40.000Z","updated_at":"2024-12-08T06:09:52.000Z","dependencies_parsed_at":"2022-09-13T02:32:29.575Z","dependency_job_id":null,"html_url":"https://github.com/webpro/DOMtastic","commit_stats":null,"previous_names":[],"tags_count":68,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpro%2FDOMtastic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpro%2FDOMtastic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpro%2FDOMtastic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpro%2FDOMtastic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webpro","download_url":"https://codeload.github.com/webpro/DOMtastic/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244483273,"owners_count":20460084,"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":["dom","events","jquery","microjs","modular","performance","selector"],"created_at":"2024-07-31T03:01:01.810Z","updated_at":"2025-03-19T18:31:22.222Z","avatar_url":"https://github.com/webpro.png","language":"JavaScript","readme":"# DOMtastic\n\n- Small, fast, and modular **DOM \u0026 Event** library for modern browsers.\n- Same familiar API as jQuery (but without the extra \"weight\" of modules like `$.ajax`, `$.animate`, and `$.Deferred`).\n- Dependency-free. Weighs in at only 1KB to 12KB (minified), depending on included modules. Full bundle is about 4KB gzipped.\n- Works great stand-alone or paired up with e.g. Backbone or Angular.\n- The [source](https://github.com/webpro/DOMtastic) is written in ES6 format.\n- [Rollup](http://rollupjs.org) and [babel](https://babeljs.io) are used to create a [UMD](https://github.com/umdjs/umd) bundle (supporting AMD, CommonJS, and fallback to browser global).\n- Supercharge your components and extend from the [base class](#es6-class).\n- Easy to create a [custom build](#custom-build) to include or exclude parts.\n- DOMtastic also serves as a starting point for your own application-specific DOM API ([read more](#build-a-custom-api-for-your-application)).\n\n## Quicklinks\n\n- Bundled sources: [domtastic.js](https://cdn.jsdelivr.net/npm/domtastic@latest/dist/domtastic.js), [domtastic.min.js](https://cdn.jsdelivr.net/npm/domtastic@latest/dist/domtastic.min.js)\n- [API documentation](https://domtastic.js.org/doc/)\n- [Run tests](https://domtastic.js.org/test/)\n- Coverage: [Istanbul](https://domtastic.js.org/coverage/), [Coveralls](https://coveralls.io/github/webpro/DOMtastic)\n- [Run benchmarks](https://domtastic.js.org/benchmark/)\n\n[![Build Status](https://travis-ci.org/webpro/DOMtastic.png?branch=master)](https://travis-ci.org/webpro/DOMtastic)\n[![Coverage Status](https://coveralls.io/repos/github/webpro/DOMtastic/badge.svg)](https://coveralls.io/github/webpro/DOMtastic)\n![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=MUcvSm9ES1VaYlpTMnk0NytOVDdML3FxRlJNM0VNR2RQdnBPMGduNUowZz0tLUNHWkJ4V2t0SXNqUkRRQUJjTWVnekE9PQ==--c64c417a0144336c1f174ecbe35b4801f82b74e0)\n[![Code Climate](https://codeclimate.com/github/webpro/DOMtastic/badges/gpa.svg)](https://codeclimate.com/github/webpro/DOMtastic)\n[![gzip size](http://img.badgesize.io/https://unpkg.com/domtastic/dist/domtastic.min.js?compression=gzip)](https://unpkg.com/domtastic/dist/domtastic.min.js)\n[![](https://data.jsdelivr.com/v1/package/npm/domtastic/badge)](https://www.jsdelivr.com/package/npm/domtastic)\n\n## Usage\n\n### ES6 (with e.g. Babel)\n\n```bash\nnpm install domtastic\n```\n\n```javascript\nimport $ from 'domtastic';\n```\n\n### CommonJS (with e.g. Browserify)\n\n```bash\nnpm install domtastic\n```\n\n```javascript\nvar $ = require('domtastic');\n```\n\n### AMD\n\n```bash\nbower install domtastic\n```\n\n```javascript\nrequirejs.config({\n  baseUrl: 'bower_components',\n  packages: [\n    {\n      name: 'domtastic',\n      main: 'domtastic'\n    }\n  ]\n});\n\nrequire(['domtastic'], function($) {\n  $('.earth').addClass('evergreen').on('sunrise', '.people', awake);\n});\n```\n\n### Browser Global\n\n```html\n\u003cscript src=\"//cdn.jsdelivr.net/npm/domtastic\"\u003e\u003c/script\u003e\n```\n\n```javascript\n$('.planet').addClass('evergreen').on('sunrise', '.grass', grow);\n```\n\n### ES6 Class\n\n```javascript\nimport $ from 'domtastic';\n\nclass MyComponent extends $.BaseClass {\n  progress(value) {\n    return this.attr('data-progress', value);\n  }\n}\n\nlet component = new MyComponent('.my-anchor');\ncomponent.progress('ive').append('\u003cp\u003eenhancement\u003c/p\u003e');\n```\n\nRead more in the [baseClass article](https://medium.com/@webprolific/domtastic-s-baseclass-437f142e8bf4) or the [docs](https://domtastic.js.org/doc/#baseClass).\n\n## API\n\n### [Array](https://domtastic.js.org/doc/#array)\n\n    every\n    filter\n    forEach (alias: each)\n    indexOf\n    map\n    pop\n    push\n    reduce\n    reduceRight\n    reverse\n    shift\n    some\n    unshift\n\n### [CSS](https://domtastic.js.org/doc#css)\n\n    css\n\n### [DOM](https://domtastic.js.org/doc/#dom/index)\n\n    after\n    append\n    before\n    clone\n    prepend\n\n### [DOM/attr](https://domtastic.js.org/doc#dom/attr)\n\n    attr\n    removeAttr\n\n### [DOM/class](https://domtastic.js.org/doc#dom/class)\n\n    addClass\n    hasClass\n    removeClass\n    toggleClass\n\n### [DOM/contains](https://domtastic.js.org/doc#dom/contains)\n\n    contains\n\n### [DOM/data](https://domtastic.js.org/doc#dom/data)\n\n    data\n    prop\n\n### [DOM/extra](https://domtastic.js.org/doc#dom/extra)\n\n    appendTo\n    empty\n    remove\n    replaceWith\n    text\n    val\n\n### [DOM/html](https://domtastic.js.org/doc#dom/html)\n\n    html\n\n### [Event](https://domtastic.js.org/doc/#event/index)\n\n    on (alias: bind)\n    off (alias: unbind)\n    one\n\n### [Event/ready](https://domtastic.js.org/doc#event/ready)\n\n    ready\n\n### [Event/trigger](https://domtastic.js.org/doc#event/trigger)\n\n    trigger\n    triggerHandler\n\n### [NoConflict](https://domtastic.js.org/doc#noconflict)\n\n    noConflict\n\n### [Selector](https://domtastic.js.org/doc/#selector/index)\n\n    $\n    find\n    matches\n\n### [Selector/closest](https://domtastic.js.org/doc#selector/closest)\n\n    closest\n\n### [Selector/extra](https://domtastic.js.org/doc#selector/extra)\n\n    children\n    concat\n    contents\n    eq\n    first\n    get\n    parent\n    siblings\n    slice\n\n### [Type](https://domtastic.js.org/doc#type)\n\n    isArray\n    isFunction\n\n### [Util](https://domtastic.js.org/doc/#util)\n\n    extend\n\n## But it doesn't even have _awesomest-method_!\n\nAs mentioned in the introduction, DOMtastic doesn't feature methods for Ajax, Animation, Promise, etc. Please find your own libraries to fill in the gaps as needed. Here are just some examples:\n\n- Ajax: [microjs#ajax](http://microjs.com/#ajax), [rest.js](https://github.com/cujojs/rest)\n- Animation: [microjs#animation](http://microjs.com/#animation), [Move.js](http://visionmedia.github.io/move.js/), [Animate.css](https://daneden.me/animate/)\n- Promises: [when.js](https://github.com/cujojs/when), [RSVP.js](https://github.com/tildeio/rsvp.js)\n\nPlease note that you can extend the `$.fn` object, just like [jQuery Plugins](http://learn.jquery.com/plugins/basic-plugin-creation/).\n\nFeel free to [open an issue](https://github.com/webpro/DOMtastic/issues) if you feel an important method is missing.\n\n## Browser Support\n\nLatest versions of Chrome, Firefox, Safari, Opera, Android, Chrome Mobile iOS, and Mobile Safari. Internet Explorer 10 and up. IE9 requires a polyfill for `classList`.\n\n## Performance\n\nRun the [benchmark suite](https://domtastic.js.org/benchmark/) to compare the performance of various methods of jQuery, Zepto and DOMtastic (tl/dr; it's fast!).\n\n## Custom Build\n\nYou can build a custom bundle that _excludes_ specific modules that you don't need:\n\n```bash\ngit clone git@github.com:webpro/DOMtastic.git\ncd DOMtastic\nnpm install\nnpm run bundle -- --exclude=css,dom/html,event/trigger\n```\n\nAlternatively, you can do the opposite and _include_ what you need:\n\n```bash\nnpm run bundle -- --include=array,selector/index,dom/class\n```\n\nFind the output in the `dist/` folder.\n\n### jQuery Compatibility\n\nSome iterator method signatures in jQuery are different (i.e. non-standard), most notably the `index` before `element` argument in `each`, `filter` and `map`). However, a custom build that is compatible with jQuery can be created by using the `--jquery-compat` flag:\n\n```bash\nnpm run bundle -- --jquery-compat\n```\n\n### Build a custom API for your application\n\nYou can also build a custom API from the ground up. By default, DOMtastic [does it](https://github.com/webpro/DOMtastic/blob/master/src/index.js) for you, but you can easily do it yourself in a highly custom approach. Grab the `$` function from the `selector`, and extend the `$.fn` object with methods from specific modules:\n\n```javascript\nvar selector = require('domtastic/commonjs/selector'),\n  dom = require('domtastic/commonjs/dom');\n\nvar $ = selector.$;\n$.fn = {};\n$.fn.append = dom.append; // Or e.g. _.extend($, dom)\n$.fn.prepend = dom.prepend;\n\nmodule.exports = $;\n```\n\nThis way, you don't have the slight overhead of the UMD boilerplate in a custom bundle, and a single location/module to define the API for your application. Works great with either AMD or Browserify.\n\n## Tests\n\nRun the hosted [test suite](https://domtastic.js.org/test/) in your browser. You can also clone this repo, and run the tests locally with [jsdom](https://github.com/tmpvar/jsdom) (using `npm test`). Run `npm run test:bs` to run the tests in real browsers using BrowserStack.\n\n## Credits\n\nMany thanks to these sources of inspiration:\n\n- [jQuery](http://jquery.com/)\n- [madrobby/zepto](https://github.com/madrobby/zepto/)\n- [remy/min.js](https://github.com/remy/min.js)\n- [Knockout](https://github.com/knockout/knockout/blob/master/src/utils.js)\n- [inkling/Backbone.Native](https://github.com/inkling/backbone.native/blob/master/backbone.native.js)\n\nThanks to the [jsDelivr Open Source CDN](https://www.jsdelivr.com/) for [hosting DOMtastic](https://www.jsdelivr.com/projects/domtastic).\n\n[\u003cimg src=\"https://www.jsdelivr.com/img/logo@2x.png\" width=\"300\"\u003e](https://www.jsdelivr.com)\n\nThanks to [BrowserStack](https://www.browserstack.com) for their real device cloud.\n\n[\u003cimg src=\"https://cloud.githubusercontent.com/assets/7864462/12837037/452a17c6-cb73-11e5-9f39-fc96893bc9bf.png\" width=\"300\"\u003e](https://www.browserstack.com)\n\n## License\n\n[MIT](http://webpro.mit-license.org)\n","funding_links":[],"categories":["Plugins","JavaScript"],"sub_categories":["DOM"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebpro%2FDOMtastic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebpro%2FDOMtastic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebpro%2FDOMtastic/lists"}