Merge pull request GavinJoyce#89 from NullVoxPopuli/add-typescript

Add typescript

.github/workflows/ci.yml

@@ -32,6 +32,24 @@ jobs:
       - name: lint
         run: yarn lint
 
+  type-check:
+    name: Type Checking
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+      - uses: volta-cli/action@v1
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - name: install dependencies
+        run: yarn install --frozen-lockfile --non-interactive
+
+      - name: Type Checking
+        run: yarn prepack
+
   test:
     runs-on: ubuntu-latest
 

addon/components/dialog.js → addon/components/dialog.ts

@@ -8,40 +8,51 @@ import { getOwnConfig } from '@embroider/macros';
 import { Keys } from 'ember-headlessui/utils/keyboard';
 import { modifier } from 'ember-modifier';
 
+import type DialogStackProvider from 'ember-headlessui/services/dialog-stack-provider';
+
 function getPortalRoot() {
   const { rootElement } = getOwnConfig();
 
   // If we looked up a `rootElement` config at build-time, use that; otherwise use the body
   return rootElement ? document.querySelector(rootElement) : document.body;
 }
 
-export default class DialogComponent extends Component {
-  @service dialogStackProvider;
+interface Args {
+  isOpen: boolean;
+  onClose: () => void;
+  as: string | typeof Component;
+}
+
+export default class DialogComponent extends Component<Args> {
+  @service declare dialogStackProvider: DialogStackProvider;
 
   DEFAULT_TAG_NAME = 'div';
 
   guid = `${guidFor(this)}-headlessui-dialog`;
   $portalRoot = getPortalRoot();
 
-  handleEscapeKey = modifier((_element, [isOpen, onClose]) => {
-    let handler = (event) => {
-      if (event.key !== Keys.Escape) return;
-      if (!isOpen) return;
+  handleEscapeKey = modifier(
+    (_element, [isOpen, onClose]: [boolean, () => void]) => {
+      let handler = (event: KeyboardEvent) => {
+        if (event.key !== Keys.Escape) return;
+        if (!isOpen) return;
 
-      event.preventDefault();
-      event.stopPropagation();
+        event.preventDefault();
+        event.stopPropagation();
 
-      onClose();
-    };
+        onClose();
+      };
 
-    window.addEventListener('keyup', handler);
-    return () => {
-      window.removeEventListener('keyup', handler);
-    };
-  });
+      window.addEventListener('keyup', handler);
+
+      return () => {
+        window.removeEventListener('keyup', handler);
+      };
+    }
+  );
 
-  constructor() {
-    super(...arguments);
+  constructor(owner: unknown, args: Args) {
+    super(owner, args);
 
     let { isOpen, onClose } = this.args;
 

addon/components/menu/button.hbs

@@ -1,3 +1,4 @@
+{{! template-lint-disable no-down-event-binding }}
 <button
   type='button'
   aria-haspopup={{true}}

addon/components/menu/items.hbs

@@ -1,3 +1,4 @@
+{{! template-lint-disable no-down-event-binding }}
 {{#if @isOpen}}
   <div
     id={{@itemsGuid}}

addon/services/dialog-stack-provider.js → addon/services/dialog-stack-provider.ts

@@ -1,22 +1,27 @@
 import { action } from '@ember/object';
 import Service from '@ember/service';
 
-export default class DialogStackProviderService extends Service {
-  stack = [];
+interface WithGuid {
+  guid: string;
+}
+
+export default class DialogStackProvider extends Service {
+  stack: string[] = [];
 
   @action
-  hasOpenChild(dialog) {
+  hasOpenChild(dialog: WithGuid) {
     return this.stack[this.stack.length - 1] !== dialog.guid;
   }
 
   @action
-  remove(dialog) {
+  remove(dialog: WithGuid) {
     let ix = this.stack.findIndex((guid) => guid === dialog.guid);
+
     this.stack.splice(ix, 1);
   }
 
   @action
-  push(dialog) {
+  push(dialog: WithGuid) {
     this.stack.push(dialog.guid);
   }
 }

addon/utils/keyboard.js → addon/utils/keyboard.ts

@@ -1,4 +1,4 @@
-let Keys = {
+export const Keys = {
   Space: ' ',
   Enter: 'Enter',
   Escape: 'Escape',
@@ -16,6 +16,4 @@ let Keys = {
   PageDown: 'PageDown',
 
   Tab: 'Tab',
-};
-
-export { Keys };
+} as const;

package.json

@@ -30,13 +30,16 @@
     "test:ember": "ember test",
     "test:ember-compatibility": "ember try:each",
     "release": "dotenv release-it --",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "prepack": "ember ts:precompile",
+    "postpack": "ember ts:clean"
   },
   "dependencies": {
     "@ember/render-modifiers": "^1.0.2",
     "@embroider/macros": "^0.43.5",
     "ember-cli-babel": "^7.26.3",
     "ember-cli-htmlbars": "^5.7.1",
+    "ember-cli-typescript": "^4.2.1",
     "ember-click-outside-modifier": "^2.0.0",
     "ember-concurrency": "^2.1.0",
     "ember-element-helper": "^0.5.5",
@@ -55,6 +58,29 @@
     "@tailwindcss/ui": "^0.7.2",
     "@testing-library/dom": "^8.1.0",
     "@testing-library/user-event": "^13.1.9",
+    "@types/ember-qunit": "^3.4.14",
+    "@types/ember-resolver": "^5.0.10",
+    "@types/ember__application": "^3.16.3",
+    "@types/ember__array": "^3.16.4",
+    "@types/ember__component": "^3.16.6",
+    "@types/ember__controller": "^3.16.6",
+    "@types/ember__debug": "^3.16.5",
+    "@types/ember__destroyable": "^3.22.0",
+    "@types/ember__engine": "^3.16.3",
+    "@types/ember__error": "^3.16.1",
+    "@types/ember__object": "^3.12.6",
+    "@types/ember__polyfills": "^3.12.1",
+    "@types/ember__routing": "^3.16.15",
+    "@types/ember__runloop": "^3.16.3",
+    "@types/ember__service": "^3.16.1",
+    "@types/ember__string": "^3.16.3",
+    "@types/ember__template": "^3.16.1",
+    "@types/ember__test": "^3.16.1",
+    "@types/ember__test-helpers": "^2.0.2",
+    "@types/ember__utils": "^3.16.2",
+    "@types/htmlbars-inline-precompile": "^1.0.1",
+    "@types/qunit": "^2.11.2",
+    "@types/rsvp": "^4.0.4",
     "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",
     "dotenv-cli": "^4.0.0",

tests/dummy/app/config/environment.d.ts

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

tests/integration/components/switch-test.js

@@ -164,9 +164,7 @@ module('Integration | Component | <Switch>', function (hooks) {
         assertSwitchState({ state: SwitchState.Off });
       });
     });
-  });
 
-  module('Keyboard interactions', function () {
     test('it should be possible to toggle the Switch with a click', async function () {
       this.set('isEnabled', false);
 

tsconfig.json

@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "target": "es2020",
+    "allowJs": true,
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "alwaysStrict": true,
+    "strictNullChecks": true,
+    "strictPropertyInitialization": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noEmitOnError": false,
+    "noEmit": true,
+    "inlineSourceMap": true,
+    "inlineSources": true,
+    "baseUrl": ".",
+    "module": "es6",
+    "experimentalDecorators": true,
+    "paths": {
+      "dummy/tests/*": ["tests/*"],
+      "dummy/*": ["tests/dummy/app/*", "app/*"],
+      "ember-headlessui": ["addon"],
+      "ember-headlessui/*": ["addon/*"],
+      "ember-headlessui/test-support": ["addon-test-support"],
+      "ember-headlessui/test-support/*": ["addon-test-support/*"],
+      "*": ["types/*"]
+    }
+  },
+  "include": [
+    "app/**/*",
+    "addon/**/*",
+    "tests/**/*",
+    "types/**/*",
+    "test-support/**/*",
+    "addon-test-support/**/*"
+  ]
+}

types/global.d.ts

@@ -0,0 +1,6 @@
+// Types for compiled templates
+declare module 'ember-headlessui/templates/*' {
+  import type { TemplateFactory } from 'htmlbars-inline-precompile';
+  const tmpl: TemplateFactory;
+  export default tmpl;
+}