fix(components): make ember-engines optional

aklkv · aklkv · commit 32a9f439cbb8 · 2025-04-19T02:45:02.000-07:00
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -63,7 +63,6 @@
     "ember-cli-sass": "^11.0.1",
     "ember-concurrency": "^4.0.2",
     "ember-element-helper": "^0.8.6",
-    "ember-engines": "^0.12.0",
     "ember-focus-trap": "^1.1.1",
     "ember-get-config": "^2.1.1",
     "ember-modifier": "^4.2.0",
@@ -122,6 +121,11 @@
   "peerDependencies": {
     "ember-source": "^3.28.0 || ^4.0.0 || ^5.3.0"
   },
+  "peerDependenciesMeta": {
+    "ember-engines": {
+      "optional": true
+    }
+  },
   "ember": {
     "edition": "octane"
   },
diff --git a/packages/components/src/components/hds/breadcrumb/item.gts b/packages/components/src/components/hds/breadcrumb/item.gts
@@ -7,14 +7,14 @@ import Component from '@glimmer/component';
 import { htmlSafe } from '@ember/template';
 import { assert } from '@ember/debug';
 import { LinkTo } from '@ember/routing';
-// @ts-expect-error: no types
-import LinkToExternal from 'ember-engines/components/link-to-external-component.js';
+import { dependencySatisfies, importSync } from '@embroider/macros';
 import HdsIcon from '../icon/index.gts';
 import hdsLinkToModels from '../../../helpers/hds-link-to-models.ts';
 import hdsLinkToQuery from '../../../helpers/hds-link-to-query.ts';
 
 import type { SafeString } from '@ember/template';
 import type { HdsIconSignature } from '../icon';
+import type Owner from '@ember/owner';
 
 export interface HdsBreadcrumbItemSignature {
   Args: {
@@ -34,6 +34,26 @@ export interface HdsBreadcrumbItemSignature {
 }
 
 export default class HdsBreadcrumbItem extends Component<HdsBreadcrumbItemSignature> {
+  linkToComponent = LinkTo;
+
+  constructor(owner: Owner, args: HdsBreadcrumbItemSignature['Args']) {
+    super(owner, args);
+
+    if (this.args.isRouteExternal) {
+      if (dependencySatisfies('ember-engines', '*')) {
+        // @ts-expect-error: shape is unknown
+        this.linkToComponent = importSync(
+          'ember-engines/components/link-to-external-component.js'
+        ).default as LinkTo;
+      } else {
+        assert(
+          `@isRouteExternal is only available when using the "ember-engines" addon. Please install it to use this feature.`,
+          false
+        );
+      }
+    }
+  }
+
   /**
    * @param maxWidth
    * @type {string}
@@ -79,6 +99,16 @@ export default class HdsBreadcrumbItem extends Component<HdsBreadcrumbItemSignat
     return classes.join(' ');
   }
 
+  get isRouteExternal(): boolean {
+    const { isRouteExternal } = this.args;
+
+    if (isRouteExternal && dependencySatisfies('ember-engines', '*')) {
+      return isRouteExternal;
+    } else {
+      return false;
+    }
+  }
+
   <template>
     <li class="hds-breadcrumb__item" style={{this.itemStyle}} ...attributes>
       {{#if @current}}
@@ -91,39 +121,21 @@ export default class HdsBreadcrumbItem extends Component<HdsBreadcrumbItemSignat
           <span class="hds-breadcrumb__text">{{@text}}</span>
         </div>
       {{else}}
-        {{#if @isRouteExternal}}
-          <LinkToExternal
-            class="hds-breadcrumb__link"
-            @current-when={{@current-when}}
-            @models={{hdsLinkToModels @model @models}}
-            @query={{hdsLinkToQuery @query}}
-            @replace={{@replace}}
-            @route={{@route}}
-          >
-            {{#if @icon}}
-              <div class="hds-breadcrumb__icon">
-                <HdsIcon @name={{@icon}} @size="16" @stretched={{true}} />
-              </div>
-            {{/if}}
-            <span class="hds-breadcrumb__text">{{@text}}</span>
-          </LinkToExternal>
-        {{else}}
-          <LinkTo
-            class="hds-breadcrumb__link"
-            @current-when={{@current-when}}
-            @models={{hdsLinkToModels @model @models}}
-            @query={{hdsLinkToQuery @query}}
-            @replace={{@replace}}
-            @route={{@route}}
-          >
-            {{#if @icon}}
-              <div class="hds-breadcrumb__icon">
-                <HdsIcon @name={{@icon}} @size="16" @stretched={{true}} />
-              </div>
-            {{/if}}
-            <span class="hds-breadcrumb__text">{{@text}}</span>
-          </LinkTo>
-        {{/if}}
+        <this.linkToComponent
+          class="hds-breadcrumb__link"
+          @current-when={{@current-when}}
+          @models={{hdsLinkToModels @model @models}}
+          @query={{hdsLinkToQuery @query}}
+          @replace={{@replace}}
+          @route={{@route}}
+        >
+          {{#if @icon}}
+            <div class="hds-breadcrumb__icon">
+              <HdsIcon @name={{@icon}} @size="16" @stretched={{true}} />
+            </div>
+          {{/if}}
+          <span class="hds-breadcrumb__text">{{@text}}</span>
+        </this.linkToComponent>
       {{/if}}
     </li>
   </template>
diff --git a/packages/components/src/components/hds/interactive/index.gts b/packages/components/src/components/hds/interactive/index.gts
@@ -6,11 +6,13 @@
 import Component from '@glimmer/component';
 import { LinkTo } from '@ember/routing';
 import { on } from '@ember/modifier';
-// @ts-expect-error: no types
-import LinkToExternal from 'ember-engines/components/link-to-external-component.js';
+import { assert } from '@ember/debug';
+import { dependencySatisfies, importSync } from '@embroider/macros';
 import hdsLinkToModels from '../../../helpers/hds-link-to-models.ts';
 import hdsLinkToQuery from '../../../helpers/hds-link-to-query.ts';
 
+import type Owner from '@ember/owner';
+
 export interface HdsInteractiveSignature {
   Args: {
     href?: string;
@@ -32,6 +34,26 @@ export interface HdsInteractiveSignature {
 }
 
 export default class HdsInteractive extends Component<HdsInteractiveSignature> {
+  linkToComponent = LinkTo;
+
+  constructor(owner: Owner, args: HdsInteractiveSignature['Args']) {
+    super(owner, args);
+
+    if (this.args.isRouteExternal) {
+      if (dependencySatisfies('ember-engines', '*')) {
+        // @ts-expect-error: shape is unknown
+        this.linkToComponent = importSync(
+          'ember-engines/components/link-to-external-component.js'
+        ).default as LinkTo;
+      } else {
+        assert(
+          `@isRouteExternal is only available when using the "ember-engines" addon. Please install it to use this feature.`,
+          false
+        );
+      }
+    }
+  }
+
   /**
    * Determines if a @href value is "external" (it adds target="_blank" rel="noopener noreferrer")
    *
@@ -65,25 +87,14 @@ export default class HdsInteractive extends Component<HdsInteractiveSignature> {
     {{! IMPORTANT: we need to add "squishies" here (~) because otherwise the whitespace added by Ember becomes visible in the link (being an inline element) - See https://handlebarsjs.com/guide/expressions.html#whitespace-control }}
     {{! NOTICE: we can't support the direct use of the "href" HTML attribute via ...attributes in the <a> elements, because we need to rely on the "@href" Ember argument to differentiate between different types of generated output }}
     {{~#if @route~}}
-      {{~#if this.isRouteExternal~}}
-        <LinkToExternal
-          @current-when={{@current-when}}
-          @models={{hdsLinkToModels @model @models}}
-          @query={{hdsLinkToQuery @query}}
-          @replace={{@replace}}
-          @route={{@route}}
-          ...attributes
-        >{{yield}}</LinkToExternal>
-      {{~else~}}
-        <LinkTo
-          @current-when={{@current-when}}
-          @models={{hdsLinkToModels @model @models}}
-          @query={{hdsLinkToQuery @query}}
-          @replace={{@replace}}
-          @route={{@route}}
-          ...attributes
-        >{{yield}}</LinkTo>
-      {{~/if~}}
+      <this.linkToComponent
+        @current-when={{@current-when}}
+        @models={{hdsLinkToModels @model @models}}
+        @query={{hdsLinkToQuery @query}}
+        @replace={{@replace}}
+        @route={{@route}}
+        ...attributes
+      >{{yield}}</this.linkToComponent>
     {{~else if @href~}}
       {{~#if this.isHrefExternal~}}
         <a
diff --git a/packages/components/unpublished-development-types/global.d.ts b/packages/components/unpublished-development-types/global.d.ts
@@ -1,7 +1,6 @@
 import '@glint/environment-ember-loose';
 import '@glint/environment-ember-template-imports';
 
-import { LinkTo } from '@ember/routing';
 import { Portal, PortalTarget } from 'ember-stargate';
 
 import type HdsComponentsRegistry from '../src/template-registry';
@@ -25,7 +24,6 @@ declare module '@glint/environment-ember-loose/registry' {
       RenderModifiersRegistry,
       EmbroiderUtilRegistry /*, other addon registries */ {
     // local entries
-    LinkToExternal: typeof LinkTo;
     // we have to use `ember-stargate` version `0.4.3` because version `0.5.0` causes a break in the tests for `ember-lts-3.28`
     Portal: typeof Portal;
     PortalTarget: typeof PortalTarget;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
