feat: convert to typescript (okta#44)

OKTA-323466 <<<Jenkins Check-In of Tested SHA: d24d45e for [email protected]>>> Artifact: okta-react
jkotanchik-SB · Nov 20, 2020 · 7c25dfb · 7c25dfb
1 parent e24844c
commit 7c25dfb
Show file tree

Hide file tree

Showing 38 changed files with 752 additions and 537 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -4,23 +4,17 @@ const packageJson = require('./package.json');
 const devDependencies = Object.keys(packageJson.devDependencies || {});
 
 module.exports = {
+  root: true,
   extends: [
     'eslint:recommended',
     'plugin:react/recommended',
-    'plugin:node/recommended-script',
-    'plugin:jest/recommended'
   ],
   plugins: [
     'react',
-    'react-hooks',
-    'node',
-    'jest'
+    'react-hooks'
   ],
   rules: {
     'react/prop-types': 0,
-    'react-hooks/rules-of-hooks': 'error',
-    'react-hooks/exhaustive-deps': 'warn',
-    'semi': ['error', 'always'],
   },
   settings: {
     react: {
@@ -29,52 +23,38 @@ module.exports = {
   },
   overrides: [
     {
-      // ES6/browser processed by Babel
+      // NodeJS build tools
       files: [
-        'src/**/*',
-        'test/jest/**/*',
-        'test/e2e/harness/src/**/*',
-        'test/e2e/harness/e2e/**/*',
-        'rollup.config.js'
+        'build.js', 
+        'env.js', 
+        'util/**/*', 
+        'config-overrides.js',
+        'protractor.conf.js',
+        '.eslintrc.js',
+        'babel.config.js',
+        'jest.config.js'
       ],
-      parser: '@babel/eslint-parser',
-      parserOptions: {
-        ecmaVersion: 2020,
-        sourceType: 'module'
-      },
+      plugins: ['node'],
       env: {
-        browser: true,
-        es6: true,
-        node: false
+        node: true,
+        es6: true
       },
       rules: {
-        'node/no-unsupported-features/es-syntax': 0,
-        'node/no-unsupported-features/node-builtins': 0,
-        'node/no-unpublished-import': ['error', {
+        'node/no-unpublished-require': ['error', {
           'allowModules': devDependencies
-        }]
+        }]    
       }
     },
     {
-      // Jest specs
-      files: ['test/jest/**/*'],
-      env: {
-        jest: true
+      // rollup.config.js
+      files: ['rollup.config.js'],
+      parserOptions: {
+        sourceType: 'module',
+        ecmaVersion: 2020
       },
-      rules: {
-        'node/no-unpublished-import': ['error', {
-          'allowModules': devDependencies
-        }]
-      }
-    },
-    {
-      // NodeJS build tools
-      files: ['build.js', 'env.js', 'util/**/*'],
-      rules: {
-        'node/no-unpublished-require': ['error', {
-          'allowModules': devDependencies
-        }]    
+      env: {
+        node: true
       }
     }
   ]
-};
+}
diff --git a/.gitignore b/.gitignore
@@ -5,3 +5,5 @@ testenv
 /test-reports
 .yalc
 yalc.lock
+.yarnrc
+.yarn
diff --git a/jest.config.js b/jest.config.js
@@ -7,6 +7,13 @@ module.exports = {
     './src/**',
     '!./test/**'
   ],
+  globals: {
+    'ts-jest': {
+      diagnostics: {
+        warnOnly: true
+      }
+    }
+  },
   reporters: [
     'default',
     'jest-junit'
@@ -19,7 +26,8 @@ module.exports = {
     './test/jest'
   ],
   setupFiles: [
-    './test/jest/setup.js'
+    './test/jest/setup.ts'
   ],
-  testEnvironment: 'jsdom'
+  testEnvironment: 'jsdom',
+  transform: { '^.+\\.tsx?$': 'ts-jest' }
 };
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
   ],
   "main": "dist/bundles/okta-react.cjs.js",
   "module": "dist/bundles/okta-react.esm.js",
+  "types": "dist/bundles/types",
   "author": "",
   "license": "Apache-2.0",
   "bugs": {
@@ -42,6 +43,7 @@
   },
   "peerDependencies": {
     "@okta/okta-auth-js": "^4.1.0",
+    "@types/react-router-dom": "^5.1.6",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
     "react-router-dom": ">=5.1.0"
@@ -58,6 +60,12 @@
     "@okta/okta-auth-js": "^4.1.2",
     "@rollup/plugin-babel": "^5.2.1",
     "@rollup/plugin-replace": "^2.3.4",
+    "@types/enzyme": "^3.10.8",
+    "@types/enzyme-adapter-react-16": "^1.0.6",
+    "@types/jest": "^26.0.15",
+    "@types/react-router-dom": "^5.1.6",
+    "@typescript-eslint/eslint-plugin": "^4.8.1",
+    "@typescript-eslint/parser": "^4.8.1",
     "axios": "^0.21.0",
     "babel-jest": "^26.6.3",
     "chalk": "^4.1.0",
@@ -85,7 +93,10 @@
     "rollup": "^2.33.1",
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-terser": "^7.0.2",
-    "shelljs": "^0.8.4"
+    "rollup-plugin-typescript2": "^0.29.0",
+    "shelljs": "^0.8.4",
+    "ts-jest": "^26.4.4",
+    "typescript": "^4.0.5"
   },
   "jest-junit": {
     "outputDirectory": "./test-reports/unit/",

diff --git a/rollup.config.js b/rollup.config.js
@@ -2,45 +2,59 @@ import babel from '@rollup/plugin-babel';
 import replace from '@rollup/plugin-replace';
 import cleanup from 'rollup-plugin-cleanup';
 import { terser } from 'rollup-plugin-terser';
+import typescript from 'rollup-plugin-typescript2';
 import pkg from "./package.json";
 
 require('./env'); // set variables in process.env
 
-const external = [
-  ...Object.keys(pkg.peerDependencies || {}),
-  ...Object.keys(pkg.dependencies || {}),
-];
+const makeExternalPredicate = () => {
+  const externalArr = [
+    ...Object.keys(pkg.peerDependencies || {}),
+    ...Object.keys(pkg.dependencies || {}),
+  ];
 
-const makeExternalPredicate = externalArr => {
   if (externalArr.length === 0) {
     return () => false;
   }
   const pattern = new RegExp(`^(${externalArr.join("|")})($|/)`);
   return id => pattern.test(id);
 };
 
+const extensions = ['js', 'jsx', 'ts', 'tsx'];
+
+const input = 'src/index.ts';
+const external = makeExternalPredicate();
 const commonPlugins = [
+  typescript({
+    // eslint-disable-next-line node/no-unpublished-require
+    typescript: require('typescript'),
+    useTsconfigDeclarationDir: true
+  }),
   replace({
     'process.env.PACKAGE_NAME': JSON.stringify(process.env.PACKAGE_NAME),
     'process.env.PACKAGE_VERSION': JSON.stringify(process.env.PACKAGE_VERSION)
   }),
-  cleanup()
+  cleanup({ 
+    extensions,
+    comments: 'none'
+  })
 ];
 
 export default [
   {
-    input: 'src/index.js',
-    external: makeExternalPredicate(external),
+    input,
+    external,
     plugins: [
+      ...commonPlugins,
       babel({
         babelrc: false,
         babelHelpers: 'bundled',
         presets: [
           '@babel/preset-env',
           '@babel/preset-react'
-        ]
+        ],
+        extensions
       }),
-      ...commonPlugins,
       terser()
     ],
     output: {
@@ -57,9 +71,10 @@ export default [
     }
   },
   {
-    input: 'src/index.js',
-    external: makeExternalPredicate(external),
+    input: 'src/index.ts',
+    external,
     plugins: [
+      ...commonPlugins,
       babel({
         babelHelpers: 'runtime',
         presets: [
@@ -68,9 +83,9 @@ export default [
         ],
         plugins: [
           '@babel/plugin-transform-runtime'
-        ]
+        ],
+        extensions
       }),
-      ...commonPlugins
     ],
     output: [
       {

diff --git a/src/.eslintrc.js b/src/.eslintrc.js
@@ -0,0 +1,11 @@
+module.exports = {
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  },
+  extends: [
+    'plugin:@typescript-eslint/eslint-recommended',
+    'plugin:@typescript-eslint/recommended'
+  ]
+}
diff --git a/src/LoginCallback.js → src/LoginCallback.tsx b/src/LoginCallback.js → src/LoginCallback.tsx
@@ -10,17 +10,19 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import React, { useEffect } from 'react';
+import * as React from 'react';
 import { useOktaAuth } from './OktaContext';
 import OktaError from './OktaError';
 
-const LoginCallback = ({ errorComponent }) => { 
+const LoginCallback: React.FC<{ 
+  errorComponent?: React.ComponentType<{ error: Error }>
+}> = ({ errorComponent }) => { 
   const { oktaAuth, authState } = useOktaAuth();
   const authStateReady = !authState.isPending;
 
-  let ErrorReporter = errorComponent || OktaError;
+  const ErrorReporter = errorComponent || OktaError;
 
-  useEffect(() => {
+  React.useEffect(() => {
     oktaAuth.handleLoginRedirect();
   }, [oktaAuth]);
 

diff --git a/src/OktaContext.js → src/OktaContext.ts b/src/OktaContext.js → src/OktaContext.ts
@@ -9,10 +9,19 @@
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
-import React, { useContext } from 'react';
+import * as React from 'react';
+import { AuthState, OktaAuth } from '@okta/okta-auth-js';
 
-const OktaContext = React.createContext();
+export type OnAuthRequiredFunction = (oktaAuth: OktaAuth) => Promise<void>;
 
-export const useOktaAuth = () => useContext(OktaContext);
+export interface IOktaContext {
+    oktaAuth: OktaAuth;
+    authState: AuthState;
+    _onAuthRequired: OnAuthRequiredFunction;
+}
+
+const OktaContext = React.createContext<IOktaContext | null>(null);
+
+export const useOktaAuth = (): IOktaContext => React.useContext(OktaContext);
 
 export default OktaContext;
diff --git a/src/OktaError.js → src/OktaError.tsx b/src/OktaError.js → src/OktaError.tsx
@@ -10,9 +10,9 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import React from 'react';
+import * as React from 'react';
 
-const OktaError = ({ error }) => { 
+const OktaError: React.FC<{ error: Error }> = ({ error }) => { 
   if(error.name && error.message) { 
     return <p>{error.name}: {error.message}</p>;
   }
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,3 +5,5 @@ testenv @@
     /test-reports
     .yalc
     yalc.lock
+    .yarnrc
+    .yarn