Merge pull request #627 from buschtoens/enbale-typescript

Enable TypeScript support in addon and test-app

.editorconfig

@@ -0,0 +1,19 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+[*]
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+
+[*.hbs]
+insert_final_newline = false
+
+[*.{diff,md}]
+trim_trailing_whitespace = false

.github/workflows/ci.yml

@@ -83,5 +83,5 @@ jobs:
       - name: Install Dependencies
         run: pnpm install --frozen-lockfile
       - name: Run Tests
-        run: ./node_modules/.bin/ember try:one ${{ matrix.try-scenario }}
+        run: ./node_modules/.bin/ember try:one ${{ matrix.try-scenario }} --skip-cleanup
         working-directory: test-app

.github/workflows/push-dist.yml

@@ -4,11 +4,13 @@
 # This workflow brings back that capability by placing the compiled assets on a "dist" branch
 # (configurable via the "branch" option below)
 name: Push dist
+
 on:
   push:
     branches:
       - main
       - master
+
 jobs:
   push-dist:
     name: Push dist

.gitignore

@@ -3,9 +3,14 @@
 # dependencies
 /node_modules/
 
+# misc
+.pnpm-debug.log
+
 # ember-try
 /.node_modules.ember-try/
 /npm-shrinkwrap.json.ember-try
 /package.json.ember-try
 /package-lock.json.ember-try
 /yarn.lock.ember-try
+/pnpm-lock.ember-try.yaml
+

CONTRIBUTING.md

@@ -11,6 +11,11 @@
 - `pnpm lint`
 - `pnpm lint:fix`
 
+## Building the addon
+
+- `cd ember-lazy-mount`
+- `pnpm build`
+
 ## Running tests
 
 - `cd ember-lazy-mount && pnpm start` – Builds the addon in "watch mode" so changes picked up by test app.
@@ -25,4 +30,5 @@ During development, if you'd like test app to pick up changes in the addon, make
 
 - `cd test-app && ember serve`
 - Visit the test application at [http://localhost:4200](http://localhost:4200).
-  For more information on using ember-cli, visit [https://cli.emberjs.com/release/](https://cli.emberjs.com/release/).
+
+For more information on using ember-cli, visit [https://cli.emberjs.com/release/](https://cli.emberjs.com/release/).

config/ember-cli-update.json

@@ -0,0 +1,22 @@
+{
+  "schemaVersion": "1.0.0",
+  "projectName": "ember-lazy-mount",
+  "packages": [
+    {
+      "name": "@embroider/addon-blueprint",
+      "version": "2.17.0",
+      "blueprints": [
+        {
+          "name": "@embroider/addon-blueprint",
+          "isBaseBlueprint": true,
+          "options": [
+            "--ci-provider=github",
+            "--pnpm",
+            "--release-it",
+            "--typescript"
+          ]
+        }
+      ]
+    }
+  ]
+}

ember-lazy-mount/.eslintrc.cjs

@@ -6,15 +6,11 @@ module.exports = {
   // https://github.com/ember-cli/eslint-plugin-ember?tab=readme-ov-file#gtsgjs
   overrides: [
     {
-      files: ['**/*.js'],
+      files: ['**/*.js', '**/*.ts'],
       env: { browser: true },
-      parser: '@babel/eslint-parser',
+      parser: '@typescript-eslint/parser',
       parserOptions: {
         ecmaVersion: 'latest',
-        sourceType: 'module',
-        babelOptions: {
-          root: __dirname,
-        },
       },
       plugins: ['ember', 'import'],
       extends: [
@@ -28,6 +24,40 @@ module.exports = {
         // Add any custom rules here
       },
     },
+    // ts files
+    {
+      files: ['**/*.ts'],
+      extends: [
+        'eslint:recommended',
+        'plugin:ember/recommended',
+        'plugin:@typescript-eslint/eslint-recommended',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:prettier/recommended',
+      ],
+      rules: {
+        // require relative imports use full extensions
+        'import/extensions': ['error', 'always', { ignorePackages: true }],
+        // Add any custom rules here
+      },
+    },
+    {
+      files: ['**/*.gts'],
+      parser: 'ember-eslint-parser',
+      plugins: ['ember', 'import'],
+      extends: [
+        'eslint:recommended',
+        'plugin:@typescript-eslint/eslint-recommended',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:ember/recommended',
+        'plugin:ember/recommended-gts',
+        'plugin:prettier/recommended',
+      ],
+      rules: {
+        // require relative imports use full extensions
+        'import/extensions': ['error', 'always', { ignorePackages: true }],
+        // Add any custom rules here
+      },
+    },
     {
       files: ['**/*.gjs'],
       parser: 'ember-eslint-parser',

ember-lazy-mount/.gitignore

@@ -1,25 +1,17 @@
-# compiled output
-/dist/
-/declarations/
-
-# dependencies
-/node_modules/
+# The authoritative copies of these live in the monorepo root (because they're
+# more useful on github that way), but the build copies them into here so they
+# will also appear in published NPM packages.
+/README.md
+/LICENSE.md
 
-# misc
-/.env*
-/.pnp*
-/.eslintcache
-/coverage/
-/npm-debug.log*
-/testem.log
-/yarn-error.log
+# compiled output
+dist/
+declarations/
 
-# ember-try
-/.node_modules.ember-try/
-/npm-shrinkwrap.json.ember-try
-/package.json.ember-try
-/package-lock.json.ember-try
-/yarn.lock.ember-try
+# npm/pnpm/yarn pack output
+*.tgz
 
-# broccoli-debug
-/DEBUG/
+# deps & caches
+node_modules/
+.eslintcache
+.prettiercache

ember-lazy-mount/babel.config.json

@@ -1,5 +1,10 @@
 {
   "plugins": [
+    ["@babel/plugin-transform-typescript", {
+      "allExtensions": true,
+      "onlyRemoveTypeImports": true,
+      "allowDeclareFields": true
+    }],
     "@embroider/addon-dev/template-colocation-plugin",
     ["babel-plugin-ember-template-compilation", {
       "targetFormat": "hbs",

ember-lazy-mount/package.json

@@ -12,22 +12,45 @@
   "repository": "buschtoens/ember-lazy-mount",
   "license": "MIT",
   "author": "Jan Buschtöns <jan@buschtoens.me> (https://jan.buschtoens.me)",
+  "exports": {
+    ".": {
+      "types": "./declarations/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./*": {
+      "types": "./declarations/*.d.ts",
+      "default": "./dist/*.js"
+    },
+    "./addon-main.js": "./addon-main.cjs"
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "declarations/*"
+      ]
+    }
+  },
   "files": [
     "addon-main.cjs",
     "declarations",
     "dist"
   ],
   "scripts": {
-    "build": "rollup --config",
+    "build": "concurrently 'pnpm:build:*'",
+    "build:js": "rollup --config",
+    "build:types": "glint --declaration",
     "lint": "concurrently 'pnpm:lint:*(!fix)' --names 'lint:'",
     "lint:fix": "concurrently 'pnpm:lint:*:fix' --names 'fix:'",
     "lint:hbs": "ember-template-lint . --no-error-on-unmatched-pattern",
-    "lint:js": "eslint . --cache",
     "lint:hbs:fix": "ember-template-lint . --fix --no-error-on-unmatched-pattern",
+    "lint:js": "eslint . --cache",
     "lint:js:fix": "eslint . --fix",
-    "start": "rollup --config --watch",
-    "test": "echo 'A v2 addon does not have tests, run tests in test-app'",
-    "prepack": "rollup --config"
+    "lint:types": "glint",
+    "prepack": "concurrently 'pnpm:build:*'",
+    "start": "concurrently 'pnpm:start:*'",
+    "start:js": "rollup --config --watch --no-watch.clearScreen",
+    "start:types": "glint --declaration --watch",
+    "test": "echo 'A v2 addon does not have tests, run tests in test-app'"
   },
   "dependencies": {
     "@ember/test-waiters": "^3.1.0",
@@ -36,10 +59,19 @@
   },
   "devDependencies": {
     "@babel/core": "^7.24.7",
+    "@babel/plugin-transform-typescript": "^7.24.4",
     "@babel/eslint-parser": "^7.24.7",
     "@babel/runtime": "^7.24.7",
     "@embroider/addon-dev": "^5.0.0",
+    "@glimmer/component": "^1.1.2",
+    "@glint/core": "^1.4.0",
+    "@glint/environment-ember-loose": "^1.4.0",
+    "@glint/environment-ember-template-imports": "^1.4.0",
+    "@glint/template": "^1.4.0",
     "@rollup/plugin-babel": "^6.0.4",
+    "@tsconfig/ember": "^3.0.6",
+    "@typescript-eslint/eslint-plugin": "^7.7.1",
+    "@typescript-eslint/parser": "^7.7.1",
     "babel-plugin-ember-template-compilation": "^2.2.5",
     "concurrently": "^8.2.2",
     "ember-template-lint": "^6.0.0",
@@ -51,7 +83,8 @@
     "eslint-plugin-prettier": "^5.1.3",
     "prettier": "^3.3.2",
     "prettier-plugin-ember-template-tag": "^2.0.2",
-    "rollup": "^4.18.1"
+    "rollup": "^4.18.1",
+    "typescript": "^5.5.3"
   },
   "peerDependencies": {
     "ember-source": "^4.12.0 || >= 5"
@@ -71,11 +104,6 @@
       "./services/engine-loader.js": "./dist/_app_/services/engine-loader.js"
     }
   },
-  "exports": {
-    ".": "./dist/index.js",
-    "./*": "./dist/*.js",
-    "./addon-main.js": "./addon-main.cjs"
-  },
   "volta": {
     "extends": "../package.json"
   }

ember-lazy-mount/rollup.config.mjs

@@ -11,8 +11,6 @@ export default {
   // You can augment this if you need to.
   output: addon.output(),
 
-  external: ['require'],
-
   plugins: [
     // These are the modules that users should be able to import from your
     // addon. Anything not listed here may get optimized away.
@@ -21,7 +19,7 @@ export default {
     // up your addon's public API. Also make sure your package.json#exports
     // is aligned to the config here.
     // See https://github.com/embroider-build/embroider/blob/main/docs/v2-faq.md#how-can-i-define-the-public-exports-of-my-addon
-    addon.publicEntrypoints(['**/*.js', 'index.js']),
+    addon.publicEntrypoints(['**/*.js', 'index.js', 'template-registry.js']),
 
     // These are the modules that should get reexported into the traditional
     // "app" tree. Things in here should also be in publicEntrypoints above, but
@@ -45,7 +43,7 @@ export default {
     // By default, this will load the actual babel config from the file
     // babel.config.json.
     babel({
-      extensions: ['.js', '.gjs'],
+      extensions: ['.js', '.gjs', '.ts', '.gts'],
       babelHelpers: 'bundled',
     }),
 

ember-lazy-mount/src/template-registry.ts

@@ -0,0 +1,11 @@
+// Easily allow apps, which are not yet using strict mode templates, to consume your Glint types, by importing this file.
+// 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';
+
+// Remove this once entries have been added! 👇
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export default interface Registry {
+  // MyComponent: typeof MyComponent
+}

ember-lazy-mount/tsconfig.json

@@ -0,0 +1,53 @@
+{
+  "extends": "@tsconfig/ember/tsconfig.json",
+  "include": [
+    "src/**/*",
+    "unpublished-development-types/**/*"
+  ],
+  "glint": {
+    "environment": ["ember-loose", "ember-template-imports"]
+  },
+  "compilerOptions": {
+    "allowJs": true,
+    "declarationDir": "declarations",
+    /**
+      https://www.typescriptlang.org/tsconfig#noEmit
+
+      We want to emit declarations, so this option must be set to `false`.
+      @tsconfig/ember sets this to `true`, which is incompatible with our need to set `emitDeclarationOnly`.
+      @tsconfig/ember is more optimized for apps, which wouldn't emit anything, only type check.
+    */
+    "noEmit": false,
+    /**
+      https://www.typescriptlang.org/tsconfig#emitDeclarationOnly
+      We want to only emit declarations as we use Rollup to emit JavaScript.
+    */
+    "emitDeclarationOnly": true,
+
+    /**
+      https://www.typescriptlang.org/tsconfig#noEmitOnError
+      Do not block emit on TS errors.
+    */
+    "noEmitOnError": false,
+
+    /**
+      https://www.typescriptlang.org/tsconfig#rootDir
+      "Default: The longest common path of all non-declaration input files."
+
+      Because we want our declarations' structure to match our rollup output,
+      we need this "rootDir" to match the "srcDir" in the rollup.config.mjs.
+
+      This way, we can have simpler `package.json#exports` that matches
+      imports to files on disk
+    */
+    "rootDir": "./src",
+
+    /**
+      https://www.typescriptlang.org/tsconfig#allowImportingTsExtensions
+
+      We want our tooling to know how to resolve our custom files so the appropriate plugins
+      can do the proper transformations on those files.
+    */
+    "allowImportingTsExtensions": true
+  }
+}