Merge pull request #109 from miguelcobain/update-glint-import-path

Update glint import path to template-registry

.github/workflows/ci.yml

@@ -144,6 +144,10 @@ jobs:
         run: yarn add -D ${{ matrix.ember-modifier-scenario }}
         working-directory: addon
 
+      - name: Remove ember-cli-typescript, ember-modifier
+        run: yarn remove ember-cli-typescript ember-modifier
+        working-directory: test-app
+
       - name: Run Tests
         run: yarn test:ember
         working-directory: test-app

.gitignore

@@ -7,15 +7,6 @@ dist/
 node_modules/
 
 # misc
-/addon/README.md
-/addon/LICENSE.md
 .env*
 .eslintcache
-.pnp*
-.sass-cache
-connect.lock
-coverage/
-libpeerconnection.log
-npm-debug.log*
 yarn-error.log
-.DS_Store

CONTRIBUTING.md

@@ -14,8 +14,8 @@ This repo is divided into multiple packages using Yarn workspaces:
 
 ## Linting
 
-* `yarn run lint`
-* `yarn run lint:fix`
+* `yarn lint`
+* `yarn lint:fix`
 
 ## Running tests
 
@@ -27,9 +27,9 @@ This repo is divided into multiple packages using Yarn workspaces:
 During development, if you'd like test app to pick up changes in the addon, make sure to run both
 `cd addon && yarn start` and `cd test-app && ember test --server` in different terminals.
 
-## Running the test-app application
+## Running the test application
 
-* `ember serve`
-* Visit the test-app application at [http://localhost:4200](http://localhost:4200).
+* `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://ember-cli.com/](https://ember-cli.com/).
+For more information on using ember-cli, visit [https://cli.emberjs.com/release/](https://cli.emberjs.com/release/).

README.md

@@ -112,6 +112,34 @@ ember install ember-cli-autoprefixer
 
 Note: **IE9** does not support CSS3 transitions / animations. They must live with no animations / transitions.
 
+## TypeScript usage
+
+`css-transition` ships [Glint](https://github.com/typed-ember/glint) types,
+which allow you when using TypeScript to get strict type checking in your templates.
+
+Unless you are using [strict mode](http://emberjs.github.io/rfcs/0496-handlebars-strict-mode.html) templates
+(via [first class component templates](http://emberjs.github.io/rfcs/0779-first-class-component-templates.html)),
+Glint needs a [Template Registry](https://typed-ember.gitbook.io/glint/using-glint/ember/template-registry)
+that contains entries for the element modifier provided by this addon.
+To add these registry entries automatically to your app, you just need to import `ember-css-transitions/template-registry`
+from somewhere in your app. When using Glint already, you will likely have a file like
+`types/glint.d.ts` where you already import glint types, so just add the import there:
+
+```ts
+import '@glint/environment-ember-loose';
+
+import type CssTransitionsRegistry from 'ember-css-transitions/template-registry';
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry extends CssTransitionsRegistry, /* other addon registries */ {
+    // local entries
+  }
+}
+```
+
+> Note that Glint itself is still under active development, and as such breaking changes might occur.
+> Therefore, Glint support by this addon is also considered experimental, and not covered by our SemVer contract!
+
 ## Contribute
 
 - `git clone https://github.com/miguelcobain/ember-css-transitions.git` this repository

RELEASE.md

@@ -13,7 +13,7 @@ have been merged since the last release have been labeled with the appropriate
 represent something that would make sense to our users. Some great information
 on why this is important can be found at
 [keepachangelog.com](https://keepachangelog.com/en/1.0.0/), but the overall
-guiding principles here is that changelogs are for humans, not machines.
+guiding principle here is that changelogs are for humans, not machines.
 
 When reviewing merged PR's the labels to be used are:
 
@@ -45,7 +45,7 @@ Once the prep work is completed, the actual release is straight forward:
   export GITHUB_AUTH=abc123def456
   ```
 
-[generate-token]: https://github.com/settings/tokens/new?scopes=repo&description=GITHUB_AUTH+env+variable
+  [generate-token]: https://github.com/settings/tokens/new?scopes=repo&description=GITHUB_AUTH+env+variable
 
 * And last (but not least 😁) do your release.
 

addon/.eslintrc.js

@@ -2,17 +2,18 @@
 
 module.exports = {
   root: true,
-  parser: '@babel/eslint-parser',
+  parser: '@typescript-eslint/parser',
   parserOptions: {
-    ecmaVersion: 'latest',
+    ecmaVersion: 2018,
     sourceType: 'module',
     ecmaFeatures: {
       legacyDecorators: true,
     },
   },
-  plugins: ['ember'],
+  plugins: ['@typescript-eslint', 'ember'],
   extends: [
     'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
     'plugin:ember/recommended',
     'plugin:prettier/recommended',
   ],
@@ -28,7 +29,6 @@ module.exports = {
         './.prettierrc.js',
         './.template-lintrc.js',
         './addon-main.js',
-        './config/**/*.js',
       ],
       parserOptions: {
         sourceType: 'script',
@@ -39,6 +39,10 @@ module.exports = {
       },
       plugins: ['node'],
       extends: ['plugin:node/recommended'],
+      rules: {
+        // We *want* to use traditional require statements in Node `.js` files.
+        '@typescript-eslint/no-var-requires': 'off',
+      },
     },
   ],
 };

addon/.gitignore

@@ -1,29 +1,5 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# compiled output
-/dist/
-/tmp/
-
-# dependencies
-/bower_components/
-/node_modules/
-
-# misc
-/.env*
-/.pnp*
-/.sass-cache
-/.eslintcache
-/connect.lock
-/coverage/
-/libpeerconnection.log
-/npm-debug.log*
-/testem.log
-/yarn-error.log
-
-# ember-try
-/.node_modules.ember-try/
-/bower.json.ember-try
-/npm-shrinkwrap.json.ember-try
-/package.json.ember-try
-/package-lock.json.ember-try
-/yarn.lock.ember-try
+# 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

addon/package.json

@@ -22,10 +22,6 @@
       ]
     }
   },
-  "directories": {
-    "doc": "doc",
-    "test": "tests"
-  },
   "files": [
     "addon-main.js",
     "dist",
@@ -50,18 +46,23 @@
     "@babel/plugin-proposal-decorators": "^7.20.2",
     "@embroider/addon-dev": "^1.6.0",
     "@rollup/plugin-babel": "^6.0.2",
-    "eslint": "^8.14.0",
+    "@tsconfig/ember": "^1.0.1",
+    "@typescript-eslint/eslint-plugin": "^5.43.0",
+    "@typescript-eslint/parser": "^5.43.0",
+    "eslint": "^8.27.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-ember": "^10.6.0",
+    "eslint-plugin-ember": "^11.1.0",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-qunit": "^7.2.0",
+    "eslint-plugin-prettier": "^4.2.1",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.6.2",
+    "prettier": "^2.7.1",
     "rollup": "^2.70.2"
   },
   "engines": {
-    "node": "12.* || 14.* || >= 16"
+    "node": "12.* || 14.* || 16.* || >= 18"
+  },
+  "volta": {
+    "extends": "../package.json"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
@@ -77,8 +78,5 @@
     "app-js": {
       "./modifiers/css-transition.js": "./dist/_app_/modifiers/css-transition.js"
     }
-  },
-  "volta": {
-    "extends": "../package.json"
   }
 }

addon/types/template-registry.d.ts

@@ -0,0 +1,5 @@
+import type CssTransitionModifier from './modifiers/css-transition';
+
+export default interface AwesomeAddonRegistry {
+  'css-transition': typeof CssTransitionModifier;
+}

test-app/.eslintrc.js

@@ -2,21 +2,18 @@
 
 module.exports = {
   root: true,
-  parser: '@babel/eslint-parser',
+  parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaVersion: 2018,
     sourceType: 'module',
     ecmaFeatures: {
       legacyDecorators: true,
     },
-    requireConfigFile: false,
-    babelOptions: {
-      plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]],
-    },
   },
-  plugins: ['ember'],
+  plugins: ['@typescript-eslint', 'ember'],
   extends: [
     'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
     'plugin:ember/recommended',
     'plugin:prettier/recommended',
   ],
@@ -47,6 +44,13 @@ module.exports = {
       },
       plugins: ['node'],
       extends: ['plugin:node/recommended'],
+      rules: {
+        // We *want* to use traditional require statements in Node `.js` files.
+        '@typescript-eslint/no-var-requires': 'off',
+        // this can be removed once the following is fixed
+        // https://github.com/mysticatea/eslint-plugin-node/issues/77
+        'node/no-unpublished-require': 'off',
+      },
     },
     {
       // test files

test-app/app/components/glint-typecheck.hbs

@@ -0,0 +1,14 @@
+<div
+  {{css-transition
+    "transition-name"
+    enterClass="enter"
+    enterActiveClass="enter-active"
+    enterToClass="enter-to"
+    isEnabled=false
+    leaveClass="leave"
+    leaveActiveClass="leave-active"
+    leaveToClass="leave-to"
+    name="my-name"
+    parentSelector=".parent"
+  }}
+></div>

test-app/app/config/environment.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Type declarations for
+ *    import config from 'my-app/config/environment'
+ */
+declare const config: {
+  environment: string;
+  modulePrefix: string;
+  podModulePrefix: string;
+  locationType: 'history' | 'hash' | 'none' | 'auto';
+  rootURL: string;
+  APP: Record<string, unknown>;
+};
+
+export default config;

test-app/app/router.js

@@ -6,4 +6,6 @@ export default class Router extends EmberRouter {
   rootURL = config.rootURL;
 }
 
-Router.map(function () {});
+Router.map(function () {
+  /* intentionally empty: nothing to do in this test! */
+});