From 142523e0b54463d61e7ef494b46703d5a83f30f9 Mon Sep 17 00:00:00 2001
From: Chris Garrett <cgarrett@linkedin.com>
Date: Mon, 22 Feb 2021 09:45:41 -0800
Subject: [PATCH] Implements an option to support the template tag imports
 proposal

Implements the `useTemplateTagProposalSemantics` option for individual
modules. This proposal is outlined in the README for the
template-imports addon, [here](https://github.com/ember-template-imports/ember-template-imports#using-template-tags-and-gjs-files)
---
 __tests__/tests.js                | 234 +++++++++++++++++++++++++++++-
 index.js                          |  49 ++++++-
 src/template-literal-transform.js |  31 ++--
 src/template-tag-transform.js     | 137 +++++++++++++++++
 4 files changed, 427 insertions(+), 24 deletions(-)
 create mode 100644 src/template-tag-transform.js

diff --git a/__tests__/tests.js b/__tests__/tests.js
index 28b28228..01766b0f 100644
--- a/__tests__/tests.js
+++ b/__tests__/tests.js
@@ -791,6 +791,28 @@ describe('htmlbars-inline-precompile', function () {
       `);
     });
 
+    it('works with templates assigned to class expressions', function () {
+      let transpiled = transform(
+        `
+          import { hbs } from 'ember-template-imports';
+
+          const Foo = class {
+            static template = hbs\`hello\`;
+          }
+        `
+      );
+
+      expect(transpiled).toMatchInlineSnapshot(`
+        "import { setComponentTemplate as _setComponentTemplate } from \\"@ember/component\\";
+
+        const Foo = _setComponentTemplate(Ember.HTMLBars.template(
+        /*
+          hello
+        */
+        \\"precompiled(hello)\\"), class {});"
+      `);
+    });
+
     it('correctly handles scope', function () {
       let source = 'hello';
       transform(
@@ -825,14 +847,6 @@ describe('htmlbars-inline-precompile', function () {
       }).toThrow(
         /Attempted to use `hbs` to define a template in an unsupported way. Templates defined using this helper must be:/
       );
-
-      expect(() => {
-        transform(
-          "import { hbs } from 'ember-template-imports';\n let Foo = class { static template = hbs`hello`; }"
-        );
-      }).toThrow(
-        /Attempted to use `hbs` to define a template in an unsupported way. Templates defined using this helper must be:/
-      );
     });
 
     it('errors if passed incorrect useTemplateLiteralProposalSemantics version', function () {
@@ -851,4 +865,208 @@ describe('htmlbars-inline-precompile', function () {
       );
     });
   });
+
+  describe('with useTemplateTagProposalSemantics', function () {
+    beforeEach(() => {
+      plugins = [
+        [
+          HTMLBarsInlinePrecompile,
+          {
+            precompile() {
+              return precompile.apply(this, arguments);
+            },
+
+            modules: {
+              'ember-template-imports': {
+                export: 'GLIMMER_TEMPLATE',
+                debugName: '<template>',
+                useTemplateTagProposalSemantics: 1,
+              },
+            },
+          },
+        ],
+        '@babel/plugin-proposal-class-properties',
+      ];
+    });
+
+    it('works with templates assigned to variables', function () {
+      let transpiled = transform(
+        `
+          const Foo = [GLIMMER_TEMPLATE(\`hello\`)];
+        `
+      );
+
+      expect(transpiled).toMatchInlineSnapshot(`
+        "import { templateOnly as _templateOnly } from \\"@ember/component/template-only\\";
+        import { setComponentTemplate as _setComponentTemplate } from \\"@ember/component\\";
+
+        const Foo = _templateOnly(\\"foo-bar\\", \\"Foo\\");
+
+        _setComponentTemplate(Ember.HTMLBars.template(
+        /*
+          hello
+        */
+        \\"precompiled(hello)\\"), Foo);"
+      `);
+    });
+
+    it('works with templates exported as variables', function () {
+      let transpiled = transform(
+        `
+          export const Foo = [GLIMMER_TEMPLATE(\`hello\`)];
+        `
+      );
+
+      expect(transpiled).toMatchInlineSnapshot(`
+        "import { templateOnly as _templateOnly } from \\"@ember/component/template-only\\";
+        import { setComponentTemplate as _setComponentTemplate } from \\"@ember/component\\";
+        export const Foo = _templateOnly(\\"foo-bar\\", \\"Foo\\");
+
+        _setComponentTemplate(Ember.HTMLBars.template(
+        /*
+          hello
+        */
+        \\"precompiled(hello)\\"), Foo);"
+      `);
+    });
+
+    it('works with templates exported as the default', function () {
+      let transpiled = transform(
+        `
+          export default [GLIMMER_TEMPLATE(\`hello\`)];
+        `
+      );
+
+      expect(transpiled).toMatchInlineSnapshot(`
+        "import { setComponentTemplate as _setComponentTemplate } from \\"@ember/component\\";
+        import { templateOnly as _templateOnly } from \\"@ember/component/template-only\\";
+
+        const _fooBar = _templateOnly(\\"foo-bar\\", \\"_fooBar\\");
+
+        _setComponentTemplate(Ember.HTMLBars.template(
+        /*
+          hello
+        */
+        \\"precompiled(hello)\\"), _fooBar);
+
+        export default _fooBar;"
+      `);
+    });
+
+    it('works with templates defined at the top level', function () {
+      let transpiled = transform(
+        `
+          [GLIMMER_TEMPLATE(\`hello\`)];
+        `
+      );
+
+      expect(transpiled).toMatchInlineSnapshot(`
+        "import { setComponentTemplate as _setComponentTemplate } from \\"@ember/component\\";
+        import { templateOnly as _templateOnly } from \\"@ember/component/template-only\\";
+
+        const _fooBar = _templateOnly(\\"foo-bar\\", \\"_fooBar\\");
+
+        _setComponentTemplate(Ember.HTMLBars.template(
+        /*
+          hello
+        */
+        \\"precompiled(hello)\\"), _fooBar);
+
+        export default _fooBar;"
+      `);
+    });
+
+    it('works with templates assigned to classes', function () {
+      let transpiled = transform(
+        `
+          class Foo {
+            [GLIMMER_TEMPLATE(\`hello\`)];
+          }
+        `
+      );
+
+      expect(transpiled).toMatchInlineSnapshot(`
+        "import { setComponentTemplate as _setComponentTemplate } from \\"@ember/component\\";
+
+        class Foo {}
+
+        _setComponentTemplate(Ember.HTMLBars.template(
+        /*
+          hello
+        */
+        \\"precompiled(hello)\\"), Foo);"
+      `);
+    });
+
+    it('works with templates assigned to class expressions', function () {
+      let transpiled = transform(
+        `
+          const Foo = class {
+            [GLIMMER_TEMPLATE(\`hello\`)];
+          }
+        `
+      );
+
+      expect(transpiled).toMatchInlineSnapshot(`
+        "import { setComponentTemplate as _setComponentTemplate } from \\"@ember/component\\";
+
+        const Foo = _setComponentTemplate(Ember.HTMLBars.template(
+        /*
+          hello
+        */
+        \\"precompiled(hello)\\"), class {});"
+      `);
+    });
+
+    it('correctly handles scope', function () {
+      let source = 'hello';
+      transform(
+        `
+          import baz from 'qux';
+
+          let foo = 123;
+          const bar = 456;
+
+          export default [GLIMMER_TEMPLATE(\`${source}\`)];
+        `
+      );
+
+      expect(optionsReceived).toEqual({
+        contents: source,
+        isProduction: undefined,
+        scope: ['baz', 'foo', 'bar'],
+        strict: true,
+      });
+    });
+
+    it('errors if used in an incorrect positions', function () {
+      expect(() => {
+        transform("func([GLIMMER_TEMPLATE('hello')]);");
+      }).toThrow(
+        /Attempted to use `<template>` to define a template in an unsupported way. Templates defined using this syntax must be:/
+      );
+    });
+
+    it('errors if used with template literal syntax', function () {
+      plugins[0][1].modules['ember-template-imports'].useTemplateLiteralProposalSemantics = 1;
+
+      expect(() => {
+        transform("func([GLIMMER_TEMPLATE('hello')]);");
+      }).toThrow(/Cannot use both the template literal and template tag syntax proposals together/);
+    });
+
+    it('errors if passed incorrect useTemplateTagProposalSemantics version', function () {
+      plugins[0][1].modules['ember-template-imports'].useTemplateTagProposalSemantics = true;
+
+      expect(() => {
+        transform(
+          `
+            const Foo = [GLIMMER_TEMPLATE(\`hello\`)];
+          `
+        );
+      }).toThrow(
+        /Passed an invalid version for useTemplateTagProposalSemantics. This option must be assign a version number. The current valid version numbers are: 1/
+      );
+    });
+  });
 });
diff --git a/index.js b/index.js
index 6c34e2b9..fba83315 100644
--- a/index.js
+++ b/index.js
@@ -1,5 +1,6 @@
 'use strict';
 const { replaceTemplateLiteralProposal } = require('./src/template-literal-transform');
+const { replaceTemplateTagProposal } = require('./src/template-tag-transform');
 
 module.exports = function (babel) {
   let t = babel.types;
@@ -126,9 +127,22 @@ module.exports = function (babel) {
     return names;
   }
 
+  function shouldUseAutomaticScope(options) {
+    return options.useTemplateLiteralProposalSemantics || options.useTemplateTagProposalSemantics;
+  }
+
+  function shouldUseStrictMode(options) {
+    return (
+      Boolean(options.useTemplateLiteralProposalSemantics) ||
+      Boolean(options.useTemplateTagProposalSemantics)
+    );
+  }
+
   function replacePath(path, state, compiled, options) {
     if (options.useTemplateLiteralProposalSemantics) {
       replaceTemplateLiteralProposal(t, path, state, compiled, options);
+    } else if (options.useTemplateTagProposalSemantics) {
+      replaceTemplateTagProposal(t, path, state, compiled, options);
     } else {
       path.replaceWith(compiled);
     }
@@ -203,6 +217,27 @@ module.exports = function (babel) {
       let importDeclarations = path.get('body').filter((n) => n.type === 'ImportDeclaration');
 
       for (let module in modules) {
+        let options = modules[module];
+
+        if (options.useTemplateTagProposalSemantics) {
+          if (options.useTemplateLiteralProposalSemantics) {
+            throw path.buildCodeFrameError(
+              'Cannot use both the template literal and template tag syntax proposals together'
+            );
+          }
+
+          // template tags don't have an import
+          presentModules.set(
+            options.export,
+            Object.assign({}, options, {
+              modulePath: module,
+              originalName: options.export,
+            })
+          );
+
+          continue;
+        }
+
         let paths = importDeclarations.filter(
           (path) => !path.removed && path.get('source').get('value').node === module
         );
@@ -252,7 +287,7 @@ module.exports = function (babel) {
       state.presentModules = presentModules;
     },
 
-    ClassDeclaration(path, state) {
+    Class(path, state) {
       // Processing classes this way allows us to process ClassProperty nodes
       // before other transforms, such as the class-properties transform
       path.get('body.body').forEach((path) => {
@@ -294,8 +329,8 @@ module.exports = function (babel) {
       let template = path.node.quasi.quasis.map((quasi) => quasi.value.cooked).join('');
 
       let { precompile, isProduction } = state.opts;
-      let scope = options.useTemplateLiteralProposalSemantics ? getScope(path.scope) : null;
-      let strict = Boolean(options.useTemplateLiteralProposalSemantics);
+      let scope = shouldUseAutomaticScope(options) ? getScope(path.scope) : null;
+      let strict = shouldUseStrictMode(options);
 
       let emberIdentifier = state.ensureImport('default', 'ember');
 
@@ -383,6 +418,14 @@ module.exports = function (babel) {
         compilerOptions.isProduction = isProduction;
       }
 
+      if (shouldUseAutomaticScope(options)) {
+        compilerOptions.scope = getScope(path.scope);
+      }
+
+      if (shouldUseStrictMode(options)) {
+        compilerOptions.strict = true;
+      }
+
       replacePath(
         path,
         state,
diff --git a/src/template-literal-transform.js b/src/template-literal-transform.js
index 026d19d3..3cf6cba9 100644
--- a/src/template-literal-transform.js
+++ b/src/template-literal-transform.js
@@ -66,23 +66,28 @@ module.exports.replaceTemplateLiteralProposal = function (t, path, state, compil
       );
     }
 
-    let classDeclaration = parentPath.parentPath.parentPath;
+    let classPath = parentPath.parentPath.parentPath;
 
-    if (classDeclaration.node.type !== 'ClassDeclaration') {
-      throw path.buildCodeFrameError(
-        `Attempted to use \`${options.originalName}\` to define a template for an anonymous class. Templates declared with this helper must be assigned to classes which have a name.`
+    if (classPath.node.type === 'ClassDeclaration') {
+      classPath.insertAfter(
+        t.expressionStatement(
+          t.callExpression(state.ensureImport('setComponentTemplate', '@ember/component'), [
+            compiled,
+            classPath.node.id,
+          ])
+        )
+      );
+    } else {
+      classPath.replaceWith(
+        t.expressionStatement(
+          t.callExpression(state.ensureImport('setComponentTemplate', '@ember/component'), [
+            compiled,
+            classPath.node,
+          ])
+        )
       );
     }
 
-    classDeclaration.insertAfter(
-      t.expressionStatement(
-        t.callExpression(state.ensureImport('setComponentTemplate', '@ember/component'), [
-          compiled,
-          classDeclaration.node.id,
-        ])
-      )
-    );
-
     parentPath.remove();
   } else {
     throw path.buildCodeFrameError(
diff --git a/src/template-tag-transform.js b/src/template-tag-transform.js
new file mode 100644
index 00000000..11a57cc6
--- /dev/null
+++ b/src/template-tag-transform.js
@@ -0,0 +1,137 @@
+const filePath = require('path');
+
+/**
+ * Supports the following syntaxes:
+ *
+ * const Foo = [GLIMMER_TEMPLATE('hello')];
+ *
+ * export const Foo = [GLIMMER_TEMPLATE('hello')];
+ *
+ * export default [GLIMMER_TEMPLATE('hello')];
+ *
+ * class Foo {
+ *   [GLIMMER_TEMPLATE('hello')];
+ * }
+ */
+module.exports.replaceTemplateTagProposal = function (t, path, state, compiled, options) {
+  let version = options.useTemplateTagProposalSemantics;
+
+  if (typeof version !== 'number' || version !== 1) {
+    throw path.buildCodeFrameError(
+      'Passed an invalid version for useTemplateTagProposalSemantics. This option must be assign a version number. The current valid version numbers are: 1'
+    );
+  }
+
+  path = path.parentPath;
+  let filename = filePath.parse(state.file.opts.filename).name;
+
+  if (path.type === 'ArrayExpression') {
+    let arrayParentPath = path.parentPath;
+
+    if (arrayParentPath.type === 'VariableDeclarator') {
+      let varId = arrayParentPath.node.id;
+      let varDeclaration = arrayParentPath.parentPath;
+
+      varDeclaration.insertAfter(
+        t.expressionStatement(
+          t.callExpression(state.ensureImport('setComponentTemplate', '@ember/component'), [
+            compiled,
+            varId,
+          ])
+        )
+      );
+      path.replaceWith(
+        t.callExpression(state.ensureImport('templateOnly', '@ember/component/template-only'), [
+          t.stringLiteral(filename),
+          t.stringLiteral(varId.name),
+        ])
+      );
+
+      return;
+    } else if (arrayParentPath.type === 'ExportDefaultDeclaration') {
+      let varId = path.scope.generateUidIdentifier(filename);
+
+      arrayParentPath.insertBefore(
+        t.variableDeclaration('const', [
+          t.variableDeclarator(
+            varId,
+            t.callExpression(state.ensureImport('templateOnly', '@ember/component/template-only'), [
+              t.stringLiteral(filename),
+              t.stringLiteral(varId.name),
+            ])
+          ),
+        ])
+      );
+      arrayParentPath.insertBefore(
+        t.expressionStatement(
+          t.callExpression(state.ensureImport('setComponentTemplate', '@ember/component'), [
+            compiled,
+            varId,
+          ])
+        )
+      );
+      path.replaceWith(varId);
+
+      return;
+    } else if (arrayParentPath.parentPath.type === 'Program') {
+      let varId = path.scope.generateUidIdentifier(filename);
+
+      arrayParentPath.insertBefore(
+        t.variableDeclaration('const', [
+          t.variableDeclarator(
+            varId,
+            t.callExpression(state.ensureImport('templateOnly', '@ember/component/template-only'), [
+              t.stringLiteral(filename),
+              t.stringLiteral(varId.name),
+            ])
+          ),
+        ])
+      );
+      arrayParentPath.insertBefore(
+        t.expressionStatement(
+          t.callExpression(state.ensureImport('setComponentTemplate', '@ember/component'), [
+            compiled,
+            varId,
+          ])
+        )
+      );
+      arrayParentPath.replaceWith(t.exportDefaultDeclaration(varId));
+
+      return;
+    }
+  }
+
+  if (path.type === 'ClassProperty') {
+    let classPath = path.parentPath.parentPath;
+
+    if (classPath.node.type === 'ClassDeclaration') {
+      classPath.insertAfter(
+        t.expressionStatement(
+          t.callExpression(state.ensureImport('setComponentTemplate', '@ember/component'), [
+            compiled,
+            classPath.node.id,
+          ])
+        )
+      );
+    } else {
+      classPath.replaceWith(
+        t.expressionStatement(
+          t.callExpression(state.ensureImport('setComponentTemplate', '@ember/component'), [
+            compiled,
+            classPath.node,
+          ])
+        )
+      );
+    }
+
+    path.remove();
+
+    return;
+  }
+
+  throw path.buildCodeFrameError(
+    `Attempted to use \`${
+      options.debugName || options.originalName
+    }\` to define a template in an unsupported way. Templates defined using this syntax must be:\n\n1. Assigned to a variable declaration OR\n2. The default export of a file OR\n2. In the top level of the file on their own (sugar for \`export default\`) OR\n4. Used directly within a named class body`
+  );
+};