From 0e0ea7f8baf7650f755e82960c163618a08d0444 Mon Sep 17 00:00:00 2001 From: Yusuf Kandemir Date: Tue, 10 Nov 2026 19:03:01 +0300 Subject: [PATCH] feat!: support GraphQL Code Generator 7.4.2+ and 8 only The plugin now requires codegen 7.4.2 or 8, typescript-operations 6 or 7, graphql 16 and Vue 3.3. Deep type imports use a ".js" suffix, because TypeScript reported TS2307 under "moduleResolution": "bundler". Adds e2e tests that pack the packages and run them against minimum and latest versions. --- .eslintrc.cjs | 8 +- .github/workflows/ci.yml | 26 + .prettierignore | 7 + README.md | 9 + e2e/.gitignore | 6 + e2e/e2e.test.ts | 88 ++ e2e/fixtures/codegen.ts | 26 + e2e/fixtures/index.html | 2 + e2e/fixtures/main.ts | 6 + e2e/fixtures/pnpm-workspace.yaml | 8 + e2e/fixtures/schema.graphql | 22 + e2e/fixtures/src/components/PostCount.vue | 9 + e2e/fixtures/src/posts.graphql | 37 + e2e/fixtures/src/usage.ts | 25 + e2e/fixtures/tsconfig.json | 11 + e2e/fixtures/vite.config.mts | 9 + e2e/global-setup.ts | 32 + e2e/latest/package.json | 23 + e2e/minimum/package.json | 23 + e2e/tsconfig.json | 9 + e2e/vitest.config.mts | 15 + package.json | 8 +- packages/codegen-plugin/README.md | 62 +- packages/codegen-plugin/package.json | 17 +- packages/codegen-plugin/src/index.ts | 43 +- packages/codegen-plugin/src/mutation.ts | 2 +- packages/codegen-plugin/src/query.ts | 6 +- packages/near-operation-file/package.json | 6 +- packages/vue-query-block/README.md | 5 - packages/vue-query-block/index.ts | 5 +- packages/vue-query-block/package.json | 13 +- pnpm-lock.yaml | 1148 +++++++++++++++------ 32 files changed, 1333 insertions(+), 383 deletions(-) create mode 100644 e2e/.gitignore create mode 100644 e2e/e2e.test.ts create mode 100644 e2e/fixtures/codegen.ts create mode 100644 e2e/fixtures/index.html create mode 100644 e2e/fixtures/main.ts create mode 100644 e2e/fixtures/pnpm-workspace.yaml create mode 100644 e2e/fixtures/schema.graphql create mode 100644 e2e/fixtures/src/components/PostCount.vue create mode 100644 e2e/fixtures/src/posts.graphql create mode 100644 e2e/fixtures/src/usage.ts create mode 100644 e2e/fixtures/tsconfig.json create mode 100644 e2e/fixtures/vite.config.mts create mode 100644 e2e/global-setup.ts create mode 100644 e2e/latest/package.json create mode 100644 e2e/minimum/package.json create mode 100644 e2e/tsconfig.json create mode 100644 e2e/vitest.config.mts diff --git a/.eslintrc.cjs b/.eslintrc.cjs index af26795..c425133 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -5,11 +5,17 @@ require('@rushstack/eslint-patch/modern-module-resolution'); module.exports = { root: true, + ignorePatterns: ['e2e/fixtures/', 'e2e/minimum/', 'e2e/latest/'], + parserOptions: { // https://github.com/typescript-eslint/typescript-eslint/tree/main/packages/parser#parseroptionstsconfigrootdir // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment tsconfigRootDir: __dirname, - project: ['./tsconfig.eslint.json', './packages/*/tsconfig.json'], + project: [ + './tsconfig.eslint.json', + './packages/*/tsconfig.json', + './e2e/tsconfig.json', + ], }, env: { diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index a0be4ae..09ba308 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -34,3 +34,29 @@ jobs: - run: pnpm lint - run: pnpm format:check - run: pnpm build + + e2e: + name: e2e (Node.js ${{ matrix.node-version }}) + runs-on: ubuntu-26.04 + timeout-minutes: 15 + strategy: + fail-fast: false + matrix: + # The oldest supported version and the active LTS version. + node-version: [22, 26] + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + with: + persist-credentials: false + + # Reads the pnpm version from the packageManager field in package.json. + - uses: pnpm/action-setup@73e46992e05b19abd31f2f3c20e0e7370d762115 # v6.1.1 + with: + cache: true + + - uses: actions/setup-node@949feb2413d6458794dcd2491c4babbbce0c15c1 # v7.1.0 + with: + node-version: ${{ matrix.node-version }} + + - run: pnpm install --frozen-lockfile + - run: pnpm test diff --git a/.prettierignore b/.prettierignore index bd5535a..7a9d280 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1 +1,8 @@ pnpm-lock.yaml + +# Copied fixtures and generated files in the e2e projects. +e2e/.tarballs/ +e2e/minimum/* +e2e/latest/* +!e2e/minimum/package.json +!e2e/latest/package.json diff --git a/README.md b/README.md index cfe82d6..2938a2e 100644 --- a/README.md +++ b/README.md @@ -9,6 +9,15 @@ A collection of packages to help you generate code from GraphQL documents and us - [@dreamonkey/graphql-codegen-vue-query-block](./packages/vue-query-block) - Custom `` block to define GraphQL documents in Vue SFCs - TODO: [@dreamonkey/app-extension-graphql-codegen](./packages/app-extension) - GraphQL Code Generator scaffolding and integration with all the packages in this repo for [Quasar Framework](https://quasar.dev/) as an App Extension +## Testing + +Run `pnpm test`. The command runs the end-to-end tests in `e2e/` with Vitest. +The tests build and pack each package, then install the tarballs into two projects. +The `minimum` project uses the oldest supported versions, and the `latest` project uses the newest. +Each project runs GraphQL Code Generator, type-checks the output, and runs a Vite build. + +To test one project, filter by its name: `pnpm test -t latest`. + ## Donate If you appreciate the work that went into these packages, please consider [donating](https://github.com/sponsors/dreamonkey). diff --git a/e2e/.gitignore b/e2e/.gitignore new file mode 100644 index 0000000..546a6e0 --- /dev/null +++ b/e2e/.gitignore @@ -0,0 +1,6 @@ +.tarballs/ +# Everything in a variant project except package.json comes from fixtures/ or the test run. +/minimum/* +/latest/* +!/minimum/package.json +!/latest/package.json diff --git a/e2e/e2e.test.ts b/e2e/e2e.test.ts new file mode 100644 index 0000000..e0c15c3 --- /dev/null +++ b/e2e/e2e.test.ts @@ -0,0 +1,88 @@ +import { cp, mkdir, readFile, rm, writeFile } from 'node:fs/promises'; +import { join } from 'node:path'; +import { execa } from 'execa'; +import { beforeAll, describe, expect, test } from 'vitest'; + +const fixturesDir = join(import.meta.dirname, 'fixtures'); +const variants = ['minimum', 'latest']; +const moduleResolutionFlags = { + bundler: ['--module', 'preserve', '--moduleResolution', 'bundler'], + node10: ['--module', 'esnext', '--moduleResolution', 'node10'], + nodenext: ['--module', 'nodenext', '--moduleResolution', 'nodenext'], +}; +// Vitest sets NODE_ENV to "test". GraphQL Code Generator prints nothing when NODE_ENV is "test". +const childEnv = Object.fromEntries( + Object.entries(process.env).filter(([name]) => name !== 'NODE_ENV'), +); +const BROKEN_SFC = + '