Skip to content

Commit d830106

Browse files
piemonkeypiemonkey
committed
Make use of inline svg icons dependent on appuniversum version
Enables support for older versions of ember-appuniversum on platforms that do not need inline svg icons
1 parent c8c806f commit d830106

40 files changed

+648
-119
lines changed

‎.changeset/tall-tools-wink.md

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
2-
"@lblod/ember-rdfa-editor": major
2+
"@lblod/ember-rdfa-editor": minor
33
---
44

55
Update icon usage to inline SVGs instead of using svgiconset.
6-
BREAKING: minimum supported ember-appuniversum version is now 3.4.1. This is required to support passing icon components in order to use inline SVGs that can be supported in unusual hosting environments.
6+
BREAKING: update minimum supported ember-appuniversum version to 2.17.0
7+
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.

‎addon/components/_private/attribute-editor/index.ts

+30-4
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,36 @@ import TransformUtils from '@lblod/ember-rdfa-editor/utils/_private/transform-ut
77
import type { ResolvedPNode } from '@lblod/ember-rdfa-editor/utils/_private/types';
88
import { Changeset, EmberChangeset } from 'ember-changeset';
99
import { trackedReset } from 'tracked-toolbox';
10-
import { CheckIcon } from '@appuniversum/ember-appuniversum/components/icons/check';
11-
import { PencilIcon } from '@appuniversum/ember-appuniversum/components/icons/pencil';
12-
import { ChevronDownIcon } from '@appuniversum/ember-appuniversum/components/icons/chevron-down';
13-
import { ChevronUpIcon } from '@appuniversum/ember-appuniversum/components/icons/chevron-up';
10+
import { dependencySatisfies, macroCondition } from '@embroider/macros';
11+
import { importSync } from '@embroider/macros';
12+
const CheckIcon = macroCondition(
13+
dependencySatisfies('@appuniversum/ember-appuniversum', '>=3.4.1'),
14+
)
15+
? // @ts-expect-error TS/glint doesn't seem to treat this as an import
16+
importSync('@appuniversum/ember-appuniversum/components/icons/check')
17+
.CheckIcon
18+
: 'check';
19+
const PencilIcon = macroCondition(
20+
dependencySatisfies('@appuniversum/ember-appuniversum', '>=3.4.1'),
21+
)
22+
? // @ts-expect-error TS/glint doesn't seem to treat this as an import
23+
importSync('@appuniversum/ember-appuniversum/components/icons/pencil')
24+
.PencilIcon
25+
: 'pencil';
26+
const ChevronDownIcon = macroCondition(
27+
dependencySatisfies('@appuniversum/ember-appuniversum', '>=3.4.1'),
28+
)
29+
? // @ts-expect-error TS/glint doesn't seem to treat this as an import
30+
importSync('@appuniversum/ember-appuniversum/components/icons/chevron-down')
31+
.ChevronDownIcon
32+
: 'chevron-down';
33+
const ChevronUpIcon = macroCondition(
34+
dependencySatisfies('@appuniversum/ember-appuniversum', '>=3.4.1'),
35+
)
36+
? // @ts-expect-error TS/glint doesn't seem to treat this as an import
37+
importSync('@appuniversum/ember-appuniversum/components/icons/chevron-up')
38+
.ChevronUpIcon
39+
: 'chevron-up';
1440

1541
type Args = {
1642
controller: SayController;

‎addon/components/_private/debug-info/index.ts

+16-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,22 @@
11
import Component from '@glimmer/component';
22
import { tracked } from '@glimmer/tracking';
33
import type { ResolvedPNode } from '@lblod/ember-rdfa-editor/utils/_private/types';
4-
import { ChevronDownIcon } from '@appuniversum/ember-appuniversum/components/icons/chevron-down';
5-
import { ChevronUpIcon } from '@appuniversum/ember-appuniversum/components/icons/chevron-up';
4+
import { dependencySatisfies, macroCondition } from '@embroider/macros';
5+
import { importSync } from '@embroider/macros';
6+
const ChevronDownIcon = macroCondition(
7+
dependencySatisfies('@appuniversum/ember-appuniversum', '>=3.4.1'),
8+
)
9+
? // @ts-expect-error TS/glint doesn't seem to treat this as an import
10+
importSync('@appuniversum/ember-appuniversum/components/icons/chevron-down')
11+
.ChevronDownIcon
12+
: 'chevron-down';
13+
const ChevronUpIcon = macroCondition(
14+
dependencySatisfies('@appuniversum/ember-appuniversum', '>=3.4.1'),
15+
)
16+
? // @ts-expect-error TS/glint doesn't seem to treat this as an import
17+
importSync('@appuniversum/ember-appuniversum/components/icons/chevron-up')
18+
.ChevronUpIcon
19+
: 'chevron-up';
620

721
type Args = {
822
node: ResolvedPNode;

‎addon/components/_private/number-editor/index.hbs

+1
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1+
{{! @glint-nocheck: not typesafe yet }}
12
<input type="number" class='au-c-input' ...attributes/>

‎addon/components/_private/rdfa-editor/index.ts

+16-2
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,22 @@ import RdfaRelationshipEditor from './relationship-editor';
77
import RdfaWrappingUtils from './wrapping-utils';
88
import RemoveNode from './remove-node';
99
import type { ResolvedPNode } from '@lblod/ember-rdfa-editor/utils/_private/types';
10-
import { ChevronDownIcon } from '@appuniversum/ember-appuniversum/components/icons/chevron-down';
11-
import { ChevronUpIcon } from '@appuniversum/ember-appuniversum/components/icons/chevron-up';
10+
import { dependencySatisfies, macroCondition } from '@embroider/macros';
11+
import { importSync } from '@embroider/macros';
12+
const ChevronDownIcon = macroCondition(
13+
dependencySatisfies('@appuniversum/ember-appuniversum', '>=3.4.1'),
14+
)
15+
? // @ts-expect-error TS/glint doesn't seem to treat this as an import
16+
importSync('@appuniversum/ember-appuniversum/components/icons/chevron-down')
17+
.ChevronDownIcon
18+
: 'chevron-down';
19+
const ChevronUpIcon = macroCondition(
20+
dependencySatisfies('@appuniversum/ember-appuniversum', '>=3.4.1'),
21+
)
22+
? // @ts-expect-error TS/glint doesn't seem to treat this as an import
23+
importSync('@appuniversum/ember-appuniversum/components/icons/chevron-up')
24+
.ChevronUpIcon
25+
: 'chevron-up';
1226

1327
type Args = {
1428
controller?: SayController;

‎addon/components/_private/rdfa-editor/property-editor/index.ts

+30-4
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,36 @@ import type {
1111
PlainTriple,
1212
} from '@lblod/ember-rdfa-editor/core/rdfa-processor';
1313
import { isLinkToNode } from '@lblod/ember-rdfa-editor/utils/rdfa-utils';
14-
import { PlusIcon } from '@appuniversum/ember-appuniversum/components/icons/plus';
15-
import { PencilIcon } from '@appuniversum/ember-appuniversum/components/icons/pencil';
16-
import { BinIcon } from '@appuniversum/ember-appuniversum/components/icons/bin';
17-
import { ThreeDotsIcon } from '@appuniversum/ember-appuniversum/components/icons/three-dots';
14+
import { dependencySatisfies, macroCondition } from '@embroider/macros';
15+
import { importSync } from '@embroider/macros';
16+
const PlusIcon = macroCondition(
17+
dependencySatisfies('@appuniversum/ember-appuniversum', '>=3.4.1'),
18+
)
19+
? // @ts-expect-error TS/glint doesn't seem to treat this as an import
20+
importSync('@appuniversum/ember-appuniversum/components/icons/plus')
21+
.PlusIcon
22+
: 'plus';
23+
const PencilIcon = macroCondition(
24+
dependencySatisfies('@appuniversum/ember-appuniversum', '>=3.4.1'),
25+
)
26+
? // @ts-expect-error TS/glint doesn't seem to treat this as an import
27+
importSync('@appuniversum/ember-appuniversum/components/icons/pencil')
28+
.PencilIcon
29+
: 'pencil';
30+
const BinIcon = macroCondition(
31+
dependencySatisfies('@appuniversum/ember-appuniversum', '>=3.4.1'),
32+
)
33+
? // @ts-expect-error TS/glint doesn't seem to treat this as an import
34+
importSync('@appuniversum/ember-appuniversum/components/icons/bin')
35+
.BinIcon
36+
: 'bin';
37+
const ThreeDotsIcon = macroCondition(
38+
dependencySatisfies('@appuniversum/ember-appuniversum', '>=3.4.1'),
39+
)
40+
? // @ts-expect-error TS/glint doesn't seem to treat this as an import
41+
importSync('@appuniversum/ember-appuniversum/components/icons/three-dots')
42+
.ThreeDotsIcon
43+
: 'three-dots';
1844

1945
type CreationStatus = {
2046
mode: 'creation';

‎addon/components/_private/rdfa-editor/relationship-editor/content-predicate-list.ts

+16-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,22 @@
11
import Component from '@glimmer/component';
22
import { tracked } from '@glimmer/tracking';
33
import type { OutgoingTriple } from '@lblod/ember-rdfa-editor/core/rdfa-processor';
4-
import { ThreeDotsIcon } from '@appuniversum/ember-appuniversum/components/icons/three-dots';
5-
import { BinIcon } from '@appuniversum/ember-appuniversum/components/icons/bin';
4+
import { dependencySatisfies, macroCondition } from '@embroider/macros';
5+
import { importSync } from '@embroider/macros';
6+
const ThreeDotsIcon = macroCondition(
7+
dependencySatisfies('@appuniversum/ember-appuniversum', '>=3.4.1'),
8+
)
9+
? // @ts-expect-error TS/glint doesn't seem to treat this as an import
10+
importSync('@appuniversum/ember-appuniversum/components/icons/three-dots')
11+
.ThreeDotsIcon
12+
: 'three-dots';
13+
const BinIcon = macroCondition(
14+
dependencySatisfies('@appuniversum/ember-appuniversum', '>=3.4.1'),
15+
)
16+
? // @ts-expect-error TS/glint doesn't seem to treat this as an import
17+
importSync('@appuniversum/ember-appuniversum/components/icons/bin')
18+
.BinIcon
19+
: 'bin';
620

721
interface Args {
822
properties: OutgoingTriple[];

‎addon/components/_private/rdfa-editor/relationship-editor/index.ts

+37-5
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,43 @@ import type {
2020
import { isLinkToNode } from '@lblod/ember-rdfa-editor/utils/rdfa-utils';
2121
import ContentPredicateListComponent from './content-predicate-list';
2222
import TransformUtils from '@lblod/ember-rdfa-editor/utils/_private/transform-utils';
23-
import { PlusIcon } from '@appuniversum/ember-appuniversum/components/icons/plus';
24-
import { ExternalLinkIcon } from '@appuniversum/ember-appuniversum/components/icons/external-link';
25-
import { ThreeDotsIcon } from '@appuniversum/ember-appuniversum/components/icons/three-dots';
26-
import { PencilIcon } from '@appuniversum/ember-appuniversum/components/icons/pencil';
27-
import { BinIcon } from '@appuniversum/ember-appuniversum/components/icons/bin';
23+
import { dependencySatisfies, macroCondition } from '@embroider/macros';
24+
import { importSync } from '@embroider/macros';
25+
const PlusIcon = macroCondition(
26+
dependencySatisfies('@appuniversum/ember-appuniversum', '>=3.4.1'),
27+
)
28+
? // @ts-expect-error TS/glint doesn't seem to treat this as an import
29+
importSync('@appuniversum/ember-appuniversum/components/icons/plus')
30+
.PlusIcon
31+
: 'plus';
32+
const ExternalLinkIcon = macroCondition(
33+
dependencySatisfies('@appuniversum/ember-appuniversum', '>=3.4.1'),
34+
)
35+
? // @ts-expect-error TS/glint doesn't seem to treat this as an import
36+
importSync('@appuniversum/ember-appuniversum/components/icons/external-link')
37+
.ExternalLinkIcon
38+
: 'external-link';
39+
const ThreeDotsIcon = macroCondition(
40+
dependencySatisfies('@appuniversum/ember-appuniversum', '>=3.4.1'),
41+
)
42+
? // @ts-expect-error TS/glint doesn't seem to treat this as an import
43+
importSync('@appuniversum/ember-appuniversum/components/icons/three-dots')
44+
.ThreeDotsIcon
45+
: 'three-dots';
46+
const PencilIcon = macroCondition(
47+
dependencySatisfies('@appuniversum/ember-appuniversum', '>=3.4.1'),
48+
)
49+
? // @ts-expect-error TS/glint doesn't seem to treat this as an import
50+
importSync('@appuniversum/ember-appuniversum/components/icons/pencil')
51+
.PencilIcon
52+
: 'pencil';
53+
const BinIcon = macroCondition(
54+
dependencySatisfies('@appuniversum/ember-appuniversum', '>=3.4.1'),
55+
)
56+
? // @ts-expect-error TS/glint doesn't seem to treat this as an import
57+
importSync('@appuniversum/ember-appuniversum/components/icons/bin')
58+
.BinIcon
59+
: 'bin';
2860

2961
type Args = {
3062
controller?: SayController;

‎addon/components/_private/rdfa-editor/remove-node/index.ts

+9-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
11
import Component from '@glimmer/component';
22
import { tracked } from '@glimmer/tracking';
3-
import { AlertTriangleIcon } from '@appuniversum/ember-appuniversum/components/icons/alert-triangle';
3+
import { dependencySatisfies, macroCondition } from '@embroider/macros';
4+
import { importSync } from '@embroider/macros';
5+
const AlertTriangleIcon = macroCondition(
6+
dependencySatisfies('@appuniversum/ember-appuniversum', '>=3.4.1'),
7+
)
8+
? // @ts-expect-error TS/glint doesn't seem to treat this as an import
9+
importSync('@appuniversum/ember-appuniversum/components/icons/alert-triangle')
10+
.AlertTriangleIcon
11+
: 'alert-triangle';
412

513
import { type SayController } from '@lblod/ember-rdfa-editor';
614
import { type ResolvedPNode } from '@lblod/ember-rdfa-editor/utils/_private/types';

‎addon/components/_private/rdfa-editor/wrapping-utils/index.ts

+9-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,15 @@ import {
99
import WrappingModal from './modal';
1010
import type { ResolvedPNode } from '@lblod/ember-rdfa-editor/utils/_private/types';
1111
import { wrapInlineLiteral } from '@lblod/ember-rdfa-editor/commands/_private/rdfa-commands/wrap-inline-literal';
12-
import { PlusIcon } from '@appuniversum/ember-appuniversum/components/icons/plus';
12+
import { dependencySatisfies, macroCondition } from '@embroider/macros';
13+
import { importSync } from '@embroider/macros';
14+
const PlusIcon = macroCondition(
15+
dependencySatisfies('@appuniversum/ember-appuniversum', '>=3.4.1'),
16+
)
17+
? // @ts-expect-error TS/glint doesn't seem to treat this as an import
18+
importSync('@appuniversum/ember-appuniversum/components/icons/plus')
19+
.PlusIcon
20+
: 'plus';
1321

1422
type Args = {
1523
controller?: SayController;

‎addon/components/collapsible.ts

+15-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,21 @@
11
import { action } from '@ember/object';
22
import Component from '@glimmer/component';
33
import { tracked } from '@glimmer/tracking';
4-
import { RemoveIcon } from '@appuniversum/ember-appuniversum/components/icons/remove';
5-
import { AddIcon } from '@appuniversum/ember-appuniversum/components/icons/add';
4+
import { dependencySatisfies, macroCondition } from '@embroider/macros';
5+
import { importSync } from '@embroider/macros';
6+
const RemoveIcon = macroCondition(
7+
dependencySatisfies('@appuniversum/ember-appuniversum', '>=3.4.1'),
8+
)
9+
? // @ts-expect-error TS/glint doesn't seem to treat this as an import
10+
importSync('@appuniversum/ember-appuniversum/components/icons/remove')
11+
.RemoveIcon
12+
: 'remove';
13+
const AddIcon = macroCondition(
14+
dependencySatisfies('@appuniversum/ember-appuniversum', '>=3.4.1'),
15+
)
16+
? // @ts-expect-error TS/glint doesn't seem to treat this as an import
17+
importSync('@appuniversum/ember-appuniversum/components/icons/add').AddIcon
18+
: 'add';
619

720
type Args = { expandedInitially?: boolean };
821
export default class CollapsibleComponent extends Component<Args> {

‎addon/components/ember-node/link.ts

+23-3
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,29 @@ import type { EmberNodeArgs } from '@lblod/ember-rdfa-editor/utils/ember-node';
44
import { linkToHref } from '@lblod/ember-rdfa-editor/utils/_private/string-utils';
55
import { Velcro } from 'ember-velcro';
66
import { EditorState } from '@lblod/ember-rdfa-editor';
7-
import { LinkIcon } from '@appuniversum/ember-appuniversum/components/icons/link';
8-
import { LinkExternalIcon } from '@appuniversum/ember-appuniversum/components/icons/link-external';
9-
import { LinkBrokenIcon } from '@appuniversum/ember-appuniversum/components/icons/link-broken';
7+
import { dependencySatisfies, macroCondition } from '@embroider/macros';
8+
import { importSync } from '@embroider/macros';
9+
const LinkIcon = macroCondition(
10+
dependencySatisfies('@appuniversum/ember-appuniversum', '>=3.4.1'),
11+
)
12+
? // @ts-expect-error TS/glint doesn't seem to treat this as an import
13+
importSync('@appuniversum/ember-appuniversum/components/icons/link')
14+
.LinkIcon
15+
: 'link';
16+
const LinkExternalIcon = macroCondition(
17+
dependencySatisfies('@appuniversum/ember-appuniversum', '>=3.4.1'),
18+
)
19+
? // @ts-expect-error TS/glint doesn't seem to treat this as an import
20+
importSync('@appuniversum/ember-appuniversum/components/icons/link-external')
21+
.LinkExternalIcon
22+
: 'link-external';
23+
const LinkBrokenIcon = macroCondition(
24+
dependencySatisfies('@appuniversum/ember-appuniversum', '>=3.4.1'),
25+
)
26+
? // @ts-expect-error TS/glint doesn't seem to treat this as an import
27+
importSync('@appuniversum/ember-appuniversum/components/icons/link-broken')
28+
.LinkBrokenIcon
29+
: 'link-broken';
1030

1131
export default class Link extends Component<EmberNodeArgs> {
1232
Velcro = Velcro;

‎addon/components/plugins/alignment/alignment-menu.ts

+9-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,15 @@ import {
88
} from '@lblod/ember-rdfa-editor/plugins/alignment';
99
import { setAlignment } from '@lblod/ember-rdfa-editor/plugins/alignment/commands';
1010
import IntlService from 'ember-intl/services/intl';
11-
import { NavDownIcon } from '@appuniversum/ember-appuniversum/components/icons/nav-down';
11+
import { dependencySatisfies, macroCondition } from '@embroider/macros';
12+
import { importSync } from '@embroider/macros';
13+
const NavDownIcon = macroCondition(
14+
dependencySatisfies('@appuniversum/ember-appuniversum', '>=3.4.1'),
15+
)
16+
? // @ts-expect-error TS/glint doesn't seem to treat this as an import
17+
importSync('@appuniversum/ember-appuniversum/components/icons/nav-down')
18+
.NavDownIcon
19+
: 'nav-down';
1220

1321
type Args = {
1422
controller?: SayController;

‎addon/components/plugins/heading/heading-menu.ts

+16-2
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,22 @@ import Component from '@glimmer/component';
44
import { NodeType, SayController } from '@lblod/ember-rdfa-editor';
55
import { setBlockType } from '@lblod/ember-rdfa-editor/commands/set-block-type';
66
import IntlService from 'ember-intl/services/intl';
7-
import { CheckIcon } from '@appuniversum/ember-appuniversum/components/icons/check';
8-
import { NavDownIcon } from '@appuniversum/ember-appuniversum/components/icons/nav-down';
7+
import { dependencySatisfies, macroCondition } from '@embroider/macros';
8+
import { importSync } from '@embroider/macros';
9+
const CheckIcon = macroCondition(
10+
dependencySatisfies('@appuniversum/ember-appuniversum', '>=3.4.1'),
11+
)
12+
? // @ts-expect-error TS/glint doesn't seem to treat this as an import
13+
importSync('@appuniversum/ember-appuniversum/components/icons/check')
14+
.CheckIcon
15+
: 'check';
16+
const NavDownIcon = macroCondition(
17+
dependencySatisfies('@appuniversum/ember-appuniversum', '>=3.4.1'),
18+
)
19+
? // @ts-expect-error TS/glint doesn't seem to treat this as an import
20+
importSync('@appuniversum/ember-appuniversum/components/icons/nav-down')
21+
.NavDownIcon
22+
: 'nav-down';
923

1024
type Args = {
1125
controller?: SayController;

‎addon/components/plugins/history/redo.ts

+9-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,15 @@ import { action } from '@ember/object';
22
import Component from '@glimmer/component';
33
import { redo } from '@lblod/ember-rdfa-editor/plugins/history';
44
import SayController from '@lblod/ember-rdfa-editor/core/say-controller';
5-
import { RedoIcon } from '@appuniversum/ember-appuniversum/components/icons/redo';
5+
import { dependencySatisfies, macroCondition } from '@embroider/macros';
6+
import { importSync } from '@embroider/macros';
7+
const RedoIcon = macroCondition(
8+
dependencySatisfies('@appuniversum/ember-appuniversum', '>=3.4.1'),
9+
)
10+
? // @ts-expect-error TS/glint doesn't seem to treat this as an import
11+
importSync('@appuniversum/ember-appuniversum/components/icons/redo')
12+
.RedoIcon
13+
: 'redo';
614

715
type Args = {
816
controller?: SayController;

‎addon/components/plugins/history/undo.ts

+9-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,15 @@ import { action } from '@ember/object';
22
import Component from '@glimmer/component';
33
import { undo } from '@lblod/ember-rdfa-editor/plugins/history';
44
import SayController from '@lblod/ember-rdfa-editor/core/say-controller';
5-
import { UndoIcon } from '@appuniversum/ember-appuniversum/components/icons/undo';
5+
import { dependencySatisfies, macroCondition } from '@embroider/macros';
6+
import { importSync } from '@embroider/macros';
7+
const UndoIcon = macroCondition(
8+
dependencySatisfies('@appuniversum/ember-appuniversum', '>=3.4.1'),
9+
)
10+
? // @ts-expect-error TS/glint doesn't seem to treat this as an import
11+
importSync('@appuniversum/ember-appuniversum/components/icons/undo')
12+
.UndoIcon
13+
: 'undo';
614

715
type Args = {
816
controller?: SayController;

0 commit comments

Comments
 (0)