Disable the modules API polyfill on latest Ember

Disables the modules API polyfill on the latest versions of Ember.

Author: Chris Garrett

lib/colocated-babel-plugin.js

@@ -3,7 +3,11 @@
 module.exports = function (babel) {
   let t = babel.types;
 
-  function makeSetComponentTemplateMemberExpression() {
+  function makeSetComponentTemplateExpression(state) {
+    if (!state.opts.requiresModuleApiPolyfill) {
+      return state._colocationEnsureImport('setComponentTemplate', '@ember/component');
+    }
+
     return t.memberExpression(t.identifier('Ember'), t.identifier('_setComponentTemplate'));
   }
 
@@ -15,6 +19,53 @@ module.exports = function (babel) {
     name: 'ember-cli-htmlbars-colocation-template',
 
     visitor: {
+      Program(path, state) {
+        let allAddedImports = {};
+
+        state._colocationEnsureImport = (exportName, moduleName) => {
+          let addedImports = (allAddedImports[moduleName] = allAddedImports[moduleName] || {});
+
+          if (addedImports[exportName]) return addedImports[exportName];
+
+          let importDeclarations = path.get('body').filter((n) => n.type === 'ImportDeclaration');
+
+          let preexistingImportDeclaration = importDeclarations.find(
+            (n) => n.get('source').get('value').node === moduleName
+          );
+
+          if (preexistingImportDeclaration) {
+            let importSpecifier = preexistingImportDeclaration
+              .get('specifiers')
+              .find(({ node }) => {
+                return exportName === 'default'
+                  ? t.isImportDefaultSpecifier(node)
+                  : node.imported.name === exportName;
+              });
+
+            if (importSpecifier) {
+              addedImports[exportName] = importSpecifier.node.local;
+            }
+          }
+
+          if (!addedImports[exportName]) {
+            let uid = path.scope.generateUidIdentifier(
+              exportName === 'default' ? moduleName : exportName
+            );
+            addedImports[exportName] = uid;
+
+            let newImportSpecifier =
+              exportName === 'default'
+                ? t.importDefaultSpecifier(uid)
+                : t.importSpecifier(uid, t.identifier(exportName));
+
+            let newImport = t.importDeclaration([newImportSpecifier], t.stringLiteral(moduleName));
+            path.unshiftContainer('body', newImport);
+          }
+
+          return addedImports[exportName];
+        };
+      },
+
       VariableDeclarator(path, state) {
         if (path.node.id.name === '__COLOCATED_TEMPLATE__') {
           state.colocatedTemplateFound = true;
@@ -38,7 +89,7 @@ module.exports = function (babel) {
 
         state.setComponentTemplateInjected = true;
         let defaultExportDeclaration = path.node.declaration;
-        let setComponentTemplateMemberExpression = makeSetComponentTemplateMemberExpression();
+        let setComponentTemplateMemberExpression = makeSetComponentTemplateExpression(state);
         let colocatedTemplateIdentifier = makeColocatedTemplateIdentifier();
 
         if (defaultExportDeclaration.type === 'ClassDeclaration') {
@@ -85,7 +136,7 @@ module.exports = function (babel) {
           state.setComponentTemplateInjected = true;
           path.parent.body.push(
             t.expressionStatement(
-              t.callExpression(makeSetComponentTemplateMemberExpression(), [
+              t.callExpression(makeSetComponentTemplateExpression(state), [
                 makeColocatedTemplateIdentifier(),
                 defaultSpecifier.local,
               ])

lib/ember-addon-main.js

@@ -3,6 +3,7 @@
 const path = require('path');
 const SilentError = require('silent-error');
 const utils = require('./utils');
+const VersionChecker = require('ember-cli-version-checker');
 
 let registryInvocationCounter = 0;
 
@@ -62,7 +63,7 @@ module.exports = {
   transpileTree(inputTree, htmlbarsOptions) {
     const TemplateCompiler = require('./template-compiler-plugin');
 
-    return new TemplateCompiler(inputTree, htmlbarsOptions);
+    return new TemplateCompiler(inputTree, htmlbarsOptions, this._requiresModuleApiPolyfill);
   },
 
   setupPreprocessorRegistry(type, registry) {
@@ -169,6 +170,9 @@ module.exports = {
 
     let isProduction = process.env.EMBER_ENV === 'production';
 
+    let checker = new VersionChecker(this.parent).for('ember-source', 'npm');
+    this._requiresModuleApiPolyfill = checker.exists() && checker.lt('3.27.0-alpha.1');
+
     // This is an option intended to be used only be `ember-template-imports`.
     // DO NOT USE THIS
     let customModules =
@@ -190,7 +194,8 @@ module.exports = {
           this.projectConfig(),
           templateCompilerPath,
           isProduction,
-          customModules
+          customModules,
+          this._requiresModuleApiPolyfill
         );
 
         babelPlugins.push(htmlbarsInlinePrecompilePlugin);
@@ -205,14 +210,18 @@ module.exports = {
           projectConfig: this.projectConfig(),
           templateCompilerPath,
           modules: customModules,
+          requiresModuleApiPolyfill: this._requiresModuleApiPolyfill,
         });
 
         babelPlugins.push(htmlBarsPlugin);
       }
     }
 
     if (this._shouldColocateTemplates() && !utils.isColocatedBabelPluginRegistered(babelPlugins)) {
-      babelPlugins.push(require.resolve('./colocated-babel-plugin'));
+      babelPlugins.push([
+        require.resolve('./colocated-babel-plugin'),
+        { requiresModuleApiPolyfill: this._requiresModuleApiPolyfill },
+      ]);
     }
   },
 

lib/template-compiler-plugin.js

@@ -24,7 +24,7 @@ function rethrowBuildError(error) {
 }
 
 class TemplateCompiler extends Filter {
-  constructor(inputTree, _options) {
+  constructor(inputTree, _options, requiresModuleApiPolyfill) {
     let options = _options || {};
 
     if (!('persist' in options)) {
@@ -35,6 +35,7 @@ class TemplateCompiler extends Filter {
 
     this.options = options;
     this.inputTree = inputTree;
+    this.requiresModuleApiPolyfill = requiresModuleApiPolyfill;
 
     // TODO: do we need this?
     this.precompile = this.options.templateCompiler.precompile;
@@ -51,6 +52,7 @@ class TemplateCompiler extends Filter {
   processString(string, relativePath) {
     let srcDir = this.inputPaths[0];
     let srcName = path.join(srcDir, relativePath);
+
     try {
       // we have to reverse these for reasons that are a bit bonkers. the initial
       // version of this system used `registeredPlugin` from
@@ -63,25 +65,23 @@ class TemplateCompiler extends Filter {
       // sooooooo...... we are forced to maintain that **absolutely bonkers** ordering
       let astPlugins = this.options.plugins ? [...this.options.plugins.ast].reverse() : [];
 
-      let result =
-        'export default ' +
-        utils.template(this.options.templateCompiler, stripBom(string), {
-          contents: string,
-          isProduction: this.options.isProduction,
-          moduleName: relativePath,
-          parseOptions: {
-            srcName: srcName,
-          },
-
-          // intentionally not using `plugins: this.options.plugins` here
-          // because if we do, Ember will mutate the shared plugins object (adding
-          // all of the built in AST transforms into plugins.ast, which breaks
-          // persistent caching)
-          plugins: {
-            ast: astPlugins,
-          },
-        }) +
-        ';';
+      let precompiled = this.options.templateCompiler.precompile(stripBom(string), {
+        contents: string,
+        isProduction: this.options.isProduction,
+        moduleName: relativePath,
+        parseOptions: {
+          srcName: srcName,
+        },
+
+        // intentionally not using `plugins: this.options.plugins` here
+        // because if we do, Ember will mutate the shared plugins object (adding
+        // all of the built in AST transforms into plugins.ast, which breaks
+        // persistent caching)
+        plugins: {
+          ast: astPlugins,
+        },
+      });
+
       if (this.options.dependencyInvalidation) {
         let plugins = pluginsWithDependencies(this.options.plugins.ast);
         let dependencies = [];
@@ -91,7 +91,12 @@ class TemplateCompiler extends Filter {
         }
         this.dependencies.setDependencies(relativePath, dependencies);
       }
-      return result;
+
+      if (this.requiresModuleApiPolyfill) {
+        return `export default Ember.HTMLBars.template(${precompiled});`;
+      } else {
+        return `import { createTemplateFactory } from '@ember/template-factory';\n\nexport default createTemplateFactory(${precompiled});`;
+      }
     } catch (error) {
       rethrowBuildError(error);
     }
@@ -106,6 +111,8 @@ class TemplateCompiler extends Filter {
       }
     }
 
+    strippedOptions._requiresModuleApiPolyfill = this.requiresModuleApiPolyfill;
+
     return strippedOptions;
   }
 

lib/utils.js

@@ -50,17 +50,20 @@ function isInlinePrecompileBabelPluginRegistered(plugins) {
 }
 
 function isColocatedBabelPluginRegistered(plugins) {
-  return plugins.some(
-    (plugin) => typeof plugin === 'string' && plugin === require.resolve('./colocated-babel-plugin')
-  );
+  return plugins.some((plugin) => {
+    let path = Array.isArray(plugin) ? plugin[0] : plugin;
+
+    return typeof path === 'string' && path === require.resolve('./colocated-babel-plugin');
+  });
 }
 
 function buildParalleizedBabelPlugin(
   pluginInfo,
   projectConfig,
   templateCompilerPath,
   isProduction,
-  customModules
+  customModules,
+  requiresModuleApiPolyfill
 ) {
   let parallelBabelInfo = {
     requireFile: require.resolve('./require-from-worker'),
@@ -71,6 +74,7 @@ function buildParalleizedBabelPlugin(
       projectConfig,
       parallelConfigs: pluginInfo.parallelConfigs,
       modules: Object.assign({}, customModules, INLINE_PRECOMPILE_MODULES),
+      requiresModuleApiPolyfill,
     },
   };
 
@@ -199,12 +203,6 @@ function initializeEmberENV(templateCompiler, EmberENV) {
   }
 }
 
-function template(templateCompiler, string, options) {
-  let precompiled = templateCompiler.precompile(string, options);
-
-  return 'Ember.HTMLBars.template(' + precompiled + ')';
-}
-
 function setup(pluginInfo, options) {
   let projectConfig = options.projectConfig || {};
   let templateCompilerPath = options.templateCompilerPath;
@@ -261,7 +259,7 @@ function setup(pluginInfo, options) {
     {
       precompile,
       isProduction: options.isProduction,
-      ensureModuleApiPolyfill: true,
+      ensureModuleApiPolyfill: options.requiresModuleApiPolyfill,
       modules: Object.assign({}, options.modules, INLINE_PRECOMPILE_MODULES),
     },
     'ember-cli-htmlbars:inline-precompile',
@@ -355,7 +353,6 @@ function setupPlugins(wrappers) {
 module.exports = {
   buildOptions,
   initializeEmberENV,
-  template,
   setup,
   makeCacheKey,
   setupPlugins,

node-tests/addon-test.js

@@ -34,6 +34,7 @@ describe('ember-cli-htmlbars addon', function () {
       project,
       parent: project,
       ui: this.ui,
+      _requiresModuleApiPolyfill: true,
     });
 
     project.addons.push(this.addon);