Project Mariah

Note: this project is in early development and it not ready for production!

TLDR;

Project Mariah is a set of tools made to separate markup from logic for client side development.

Full Explanation

Often in client side development for complex dynamic web applications, markup ends up tangled up with with the JavaScript.

Mariah compiles components written in Jade into a JavaScript object which contains jQuery HTML objects that can be used on the client side in a way that is almost transparent to the developer.

You can define every bit of you're dynamic markup in jade file while you program their logic in a separate JavaScript file, making a complex project more maintainable.

Optionally you can use the client mariah.js file to extend jQuery with some fancy binding methods.

Get started

Node/CLI Setup

Run npm install mariah -g .

Note: you must install with the -g flag if you want to use Mariah from the command line.

By default Mariah will use the /components directory as it's source and /public/js/comps for the target directory.

Any files in the root of the source directory will be compiled into an object which will be set to Main in the global scope, where the key to each component is the origin filename truncated at the first ".", and will be saved to /public/js/comps/main.js .

If a one or more files are added to a sub directory of the source folder they will be saved to /public/js/comps/[source file name, truncated at the first "." and .toLowerCase()].js and the object will be set to the source file name, truncated at the first ".".

Command Line Interface

Once you've installed Mariah globally you can access all of it's exported methods via the command line. Example: mariah watch.

Arguments

| Argument | option name | |----------------------------|---------------------| | -s or --source | source_folder | | -t or --target | target_folder | | -n or --name | object_name | | -f or --file | filename |

See Options section bellow

Methods

Mariah.compile({options}, callback)

Note: Compilation is meant to be done ahead of time but can be done of the fly if needed.

Description

This method is used to call Mariah's compiler directly. Useful for triggering a compile programmatically or from a build server.

Arguments

| Name | Type | Required | Description | |-----------------|----------------|----------|-----------------| | options | Object | no | Option object | | callbacks | Function | yes | Result callback |

Example

var Mariah = require('mariah');
Mariah.compile({options}, function(err, result){
    if(err) return console.error(err);
    console.log(result);
});

Mariah.watch({options})

Description

This method is used to watch a folder of components and recompile upon changing a file in the folder. Useful while developing or in a live application to allow remote changes to recompile on the fly.

Arguments

| Name | Type | Required | Description | |-----------------|----------------|----------|-----------------| | options | Object | no | Option object |

Example

var Mariah = require('mariah');
Mariah.watch({options});

Options Object

| Name | Required | Type | Default | Description | |----------------------|----------|--------------|----------------------|----------------------------------------------------------------------------| | object_name | no | String | 'Comps' | Global variable name of object which the compiled output will be saved in. | | filename | no | String | '/comps.js' | Name of file which the compiled output will be saved to. | | target_folder | no | String | './public/js' | Target folder for output file. | | source_folder | no | String | './components' | Source folder that components are compiled from. |

Client Setup

By adding the mariah.js file (found in the root of the module) to your client after jQuery will add the following helper methods to the jQuery constructor .

$.bound(callback)

Attaches bindings to all child input elements and return the jQuery html object.

The .values property of a bound object is representation to all input values with the key set to the value of their name property.

$.buttons({bindings})

Binds click events on target element to desired callback, e.g.

form.buttons({
	'.css-selector': function(e){
		console.log(this.values);
	}
})