Merge pull request #323 from lblod/breaking/component-helper-removal

Drop usage of component-helper

.changeset/clever-pets-press.md

@@ -0,0 +1,54 @@
+---
+'@lblod/ember-rdfa-editor-lblod-plugins': major
+---
+
+Remove usage of `component` helper in preparation of embroider-compatibility.
+
+This removal also causes a change in the variable-plugin insert-component API, the insert-components now need to be passed directly (instead of their path). 
+
+Before:
+
+```typescript
+get variableTypes(): VariableConfig[] {
+  return [
+    {
+      label: 'text',
+      component: {
+        path: 'variable-plugin/text/insert',
+      },
+    },
+    {
+      label: 'location',
+      component: {
+        path: 'variable-plugin/location/insert',
+        options: {
+          endpoint: 'https://dev.roadsigns.lblod.info/sparql',
+        },
+      },
+    },
+  ];
+}
+```
+
+After:
+
+```typescript
+import TextVariableInsertComponent from '@lblod/ember-rdfa-editor-lblod-plugins/components/variable-plugin/text/insert';
+import LocationInsertComponent from '@lblod/ember-rdfa-editor-lblod-plugins/components/variable-plugin/location/insert';
+...
+get variableTypes() {
+  return [
+    {
+      label: 'text',
+      component: TextVariableInsertComponent,
+    },
+    {
+      label: 'location',
+      component: LocationInsertComponent,
+      options: {
+        endpoint: 'https://dev.roadsigns.lblod.info/sparql',
+      },
+    },
+  ];
+}
+```

README.md

@@ -563,18 +563,16 @@ The `variable-plugin/insert-variable-card` can be easily configured: it expects
 - `controller`: An instance of the `SayController` class
 - `variableTypes`: A list of `VariableConfig` objects. With each `VariableConfig` containing:
   - the `label` which should be displayed in the variable-select dropdown
-  - the `path` to the insert-variable component
+  - the `component`: class of the component which should be displayed upon selecting the variable type.
   - _optionally_ an `options` argument object which should be passed to the insert-variable component.
 
 * The `VariableConfig` type is defined as follows:
 
 ```js
  type VariableConfig = {
    label: string;
-   component: {
-     path: string;
-     options?: unknown;
-   };
+   component: ComponentLike;
+   options?: unknown;
  };
 ```
 
@@ -592,49 +590,44 @@ To allows users to insert variables into a document, add the following to the ed
 `this.controller` is an instance of `SayController` and `this.variableTypes` is the list of `VariableConfig` objects which should be defined in your controller/component class:
 
 ```js
+import TextVariableInsertComponent from '@lblod/ember-rdfa-editor-lblod-plugins/components/variable-plugin/text/insert';
+import NumberInsertComponent from '@lblod/ember-rdfa-editor-lblod-plugins/components/variable-plugin/number/insert';
+import DateInsertVariableComponent from '@lblod/ember-rdfa-editor-lblod-plugins/components/variable-plugin/date/insert-variable';
+import LocationInsertComponent from '@lblod/ember-rdfa-editor-lblod-plugins/components/variable-plugin/location/insert';
+import CodelistInsertComponent from '@lblod/ember-rdfa-editor-lblod-plugins/components/variable-plugin/codelist/insert';
+import VariablePluginAddressInsertVariableComponent from '@lblod/ember-rdfa-editor-lblod-plugins/components/variable-plugin/address/insert-variable';
+...
 get variableTypes() {
   return [
     {
       label: 'text',
-      component: {
-        path: 'variable-plugin/text/insert',
-      },
+      component: TextVariableInsertComponent,
     },
     {
       label: 'number',
-      component: {
-        path: 'variable-plugin/number/insert',
-      },
+      component: NumberInsertComponent,
     },
     {
       label: 'date',
-      component: {
-        path: 'variable-plugin/date/insert',
-      },
+      component: DateInsertVariableComponent
     },
     {
       label: 'location',
-      component: {
-        path: 'variable-plugin/location/insert',
-        options: {
-          endpoint: 'https://dev.roadsigns.lblod.info/sparql',
-        },
+      component: LocationInsertComponent,
+      options: {
+        endpoint: 'https://dev.roadsigns.lblod.info/sparql',
       },
     },
     {
       label: 'codelist',
-      component: {
-        path: 'variable-plugin/codelist/insert',
-        options: {
-          endpoint: 'https://dev.roadsigns.lblod.info/sparql',
-        },
+      component: CodelistInsertComponent,
+      options: {
+        endpoint: 'https://dev.roadsigns.lblod.info/sparql',
       },
     },
     {
       label: 'address',
-      component: {
-        path: 'variable-plugin/address/insert-variable',
-      },
+      component: VariablePluginAddressInsertVariableComponent,
     },
   ];
 }

addon/components/variable-plugin/insert-variable-card.hbs

@@ -25,11 +25,10 @@
         {{variable.label}}
       </PowerSelect>
       {{#if this.selectedVariable}}
-        {{component 
-          this.selectedVariable.component.path 
-          controller=this.controller 
-          options=this.selectedVariable.component.options
-        }}
+        <this.selectedVariable.component
+          @controller={{this.controller}}
+          @options={{this.selectedVariable.options}}
+        />
       {{/if}}
     </c.content>
   </AuCard>

addon/components/variable-plugin/insert-variable-card.ts

@@ -8,10 +8,8 @@ import IntlService from 'ember-intl/services/intl';
 
 export type VariableConfig = {
   label: string;
-  component: {
-    path: string;
-    options?: unknown;
-  };
+  component: typeof Component;
+  options?: unknown;
 };
 
 type Args = {

tests/dummy/app/controllers/regulatory-statement-sample.ts

@@ -86,6 +86,12 @@ import {
   date,
   dateView,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/variables/date';
+import TextVariableInsertComponent from '@lblod/ember-rdfa-editor-lblod-plugins/components/variable-plugin/text/insert';
+import NumberInsertComponent from '@lblod/ember-rdfa-editor-lblod-plugins/components/variable-plugin/number/insert';
+import DateInsertVariableComponent from '@lblod/ember-rdfa-editor-lblod-plugins/components/variable-plugin/date/insert-variable';
+import LocationInsertComponent from '@lblod/ember-rdfa-editor-lblod-plugins/components/variable-plugin/location/insert';
+import CodelistInsertComponent from '@lblod/ember-rdfa-editor-lblod-plugins/components/variable-plugin/codelist/insert';
+import VariablePluginAddressInsertVariableComponent from '@lblod/ember-rdfa-editor-lblod-plugins/components/variable-plugin/address/insert-variable';
 export default class RegulatoryStatementSampleController extends Controller {
   @service declare importRdfaSnippet: ImportRdfaSnippet;
   @service declare intl: IntlService;
@@ -179,41 +185,29 @@ export default class RegulatoryStatementSampleController extends Controller {
     return [
       {
         label: 'text',
-        component: {
-          path: 'variable-plugin/text/insert',
-        },
+        component: TextVariableInsertComponent,
       },
       {
         label: 'number',
-        component: {
-          path: 'variable-plugin/number/insert',
-        },
+        component: NumberInsertComponent,
       },
       {
         label: 'date',
-        component: {
-          path: 'variable-plugin/date/insert-variable',
-        },
+        component: DateInsertVariableComponent,
       },
       {
         label: 'location',
-        component: {
-          path: 'variable-plugin/location/insert',
-          options: this.locationOptions,
-        },
+        component: LocationInsertComponent,
+        options: this.locationOptions,
       },
       {
         label: 'codelist',
-        component: {
-          path: 'variable-plugin/codelist/insert',
-          options: this.codelistOptions,
-        },
+        component: CodelistInsertComponent,
+        options: this.codelistOptions,
       },
       {
         label: 'address',
-        component: {
-          path: 'variable-plugin/address/insert-variable',
-        },
+        component: VariablePluginAddressInsertVariableComponent,
       },
     ];
   }