Add support for Typescript development (#652)

* WIP: Typescript support * WIP * WIP * Lint fixes * Add ts file * Upgrade Prettier and lint * Lint fix * Edit tsconfig include/exclude * Run tsc on lint * Remove separate type check * Convert another file to ts * Remove noEmit * Fix Jest + TS
gladly-team · May 28, 2023 · 522185a · 522185a
1 parent 31f3940
commit 522185a
Show file tree

Hide file tree

Showing 18 changed files with 386 additions and 117 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,6 +1,13 @@
 module.exports = {
-  extends: ['airbnb', 'prettier'],
-  plugins: ['prettier', 'react-hooks'],
+  extends: [
+    'airbnb',
+    'prettier',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:import/typescript',
+  ],
+  parser: '@typescript-eslint/parser',
+  plugins: ['prettier', 'react-hooks', '@typescript-eslint'],
+  root: true,
   rules: {
     'prettier/prettier': 'error',
     'react/jsx-filename-extension': 0,
@@ -26,12 +33,36 @@ module.exports = {
         unnamedComponents: 'arrow-function',
       },
     ],
+    // https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/FAQ.md#i-am-using-a-rule-from-eslint-core-and-it-doesnt-work-correctly-with-typescript-code
+    'no-shadow': 0,
+    '@typescript-eslint/no-shadow': 'error',
+    // https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-use-before-defsine.md
+    'no-use-before-define': 'off',
+    '@typescript-eslint/no-use-before-define': ['error'],
+    // Let eslint manage semicolons
+    '@typescript-eslint/no-extra-semi': 0,
+    'import/no-unresolved': 'error',
+    'import/extensions': [
+      'error',
+      'ignorePackages',
+      {
+        js: 'never',
+        jsx: 'never',
+        ts: 'never',
+        tsx: 'never',
+      },
+    ],
   },
   overrides: [
     // Set Jest rules only for test files.
     // https://stackoverflow.com/a/49211283
     {
-      files: ['**/*.test.js', '**/__mocks__/**/*.js'],
+      files: [
+        '**/*.test.ts',
+        '**/__mocks__/**/*.ts',
+        '**/*.test.js',
+        '**/__mocks__/**/*.js',
+      ],
       extends: ['plugin:jest/recommended'],
       env: {
         jest: true,
@@ -40,33 +71,21 @@ module.exports = {
       rules: {
         'global-require': 0,
         'react/jsx-props-no-spreading': 0,
+        '@typescript-eslint/no-var-requires': 0,
+        '@typescript-eslint/no-empty-function': 0,
       },
     },
     {
       files: ['./codemod/**'],
       rules: {
         'import/no-extraneous-dependencies': 0,
+        '@typescript-eslint/no-var-requires': 0,
       },
     },
-    // Handle TypeScript separately.
     {
-      files: ['**/*.ts', '**/*.tsx'],
-      extends: ['plugin:@typescript-eslint/recommended'],
-      plugins: ['@typescript-eslint'],
-      parser: '@typescript-eslint/parser',
-      settings: {
-        'import/resolver': {
-          // enable `eslint-import-resolver-typescript`
-          typescript: {},
-        },
-      },
+      files: ['./codemod/**/*.fixtures/*'],
       rules: {
-        // https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/FAQ.md#i-am-using-a-rule-from-eslint-core-and-it-doesnt-work-correctly-with-typescript-code
-        'no-shadow': 0,
-        '@typescript-eslint/no-shadow': 'error',
-        // https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-use-before-defsine.md
-        'no-use-before-define': 'off',
-        '@typescript-eslint/no-use-before-define': ['error'],
+        '@typescript-eslint/no-unused-vars': 0,
       },
     },
     {
@@ -89,11 +108,14 @@ module.exports = {
   },
   settings: {
     // Handle linting for absolute imports.
+    'import/parsers': {
+      '@typescript-eslint/parser': ['.ts', '.tsx'],
+    },
     'import/resolver': {
-      alias: [
-        ['codemod', './codemod'],
-        ['src', './src'],
-      ],
+      typescript: {
+        alwaysTryTypes: true,
+      },
+      node: true,
     },
   },
 }
diff --git a/example/components/Header.js b/example/components/Header.js
@@ -1,13 +1,15 @@
 import React from 'react'
 import Link from 'next/link'
 
+/* eslint-disable @typescript-eslint/no-var-requires */
 const nfaDependencyVersion =
   require('../package.json').dependencies['next-firebase-auth']
 const nextDependencyVersion = require('../package.json').dependencies.next
 const firebaseDependencyVersion =
   require('../package.json').dependencies.firebase
 const firebaseAdminDependencyVersion =
   require('../package.json').dependencies['firebase-admin']
+/* eslint-enable @typescript-eslint/no-var-requires */
 
 const styles = {
   container: {

diff --git a/example/next.config.js b/example/next.config.js
@@ -1,6 +1,6 @@
 const config = {}
 
-// eslint-disable-next-line import/no-extraneous-dependencies
+// eslint-disable-next-line import/no-extraneous-dependencies, @typescript-eslint/no-var-requires
 const withBundleAnalyzer = require('@next/bundle-analyzer')({
   enabled: process.env.ANALYZE === 'true',
 })

diff --git a/example/pages/api/login.js b/example/pages/api/login.js
@@ -6,7 +6,7 @@ initAuth()
 const handler = async (req, res) => {
   try {
     // Including unused return value to demonstrate codemod
-    // eslint-disable-next-line no-unused-vars
+    // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
     const { AuthUser } = await setAuthCookies(req, res)
   } catch (e) {
     // eslint-disable-next-line no-console

diff --git a/jest.config.js b/jest.config.js
@@ -1,3 +1,4 @@
+/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
 module.exports = {
   collectCoverageFrom: [
     'src/**/*.{js,jsx,ts,tsx}',
@@ -9,13 +10,18 @@ module.exports = {
   ],
   coverageDirectory: './coverage/',
   setupFilesAfterEnv: ['<rootDir>/jestSetup.js'],
+  // Support absolute imports; e.g. from 'src/*'
+  // https://stackoverflow.com/a/72437265/1332513
+  moduleDirectories: ['node_modules', '<rootDir>'],
   testPathIgnorePatterns: ['/node_modules/', '/.next/', '/.yalc/', '/.git/'],
   transform: {
-    '^.+\\.(js|jsx|ts|tsx)$': '<rootDir>/node_modules/babel-jest',
+    '^.+\\.(js|jsx)$': '<rootDir>/node_modules/babel-jest',
+    '^.+\\.(ts|tsx)$': 'ts-jest',
   },
   transformIgnorePatterns: [
     '/node_modules/(?!(firebase|@firebase)/)',
     '/.yalc/',
     '^.+\\.module\\.(css|sass|scss)$',
   ],
+  testEnvironment: 'node',
 }
diff --git a/package.json b/package.json
@@ -23,16 +23,13 @@
     "build": "npm-run-all -s build:clean build:src",
     "build:clean": "rm -rf ./build",
     "build:src": "NODE_ENV=production webpack",
-    "lint": "eslint ./",
+    "lint": "tsc --noEmit && eslint ./",
     "bundlesize": "npm-run-all -s build bundlesize:no-build",
     "bundlesize:no-build": "bundlesize",
-    "test": "npm-run-all -s install-example-deps lint test:coverage test:types",
+    "test": "npm-run-all -s install-example-deps lint test:coverage",
     "test:run": "jest --env=jsdom",
     "test:coverage": "yarn run test:run --coverage",
     "test:watch": "yarn run test:run --watch",
-    "test:types": "npm-run-all -s test:types:info test:types:run",
-    "test:types:run": "tsc",
-    "test:types:info": "echo \"\n\n******\nReminder: build before testing types!\n******\n\"",
     "install-example-deps": "cd example && yarn",
     "dev:publish": "npm-run-all -s build dev:yalc-publish-push",
     "dev:yalc-publish-push": "yalc publish --push",
@@ -48,6 +45,7 @@
     "@testing-library/react": "^13.3.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@types/cookies": "^0.7.7",
+    "@types/jest": "^28",
     "@typescript-eslint/eslint-plugin": "^5.30.7",
     "@typescript-eslint/parser": "^5.30.7",
     "babel-jest": "^28.1.3",
@@ -61,7 +59,7 @@
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.5.0",
     "eslint-import-resolver-alias": "^1.1.2",
-    "eslint-import-resolver-typescript": "^3.3.0",
+    "eslint-import-resolver-typescript": "^3.5.5",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jest": "^26.6.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
@@ -79,12 +77,15 @@
     "next": "^12.2.3",
     "next-test-api-route-handler": "^3.1.6",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.7.1",
+    "prettier": "^2.8.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
     "regenerator-runtime": "^0.13.9",
     "set-cookie-parser": "^2.5.0",
+    "source-map-loader": "^4.0.1",
+    "ts-jest": "^28",
+    "ts-loader": "^9.4.3",
     "typescript": "^4.7.4",
     "webpack": "^5.73.0",
     "webpack-bundle-analyzer": "^4.5.0",

diff --git a/src/__tests__/isClientSide.client.test.js → src/__tests__/isClientSide.client.test.ts b/src/__tests__/isClientSide.client.test.js → src/__tests__/isClientSide.client.test.ts
diff --git a/src/__tests__/isClientSide.server.test.js → src/__tests__/isClientSide.server.test.ts b/src/__tests__/isClientSide.server.test.js → src/__tests__/isClientSide.server.test.ts
diff --git a/src/config.js b/src/config.js
@@ -28,9 +28,11 @@ const defaultConfig = {
   tokenChangedHandler: undefined,
   // Optional function: handler called if there are unexpected errors while
   // verifying the user's ID token server-side.
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
   onVerifyTokenError: () => {},
   // Optional function: handler called if there are unexpected errors while
   // refreshing the user's ID token server-side.
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
   onTokenRefreshError: () => {},
   // Optional string: the URL to navigate to when the user
   // needs to log in.

diff --git a/src/cookies.js b/src/cookies.js
@@ -24,6 +24,7 @@ export const getCookie = (
     res = {
       getHeader: () => [],
       setHeader: () => ({
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
         call: () => {},
       }),
     },

diff --git a/src/createAuthUser.js b/src/createAuthUser.js
@@ -96,14 +96,15 @@ const createAuthUser = ({
   let getIdTokenFunc = async () => null
 
   // When not on the client side, the "signOut" method is a noop.
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
   let signOutFunc = async () => {}
 
   let tokenString = null // used for serialization
   if (firebaseUserClientSDK) {
     if (isClientSide()) {
-      // eslint-disable-next-line global-require
+      // eslint-disable-next-line global-require, @typescript-eslint/no-var-requires
       const { getApp } = require('firebase/app')
-      // eslint-disable-next-line global-require
+      // eslint-disable-next-line global-require,  @typescript-eslint/no-var-requires
       const { getAuth, signOut } = require('firebase/auth')
 
       signOutFunc = async () => signOut(getAuth(getApp()))

diff --git a/src/index.server.js b/src/index.server.js
@@ -1,4 +1,4 @@
-/* eslint-disable global-require */
+/* eslint-disable global-require, @typescript-eslint/no-var-requires */
 
 import initCommon from 'src/initCommon'
 import AuthAction from 'src/AuthAction'

diff --git a/src/isClientSide.js b/src/isClientSide.js
diff --git a/src/isClientSide.ts b/src/isClientSide.ts
@@ -0,0 +1 @@
+export default (): boolean => typeof window !== 'undefined'
diff --git a/src/testHelpers/createMockConfig.js b/src/testHelpers/createMockConfig.js
@@ -1,7 +1,7 @@
 /* eslint-env jest */
 
 const createMockConfig = ({ clientSide } = {}) => {
-  // eslint-disable-next-line global-require
+  // eslint-disable-next-line global-require, @typescript-eslint/no-var-requires
   const isClientSide = require('src/isClientSide').default
   const useClientSideConfig =
     typeof clientSide === 'undefined' ? isClientSide() : clientSide

diff --git a/tsconfig.json b/tsconfig.json
@@ -1,5 +1,15 @@
 {
   "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "./build",
+    "paths": {
+      "src/*": [
+        "./src/*"
+      ],
+      "codemod/*": [
+        "./codemod/*"
+      ]
+    },
     "target": "es5",
     "lib": [
       "dom",
@@ -10,7 +20,6 @@
     "skipLibCheck": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",
     "moduleResolution": "node",
@@ -19,12 +28,12 @@
     "jsx": "preserve"
   },
   "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx"
+    "**/*"
   ],
   "exclude": [
-    "node_modules",
-    "example"
+    "build",
+    "coverage",
+    "example",
+    "node_modules"
   ]
 }
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const path = require('path')
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
 const nodeExternals = require('webpack-node-externals')
@@ -14,13 +15,24 @@ const sharedConfig = {
     libraryTarget: 'commonjs2',
     libraryExport: 'default',
   },
+  resolve: {
+    extensions: ['.js', '.jx', '.ts', '.tsx'],
+  },
   module: {
     rules: [
+      {
+        test: /\.tsx?$/,
+        exclude: /node_modules/,
+        use: 'ts-loader',
+      },
       {
         test: /\.(js|jsx)$/,
         exclude: /node_modules/,
         use: 'babel-loader',
       },
+
+      // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
+      { test: /\.js$/, loader: 'source-map-loader' },
     ],
   },
   externals: [
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export default (): boolean => typeof window !== 'undefined'