Merge pull request #697 from smile-io/fix/broken-glimmer-component-detection

Fix broken Glimmer component detection

Author: andrewpye

addon/helpers/is-component-definition.js

@@ -7,10 +7,23 @@ export function isComponentDefinition(content) {
     return false;
   }
 
+  // Glimmer now uses Symbol keys in its component definitions so we check those first.
+  let symbolPropKeys = Object.getOwnPropertySymbols?.(content);
+  if (symbolPropKeys?.length) {
+    let isGlimmerComponentDefinition = symbolPropKeys.some((symbolPropKey) => {
+      let propValue = content[symbolPropKey];
+      return (
+        propValue &&
+        Object.keys(propValue).some((key) => key === 'ComponentClass')
+      );
+    });
+
+    if (isGlimmerComponentDefinition) {
+      return true;
+    }
+  }
+
   let contentPropNames = Object.keys(content);
-  // This stopped working in Ember 3.17 when it was switched to use a Symbol instead
-  // See https://github.com/glimmerjs/glimmer-vm/blob/master/CHANGELOG.md#v0450-2019-12-18 and
-  // https://github.com/glimmerjs/glimmer-vm/pull/993 for more
   let isPreOctaneComponentDefinition = contentPropNames.some(
     (propName) => propName.indexOf('COMPONENT DEFINITION') > -1
   );

tests/integration/helpers/is-component-definition-test.js

@@ -3,23 +3,49 @@ import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@ember/test-helpers';
 
+function createMockGlimmerComponentDefinition() {
+  return {
+    [Symbol('INNER')]: {
+      name: 'mock-component',
+      ComponentClass: {},
+      template: {},
+      manager: {},
+      state: {},
+    },
+  };
+}
+
 module('Integration | Helper | is-component-definition', function (hooks) {
   setupRenderingTest(hooks);
 
-  // Replace this with your real tests.
-  test('it renders', async function (assert) {
-    this.set('inputValue', '1234');
-
-    await render(hbs`{{if (is-component-definition inputValue) "yes" "no"}}`);
+  test('it detects component definitions correctly', async function (assert) {
+    await render(hbs`{{if (is-component-definition "1234") "yes" "no"}}`);
     assert
       .dom(this.element)
-      .hasText('no', "returns false when it's not a component definition");
+      .hasText(
+        'no',
+        'returns false when passed something other than a component definition'
+      );
 
     await render(
       hbs`{{if (is-component-definition (component "polaris-heading" text="Text")) "yes" "no"}}`
     );
     assert
       .dom(this.element)
-      .hasText('yes', "returns true when it's a component definition");
+      .hasText('yes', 'returns true when passed a component definition');
+
+    this.set(
+      'glimmerComponentDefinition',
+      createMockGlimmerComponentDefinition()
+    );
+    await render(
+      hbs`{{if (is-component-definition this.glimmerComponentDefinition) "yes" "no"}}`
+    );
+    assert
+      .dom(this.element)
+      .hasText(
+        'yes',
+        'returns true when passed a Glimmer component definition'
+      );
   });
 });