search

ember-cli / babel-plugin-htmlbars-inline-precompile

Babel plugin to replace tagged template strings with precompiled HTMLBars templates
9 stars 21 forks source link

Important: Cannot transpile 'ember-cli-htmlbars' JS code #292

Open izelnakri opened 3 years ago

izelnakri commented 3 years ago

Today this babel plugin cannot transpile this:

import { hbs } from 'ember-cli-htmlbars';

render(hbs`<h1>HBS inside JS, standard compliant due to tag function</h1>`);

Already used in code that gets shipped to the browser: https://github.com/emberjs/ember-test-helpers/blob/cfff39471890f2bcd3268bc867312277970869b4/addon-test-support/%40ember/test-helpers/setup-rendering-context.ts#L8

While this plugin can transpile:

import hbs from 'htmlbars-inline-precompile';

render(hbs`<h1>HBS inside JS, standard compliant due to tag function</h1>`);

Limiting hbs transpilation to brocolli seems to me a bad decision considering babel is still a hard dependency to transpile ember and glimmer applications. I don't know who made this intentional decision, is there an explanation on why moving the template transpiler logic to broccoli is a better idea when we could provide this with the existing babel plugin?

Glimmerx today supports transpiling hbs inside JS/Glimmer components. There will always be hbs inside JS, if we transpile JS with babel why there has to be a broccoli addon today to do the same logic?

https://github.com/ember-cli/ember-cli-htmlbars#tagged-template-usage--migrating-from-htmlbars-inline-precompile

We should provide a babel plugin to avoid double transforms(broccoli transform then a babel transform) for build systems, considering babel is a hard-dependency for apps, I see no good reason to move this concern to broccoli.

In future if we ever wanted to run end-user code in node.js without transpilers one would have to import the module import { hbs } from x which today is (kind of) window.Ember.HTMLBars.template($string) so having this concern in the babel layer seems to me the right approach, do not require a 3rd layer/abstraction to non-ember javascript developers please.

Please provide this functionality in the babel ecosystem as well, this babel plugin should transpile both imports.

PR added for this request: https://github.com/ember-cli/babel-plugin-htmlbars-inline-precompile/pull/293

rwjblue commented 3 years ago

Today this babel plugin cannot transpile this:

import { hbs } from 'ember-cli-htmlbars';

render(hbs`<h1>HBS inside JS, standard compliant due to tag function</h1>`);

FWIW, this is incorrect. This plugin is the thing that transpiles import { hbs } from 'ember-cli-htmlbars' for all Ember apps by default (when provided the proper configuration from ember-cli-htmlbars).

I think maybe you are suggesting that the default configuration should match what ember-cli-htmlbars itself sets as the config, and I think that is totally good to do.

izelnakri commented 3 years ago

FWIW, this is incorrect. This plugin is the thing that transpiles import { hbs } from 'ember-cli-htmlbars' for all Ember apps by default (when provided the proper configuration from ember-cli-htmlbars).

Right, I created the issue before the PR :sweat_smile: After I checked the internals and realized we could provide opts.module but also discovered we could provide better defaults and errors on 'ember-cli-htmlbars' imports just like the 'htmlbars-inline-precompile'.