Update the packaging to split the bundles into esmodule and commonjs

.gitignore

@@ -48,3 +48,7 @@ Thumbs.db
 
 # secrets
 graphqlHeaders.json
+
+# bundling
+.rollup.cache/
+

.prettierignore

@@ -5,5 +5,6 @@
 
 # Ignore codegen generated file
 # See more: https://www.the-guild.dev/graphql/codegen/docs/integrations/prettier
-/packages/libs/api/sdk/src/graphql/types.ts
-/packages/libs/api/sdk/src/graphql/fragmentMatcher.ts
+packages/libs/sdk/src/api/graphql/generatedTypes.ts
+packages/libs/sdk/src/api/graphql/fragmentMatcher.ts
+packages/libs/sdk/src/api/graphql/schema.json

nx.json

@@ -56,5 +56,6 @@
       "!{projectRoot}/tsconfig.spec.json",
       "!{projectRoot}/jest.config.[jt]s"
     ]
-  }
+  },
+  "neverConnectToCloud": true
 }

package.json

@@ -48,16 +48,19 @@
     "@nrwl/rollup": "16.1.0",
     "@nrwl/webpack": "16.1.0",
     "@nx/eslint-plugin": "~16.1.0",
+    "@nx/express": "~16.1.0",
+    "@nx/jest": "~16.1.0",
     "@nx/js": "~16.1.0",
     "@nx/linter": "~16.1.0",
+    "@nx/node": "~16.1.0",
+    "@nx/react": "~16.1.0",
     "@nx/web": "~16.1.0",
     "@nx/workspace": "~16.1.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
     "@pollyjs/adapter-node-http": "^6.0.5",
     "@pollyjs/core": "^6.0.5",
     "@pollyjs/persister-fs": "^6.0.5",
-    "@rollup/plugin-commonjs": "^22.0.2",
-    "@rollup/plugin-node-resolve": "^14.1.0",
+    "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-typescript": "^8.5.0",
     "@svgr/webpack": "^6.1.2",
     "@testing-library/react": "13.4.0",
@@ -95,6 +98,8 @@
     "react-test-renderer": "18.2.0",
     "rollup": "^2.79.1",
     "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-dts": "^5.3.0",
+    "rollup-plugin-node-externals": "^6.0.1",
     "style-loader": "^3.3.0",
     "stylus": "^0.55.0",
     "stylus-loader": "^7.1.0",
@@ -105,10 +110,6 @@
     "typescript": "5.0.4",
     "url-loader": "^4.1.1",
     "webpack": "^5.76.0",
-    "webpack-merge": "^5.8.0",
-    "@nx/react": "~16.1.0",
-    "@nx/jest": "~16.1.0",
-    "@nx/express": "~16.1.0",
-    "@nx/node": "~16.1.0"
+    "webpack-merge": "^5.8.0"
   }
 }

packages/libs/sdk/.env.example

@@ -0,0 +1 @@
+QUICKNODE_GRAPH_API_KEY=replaceme

packages/libs/sdk/.test.env.example

@@ -1 +1 @@
-QUICKNODE_GQL_API_KEY=replaceme
+QUICKNODE_GRAPH_API_KEY=replaceme

packages/libs/sdk/README.md

@@ -364,7 +364,7 @@ Please submit any questions, issues, or feedback as an [issue in Github](https:/
 
 We recommend using the example application to develop
 
-1. cd `packages/apps/examples/sdk-api`
+1. cd `packages/apps/examples/sdk-api` from `qn-oss` monorepo root
 2. `cp .env.example .env` and add api key
 3. `nx serve apps-examples-sdk-api`
 4. Then you can send requests to the API, for example: `curl http://localhost:3333/api/nftsByAddress/0xbc08dadccc79c00587d7e6a75bb68ff5fd30f9e0`
@@ -383,6 +383,6 @@ Run `nx lint libs-sdk` to execute the lint via [ESLint](https://eslint.org/).
 
 Generate graphql typings via [Codegen](https://www.the-guild.dev/graphql/codegen).
 
-1. cd `packages/libs/sdk`
-2. add a `graphqlHeaders.json` with any authorization headers you want to pass to graphql API
-3. run `yarn run codegen`
+1. navigate to `packages/libs/sdk` from `qn-oss` monorepo root
+1. `cp .env.example .env` and add api key
+1. run `yarn run codegen`

packages/libs/sdk/codegen.yml

@@ -0,0 +1,26 @@
+overwrite: true
+documents:
+  - src/**/*.gql
+  - src/**/!(*.d).{ts,tsx}
+schema:
+  - https://api.quicknode.com/graphql:
+      headers:
+        content-type: application/json
+        x-api-key: '${QUICKNODE_GRAPH_API_KEY}'
+generates:
+  src/api/graphql/generatedTypes.ts:
+    plugins:
+      - typescript
+      - typescript-operations
+      - typed-document-node
+    config:
+      namingConvention: ./codegenCustomNaming.cjs
+      exportFragmentSpreadSubTypes: true
+      inlineFragmentTypes: combine
+      fragmentMasking: false
+  src/api/graphql/fragmentMatcher.ts:
+    plugins:
+      - fragment-matcher
+  src/api/graphql/schema.json:
+    plugins:
+      - introspection

packages/libs/sdk/jest.config.ts

@@ -7,5 +7,7 @@ export default {
   },
   moduleFileExtensions: ['ts', 'js', 'html'],
   setupFiles: ['./spec/testSetup/jestSetup.ts'],
+  setupFilesAfterEnv: ['./spec/testSetup/jestSetupAfterEnv.ts'],
   testEnvironment: 'node',
+  slowTestThreshold: 15,
 };

packages/libs/sdk/package.json

@@ -7,14 +7,13 @@
   },
   "license": "MIT",
   "version": "1.0.0-alpha.0",
-  "main": "./src/index.js",
-  "module": "./src/index.esm.js",
-  "types": "./src/index.d.ts",
+  "main": "./cjs/index.js",
+  "module": "./esm/index.js",
+  "types": "./index.d.ts",
   "dependencies": {
     "@urql/core": "^4.0.7",
     "@urql/exchange-graphcache": "^6.0.4",
-    "cross-fetch": "^3.1.6",
-    "graphql": "^16.5.0"
+    "cross-fetch": "^3.1.6"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "2.13.8",
@@ -30,10 +29,18 @@
     "@types/mocha": "^10.0.1",
     "@types/node": "^18.13.0",
     "@types/supertest": "^2.0.12",
+    "dotenv": "^16.0.3",
     "eslint-plugin-no-only-tests": "^3.1.0",
+    "graphql": "^16.6.0",
     "supertest": "^6.2.4"
   },
   "scripts": {
-    "codegen": "graphql-codegen --config codegen.ts"
+    "codegen": "graphql-codegen --require dotenv/config"
+  },
+  "exports": {
+    ".": {
+      "import": "./esm/index.js",
+      "require": "./cjs/index.js"
+    }
   }
 }

packages/libs/sdk/project.json

@@ -9,10 +9,10 @@
       "options": {
         "commands": [
           "rm -rf ./dist/packages/libs/sdk",
-          "./node_modules/rollup/dist/bin/rollup --config packages/libs/sdk/rollup.config.js",
-          "yarn tsc --project packages/libs/sdk/tsconfig.lib.json --declarationDir dist --emitDeclarationOnly"
+          "./node_modules/rollup/dist/bin/rollup --config packages/libs/sdk/rollup.mjs",
+          "node ./tools/scripts/sdk_package_json.mjs"
         ],
-        "outputPath": "dist/packages/libs/sdk"
+        "parallel": false
       }
     },
     "publish": {

packages/libs/sdk/rollup.mjs

@@ -0,0 +1,65 @@
+import typescript from '@rollup/plugin-typescript';
+import copy from 'rollup-plugin-copy';
+import externals from 'rollup-plugin-node-externals';
+import dts from 'rollup-plugin-dts';
+import json from '@rollup/plugin-json';
+import path from 'path';
+import { URL } from 'url';
+
+// esm patch for __dirname
+const __dirname = new URL('.', import.meta.url).pathname;
+const rootDir = path.resolve(__dirname);
+const toAbsoluteDir = (relativeDir) => path.resolve(rootDir, relativeDir);
+
+const bundle = (config) => ({
+  input: toAbsoluteDir('./src/index.ts'),
+  ...config,
+});
+
+// The shared rollup plugins for esm and cjs bundles
+const sharedPlugins = [
+  externals(), // Exclude node_modules from bundle
+  json({ compact: true }),
+  typescript({
+    tsconfig: toAbsoluteDir('tsconfig.lib.json'),
+  }),
+];
+
+export default [
+  bundle({
+    output: {
+      file: 'dist/packages/libs/sdk/esm/index.js',
+      format: 'esm',
+    },
+    plugins: [...sharedPlugins],
+  }),
+  bundle({
+    output: {
+      file: 'dist/packages/libs/sdk/cjs/index.js',
+      format: 'cjs',
+      exports: 'named',
+    },
+    plugins: [
+      ...sharedPlugins,
+      copy({
+        targets: [
+          {
+            src: [toAbsoluteDir('README.md'), toAbsoluteDir('package.json')],
+            dest: 'dist/packages/libs/sdk/',
+          },
+        ],
+      }),
+    ],
+  }),
+  bundle({
+    plugins: [
+      dts({
+        input: toAbsoluteDir('./src/index.ts'),
+      }),
+    ], // Rollup the .d.ts files
+    output: {
+      file: 'dist/packages/libs/sdk/index.d.ts',
+      format: 'es',
+    },
+  }),
+];

packages/libs/sdk/spec/api/client.ts

@@ -1,7 +1,7 @@
 import { API } from '../../src';
 
 const opts: Record<string, any> = {
-  graphApiKey: process.env['QUICKNODE_GQL_API_KEY'] || '',
+  graphApiKey: process.env['QUICKNODE_GRAPH_API_KEY'] || '',
 };
 
 export const apiClient = new API(opts);

packages/libs/sdk/spec/testSetup/jestSetupAfterEnv.ts

@@ -0,0 +1,5 @@
+// @ts-ignore
+afterEach(async () => {
+  // pause after tests to avoid race conditions
+  await new Promise((resolve) => setTimeout(resolve, 100));
+});

packages/libs/sdk/src/api/controllers/nfts.ts

@@ -159,7 +159,7 @@ export class NftsController {
   private async getByWalletAddress(
     variables: WalletNFTsByAddressQueryVariablesType & NonQueryInput
   ): Promise<WalletNFTsByAddressFormattedResult> {
-    const { chain, contractAddresses, ...queryVariables } = variables;
+    const { chain, ...queryVariables } = variables;
     const userChain = chain || this.defaultChain;
     const query: Record<ChainName, TypedDocumentNode<any, any>> = {
       ethereum: CodegenEthMainnetWalletNFTsByAddressDocument,