JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Do Mtastic

    Small & fast DOM and event library for modern browsers.
    Filed under  › 

    • 🔾38%Overall
    • 752
    • 8.6 days
    • 🕩46
    • 👥4

    DOMtastic

    • Small, fast, and modular DOM & Event library for modern browsers.
    • Same familiar API as jQuery (but without the extra "weight" of modules like $.ajax, $.animate, and $.Deferred).
    • Dependency-free. Weighs in at only 1KB to 12KB (minified), depending on included modules. Full bundle is about 4KB gzipped.
    • Works great stand-alone or paired up with e.g. Backbone or Angular.
    • The source is written in ES6 format.
    • Rollup and babel are used to create a UMD bundle (supporting AMD, CommonJS, and fallback to browser global).
    • Supercharge your components and extend from the base class.
    • Easy to create a custom build to include or exclude parts.
    • DOMtastic also serves as a starting point for your own application-specific DOM API (read more).

    Build Status Coverage Status BrowserStack Status Code Climate gzip size

    Usage

    ES6 (with e.g. Babel)

    npm install domtastic
    
    import $ from 'domtastic';
    

    CommonJS (with e.g. Browserify)

    npm install domtastic
    
    var $ = require('domtastic');
    

    AMD

    bower install domtastic
    
    requirejs.config({
      baseUrl: 'bower_components',
      packages: [
        {
          name: 'domtastic',
          main: 'domtastic'
        }
      ]
    });
    
    require(['domtastic'], function($) {
      $('.earth').addClass('evergreen').on('sunrise', '.people', awake);
    });
    

    Browser Global

    <script src="//cdn.jsdelivr.net/npm/domtastic"></script>
    
    $('.planet').addClass('evergreen').on('sunrise', '.grass', grow);
    

    ES6 Class

    import $ from 'domtastic';
    
    class MyComponent extends $.BaseClass {
      progress(value) {
        return this.attr('data-progress', value);
      }
    }
    
    let component = new MyComponent('.my-anchor');
    component.progress('ive').append('<p>enhancement</p>');
    

    Read more in the baseClass article or the docs.

    API

    Array

    every
    filter
    forEach (alias: each)
    indexOf
    map
    pop
    push
    reduce
    reduceRight
    reverse
    shift
    some
    unshift
    

    CSS

    css
    

    DOM

    after
    append
    before
    clone
    prepend
    

    DOM/attr

    attr
    removeAttr
    

    DOM/class

    addClass
    hasClass
    removeClass
    toggleClass
    

    DOM/contains

    contains
    

    DOM/data

    data
    prop
    

    DOM/extra

    appendTo
    empty
    remove
    replaceWith
    text
    val
    

    DOM/html

    html
    

    Event

    on (alias: bind)
    off (alias: unbind)
    one
    

    Event/ready

    ready
    

    Event/trigger

    trigger
    triggerHandler
    

    NoConflict

    noConflict
    

    Selector

    $
    find
    matches
    

    Selector/closest

    closest
    

    Selector/extra

    children
    concat
    contents
    eq
    first
    get
    parent
    siblings
    slice
    

    Type

    isArray
    isFunction
    

    Util

    extend
    

    But it doesn't even have awesomest-method!

    As 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:

    Please note that you can extend the $.fn object, just like jQuery Plugins.

    Feel free to open an issue if you feel an important method is missing.

    Browser Support

    Latest versions of Chrome, Firefox, Safari, Opera, Android, Chrome Mobile iOS, and Mobile Safari. Internet Explorer 10 and up. IE9 requires a polyfill for classList.

    Performance

    Run the benchmark suite to compare the performance of various methods of jQuery, Zepto and DOMtastic (tl/dr; it's fast!).

    Custom Build

    You can build a custom bundle that excludes specific modules that you don't need:

    git clone git@github.com:webpro/DOMtastic.git
    cd DOMtastic
    npm install
    npm run bundle -- --exclude=css,dom/html,event/trigger
    

    Alternatively, you can do the opposite and include what you need:

    npm run bundle -- --include=array,selector/index,dom/class
    

    Find the output in the dist/ folder.

    jQuery Compatibility

    Some 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:

    npm run bundle -- --jquery-compat
    

    Build a custom API for your application

    You can also build a custom API from the ground up. By default, DOMtastic does it 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:

    var selector = require('domtastic/commonjs/selector'),
      dom = require('domtastic/commonjs/dom');
    
    var $ = selector.$;
    $.fn = {};
    $.fn.append = dom.append; // Or e.g. _.extend($, dom)
    $.fn.prepend = dom.prepend;
    
    module.exports = $;
    

    This 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.

    Tests

    Run the hosted test suite in your browser. You can also clone this repo, and run the tests locally with jsdom (using npm test). Run npm run test:bs to run the tests in real browsers using BrowserStack.

    Credits

    Many thanks to these sources of inspiration:

    Thanks to the jsDelivr Open Source CDN for hosting DOMtastic.

    Thanks to BrowserStack for their real device cloud.

    License

    MIT

    Show All