Dynamic template compilation in Ember 3.7

1

We’re dynamically compiling Handlbars templates by importing the template-compiler in ember-cli-build.

  app.import('node_modules/ember-source/dist/ember-template-compiler.js');

This still works in Ember 3.7, but the file is now ES6 in Ember 3.7 which we’re not targeting. Is there any other way to do this where the file will get transpiled down to the same target as the app code?

2

@jgadbois sorry I don’t have a great answer for you right offhand but I my guess is you could configure ember-cli-babel to transpile that dependency manually (since it’s not a standard ember addon). Maybe using transpileTree? That’s not my forte but I’d imagine there’s some way to do it.

On another note I was curious what method you use to render the templates.

I’m currently doing something like this:

const { TEMPLATES, HTMLBars } = Ember;
...
      let compiled = HTMLBars.compile(`${this.get('templateContent')}`);
      TEMPLATES[<templatename>] = compiled;

and then rendering like so:

{{partial <templatename>}}

But from what I understand the partial helper will be deprecated soon. Are you aware of any better/more modern ways to render runtime compiled templates?

3

In Ember 3.7 the Ember dist/ changed a bit so that we could emit both a “evergreen browser” build and a “legacy browser” build. If your project’s targets include browsers older than the current set of evergreen browsers, you need to use the “legacy browser” build of the template compiler.

Something like:

app.import('node_modules/ember-source/dist/legacy/ember-template-compiler.js');
2 Likes
4

Perfect, thanks so much!