Merge pull request #22 from poulet42/use-ensure-safe-comp

ember-prismic-dom/src/components/prismic/element.hbs

@@ -1,5 +1,5 @@
 {{~#if this.isCustom~}}
-  {{~#component this.componentName node=@node~}}
+  {{~#component (ensure-safe-component this.componentName) node=@node~}}
     <Prismic::Children
       @componentNames={{@componentNames}}
       @node={{@node}}

test-app/.eslintrc.js

@@ -51,6 +51,7 @@ module.exports = {
       // test files
       files: ['tests/**/*-test.{js,ts}'],
       extends: ['plugin:qunit/recommended'],
+      rules: { 'ember/no-empty-glimmer-component-classes': 'off' },
     },
   ],
 };

test-app/config/ember-try.js

@@ -74,7 +74,7 @@ module.exports = async function () {
         },
       },
       embroiderSafe(),
-      embroiderOptimized({ allowedToFail: true }),
+      embroiderOptimized(),
     ],
   };
 };

test-app/tests/integration/components/prismic/dom-test.js

@@ -1,6 +1,8 @@
 import { render } from '@ember/test-helpers';
 import { setupRenderingTest } from 'ember-qunit';
 import { module, test } from 'qunit';
+import { setComponentTemplate } from '@ember/component';
+import Component from '@glimmer/component';
 
 import { hbs } from 'ember-cli-htmlbars';
 
@@ -18,6 +20,14 @@ module('Integration | Component | prismic/dom', function (hooks) {
 
   module('custom elements', function () {
     test('hyperlink', async function (assert) {
+      class Hyperlink extends Component {}
+      setComponentTemplate(
+        hbs`<a href={{@node.element.data.url}}>{{yield}}</a>`,
+        Hyperlink
+      );
+
+      this.hyperlink = Hyperlink;
+
       this.nodes = [
         {
           type: 'paragraph',
@@ -34,32 +44,68 @@ module('Integration | Component | prismic/dom', function (hooks) {
       ];
 
       await render(
-        hbs`<Prismic::Dom @nodes={{this.nodes}} @hyperlink='hyperlink'/>`
+        hbs`<Prismic::Dom @nodes={{this.nodes}} @hyperlink={{this.hyperlink}} />`
       );
       assert.strictEqual(
         cleanHtml(this),
         '<div><p>A <a href="https://example.org">link</a> to somewhere</p></div>'
       );
     });
 
+    test('handle passing a custom component as a string', async function (assert) {
+      class SuperCustom extends Component {}
+      setComponentTemplate(hbs`<mark>{{yield}}</mark>`, SuperCustom);
+
+      this.nodes = [
+        {
+          type: 'paragraph',
+          text: 'A fancy component',
+          spans: [
+            {
+              start: 2,
+              end: 7,
+              type: 'super-custom',
+            },
+          ],
+        },
+      ];
+      this.owner.register('component:super-custom', SuperCustom);
+
+      await render(
+        hbs`<Prismic::Dom @nodes={{this.nodes}} @super-custom="super-custom" />`
+      );
+
+      assert.strictEqual(
+        cleanHtml(this),
+        '<div><p>A <mark>fancy</mark> component</p></div>'
+      );
+    });
+
     test('list', async function (assert) {
+      class GroupListItem extends Component {}
+      class ListItem extends Component {}
+
+      setComponentTemplate(hbs`<ul>{{~yield~}}elephant</ul>`, GroupListItem);
+      setComponentTemplate(hbs`<li>{{~yield}} bananna</li>`, ListItem);
+
       this.nodes = [
         { type: 'list-item', text: 'one', spans: [] },
         { type: 'list-item', text: 'two', spans: [] },
       ];
 
+      this.groupListItem = GroupListItem;
       this.listItem = '';
 
       await render(
-        hbs`<Prismic::Dom @nodes={{this.nodes}} @group-list-item='group-list-item' @list-item={{this.listItem}}/>`
+        hbs`<Prismic::Dom @nodes={{this.nodes}} @group-list-item={{this.groupListItem}} @list-item={{this.listItem}}/>`
       );
 
       assert.strictEqual(
         cleanHtml(this),
         '<div><ul><li>one</li><li>two</li>elephant</ul></div>'
       );
 
-      this.set('listItem', 'list-item');
+      this.set('listItem', ListItem);
 
       assert.strictEqual(
         cleanHtml(this),