Merge pull request #81 from Bagaar/TS

Migrate to TypeScript

.ember-cli

@@ -1,15 +1,7 @@
 {
-  /**
-    Ember CLI sends analytics information by default. The data is completely
-    anonymous, but there are times when you might want to disable this behavior.
-
-    Setting `disableAnalytics` to true will prevent any data from being sent.
-  */
-  "disableAnalytics": false,
-
   /**
     Setting `isTypeScriptProject` to true will force the blueprint generators to generate TypeScript
     rather than JavaScript by default, when a TypeScript version of a given blueprint is available.
   */
-  "isTypeScriptProject": false
+  "isTypeScriptProject": true
 }

.eslintrc.js

@@ -2,18 +2,11 @@
 
 module.exports = {
   root: true,
-  parser: '@babel/eslint-parser',
+  parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaVersion: 'latest',
-    sourceType: 'module',
-    requireConfigFile: false,
-    babelOptions: {
-      plugins: [
-        ['@babel/plugin-proposal-decorators', { decoratorsBeforeExport: true }],
-      ],
-    },
   },
-  plugins: ['ember'],
+  plugins: ['ember', '@typescript-eslint'],
   extends: [
     'eslint:recommended',
     'plugin:ember/recommended',
@@ -24,6 +17,15 @@ module.exports = {
   },
   rules: {},
   overrides: [
+    // ts files
+    {
+      files: ['**/*.ts'],
+      extends: [
+        'plugin:@typescript-eslint/eslint-recommended',
+        'plugin:@typescript-eslint/recommended',
+      ],
+      rules: {},
+    },
     // node files
     {
       files: [
@@ -39,9 +41,6 @@ module.exports = {
         './config/**/*.js',
         './tests/dummy/config/**/*.js',
       ],
-      parserOptions: {
-        sourceType: 'script',
-      },
       env: {
         browser: false,
         node: true,

.github/workflows/ci.yml

@@ -22,7 +22,7 @@ jobs:
       - name: Install Node
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           cache: yarn
       - name: Install Dependencies
         run: yarn install --frozen-lockfile
@@ -40,7 +40,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           cache: yarn
       - name: Install Dependencies
         run: yarn install --no-lockfile
@@ -57,7 +57,6 @@ jobs:
       fail-fast: false
       matrix:
         try-scenario:
-          - ember-lts-4.4
           - ember-lts-4.8
           - ember-lts-4.12
           - ember-release
@@ -71,7 +70,7 @@ jobs:
       - name: Install Node
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           cache: yarn
       - name: Install Dependencies
         run: yarn install --frozen-lockfile

.gitignore

@@ -1,5 +1,6 @@
 # compiled output
 /dist/
+/declarations/
 
 # dependencies
 /node_modules/

.npmignore

@@ -24,6 +24,9 @@
 /ember-cli-build.js
 /testem.js
 /tests/
+/types/
+/tsconfig.declarations.json
+/tsconfig.json
 /yarn-error.log
 /yarn.lock
 .gitkeep

CONTRIBUTING.md

@@ -13,13 +13,13 @@
 
 ## Running tests
 
-* `ember test` – Runs the test suite on the current Ember version
-* `ember test --server` – Runs the test suite in "watch mode"
-* `ember try:each` – Runs the test suite against multiple Ember versions
+* `yarn test` – Runs the test suite on the current Ember version
+* `yarn test:ember --server` – Runs the test suite in "watch mode"
+* `yarn test:ember-compatibility` – Runs the test suite against multiple Ember versions
 
 ## Running the dummy application
 
-* `ember serve`
+* `yarn start`
 * Visit the dummy application at [http://localhost:4200](http://localhost:4200).
 
 For more information on using ember-cli, visit [https://cli.emberjs.com/release/](https://cli.emberjs.com/release/).

README.md

@@ -18,9 +18,9 @@ Easy customisable pagination component for Ember applications.
 
 ## Compatibility
 
-- Ember.js v4.4 or above
-- Ember CLI v4.4 or above
-- Node.js v16 or above
+- Ember.js v4.8 or above
+- Ember CLI v4.8 or above
+- Node.js v18 or above
 
 ## Installation
 

addon/components/pagination-data/index.js → addon/components/pagination-data/index.ts

@@ -1,24 +1,60 @@
 import { assert } from '@ember/debug';
 import Component from '@glimmer/component';
 
+interface PaginationDataSignature {
+  Args: {
+    currentPage: number;
+    itemsPerPage: number;
+    pageMargins?: number;
+    pageRange?: number;
+    totalItems: number;
+  };
+  Blocks: {
+    default: [
+      {
+        activeItems: number;
+        allPages: number[];
+        currentPage: number;
+        endMarginPages: number[] | null;
+        firstActiveItem: number;
+        isFirstPage: boolean;
+        isLastPage: boolean;
+        itemsPerPage: number;
+        lastActiveItem: number;
+        lastPage: number;
+        nextPage: number | null;
+        pageMargins: number;
+        pageRange: number | null;
+        pageRangePages: number[] | null;
+        previousPage: number | null;
+        shouldShowLowerBreak: boolean;
+        shouldShowUpperBreak: boolean;
+        startMarginPages: number[] | null;
+        totalItems: number;
+        totalPages: number;
+      },
+    ];
+  };
+}
+
 const DISABLED = null;
 const FIRST_PAGE = 1;
 
-export default class PaginationDataComponent extends Component {
+export default class PaginationData extends Component<PaginationDataSignature> {
   /**
    * Argument getters
    */
 
   get currentPage() {
     assert(
       `@currentPage is required and must be a number. You provided \`${this.args.currentPage}\`.`,
-      isNumber(this.args.currentPage)
+      typeof this.args.currentPage === 'number',
     );
 
     assert(
       `@currentPage must be a value between \`${FIRST_PAGE}\` and \`${this.lastPage}\`. You provided \`${this.args.currentPage}\`.`,
       this.args.currentPage >= FIRST_PAGE &&
-        this.args.currentPage <= this.lastPage
+        this.args.currentPage <= this.lastPage,
     );
 
     return this.args.currentPage;
@@ -27,33 +63,33 @@ export default class PaginationDataComponent extends Component {
   get itemsPerPage() {
     assert(
       `@itemsPerPage is required and must be a number. You provided \`${this.args.itemsPerPage}\`.`,
-      isNumber(this.args.itemsPerPage)
+      typeof this.args.itemsPerPage === 'number',
     );
 
     return this.args.itemsPerPage;
   }
 
   get pageMargins() {
-    if (isNumber(this.args.pageMargins) === false) {
+    if (typeof this.args.pageMargins !== 'number') {
       return 1;
     }
 
     assert(
       `@pageMargins must be a number higher than \`0\`. You provided \`${this.args.pageMargins}\`.`,
-      this.args.pageMargins > 0
+      this.args.pageMargins > 0,
     );
 
     return this.args.pageMargins;
   }
 
   get pageRange() {
-    if (isNumber(this.args.pageRange) === false) {
+    if (typeof this.args.pageRange !== 'number') {
       return null;
     }
 
     assert(
       `@pageRange must be an uneven number to make sure that the active page is always center aligned. You provided \`${this.args.pageRange}\`.`,
-      this.args.pageRange % 2 !== 0
+      this.args.pageRange % 2 !== 0,
     );
 
     return this.args.pageRange;
@@ -62,7 +98,7 @@ export default class PaginationDataComponent extends Component {
   get totalItems() {
     assert(
       `@totalItems is required and must be a number. You provided \`${this.args.totalItems}\`.`,
-      isNumber(this.args.totalItems)
+      typeof this.args.totalItems === 'number',
     );
 
     return this.args.totalItems;
@@ -133,7 +169,7 @@ export default class PaginationDataComponent extends Component {
   }
 
   get pageMarginsThreshold() {
-    return this.pageRange + this.pageMargins * 2;
+    return (this.pageRange || 0) + this.pageMargins * 2;
   }
 
   get pageRangeLowerLimit() {
@@ -185,7 +221,8 @@ export default class PaginationDataComponent extends Component {
     }
 
     return (
-      this.pageRangePages.length &&
+      Array.isArray(this.pageRangePages) &&
+      this.pageRangePages.length > 0 &&
       this.pageRangePages[0] !== this.pageRangeLowerLimit
     );
   }
@@ -200,7 +237,8 @@ export default class PaginationDataComponent extends Component {
     }
 
     return (
-      this.pageRangePages.length &&
+      Array.isArray(this.pageRangePages) &&
+      this.pageRangePages.length > 0 &&
       this.pageRangePages[this.pageRangePages.length - 1] !==
         this.pageRangeUpperLimit
     );
@@ -225,14 +263,10 @@ export default class PaginationDataComponent extends Component {
   }
 }
 
-function clamp(number, min, max) {
+function clamp(number: number, min: number, max: number) {
   return Math.min(Math.max(number, min), max);
 }
 
-function isNumber(value) {
-  return typeof value === 'number' && isNaN(value) === false;
-}
-
-function range(start, end) {
+function range(start: number, end: number) {
   return new Array(end - start + 1).fill(undefined).map((_, i) => i + start);
 }

addon/template-registry.ts

@@ -0,0 +1,5 @@
+import type PaginationData from '@bagaar/ember-pagination/components/pagination-data';
+
+export default interface Registry {
+  PaginationData: typeof PaginationData;
+}

ember-cli-build.js

@@ -4,7 +4,9 @@ const EmberAddon = require('ember-cli/lib/broccoli/ember-addon');
 
 module.exports = function (defaults) {
   const app = new EmberAddon(defaults, {
-    // Add options here
+    'ember-cli-babel': {
+      enableTypeScriptTransform: true,
+    },
   });
 
   /*

index.js

@@ -2,4 +2,10 @@
 
 module.exports = {
   name: require('./package').name,
+
+  options: {
+    'ember-cli-babel': {
+      enableTypeScriptTransform: true,
+    },
+  },
 };