feat: TypeScript conversion of the codebase (#799)

* trying to setup typescript transpiling in graphql-hooks

* GraphQLClient file converted to typescript

* progress on typescript working, need to fix rollup bundling

* rollup build working with esbuild + type checks passing

* my comment in the ci.yml file seems to break the ci check...

* add proper generation of `.d.ts` types

* type generation improvements, trying to fix the typescript example

* fixed a type issue with the typescript example + removed obsolete tsd from the graphql-hooks package

* fixed last tests

* type fix + conversion of local graphql client to typescript

* chore: improve naming around graphql-ws client type

* chore: set client context's default value to null

Co-authored-by: Wilk Maia <[email protected]>

Author: liana-p

.github/workflows/ci.yml

@@ -25,6 +25,7 @@ jobs:
       - run: npm run lint
       - run: npm run test:coverage
       - run: npm run tsd
+      - run: npm run check-types
       - uses: coverallsapp/[email protected]
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}

config/rollup.config.js

@@ -5,117 +5,125 @@ import replace from 'rollup-plugin-replace'
 import commonjs from 'rollup-plugin-commonjs'
 import { terser } from 'rollup-plugin-terser'
 import { sizeSnapshot } from 'rollup-plugin-size-snapshot'
+import esbuild from 'rollup-plugin-esbuild' // Used for TS transpiling
 
 // get the package.json for the current package
 const packageDir = path.join(__filename, '..')
 const pkg = require(`${packageDir}/package.json`)
 const external = [...Object.keys(pkg.peerDependencies || {})]
 
 // name will be used as the global name exposed in the UMD bundles
-const generateRollupConfig = (name, overrides = {}) => [
+const generateRollupConfig = ({ name, overrides, entryPoint }) => {
+  overrides = overrides || {}
+  entryPoint = entryPoint || 'src/index.js'
   // CommonJS
-  {
-    input: 'src/index.js',
-    output: { file: `lib/${pkg.name}.js`, format: 'cjs', indent: false },
-    external,
-    plugins: [babel(), sizeSnapshot()],
-    ...overrides
-  },
-
-  // ES
-  {
-    input: 'src/index.js',
-    output: { file: `es/${pkg.name}.js`, format: 'es', indent: false },
-    external,
-    plugins: [babel(), sizeSnapshot()],
-    ...overrides
-  },
+  return [
+    {
+      input: entryPoint,
+      output: { file: `lib/${pkg.name}.js`, format: 'cjs', indent: false },
+      external,
+      plugins: [commonjs(), esbuild(), babel(), sizeSnapshot()],
+      ...overrides
+    },
 
-  // ES for Browsers
-  {
-    input: 'src/index.js',
-    output: { file: `es/${pkg.name}.mjs`, format: 'es', indent: false },
-    external,
-    plugins: [
-      commonjs(),
-      nodeResolve({
-        jsnext: true
-      }),
-      replace({
-        'process.env.NODE_ENV': JSON.stringify('production')
-      }),
-      terser({
-        compress: {
-          pure_getters: true,
-          unsafe: true,
-          unsafe_comps: true,
-          warnings: false
-        }
-      }),
-      sizeSnapshot()
-    ],
-    ...overrides
-  },
+    // ES
+    {
+      input: entryPoint,
+      output: { file: `es/${pkg.name}.js`, format: 'es', indent: false },
+      external,
+      plugins: [commonjs(), esbuild(), babel(), sizeSnapshot()],
+      ...overrides
+    },
 
-  // UMD Development
-  {
-    input: 'src/index.js',
-    output: {
-      file: `dist/${pkg.name}.js`,
-      format: 'umd',
-      name,
-      indent: false
+    // ES for Browsers
+    {
+      input: entryPoint,
+      output: { file: `es/${pkg.name}.mjs`, format: 'es', indent: false },
+      external,
+      plugins: [
+        commonjs(),
+        nodeResolve({
+          jsnext: true
+        }),
+        esbuild(),
+        replace({
+          'process.env.NODE_ENV': JSON.stringify('production')
+        }),
+        terser({
+          compress: {
+            pure_getters: true,
+            unsafe: true,
+            unsafe_comps: true,
+            warnings: false
+          }
+        }),
+        sizeSnapshot()
+      ],
+      ...overrides
     },
-    external,
-    plugins: [
-      commonjs(),
-      nodeResolve({
-        jsnext: true
-      }),
-      babel({
-        exclude: 'node_modules/**'
-      }),
-      replace({
-        'process.env.NODE_ENV': JSON.stringify('development')
-      }),
-      sizeSnapshot()
-    ],
-    ...overrides
-  },
 
-  // UMD Production
-  {
-    input: 'src/index.js',
-    output: {
-      file: `dist/${pkg.name}.min.js`,
-      format: 'umd',
-      name,
-      indent: false
+    // UMD Development
+    {
+      input: entryPoint,
+      output: {
+        file: `dist/${pkg.name}.js`,
+        format: 'umd',
+        name,
+        indent: false
+      },
+      external,
+      plugins: [
+        commonjs(),
+        nodeResolve({
+          jsnext: true
+        }),
+        esbuild(),
+        babel({
+          exclude: 'node_modules/**'
+        }),
+        replace({
+          'process.env.NODE_ENV': JSON.stringify('development')
+        }),
+        sizeSnapshot()
+      ],
+      ...overrides
     },
-    external,
-    plugins: [
-      commonjs(),
-      nodeResolve({
-        jsnext: true
-      }),
-      babel({
-        exclude: 'node_modules/**'
-      }),
-      replace({
-        'process.env.NODE_ENV': JSON.stringify('production')
-      }),
-      terser({
-        compress: {
-          pure_getters: true,
-          unsafe: true,
-          unsafe_comps: true,
-          warnings: false
-        }
-      }),
-      sizeSnapshot()
-    ],
-    ...overrides
-  }
-]
+
+    // UMD Production
+    {
+      input: entryPoint,
+      output: {
+        file: `dist/${pkg.name}.min.js`,
+        format: 'umd',
+        name,
+        indent: false
+      },
+      external,
+      plugins: [
+        commonjs(),
+        nodeResolve({
+          jsnext: true
+        }),
+        esbuild(),
+        babel({
+          exclude: 'node_modules/**'
+        }),
+        replace({
+          'process.env.NODE_ENV': JSON.stringify('production')
+        }),
+        terser({
+          compress: {
+            pure_getters: true,
+            unsafe: true,
+            unsafe_comps: true,
+            warnings: false
+          }
+        }),
+        sizeSnapshot()
+      ],
+      ...overrides
+    }
+  ]
+}
 
 export default generateRollupConfig

config/tsconfig.base.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "lib": ["es2021", "dom"],
+    "module": "esnext",
+    "target": "es2021",
+    "moduleResolution": "node",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "noFallthroughCasesInSwitch": true,
+    // Eventually those should be switched to more strict options, but we can ease into it while we're converting to typescript
+    "noImplicitAny": false
+  }
+}