incremental-bars

1.0.6 verified Fri May 01 auth: no javascript maintenance

incremental-bars is a build-time tool that compiles standard Handlebars templates to incremental-dom instructions, enabling DOM patching instead of string replacement. Version 1.0.6, with no recent updates (appears unmaintained since ~2016). It supports all native Handlebars features (partials, block helpers, decorators) without rewriting Handlebars, unlike HtmlBars. The library is framework-agnostic and designed for precompilation, not runtime browser use. Key differentiators: reuse existing templates, no Handlebars fork, linear instruction representation.

Common errors

error TypeError: Handlebars.compile is not a function ↓

cause Incorrect import: imported from 'handlebars' instead of 'incremental-bars'.

fix

Use require('incremental-bars') instead of require('handlebars').

error Cannot find module 'incremental-dom' ↓

cause Missing peer dependency incremental-dom.

fix

Run: npm install incremental-dom

error Template compiled without transpilerOptions; output is HTML string, not DOM instructions. ↓

cause Missing transpilerOptions.mode in compile/precompile options.

fix

Pass { transpilerOptions: { mode: 'incremental-dom' } } to compile/precompile.

Warnings

gotcha Must pass transpilerOptions to compile/precompile; otherwise acts like standard Handlebars string output. ↓

fix Add { transpilerOptions: { mode: 'incremental-dom' } } to compile/precompile options.

deprecated Project appears unmaintained; last release 2016, no updates for incremental-dom changes. ↓

fix Consider alternatives like lit-html or handlebars-incremental-dom if active support needed.

gotcha Only works with CommonJS require(); no ESM or TypeScript definitions. ↓

fix Use require() in Node.js; for TypeScript, add a custom declare module or use dynamic import.

gotcha Runtime use in browser not recommended; intended as build-time precompiler. ↓

fix Precompile templates at build time and include the output JS in browser.

gotcha Requires incremental-dom to be loaded/required at runtime for patch() calls. ↓

fix Ensure incremental-dom is installed and required in the runtime environment.

Install

npm install incremental-bars

yarn add incremental-bars

pnpm add incremental-bars

Imports

default

wrong

import Handlebars from 'incremental-bars'; // ESM not supported

correct

const Handlebars = require('incremental-bars');

CommonJS only; yields a modified Handlebars instance.

precompile

wrong

Handlebars.precompile(template); // missing transpilerOptions, defaults to html

correct

const Handlebars = require('incremental-bars'); Handlebars.precompile(template, { transpilerOptions: { mode: 'incremental-dom' } });

Must pass transpilerOptions with mode to get incremental-dom output.

compile

wrong

require('incremental-bars').compile(source); // no transpilerOptions

correct

const Handlebars = require('incremental-bars'); const template = Handlebars.compile(source, { transpilerOptions: { mode: 'incremental-dom' } });

Same as precompile; without options, behaves like standard Handlebars.

Quickstart

Demonstrates compiling a Handlebars template to incremental-dom instructions and patching a DOM element.

const Handlebars = require('incremental-bars');
const IncrementalDOM = require('incremental-dom');

const source = '<div>{{name}}</div>';
const template = Handlebars.compile(source, {
  transpilerOptions: { mode: 'incremental-dom' }
});

const data = { name: 'World' };
const patch = (node) => {
  IncrementalDOM.patch(node, () => {
    template(data);
  });
};

const el = document.createElement('div');
patch(el);
console.log(el.innerHTML); // '<div>World</div>'

// Re-render with new data
data.name = 'Universe';
patch(el);
console.log(el.innerHTML); // '<div>Universe</div>'