TS conversion

Co-authored-by: Charles Fries <[email protected]>

addon/src/helpers/breadcrumb.ts

@@ -0,0 +1,50 @@
+import Helper from '@ember/component/helper';
+import { inject as service } from '@ember/service';
+import type BreadcrumbsService from '../services/breadcrumbs';
+
+type TitleParts = [title: string];
+type OptionalData = Record<string, unknown>;
+
+export interface BreadcrumbHelperSignature {
+  Args: {
+    Positional: TitleParts;
+    Named: OptionalData;
+  };
+  Return: void;
+}
+
+export default class BreadcrumbHelper extends Helper<BreadcrumbHelperSignature> {
+  @service('breadcrumbs') declare breadcrumbsService: BreadcrumbsService;
+
+  breadcrumbId: string | null = null;
+
+  get breadcrumbWasAddedBefore() {
+    return !!this.breadcrumbId;
+  }
+
+  compute(breadcrumbTitleParts: TitleParts, optionalData: OptionalData) {
+    const breadcrumbTitle = breadcrumbTitleParts.join('');
+
+    const breadcrumbData = {
+      data: optionalData,
+      title: breadcrumbTitle,
+    };
+
+    if (this.breadcrumbWasAddedBefore) {
+      this.breadcrumbsService.updateBreadcrumb(
+        this.breadcrumbId!,
+        breadcrumbData,
+      );
+    } else {
+      this.breadcrumbId = this.breadcrumbsService.addBreadcrumb(breadcrumbData);
+    }
+  }
+
+  willDestroy() {
+    super.willDestroy();
+
+    if (this.breadcrumbWasAddedBefore) {
+      this.breadcrumbsService.removeBreadcrumb(this.breadcrumbId!);
+    }
+  }
+}

addon/src/helpers/breadcrumbs.ts

@@ -0,0 +1,20 @@
+import Helper from '@ember/component/helper';
+import { inject as service } from '@ember/service';
+import type BreadcrumbsService from '../services/breadcrumbs';
+
+type BreadcrumbData = {
+  title: string;
+  data: Record<string, unknown>;
+};
+
+export interface BreadcrumbsHelperSignature {
+  Return: BreadcrumbData[];
+}
+
+export default class BreadcrumbsHelper extends Helper<BreadcrumbsHelperSignature> {
+  @service('breadcrumbs') declare breadcrumbsService: BreadcrumbsService;
+
+  compute() {
+    return this.breadcrumbsService.items;
+  }
+}

addon/src/index.ts

@@ -0,0 +1,3 @@
+// For some reason these imports make the build fail
+// export { default as breadcrumb } from './helpers/breadcrumb';
+// export { default as breadcrumbs } from './helpers/breadcrumbs';

addon/src/services/breadcrumbs.ts

@@ -0,0 +1,65 @@
+import { guidFor } from '@ember/object/internals';
+import { scheduleOnce, next } from '@ember/runloop';
+import Service from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+
+type BreadcrumbId = string;
+type BreadcrumbData = {
+  title: string;
+  data: Record<string, unknown>;
+};
+
+export default class BreadcrumbsService extends Service {
+  @tracked breadcrumbData: Map<BreadcrumbId, BreadcrumbData> = new Map();
+  pendingBreadcrumbData: Map<BreadcrumbId, BreadcrumbData> | null = null;
+  didForceRerender: boolean = false;
+
+  get items() {
+    return [...this.breadcrumbData.values()];
+  }
+
+  addBreadcrumb(breadcrumbData: BreadcrumbData): string {
+    this.scheduleDataUpdate();
+
+    const uniqueId = generateUniqueId();
+    this.pendingBreadcrumbData?.set(uniqueId, breadcrumbData);
+    return uniqueId;
+  }
+
+  updateBreadcrumb(uniqueId: BreadcrumbId, breadcrumbData: BreadcrumbData) {
+    if (!this.didForceRerender) {
+      this.scheduleDataUpdate();
+      this.pendingBreadcrumbData?.set(uniqueId, breadcrumbData);
+    }
+  }
+
+  removeBreadcrumb(uniqueId: BreadcrumbId): void {
+    this.scheduleDataUpdate();
+    this.pendingBreadcrumbData?.delete(uniqueId);
+  }
+
+  scheduleDataUpdate(): void {
+    if (!this.pendingBreadcrumbData) {
+      this.pendingBreadcrumbData = new Map(this.breadcrumbData);
+    }
+
+    scheduleOnce('afterRender', this, this.updateBreadcrumbData);
+  }
+
+  updateBreadcrumbData(): void {
+    this.didForceRerender = true;
+
+    this.breadcrumbData = this.pendingBreadcrumbData!;
+    this.pendingBreadcrumbData = null;
+
+    next(this, this.resetRerenderFlag);
+  }
+
+  resetRerenderFlag(): void {
+    this.didForceRerender = false;
+  }
+}
+
+function generateUniqueId(): string {
+  return guidFor({});
+}

addon/src/template-registry.ts

@@ -2,10 +2,11 @@
 // Add all your components, helpers and modifiers to the template registry here, so apps don't have to do this.
 // See https://typed-ember.gitbook.io/glint/environments/ember/authoring-addons
 
-// import type MyComponent from './components/my-component';
+// import type { breadcrumb, breadcrumbs } from './index';
+import type breadcrumb from './helpers/breadcrumb';
+import type breadcrumbs from './helpers/breadcrumbs';
 
-// Remove this once entries have been added! 👇
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
 export default interface Registry {
-  // MyComponent: typeof MyComponent
+  breadcrumb: typeof breadcrumb;
+  breadcrumbs: typeof breadcrumbs;
 }