[](https://github.com/jdmota/MotaJS/blob/master/LICENSE.md) [](https://github.com/jdmota/MotaJS/releases) [](https://www.npmjs.com/package/motajs) [](https://david-dm.org/jdmota/motajs) [](https://david-dm.org/jdmota/motajs#info=devDependencies) [](https://travis-ci.org/jdmota/MotaJS) [](https://codecov.io/github/jdmota/MotaJS?branch=master) [](https://gitter.im/jdmota/MotaJS?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) [Test MotaJS now with Tonic!](https://tonicdev.com/npm/motajs) *(no installation needed)* # About **MotaJS** is a JavaScript library that includes a lot of different things to help you build web applications easily from scratch. The idea is to include API's higher than the ones provided by the browser but lower enough so that you can build on top of them if you like. I'm open to other ideas so, if you want to contribute with code or documentation, see the [**Contribute**](#contribute) section below. Thanks. ## Features ### Utilities Includes a lot of useful functions: assign, keys, isEqual, isObject, etc... ````javascript var object1 = { apple: 0, banana: { weight: 52, price: 100 }, cherry: 97 }; var object2 = { banana: { price: 200 }, durian: 100 }; mota.assign( object1, object2 ); // { apple: 0, banana: { price: 200 }, cherry: 97, durian: 100 } ```` ### Events A module that can be mixed in to any object, giving the object the ability to bind and trigger custom named events. ````javascript var object = {}; mota.assign( object, mota.Events ); object.on( "expand", function() { alert( "expanded!" ); } ); object.trigger( "expand" ); ```` It supports regular expressions! ````javascript obj.on( /a/, function( data, ...args ) { data.string; // "ab" data.match; // [ "a" ] } ); obj.trigger( "ab", ...args ); ```` ### Map The Map object is a simple key/value map. Any value (both objects and primitive values) may be used as either a key or a value. Implemented by a hash-array mapped trie. You can create mutable maps... ````javascript var map1 = mota.Map( { a: 1, b: 2, c: 3 } ); var map2 = map1.set( "b", 50 ); map1.get( "b" ); // 50 map2.get( "b" ); // 50 map1 === map2 // true ```` ... but you can also create immutable ones. ````javascript var map1 = mota.ImmutableMap( { a: 1, b: 2, c: 3 } ); var map2 = map1.set( "b", 2 ); map1 === map2 // no change var map3 = map1.set( "b", 50 ); map1 !== map3 // change map1.get( "b" ); // 2 map3.get( "b" ); // 50 ```` If you use it as mutable data, you can observe changes: ````javascript var map1 = mota.Map( { a: 1, b: 2, c: 3 } ); map1.on( "change", function( changes ) { // changes: list of changes } ); ```` ### Pathname Allows you to resolve and normalize pathnames. ### Observable An implementation of the [Observable proposal](https://github.com/tc39/proposal-observable) + some other features. ### Promise A complete Promise polyfill. It also emits `unhandledRejection`/`rejectionHandled` events on NodeJS and `unhandledrejection`/`rejectionhandled` events on the Browser. ### Router Simple express-style router. Works in NodeJS and the browser. ````javascript var router = new mota.Router(); router.get( "/:foo", function( req, res, next ) { next(); } ); router.handle( { url: "/something", method: "GET" }, {}, function() {} ); ```` ### History Helps you use the History API in the browser. ````javascript var router = new mota.Router(); router.get( "/page", function( request, response, next ) { next(); } ); var history = new mota.History( router ); history.navigate( "/page" ); ```` ### View - Use 100% JavaScript to build your templates. - Implements one-way data flow. - Uses a diff implementation for high performance. - Supports rendering into a string. - Supports fragments. ````javascript ... var TodoApp = mota.view.createClass( { ... render: function( dom ) { var items = this.map.get( "items" ); dom.setType( "div" ); dom.open( "h3" ); dom.text( "TODO" ); dom.close(); dom.void( TodoList, null, { items: items } ); dom.open( "form" ); dom.attr( "onSubmit", this.handleSubmit ); dom.open( "input" ); dom.attr( "onInput", this.onInput ); dom.attr( "value", this.map.get( "text" ) ); dom.close(); dom.open( "button" ); dom.text( "Add #" + ( items.length + 1 ) ); dom.close(); dom.close(); } } ); mota.view.render( function( dom ) { dom.void( TodoApp ); }, document.body ); ```` *Complete example [here](https://github.com/jdmota/MotaJS/blob/master/test/files/view/todoapp.js).* # Downloads [List of all releases and changelog](http://github.com/jdmota/MotaJS/releases) # Installation ### Browser ````html ```` MotaJS is also available through [jsDelivr CDN](http://www.jsdelivr.com/projects/motajs) and [cdnjs](https://cdnjs.com/libraries/motajs). ### Node.js ```` npm install motajs ```` # Documentation All the information about how to use MotaJS is available [here](https://github.com/jdmota/MotaJS/blob/master/docs/README.md). If you want to see documentation of the latest or previous versions, just select a different tag instead of `master`. # Browser support - Internet Explorer - 11 - Chrome & Firefox & Safari & Opera & Edge - Current version - iOS - 6.1+ - Android - 4.0+ # Contribute [](https://gitter.im/jdmota/MotaJS?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) The project is hosted on [GitHub](http://github.com/jdmota/MotaJS). You can report bugs and discuss features on the [issues page](http://github.com/jdmota/MotaJS/issues). [How to report bugs](https://github.com/jdmota/MotaJS/blob/master/CONTRIBUTING.md) [How to build and test your copy of MotaJS](https://github.com/jdmota/MotaJS/blob/master/BUILD.md) # Roadmap [See the roadmap.](https://github.com/jdmota/MotaJS/wiki/Roadmap)