Merge pull request #82 from SergeAstapov/remove-ast-transform

addon/helpers/element.js

@@ -1,17 +1,58 @@
-import { helper } from '@ember/component/helper';
-import { assert } from '@ember/debug';
-
-export default helper(function () {
-  // This helper (`element`, as opposed to `-element`) mostly exists to satisfy
-  // things like `owner.hasRegistration('helper:element')`. The AST transform
-  // replaces all usages of `(element ...)` into `(component (-element ...))`
-  // so if this helper is invoked directly, something is wrong.
-
-  assert(
-    'The `element` helper polyfill encountered an unexpected error. ' +
-      'Please report the issue at http://github.com/tildeio/ember-element-helper ' +
-      'with the usage and conditions that caused this error.'
-  );
-
-  return null;
-});
+import Helper from '@ember/component/helper';
+import { assert, runInDebug } from '@ember/debug';
+// eslint-disable-next-line ember/no-classic-components
+import EmberComponent from '@ember/component';
+import { ensureSafeComponent } from '@embroider/util';
+
+function UNINITIALIZED() {}
+
+export default class ElementHelper extends Helper {
+  constructor() {
+    super(...arguments);
+    this.tagName = UNINITIALIZED;
+    this.componentClass = null;
+  }
+
+  compute(params, hash) {
+    assert(
+      'The `element` helper takes a single positional argument',
+      params.length === 1
+    );
+    assert(
+      'The `element` helper does not take any named arguments',
+      Object.keys(hash).length === 0
+    );
+
+    let tagName = params[0];
+
+    if (tagName !== this.tagName) {
+      this.tagName = tagName;
+
+      if (typeof tagName === 'string') {
+        this.componentClass = ensureSafeComponent(
+          class DynamicElement extends EmberComponent {
+            tagName = tagName; // eslint-disable-line ember/require-tagless-components
+          },
+          this
+        );
+      } else {
+        this.componentClass = null;
+
+        runInDebug(() => {
+          let message =
+            'The argument passed to the `element` helper must be a string';
+
+          try {
+            message += ` (you passed \`${tagName}\`)`;
+          } catch (e) {
+            // ignore
+          }
+
+          assert(message, tagName === undefined || tagName === null);
+        });
+      }
+    }
+
+    return this.componentClass;
+  }
+}

index.js

@@ -2,24 +2,4 @@
 
 module.exports = {
   name: require('./package').name,
-
-  setupPreprocessorRegistry(_type, registry) {
-    let pluginObj = this._buildPlugin();
-    pluginObj.parallelBabel = {
-      requireFile: __filename,
-      buildUsing: '_buildPlugin',
-      params: {},
-    };
-    registry.add('htmlbars-ast-plugin', pluginObj);
-  },
-
-  _buildPlugin() {
-    return {
-      name: 'element-helper-syntax',
-      plugin: require('./lib/element-helper-syntax-plugin'),
-      baseDir: function () {
-        return __dirname;
-      },
-    };
-  },
 };

tests/integration/helpers/element-test.js

@@ -128,7 +128,7 @@ module('Integration | Helper | element', function (hooks) {
 
   test('it can be passed to the component helper', async function (assert) {
     await render(hbs`
-      {{#let (component (element "h1")) as |Tag|}}
+      {{#let (component (ensure-safe-component (element "h1"))) as |Tag|}}
         <Tag id="content-1">hello</Tag>
       {{/let}}
 
@@ -239,7 +239,7 @@ module('Integration | Helper | element', function (hooks) {
     assert.dom('p#content').hasText('Test').hasClass('extra');
   });
 
-  test('it can be invoked inline', async function (assert) {
+  test.skip('it can be invoked inline', async function (assert) {
     this.set('tagName', 'p');
 
     await render(hbs`{{element this.tagName}}`);