xembly

Xembly engine for JavaScript.

Make sure you understand what is Xembly and what does directives mean before using this library.

Installation

As npm module:

npm install --save xembly

import it from your module:

import {Xembler, Directives} from 'xembler';

new Xembler(new Directives().add('span').set('hello'))
  .apply(document, document.getElementById('content'));

Also you can build bundle file to use it in browser:

• clone this repo: git clone --depth=1 https://github.com/g4s8/xembly-js.git
• go to cloned repo: cd xembly-js
• install dependencies: npm install
• build bundle: npm run bundle (or env PROD_ENV npm run bundle to build optimized for size bundle).
• copy ./lib/xembly.js bundle to your assets
• reference it by xembly variable, e.g. new xembly.Xembler()

You can check ./examples directory for working example.

Usage

Xembler class can apply directives to DOM using raw string directives: new Xembler('ADD span;SET hello'), or helper objects: new Xembler(new Directives().add('span').set('hello')) and apply to to DOM elements:

var div = document.getElementById('content');
// add span with 'hello' text to `div`
new Xembler(new Directives().add('span').set('hello'))
  .apply(document, div);

More complex example creates new HTML form with input fields:

var div = document.getElementById('content');
new Xembler(
  new Directives()
    .xpath('form[@id = "login-form"]') // move cursor to login form
    .push().xpath('input').remove().pop() // remove existing inputs
    .add('label').attr('for', 'login').set('Username').up() // add label for username
    .add('input').attr('type', 'text').attr('name', 'username').up() // add username input
    .add('label').attr('for', 'password').set('Password')
    .add('input').attr('type', 'password').attr('name', 'password').up()
    .add('input').attr('type', 'submit').attr('value', 'Sign in').up()
).apply(document)

Contributing

• npm is used for dependency management (see package.json for config)
• webpack is used for packaging (see webpack.config.js for main config and webpack-test.config.js for test config)
• eslint is enforced by CI tools (see .eslintrc.yml for config)