cleaning up the component

Author: zamoore

packages/components/src/components/hds/icon/index.ts

@@ -19,7 +19,7 @@ import type { SafeString } from '@ember/template';
 import type { IconName } from '@hashicorp/flight-icons/svg';
 import type {
   HdsIconModule,
-  HdsIconName,
+  HdsIconRegistryEntry,
 } from '@hashicorp/flight-icons/symbol-js/registry.ts';
 import type { HdsIconSizes, HdsIconColors } from './types';
 import type HdsCarbonService from '../../../services/hds-carbon.ts';
@@ -44,8 +44,6 @@ export default class HdsIcon extends Component<HdsIconSignature> {
   @service declare readonly hdsCarbon: HdsCarbonService;
 
   @tracked iconModule: HdsIconModule | null = null;
-  @tracked _hasCarbonEquivalent = false;
-  @tracked _isCarbon = false;
 
   private _iconId = 'icon-' + guidFor(this);
   private _titleId = 'title-' + guidFor(this);
@@ -58,10 +56,11 @@ export default class HdsIcon extends Component<HdsIconSignature> {
       {
         name,
         size,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         carbonModeEnabled,
       }: { name: IconName; size: HdsIconSizes; carbonModeEnabled: boolean }
     ) => {
-      void this.loadIconModuleTask.perform(name, size, carbonModeEnabled);
+      void this.loadIconModuleTask.perform(name, size);
     }
   );
 
@@ -76,6 +75,26 @@ export default class HdsIcon extends Component<HdsIconSignature> {
     return name;
   }
 
+  get registryEntry(): HdsIconRegistryEntry | undefined {
+    const { name, size } = this.args;
+    const registryEntry = IconRegistry[this.name];
+
+    assert(
+      `The icon @name "${name}" or @size "${size}" provided to <Hds::Icon> is not correct.`,
+      registryEntry !== undefined
+    );
+
+    return IconRegistry[this.name];
+  }
+
+  get hasCarbonEquivalent(): boolean {
+    return this.registryEntry?.carbon !== null;
+  }
+
+  get isCarbon(): boolean {
+    return this.hdsCarbon.carbonModeEnabled && this.hasCarbonEquivalent;
+  }
+
   get svgSymbol(): SafeString | undefined {
     if (this.iconModule === null) {
       return undefined;
@@ -135,14 +154,6 @@ export default class HdsIcon extends Component<HdsIconSignature> {
     return this.args.title ? this._titleId : null;
   }
 
-  get hasCarbonEquivalent(): boolean {
-    return this._hasCarbonEquivalent;
-  }
-
-  get isCarbon(): boolean {
-    return this._isCarbon;
-  }
-
   get classNames() {
     const { name } = this.args;
     const classes = ['hds-icon'];
@@ -168,43 +179,26 @@ export default class HdsIcon extends Component<HdsIconSignature> {
   }
 
   get viewBox(): string {
-    const { name } = this.args;
-    const registryEntry = IconRegistry[name as HdsIconName];
-
-    if (this.hdsCarbon.carbonModeEnabled && registryEntry?.carbon) {
+    if (this.isCarbon) {
       return '0 0 32 32';
     }
 
     return `0 0 ${this.size} ${this.size}`;
   }
 
   loadIconModuleTask = task(
-    async (
-      name: IconName,
-      size: HdsIconSizes,
-      carbonModeEnabled: boolean
-    ): Promise<void> => {
-      const registryEntry = IconRegistry[name as HdsIconName];
-
-      assert(
-        `The icon @name "${name}" or @size "${size}" provided to <Hds::Icon> is not correct.`,
-        registryEntry !== undefined
-      );
-
-      this._hasCarbonEquivalent = registryEntry.carbon !== null;
-
-      const shouldUseCarbon = carbonModeEnabled && this._hasCarbonEquivalent;
-
-      const loader = shouldUseCarbon
-        ? registryEntry.carbon
-        : registryEntry.flight[size];
-
-      if (loader) {
-        this.iconModule = await loader();
-        this._isCarbon = shouldUseCarbon;
-      } else {
-        assert(`Size "${size}" not found for icon "${name}"`);
+    async (name: IconName, size: HdsIconSizes): Promise<void> => {
+      let loader = this.registryEntry?.flight[size];
+      let loaderAssertDesc = `Flight icon not available for "${name}" with size "${size}".`;
+
+      if (this.isCarbon) {
+        loader = this.registryEntry?.carbon ?? undefined;
+        loaderAssertDesc = `Carbon icon not available for "${name}".`;
       }
+
+      assert(loaderAssertDesc, loader !== undefined);
+
+      this.iconModule = await loader();
     }
   );
 }

packages/flight-icons/scripts/build-parts/generateBundleSymbolJS.ts

@@ -118,6 +118,8 @@ export async function generateBundleSymbolJS({ config, catalog }: { config: Conf
     await fs.writeFile(`${outputFolder}/registry.js`, registryJsContent);
 
     const registryDtsContent = await prettier.format(`
+        import type { IconName } from '../svg';
+
         export interface HdsIconModule {
             default: (id: string) => string;
         }
@@ -129,9 +131,7 @@ export async function generateBundleSymbolJS({ config, catalog }: { config: Conf
             carbon: (() => Promise<HdsIconModule>) | null;
         }
 
-        export declare const IconRegistry: Record<string, HdsIconRegistryEntry>;
-        
-        export type HdsIconName = keyof typeof IconRegistry;
+        export declare const IconRegistry: Record<IconName, HdsIconRegistryEntry>;
     `, { ...prettierConfig, parser: 'typescript' });
 
     await fs.writeFile(`${outputFolder}/registry.d.ts`, registryDtsContent);

packages/flight-icons/symbol-js/registry.d.ts

@@ -1,3 +1,5 @@
+import type { IconName } from '../svg';
+
 export interface HdsIconModule {
     default: (id: string) => string;
 }
@@ -9,6 +11,4 @@ export interface HdsIconRegistryEntry {
     carbon: (() => Promise<HdsIconModule>) | null;
 }
 
-export declare const IconRegistry: Record<string, HdsIconRegistryEntry>;
-
-export type HdsIconName = keyof typeof IconRegistry;
+export declare const IconRegistry: Record<IconName, HdsIconRegistryEntry>;