hexydec / dabby

A lightweight modular jQuery clone library built for modern browsers

Dabby.js: Lightweight Modular ES6 jQuery clone

A lightweight modular jQuery clone/alternative library built for modern browsers in ES6.

This project is now in beta, make sure to test your integration with this code thoroughly before deploying

jQuery is awesome, why do I need this?

jQuery is a great library, the API is simple yet expressive, but with advancements in browser technology often the full functionality of jQuery is not needed, and there is not really a granular way to remove the bits you aren't using.

Wouldn't it be good to have a simpler jQuery like library that is modular?

Dabby.js is a jQuery alternative designed to be as simple and streamlined as possible whilst covering as much of the jQuery API as much as is feasibly possible in a small size (<10kb minified and Gzipped), you can also build it as part of your project and only include the bits you are actually using.

Find out more about the project here.

I'm sold, how do I get started?

Want to get started quickly? Download the latest release here.

Want to build the bundle yourself? Make sure the following software is installed:

• Git
• NodeJS
• GruntJS

Clone the repository, and build it:

$ git clone https://github.com/hexydec/dabby
$ cd dabby
$ npm install
$ grunt

Then swap jQuery out for dabby.js in your project. It does support AMD modules and CommonJS, so if your project does too, have a fiddle with your build to achieve this.

Next you should probably audit and refactor your code to update anything that Dabby.js will definitely not support, like custom pseudo selectors. Ajax calls will probably need checking over too (Promises are not supported).

Then run it in the browser, or through your test suite to highlight any other issues.

Dabby.js compiles to both ES6 and ES5 bundles, to support all browsers, include Dabby.js like this:

<script src="dist/dabby.es5.js" nomodule></script>
<script src="yourfile.es5.js" nomodule></script>
<script src="yourfile.js" type="module"></script> // include dist/dabby.js or dist/dabby.min.js in your ES6 file.

Browser Support

Browser support for Dabby.js can be found here:

Dabby.js API

Dabby.js is billed as a jQuery clone library, and as such tries to implement as much of the jQuery API as is feasible without getting away from being fast, small, and letting the browser do most of the work.

See the API documentation here.

Custom Builds

As Dabby.js is built in ES6, you can include just the parts you need in your project (If you are using ES6 modules). Include the core library like this, methods are imported without a variable:

import $ from "/src/core/dabby/dabby.js"; // update to reference where you have the project stored
import "/src/attributes/attr/attr.js"; // if you need to create elements with attributes like $("<element>", {some: "attributes"}), include this
import "/src/traversal/filter/filter.js"; // I need $.fn.is(), which is written with $.fn.filter() and $.fn.not()

You can either do this in each module you need dabby.js in, or build a file that imports all the methods you need for your project, and include that somewhere.

Troubleshooting

You can always swap dabby.js out for jQuery to see if the issue is with your code or dabby.js. It is a very young library which hasn't been tested as much as jQuery, so expect bugs. But this library is being used in production of most of my own websites.

If the issue still persists, you can create an issue for it in the tracker.

Contributing

If you find an issue with dabby.js, please create an issue in the tracker, fork the code, fix the issue, then create a pull request, and I will evaluate your submission.

Also look at the To Do list and the coding style guide.

Licence

The MIT License (MIT). Please see License File for more information.

dabby's Issues

.attr() function parameter is not executed - function is used as string

$('#test').attr('data-test', function(i, el){ return 'test'; })

does not set data-test attribute to test, sets it to whole function content.

Error in README

The syntax in ES6 is not include but import

toggleClass 2nd argument

In jquery toggleClass can take a second argument - boolean, which value is used to toggle class - even if it doesn't change anything. I see it implemented in the readme but seems to be not working.

`
$.fn.toggleClassDefault = $.fn.toggleClass;

$.fn.toggleClass = function(selector, value) {
if (value === true) {
this.addClass(selector)
} else if (value === false) {
this.removeClass(selector)
} else {
this.toggleClassDefault(selector)
}
}`
works as temporary fix

How can I parse html that includes javascript code

Hello:

$(selector).load(url[, success]), does not parse the referenced scripts of the form <script src="../script.js"></script> as jQuery does. Would it be possible to include this functionality?

Thank you very much for your attention.

Carlos

Add typings

Add typings to enable IDEs autocompletion

.closest() not working in IE11

Hi,

Looks like .closest() isn't working in IE11. Is this feature supported?
Works in Chrome.

Thanks,

$.fn.hide() and $.fn.show() are missing.

$.fn.hide() and $.fn.show() are missing.

css('value', '') doesn't reset the value

When using css() function in jquery, giving empty value will reset the inline style.
For example:

$(div).css('margin-top', '') would result in

In dabby, the value isn't removed. Is this a desirable behavior?

Thanks,

$.fn.each callback i variable is string

$.each(['a', 'b', 'c'], (i,el) => { console.log(typeof i); console.log(i); })