Convert to TypeScript (#878)

* Convert to TypeScript

* Install types packages

* Mv

* Install typescript, fix eslint

* Remove @babel/plugin-proposal-decorators

* Cleanup

* Install glint locally

* Lock

* Lint

* Add prismjs-glimmer local types

Author: charlesfries

.eslintrc.js

@@ -2,18 +2,11 @@
 
 module.exports = {
   root: true,
-  parser: '@babel/eslint-parser',
+  parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaVersion: 'latest',
-    sourceType: 'module',
-    requireConfigFile: false,
-    babelOptions: {
-      plugins: [
-        ['@babel/plugin-proposal-decorators', { decoratorsBeforeExport: true }],
-      ],
-    },
   },
-  plugins: ['ember'],
+  plugins: ['ember', '@typescript-eslint'],
   extends: [
     'eslint:recommended',
     'plugin:ember/recommended',
@@ -24,6 +17,15 @@ module.exports = {
   },
   rules: {},
   overrides: [
+    // ts files
+    {
+      files: ['**/*.ts'],
+      extends: [
+        'plugin:@typescript-eslint/eslint-recommended',
+        'plugin:@typescript-eslint/recommended',
+      ],
+      rules: {},
+    },
     // node files
     {
       files: [

addon/components/code-block.js

@@ -0,0 +1,27 @@
+import Component from '@glimmer/component';
+
+interface CodeBlockSignature {
+  Args: {
+    code: string;
+    language?: string;
+    showLineNumbers?: boolean;
+    start?: string;
+  };
+  Element: HTMLElement;
+}
+
+export default class CodeBlockComponent extends Component<CodeBlockSignature> {
+  get language() {
+    return this.args.language ?? 'markup';
+  }
+
+  get languageClass() {
+    return `language-${this.language}`;
+  }
+}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    CodeBlock: typeof CodeBlockComponent;
+  }
+}

addon/components/code-block.ts

@@ -1,12 +1,22 @@
-/* global Prism */
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
-import { htmlSafe } from '@ember/template';
+import { htmlSafe, type SafeString } from '@ember/template';
 import { tracked } from '@glimmer/tracking';
 import { assert } from '@ember/debug';
 
-export default class CodeInlineComponent extends Component {
-  @tracked prismCode = '';
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+declare const Prism: any;
+
+interface CodeInlineSignature {
+  Args: {
+    code: string;
+    language?: string;
+  };
+  Element: HTMLElement;
+}
+
+export default class CodeInlineComponent extends Component<CodeInlineSignature> {
+  @tracked prismCode: string | SafeString = '';
 
   get code() {
     const code = this.args.code;
@@ -31,7 +41,7 @@ export default class CodeInlineComponent extends Component {
   }
 
   @action
-  setPrismCode(element) {
+  setPrismCode(element: Element) {
     const code = this.code;
     const language = this.language;
     const grammar = Prism.languages[language];
@@ -50,3 +60,9 @@ export default class CodeInlineComponent extends Component {
     });
   }
 }
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    CodeInline: typeof CodeInlineComponent;
+  }
+}

addon/components/code-inline.js addon/components/code-inline.tsaddon/components/code-inline.js renamed to addon/components/code-inline.ts

@@ -1,6 +1,8 @@
-/* globals Prism */
 import { setup as glimmer } from 'prismjs-glimmer';
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+declare const Prism: any;
+
 export function setup() {
   glimmer(Prism);
 

addon/index.js addon/index.tsaddon/index.js renamed to addon/index.ts

@@ -0,0 +1,7 @@
+import type CodeBlock from './components/code-block';
+import type CodeInline from './components/code-inline';
+
+export default interface Registry {
+  CodeBlock: typeof CodeBlock;
+  CodeInline: typeof CodeInline;
+}

addon/template-registry.ts

@@ -4,6 +4,7 @@ const EmberAddon = require('ember-cli/lib/broccoli/ember-addon');
 
 module.exports = function (defaults) {
   let app = new EmberAddon(defaults, {
+    'ember-cli-babel': { enableTypeScriptTransform: true },
     'ember-prism': {
       components: ['handlebars', 'markup', 'markup-templating'],
       plugins: ['line-numbers'],

ember-cli-build.js

@@ -60,6 +60,7 @@ module.exports = {
     this._super.included.apply(this, arguments);
   },
   options: {
+    'ember-cli-babel': { enableTypeScriptTransform: true },
     nodeAssets: {
       prismjs() {
         return {

index.js

@@ -19,6 +19,21 @@
       "url": "https://github.com/rwwagner90"
     }
   ],
+  "typesVersions": {
+    "*": {
+      "test-support": [
+        "declarations/addon-test-support/index.d.ts"
+      ],
+      "test-support/*": [
+        "declarations/addon-test-support/*",
+        "declarations/addon-test-support/*/index.d.ts"
+      ],
+      "*": [
+        "declarations/addon/*",
+        "declarations/addon/*/index.d.ts"
+      ]
+    }
+  },
   "directories": {
     "doc": "doc",
     "test": "tests"
@@ -33,6 +48,9 @@
     "lint:hbs:fix": "ember-template-lint . --fix",
     "lint:js": "eslint . --cache",
     "lint:js:fix": "eslint . --fix",
+    "lint:types": "tsc --noEmit",
+    "prepack": "tsc --project tsconfig.declarations.json",
+    "postpack": "rimraf declarations",
     "start": "ember serve",
     "test": "concurrently \"npm:lint\" \"npm:test:*\" --names \"lint,test:\"",
     "test:ember": "ember test",
@@ -49,13 +67,41 @@
     "prismjs-glimmer": "^1.1.1"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.23.3",
-    "@babel/plugin-proposal-decorators": "^7.23.7",
     "@ember/optional-features": "^2.0.0",
     "@ember/test-helpers": "^3.2.1",
     "@embroider/test-setup": "^3.0.3",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
+    "@glint/core": "^1.3.0",
+    "@glint/environment-ember-loose": "^1.2.1",
+    "@glint/template": "^1.2.1",
+    "@tsconfig/ember": "^3.0.3",
+    "@types/ember": "^4.0.10",
+    "@types/ember__application": "^4.0.10",
+    "@types/ember__array": "^4.0.9",
+    "@types/ember__component": "^4.0.21",
+    "@types/ember__controller": "^4.0.11",
+    "@types/ember__debug": "^4.0.7",
+    "@types/ember__destroyable": "^4.0.4",
+    "@types/ember__engine": "^4.0.10",
+    "@types/ember__error": "^4.0.5",
+    "@types/ember__helper": "^4.0.5",
+    "@types/ember__modifier": "^4.0.8",
+    "@types/ember__object": "^4.0.11",
+    "@types/ember__owner": "^4.0.8",
+    "@types/ember__polyfills": "^4.0.5",
+    "@types/ember__routing": "^4.0.19",
+    "@types/ember__runloop": "^4.0.8",
+    "@types/ember__service": "^4.0.8",
+    "@types/ember__string": "^3.16.3",
+    "@types/ember__template": "^4.0.5",
+    "@types/ember__test": "^4.0.5",
+    "@types/ember__utils": "^4.0.6",
+    "@types/htmlbars-inline-precompile": "^3.0.3",
+    "@types/qunit": "^2.19.9",
+    "@types/rsvp": "^4.0.8",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
     "broccoli-asset-rev": "^3.0.0",
     "concurrently": "^8.2.2",
     "ember-cli": "~5.6.0",
@@ -87,6 +133,7 @@
     "stylelint": "^15.11.0",
     "stylelint-config-standard": "^34.0.0",
     "stylelint-prettier": "^4.1.0",
+    "typescript": "^5.3.3",
     "webpack": "^5.89.0"
   },
   "peerDependencies": {