0.1.21 • Published 7 years ago

hyperbars v0.1.21

Weekly downloads
2
License
MIT
Repository
github
Last release
7 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

7 years ago

0.1.11

7 years ago

0.1.10

7 years ago

0.1.9

7 years ago

0.1.8

7 years ago

0.1.7

7 years ago

0.1.6

7 years ago

0.1.5

7 years ago

0.1.4

7 years ago

0.1.3

7 years ago

0.1.2

7 years ago

0.1.1

7 years ago

0.1.0

7 years ago

0.0.9

7 years ago

0.0.8

7 years ago

0.0.7

8 years ago

0.0.6

8 years ago

0.0.5

8 years ago

0.0.4

8 years ago

0.0.3

8 years ago

0.0.2

8 years ago

0.0.1

8 years ago