Merge pull request #341 from dfreeman/embedded-template-support

Support transforming templates embedded in JS/TS files

Author: NullVoxPopuli

transforms/no-implicit-this/__testfixtures__/tagged-templates-js.input.js

@@ -0,0 +1,16 @@
+import { hbs as echHBS } from 'ember-cli-htmlbars';
+import hipHBS from 'htmlbars-inline-precompile';
+import echipHBS from 'ember-cli-htmlbars-inline-precompile';
+import { hbs } from 'unknown-tag-source';
+
+echHBS`
+  Hello,
+    {{target}}!
+  \n
+`;
+
+hipHBS`Hello, {{target}}!`;
+
+echipHBS`Hello, {{target}}!`;
+
+hbs`Hello, {{target}}!`;

transforms/no-implicit-this/__testfixtures__/tagged-templates-js.output.js

@@ -0,0 +1,16 @@
+import { hbs as echHBS } from 'ember-cli-htmlbars';
+import hipHBS from 'htmlbars-inline-precompile';
+import echipHBS from 'ember-cli-htmlbars-inline-precompile';
+import { hbs } from 'unknown-tag-source';
+
+echHBS`
+  Hello,
+    {{this.target}}!
+  \n
+`;
+
+hipHBS`Hello, {{this.target}}!`;
+
+echipHBS`Hello, {{this.target}}!`;
+
+hbs`Hello, {{target}}!`;

transforms/no-implicit-this/__testfixtures__/tagged-templates-ts.input.ts

@@ -0,0 +1,17 @@
+import { hbs as echHBS } from 'ember-cli-htmlbars';
+import hipHBS from 'htmlbars-inline-precompile';
+import echipHBS from 'ember-cli-htmlbars-inline-precompile';
+
+declare const hbs: unknown;
+
+echHBS`
+  Hello,
+    {{target}}!
+  \n
+`;
+
+hipHBS`Hello, {{target}}!`;
+
+echipHBS`Hello, {{target}}!`;
+
+hbs`Hello, {{target}}!`;

transforms/no-implicit-this/__testfixtures__/tagged-templates-ts.output.ts

@@ -0,0 +1,17 @@
+import { hbs as echHBS } from 'ember-cli-htmlbars';
+import hipHBS from 'htmlbars-inline-precompile';
+import echipHBS from 'ember-cli-htmlbars-inline-precompile';
+
+declare const hbs: unknown;
+
+echHBS`
+  Hello,
+    {{this.target}}!
+  \n
+`;
+
+hipHBS`Hello, {{this.target}}!`;
+
+echipHBS`Hello, {{this.target}}!`;
+
+hbs`Hello, {{target}}!`;

transforms/no-implicit-this/helpers/tagged-templates.js

@@ -0,0 +1,42 @@
+const TEMPLATE_TAG_IMPORTS = [
+  { source: 'ember-cli-htmlbars', name: 'hbs' },
+  { source: 'htmlbars-inline-precompile', name: 'default' },
+  { source: 'ember-cli-htmlbars-inline-precompile', name: 'default' },
+];
+
+// Identifies whether a TaggedTemplateExpression corresponds to an Ember template
+// using one of a known set of `hbs` tags.
+exports.isEmberTemplate = function isEmberTemplate(path) {
+  let tag = path.get('tag');
+  let hasInterpolation = path.node.quasi.quasis.length !== 1;
+  let isKnownTag = TEMPLATE_TAG_IMPORTS.some(({ source, name }) =>
+    isImportReference(tag, source, name)
+  );
+
+  return isKnownTag && !hasInterpolation;
+};
+
+// Determines whether the given identifier is a reference to an export
+// from a particular module.
+function isImportReference(path, importSource, importName) {
+  let scope = path.scope.lookup(path.node.name);
+  let bindings = scope ? scope.getBindings() : {};
+  let bindingIdentifiers = bindings[path.node.name] || [];
+
+  for (let binding of bindingIdentifiers) {
+    let specifier = binding.parent.node;
+    let importDeclaration = binding.parent.parent.node;
+    let bindingImportedName =
+      specifier.type === 'ImportDefaultSpecifier'
+        ? 'default'
+        : specifier.type === 'ImportSpecifier'
+        ? specifier.imported.name
+        : null;
+
+    if (bindingImportedName === importName && importDeclaration.source.value === importSource) {
+      return true;
+    }
+  }
+
+  return false;
+}

transforms/no-implicit-this/index.js

@@ -5,7 +5,8 @@ const debug = require('debug')('ember-no-implicit-this-codemod:transform');
 const recast = require('ember-template-recast');
 const { getTelemetry } = require('ember-codemods-telemetry-helpers');
 const transform = require('./helpers/plugin');
-const { getOptions: getCLIOptions } = require('codemod-cli');
+const { getOptions: getCLIOptions, jscodeshift } = require('codemod-cli');
+const { isEmberTemplate } = require('./helpers/tagged-templates');
 const DEFAULT_OPTIONS = {};
 
 /**
@@ -41,23 +42,48 @@ function getOptions() {
   return options;
 }
 
-module.exports = function transformer(file /*, api */) {
-  let extension = path.extname(file.path);
-  let options = Object.assign({}, DEFAULT_OPTIONS, getOptions());
-
-  if (!['.hbs'].includes(extension.toLowerCase())) {
-    debug('Skipping %s because it does not match the .hbs file extension', file.path);
-
-    // do nothing on non-hbs files
-    return;
-  }
-
-  debug('Parsing %s ...', file.path);
-  let root = recast.parse(file.source);
+/**
+ * Given the location and source text of a template, as well as codemod options,
+ * returns the rewritten template contents with `this` references inserted where
+ * necessary.
+ */
+function rewriteTemplate(path, source, options) {
+  debug('Parsing %s ...', path);
+  let root = recast.parse(source);
 
-  debug('Transforming %s ...', file.path);
+  debug('Transforming %s ...', path);
   transform(root, options);
 
-  debug('Generating new content for %s ...', file.path);
+  debug('Generating new content for %s ...', path);
   return recast.print(root);
+}
+
+/**
+ * Given a JS or TS file that potentially has embedded templates within it,
+ * returns updated source with those templates rewritten to include `this`
+ * references where needed.
+ */
+function rewriteEmbeddedTemplates(file, options, api) {
+  return jscodeshift
+    .getParser(api)(file.source)
+    .find('TaggedTemplateExpression', { tag: { type: 'Identifier' } })
+    .forEach(path => {
+      if (isEmberTemplate(path)) {
+        let { value } = path.node.quasi.quasis[0];
+        value.raw = rewriteTemplate(file.path, value.raw, options);
+      }
+    })
+    .toSource();
+}
+
+module.exports = function transformer(file, api) {
+  let extension = path.extname(file.path).toLowerCase();
+  let options = Object.assign({}, DEFAULT_OPTIONS, getOptions());
+  if (extension === '.hbs') {
+    return rewriteTemplate(file.path, file.source, options);
+  } else if (extension === '.js' || extension === '.ts') {
+    return rewriteEmbeddedTemplates(file, options, api);
+  } else {
+    debug('Skipping %s because it does not match a known extension with templates', file.path);
+  }
 };