How to use Precompiling templates?

[jackusay]

in nodejs

main.js:

let template = "Handlebars <b>{{doesWhat}}</b> precompiled!";
let Handlebars = require("handlebars");
let compiled = Handlebars.precompile(template);

const fs = require('fs'); 
fs.writeFileSync("b", compiled); 

works ok.
I get this in b:

{"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) {
    var helper, lookupProperty = container.lookupProperty || function(parent, propertyName) {
        if (Object.prototype.hasOwnProperty.call(parent, propertyName)) {
          return parent[propertyName];
        }
        return undefined
    };

  return "Handlebars <b>"
    + container.escapeExpression(((helper = (helper = lookupProperty(helpers,"doesWhat") || (depth0 != null ? lookupProperty(depth0,"doesWhat") : depth0)) != null ? helper : container.hooks.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"doesWhat","hash":{},"data":data,"loc":{"start":{"line":1,"column":14},"end":{"line":1,"column":26}}}) : helper)))
    + "</b> precompiled!";
},"useData":true}

---

client.js:

const fs = require('fs');
const data = fs.readFileSync('./b',
    { encoding: 'utf8', flag: 'r' });

let Handlebars = require("handlebars");
Handlebars.partials["test1"] = Handlebars.template(data);
var result = Handlebars.partials["test1"]({ name: "yourname" });

console.log(result);

code is from https://handlebarsjs.com/installation/precompilation.html#precompiling-templates-inside-nodejs

results:

λ node client.js

C:\Users\john\Downloads\b1\node_modules\.pnpm\[email protected]\node_modules\handlebars\dist\cjs\handlebars\runtime.j

s:58
    throw new _exception2['default']('Unknown template object: ' + typeof templateSpec);
    ^
Error: Unknown template object: string
    at Object.template (C:\Users\john\Downloads\b1\node_modules\.pnpm\[email protected]\node_modules\handlebars\dist\

cjs\handlebars\runtime.js:58:11)
    at hb.template (C:\Users\john\Downloads\b1\node_modules\.pnpm\[email protected]\node_modules\handlebars\dist\cjs\

handlebars.runtime.js:51:20)
    at Object.<anonymous> (C:\Users\john\Downloads\b1\client.js:6:43)
    at Module._compile (node:internal/modules/cjs/loader:1554:14)
    at Object..js (node:internal/modules/cjs/loader:1706:10)
    at Module.load (node:internal/modules/cjs/loader:1289:32)
    at Function._load (node:internal/modules/cjs/loader:1108:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:220:24)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:170:5) {
  description: undefined,
  fileName: undefined,
  lineNumber: undefined,
  endLineNumber: undefined,
  number: undefined
}

Node.js v22.14.0

I try to speed up my program, so I try to reuse compiled template. can't find a way to do it.

[jackusay]

chatgpt

You:
in nodejs

main.js:

let template = "Handlebars <b>{{doesWhat}}</b> precompiled!";
let Handlebars = require("handlebars");
let compiled = Handlebars.precompile(template);

const fs = require('fs'); 
fs.writeFileSync("b", compiled); 

works ok.
I get this in b:

{"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) {
    var helper, lookupProperty = container.lookupProperty || function(parent, propertyName) {
        if (Object.prototype.hasOwnProperty.call(parent, propertyName)) {
          return parent[propertyName];
        }
        return undefined
    };

  return "Handlebars <b>"
    + container.escapeExpression(((helper = (helper = lookupProperty(helpers,"doesWhat") || (depth0 != null ? lookupProperty(depth0,"doesWhat") : depth0)) != null ? helper : container.hooks.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"doesWhat","hash":{},"data":data,"loc":{"start":{"line":1,"column":14},"end":{"line":1,"column":26}}}) : helper)))
    + "</b> precompiled!";
},"useData":true}

---

client.js:

const fs = require('fs');
const data = fs.readFileSync('./b',
    { encoding: 'utf8', flag: 'r' });

let Handlebars = require("handlebars");
Handlebars.partials["test1"] = Handlebars.template(data);
var result = Handlebars.partials["test1"]({ name: "yourname" });

console.log(result);

code is from https://handlebarsjs.com/installation/precompilation.html#precompiling-templates-inside-nodejs

results:

λ node client.js

C:\Users\john\Downloads\b1\node_modules\.pnpm\[email protected]\node_modules\handlebars\dist\cjs\handlebars\runtime.j

s:58
    throw new _exception2['default']('Unknown template object: ' + typeof templateSpec);
    ^
Error: Unknown template object: string
    at Object.template (C:\Users\john\Downloads\b1\node_modules\.pnpm\[email protected]\node_modules\handlebars\dist\

cjs\handlebars\runtime.js:58:11)
    at hb.template (C:\Users\john\Downloads\b1\node_modules\.pnpm\[email protected]\node_modules\handlebars\dist\cjs\

handlebars.runtime.js:51:20)
    at Object.<anonymous> (C:\Users\john\Downloads\b1\client.js:6:43)
    at Module._compile (node:internal/modules/cjs/loader:1554:14)
    at Object..js (node:internal/modules/cjs/loader:1706:10)
    at Module.load (node:internal/modules/cjs/loader:1289:32)
    at Function._load (node:internal/modules/cjs/loader:1108:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:220:24)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:170:5) {
  description: undefined,
  fileName: undefined,
  lineNumber: undefined,
  endLineNumber: undefined,
  number: undefined
}

Node.js v22.14.0

I try to speed up my program, so I try to reuse compiled template. can't find a way to do it.

ChatGPT:
The issue is that Handlebars.precompile() generates a stringified version of the compiled template, but Handlebars.template() expects an already parsed JavaScript object.

Solution:

Instead of directly writing and reading the compiled template as a string, you need to evaluate the string in client.js to convert it back into a JavaScript function.

Fixed client.js

const fs = require('fs');
const Handlebars = require("handlebars");

// Read the precompiled template
const data = fs.readFileSync('./b', { encoding: 'utf8' });

// Convert the string back into a function using `eval`
const templateSpec = eval(`(${data})`);

// Use `Handlebars.template` to reconstruct the template function
const template = Handlebars.template(templateSpec);

// Render the template with data
const result = template({ doesWhat: "renders HTML" });

console.log(result);

Explanation of Fix

1. eval(): Converts the stringified precompiled template into an actual JavaScript object.
2. Handlebars.template(): Converts the precompiled object into a working template function.
3. Rendering: You can now pass data to the template function as usual.

---

Alternative (Safer) Approach

If you want to avoid eval(), you can use Function:

const templateSpec = new Function(`return ${data}`)();
const template = Handlebars.template(templateSpec);

This achieves the same effect as eval() but is slightly safer as it doesn't inherit the current scope.

---

Final Output

If you run client.js, you should now get:

Handlebars <b>renders HTML</b> precompiled!

Let me know if you need further tweaks! 🚀