Support printing embedded handlebars in javascript files

[dcyriller]

Description

hbs usages

hbs is provided by the ember-cli-htmlbars library.

The first usage is in tests, where components are rendered:

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

await render(hbs`
  <MyComponent />
`);

A second usage can be with Storybook:

import { text } from '@storybook/addon-knobs';

import hbs from 'htmlbars-inline-precompile';

export default {
  title: 'Components/Checkbox',
};

export const checkbox = () => {
  return {
    template: hbs`<Checkbox @label={{this.label}} {{on "click" this.toggleCheckbox}} />`,
    context: {
      label: text('title', 'Welcome to storybook'),
      toggleCheckbox() {},
    },
  };
};

checkbox.story = {
  name: '...',
};

technical details

javascript's TaggedTemplateExpressions with the tag hbs will be printed using glimmer printer.

credit

This implementation mimicks html's.

It is adapted in two ways:

• hbs doesn't support printing <script> tags
• hbs doesn't support interpolation with ${}

Links / Related

• second take for Support printing handlebars in javascript files though hbs #8642
• Support printing inline handlebars in html
• handlebars progress tracking issue

Checklist

• I’ve added tests to confirm my change works.
• (If changing the API or CLI) I’ve documented the changes I’ve made (in the docs/ directory)
• (If the change is user-facing) I’ve added my changes to changelog_unreleased/*/pr-XXXX.md file following changelog_unreleased/TEMPLATE.md.
• I’ve read the contributing guidelines.

✨Try the playground for this PR✨

[fisker]

Prettier pr-8647
Playground link

--parser babel

Input:

hbs`\``;
html`\``;

Output:

hbs```;
html`\``;

[fisker]

Prettier pr-8647
Playground link

--parser babel

Input:

hbs`${a}`;
html`${a}`;

Output:

hbs``;
html`${a}`;

[thorn0]

please see this comment: #5993 (comment)

[thorn0]

@dcyriller "The idea is to design a way to use this option to specify the correspondence between template tags, special comments, etc. and embedded syntaxes whereas the default behavior won't be extended anymore." This PR extends the defautl behavior.

[dcyriller]

@thorn0 I read carefully the linked PR and the various issues. I understand well the problem with formatting embedded snippets and that the 1st goal of Prettier is correctness.

So I've narrowed this implementation to only format:

hbs`some {{handlebars content}} here`

Previously it would also format:

const code = /* hbs */ `some {{handlebars content}} here`;

If an user selects the option --embedded-language-formatting=off, the embedded snippet won't get formatted. If --embedded-language-formatting=auto, it will. (The tests show it)

I'm not sure what else I should do. 🤔

[thorn0]

What I'm saying is that this PR (as well as #5993 and #9025) is blocked by #5588. We won't move forward with it until we solve that problem.

[aogaili]

Any reason why this change is not being merged? If #5588 then why not moving that as well?

We're using ember in a large project and would also like to introduce prettier and this is the only stopper.

[Alonski]

@dcyriller 👋 Do you still work on this stuff? Any idea if this can be pushed forward somehow? Thanks!