chore: add ts configuration (#868)

And convert pubsub to Typescript.

Author: dcoa

Makefile

@@ -12,10 +12,14 @@ cat_docs_command = cat ./docs/_API-header.md ./docs/_API-body.md > ./docs/API.md
 
 build:
 	rm -rf ./dist
-	./node_modules/.bin/fedx-scripts babel src --out-dir dist --source-maps --ignore **/*.test.jsx,**/*.test.js,**/setupTest.js --copy-files
+	./node_modules/.bin/fedx-scripts babel src --out-dir dist --source-maps --extensions '.js,.jsx,.ts,.tsx' --ignore **/*.test.jsx,**/*.test.js,**/*.test.tsx,**/*.test.ts,**/setupTest.js,**/*.d.ts --copy-files
 	@# --copy-files will bring in everything else that wasn't processed by babel. Remove what we don't want.
 	@find dist -name '*.test.js*' -delete
+	@find dist -name '*.test.ts*' -delete
+	@find dist -name '*.d.ts' -delete
 	rm ./dist/setupTest.js
+	@# Generate .d.ts type declaration files from TypeScript sources
+	./node_modules/.bin/tsc --project tsconfig.build.json
 	cp ./package.json ./dist/package.json
 	cp ./LICENSE ./dist/LICENSE
 	cp ./README.md ./dist/README.md

babel.config.js

@@ -1,3 +1,5 @@
 const { createConfig } = require('@openedx/frontend-build');
 
-module.exports = createConfig('babel-preserve-modules');
+const config = createConfig('babel-preserve-modules');
+config.presets.push('@babel/preset-typescript');
+module.exports = config;

package.json

@@ -3,6 +3,7 @@
   "version": "1.0.0-semantically-released",
   "description": "Foundational application framework for Open edX micro-frontend applications.",
   "main": "index.js",
+  "types": "index.d.ts",
   "publishConfig": {
     "access": "public"
   },
@@ -11,7 +12,7 @@
     "build": "make build",
     "docs": "jsdoc -c jsdoc.json",
     "docs-watch": "nodemon -w src -w docs/template -w README.md -e js,jsx --exec npm run docs",
-    "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
+    "lint": "fedx-scripts eslint --ext .js --ext .jsx --ext .ts --ext .tsx .",
     "i18n_extract": "fedx-scripts formatjs extract",
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",

src/analytics/SegmentAnalyticsService.js

@@ -174,6 +174,7 @@ class SegmentAnalyticsService {
    * @param {*} [traits]
    * @returns {Promise} Promise that will resolve once the document readyState is complete
    */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   identifyAnonymousUser(traits) { // eslint-disable-line no-unused-vars
     if (!this.segmentInitialized) {
       return Promise.resolve();
@@ -182,7 +183,7 @@ class SegmentAnalyticsService {
     // but we still have a user id associated in segment, reset the local segment state
     // This has to be wrapped in the analytics.ready() callback because the analytics.user()
     // function isn't available until the analytics.js package has finished initializing.
-    return new Promise((resolve, reject) => { // eslint-disable-line no-unused-vars
+    return new Promise((resolve, reject) => { // eslint-disable-line no-unused-vars, @typescript-eslint/no-unused-vars
       global.analytics.ready(() => {
         if (global.analytics.user().id()) {
           global.analytics.reset();

src/auth/AxiosJwtTokenService.js

@@ -124,7 +124,7 @@ export default class AxiosJwtTokenService {
     }
 
     try {
-      return await this.refresh();
+      return await this.refresh(); // eslint-disable-line @typescript-eslint/return-await
     } catch (e) {
       // TODO: Fix these.  They're still using loggingService as a singleton.
       logFrontendAuthError(this.loggingService, e);

src/global.d.ts

@@ -0,0 +1,8 @@
+declare module 'pubsub-js' {
+  const PubSub: {
+    subscribe(type: string, callback: (message: string, data?: unknown) => void): string;
+    unsubscribe(token: string): void;
+    publish(type: string, data?: unknown): boolean;
+  };
+  export default PubSub;
+}

src/pubSub.js src/pubSub.tssrc/pubSub.js renamed to src/pubSub.ts

@@ -20,28 +20,32 @@
 import PubSub from 'pubsub-js';
 
 /**
+ * Subscribes to a PubSub event.
  *
- * @param {string} type
- * @param {function} callback
- * @returns {string} A subscription token that can be passed to `unsubscribe`
+ * @param type - The event type to subscribe to
+ * @param callback - The callback function invoked when the event is published
+ * @returns A subscription token that can be passed to {@link unsubscribe}
  */
-export function subscribe(type, callback) {
+export function subscribe(type: string, callback: (message: string, data: unknown) => void): string {
   return PubSub.subscribe(type, callback);
 }
 
 /**
+ * Unsubscribes from a PubSub event.
  *
- * @param {string} token A subscription token provided by `subscribe`
+ * @param token - A subscription token provided by {@link subscribe}
  */
-export function unsubscribe(token) {
-  return PubSub.unsubscribe(token);
+export function unsubscribe(token: string): void {
+  PubSub.unsubscribe(token);
 }
 
 /**
+ * Publishes a PubSub event.
  *
- * @param {string} type
- * @param {Object} data
+ * @param type - The event type to publish
+ * @param data - The data to pass to subscribers
+ * @returns Whether the event was published successfully
  */
-export function publish(type, data) {
+export function publish(type: string, data?: unknown): boolean {
   return PubSub.publish(type, data);
 }

src/react/PageWrap.jsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/prop-types */
-// eslint-disable-next-line no-unused-vars
+// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
 import React, { useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 

tsconfig.build.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist",
+    "declaration": true,
+    "emitDeclarationOnly": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["dist", "node_modules", "src/**/*.test.*", "src/setupTest.*"]
+}

tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@edx/typescript-config",
+  "compilerOptions": {
+    "rootDir": ".",
+    "outDir": "dist"
+  },
+  "include": ["src/**/*", "example/**/*", "__mocks__/**/*", ".*.js", "*.js", "*.jsx", "*.ts", "*.tsx"],
+  "exclude": ["dist", "node_modules"]
+}