Move to glint v2 & improve typescript story (#1030)

* Move to glint v2

* Fix lint

* Add triggerHtmlTag to resolve glint issue, fix triggerElement type in calculate Position

* Fix lint

* Fix lint

* Fix lint / ember-cli-update in docs

Author: mkszepp

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.