0.1.21 • Published 9 years ago

hyperbars v0.1.21

Weekly downloads
2
License
MIT
Repository
github
Last release
9 years ago

Hyperbars

Compile Handlebars templates to javascript which can be used with Virtual DOM. This library offers a comprehensive coverage of the Handlebars API and more features will be added soon. Your Handlebars templates should work correctly without any modifications.

Compiles something like this:

<div>
    {{#if profile}}
        {{name}}
    {{/if}}
</div>

into this:

(function (state) {
	var Runtime = Hyperbars.Runtime;
	var context = state;
	return h('div', {}, [Runtime.if(context['profile'], context, function (context, parent, options) {
		return ['' + context['name']]
	})])
}.bind({}))

then you can call the returned function with a state object:

var compiled = Hyperbars.compile(template)
Hyperbars.createElement( compiled({ profile:null }) ) // <div></div>
Hyperbars.createElement( compiled({ profile:{ name:"Foo bar" }}) ) // <div>Foo bar</div>

Installation

Step 1: In your index.html file, include the hyperbars.js or hyperbars.min.js file:

<script type="text/javascript" src="path/to/dist/hyperbars.js"></script>

Usage

Step 1: Compilation & Setup

var template = "<div>{{name}}</div>"
var state = { name: "Foo bar" }
var compiled = Hyperbars.compile(template)

Step 2: Displaying

var tree = compiled(state)
var element = Hyperbars.createElement(tree)

// Do what you will from here e.g document.append(element)

Step 3: Updating

// State changes somehow
state.name = "Baz Bar"

// Generate new tree based on new state
var newTree = compiled(state)

// Find changes required to update real DOM so it is identical to virtual dom
var patches = Hyperbars.diff(tree, newTree)

// Apply the changes
Hyperbars.patch(element, patches)

// Cache new tree
tree = newTree

Note: It is best practice to create a function called "setState(newState)" which performs step 3.

Partials

Currently only basic partials are supported. Please refer to the change log below for the scope of what is supported with partials. I will be adding more coverage of the Handlebars partials API soon.

Step 1: Register partial with Hyperbars

Hyperbars.partials['myPartial'] = Hyperbars.compile('<nav>{{title}}</nav>', {raw: true})

Note: Notice the use of {raw: true} when compiling the partial. This will return a string rather then the compiled function.

Step 2: Use it in your Handlebars template

<body>
    {{> myPartial}}
</body>

Injecting a context

<body>
    {{> myPartial myContext}}
</body>

Parameters

<body>
    {{> myPartial title="Hello World"}}
</body>

To view more on partials please visit see handlebars partials.

Helpers

Hyperbars helpers are slightly different from the helpers found in Handlebars.

Step 1: Register helper with Hyperbars. Always return and empty string if nothing should be displayed. The callback function has three arguments callback(newContext, parentContext, options).

Hyperbars.registerHelper('equals', function(context, expression, callback){
	if(expression.value.left === expression.value.right){
		return callback(expression.value.left, context, {});
	}
	return "";
});

Step 2: Use the helper in your template. In this example value.left is equal to count and value.right is equal to "5". If your expression does not have a = sign then value is simply equal to the context property specified.

<div>
    {{#equals count="5"}}
        <p>You won with a count of {{this}}!</p>
    {{/if}}
</div>

v0.1.2

  • Added helpers!
  • Fixed context issues

v0.1.10

  • Fixed partial parameter bug

v0.1.9

  • Fixed single quote error

v0.1.7

  • Added support for expressions in parameters
  • Added support for multiple blocks in parameters

v0.1.4

  • Fixed windows line-break bug

v0.1.1

  • Output is much more readable
  • Fixed partial parameter bug

v0.1.0

  • Added CommonJS support
  • Added support for basic partials {{> myPartial}}
  • Added support for partial context {{> myPartial myContext}}
  • Added support for partial parameters {{> myPartial title="Hello"}}
  • Added a bunch of tests.

v0.0.8

  • Added support for {{{no-escape}}}

v0.0.7

  • Added minified version
  • Dependencies are now part of the source
  • HTML attribute bug fix

v0.0.6

  • Support for {{@index}}, {{@first}}, {{@last}}
  • Support for ../
  • Bug fixes

Roadmap

  • Add support for custom helpers
  • Add support for {{else}}
  • Add support for {{! comments }}

Dependencies

See also

License

This software is provided free of charge and without restriction under the MIT License

hyperscriptcompilecompilerhtmltemplatemustache
virtual-dom
@infinitebrahmanuniverse/nolb-hyperb@everything-registry/sub-chunk-1883@zalastax/nolb-hyperb
0.1.21

9 years ago

0.1.11

9 years ago

0.1.10

9 years ago

0.1.9

9 years ago

0.1.8

9 years ago

0.1.7

9 years ago

0.1.6

9 years ago

0.1.5

9 years ago

0.1.4

9 years ago

0.1.3

9 years ago

0.1.2

9 years ago

0.1.1

9 years ago

0.1.0

10 years ago

0.0.9

10 years ago

0.0.8

10 years ago

0.0.7

10 years ago

0.0.6

10 years ago

0.0.5

10 years ago

0.0.4

10 years ago

0.0.3

10 years ago

0.0.2

10 years ago

0.0.1

10 years ago