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
.
-g
flag if you want to use Mariah from the command line.
Note: you must install with the 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 |
Options section bellow
SeeMethods
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);
}
})