feat: Add SWC plugin for optimizing client-preset (#8759)

* feat: add swc plugin for optimizing client-preset

* Slight optimization

* refactor: change directory location

* fix: tests

* ci: a small change to trigger CI

* ci: build, test and publish swc plugin

* ci: change cwd for cargo build and test

* ci: change cwd

* ci: fix the gh action version with sha

* ci: ignore bob in the wasm package

* chore: run prettier

* chore: run prettier

* chore: update examples

* chore: change plugin name

* tests: fix snapshots diff

---------

Co-authored-by: YassinEldeeb <[email protected]>

Author: JesseVelden

.github/workflows/main.yml

@@ -10,6 +10,7 @@ on:
 
 env:
   NODE_OPTIONS: '--max_old_space_size=4096'
+  CARGO_TERM_COLOR: always
 
 jobs:
   lint:
@@ -135,3 +136,22 @@ jobs:
         run: yarn test
         env:
           CI: true
+  test-rust-swc-plugin:
+    name: Build and Unit Test SWC Plugin
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions-rs/toolchain@v1
+        with:
+          toolchain: stable
+          target: wasm32-wasi
+          override: true
+      - uses: marcopolo/cargo@a527bf4d534717ff4424a84446c5d710f8833139
+        with:
+          working-directory: ./packages/presets/swc-plugin
+          command: build
+          args: --target wasm32-wasi
+      - uses: marcopolo/cargo@a527bf4d534717ff4424a84446c5d710f8833139
+        with:
+          working-directory: ./packages/presets/swc-plugin
+          command: test

.github/workflows/release.yml

@@ -14,6 +14,21 @@ jobs:
       githubToken: ${{ secrets.GITHUB_TOKEN }}
       npmToken: ${{ secrets.NPM_TOKEN }}
 
+  publish-rust-swc-plugin:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      # Setup .npmrc file to publish to npm
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '18.x'
+          registry-url: 'https://registry.npmjs.org'
+      - name: Publish SWC plugin
+        working-directory: ./packages/presets/swc-plugin
+        run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
   algolia:
     uses: the-guild-org/shared-config/.github/workflows/algolia-publish.yml@main
     secrets:

.prettierignore

@@ -20,9 +20,14 @@ website/src/pages/plugins/index.mdx
 website/src/pages/plugins/presets/near-operation-file-preset.mdx
 
 website/algolia-lockfile.json
+
 temp/
 website/out
 website/.next
 
 # added because it blocks CI and when I try to format it locally nothing happens :)
 website/src/components/live-demo/LiveDemo.tsx
+
+# This should be added bc our rust test setup for the SWC plugin does a string diff, and it fails
+# bc it compares imports with double quotes against the formatted perttier single quotes
+packages/presets/swc-plugin/tests/fixtures

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["rust-lang.rust-analyzer", "tamasfe.even-better-toml"]
+}

.vscode/settings.json

@@ -22,5 +22,9 @@
   },
   "typescript.tsdk": "node_modules/typescript/lib",
   "editor.formatOnSave": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode"
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[rust]": {
+    "editor.defaultFormatter": "rust-lang.rust-analyzer",
+    "editor.formatOnSave": true
+  }
 }

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

@@ -10,7 +10,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.
  * 3. It does not support dead code elimination, so it will add unused operations.
  *
- * Therefore it is highly recommended to use the babel-plugin for production.
+ * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 const documents = {
   '\n  query HeroDetailsWithFragment($episode: Episode) {\n    hero(episode: $episode) {\n      ...HeroDetails\n    }\n  }\n':

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

@@ -10,7 +10,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.
  * 3. It does not support dead code elimination, so it will add unused operations.
  *
- * Therefore it is highly recommended to use the babel-plugin for production.
+ * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 const documents = {
   '\n  fragment TweetFragment on Tweet {\n    id\n    body\n    ...TweetAuthorFragment\n  }\n':

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

@@ -10,7 +10,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.
  * 3. It does not support dead code elimination, so it will add unused operations.
  *
- * Therefore it is highly recommended to use the babel-plugin for production.
+ * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 const documents = {
   '\n  query Foo {\n    Tweets {\n      id\n    }\n  }\n': types.FooDocument,

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

@@ -10,7 +10,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.
  * 3. It does not support dead code elimination, so it will add unused operations.
  *
- * Therefore it is highly recommended to use the babel-plugin for production.
+ * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 const documents = {
   '\n  query Foo {\n    Tweets {\n      id\n    }\n  }\n': types.FooDocument,

examples/persisted-documents/src/gql/gql.ts

@@ -10,7 +10,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.
  * 3. It does not support dead code elimination, so it will add unused operations.
  *
- * Therefore it is highly recommended to use the babel-plugin for production.
+ * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 const documents = {
   '\n  query HelloQuery {\n    hello\n  }\n': types.HelloQueryDocument,

examples/react/apollo-client/src/gql/gql.ts

@@ -10,7 +10,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.
  * 3. It does not support dead code elimination, so it will add unused operations.
  *
- * Therefore it is highly recommended to use the babel-plugin for production.
+ * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 const documents = {
   '\n  query allFilmsWithVariablesQuery($first: Int!) {\n    allFilms(first: $first) {\n      edges {\n        node {\n          ...FilmItem\n        }\n      }\n    }\n  }\n':

examples/react/babel-optimized/src/gql/gql.ts

@@ -10,7 +10,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.
  * 3. It does not support dead code elimination, so it will add unused operations.
  *
- * Therefore it is highly recommended to use the babel-plugin for production.
+ * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 const documents = {
   '\n  query allFilmsWithVariablesQuery($first: Int!) {\n    allFilms(first: $first) {\n      edges {\n        node {\n          ...FilmItem\n        }\n      }\n    }\n  }\n':

examples/react/graphql-request/src/gql/gql.ts

@@ -10,7 +10,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.
  * 3. It does not support dead code elimination, so it will add unused operations.
  *
- * Therefore it is highly recommended to use the babel-plugin for production.
+ * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 const documents = {
   '\n  query allFilmsWithVariablesQuery($first: Int!) {\n    allFilms(first: $first) {\n      edges {\n        node {\n          ...FilmItem\n        }\n      }\n    }\n  }\n':

examples/react/nextjs-swr/gql/gql.ts

@@ -10,7 +10,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.
  * 3. It does not support dead code elimination, so it will add unused operations.
  *
- * Therefore it is highly recommended to use the babel-plugin for production.
+ * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 const documents = {
   '\n  fragment FilmItem on Film {\n    id\n    title\n    releaseDate\n    producers\n  }\n':

examples/react/tanstack-react-query/src/gql/gql.ts

@@ -10,7 +10,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.
  * 3. It does not support dead code elimination, so it will add unused operations.
  *
- * Therefore it is highly recommended to use the babel-plugin for production.
+ * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 const documents = {
   '\n  query allFilmsWithVariablesQuery($first: Int!) {\n    allFilms(first: $first) {\n      edges {\n        node {\n          ...FilmItem\n        }\n      }\n    }\n  }\n':

examples/react/urql/src/gql/gql.ts

@@ -10,7 +10,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.
  * 3. It does not support dead code elimination, so it will add unused operations.
  *
- * Therefore it is highly recommended to use the babel-plugin for production.
+ * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 const documents = {
   '\n  query allFilmsWithVariablesQuery($first: Int!) {\n    allFilms(first: $first) {\n      edges {\n        node {\n          ...FilmItem\n        }\n      }\n    }\n  }\n':

examples/typescript-esm/src/gql/gql.ts

@@ -10,7 +10,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.
  * 3. It does not support dead code elimination, so it will add unused operations.
  *
- * Therefore it is highly recommended to use the babel-plugin for production.
+ * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 const documents = {
   '\n  query AllPeopleQuery {\n    allPeople(first: 5) {\n      edges {\n        node {\n          name\n          homeworld {\n            name\n          }\n        }\n      }\n    }\n  }\n':

examples/typescript-graphql-request/src/gql/gql.ts

@@ -10,7 +10,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.
  * 3. It does not support dead code elimination, so it will add unused operations.
  *
- * Therefore it is highly recommended to use the babel-plugin for production.
+ * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 const documents = {
   '\n  query AllPeopleQuery {\n    allPeople(first: 5) {\n      edges {\n        node {\n          name\n          homeworld {\n            name\n          }\n        }\n      }\n    }\n  }\n':

examples/vue/apollo-composable/src/gql/gql.ts

@@ -10,7 +10,7 @@ import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-
  * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.
  * 3. It does not support dead code elimination, so it will add unused operations.
  *
- * Therefore it is highly recommended to use the babel-plugin for production.
+ * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 const documents = {
   '\n    query allFilmsWithVariablesQuery($first: Int!) {\n      allFilms(first: $first) {\n        edges {\n          node {\n            ...FilmItem\n          }\n        }\n      }\n    }\n  ':

examples/vue/urql/src/gql/gql.ts

@@ -10,7 +10,7 @@ import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-
  * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.
  * 3. It does not support dead code elimination, so it will add unused operations.
  *
- * Therefore it is highly recommended to use the babel-plugin for production.
+ * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 const documents = {
   '\n    query allFilmsWithVariablesQuery($first: Int!) {\n      allFilms(first: $first) {\n        edges {\n          node {\n            ...FilmItem\n          }\n        }\n      }\n    }\n  ':

examples/vue/villus/src/gql/gql.ts

@@ -10,7 +10,7 @@ import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-
  * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.
  * 3. It does not support dead code elimination, so it will add unused operations.
  *
- * Therefore it is highly recommended to use the babel-plugin for production.
+ * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 const documents = {
   '\n    query allFilmsWithVariablesQuery($first: Int!) {\n      allFilms(first: $first) {\n        edges {\n          node {\n            ...FilmItem\n          }\n        }\n      }\n    }\n  ':

examples/yoga-tests/src/gql/gql.ts

@@ -10,7 +10,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.
  * 3. It does not support dead code elimination, so it will add unused operations.
  *
- * Therefore it is highly recommended to use the babel-plugin for production.
+ * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 const documents = {
   '\n      query HelloQuery {\n        hello\n      }\n    ': types.HelloQueryDocument,

packages/plugins/typescript/gql-tag-operations/src/index.ts

@@ -109,7 +109,7 @@ function getDocumentRegistryChunk(sourcesWithOperations: Array<SourceWithOperati
   lines.add(` * 1. It is not tree-shakeable, so it will include all operations in the project.\n`);
   lines.add(` * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.\n`);
   lines.add(` * 3. It does not support dead code elimination, so it will add unused operations.\n *\n`);
-  lines.add(` * Therefore it is highly recommended to use the babel-plugin for production.\n */\n`);
+  lines.add(` * Therefore it is highly recommended to use the babel or swc plugin for production.\n */\n`);
   lines.add(`const documents = {\n`);
 
   for (const { operations, ...rest } of sourcesWithOperations) {

packages/presets/client/tests/client-preset.spec.ts

@@ -46,7 +46,7 @@ export * from "./gql";`);
        * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.
        * 3. It does not support dead code elimination, so it will add unused operations.
        *
-       * Therefore it is highly recommended to use the babel-plugin for production.
+       * Therefore it is highly recommended to use the babel or swc plugin for production.
        */
       const documents = {
           "\\n  query A {\\n    a\\n  }\\n": types.ADocument,
@@ -133,7 +133,7 @@ export * from "./gql";`);
        * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.
        * 3. It does not support dead code elimination, so it will add unused operations.
        *
-       * Therefore it is highly recommended to use the babel-plugin for production.
+       * Therefore it is highly recommended to use the babel or swc plugin for production.
        */
       const documents = {
           "\\n  query a {\\n    a\\n  }\\n": types.ADocument,
@@ -212,7 +212,7 @@ export * from "./gql";`);
        * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.
        * 3. It does not support dead code elimination, so it will add unused operations.
        *
-       * Therefore it is highly recommended to use the babel-plugin for production.
+       * Therefore it is highly recommended to use the babel or swc plugin for production.
        */
       const documents = {
           "\\n  query a {\\n    a\\n  }\\n": types.ADocument,
@@ -292,7 +292,7 @@ export * from "./gql";`);
        * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.
        * 3. It does not support dead code elimination, so it will add unused operations.
        *
-       * Therefore it is highly recommended to use the babel-plugin for production.
+       * Therefore it is highly recommended to use the babel or swc plugin for production.
        */
       const documents = {
           "\\n  query A {\\n    a\\n  }\\n": types.ADocument,
@@ -420,7 +420,7 @@ export * from "./gql";`);
        * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.
        * 3. It does not support dead code elimination, so it will add unused operations.
        *
-       * Therefore it is highly recommended to use the babel-plugin for production.
+       * Therefore it is highly recommended to use the babel or swc plugin for production.
        */
       const documents = {
           "\\n  query A {\\n    a\\n  }\\n": types.ADocument,
@@ -541,7 +541,7 @@ export * from "./gql";`);
        * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.
        * 3. It does not support dead code elimination, so it will add unused operations.
        *
-       * Therefore it is highly recommended to use the babel-plugin for production.
+       * Therefore it is highly recommended to use the babel or swc plugin for production.
        */
       const documents = {
           "\\n  query a {\\n    a\\n  }\\n": types.ADocument,
@@ -652,7 +652,7 @@ export * from "./gql";`);
          * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.
          * 3. It does not support dead code elimination, so it will add unused operations.
          *
-         * Therefore it is highly recommended to use the babel-plugin for production.
+         * Therefore it is highly recommended to use the babel or swc plugin for production.
          */
         const documents = {
             "\\n  query A {\\n    a\\n  }\\n": types.ADocument,
@@ -952,7 +952,7 @@ export * from "./gql.js";`);
        * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.
        * 3. It does not support dead code elimination, so it will add unused operations.
        *
-       * Therefore it is highly recommended to use the babel-plugin for production.
+       * Therefore it is highly recommended to use the babel or swc plugin for production.
        */
       const documents = {
           "\\n  query A {\\n    a\\n  }\\n": types.ADocument,