Merge pull request #659 from ember-cli/update-babel-plugin-htmlbars-inline-precompile

Enable experimentation via `ember-template-imports` addon

Author: Robert Jackson

ember-cli-build.js

@@ -40,6 +40,23 @@ 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,
+        },
+      },
+    },
   });
 
   /*

lib/ember-addon-main.js

@@ -169,6 +169,11 @@ module.exports = {
 
     let isProduction = process.env.EMBER_ENV === 'production';
 
+    // 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)) {
@@ -184,7 +189,8 @@ module.exports = {
           pluginInfo,
           this.projectConfig(),
           templateCompilerPath,
-          isProduction
+          isProduction,
+          customModules
         );
 
         babelPlugins.push(htmlbarsInlinePrecompilePlugin);
@@ -198,6 +204,7 @@ module.exports = {
           isProduction,
           projectConfig: this.projectConfig(),
           templateCompilerPath,
+          modules: customModules,
         });
 
         babelPlugins.push(htmlBarsPlugin);

lib/utils.js

@@ -12,6 +12,11 @@ const INLINE_PRECOMPILE_MODULES = Object.freeze({
   'ember-cli-htmlbars': 'hbs',
   'ember-cli-htmlbars-inline-precompile': 'default',
   'htmlbars-inline-precompile': 'default',
+  '@ember/template-compilation': {
+    export: 'precompileTemplate',
+    disableTemplateLiteral: true,
+    shouldParseScope: true,
+  },
 });
 
 function isInlinePrecompileBabelPluginRegistered(plugins) {
@@ -51,7 +56,8 @@ function buildParalleizedBabelPlugin(
   pluginInfo,
   projectConfig,
   templateCompilerPath,
-  isProduction
+  isProduction,
+  customModules
 ) {
   let parallelBabelInfo = {
     requireFile: require.resolve('./require-from-worker'),
@@ -61,7 +67,7 @@ function buildParalleizedBabelPlugin(
       isProduction,
       projectConfig,
       parallelConfigs: pluginInfo.parallelConfigs,
-      modules: INLINE_PRECOMPILE_MODULES,
+      modules: Object.assign({}, customModules, INLINE_PRECOMPILE_MODULES),
     },
   };
 
@@ -208,7 +214,25 @@ function setup(pluginInfo, options) {
     ast: pluginInfo.plugins,
   });
 
-  let { precompile } = templateCompiler;
+  let { precompile: templatePrecompile } = templateCompiler;
+
+  let precompile = (template, _options) => {
+    let options = {};
+
+    for (let option in _options) {
+      if (option === 'scope') {
+        // The template compiler expects this option to be named `locals`, but
+        // we want users to pass it in as `scope`. In the future, we should update
+        // the template compiler to accept scope as well and remove this.
+        options.locals = _options.scope;
+      } else {
+        options[option] = _options[option];
+      }
+    }
+
+    return templatePrecompile(template, options);
+  };
+
   precompile.baseDir = () => path.resolve(__dirname, '..');
 
   let cacheKey;
@@ -221,7 +245,12 @@ function setup(pluginInfo, options) {
 
   let plugin = [
     require.resolve('babel-plugin-htmlbars-inline-precompile'),
-    { precompile, isProduction: options.isProduction, modules: INLINE_PRECOMPILE_MODULES },
+    {
+      precompile,
+      isProduction: options.isProduction,
+      ensureModuleApiPolyfill: true,
+      modules: Object.assign({}, options.modules, INLINE_PRECOMPILE_MODULES),
+    },
     'ember-cli-htmlbars:inline-precompile',
   ];
 

node-tests/addon-test.js

@@ -86,7 +86,7 @@ describe('ember-cli-htmlbars addon', function () {
 
         expect(output.read()).to.deep.equal({
           'hello.js':
-            'export default Ember.HTMLBars.template({"id":"QumOHSmG","block":"{\\"symbols\\":[],\\"statements\\":[[10,\\"div\\"],[12],[2,\\"Hello, World!\\"],[13]],\\"hasEval\\":false,\\"upvars\\":[]}","meta":{"moduleName":"hello.hbs"}});',
+            'export default Ember.HTMLBars.template({"id":"pb4oG9l/","block":"[[[10,0],[12],[1,\\"Hello, World!\\"],[13]],[],false,[]]","moduleName":"hello.hbs","isStrictMode":false});',
         });
       })
     );

package.json

@@ -33,7 +33,7 @@
   },
   "dependencies": {
     "@ember/edition-utils": "^1.2.0",
-    "babel-plugin-htmlbars-inline-precompile": "^4.2.1",
+    "babel-plugin-htmlbars-inline-precompile": "^4.4.1",
     "broccoli-debug": "^0.6.5",
     "broccoli-persistent-filter": "^3.1.2",
     "broccoli-plugin": "^4.0.3",
@@ -70,12 +70,13 @@
     "ember-cli-dependency-checker": "^3.2.0",
     "ember-cli-inject-live-reload": "^2.0.2",
     "ember-cli-version-checker": "^5.1.1",
+    "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-resolver": "^8.0.0",
-    "ember-source": "~3.22.0",
+    "ember-source": "~3.25.0",
     "ember-source-channel-url": "^2.0.1",
     "ember-template-lint": "^2.9.1",
     "ember-try": "^1.4.0",

tests/integration/components/test-inline-precompile-test.js

@@ -4,6 +4,9 @@ import { render } from '@ember/test-helpers';
 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);
@@ -26,6 +29,30 @@ module('tests/integration/components/test-inline-precompile', function (hooks) {
     assert.equal(this.element.textContent.trim(), 'Wheeeee');
   });
 
+  test('precompileTemplate', async function (assert) {
+    await render(precompileTemplate(`Wheeeee`, {}));
+
+    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' }));
 

yarn.lock

@@ -1075,6 +1075,13 @@
     "@glimmer/interfaces" "^0.54.1"
     "@simple-dom/interface" "^1.4.0"
 
+"@glimmer/[email protected]":
+  version "0.74.2"
+  resolved "https://registry.yarnpkg.com/@glimmer/vm-babel-plugins/-/vm-babel-plugins-0.74.2.tgz#479774d5885201538245f4cba76cabd4b0dee3a5"
+  integrity sha512-DLIKzim7Fg3o54EPgz/wsEiLOUcg24P4WJ9AAv4xsXfBmFndkEDzq1oJ3SPhB167Vp1m+GKOlfKzFm9mxX5rdA==
+  dependencies:
+    babel-plugin-debug-macros "^0.3.4"
+
 "@iarna/[email protected]":
   version "2.2.5"
   resolved "https://registry.yarnpkg.com/@iarna/toml/-/toml-2.2.5.tgz#b32366c89b43c6f8cefbdefac778b9c828e3ba8c"
@@ -2018,7 +2025,7 @@ babel-plugin-check-es2015-constants@^6.22.0:
   dependencies:
     babel-runtime "^6.22.0"
 
-babel-plugin-debug-macros@^0.2.0-beta.6:
+babel-plugin-debug-macros@^0.2.0, babel-plugin-debug-macros@^0.2.0-beta.6:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-debug-macros/-/babel-plugin-debug-macros-0.2.0.tgz#0120ac20ce06ccc57bf493b667cf24b85c28da7a"
   integrity sha512-Wpmw4TbhR3Eq2t3W51eBAQSdKlr+uAyF0GI4GtPfMCD12Y4cIdpKC9l0RjNTH/P9isFypSqqewMPm7//fnZlNA==
@@ -2032,6 +2039,13 @@ babel-plugin-debug-macros@^0.3.3:
   dependencies:
     semver "^5.3.0"
 
+babel-plugin-debug-macros@^0.3.4:
+  version "0.3.4"
+  resolved "https://registry.yarnpkg.com/babel-plugin-debug-macros/-/babel-plugin-debug-macros-0.3.4.tgz#22961d0cb851a80654cece807a8b4b73d85c6075"
+  integrity sha512-wfel/vb3pXfwIDZUrkoDrn5FHmlWI96PCJ3UCDv2a86poJ3EQrnArNW5KfHSVJ9IOgxHbo748cQt7sDU+0KCEw==
+  dependencies:
+    semver "^5.3.0"
+
 babel-plugin-dynamic-import-node@^2.3.3:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz#84fda19c976ec5c6defef57f9427b3def66e17a3"
@@ -2060,6 +2074,13 @@ babel-plugin-ember-modules-api-polyfill@^3.2.1:
   dependencies:
     ember-rfc176-data "^0.3.16"
 
+babel-plugin-ember-modules-api-polyfill@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-ember-modules-api-polyfill/-/babel-plugin-ember-modules-api-polyfill-3.4.0.tgz#3f5e0457e135f8a29b3a8b6910806bb5b524649e"
+  integrity sha512-nVu/LqbZBAup1zLij6xGvQwVLWVk4XYu2fl4vIOUR3S6ukdonMLhKAb0d4QXSzH30Pd7OczVTlPffWbiwahdJw==
+  dependencies:
+    ember-rfc176-data "^0.3.16"
+
 babel-plugin-filter-imports@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-filter-imports/-/babel-plugin-filter-imports-4.0.0.tgz#068f8da15236a96a9602c36dc6f4a6eeca70a4f4"
@@ -2073,10 +2094,12 @@ babel-plugin-htmlbars-inline-precompile@^1.0.0:
   resolved "https://registry.yarnpkg.com/babel-plugin-htmlbars-inline-precompile/-/babel-plugin-htmlbars-inline-precompile-1.0.0.tgz#a9d2f6eaad8a3f3d361602de593a8cbef8179c22"
   integrity sha512-4jvKEHR1bAX03hBDZ94IXsYCj3bwk9vYsn6ux6JZNL2U5pvzCWjqyrGahfsGNrhERyxw8IqcirOi9Q6WCo3dkQ==
 
-babel-plugin-htmlbars-inline-precompile@^4.2.1:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-htmlbars-inline-precompile/-/babel-plugin-htmlbars-inline-precompile-4.2.1.tgz#9a367f8d7ecb9fb2c2e886edfe285caf7cb9766d"
-  integrity sha512-MCJXk+1R0YjlF/F52eDbhJTpsnqRVYsPYVP9d0jEu7E46AcRPEWDL5tfSweiQWHLKG017BIedATb91KcIoT3zA==
+babel-plugin-htmlbars-inline-precompile@^4.4.1:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-htmlbars-inline-precompile/-/babel-plugin-htmlbars-inline-precompile-4.4.1.tgz#2ec5282cdc92bd5b5ad918a8ddc4cd0a261b5187"
+  integrity sha512-OCdeSw08LkMhRWE4n35BZX/lt2bKdDHUfZlqjSd0sJN0zkm0KG6JyWMlqnq8h52pNiKkgYvq/gUqONkM0JqcmQ==
+  dependencies:
+    babel-plugin-ember-modules-api-polyfill "^3.4.0"
 
 babel-plugin-module-resolver@^3.1.1:
   version "3.2.0"
@@ -4153,7 +4176,7 @@ ember-cli-babel@^6.0.0-beta.4, ember-cli-babel@^6.12.0, ember-cli-babel@^6.16.0,
     ember-cli-version-checker "^2.1.2"
     semver "^5.5.0"
 
-ember-cli-babel@^7.1.2, ember-cli-babel@^7.11.0, ember-cli-babel@^7.12.0, ember-cli-babel@^7.18.0, ember-cli-babel@^7.19.0, ember-cli-babel@^7.23.1, ember-cli-babel@^7.7.3:
+ember-cli-babel@^7.1.2, ember-cli-babel@^7.11.0, ember-cli-babel@^7.12.0, ember-cli-babel@^7.18.0, ember-cli-babel@^7.23.0, ember-cli-babel@^7.23.1, ember-cli-babel@^7.7.3:
   version "7.23.1"
   resolved "https://registry.yarnpkg.com/ember-cli-babel/-/ember-cli-babel-7.23.1.tgz#d1517228ede08a5d4b045c78a7429728e956b30b"
   integrity sha512-qYggmt3hRs6QJ6cRkww3ahMpyP8IEV2KFrIRO/Z6hu9MkE/8Y28Xd5NjQl6fPV3oLoG0vwuHzhNe3Jr7Wec8zw==
@@ -4413,6 +4436,15 @@ ember-cli@~3.21.2:
     workerpool "^6.0.0"
     yam "^1.0.0"
 
+ember-compatibility-helpers@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/ember-compatibility-helpers/-/ember-compatibility-helpers-1.2.2.tgz#839e0c24190b7a2ec8c39b80e030811b1a95b6d3"
+  integrity sha512-EKyCGOGBvKkBsk6wKfg3GhjTvTTkcEwzl/cv4VYvZM18cihmjGNpliR4BymWsKRWrv4VJLyq15Vhk3NHkSNBag==
+  dependencies:
+    babel-plugin-debug-macros "^0.2.0"
+    ember-cli-version-checker "^5.1.1"
+    semver "^5.4.1"
+
 ember-export-application-global@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/ember-export-application-global/-/ember-export-application-global-2.0.1.tgz#b120a70e322ab208defc9e2daebe8d0dfc2dcd46"
@@ -4494,23 +4526,24 @@ ember-source-channel-url@^2.0.1:
   dependencies:
     got "^8.0.1"
 
-ember-source@~3.22.0:
-  version "3.22.0"
-  resolved "https://registry.yarnpkg.com/ember-source/-/ember-source-3.22.0.tgz#aa09db2cc8e4f78de4bf9a12ce9ff499d416adc2"
-  integrity sha512-6F/fWA5et4AMFXm+siCIhpM2XrO8Emwqln71qK67JyUhvD3MJJtvwtBoKq7bzK9I/86LLw13JYm4o6T3d2gXBw==
+ember-source@~3.25.0:
+  version "3.25.1"
+  resolved "https://registry.yarnpkg.com/ember-source/-/ember-source-3.25.1.tgz#7621fe7d471d08045b95c79fc760c3ca44efce4f"
+  integrity sha512-WCQV3FqbXRkYAwrwLZ6QcHZcTjT9ESa9H8Il+5H0QmDxLPiFnaj/UW4YLgZZ64X9PBT9WCUzLeLcccIFoFFm7w==
   dependencies:
     "@babel/helper-module-imports" "^7.8.3"
     "@babel/plugin-transform-block-scoping" "^7.8.3"
     "@babel/plugin-transform-object-assign" "^7.8.3"
     "@ember/edition-utils" "^1.2.0"
+    "@glimmer/vm-babel-plugins" "0.74.2"
     babel-plugin-debug-macros "^0.3.3"
     babel-plugin-filter-imports "^4.0.0"
     broccoli-concat "^4.2.4"
     broccoli-debug "^0.6.4"
     broccoli-funnel "^2.0.2"
     broccoli-merge-trees "^4.2.0"
     chalk "^4.0.0"
-    ember-cli-babel "^7.19.0"
+    ember-cli-babel "^7.23.0"
     ember-cli-get-component-path-option "^1.0.0"
     ember-cli-is-package-missing "^1.0.0"
     ember-cli-normalize-entity-name "^1.0.0"
@@ -7709,7 +7742,8 @@ mocha@^8.2.1:
     yargs-unparser "2.0.0"
 
 "module-name-inliner@link:./tests/dummy/lib/module-name-inliner":
-  version "0.1.0"
+  version "0.0.0"
+  uid ""
 
 morgan@^1.10.0:
   version "1.10.0"