Merge pull request #724 from ember-cli/inline-hbs-reform

Inline HBS reform
ember-cli · Oct 14, 2021 · 2e94551 · 2e94551
2 parents 6b69fef + 7631fca
commit 2e94551
Show file tree

Hide file tree

Showing 13 changed files with 4,722 additions and 2,781 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -33,7 +33,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu, windows]
-        node-version: [10.x, 12.x, 13.x, 14.x]
+        node-version: [12.x, 13.x, 14.x]
 
     steps:
     - uses: actions/checkout@v1
@@ -89,7 +89,7 @@ jobs:
     - uses: actions/checkout@v1
     - uses: actions/setup-node@v1
       with:
-        node-version: 10.x
+        node-version: 12.x
     - name: install dependencies
       run: yarn install
     - name: test

diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@
 
 * Ember.js v3.8 or above
 * Ember CLI v3.8 or above
-* Node.js v10 or above
+* Node.js v12 or above
 
 ## Tagged Template Usage / Migrating from `htmlbars-inline-precompile`
 

diff --git a/ember-cli-build.js b/ember-cli-build.js
@@ -40,23 +40,6 @@ module.exports = function (defaults) {
         ],
       ],
     },
-
-    'ember-cli-htmlbars': {
-      // This is an option intended to be used only be `ember-template-imports`.
-      // DO NOT USE THIS
-      _customInlineModules: {
-        'ember-template-imports': {
-          export: 'hbs',
-          useTemplateLiteralProposalSemantics: 1,
-        },
-
-        'TEMPLATE-TAG-MODULE': {
-          export: 'GLIMMER_TEMPLATE',
-          debugName: '<template>',
-          useTemplateTagProposalSemantics: 1,
-        },
-      },
-    },
   });
 
   /*

diff --git a/lib/ember-addon-main.js b/lib/ember-addon-main.js
@@ -173,11 +173,6 @@ module.exports = {
     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 =
-      addonOptions['ember-cli-htmlbars'] && addonOptions['ember-cli-htmlbars']._customInlineModules;
-
     // add the babel-plugin-htmlbars-inline-precompile to the list of plugins
     // used by `ember-cli-babel` addon
     if (!utils.isInlinePrecompileBabelPluginRegistered(babelPlugins)) {
@@ -194,7 +189,6 @@ module.exports = {
           this.projectConfig(),
           templateCompilerPath,
           isProduction,
-          customModules,
           this._requiresModuleApiPolyfill
         );
 
@@ -209,7 +203,6 @@ module.exports = {
           isProduction,
           projectConfig: this.projectConfig(),
           templateCompilerPath,
-          modules: customModules,
           requiresModuleApiPolyfill: this._requiresModuleApiPolyfill,
         });
 

diff --git a/lib/utils.js b/lib/utils.js
@@ -37,12 +37,7 @@ function isInlinePrecompileBabelPluginRegistered(plugins) {
       typeof plugin === 'object' &&
       plugin._parallelBabel !== undefined
     ) {
-      return (
-        plugin._parallelBabel.requireFile === require.resolve('./require-from-worker') &&
-        typeof plugin._parallelBabel.params === 'object' &&
-        typeof plugin._parallelBabel.params.modules === 'object' &&
-        plugin._parallelBabel.params.modules['ember-cli-htmlbars'] === 'hbs'
-      );
+      return plugin._parallelBabel.requireFile === require.resolve('./require-from-worker');
     } else {
       return false;
     }
@@ -62,7 +57,6 @@ function buildParalleizedBabelPlugin(
   projectConfig,
   templateCompilerPath,
   isProduction,
-  customModules,
   requiresModuleApiPolyfill
 ) {
   let parallelBabelInfo = {
@@ -73,7 +67,6 @@ function buildParalleizedBabelPlugin(
       isProduction,
       projectConfig,
       parallelConfigs: pluginInfo.parallelConfigs,
-      modules: Object.assign({}, customModules, INLINE_PRECOMPILE_MODULES),
       requiresModuleApiPolyfill,
     },
   };
@@ -262,16 +255,32 @@ function setup(pluginInfo, options) {
     cacheKey;
   };
 
-  let plugin = [
-    require.resolve('babel-plugin-htmlbars-inline-precompile'),
-    {
-      precompile,
-      isProduction: options.isProduction,
-      ensureModuleApiPolyfill: options.requiresModuleApiPolyfill,
-      modules: Object.assign({}, options.modules, INLINE_PRECOMPILE_MODULES),
-    },
-    'ember-cli-htmlbars:inline-precompile',
-  ];
+  let plugin;
+  if (options.requiresModuleApiPolyfill) {
+    plugin = [
+      require.resolve('babel-plugin-htmlbars-inline-precompile'),
+      {
+        precompile,
+        isProduction: options.isProduction,
+        ensureModuleApiPolyfill: options.requiresModuleApiPolyfill,
+        modules: INLINE_PRECOMPILE_MODULES,
+      },
+      'ember-cli-htmlbars:inline-precompile',
+    ];
+  } else {
+    plugin = [
+      require.resolve('babel-plugin-ember-template-compilation'),
+      {
+        precompile,
+        enableLegacyModules: [
+          'ember-cli-htmlbars',
+          'ember-cli-htmlbars-inline-precompile',
+          'htmlbars-inline-precompile',
+        ],
+      },
+      'ember-cli-htmlbars:inline-precompile',
+    ];
+  }
 
   return plugin;
 }

diff --git a/node-tests/colocated-babel-plugin-test.js b/node-tests/colocated-babel-plugin-test.js
@@ -52,18 +52,18 @@ describe('ColocatedBabelPlugin', function () {
           import _applyDecoratedDescriptor from "@babel/runtime/helpers/esm/applyDecoratedDescriptor";
           import _initializerWarningHelper from "@babel/runtime/helpers/esm/initializerWarningHelper";
 
-          var _class, _descriptor, _temp;
+          var _class, _descriptor;
 
           import Component from '@glimmer/component';
           const __COLOCATED_TEMPLATE__ = 'ok';
-          let MyComponent = (_class = (_temp = class MyComponent extends Component {
+          let MyComponent = (_class = class MyComponent extends Component {
             constructor(...args) {
               super(...args);
 
               _initializerDefineProperty(this, "data", _descriptor, this);
             }
 
-          }, _temp), (_descriptor = _applyDecoratedDescriptor(_class.prototype, "data", [tracked], {
+          }, (_descriptor = _applyDecoratedDescriptor(_class.prototype, "data", [tracked], {
             configurable: true,
             enumerable: true,
             writable: true,
@@ -224,19 +224,19 @@ describe('ColocatedBabelPlugin', function () {
           import _applyDecoratedDescriptor from "@babel/runtime/helpers/esm/applyDecoratedDescriptor";
           import _initializerWarningHelper from "@babel/runtime/helpers/esm/initializerWarningHelper";
 
-          var _class, _descriptor, _temp;
+          var _class, _descriptor;
 
           import { setComponentTemplate as _setComponentTemplate } from "@ember/component";
           import Component from '@glimmer/component';
           const __COLOCATED_TEMPLATE__ = 'ok';
-          let MyComponent = (_class = (_temp = class MyComponent extends Component {
+          let MyComponent = (_class = class MyComponent extends Component {
             constructor(...args) {
               super(...args);
 
               _initializerDefineProperty(this, "data", _descriptor, this);
             }
 
-          }, _temp), (_descriptor = _applyDecoratedDescriptor(_class.prototype, "data", [tracked], {
+          }, (_descriptor = _applyDecoratedDescriptor(_class.prototype, "data", [tracked], {
             configurable: true,
             enumerable: true,
             writable: true,

diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
     "test:node:debug": "mocha debug node-tests/*.js"
   },
   "dependencies": {
+    "babel-plugin-ember-template-compilation": "^1.0.0",
     "@ember/edition-utils": "^1.2.0",
     "babel-plugin-htmlbars-inline-precompile": "^5.3.0",
     "broccoli-debug": "^0.6.5",
@@ -57,6 +58,7 @@
     "@babel/plugin-transform-typescript": "^7.10.1",
     "@babel/runtime": "^7.13.8",
     "@ember/optional-features": "^2.0.0",
+    "@ember/test-helpers": "^2.4.2",
     "babel-eslint": "^10.1.0",
     "babel-plugin-debug-macros": "^0.3.3",
     "broccoli-merge-trees": "^4.2.0",
@@ -65,16 +67,16 @@
     "co": "^4.6.0",
     "console-ui": "^3.1.2",
     "core-object": "^3.1.5",
+    "ember-auto-import": "^2.2.0",
     "ember-cli": "~3.25.2",
     "ember-cli-app-version": "^4.0.0",
     "ember-cli-babel": "^7.25.0",
     "ember-cli-dependency-checker": "^3.2.0",
     "ember-cli-inject-live-reload": "^2.1.0",
-    "ember-compatibility-helpers": "^1.2.2",
     "ember-export-application-global": "^2.0.1",
     "ember-load-initializers": "^2.1.1",
     "ember-maybe-import-regenerator": "^0.1.6",
-    "ember-qunit": "^4.6.0",
+    "ember-qunit": "^5.1.4",
     "ember-resolver": "^8.0.2",
     "ember-source": "~3.25.0",
     "ember-source-channel-url": "^3.0.0",
@@ -91,12 +93,14 @@
     "mocha": "^8.4.0",
     "module-name-inliner": "link:./tests/dummy/lib/module-name-inliner",
     "prettier": "^2.3.2",
-    "qunit-dom": "^1.6.0",
+    "qunit": "^2.17.2",
+    "qunit-dom": "^2.0.0",
     "release-it": "^14.2.1",
-    "release-it-lerna-changelog": "^3.1.0"
+    "release-it-lerna-changelog": "^3.1.0",
+    "webpack": "^5.58.2"
   },
   "engines": {
-    "node": "10.* || >= 12.*"
+    "node": ">= 12.*"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"

diff --git a/tests/dummy/lib/module-name-inliner/index.js b/tests/dummy/lib/module-name-inliner/index.js
@@ -10,7 +10,6 @@ module.exports = {
   setupPreprocessorRegistry(type, registry) {
     // can only add the plugin with this style on newer Ember versions
     registry.add('htmlbars-ast-plugin', this.buildPlugin());
-    registry.add('htmlbars-ast-plugin', this.buildLegacyPlugin());
   },
 
   buildPlugin() {
@@ -44,42 +43,4 @@ module.exports = {
       },
     };
   },
-
-  // this type of plugin has worked since at least Ember 2.4+
-  buildLegacyPlugin() {
-    return {
-      name: 'module-name-inliner',
-      baseDir() {
-        return __dirname;
-      },
-      parallelBabel: {
-        requireFile: __filename,
-        buildUsing: 'buildLegacyPlugin',
-        params: {},
-      },
-
-      plugin: class LegacyPlugin {
-        constructor(options) {
-          this.options = options;
-        }
-
-        transform(ast) {
-          let { meta } = this.options;
-          let b = this.syntax.builders;
-
-          this.syntax.traverse(ast, {
-            // replacing the mustache with text, like this
-            // {{module-name-reverser}} -> `some-module-name`
-            MustacheStatement(node) {
-              if (node.path.original === 'module-name-reverser') {
-                return b.text(meta.moduleName.split('').reverse().join(''));
-              }
-            },
-          });
-
-          return ast;
-        }
-      },
-    };
-  },
 };
diff --git a/tests/index.html b/tests/index.html
@@ -21,6 +21,13 @@
     {{content-for "body"}}
     {{content-for "test-body"}}
 
+    <div id="qunit"></div>
+    <div id="qunit-fixture">
+      <div id="ember-testing-container">
+        <div id="ember-testing"></div>
+      </div>
+    </div>
+
     <script src="/testem.js" integrity=""></script>
     <script src="{{rootURL}}assets/vendor.js"></script>
     <script src="{{rootURL}}assets/test-support.js"></script>

diff --git a/tests/integration/components/ast-plugins-test.js b/tests/integration/components/ast-plugins-test.js
@@ -6,15 +6,6 @@ import { hbs } from 'ember-cli-htmlbars';
 module('tests/integration/components/ast-plugins-test', function (hooks) {
   setupRenderingTest(hooks);
 
-  test('stand alone templates have "legacy" AST plugins ran', async function (assert) {
-    await render(hbs`{{x-module-name-reversed-component}}`);
-
-    assert.equal(
-      this.element.textContent.trim(),
-      'sbh.tnenopmoc-desrever-eman-eludom-x/stnenopmoc/setalpmet/ymmud'
-    );
-  });
-
   test('stand alone templates have AST plugins ran', async function (assert) {
     await render(hbs`{{x-module-name-inlined-component}}`);
 

diff --git a/tests/integration/components/test-inline-precompile-test.js b/tests/integration/components/test-inline-precompile-test.js
@@ -5,8 +5,6 @@ import hbsOne from 'htmlbars-inline-precompile';
 import hbsTwo from 'ember-cli-htmlbars-inline-precompile';
 import { hbs as hbsThree } from 'ember-cli-htmlbars';
 import { precompileTemplate } from '@ember/template-compilation';
-import { hbs } from 'ember-template-imports';
-import { gte } from 'ember-compatibility-helpers';
 
 module('tests/integration/components/test-inline-precompile', function (hooks) {
   setupRenderingTest(hooks);
@@ -35,30 +33,6 @@ module('tests/integration/components/test-inline-precompile', function (hooks) {
     assert.equal(this.element.textContent.trim(), 'Wheeeee');
   });
 
-  if (gte('3.25.0')) {
-    test('template literal proposal works', async function (assert) {
-      // eslint-disable-next-line no-undef
-      const Bar = [GLIMMER_TEMPLATE('world')];
-
-      const Foo = hbs`Hello`;
-
-      await render(
-        precompileTemplate(`<Foo/>, <Bar/>!`, {
-          strictMode: true,
-          scope: { Foo, Bar },
-        })
-      );
-
-      assert.equal(this.element.textContent.trim(), 'Hello, world!');
-    });
-  }
-
-  test('inline templates have "legacy" AST plugins ran', async function (assert) {
-    await render(hbsThree('{{module-name-reverser}}', { moduleName: 'hello-template.hbs' }));
-
-    assert.equal(this.element.textContent.trim(), 'sbh.etalpmet-olleh');
-  });
-
   test('inline templates have AST plugins ran', async function (assert) {
     await render(hbsThree('{{module-name-inliner}}', { moduleName: 'hello-template.hbs' }));
 

diff --git a/tests/test-helper.js b/tests/test-helper.js
@@ -2,6 +2,10 @@ import Application from '../app';
 import config from '../config/environment';
 import { setApplication } from '@ember/test-helpers';
 import { start } from 'ember-qunit';
+import * as QUnit from 'qunit';
+import { setup } from 'qunit-dom';
+
+setup(QUnit.assert);
 
 setApplication(Application.create(config.APP));