lblod · piemonkey · Mar 29, 2024 · Mar 26, 2024 · Mar 27, 2024 · Mar 27, 2024
diff --git a/.changeset/quick-countries-burn.md b/.changeset/quick-countries-burn.md
@@ -0,0 +1,5 @@
+---
+"@lblod/ember-rdfa-editor": minor
+---
+
+Update to latest ember-appuniversum v3.4.0
diff --git a/.changeset/tall-tools-wink.md b/.changeset/tall-tools-wink.md
@@ -0,0 +1,6 @@
+---
+"@lblod/ember-rdfa-editor": minor
+---
+
+Update icon usage to inline SVGs instead of using svgiconset.
+If using ember-appuniversum version greater than 3.4.1, icon components are now used instead of string icon names, this uses inline SVGs that can be supported in unusual hosting environments.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -31,6 +31,24 @@ module.exports = {
         ],
       },
     },
+    {
+      files: ['**/*.gts'],
+      parser: 'ember-eslint-parser',
+      plugins: ['ember'],
+      extends: [
+        'eslint:recommended',
+        'plugin:ember/recommended',
+        'plugin:@typescript-eslint/eslint-recommended',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:prettier/recommended',
+      ],
+      rules: {
+        '@typescript-eslint/no-unused-vars': [
+          'error',
+          { varsIgnorePattern: '^_', argsIgnorePattern: '^_' },
+        ],
+      },
+    },
     // node files
     {
       files: [

diff --git a/.prettierrc.js b/.prettierrc.js
@@ -1,9 +1,10 @@
 'use strict';
 
 module.exports = {
+  plugins: ['prettier-plugin-ember-template-tag'],
   overrides: [
     {
-      files: '*.{js,ts}',
+      files: '*.{js,ts,gjs,gts}',
       options: {
         singleQuote: true,
       },

diff --git a/addon/components/_private/attribute-editor/index.hbs b/addon/components/_private/attribute-editor/index.hbs
@@ -1,40 +1,41 @@
-<AuPanel class="au-u-margin-bottom-tiny" as |Section|>
+{{! @glint-nocheck: not typesafe yet }}
+<AuPanel class='au-u-margin-bottom-tiny' as |Section|>
   <Section>
     <AuToolbar as |Group|>
       <Group>
-        <AuHeading @level="5" @skin="5">Node attributes</AuHeading>
+        <AuHeading @level='5' @skin='5'>Node attributes</AuHeading>
       </Group>
       <Group>
         <AuButtonGroup>
           {{#if this.isEditing}}
             <AuButton
-              @skin="naked"
-              @iconAlignment="right"
-              {{on "click" this.cancelEditing}}
+              @skin='naked'
+              @iconAlignment='right'
+              {{on 'click' this.cancelEditing}}
             >
               Cancel
             </AuButton>
             <AuButton
-              @icon="check"
-              @iconAlignment="right"
-              {{on "click" this.saveChanges}}
+              @icon={{this.CheckIcon}}
+              @iconAlignment='right'
+              {{on 'click' this.saveChanges}}
             >
               Save
             </AuButton>
           {{else}}
             <AuButton
-              @skin="naked"
-              @icon="pencil"
-              @iconAlignment="right"
-              {{on "click" this.enableEditingMode}}
+              @skin='naked'
+              @icon={{this.PencilIcon}}
+              @iconAlignment='right'
+              {{on 'click' this.enableEditingMode}}
             >
               Edit
             </AuButton>
           {{/if}}
           <AuButton
-            @skin="naked"
-            @icon={{if this.collapsed "chevron-down" "chevron-up"}}
-            {{on "click" this.toggleSection}}
+            @skin='naked'
+            @icon={{if this.collapsed this.ChevronDownIcon this.ChevronUpIcon}}
+            {{on 'click' this.toggleSection}}
           />
         </AuButtonGroup>
       </Group>
@@ -45,7 +46,7 @@
       <AuList @divider={{true}} as |Item|>
         {{#each-in this.node.value.attrs as |key value|}}
           <Item>
-            <div class="au-u-padding-tiny">
+            <div class='au-u-padding-tiny'>
               {{#if (and this.isEditing (this.isEditable key))}}
                 {{#let (unique-id) as |id|}}
                   <AuLabel for={{id}}>
@@ -56,21 +57,21 @@
                       <EditorComponent
                         id={{id}}
                         value={{get this.changeset key}}
-                        {{on "change" (fn this.updateChangeset key)}}
+                        {{on 'change' (fn this.updateChangeset key)}}
                       />
                     {{else}}
                       <AuTextarea
-                        @width="block"
+                        @width='block'
                         id={{id}}
-                        @value={{get this.changeset key}}
-                        {{on "change" (fn this.updateChangeset key)}}
+                        value={{get this.changeset key}}
+                        {{on 'change' (fn this.updateChangeset key)}}
                       />
                     {{/if}}
                   {{/let}}
                 {{/let}}
               {{else}}
                 <p><strong>{{key}}</strong></p>
-                <pre>{{if value (this.formatValue value) "<No value>"}}</pre>
+                <pre>{{if value (this.formatValue value) '<No value>'}}</pre>
               {{/if}}
             </div>
           </Item>

diff --git a/addon/components/_private/attribute-editor/index.ts b/addon/components/_private/attribute-editor/index.ts
@@ -7,13 +7,48 @@ import TransformUtils from '@lblod/ember-rdfa-editor/utils/_private/transform-ut
 import type { ResolvedPNode } from '@lblod/ember-rdfa-editor/utils/_private/types';
 import { Changeset, EmberChangeset } from 'ember-changeset';
 import { trackedReset } from 'tracked-toolbox';
+import { dependencySatisfies, macroCondition } from '@embroider/macros';
+import { importSync } from '@embroider/macros';
+const CheckIcon = macroCondition(
+  dependencySatisfies('@appuniversum/ember-appuniversum', '>=3.4.1'),
+)
+  ? // @ts-expect-error TS/glint doesn't seem to treat this as an import
+    importSync('@appuniversum/ember-appuniversum/components/icons/check')
+      .CheckIcon
+  : 'check';
+const PencilIcon = macroCondition(
+  dependencySatisfies('@appuniversum/ember-appuniversum', '>=3.4.1'),
+)
+  ? // @ts-expect-error TS/glint doesn't seem to treat this as an import
+    importSync('@appuniversum/ember-appuniversum/components/icons/pencil')
+      .PencilIcon
+  : 'pencil';
+const ChevronDownIcon = macroCondition(
+  dependencySatisfies('@appuniversum/ember-appuniversum', '>=3.4.1'),
+)
+  ? // @ts-expect-error TS/glint doesn't seem to treat this as an import
+    importSync('@appuniversum/ember-appuniversum/components/icons/chevron-down')
+      .ChevronDownIcon
+  : 'chevron-down';
+const ChevronUpIcon = macroCondition(
+  dependencySatisfies('@appuniversum/ember-appuniversum', '>=3.4.1'),
+)
+  ? // @ts-expect-error TS/glint doesn't seem to treat this as an import
+    importSync('@appuniversum/ember-appuniversum/components/icons/chevron-up')
+      .ChevronUpIcon
+  : 'chevron-up';
 
 type Args = {
   controller: SayController;
   node: ResolvedPNode;
 };
 
 export default class AttributeEditor extends Component<Args> {
+  CheckIcon = CheckIcon;
+  PencilIcon = PencilIcon;
+  ChevronDownIcon = ChevronDownIcon;
+  ChevronUpIcon = ChevronUpIcon;
+
   @tracked collapsed = false;
   @trackedReset<AttributeEditor, boolean>({
     memo: 'node',

diff --git a/addon/components/_private/debug-info/index.hbs b/addon/components/_private/debug-info/index.hbs
@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 {{!-- <AuContent @skin="tiny">
   <AuToolbar as |Group|>
     <Group>
@@ -6,7 +7,7 @@
     <Group>
       <AuButton
         @skin="naked"
-        @icon={{if this.collapsed "chevron-down" "chevron-up"}}
+        @icon={{if this.collapsed this.ChevronDownIcon this.ChevronUpIcon}}
         {{on "click" this.toggleSection}}
       />
     </Group>
@@ -26,7 +27,7 @@
       <Group>
         <AuButton
           @skin="naked"
-          @icon={{if this.collapsed "chevron-down" "chevron-up"}}
+          @icon={{if this.collapsed this.ChevronDownIcon this.ChevronUpIcon}}
           {{on "click" this.toggleSection}}
         />
       </Group>

diff --git a/addon/components/_private/debug-info/index.ts b/addon/components/_private/debug-info/index.ts
@@ -1,11 +1,30 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import type { ResolvedPNode } from '@lblod/ember-rdfa-editor/utils/_private/types';
+import { dependencySatisfies, macroCondition } from '@embroider/macros';
+import { importSync } from '@embroider/macros';
+const ChevronDownIcon = macroCondition(
+  dependencySatisfies('@appuniversum/ember-appuniversum', '>=3.4.1'),
+)
+  ? // @ts-expect-error TS/glint doesn't seem to treat this as an import
+    importSync('@appuniversum/ember-appuniversum/components/icons/chevron-down')
+      .ChevronDownIcon
+  : 'chevron-down';
+const ChevronUpIcon = macroCondition(
+  dependencySatisfies('@appuniversum/ember-appuniversum', '>=3.4.1'),
+)
+  ? // @ts-expect-error TS/glint doesn't seem to treat this as an import
+    importSync('@appuniversum/ember-appuniversum/components/icons/chevron-up')
+      .ChevronUpIcon
+  : 'chevron-up';
 
 type Args = {
   node: ResolvedPNode;
 };
 export default class DebugInfo extends Component<Args> {
+  ChevronDownIcon = ChevronDownIcon;
+  ChevronUpIcon = ChevronUpIcon;
+
   @tracked collapsed = false;
 
   get pos() {

diff --git a/addon/components/_private/doc-editor/info-pill.hbs b/addon/components/_private/doc-editor/info-pill.hbs
@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 {{#if this.doc}}
   <AuPill
     @skin="link"

diff --git a/addon/components/_private/doc-editor/lang-pill.hbs b/addon/components/_private/doc-editor/lang-pill.hbs
@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 <AuPill
   @skin="link"
   {{on "click" this.showModal}}

diff --git a/addon/components/_private/number-editor/index.hbs b/addon/components/_private/number-editor/index.hbs
@@ -1 +1,2 @@
+{{! @glint-nocheck: not typesafe yet }}
 <input type="number" class='au-c-input' ...attributes/>
diff --git a/addon/components/_private/rdfa-editor/index.hbs b/addon/components/_private/rdfa-editor/index.hbs
@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 <AuPanel class="au-u-margin-bottom-tiny" as |Section|>
   <Section>
     <AuToolbar as |Group|>
@@ -9,7 +10,7 @@
           <AuPill>{{this.type}}</AuPill>
           <AuButton
             @skin="naked"
-            @icon={{if this.collapsed "chevron-down" "chevron-up"}}
+            @icon={{if this.collapsed this.ChevronDownIcon this.ChevronUpIcon}}
             {{on "click" this.toggleSection}}
           />
         </Group>

diff --git a/addon/components/_private/rdfa-editor/index.ts b/addon/components/_private/rdfa-editor/index.ts
@@ -7,6 +7,22 @@ import RdfaRelationshipEditor from './relationship-editor';
 import RdfaWrappingUtils from './wrapping-utils';
 import RemoveNode from './remove-node';
 import type { ResolvedPNode } from '@lblod/ember-rdfa-editor/utils/_private/types';
+import { dependencySatisfies, macroCondition } from '@embroider/macros';
+import { importSync } from '@embroider/macros';
+const ChevronDownIcon = macroCondition(
+  dependencySatisfies('@appuniversum/ember-appuniversum', '>=3.4.1'),
+)
+  ? // @ts-expect-error TS/glint doesn't seem to treat this as an import
+    importSync('@appuniversum/ember-appuniversum/components/icons/chevron-down')
+      .ChevronDownIcon
+  : 'chevron-down';
+const ChevronUpIcon = macroCondition(
+  dependencySatisfies('@appuniversum/ember-appuniversum', '>=3.4.1'),
+)
+  ? // @ts-expect-error TS/glint doesn't seem to treat this as an import
+    importSync('@appuniversum/ember-appuniversum/components/icons/chevron-up')
+      .ChevronUpIcon
+  : 'chevron-up';
 
 type Args = {
   controller?: SayController;
@@ -19,6 +35,8 @@ export default class RdfaEditor extends Component<Args> {
   // Disable the rdfa-type convertor for now
   // RdfaTypeConvertor = RdfaTypeConvertor;
   RemoveNode = RemoveNode;
+  ChevronDownIcon = ChevronDownIcon;
+  ChevronUpIcon = ChevronUpIcon;
 
   @tracked collapsed = false;
 

diff --git a/addon/components/_private/rdfa-editor/outgoing-triple-form.hbs b/addon/components/_private/rdfa-editor/outgoing-triple-form.hbs
@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 <form
   ...attributes
   {{on "submit" this.handleSubmit}}

diff --git a/addon/components/_private/rdfa-editor/property-editor/index.hbs b/addon/components/_private/rdfa-editor/property-editor/index.hbs
@@ -1,13 +1,14 @@
-<AuContent @skin="tiny">
+{{! @glint-nocheck: not typesafe yet }}
+<AuContent @skin='tiny'>
   <AuToolbar as |Group|>
     <Group>
-      <AuHeading @level="5" @skin="5">Properties</AuHeading>
+      <AuHeading @level='5' @skin='5'>Properties</AuHeading>
     </Group>
     <Group>
       <AuButton
-        @icon="plus"
-        @skin="naked"
-        {{on "click" this.startPropertyCreation}}
+        @icon={{this.PlusIcon}}
+        @skin='naked'
+        {{on 'click' this.startPropertyCreation}}
       >
         Add property
       </AuButton>
@@ -18,37 +19,37 @@
       {{#each this.properties as |prop index|}}
         {{#if (this.isPlainTriple prop)}}
           <Item
-            class="au-u-flex au-u-flex--row au-u-flex--between au-u-flex--vertical-center"
+            class='au-u-flex au-u-flex--row au-u-flex--between au-u-flex--vertical-center'
           >
-            <div class="au-u-padding-tiny">
+            <div class='au-u-padding-tiny'>
               <p><strong>predicate:</strong> {{prop.predicate}}</p>
               {{#if prop.object.datatype}}
                 <p><strong>datatype:</strong> {{prop.object.datatype.value}}</p>
               {{/if}}
               {{#if prop.object.language}}
                 <p><strong>language:</strong> {{prop.object.language}}</p>
               {{/if}}
-              {{#if (eq prop.object.termType "ContentLiteral")}}
+              {{#if (eq prop.object.termType 'ContentLiteral')}}
                 <AuPill>content-predicate</AuPill>
               {{else}}
                 <p><strong>value:</strong> {{prop.object.value}}</p>
               {{/if}}
             </div>
-            <AuDropdown @icon="three-dots" role="menu" @alignment="left">
+            <AuDropdown @icon={{this.ThreeDotsIcon}} role='menu' @alignment='left'>
               <AuButton
-                @skin="link"
-                @icon="pencil"
-                role="menuitem"
-                {{on "click" (fn this.startPropertyUpdate index)}}
+                @skin='link'
+                @icon={{this.PencilIcon}}
+                role='menuitem'
+                {{on 'click' (fn this.startPropertyUpdate index)}}
               >
                 Edit property
               </AuButton>
               <AuButton
-                @skin="link"
-                @icon="bin"
-                role="menuitem"
-                class="au-c-button--alert"
-                {{on "click" (fn this.removeProperty index)}}
+                @skin='link'
+                @icon={{this.BinIcon}}
+                role='menuitem'
+                class='au-c-button--alert'
+                {{on 'click' (fn this.removeProperty index)}}
               >
                 Remove property
               </AuButton>
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		{{! @glint-nocheck: not typesafe yet }}
		<input type="number" class='au-c-input' ...attributes/>