feat: generate TypeScript modules compatible exports map and dist str…

…ucture (#7978)

* feat: generate TypeScript modules compatible exports map

* chore: upgrade to latest bob

* fix: bob check errors

* chore: prettier

* fix: bin path for dev-tests

* revert dev-test code changes

* remove .js for website

* ok no .js here

* revert accidential test string changes

* feat: esm lfg

* chore: add changeset

* chore: run dev tests on both cjs and esm

* chore: upgrade bob to version 3

* chore: test whether the cache is fucked up

* why why oh why

* fix: urql graphcache code

* chore: add changeset

* fix: resolve ESM modules when running graphql-codegen via the esm binary

* chore: remove testing package from the changeset

* fix: also support the esm error code when trying to load a plugin

* chore: patch @urql/introspection so the graphql logic is loaded from the top level export (cjs module)

* chore: remove obsolete prepack command

.changeset/lovely-lies-talk.md

@@ -0,0 +1,7 @@
+---
+'@graphql-codegen/cli': minor
+---
+
+Add bin CLI command for running `graphql-code-generator` in ESM mode. You can now use `graphql-codegen-esm` instead of `graphql-codegen`.
+
+GraphQL Code Generator will continue supporting both ESM and CommonJS in parallel.

.changeset/orange-pants-type.md

@@ -0,0 +1,64 @@
+---
+'@graphql-cli/codegen': minor
+'@graphql-codegen/cli': minor
+'@graphql-codegen/core': minor
+'@graphql-codegen/c-sharp': minor
+'@graphql-codegen/c-sharp-common': minor
+'@graphql-codegen/c-sharp-operations': minor
+'@graphql-codegen/flow': minor
+'@graphql-codegen/flow-operations': minor
+'@graphql-codegen/flow-resolvers': minor
+'@graphql-codegen/java-apollo-android': minor
+'@graphql-codegen/java-common': minor
+'@graphql-codegen/java': minor
+'@graphql-codegen/kotlin': minor
+'@graphql-codegen/java-resolvers': minor
+'@graphql-codegen/add': minor
+'@graphql-codegen/fragment-matcher': minor
+'@graphql-codegen/hasura-allow-list': minor
+'@graphql-codegen/introspection': minor
+'@graphql-codegen/jsdoc': minor
+'@graphql-codegen/schema-ast': minor
+'@graphql-codegen/time': minor
+'@graphql-codegen/urql-introspection': minor
+'@graphql-codegen/visitor-plugin-common': minor
+'@graphql-codegen/typescript-apollo-angular': minor
+'@graphql-codegen/typescript-apollo-client-helpers': minor
+'@graphql-codegen/typescript-document-nodes': minor
+'@graphql-codegen/typescript-enum-array': minor
+'@graphql-codegen/typescript-generic-sdk': minor
+'@graphql-codegen/gql-tag-operations': minor
+'@graphql-codegen/typescript-graphql-apollo': minor
+'@graphql-codegen/typescript-graphql-files-modules': minor
+'@graphql-codegen/typescript-graphql-request': minor
+'@graphql-codegen/typescript-jit-sdk': minor
+'@graphql-codegen/typescript-mongodb': minor
+'@graphql-codegen/typescript-msw': minor
+'@graphql-codegen/named-operations-object': minor
+'@graphql-codegen/typescript-oclif': minor
+'@graphql-codegen/typescript-operations': minor
+'@graphql-codegen/typescript-react-apollo': minor
+'@graphql-codegen/typescript-react-offix': minor
+'@graphql-codegen/typescript-react-query': minor
+'@graphql-codegen/typescript-resolvers': minor
+'@graphql-codegen/typescript-rtk-query': minor
+'@graphql-codegen/typescript-stencil-apollo': minor
+'@graphql-codegen/typescript-type-graphql': minor
+'@graphql-codegen/typed-document-node': minor
+'@graphql-codegen/typescript': minor
+'@graphql-codegen/typescript-urql': minor
+'@graphql-codegen/typescript-urql-graphcache': minor
+'@graphql-codegen/urql-svelte-operations-store': minor
+'@graphql-codegen/typescript-vue-apollo': minor
+'@graphql-codegen/typescript-vue-apollo-smart-ops': minor
+'@graphql-codegen/typescript-vue-urql': minor
+'@graphql-codegen/gql-tag-operations-preset': minor
+'@graphql-codegen/graphql-modules-preset': minor
+'@graphql-codegen/import-types-preset': minor
+'@graphql-codegen/near-operation-file-preset': minor
+'@graphql-codegen/plugin-helpers': minor
+---
+
+Support TypeScript ESM modules (`"module": "node16"` and `"moduleResolution": "node16"`).
+
+[More information on the TypeScript Release Notes.](https://devblogs.microsoft.com/typescript/announcing-typescript-4-7/#ecmascript-module-support-in-node-js)

.changeset/warm-humans-deny.md

@@ -0,0 +1,5 @@
+---
+'@graphql-codegen/typescript-urql-graphcache': patch
+---
+
+Don't depend on schema AST for cache update generation.

.github/workflows/main.yml

@@ -59,6 +59,11 @@ jobs:
   dev-tests:
     name: Validating dev-tests
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        method:
+          - 'cjs'
+          - 'esm'
     steps:
       - name: Checkout
         uses: actions/checkout@v3
@@ -79,12 +84,12 @@ jobs:
         run: yarn build
         env:
           CI: true
-      - name: Test dev-tests
+      - name: Test dev-tests ${{matrix.method}}
         run: |
-          yarn run generate:examples
+          yarn run generate:examples:${{matrix.method}}
           git diff --exit-code -- dev-test/
   esm:
-    name: Testing ESM
+    name: Testing exports integrity
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
@@ -106,8 +111,8 @@ jobs:
         run: yarn build
         env:
           CI: true
-      - name: Test ESM
-        run: node scripts/test-esm.mjs
+      - name: Test ESM & CJS integrity
+        run: yarn bob check
   test:
     name: Unit Test on Node ${{matrix.node_version}} (${{matrix.os}}) and GraphQL v${{matrix.graphql_version}}
     runs-on: ubuntu-latest

.prettierignore

@@ -4,6 +4,7 @@ packages/plugins/flow/flow/tests/flow.js
 packages/presets/gql-tag-operations/tests/fixtures/crlf-operation.ts
 dist/
 .next/
+.bob
 CHANGELOG.md
 .husky/_/
 .changeset/*.md

.vscode/settings.json

@@ -20,5 +20,7 @@
     "coverage": true,
     "npm": true
   },
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
 }

dev-test/githunt/types.urql.tsx

@@ -1059,64 +1059,64 @@ export type GraphCacheKeysConfig = {
 
 export type GraphCacheResolvers = {
   Query?: {
-    feed?: GraphCacheResolver<WithTypename<Query>, QueryFeedArgs, Array<WithTypename<Entry> | string>>;
-    entry?: GraphCacheResolver<WithTypename<Query>, QueryEntryArgs, WithTypename<Entry> | string>;
     currentUser?: GraphCacheResolver<WithTypename<Query>, Record<string, never>, WithTypename<User> | string>;
+    entry?: GraphCacheResolver<WithTypename<Query>, QueryEntryArgs, WithTypename<Entry> | string>;
+    feed?: GraphCacheResolver<WithTypename<Query>, QueryFeedArgs, Array<WithTypename<Entry> | string>>;
   };
   Comment?: {
+    content?: GraphCacheResolver<WithTypename<Comment>, Record<string, never>, Scalars['String'] | string>;
+    createdAt?: GraphCacheResolver<WithTypename<Comment>, Record<string, never>, Scalars['Float'] | string>;
     id?: GraphCacheResolver<WithTypename<Comment>, Record<string, never>, Scalars['Int'] | string>;
     postedBy?: GraphCacheResolver<WithTypename<Comment>, Record<string, never>, WithTypename<User> | string>;
-    createdAt?: GraphCacheResolver<WithTypename<Comment>, Record<string, never>, Scalars['Float'] | string>;
-    content?: GraphCacheResolver<WithTypename<Comment>, Record<string, never>, Scalars['String'] | string>;
     repoName?: GraphCacheResolver<WithTypename<Comment>, Record<string, never>, Scalars['String'] | string>;
   };
   Entry?: {
-    repository?: GraphCacheResolver<WithTypename<Entry>, Record<string, never>, WithTypename<Repository> | string>;
-    postedBy?: GraphCacheResolver<WithTypename<Entry>, Record<string, never>, WithTypename<User> | string>;
+    commentCount?: GraphCacheResolver<WithTypename<Entry>, Record<string, never>, Scalars['Int'] | string>;
+    comments?: GraphCacheResolver<WithTypename<Entry>, EntryCommentsArgs, Array<WithTypename<Comment> | string>>;
     createdAt?: GraphCacheResolver<WithTypename<Entry>, Record<string, never>, Scalars['Float'] | string>;
-    score?: GraphCacheResolver<WithTypename<Entry>, Record<string, never>, Scalars['Int'] | string>;
     hotScore?: GraphCacheResolver<WithTypename<Entry>, Record<string, never>, Scalars['Float'] | string>;
-    comments?: GraphCacheResolver<WithTypename<Entry>, EntryCommentsArgs, Array<WithTypename<Comment> | string>>;
-    commentCount?: GraphCacheResolver<WithTypename<Entry>, Record<string, never>, Scalars['Int'] | string>;
     id?: GraphCacheResolver<WithTypename<Entry>, Record<string, never>, Scalars['Int'] | string>;
+    postedBy?: GraphCacheResolver<WithTypename<Entry>, Record<string, never>, WithTypename<User> | string>;
+    repository?: GraphCacheResolver<WithTypename<Entry>, Record<string, never>, WithTypename<Repository> | string>;
+    score?: GraphCacheResolver<WithTypename<Entry>, Record<string, never>, Scalars['Int'] | string>;
     vote?: GraphCacheResolver<WithTypename<Entry>, Record<string, never>, WithTypename<Vote> | string>;
   };
   Repository?: {
-    name?: GraphCacheResolver<WithTypename<Repository>, Record<string, never>, Scalars['String'] | string>;
-    full_name?: GraphCacheResolver<WithTypename<Repository>, Record<string, never>, Scalars['String'] | string>;
     description?: GraphCacheResolver<WithTypename<Repository>, Record<string, never>, Scalars['String'] | string>;
+    full_name?: GraphCacheResolver<WithTypename<Repository>, Record<string, never>, Scalars['String'] | string>;
     html_url?: GraphCacheResolver<WithTypename<Repository>, Record<string, never>, Scalars['String'] | string>;
-    stargazers_count?: GraphCacheResolver<WithTypename<Repository>, Record<string, never>, Scalars['Int'] | string>;
+    name?: GraphCacheResolver<WithTypename<Repository>, Record<string, never>, Scalars['String'] | string>;
     open_issues_count?: GraphCacheResolver<WithTypename<Repository>, Record<string, never>, Scalars['Int'] | string>;
     owner?: GraphCacheResolver<WithTypename<Repository>, Record<string, never>, WithTypename<User> | string>;
+    stargazers_count?: GraphCacheResolver<WithTypename<Repository>, Record<string, never>, Scalars['Int'] | string>;
   };
   User?: {
-    login?: GraphCacheResolver<WithTypename<User>, Record<string, never>, Scalars['String'] | string>;
     avatar_url?: GraphCacheResolver<WithTypename<User>, Record<string, never>, Scalars['String'] | string>;
     html_url?: GraphCacheResolver<WithTypename<User>, Record<string, never>, Scalars['String'] | string>;
+    login?: GraphCacheResolver<WithTypename<User>, Record<string, never>, Scalars['String'] | string>;
   };
   Vote?: {
     vote_value?: GraphCacheResolver<WithTypename<Vote>, Record<string, never>, Scalars['Int'] | string>;
   };
 };
 
 export type GraphCacheOptimisticUpdaters = {
+  submitComment?: GraphCacheOptimisticMutationResolver<MutationSubmitCommentArgs, Maybe<WithTypename<Comment>>>;
   submitRepository?: GraphCacheOptimisticMutationResolver<MutationSubmitRepositoryArgs, Maybe<WithTypename<Entry>>>;
   vote?: GraphCacheOptimisticMutationResolver<MutationVoteArgs, Maybe<WithTypename<Entry>>>;
-  submitComment?: GraphCacheOptimisticMutationResolver<MutationSubmitCommentArgs, Maybe<WithTypename<Comment>>>;
 };
 
 export type GraphCacheUpdaters = {
   Mutation?: {
+    submitComment?: GraphCacheUpdateResolver<
+      { submitComment: Maybe<WithTypename<Comment>> },
+      MutationSubmitCommentArgs
+    >;
     submitRepository?: GraphCacheUpdateResolver<
       { submitRepository: Maybe<WithTypename<Entry>> },
       MutationSubmitRepositoryArgs
     >;
     vote?: GraphCacheUpdateResolver<{ vote: Maybe<WithTypename<Entry>> }, MutationVoteArgs>;
-    submitComment?: GraphCacheUpdateResolver<
-      { submitComment: Maybe<WithTypename<Comment>> },
-      MutationSubmitCommentArgs
-    >;
   };
   Subscription?: {
     commentAdded?: GraphCacheUpdateResolver<

dev-test/gql-tag-operations-masking-star-wars/gql/gql.ts

@@ -1,5 +1,5 @@
 /* eslint-disable */
-import * as graphql from './graphql';
+import * as graphql from './graphql.js';
 import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
 
 const documents = {

dev-test/gql-tag-operations-masking/gql/gql.ts

@@ -1,5 +1,5 @@
 /* eslint-disable */
-import * as graphql from './graphql';
+import * as graphql from './graphql.js';
 import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
 
 const documents = {

dev-test/gql-tag-operations/gql/gql.ts

@@ -1,5 +1,5 @@
 /* eslint-disable */
-import * as graphql from './graphql';
+import * as graphql from './graphql.js';
 import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
 
 const documents = {

dev-test/gql-tag-operations/src/index.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 
-import { gql, DocumentType } from '../gql';
+import { gql, DocumentType } from '../gql.js';
 
 const FooQuery = gql(/* GraphQL */ `
   query Foo {

examples/programmatic-typescript/package.json

@@ -13,9 +13,9 @@
     "@graphql-codegen/typescript": "*",
     "@graphql-codegen/typescript-operations": "*",
     "@graphql-codegen/typescript-resolvers": "*",
-    "@graphql-tools/graphql-file-loader": "^7.0.1",
-    "@graphql-tools/load": "^7.3.0",
-    "@graphql-tools/schema": "^8.3.1",
+    "@graphql-tools/graphql-file-loader": "^7.4.0",
+    "@graphql-tools/load": "^7.7.0",
+    "@graphql-tools/schema": "^8.5.0",
     "graphql": "^15.5.1",
     "graphql-tag": "^2.12.5",
     "prettier": "^2.3.2"

examples/programmatic-typescript/src/index.ts

@@ -14,7 +14,7 @@ import { GraphQLFileLoader } from '@graphql-tools/graphql-file-loader';
 import { loadDocuments } from '@graphql-tools/load';
 import { makeExecutableSchema } from '@graphql-tools/schema';
 
-import type { Resolvers } from './gql.generated';
+import type { Resolvers } from './gql.generated.js';
 
 const schema = makeExecutableSchema({
   typeDefs: gql`

jest.config.js

@@ -7,4 +7,5 @@ module.exports =
     : {
         rootDir: __dirname,
         projects: ['<rootDir>/packages/**/*/jest.config.js'],
+        resolver: 'bob-the-bundler/jest-resolver.js',
       };

jest.project.js

@@ -16,11 +16,12 @@ module.exports = ({ dirname, projectMode = true }) => {
     rootDir: dirname,
     restoreMocks: true,
     reporters: ['default'],
-    modulePathIgnorePatterns: ['dist'],
+    modulePathIgnorePatterns: ['dist', '.bob'],
     moduleNameMapper: pathsToModuleNameMapper(tsconfig.compilerOptions.paths, { prefix: `${ROOT_DIR}/` }),
     cacheDirectory: resolve(ROOT_DIR, `${CI ? '' : 'node_modules/'}.cache/jest`),
     setupFiles: [`${ROOT_DIR}/dev-test/setup.js`],
     collectCoverage: false,
     testTimeout: 20000,
+    resolver: 'bob-the-bundler/jest-resolver.js',
   };
 };

package.json

@@ -5,7 +5,7 @@
     "postinstall": "patch-package && husky install",
     "clean": "rimraf \"{,!(node_modules)/**/}node_modules/\"",
     "prebuild": "rimraf \"{,!(node_modules)/**/}dist/\" .bob/ tsconfig.tsbuildinfo",
-    "build": "tsc --project tsconfig.json && bob build",
+    "build": "bob build",
     "watch-build": "npx tsc-watch --project tsconfig.json --onSuccess \"bob build\"",
     "test": "jest --forceExit --no-watchman",
     "lint": "eslint --ext .ts .",
@@ -16,26 +16,22 @@
     "prerelease": "yarn build",
     "release": "changeset publish",
     "release:canary": "node scripts/canary-release.js && yarn build && yarn changeset publish --tag alpha",
-    "generate:examples": "node packages/graphql-codegen-cli/dist/bin.js --require dotenv/config --config ./dev-test/codegen.yml dotenv_config_path=dev-test/.env"
-  },
-  "workspaces": {
-    "packages": [
-      "packages/*",
-      "packages/utils/*",
-      "packages/plugins/flow/*",
-      "packages/plugins/java/*",
-      "packages/plugins/c-sharp/*",
-      "packages/plugins/typescript/*",
-      "packages/plugins/other/*",
-      "packages/presets/*",
-      "website",
-      "examples/*"
-    ],
-    "nohoist": [
-      "**/@babel-*",
-      "**/@babel-*/**"
-    ]
+    "generate:examples:esm": "node packages/graphql-codegen-cli/dist/esm/bin.js --require dotenv/config --config ./dev-test/codegen.yml dotenv_config_path=dev-test/.env",
+    "generate:examples:cjs": "node packages/graphql-codegen-cli/dist/cjs/bin.js --require dotenv/config --config ./dev-test/codegen.yml dotenv_config_path=dev-test/.env",
+    "generate:examples": "yarn generate:examples:cjs"
   },
+  "workspaces": [
+    "packages/*",
+    "packages/utils/*",
+    "packages/plugins/flow/*",
+    "packages/plugins/java/*",
+    "packages/plugins/c-sharp/*",
+    "packages/plugins/typescript/*",
+    "packages/plugins/other/*",
+    "packages/presets/*",
+    "website",
+    "examples/*"
+  ],
   "devDependencies": {
     "@apollo/client": "3.6.9",
     "@babel/core": "7.18.6",
@@ -60,7 +56,7 @@
     "apollo-server": "3.9.0",
     "auto-bind": "4.0.0",
     "babel-jest": "27.5.1",
-    "bob-the-bundler": "1.7.3",
+    "bob-the-bundler": "3.0.0",
     "chalk": "4.1.2",
     "dotenv": "16.0.1",
     "eslint": "8.19.0",