Update the packaging to split the bundles into esmodule and commonjs #55

johnpmitsch · 2023-05-20T16:32:26Z

The package uses this approach that bundles two different packages, one for esmodules and one for commonsjs, and then uses the exports value in package.json to determine which package to use.

Basically this will:

build two bundles, the commonjs one in dist/packages/libs/sdk/cjs and the esmoudle one in dist/packages/libs/sdk/esm.
copy over the package.json to dist/packages/libs/sdk/ with the exports section specifying the different imports
Run a custom script to add a package.json to each bundle's directory with the correct "type" filled out

Each bundle uses the correct imports for the module system:

Here is the npm pack output:

Here's an example of using each package in a esm enviroment and a cjs environment, with the types being picked up by intellisense (and it all ran as expected)

This reverts commit a0c6d89.

wip Test fixes

This reverts commit 6921be4.

johnpmitsch · 2023-05-24T17:41:42Z

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

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


Just updated the name here and in the docs and code for consistency

johnpmitsch · 2023-05-24T17:44:24Z

packages/libs/sdk/codegen.yml

I had to update this to yaml file since we are now using type: "module" which doesn't play nice with codegen - see issue here

johnpmitsch · 2023-05-24T17:46:25Z

packages/libs/sdk/package.json

-  "main": "./src/index.js",
-  "module": "./src/index.esm.js",
-  "types": "./src/index.d.ts",
+  "type": "module",


I updated this because I'm trying to optimize for esmodules, so figured it would be helpful if this is the default locally. I don't think it matters which we use locally because of the individual exports below and the script to add a package.json for each bundle's subdirectory (tools/scripts/sdk_package_json.mjs)

johnpmitsch · 2023-05-24T17:47:47Z

packages/libs/sdk/package.json

+    ".": {
+      "import": "./esm/index.js",
+      "require": "./cjs/index.js"
+    }


Here is the part that dynamically will import the correct bundle based on whether the package is imported with require or import

johnpmitsch · 2023-05-24T17:49:03Z

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;


This was a small change that I missed from 42a6627, I noticed in the intellisense options when testing out the built package

johnpmitsch · 2023-05-24T17:50:20Z

packages/libs/sdk/src/api/graphql/generatedTypes.ts

Lots of lines removed because I no longer format this by default, which ended up saving a lot of space on the bundle (I think it was around 30kb)

johnpmitsch · 2023-05-24T17:52:17Z

packages/libs/sdk/src/api/graphql/schema.json

With the other codegen changes this got formatted slightly differently, not sure exactly why. In the rollup config we are specifying json({ compact: true }) so it's fine to be formatted here.

johnpmitsch · 2023-05-24T17:52:29Z

packages/libs/sdk/src/api/types/nfts/getByWalletAddress.ts

-  CodegenEthMainnetWalletNFTsByAddressQueryVariables & {
-    contractAddresses?: string[];
-  };
+  CodegenEthMainnetWalletNFTsByAddressQueryVariables;


This was a small change that I missed from 42a6627, I noticed in the intellisense options when testing out the built package, it's not a valid option.

johnpmitsch · 2023-05-24T17:54:48Z

packages/libs/sdk/tsconfig.json

@@ -8,7 +8,6 @@
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "esModuleInterop": true,
-    "declaration": true,


we generate these with the rollup dts plugin

johnpmitsch · 2023-05-24T17:56:24Z

packages/libs/sdk/tsconfig.lib.json

-    "types": ["node"],
-    "declaration": true
+    "target": "ES2020",
+    "module": "ES2020",


Targeting nodejs 16+
https://github.com/microsoft/TypeScript/wiki/Node-Target-Mapping
https://node.green/

johnpmitsch · 2023-05-24T19:38:58Z

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

It's not ideal but I had to add this back, it was removed in #56 because I thought we no longer needed it.

I'm seeing this error, if I re-record the failing tests it will show up on other previously passing tests. This was similar to the apollo errors I saw that required this, IIRC it basically came down to race conditions because of the speed at the tests are executed. Can look into it more when I get a chance

Getting the actual error, it's the same as the one I ran into with Apollo, I have to dig into it a bit more of the why here, it could have something to do with the http request mocking

CombinedError: [Network] req.setHeader is not a function at operation (/Users/johnmitsch/qn-oss/packages/libs/sdk/node_modules/@urql/core/src/utils/result.ts:168:1) at networkMode (/Users/johnmitsch/qn-oss/packages/libs/sdk/node_modules/@urql/core/src/internal/fetchSource.ts:151:1) at processTicksAndRejections (node:internal/process/task_queues:96:5) at /Users/johnmitsch/qn-oss/packages/libs/sdk/node_modules/wonka/dist/wonka.js:342:20

johnpmitsch added 20 commits May 17, 2023 21:57

esm working?

ce140d0

esm config minified

690d076

wip

2b3c81b

wip

093bb7c

wip

8655ea2

wip

5eac38f

esm build working?

6240ed4

wip

8582416

replace apollo/client/core

a0c6d89

Revert "replace apollo/client/core"

0948633

This reverts commit a0c6d89.

wip

f2cd08d

working

29f9a8b

working without apollo client

1d9f48c

working with no apollo client

c3787d8

errors working

fa552d3

update .gitignore

1aa8081

update .gitignore

25ed3c3

Refactor tsconfig and add one for cjs

344670c

cjs working?

26e4756

wip

bced3d6

johnpmitsch marked this pull request as draft May 20, 2023 16:32

Update from @apollo/client to urql

6921be4

wip Test fixes

johnpmitsch force-pushed the v1packaging_urql branch from 03c5ad1 to 6921be4 Compare May 20, 2023 16:52

packaging tweaks

bab4eab

johnpmitsch changed the title ~~Urql WIP~~ Update to use urql May 22, 2023

johnpmitsch added 4 commits May 21, 2023 21:49

Remove old rollup plugins

d2bef72

Remove dts-bundle-generator

8b81f99

Add externals plugin to cjs too

11f5318

Revert "Update from @apollo/client to urql"

5e5a30a

This reverts commit 6921be4.

johnpmitsch changed the title ~~Update to use urql~~ Update the packaging to split the bundles into esmodule and commonjs packages May 23, 2023

johnpmitsch changed the title ~~Update the packaging to split the bundles into esmodule and commonjs packages~~ Update the packaging to split the bundles into esmodule and commonjs May 23, 2023

johnpmitsch added 5 commits May 24, 2023 09:37

Merge remote-tracking branch 'origin/main' into v1packaging_urql

d641fd9

tests working

1838118

Update codegen

f3b8215

Don't minify generated types

67e61dd

packaging updates

d44851a

johnpmitsch marked this pull request as ready for review May 24, 2023 17:38

Remove unnecessary packages

dd584ed

johnpmitsch commented May 24, 2023

View reviewed changes

Update tsconfig references

162873c

johnpmitsch commented May 24, 2023

View reviewed changes

johnpmitsch added 4 commits May 24, 2023 13:57

Update tsconfig spec

8709eb7

Update formatting

7ba8214

Remove type from package.json

0647405

Added jest timeout back

d103a04

johnpmitsch commented May 24, 2023

View reviewed changes

AlejandroFabianCampos approved these changes May 25, 2023

View reviewed changes

johnpmitsch merged commit 10673af into main May 25, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update the packaging to split the bundles into esmodule and commonjs #55

Update the packaging to split the bundles into esmodule and commonjs #55

johnpmitsch commented May 20, 2023 •

edited

Loading

johnpmitsch May 24, 2023

johnpmitsch May 24, 2023 •

edited

Loading

johnpmitsch May 24, 2023

johnpmitsch May 24, 2023

johnpmitsch May 24, 2023

johnpmitsch May 24, 2023

johnpmitsch May 24, 2023

johnpmitsch May 24, 2023

johnpmitsch May 24, 2023

johnpmitsch May 24, 2023

johnpmitsch May 24, 2023

johnpmitsch May 25, 2023 •

edited

Loading

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

Update the packaging to split the bundles into esmodule and commonjs #55

Update the packaging to split the bundles into esmodule and commonjs #55

Conversation

johnpmitsch commented May 20, 2023 • edited Loading

Choose a reason for hiding this comment

johnpmitsch May 24, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

johnpmitsch May 25, 2023 • edited Loading

Choose a reason for hiding this comment

johnpmitsch commented May 20, 2023 •

edited

Loading

johnpmitsch May 24, 2023 •

edited

Loading

johnpmitsch May 25, 2023 •

edited

Loading