Install TypeScript, add template registry

.github/workflows/ci.yml

@@ -23,6 +23,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: wyvox/action-setup-pnpm@v3
       - run: pnpm build
+      - run: pnpm run lint
       - run: pnpm run test
         working-directory: ./test-app
 

ember-composable-helpers/.eslintrc.js

@@ -1,6 +1,6 @@
 module.exports = {
   root: true,
-  parser: 'babel-eslint',
+  parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaVersion: 2018,
     sourceType: 'module',
@@ -22,6 +22,18 @@ module.exports = {
     'ember/no-jquery': 'error'
   },
   overrides: [
+    // ts files
+    {
+      files: ['**/*.ts', '**/*.gts'],
+      extends: [
+        'plugin:@typescript-eslint/eslint-recommended',
+        'plugin:@typescript-eslint/recommended',
+      ],
+      rules: {
+        // Add any custom rules here
+        'prefer-const': 'off',
+      },
+    },
     // node files
     {
       files: [

ember-composable-helpers/babel.config.json

@@ -1,5 +1,6 @@
 {
   "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-transform-class-properties"

ember-composable-helpers/package.json

@@ -3,13 +3,18 @@
   "version": "5.1.1",
   "description": "Composable helpers for Ember",
   "scripts": {
-    "build": "rollup --config",
+    "build": "concurrently 'pnpm:build:*'",
+    "build:js": "rollup --config",
+    "build:types": "glint --declaration",
     "contributors": "npx contributor-faces -e \"(*-bot|*\\[bot\\]|*-tomster|homu|bors)\"",
     "lint:hbs": "ember-template-lint .",
     "lint:js": "eslint .",
+    "lint:types": "glint",
     "node-test": "mocha test --recursive --reporter spec",
-    "prepack": "rollup --config",
-    "start": "rollup --config --watch",
+    "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'",
     "test:all": "ember try:each"
   },
@@ -21,12 +26,24 @@
     "@babel/core": "^7.0.0",
     "@babel/plugin-proposal-decorators": "^7.22.15",
     "@babel/plugin-transform-class-properties": "^7.22.5",
+    "@babel/plugin-transform-typescript": "^7.23.6",
     "@babel/runtime": "^7.22.15",
     "@embroider/addon-dev": "^4.1.0",
+    "@glint/core": "^1.2.1",
+    "@glint/environment-ember-loose": "^1.2.1",
+    "@glint/environment-ember-template-imports": "^1.2.1",
+    "@glint/template": "^1.2.1",
     "@rollup/plugin-babel": "^6.0.3",
+    "@tsconfig/ember": "^3.0.2",
+    "@types/rsvp": "^4.0.9",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
     "concurrently": "^8.2.1",
+    "ember-source": "~5.8.0",
     "rollup": "^3.29.1",
-    "rollup-plugin-copy": "^3.5.0"
+    "rollup-plugin-copy": "^3.5.0",
+    "typescript": "^5.3.3",
+    "webpack": "^5.88.1"
   },
   "keywords": [
     "ember-addon",
@@ -47,12 +64,25 @@
     "@embroider/addon-shim": "^1.8.8"
   },
   "exports": {
-    ".": "./dist/index.js",
-    "./*": "./dist/*.js",
+    ".": {
+      "types": "./declarations/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./*": {
+      "types": "./declarations/*.d.ts",
+      "default": "./dist/*.js"
+    },
     "./addon-main.js": "./addon-main.cjs",
     "./addon-main.cjs": "./addon-main.cjs",
     "./addon-main": "./addon-main.cjs"
   },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "declarations/*"
+      ]
+    }
+  },
   "files": [
     "addon-main.cjs",
     "dist",

ember-composable-helpers/rollup.config.mjs

@@ -21,6 +21,7 @@ export default {
       'helpers/**/*.js',
       'index.js',
       'utils/**/*.js',
+      'template-registry.js'
     ]),
 
     // These are the modules that should get reexported into the traditional
@@ -43,7 +44,7 @@ export default {
     // babel.config.json.
     babel({
       babelHelpers: 'bundled',
-      extensions: ['.js'],
+      extensions: ['.js', '.ts'],
     }),
 
     // Ensure that standalone .hbs files are properly integrated as Javascript.

ember-composable-helpers/src/-private/get-value-array-and-use-deep-equal-from-params.js → ember-composable-helpers/src/-private/get-value-array-and-use-deep-equal-from-params.ts

@@ -1,13 +1,13 @@
-export default function getValueArrayAndUseDeepEqualFromParams(params) {
+export default function getValueArrayAndUseDeepEqualFromParams<T>(params: [T, boolean | T[], T[]?]) {
   let currentValue = params[0];
 
   let array;
   let useDeepEqual = false;
   if (params.length === 2) {
     array = params[1];
   } else {
-    useDeepEqual = params[1];
-    array = params[2];
+    useDeepEqual = params[1] as boolean;
+    array = params[2] as T[];
   }
 
   return {

ember-composable-helpers/src/helpers/call.js → ember-composable-helpers/src/helpers/call.ts

@@ -13,7 +13,7 @@ import Helper from '@ember/component/helper';
  * @param {Array<Function>} fn - The function to be called
  * @param {*=} thisArg - An optional `this` context
  */
-export function call([fn, thisArg]) {
+export function call([fn, thisArg]: [(...args: never[]) => unknown, unknown?]) {
     if (fn) {
         if (thisArg) {
             return fn.apply(thisArg);

ember-composable-helpers/src/helpers/chunk.js → ember-composable-helpers/src/helpers/chunk.ts

@@ -1,10 +1,10 @@
 import { helper } from '@ember/component/helper';
 import { isArray as isEmberArray } from '@ember/array';
 const { max, ceil } = Math;
-import asArray from '../utils/as-array';
+import asArray from '../utils/as-array.ts';
 
-export function chunk(num, array) {
-  let integer = parseInt(num, 10);
+export function chunk<T>(num: number | string, array: T[]) {
+  let integer = parseInt(num as string, 10);
   let size = max(integer, 0);
 
   let length = 0;
@@ -29,6 +29,6 @@ export function chunk(num, array) {
   }
 }
 
-export default helper(function([num, array]) {
+export default helper(function<T>([num, array]: [number | string, T[]]) {
   return chunk(num, array);
 });

ember-composable-helpers/src/helpers/compact.js → ember-composable-helpers/src/helpers/compact.ts

@@ -1,7 +1,7 @@
 import { helper } from '@ember/component/helper';
 import { isPresent } from '@ember/utils';
 import { isArray } from '@ember/array';
-export function compact([value]) {
+export function compact<T>([value]: [T[]]): T[] {
   let array;
   if (Array.isArray(value) || isArray(value)) {
     array = value;

ember-composable-helpers/src/helpers/compute.js → ember-composable-helpers/src/helpers/compute.ts

@@ -1,6 +1,6 @@
 import { helper } from '@ember/component/helper';
 
-export function compute([action, ...params]) {
+export function compute([action, ...params]: [(...args: never[]) => unknown]) {
   return action(...params);
 }
 

ember-composable-helpers/src/helpers/dec.js → ember-composable-helpers/src/helpers/dec.ts

@@ -1,7 +1,7 @@
 import { helper } from '@ember/component/helper';
 import { isEmpty } from '@ember/utils';
 
-export function dec([step, val]) {
+export function dec([step, val]: [number | undefined, number | undefined]) {
   if (isEmpty(val)) {
     val = step;
     step = undefined;

ember-composable-helpers/src/helpers/drop.js → ember-composable-helpers/src/helpers/drop.ts

@@ -1,8 +1,8 @@
 import { helper } from '@ember/component/helper';
 
-import asArray from '../utils/as-array';
+import asArray from '../utils/as-array.ts';
 
-export function drop([dropAmount, array]) {
+export function drop<T>([dropAmount, array]: [number, T[]]) {
   return asArray(array).slice(dropAmount);
 }
 

ember-composable-helpers/src/helpers/entries.js → ember-composable-helpers/src/helpers/entries.ts

@@ -1,6 +1,6 @@
 import { helper } from '@ember/component/helper';
 
-export function entries([object]) {
+export function entries([object]: [Record<string, unknown> | null | undefined]) {
   if (!object) {
     return object;
   }

ember-composable-helpers/src/helpers/filter-by.js → ember-composable-helpers/src/helpers/filter-by.ts

@@ -2,14 +2,14 @@ import { helper } from '@ember/component/helper';
 import { isArray as isEmberArray } from '@ember/array';
 import { isEmpty } from '@ember/utils';
 import { get } from '@ember/object';
-import isEqual from '../utils/is-equal';
-import asArray from '../utils/as-array';
+import isEqual from '../utils/is-equal.ts';
+import asArray from '../utils/as-array.ts';
 
-export function filterBy([byPath, value, array]) {
+export function filterBy<T>([byPath, value, array]: [string, T | T[] | undefined, T[]]) {
 
   let isPresent = true;
   if (!isEmberArray(array) && isEmberArray(value)) {
-    array = value;
+    array = value as T[];
     value = undefined;
     isPresent = false;
   }
@@ -24,12 +24,12 @@ export function filterBy([byPath, value, array]) {
 
   if (isPresent) {
     if (typeof value === 'function') {
-      filterFn = (item) => value(get(item, byPath));
+      filterFn = (item: T) => value(get(item, byPath));
     } else {
-      filterFn = (item) => isEqual(get(item, byPath), value);
+      filterFn = (item: T) => isEqual(get(item, byPath), value);
     }
   } else {
-    filterFn = (item) => !!get(item, byPath);
+    filterFn = (item: T) => !!get(item, byPath);
   }
 
   return array.filter(filterFn);

ember-composable-helpers/src/helpers/filter.js → ember-composable-helpers/src/helpers/filter.ts

@@ -1,8 +1,8 @@
 import { helper } from '@ember/component/helper';
 import { isEmpty } from '@ember/utils';
-import asArray from '../utils/as-array';
+import asArray from '../utils/as-array.ts';
 
-export function filter([callback, array]) {
+export function filter<T>([callback, array]: [(value: T, index: number, array: T[]) => value is T, T[]]) {
   if (isEmpty(callback) || !array) {
     return [];
   }

ember-composable-helpers/src/helpers/find-by.js → ember-composable-helpers/src/helpers/find-by.ts

@@ -1,9 +1,9 @@
 import { helper } from '@ember/component/helper';
 import { isEmpty } from '@ember/utils';
 import { A as emberArray } from '@ember/array';
-import asArray from '../utils/as-array';
+import asArray from '../utils/as-array.ts';
 
-export function findBy([byPath, value, array]) {
+export function findBy<T>([byPath, value, array]: [keyof T, T[keyof T], T[]]) {
   if (isEmpty(byPath)) {
     return [];
   }

ember-composable-helpers/src/helpers/flatten.ts

@@ -0,0 +1,17 @@
+import { helper } from '@ember/component/helper';
+import { isArray as isEmberArray } from '@ember/array';
+import asArray from '../utils/as-array.ts';
+
+export function flatten<T>(array: T[]): T[] {
+  if (!isEmberArray(array)) {
+    return array;
+  }
+
+  return asArray(array).reduce<T[]>((flattened, el) => {
+    return flattened.concat(flatten(el as T[]));
+  }, []);
+}
+
+export default helper(function<T>([array]: [T[]]) {
+  return flatten(array);
+});

ember-composable-helpers/src/helpers/from-entries.js → ember-composable-helpers/src/helpers/from-entries.ts

@@ -1,6 +1,6 @@
 import { helper } from '@ember/component/helper';
 
-export function fromEntries([entries]) {
+export function fromEntries([entries]: [[unknown, unknown][]]) {
   if (!entries) {
     return entries;
   }

ember-composable-helpers/src/helpers/group-by.js → ember-composable-helpers/src/helpers/group-by.ts

@@ -1,12 +1,12 @@
 import { helper } from '@ember/component/helper';
 import { get } from '@ember/object';
-import asArray from '../utils/as-array';
+import asArray from '../utils/as-array.ts';
 
-export function groupBy([byPath, array]) {
-  let groups = {};
+export function groupBy<T>([byPath, array]: [string, T[]]) {
+  let groups: { [key: string]: T[] } = {};
 
   asArray(array).forEach((item) => {
-    let groupName = get(item, byPath);
+    let groupName = get(item, byPath) as string;
     let group = groups[groupName];
 
     if (!Array.isArray(group)) {

ember-composable-helpers/src/helpers/has-next.js → ember-composable-helpers/src/helpers/has-next.ts

@@ -1,20 +1,20 @@
 import { helper } from '@ember/component/helper';
 import { isPresent } from '@ember/utils';
-import { next } from './next';
-import isEqual from '../utils/is-equal';
-import getValueArrayAndUseDeepEqualFromParams from '../-private/get-value-array-and-use-deep-equal-from-params';
-import asArray from '../utils/as-array';
+import { next } from './next.ts';
+import isEqual from '../utils/is-equal.ts';
+import getValueArrayAndUseDeepEqualFromParams from '../-private/get-value-array-and-use-deep-equal-from-params.ts';
+import asArray from '../utils/as-array.ts';
 
-export function hasNext(currentValue, maybeArray, useDeepEqual = false) {
+export function hasNext<T>(currentValue: T, maybeArray: T[], useDeepEqual = false) {
   let array = asArray(maybeArray);
   let nextValue = next(currentValue, array, useDeepEqual);
   let isNotSameValue = !isEqual(nextValue, currentValue, useDeepEqual);
 
   return isNotSameValue && isPresent(nextValue);
 }
 
-export default helper(function(params) {
+export default helper(function<T>(params: [T, boolean | T[], T[]?]) {
   let { currentValue, array, useDeepEqual } = getValueArrayAndUseDeepEqualFromParams(params);
 
-  return hasNext(currentValue, array, useDeepEqual);
+  return hasNext(currentValue, array as T[], useDeepEqual);
 });