Move to glint v2 & improve typescript story for @triggerHtmlTag

docs/app/components/code-block.gts

@@ -26,9 +26,3 @@ export default class CodeBlock extends Component<CodeBlockSignature> {
     </div>
   </template>
 }
-
-declare module '@glint/environment-ember-loose/registry' {
-  export default interface Registry {
-    CodeBlock: typeof CodeBlock;
-  }
-}

docs/app/components/code-inline.gts

@@ -55,9 +55,3 @@ export default class CodeInline extends Component<CodeInlineSignature> {
     </div>
   </template>
 }
-
-declare module '@glint/environment-ember-loose/registry' {
-  export default interface Registry {
-    CodeInline: typeof CodeInline;
-  }
-}

docs/app/components/snippets/custom-position-1.gts

@@ -7,7 +7,7 @@ import type {
 
 export default class extends Component {
   calculatePosition(
-    trigger: Element,
+    trigger: HTMLElement,
     content: HTMLElement,
     _destination: HTMLElement,
     { horizontalPosition, verticalPosition }: CalculatePositionOptions,

docs/app/templates/public-pages.gts

@@ -32,15 +32,15 @@ export default class extends Component {
     }
   }
 
-  setBrandColor(color: string, dropdown: BasicDropdownDefaultBlock) {
+  setBrandColor(color: string, dropdown: BasicDropdownDefaultBlock<'span'>) {
     brands.forEach((klass) => document.body.classList.remove(klass));
     document.body.classList.add(`${color}-brand`);
     dropdown.actions.close();
   }
 
   // Methods
   calculatePosition(
-    trigger: Element,
+    trigger: HTMLElement,
     content: HTMLElement,
     destination: HTMLElement,
     options: CalculatePositionOptions,

docs/config/ember-cli-update.json

@@ -12,6 +12,7 @@
           "isBaseBlueprint": true,
           "options": [
             "--no-welcome",
+            "--pnpm",
             "--typescript"
           ]
         }

docs/package.json

@@ -13,18 +13,18 @@
   "scripts": {
     "build": "vite build",
     "format": "prettier . --cache --write",
-    "lint": "concurrently \"npm:lint:*(!fix)\" --names \"lint:\" --prefixColors auto",
+    "lint": "concurrently \"pnpm:lint:*(!fix)\" --names \"lint:\" --prefixColors auto",
     "lint:css": "stylelint \"**/*.css\" --allow-empty-input",
     "lint:css:fix": "concurrently \"pnpm:lint:css -- --fix\"",
-    "lint:fix": "concurrently \"npm:lint:*:fix\" --names \"fix:\" --prefixColors auto && npm run format",
+    "lint:fix": "concurrently \"pnpm:lint:*:fix\" --names \"fix:\" --prefixColors auto && npm run format",
     "lint:format": "prettier . --cache --check",
     "lint:hbs": "ember-template-lint .",
     "lint:hbs:fix": "ember-template-lint . --fix",
     "lint:js": "eslint . --cache",
     "lint:js:fix": "eslint . --fix",
-    "lint:types": "glint",
+    "lint:types": "ember-tsc --noEmit",
     "start": "vite",
-    "test": "concurrently \"npm:lint\" \"npm:test:*\" --names \"lint,test:\" --prefixColors auto",
+    "test": "concurrently \"pnpm:lint\" \"pnpm:test:*\" --names \"lint,test:\" --prefixColors auto",
     "test:ember": "vite build --mode development && ember test --path dist"
   },
   "dependenciesMeta": {
@@ -49,10 +49,8 @@
     "@eslint/js": "^9.39.1",
     "@glimmer/component": "^2.0.0",
     "@glimmer/tracking": "^1.1.2",
-    "@glint/core": "^1.5.2",
-    "@glint/environment-ember-loose": "^1.5.2",
-    "@glint/environment-ember-template-imports": "^1.5.2",
-    "@glint/template": "1.5.2",
+    "@glint/ember-tsc": "^1.0.8",
+    "@glint/template": "^1.7.3",
     "@rollup/plugin-babel": "^6.1.0",
     "@tsconfig/ember": "^3.0.12",
     "@types/qunit": "^2.19.13",

docs/tsconfig.json

@@ -1,8 +1,5 @@
 {
   "extends": "@tsconfig/ember",
-  "glint": {
-    "environment": ["ember-loose", "ember-template-imports"]
-  },
   "compilerOptions": {
     // The combination of `baseUrl` with `paths` allows Ember's classic package
     // layout, which is not resolvable with the Node resolution algorithm, to

docs/types/global.d.ts

@@ -1,20 +1 @@
-import '@glint/environment-ember-loose';
-import type EmberBasicDropdownRegistry from 'ember-basic-dropdown/template-registry';
-
-export interface GetCodeSnippetHelperRegistry {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  [key: string]: any;
-}
-
-export interface CodeBlockRegistry {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  [key: string]: any;
-}
-
-declare module '@glint/environment-ember-loose/registry' {
-  export default interface Registry
-    extends
-      EmberBasicDropdownRegistry,
-      GetCodeSnippetHelperRegistry,
-      CodeBlockRegistry {}
-}
+import '@glint/ember-tsc/types';

ember-basic-dropdown/package.json

@@ -54,7 +54,7 @@
     "lint:hbs:fix": "ember-template-lint . --fix --no-error-on-unmatched-pattern",
     "lint:js": "eslint . --cache",
     "lint:js:fix": "eslint . --fix",
-    "lint:types": "glint",
+    "lint:types": "ember-tsc --noEmit",
     "prepack": "rollup --config",
     "start": "rollup --config --watch",
     "test": "echo 'A v2 addon does not have tests, run tests in test-app'"
@@ -78,10 +78,8 @@
     "@ember/test-helpers": "^5.4.1",
     "@embroider/addon-dev": "^8.1.2",
     "@eslint/js": "^9.39.1",
-    "@glint/core": "^1.5.2",
-    "@glint/environment-ember-loose": "^1.5.2",
-    "@glint/environment-ember-template-imports": "^1.5.2",
-    "@glint/template": "1.5.2",
+    "@glint/ember-tsc": "^1.0.8",
+    "@glint/template": "^1.7.3",
     "@glimmer/component": "^2.0.0",
     "@glimmer/tracking": "^1.1.2",
     "@rollup/plugin-babel": "^6.1.0",

ember-basic-dropdown/rollup.config.mjs

@@ -2,6 +2,11 @@ import { babel } from '@rollup/plugin-babel';
 import { Addon } from '@embroider/addon-dev/rollup';
 import sass from 'rollup-plugin-sass';
 import postcss from 'postcss';
+import { fileURLToPath } from 'node:url';
+import { resolve, dirname } from 'node:path';
+
+const rootDirectory = dirname(fileURLToPath(import.meta.url));
+const tsConfig = resolve(rootDirectory, './tsconfig.json');
 
 const addon = new Addon({
   srcDir: 'src',
@@ -91,7 +96,10 @@ export default [
       addon.gjs(),
 
       // Emit .d.ts declaration files
-      addon.declarations('declarations'),
+      addon.declarations(
+        'declarations',
+        `pnpm ember-tsc --declaration --project ${tsConfig}`,
+      ),
 
       // addons are allowed to contain imports of .css files, which we want rollup
       // to leave alone and keep in the published output.

ember-basic-dropdown/src/components/basic-dropdown-trigger.gts

@@ -1,6 +1,6 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
-import { element } from 'ember-element-helper';
+import { element, type ElementFromTagName } from 'ember-element-helper';
 import { or } from 'ember-truth-helpers';
 import { concat } from '@ember/helper';
 import basicDropdownTriggerModifier from '../modifiers/basic-dropdown-trigger.ts';
@@ -9,8 +9,10 @@ import { fn } from '@ember/helper';
 import type { Dropdown } from './basic-dropdown';
 import type { HorizontalPosition, VerticalPosition } from '../types.ts';
 
-export interface BasicDropdownTriggerSignature {
-  Element: HTMLElement;
+export interface BasicDropdownTriggerSignature<
+  T extends keyof HTMLElementTagNameMap = 'div',
+> {
+  Element: ElementFromTagName<T>;
   Args: {
     dropdown?: Dropdown;
     eventType?: 'click' | 'mousedown';
@@ -19,7 +21,7 @@ export interface BasicDropdownTriggerSignature {
     hPosition?: HorizontalPosition | null;
     defaultClass?: string;
     renderInPlace?: boolean;
-    htmlTag?: keyof HTMLElementTagNameMap | undefined;
+    htmlTag?: T | undefined;
     onBlur?: (dropdown?: Dropdown, event?: FocusEvent) => void;
     onClick?: (dropdown?: Dropdown, event?: MouseEvent) => void;
     onFocus?: (dropdown?: Dropdown, event?: FocusEvent) => void;
@@ -36,7 +38,9 @@ export interface BasicDropdownTriggerSignature {
   };
 }
 
-export default class BasicDropdownTrigger extends Component<BasicDropdownTriggerSignature> {
+export default class BasicDropdownTrigger<
+  T extends keyof HTMLElementTagNameMap,
+> extends Component<BasicDropdownTriggerSignature<T>> {
   // Actions
   /**
    * Allows similar behavior to `ember-composable-helpers`' `optional` helper.
@@ -59,9 +63,13 @@ export default class BasicDropdownTrigger extends Component<BasicDropdownTrigger
     }
   }
 
+  get tag(): keyof HTMLElementTagNameMap {
+    return this.args.htmlTag || 'div';
+  }
+
   <template>
     {{#if @dropdown}}
-      {{#let (element (or @htmlTag "div")) as |OptionalTag|}}
+      {{#let (element this.tag) as |OptionalTag|}}
         {{! template-lint-disable no-pointer-down-event-binding }}
         <OptionalTag
           class="ember-basic-dropdown-trigger

ember-basic-dropdown/src/components/basic-dropdown.gts

@@ -35,28 +35,37 @@ export type { Dropdown, DropdownActions, TRootEventType };
 const UNINITIALIZED = {};
 const IGNORED_STYLES = ['top', 'left', 'right', 'width', 'height'];
 
-export interface BasicDropdownDefaultBlock {
+export interface BasicDropdownDefaultBlock<
+  TriggerHtmlTag extends keyof HTMLElementTagNameMap = 'div',
+> {
   uniqueId: string;
   disabled: boolean;
   isOpen: boolean;
   actions: DropdownActions;
   Trigger: ComponentLike<
-    Omit<BasicDropdownTriggerSignature, 'Args'> & {
-      Args: Omit<BasicDropdownTriggerSignature['Args'], 'htmlTag'>;
+    Omit<BasicDropdownTriggerSignature<TriggerHtmlTag>, 'Args'> & {
+      Args: Omit<
+        BasicDropdownTriggerSignature<TriggerHtmlTag>['Args'],
+        'htmlTag'
+      >;
     }
   >;
   Content: ComponentLike<BasicDropdownContentSignature>;
 }
 
-export interface BasicDropdownSignature {
+export interface BasicDropdownSignature<
+  TriggerHtmlTag extends keyof HTMLElementTagNameMap = 'div',
+> {
   Element: HTMLElement;
-  Args: BasicDropdownArgs;
+  Args: BasicDropdownArgs<TriggerHtmlTag>;
   Blocks: {
-    default: [BasicDropdownDefaultBlock];
+    default: [BasicDropdownDefaultBlock<TriggerHtmlTag>];
   };
 }
 
-export interface BasicDropdownArgs {
+export interface BasicDropdownArgs<
+  TriggerHtmlTag extends keyof HTMLElementTagNameMap = 'div',
+> {
   initiallyOpened?: boolean;
   renderInPlace?: boolean;
   verticalPosition?: VerticalPosition;
@@ -68,17 +77,21 @@ export interface BasicDropdownArgs {
   rootEventType?: TRootEventType;
   preventScroll?: boolean;
   matchTriggerWidth?: boolean;
-  triggerHtmlTag?: keyof HTMLElementTagNameMap;
+  triggerHtmlTag?: TriggerHtmlTag;
   onInit?: (dropdown: Dropdown) => void;
   registerAPI?: (dropdown: Dropdown | null) => void;
   onOpen?: (dropdown: Dropdown, e?: Event) => boolean | void;
   onClose?: (dropdown: Dropdown, e?: Event) => boolean | void;
-  triggerComponent?: ComponentLike<BasicDropdownTriggerSignature> | undefined;
+  triggerComponent?:
+    | ComponentLike<BasicDropdownTriggerSignature<TriggerHtmlTag>>
+    | undefined;
   contentComponent?: ComponentLike<BasicDropdownContentSignature> | undefined;
   calculatePosition?: CalculatePosition;
 }
 
-export default class BasicDropdown extends Component<BasicDropdownSignature> {
+export default class BasicDropdown<
+  TriggerHtmlTag extends keyof HTMLElementTagNameMap = 'div',
+> extends Component<BasicDropdownSignature<TriggerHtmlTag>> {
   @tracked hPosition: HorizontalPosition | null = null;
   @tracked vPosition: VerticalPosition | null = null;
   @tracked top: string | undefined;
@@ -176,7 +189,7 @@ export default class BasicDropdown extends Component<BasicDropdownSignature> {
   }
 
   // Lifecycle hooks
-  constructor(owner: Owner, args: BasicDropdownArgs) {
+  constructor(owner: Owner, args: BasicDropdownArgs<TriggerHtmlTag>) {
     super(owner, args);
     if (this.args.onInit) {
       this.args.onInit(this.publicAPI);
@@ -495,10 +508,14 @@ export default class BasicDropdown extends Component<BasicDropdownSignature> {
     );
   }
 
-  get triggerComponent(): ComponentLike<BasicDropdownTriggerSignature> {
+  get triggerComponent(): ComponentLike<
+    BasicDropdownTriggerSignature<TriggerHtmlTag>
+  > {
     return (
       this.args.triggerComponent ||
-      (BasicDropdownTrigger as ComponentLike<BasicDropdownTriggerSignature>)
+      (BasicDropdownTrigger as ComponentLike<
+        BasicDropdownTriggerSignature<TriggerHtmlTag>
+      >)
     );
   }
 

ember-basic-dropdown/src/types/global.d.ts

@@ -1,23 +1 @@
-import '@glint/environment-ember-loose';
-
-import type EmberTruthRegistry from 'ember-truth-helpers/template-registry';
-import type EmberElementHelperRegistry from 'ember-element-helper/template-registry';
-
-// export interface StyleHelperRegistry {
-//   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-//   [key: string]: any;
-// }
-
-// export interface ReadonlyRegistry {
-//   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-//   [key: string]: any;
-// }
-
-declare module '@glint/environment-ember-loose/registry' {
-  export default interface Registry
-    extends
-      EmberTruthRegistry,
-      EmberElementHelperRegistry /* other registries here */ {
-    // ...
-  }
-}
+import '@glint/ember-tsc/types';