Convert to typescript (#140)

ember-power-datepicker/babel.config.json

@@ -1,8 +1,11 @@
 {
   "plugins": [
+  ["@babel/plugin-transform-typescript", { "allExtensions": true, "onlyRemoveTypeImports": true, "allowDeclareFields": true }],
     "@embroider/addon-dev/template-colocation-plugin",
-    ["@babel/plugin-proposal-decorators", { "version": "legacy" }],
-    "@babel/plugin-proposal-class-properties",
-    "./node_modules/ember-concurrency/async-arrow-task-transform"
+    ["babel-plugin-ember-template-compilation", {
+      "targetFormat": "hbs",
+      "transforms": []
+    }],
+    ["module:decorator-transforms", { "runtime": { "import": "decorator-transforms/runtime" } }]
   ]
-}
+}

ember-power-datepicker/package.json

@@ -28,28 +28,32 @@
     "dist"
   ],
   "scripts": {
-    "build": "rollup --config",
+    "build": "concurrently 'npm:build:*'",
+    "build:js": "rollup --config",
+    "build:types": "glint --declaration",
     "lint": "concurrently 'npm:lint:*(!fix)' --names 'lint:'",
     "lint:fix": "concurrently 'npm:lint:*:fix' --names 'fix:'",
     "lint:hbs": "ember-template-lint . --no-error-on-unmatched-pattern",
     "lint:hbs:fix": "ember-template-lint . --fix --no-error-on-unmatched-pattern",
     "lint:js": "eslint . --cache",
     "lint:js:fix": "eslint . --fix",
-    "prepack": "npm run build",
-    "start": "rollup --config --watch",
+    "lint:types": "glint",
+    "prepack": "pnpm build",
+    "start": "concurrently 'npm: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'",
-    "prepare": "npm run build"
+    "prepare": "pnpm build"
   },
   "dependencies": {
     "@embroider/addon-shim": "^1.8.7",
+    "@embroider/util": "^1.12.1",
+    "decorator-transforms": "^1.1.0",
     "ember-assign-helper": "^0.5.0"
   },
   "devDependencies": {
     "@babel/core": "^7.23.9",
-    "@babel/eslint-parser": "^7.23.10",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-proposal-decorators": "^7.23.9",
-    "@babel/plugin-transform-class-static-block": "^7.23.4",
+    "@babel/plugin-transform-typescript": "^7.23.6",
     "@babel/runtime": "^7.23.9",
     "@ember/string": "^3.1.1",
     "@ember/test-helpers": "^3.2.1",

ember-power-datepicker/rollup.config.mjs

@@ -19,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(['index.js', '**/*.js']),
+    addon.publicEntrypoints(['index.js', 'components/**/*.js']),
 
     // These are the modules that should get reexported into the traditional
     // "app" tree. Things in here should also be in publicEntrypoints above, but
@@ -38,7 +38,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-power-datepicker/src/components/power-datepicker.hbs

@@ -2,7 +2,6 @@
   @disabled={{@disabled}}
   @onOpen={{@onOpen}}
   @onClose={{@onClose}}
-  @onFocus={{@onFocus}}
   @destination={{@destination}}
   @initiallyOpened={{@initiallyOpened}}
   @horizontalPosition={{@horizontalPosition}}

ember-power-datepicker/src/components/power-datepicker.ts

@@ -0,0 +1,95 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import type { DropdownActions } from 'ember-basic-dropdown/components/basic-dropdown';
+import type { CalculatePosition, VerticalPosition, HorizontalPosition } from 'ember-basic-dropdown/utils/calculate-position';
+import type { NormalizeCalendarValue } from 'ember-power-calendar/utils';
+import type { CalendarDay, SelectedDays, PowerCalendarActions } from 'ember-power-calendar/components/power-calendar';
+import type { ComponentLike } from '@glint/template';
+
+interface PowerDatepickerSignature {
+  Element: HTMLElement;
+  Args: PowerDatepickerArgs;
+  Blocks: {
+    default: [
+      PowerDatepickerDefaultBlock,
+    ];
+  };
+}
+
+interface PowerDatepickerArgs {
+  initiallyOpened?: boolean;
+  renderInPlace?: boolean;
+  verticalPosition?: VerticalPosition;
+  horizontalPosition?: HorizontalPosition;
+  destination?: string;
+  disabled?: boolean;
+  matchTriggerWidth?: boolean;
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  onOpen?: Function;
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  onClose?: Function;
+  calculatePosition?: CalculatePosition;
+
+  locale?: string;
+  selected?: SelectedDays;
+  closeOnSelect?: boolean;
+  onCenterChange?: (
+    newCenter: NormalizeCalendarValue
+  ) => void;
+  onSelect?: (
+    day: CalendarDay,
+    calendar: PowerDatepickerCalendar,
+    event: MouseEvent,
+  ) => void | boolean;
+}
+
+interface PowerDatepickerActions extends DropdownActions, PowerCalendarActions {}
+
+export interface PowerDatepickerCalendar {
+  uniqueId: string;
+  disabled: boolean;
+  isOpen: boolean;
+  calendarUniqueId: string;
+  selected?: SelectedDays;
+  loading: boolean;
+  center: Date;
+  locale: string;
+  actions: PowerDatepickerActions;
+}
+
+export interface PowerDatepickerDefaultBlock extends PowerDatepickerCalendar {
+  Trigger: ComponentLike<any>;
+  Content: ComponentLike<any>;
+  Nav: ComponentLike<any>;
+  Days: ComponentLike<any>;
+}
+
+export default class PowerDatepickerComponent extends Component<PowerDatepickerSignature> {
+  @tracked center: Date | undefined;
+
+  get closeOnSelect() {
+    return this.args.closeOnSelect !== undefined
+      ? this.args.closeOnSelect
+      : true;
+  }
+
+  @action
+  onCenterChange(day: NormalizeCalendarValue) {
+    if (this.args.onCenterChange) {
+      this.args.onCenterChange(day);
+    }
+
+    this.center = day.date;
+  }
+
+  @action
+  handleSelect(day: CalendarDay, datepicker: PowerDatepickerCalendar, e: MouseEvent) {
+    let value = this.args.onSelect && this.args.onSelect(day, datepicker, e);
+    if (value === false || !this.closeOnSelect) {
+      return;
+    }
+
+    datepicker.actions.close();
+  }
+}

ember-power-datepicker/src/template-registry.ts

@@ -0,0 +1,5 @@
+import type PowerDatepickerComponent from './components/power-datepicker.ts';
+
+export default interface EmberPowerDatepickerRegistry {
+  PowerDatepicker: typeof PowerDatepickerComponent;
+}

ember-power-datepicker/src/types/global.d.ts

@@ -0,0 +1,19 @@
+import '@glint/environment-ember-loose';
+
+import type { EmbroiderUtilRegistry } from '@embroider/util';
+
+export interface AssignRegistry {
+  [key: string]: any;
+}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry
+    extends EmbroiderUtilRegistry /* other registries here */ {
+    // ...
+  }
+
+  export default interface Registry
+    extends AssignRegistry /* other registries here */ {
+    // ...
+  }
+}

ember-power-datepicker/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "extends": "@tsconfig/ember/tsconfig.json",
+  "include": [
+    "src/**/*",
+    "unpublished-development-types/**/*"
+  ],
+  "glint": {
+    "environment": ["ember-loose", "ember-template-imports"]
+  },
+  "compilerOptions": {
+    "allowJs": true,
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "alwaysStrict": true,
+    "exactOptionalPropertyTypes": true,
+    "strictNullChecks": true,
+    "strictPropertyInitialization": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitOverride": true,
+    "noImplicitReturns": true,
+    "noEmitOnError": false,
+    "noEmit": true,
+    "allowImportingTsExtensions": true,
+    "experimentalDecorators": true,
+    "declarationDir": "declarations"
+  }
+}