hobo.js

A very small, modular DOM utility for modern web apps.

About

Hobo core is only 7k minified and just 11k minified with all extended methods built in! Gzip and you're doing even better!

Docs

View the jsdocs for hobo.

Usage

Install hobo as a package dependency.

npm install properjs-hobo --save-dev

Import hobo into your app.

import $ from "properjs-hobo";

If you only want to use hobo core then you are done. See the next section for custom builds.

Custom Builds

You can also create custom hobo builds with any of the available extended methods. First add a postinstall script to your package.json. Something like this:

{
    "scripts": {
        "postinstall": "cd ./node_modules/properjs-hobo && npm install && npm run build -- 'is eq not attr filter detach remove append'",
    }
}

This is the easiest way to manage your custom hobo builds. If you ever want to add or remove a method just add it to the list and rum npm run postinstall.

Methods

Core

The small, powerful core methods that get the job done.

on() - supports mouseenter and mouseleave
off()
find()
data()
ajax() - supports xhr and jsonp
addClass()
removeClass()

Core - Native Array

These are swiped from the Array prototype for zero overhead.

map()
push()
forEach() - alias available as each()

Extended

These are methods that can make hobo even more powerful.

is()
eq()
not()
one()
next()
prev()
attr()
last()
first()
index()
parent()
filter()
detach()
append()
remove()
trigger()
prepend()
closest()
children()
removeAttr()
toggleClass()

API

If you are familiar with libraries like jQuery then hobo will be real easy.

import $ from "properjs-hobo";


// Hobo gives you a chainable method wrapper
$( ".js-element" )
    // Events
    .on( "click", ( e ) => {
        // Handle stuff
    })
    .on( "click", ".js-delegate-selector", ( e ) => {
        // Handle stuff
    })
    .off( "click", handlerFunction )

    // Data
    .data()
    .data( "key" )
    .data( "key", "value" )
    .data({
        key: "value",
        and: [1, 2, 3]
    })

    // ClassNames
    .addClass( "new-class" )
    .removeClass( "old-class" )

    // Querying
    .find( ".js-child-elements" );

// Hobo gives you utility methods for XHR and Promise.
// Hobo loves promises, so the ajax method returns one.
$.ajax({
    // String url
    url: "/some/endpoint",

    // Object hash to pass to endpoint
    data: {
        foo: "bar",
        baz: "bot"
    },

    // This can be "html", "json" or "jsonp"
    dataType: "json",

    // The request method type, "POST" etc...
    method: "GET",

    // This sets the JSONP callback function name, the default is "callback"
    jsonp: "someCallbackName",

    // This is for passing headers
    headers: {
        "Content-Type": "application/x-www-form-urlencoded"
    },

    // This is for application/json payloads
    payload: {
        sayWhat: "I'm sending JSON"
    }

}).then(function ( response ) {
    // Success with response

}).catch(function ( error ) {
    // Failure with error
});

Testing / Support

Hobo uses Native Promises. You'll need a polyfill for IE if you're not already working with one. The es6-promise looks promising.

Hobo also uses Native DomStringMap with a fallback to NamedNodeMap.

Hobo is tested in Chrome 48.0.2564.116+, Firefox 44.0.2+, Safari 9.0.3+, IE 10+, iOS Mobile Safari 8.4+, Android 4.4.4+

Submit an Issue or Pull Request if you find any bugs.

kitajchuk/hobo