Rendering precompiled templates on the server, runtime export

[terrablue]

Hi, I'm trying to precompile a template at build time and then render it at runtime (the data could be different every time) on the server.

I'm currently using this code:

import handlebars from "handlebars";
import runtime from "./node_modules/handlebars/dist/handlebars.runtime.js";

await write_to_path("./precompiled.js", `export default ${handlebars.precompile("{{foo}}")}`);
import precompiled from "./precompiled.js";
console.log(runtime.template(precompiled)({foo: "bar"}));
// -> bar

This works perfectly for me, I was wondering if it were possible to expose the runtime per a package.json export, to avoid me reaching directly into the node_modules directory? Perhaps something like,

import {default as handlebars, runtime} from "handlebars";

await write_to_path("./precompiled.js", `export default ${handlebars.precompile("{{foo}}")}`);
import precompiled from "./precompiled.js";
console.log(runtime.template(precompiled)({foo: "bar"}));
// -> bar

Referencing #955, which seems to suggest a similar way, but does not specify how to get the runtime on the server.

[jaylinski]

You can't import both runtime and the full version in one import statement, but you can do this:

import handlebars from "handlebars";
import runtime from "handlebars/runtime";

[terrablue]

I have tried precisely that, unfortunately that doesn't work for me. I get this.

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/home/blue/h/node_modules/handlebars/runtime' imported from /home/blue/h/app.js
Did you mean to import handlebars/runtime.js?

Am I doing something wrong?

[jaylinski]

How are you executing/bundling this?

Here is how it works with webpack: https://github.com/handlebars-lang/handlebars.js/blob/v4.7.8/tests/integration/webpack-test/src/handlebars-runtime-test.js

[ralyodio]

any update? @jaylinski

[morgan-dgk]

I have been trying to do something similar with AWS SAM using the lambda layer build step to precompile the .hbs files into templates used in the lambda endpoints. I am using ES6 style modules. This may be a bit of a hacky solution.

I use a custom makefile in the build step to run npx handlebars ./ -e hbs -f ./templates.mjs which precompiles all .hbs files in the current folder and adds them to a single js file. The output file contains an IIFE which expects to find a Handlebars variable in-scope to load the templates.

Since lambda runs in a container, you also need to do npm install --prefix "$(ARTIFACTS_DIR)/nodejs/handlebars" to make sure the handlebars module can be located.

Modifying templates.mjs to include an import for Handlebars (case must match exactly for IIFE) prior to the execution of the IIFE ensure Handlebars can be accessed within the scope of the IIFE:

import Handlebars from "handlebars"

Finally, we can add an export after the IIFE to export the Handlebars instance which has the precompiled templates loaded:

export const hbs = Handlebars

Then, at runtime / on your backend you can do import { hbs } from "path/to/templates.mjs" here.

Pre-compiled templates are then accessible at hbs.templates['template_name'].

Hopefully this is helpful! Took me a good amount of experimenting to figure this out.

[terrablue]

Hi, thanks for the answer. I actually ended up solving it somewhat similarly to what was suggested, though this doesn't seem documented.

https://github.com/primatejs/primate/blob/master/packages/frontend/src/frontends/handlebars/imports.js