Merge pull request #899 from eoneill/master

support inert TemplateLiteral in hbs plugin

Author: rwjblue

packages/core/src/babel-plugin-inline-hbs.ts

@@ -205,13 +205,20 @@ export default function make(getCompiler: (opts: any) => TemplateCompiler) {
     );
   }
 
+  function getTemplateString(template: any, path: NodePath<t.CallExpression>): string {
+    if (template?.type === 'StringLiteral') {
+      return template.value;
+    }
+    // treat inert TemplateLiteral (without subexpressions) like a StringLiteral
+    if (template?.type === 'TemplateLiteral' && !template.expressions.length) {
+      return template.quasis[0].value.cooked;
+    }
+    throw path.buildCodeFrameError('hbs accepts only a string literal argument');
+  }
+
   function getCallArguments(path: NodePath<t.CallExpression>): { template: string; insertRuntimeErrors: boolean } {
     let [template, options] = path.node.arguments;
 
-    if (template?.type !== 'StringLiteral') {
-      throw path.buildCodeFrameError('hbs accepts only a string literal argument');
-    }
-
     let insertRuntimeErrors =
       options?.type === 'ObjectExpression' &&
       options.properties.some(
@@ -225,7 +232,7 @@ export default function make(getCompiler: (opts: any) => TemplateCompiler) {
       );
 
     return {
-      template: template.value,
+      template: getTemplateString(template, path),
       insertRuntimeErrors,
     };
   }

packages/core/tests/inline-hbs.test.ts

@@ -27,6 +27,17 @@ function stage1Tests(transform: (code: string) => string) {
     expect(code).toMatch(/return hbs\("<div/);
     expect(code).toMatch(/embroider-sample-transforms-result/);
   });
+  test('call form with template literal', () => {
+    let code = transform(`
+      import hbs from 'htmlbars-inline-precompile';
+      export default function() {
+        return hbs(\`<div class={{embroider-sample-transforms-target}}></div>\`);
+      }
+      `);
+    expect(code).toMatch(/import hbs from 'htmlbars-inline-precompile'/);
+    expect(code).toMatch(/return hbs\("<div/);
+    expect(code).toMatch(/embroider-sample-transforms-result/);
+  });
 
   test('runtime errors are left in place in stage 1', () => {
     let code = transform(`
@@ -63,6 +74,17 @@ function stage3Tests(transform: (code: string) => string) {
     expect(code).toMatch(/import { createTemplateFactory } from ['"]@ember\/template-factory['"]/);
     expect(code).toMatch(/return createTemplateFactory\({/);
   });
+  test('call form with template literal', () => {
+    let code = transform(`
+      import hbs from 'htmlbars-inline-precompile';
+      export default function() {
+        return hbs(\`<div class={{embroider-sample-transforms-target}}></div>\`);
+      }
+      `);
+    expect(code).not.toMatch(/import hbs from 'htmlbars-inline-precompile'/);
+    expect(code).toMatch(/import { createTemplateFactory } from ['"]@ember\/template-factory['"]/);
+    expect(code).toMatch(/return createTemplateFactory\({/);
+  });
   test('runtime errors become exceptions in stage 3', () => {
     let code = transform(`
       import hbs from 'htmlbars-inline-precompile';