Require a component class when creating an EmberNodeView

This replaces the `componentPath` with a `component` argument. Users need to provide the component class instead of the path which makes the setup Embroider compatible.

.changeset/old-avocados-jam.md

@@ -0,0 +1,25 @@
+---
+'@lblod/ember-rdfa-editor': major
+---
+
+Add Embroider "optimized" support
+
+To support the strict Embroider "optimized" preset we needed to make a breaking change. The `componentPath` property for the `createEmberNodeView` util has been replaced by a new `component` property. Instead of providing the path to the component, the component class should be passed instead.
+
+Before:
+```js
+createEmberNodeView({
+  // ... other options
+  componentPath: 'foo',
+});
+```
+
+After:
+```js
+import Foo from 'app-name/components/foo';
+
+createEmberNodeView({
+  // ... other options
+  component: Foo,
+});
+```

addon/plugins/image/nodes/image.ts

@@ -1,13 +1,15 @@
+import type { ComponentLike } from '@glint/template';
 import {
   createEmberNodeSpec,
   createEmberNodeView,
   EmberNodeConfig,
 } from '@lblod/ember-rdfa-editor/utils/ember-node';
+import Image from '@lblod/ember-rdfa-editor/components/plugins/image/node';
 import { Node as PNode } from 'prosemirror-model';
 
 const emberNodeConfig: EmberNodeConfig = {
   name: 'image',
-  componentPath: 'plugins/image/node',
+  component: Image as unknown as ComponentLike,
   inline: true,
   group: 'inline',
   draggable: true,

addon/plugins/link/nodes/link.ts

@@ -4,6 +4,8 @@ import {
   createEmberNodeView,
   EmberNodeConfig,
 } from '../../../utils/ember-node';
+import type { ComponentLike } from '@glint/template';
+import Link from '@lblod/ember-rdfa-editor/components/ember-node/link';
 
 type LinkOptions = {
   interactive: boolean;
@@ -15,7 +17,7 @@ const emberNodeConfig: (options: LinkOptions) => EmberNodeConfig = (
   const { interactive } = options;
   return {
     name: 'link',
-    componentPath: 'ember-node/link',
+    component: Link as unknown as ComponentLike,
     inline: true,
     group: 'inline',
     content: 'text*',

addon/utils/_private/ember-node.ts

@@ -29,6 +29,7 @@ import { v4 as uuidv4 } from 'uuid';
 // eslint-disable-next-line ember/no-classic-components
 import Component from '@ember/component';
 import Owner from '@ember/owner';
+import type { ComponentLike } from '@glint/template';
 import SayController from '@lblod/ember-rdfa-editor/core/say-controller';
 import { EditorState, SayView } from '@lblod/ember-rdfa-editor';
 import SayNodeSpec from '@lblod/ember-rdfa-editor/core/say-node-spec';
@@ -105,7 +106,7 @@ export function emberComponent(
   template: TemplateFactory,
   props: EmberNodeArgs & {
     atom: boolean;
-    componentPath: string;
+    component: ComponentLike<any>; // eslint-disable-line @typescript-eslint/no-explicit-any
     contentDOM?: HTMLElement;
   },
 ): { node: HTMLElement; component: EmberInlineComponent } {
@@ -147,20 +148,21 @@ class EmberNodeView implements NodeView {
     // when a node gets updated, `update()` is called.
     // We set the new node here and pass it to the component to render it.
     this.config = emberNodeConfig;
-    const { name, componentPath, atom, inline } = emberNodeConfig;
-    this.template = hbs`{{#component this.componentPath
-                          getPos=this.getPos
-                          node=this.node
-                          updateAttribute=this.updateAttribute
-                          controller=this.controller
-                          view=this.view
-                          selected=this.selected
-                          contentDecorations=this.contentDecorations
-                        }}
+    const { name, component: componentClass, atom, inline } = emberNodeConfig;
+
+    this.template = hbs`<this.component
+                          @getPos={{this.getPos}}
+                          @node={{this.node}}
+                          @updateAttribute={{this.updateAttribute}}
+                          @controller={{this.controller}}
+                          @view={{this.view}}
+                          @selected={{this.selected}}
+                          @contentDecorations={{this.contentDecorations}}
+                        >
                           {{#unless this.atom}}
-                          <EmberNode::Slot @contentDOM={{this.contentDOM}}/>
+                            <EmberNode::Slot @contentDOM={{this.contentDOM}}/>
                           {{/unless}}
-                        {{/component}}`;
+                        </this.component>`;
     this.node = pNode;
     this.contentDOM = !atom
       ? document.createElement(inline ? 'span' : 'div', {})
@@ -187,7 +189,7 @@ class EmberNodeView implements NodeView {
         },
         controller,
         contentDOM: this.contentDOM,
-        componentPath,
+        component: componentClass,
         atom,
         view,
         selected: false,
@@ -292,7 +294,7 @@ class EmberNodeView implements NodeView {
 
 export type EmberNodeConfig = {
   name: string;
-  componentPath: string;
+  component: ComponentLike<any>; // eslint-disable-line @typescript-eslint/no-explicit-any
   inline: boolean;
   group: string;
   content?: string;

package.json

@@ -171,6 +171,7 @@
   },
   "peerDependencies": {
     "@appuniversum/ember-appuniversum": "^2.4.2",
+    "@glint/template": "^1.1.0",
     "ember-cli-sass": "^11.0.1",
     "ember-modifier": "^3.2.7"
   },

tests/dummy/app/components/sample-ember-nodes/card.ts

@@ -0,0 +1,11 @@
+import templateOnlyComponent from '@ember/component/template-only';
+
+interface Signature {
+  Blocks: {
+    default: [];
+  };
+}
+
+const Card = templateOnlyComponent<Signature>();
+
+export default Card;

tests/dummy/app/dummy-nodes/card.ts

@@ -1,12 +1,14 @@
+import type { ComponentLike } from '@glint/template';
 import {
   createEmberNodeSpec,
   createEmberNodeView,
   EmberNodeConfig,
 } from '@lblod/ember-rdfa-editor/utils/_private/ember-node';
+import Card from 'dummy/components/sample-ember-nodes/card';
 
 const emberNodeConfig: EmberNodeConfig = {
   name: 'card',
-  componentPath: 'sample-ember-nodes/card',
+  component: Card as unknown as ComponentLike,
   inline: false,
   group: 'block',
   content: 'block+',

tests/dummy/app/dummy-nodes/counter.ts

@@ -1,3 +1,4 @@
+import type { ComponentLike } from '@glint/template';
 import { emberApplicationPluginKey } from '@lblod/ember-rdfa-editor/plugins/ember-application';
 import {
   createEmberNodeSpec,
@@ -6,10 +7,11 @@ import {
 } from '@lblod/ember-rdfa-editor/utils/_private/ember-node';
 import { optionMapOr } from '@lblod/ember-rdfa-editor/utils/_private/option';
 import IntlService from 'ember-intl/services/intl';
+import Counter from 'dummy/components/sample-ember-nodes/counter';
 
 const emberNodeConfig: EmberNodeConfig = {
   name: 'counter',
-  componentPath: 'sample-ember-nodes/counter',
+  component: Counter as unknown as ComponentLike,
   inline: true,
   group: 'inline',
   atom: true,

tests/dummy/app/dummy-nodes/dropdown.ts

@@ -1,12 +1,14 @@
+import type { ComponentLike } from '@glint/template';
 import {
   createEmberNodeSpec,
   createEmberNodeView,
   EmberNodeConfig,
 } from '@lblod/ember-rdfa-editor/utils/_private/ember-node';
+import Dropdown from 'dummy/components/sample-ember-nodes/dropdown';
 
 const emberNodeConfig: EmberNodeConfig = {
   name: 'dropdown',
-  componentPath: 'sample-ember-nodes/dropdown',
+  component: Dropdown as unknown as ComponentLike,
   inline: true,
   group: 'inline',
   atom: true,