setup Glint

.eslintrc.js

@@ -26,6 +26,11 @@ module.exports = {
       ],
       rules: {},
     },
+    // Glimmer TS and JS
+    {
+      files: ['**/*.gts', '**/*.gjs'],
+      parser: 'ember-eslint-parser',
+    },
     // node files
     {
       files: [

.prettierrc.js

@@ -1,9 +1,10 @@
 'use strict';
 
 module.exports = {
+  plugins: ['prettier-plugin-ember-template-tag'],
   overrides: [
     {
-      files: '*.{js,ts}',
+      files: '*.{js,ts,gjs,gts}',
       options: {
         singleQuote: true,
       },

addon/modifiers/style.ts

@@ -3,6 +3,11 @@ import { dasherize } from '@ember/string';
 import { assert } from '@ember/debug';
 import { typeOf } from '@ember/utils';
 
+// Typing as `Partial<CSSStyleDeclaration>` does not work as some CSS property
+// names used in our tests (e.g. `font-size`) does not exist on CSStyleDeclaration.
+// Should investigate later why that's the case.
+type CSSStyles = { [key: string]: string | undefined };
+
 function isObject(o: unknown): boolean {
   return typeof o === 'object' && Boolean(o);
 }
@@ -21,8 +26,8 @@ function isObject(o: unknown): boolean {
  * This data structure is slightly faster to process than an object / dictionary.
  */
 function compileStyles(
-  positional: CSSStyleDeclaration[],
-  named: CSSStyleDeclaration,
+  positional: CSSStyles[],
+  named: CSSStyles,
 ): [string, string][] {
   return [...positional.filter(isObject), named]
     .map((obj) =>
@@ -36,8 +41,8 @@ function compileStyles(
 export interface StyleModifierSignature {
   Element: HTMLElement;
   Args: {
-    Positional: CSSStyleDeclaration[];
-    Named: CSSStyleDeclaration;
+    Positional: CSSStyles[];
+    Named: CSSStyles;
   };
 }
 
@@ -82,11 +87,7 @@ export default class StyleModifier extends Modifier<StyleModifierSignature> {
     rulesToRemove.forEach((rule) => element.style.removeProperty(rule));
   }
 
-  modify(
-    element: HTMLElement,
-    positional: [CSSStyleDeclaration] | [],
-    named: CSSStyleDeclaration,
-  ) {
+  modify(element: HTMLElement, positional: [CSSStyles] | [], named: CSSStyles) {
     this.setStyles(element, compileStyles(positional, named));
   }
 }

addon/template-registry.ts

@@ -0,0 +1,5 @@
+import type StyleModifier from './modifiers/style';
+
+export default interface EmberStyleModifierRegistry {
+  style: typeof StyleModifier;
+}

package.json

@@ -37,7 +37,7 @@
     "lint:hbs:fix": "ember-template-lint . --fix",
     "lint:js": "eslint . --cache",
     "lint:js:fix": "eslint . --fix",
-    "lint:types": "tsc --noEmit",
+    "lint:types": "glint",
     "prepack": "tsc --project tsconfig.declarations.json",
     "postpack": "rimraf declarations",
     "release": "release-it",
@@ -59,8 +59,10 @@
     "@embroider/test-setup": "^3.0.3",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
-    "@glint/environment-ember-loose": "^1.2.1",
-    "@glint/template": "^1.2.1",
+    "@glint/core": "^1.2.2",
+    "@glint/environment-ember-loose": "^1.2.2",
+    "@glint/environment-ember-template-imports": "^1.2.2",
+    "@glint/template": "^1.2.2",
     "@tsconfig/ember": "^3.0.2",
     "@types/ember": "^4.0.10",
     "@types/ember__application": "^4.0.10",
@@ -98,12 +100,14 @@
     "ember-cli-inject-live-reload": "^2.1.0",
     "ember-cli-sri": "^2.1.1",
     "ember-cli-terser": "^4.0.2",
+    "ember-eslint-parser": "^0.2.5",
     "ember-load-initializers": "^2.1.2",
     "ember-page-title": "^8.1.0",
     "ember-qunit": "^7.0.0",
     "ember-resolver": "^11.0.1",
     "ember-source": "~5.5.0",
     "ember-source-channel-url": "^3.0.0",
+    "ember-template-imports": "^4.0.0",
     "ember-template-lint": "^5.13.0",
     "ember-try": "^3.0.0",
     "ember-welcome-page": "^7.0.2",
@@ -115,6 +119,7 @@
     "eslint-plugin-qunit": "^8.0.1",
     "loader.js": "^4.7.0",
     "prettier": "^3.1.1",
+    "prettier-plugin-ember-template-tag": "^2.0.0",
     "qunit": "^2.20.0",
     "qunit-dom": "^3.0.0",
     "release-it": "^16.0.0",