Glint Support

README.md

@@ -38,6 +38,42 @@ You can also provide specific events that you want to bind to with the `event` o
 <div {{click-outside this.onClickOutside events=(array 'click' 'mouseup')}}></div>
 ```
 
+## Usage with Glint
+
+`ember-click-outside-modifier` is a glint enabled addon. Add this to your
+`types/global.d.ts` file:
+
+```ts
+import '@glint/environment-ember-loose';
+
+import type EmberClickOutsideRegistry from 'ember-click-outside-modifier/template-registry';
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry extends EmberClickOutsideRegistry, /* other addon registries */ {
+    // local entries
+  }
+}
+```
+
+For the entire guide, please refer to [Using
+Addons](https://typed-ember.gitbook.io/glint/environments/ember/using-addons#using-glint-enabled-addons)
+section on the glint handbook.
+
+Types are made available through package.json `exports` field.
+
+## Usage with <template> tag
+
+For usage in `gts` or `gjs` files, modifier are exported from the index:
+
+```gts
+import { clickOutside } from 'ember-truth-helpers';
+
+<template>
+  <div {{clickOutside this.handleClickOutside}}>
+    Lorem ipsum.
+  </div>
+</template>
+```
 
 Contributing
 ------------------------------------------------------------------------------

ember-click-outside-modifier/.eslintrc.js

@@ -2,16 +2,12 @@
 
 module.exports = {
   root: true,
-  parser: '@babel/eslint-parser',
+  parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaVersion: 'latest',
     sourceType: 'module',
-    ecmaFeatures: {
-      legacyDecorators: true,
-    },
-    requireConfigFile: false,
     babelOptions: {
-      plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]],
+      root: __dirname,
     },
   },
   plugins: ['ember'],
@@ -25,6 +21,17 @@ module.exports = {
   },
   rules: {},
   overrides: [
+    // ts files
+    {
+      files: ['**/*.ts'],
+      extends: [
+        'plugin:@typescript-eslint/eslint-recommended',
+        'plugin:@typescript-eslint/recommended',
+      ],
+      rules: {
+        // Add any custom rules here
+      },
+    },
     // node files
     {
       files: [

ember-click-outside-modifier/package.json

@@ -12,14 +12,10 @@
   },
   "license": "MIT",
   "author": "Aleksandr Kanunnikov <[email protected]>",
-  "exports": {
-    ".": "./dist/index.js",
-    "./*": "./dist/*",
-    "./addon-main.js": "./addon-main.js"
-  },
   "files": [
     "addon-main.js",
-    "dist"
+    "dist",
+    "types"
   ],
   "scripts": {
     "build": "rollup --config",
@@ -39,13 +35,17 @@
     "@babel/plugin-proposal-decorators": "^7.17.8",
     "@embroider/addon-dev": "^1.5.0",
     "@rollup/plugin-babel": "^5.3.1",
+    "@tsconfig/ember": "^3.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
     "eslint": "^8.13.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-ember": "^10.6.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^4.0.0",
     "prettier": "^2.6.2",
-    "rollup": "^2.70.2"
+    "rollup": "^2.70.2",
+    "typescript": "^5.1.6"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
@@ -60,5 +60,20 @@
     "app-js": {
       "./modifiers/click-outside.js": "./dist/_app_/modifiers/click-outside.js"
     }
+  },
+  "exports": {
+    ".": "./dist/index.js",
+    "./*": {
+      "types": "./types/*.d.ts",
+      "default": "./dist/*.js"
+    },
+    "./addon-main.js": "./addon-main.js"
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "types/*"
+      ]
+    }
   }
 }

ember-click-outside-modifier/rollup.config.js

@@ -14,7 +14,7 @@ export default {
   plugins: [
     // These are the modules that users should be able to import from your
     // addon. Anything not listed here may get optimized away.
-    addon.publicEntrypoints(['modifiers/**/*.js']),
+    addon.publicEntrypoints(['index.js', 'modifiers/**/*.js']),
 
     // These are the modules that should get reexported into the traditional
     // "app" tree. Things in here should also be in publicEntrypoints above, but

ember-click-outside-modifier/src/index.js

@@ -0,0 +1 @@
+export { default as clickOutside } from './modifiers/click-outside';

ember-click-outside-modifier/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "@tsconfig/ember/tsconfig.json",
+  "include": [
+    "src/**/*",
+    "types/**/*"
+  ],
+  "glint": {
+    "environment": "ember-loose"
+  }
+}

ember-click-outside-modifier/types/modifiers/click-outside.d.ts

@@ -0,0 +1,18 @@
+import Modifier from 'ember-modifier';
+
+export interface ClickOutsideSignature {
+  Element?: HTMLElement;
+  Args: {
+    Positional: [handlerValue: (event: Event) => unknown, useCapture?: boolean];
+    Named:
+      | never
+      | {
+          events?: string[];
+        }
+      | {
+          event?: string;
+        };
+  };
+}
+
+export default class ClickOutsideModifier extends Modifier<ClickOutsideSignature> {}

ember-click-outside-modifier/types/template-registry.d.ts

@@ -0,0 +1,5 @@
+import type ClickOutsideModifier from './modifiers/click-outside';
+
+export default interface EmberClickOutsideRegistry {
+  'click-outside': typeof ClickOutsideModifier;
+}

test-app/.eslintrc.js

@@ -2,16 +2,12 @@
 
 module.exports = {
   root: true,
-  parser: '@babel/eslint-parser',
+  parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaVersion: 'latest',
     sourceType: 'module',
-    ecmaFeatures: {
-      legacyDecorators: true,
-    },
-    requireConfigFile: false,
     babelOptions: {
-      plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]],
+      root: __dirname,
     },
   },
   plugins: ['ember'],
@@ -25,6 +21,17 @@ module.exports = {
   },
   rules: {},
   overrides: [
+    // ts files
+    {
+      files: ['**/*.ts'],
+      extends: [
+        'plugin:@typescript-eslint/eslint-recommended',
+        'plugin:@typescript-eslint/recommended',
+      ],
+      rules: {
+        // Add any custom rules here
+      },
+    },
     // node files
     {
       files: [

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

@@ -0,0 +1,5 @@
+<button type="button" {{click-outside this.noop}}>Click me!</button>
+<button type="button" {{click-outside this.noop true}}>Click me!</button>
+<button type="button" {{click-outside this.noop false}}>Click me!</button>
+<button type="button" {{click-outside this.noop event="touchstart"}}>Click me!</button>
+<button type="button" {{click-outside this.noop events=(array "touchstart" "touchend")}}>Click me!</button>

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

@@ -0,0 +1,7 @@
+import Component from '@glimmer/component';
+
+export default class extends Component {
+  noop() {
+    // do nothing
+  }
+}

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

@@ -0,0 +1,14 @@
+/**
+ * Type declarations for
+ *    import config from 'test-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/templates/application.hbs

@@ -1,5 +1,3 @@
-{{page-title "TestApp"}}
-
 <h2 id="title">Welcome to Ember</h2>
 
 {{outlet}}

test-app/config/ember-try.js

@@ -11,15 +11,21 @@ module.exports = async function () {
         name: 'ember-lts-3.20',
         npm: {
           devDependencies: {
-            'ember-source': '~3.20.6',
+            '@ember/test-helpers': '^2.6.0',
             'ember-modifier': '^3.0.0',
+            'ember-qunit': '^5.1.5',
+            'ember-resolver': '^8.0.3',
+            'ember-source': '~3.20.6',
           },
         },
       },
       {
         name: 'ember-lts-3.24',
         npm: {
           devDependencies: {
+            '@ember/test-helpers': '^2.6.0',
+            'ember-qunit': '^5.1.5',
+            'ember-resolver': '^8.0.3',
             'ember-source': '~3.24.6',
           },
         },
@@ -28,6 +34,9 @@ module.exports = async function () {
         name: 'ember-lts-3.28',
         npm: {
           devDependencies: {
+            '@ember/test-helpers': '^2.6.0',
+            'ember-qunit': '^5.1.5',
+            'ember-resolver': '^8.0.3',
             'ember-source': '~3.28.9',
           },
         },
@@ -36,6 +45,9 @@ module.exports = async function () {
         name: 'ember-lts-4.4',
         npm: {
           devDependencies: {
+            '@ember/test-helpers': '^2.6.0',
+            'ember-qunit': '^5.1.5',
+            'ember-resolver': '^8.0.3',
             'ember-source': '~4.4.0',
           },
         },

test-app/package.json

@@ -23,6 +23,7 @@
     "lint:hbs:fix": "ember-template-lint . --fix",
     "lint:js": "eslint . --cache",
     "lint:js:fix": "eslint . --fix",
+    "lint:glint": "glint",
     "start": "ember serve",
     "test": "npm-run-all lint test:*",
     "test:ember": "ember test",
@@ -33,10 +34,45 @@
     "@babel/eslint-parser": "^7.17.0",
     "@ember/optional-features": "^2.0.0",
     "@ember/string": "^3.1.1",
-    "@ember/test-helpers": "^2.6.0",
+    "@ember/test-helpers": "^3.2.0",
     "@embroider/test-setup": "^1.6.0",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
+    "@glint/core": "^1.0.2",
+    "@glint/environment-ember-loose": "^1.0.2",
+    "@glint/template": "^1.0.2",
+    "@tsconfig/ember": "^3.0.0",
+    "@types/ember": "^4.0.4",
+    "@types/eslint": "^8.44.1",
+    "@types/ember-data": "^4.4.11",
+    "@types/ember-data__adapter": "^4.0.2",
+    "@types/ember-data__model": "^4.0.1",
+    "@types/ember-data__serializer": "^4.0.2",
+    "@types/ember-data__store": "^4.0.3",
+    "@types/ember__application": "^4.0.6",
+    "@types/ember__array": "^4.0.4",
+    "@types/ember__component": "^4.0.14",
+    "@types/ember__controller": "^4.0.5",
+    "@types/ember__debug": "^4.0.4",
+    "@types/ember__destroyable": "^4.0.2",
+    "@types/ember__engine": "^4.0.5",
+    "@types/ember__error": "^4.0.3",
+    "@types/ember__helper": "^4.0.2",
+    "@types/ember__modifier": "^4.0.5",
+    "@types/ember__object": "^4.0.6",
+    "@types/ember__owner": "^4.0.4",
+    "@types/ember__polyfills": "^4.0.2",
+    "@types/ember__routing": "^4.0.13",
+    "@types/ember__runloop": "^4.0.3",
+    "@types/ember__service": "^4.0.3",
+    "@types/ember__string": "^3.0.11",
+    "@types/ember__template": "^4.0.2",
+    "@types/ember__test": "^4.0.2",
+    "@types/ember__utils": "^4.0.3",
+    "@types/qunit": "^2.19.6",
+    "@types/rsvp": "^4.0.4",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
     "broccoli-asset-rev": "^3.0.0",
     "ember-auto-import": "^2.4.1",
     "ember-cli": "~4.3.0",
@@ -50,8 +86,8 @@
     "ember-disable-prototype-extensions": "^1.1.3",
     "ember-load-initializers": "^2.1.2",
     "ember-page-title": "^7.0.0",
-    "ember-qunit": "^5.1.5",
-    "ember-resolver": "^8.0.3",
+    "ember-qunit": "^7.0.0",
+    "ember-resolver": "^11.0.0",
     "ember-source": "~4.3.0",
     "ember-source-channel-url": "^3.0.0",
     "ember-template-lint": "^4.4.2",
@@ -67,6 +103,7 @@
     "prettier": "^2.6.2",
     "qunit": "^2.18.2",
     "qunit-dom": "^2.0.0",
+    "typescript": "^5.1.6",
     "webpack": "^5.72.0"
   },
   "engines": {

test-app/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "@tsconfig/ember/tsconfig.json",
+  "compilerOptions": {
+    // The combination of `baseUrl` with `paths` allows Ember's classic package
+    // layout, which is not resolvable with the Node resolution algorithm, to
+    // work with TypeScript.
+    "baseUrl": ".",
+    "paths": {
+      "test-app/tests/*": ["tests/*"],
+      "test-app/*": ["app/*"],
+      "*": ["types/*"]
+    }
+  },
+  "glint": {
+    "environment": "ember-loose"
+  }
+}