drop create-react-app + swc in-repository test (#9060)

Co-authored-by: YassinEldeeb <yassineldeeb94@gmail.com>
dotansimha · Mar 1, 2023 · 03cdf02 · 03cdf02
1 parent efa38a0
commit 03cdf02
Show file tree

Hide file tree

Showing 117 changed files with 661 additions and 6,286 deletions.
diff --git a/.changeset/config.json b/.changeset/config.json
@@ -5,7 +5,13 @@
   "access": "restricted",
   "baseBranch": "master",
   "updateInternalDependencies": "patch",
-  "ignore": ["website", "example-*", "@graphql-codegen/client-preset-swc-plugin"],
+  "ignore": [
+    "website",
+    "example-*",
+    "@graphql-codegen/client-preset-swc-plugin",
+    "example-apollo-client-swc-plugin",
+    "example-react-nextjs-swr"
+  ],
   "changelog": [
     "@changesets/changelog-github",
     {

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -53,11 +53,12 @@ module.exports = {
   ],
   ignorePatterns: [
     'dev-test',
-    'examples/front-end',
     'website',
     'examples/**/gql/**',
     '**/react-app-env.d.ts',
     'packages/presets/swc-plugin/tests/fixtures/simple-uppercase-operation-name.js',
     'packages/presets/swc-plugin/tests/fixtures/simple-uppercase-operation-name.other-dir.js',
+    '**/build/**/*',
+    '**/dist/**/*',
   ],
 };
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -65,6 +65,15 @@ jobs:
         uses: the-guild-org/shared-config/setup@main
         with:
           nodeVersion: 16
+      - uses: actions-rs/toolchain@v1
+        with:
+          toolchain: 1.65.0
+          target: wasm32-wasi
+          override: true
+      - name: Build SWC plugin
+        working-directory: ./packages/presets/swc-plugin
+        run: |
+          npm run build-wasm
       - name: Build
         run: yarn build
         env:
@@ -143,7 +152,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions-rs/toolchain@v1
         with:
-          toolchain: stable
+          toolchain: 1.65.0
           target: wasm32-wasi
           override: true
       - uses: marcopolo/cargo@a527bf4d534717ff4424a84446c5d710f8833139

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -14,6 +14,26 @@ jobs:
       githubToken: ${{ secrets.GUILD_BOT_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'
+      - uses: marcopolo/cargo@a527bf4d534717ff4424a84446c5d710f8833139
+        with:
+          working-directory: ./packages/presets/swc-plugin
+          command: build
+          args: --target wasm32-wasi --release
+      - name: Publish SWC plugin
+        working-directory: ./packages/presets/swc-plugin
+        run: npm publish --access=public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
   algolia:
     uses: the-guild-org/shared-config/.github/workflows/algolia-publish.yml@main
     secrets:

diff --git a/.github/workflows/rust.yml b/.github/workflows/rust.yml
@@ -14,13 +14,16 @@ jobs:
           registry-url: 'https://registry.npmjs.org'
       - uses: actions-rs/toolchain@v1
         with:
-          toolchain: stable
+          toolchain: 1.65.0
           target: wasm32-wasi
           override: true
-      - name: Publish SWC plugin
+      - name: Build SWC plugin
         working-directory: ./packages/presets/swc-plugin
         run: |
           npm run build-wasm
+      - name: Publish SWC plugin
+        working-directory: ./packages/presets/swc-plugin
+        run: |
           npm publish --access=public
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/examples/react/babel-optimized/.gitignore → ...react/apollo-client-swc-plugin/.gitignore b/examples/react/babel-optimized/.gitignore → ...react/apollo-client-swc-plugin/.gitignore
@@ -21,3 +21,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.swc
diff --git a/examples/react/apollo-client-swc-plugin/README.md b/examples/react/apollo-client-swc-plugin/README.md
@@ -0,0 +1,7 @@
+# Apollo Client Vite SWR Example
+
+Example of using the SWC plugin for smaller bundle size.
+
+```bash
+yarn dev
+```
diff --git a/examples/react/babel-optimized/codegen.ts → ...react/apollo-client-swc-plugin/codegen.ts b/examples/react/babel-optimized/codegen.ts → ...react/apollo-client-swc-plugin/codegen.ts
diff --git a/examples/react/apollo-client-swc-plugin/index.html b/examples/react/apollo-client-swc-plugin/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/react/apollo-client-swc-plugin/package.json b/examples/react/apollo-client-swc-plugin/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "example-apollo-client-swc-plugin",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@apollo/client": "^3.6.9",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "@graphql-codegen/client-preset-swc-plugin": "0.1.1",
+    "@graphql-codegen/client-preset": "^2.0.0",
+    "@graphql-codegen/cli": "^3.0.0",
+    "@vitejs/plugin-react-swc": "^3.2.0",
+    "@types/react": "18.0.28",
+    "@types/react-dom": "18.0.11",
+    "typescript": "4.9.5",
+    "vite": "^4.1.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "test": "node scripts/test.js",
+    "test:end2end": "exit 0",
+    "codegen": "graphql-codegen --config codegen.ts"
+  }
+}
diff --git a/examples/react/apollo-client-swc-plugin/public/vite.svg b/examples/react/apollo-client-swc-plugin/public/vite.svg
diff --git a/examples/react/babel-optimized/src/App.css → ...eact/apollo-client-swc-plugin/src/App.css b/examples/react/babel-optimized/src/App.css → ...eact/apollo-client-swc-plugin/src/App.css
diff --git a/examples/react/babel-optimized/src/App.tsx → ...eact/apollo-client-swc-plugin/src/App.tsx b/examples/react/babel-optimized/src/App.tsx → ...eact/apollo-client-swc-plugin/src/App.tsx
diff --git a/examples/react/babel-optimized/src/Film.tsx → ...act/apollo-client-swc-plugin/src/Film.tsx b/examples/react/babel-optimized/src/Film.tsx → ...act/apollo-client-swc-plugin/src/Film.tsx
diff --git a/...bel-optimized/src/gql/fragment-masking.ts → ...nt-swc-plugin/src/gql/fragment-masking.ts b/...bel-optimized/src/gql/fragment-masking.ts → ...nt-swc-plugin/src/gql/fragment-masking.ts
diff --git a/...ples/react/babel-optimized/src/gql/gql.ts → ...t/apollo-client-swc-plugin/src/gql/gql.ts b/...ples/react/babel-optimized/src/gql/gql.ts → ...t/apollo-client-swc-plugin/src/gql/gql.ts
diff --git a/.../react/babel-optimized/src/gql/graphql.ts → ...ollo-client-swc-plugin/src/gql/graphql.ts b/.../react/babel-optimized/src/gql/graphql.ts → ...ollo-client-swc-plugin/src/gql/graphql.ts
diff --git a/...es/react/babel-optimized/src/gql/index.ts → ...apollo-client-swc-plugin/src/gql/index.ts b/...es/react/babel-optimized/src/gql/index.ts → ...apollo-client-swc-plugin/src/gql/index.ts
diff --git a/examples/react/babel-optimized/src/logo.svg → ...act/apollo-client-swc-plugin/src/logo.svg b/examples/react/babel-optimized/src/logo.svg → ...act/apollo-client-swc-plugin/src/logo.svg
diff --git a/examples/react/apollo-client/src/index.css → ...act/apollo-client-swc-plugin/src/main.css b/examples/react/apollo-client/src/index.css → ...act/apollo-client-swc-plugin/src/main.css
diff --git a/examples/react/apollo-client/src/index.tsx → ...act/apollo-client-swc-plugin/src/main.tsx b/examples/react/apollo-client/src/index.tsx → ...act/apollo-client-swc-plugin/src/main.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './index.css';
+import './main.css';
 import App from './App';
 import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
 
@@ -9,7 +9,7 @@ const client = new ApolloClient({
   cache: new InMemoryCache(),
 });
 
-const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+const root = ReactDOM.createRoot(document.getElementById('app') as HTMLElement);
 root.render(
   <React.StrictMode>
     <ApolloProvider client={client}>

diff --git a/examples/react/apollo-client-swc-plugin/tsconfig.json b/examples/react/apollo-client-swc-plugin/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "strict": true,
+    "jsx": "preserve",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": ["ESNext", "DOM"],
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/examples/react/apollo-client-swc-plugin/tsconfig.node.json b/examples/react/apollo-client-swc-plugin/tsconfig.node.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/examples/react/apollo-client-swc-plugin/vite.config.ts b/examples/react/apollo-client-swc-plugin/vite.config.ts
@@ -0,0 +1,14 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react-swc';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    react({
+      plugins: [
+        ['@graphql-codegen/client-preset-swc-plugin', { artifactDirectory: './src/gql', gqlTagName: 'graphql' }],
+      ],
+    }),
+  ],
+});
diff --git a/examples/react/apollo-client/index.html b/examples/react/apollo-client/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/react/apollo-client/package.json b/examples/react/apollo-client/package.json
@@ -11,35 +11,23 @@
   "devDependencies": {
     "@graphql-codegen/cli": "^3.2.1",
     "@graphql-codegen/client-preset": "^2.1.0",
+    "@vitejs/plugin-react": "^3.1.0",
     "@types/jest": "^27.5.2",
     "@types/node": "^18.11.18",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.10",
-    "react-scripts": "^5.0.1",
     "typescript": "4.9.5",
     "serve": "14.2.0",
     "cypress": "12.6.0",
-    "start-server-and-test": "2.0.0"
+    "start-server-and-test": "2.0.0",
+    "vite": "^4.1.0"
   },
   "scripts": {
-    "dev": "react-scripts start",
-    "build": "react-scripts build",
-    "start": "serve -s build",
+    "dev": "vite",
+    "build": "vite build",
+    "start": "serve -s dist",
     "test": "cypress run",
     "test:end2end": "start-server-and-test start http://localhost:3000 test",
-    "eject": "react-scripts eject",
     "codegen": "graphql-codegen --config codegen.ts"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
   }
 }
diff --git a/examples/react/apollo-client/public/favicon.ico b/examples/react/apollo-client/public/favicon.ico
diff --git a/examples/react/apollo-client/public/index.html b/examples/react/apollo-client/public/index.html
diff --git a/examples/react/apollo-client/public/logo192.png b/examples/react/apollo-client/public/logo192.png
diff --git a/examples/react/apollo-client/public/logo512.png b/examples/react/apollo-client/public/logo512.png
diff --git a/examples/react/apollo-client/public/manifest.json b/examples/react/apollo-client/public/manifest.json
diff --git a/examples/react/apollo-client/public/robots.txt b/examples/react/apollo-client/public/robots.txt
diff --git a/examples/react/apollo-client/public/vite.svg b/examples/react/apollo-client/public/vite.svg
diff --git a/examples/react/babel-optimized/src/index.css → examples/react/apollo-client/src/main.css b/examples/react/babel-optimized/src/index.css → examples/react/apollo-client/src/main.css
diff --git a/examples/react/babel-optimized/src/index.tsx → examples/react/apollo-client/src/main.tsx b/examples/react/babel-optimized/src/index.tsx → examples/react/apollo-client/src/main.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './index.css';
+import './main.css';
 import App from './App';
 import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
 
@@ -9,7 +9,7 @@ const client = new ApolloClient({
   cache: new InMemoryCache(),
 });
 
-const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+const root = ReactDOM.createRoot(document.getElementById('app') as HTMLElement);
 root.render(
   <React.StrictMode>
     <ApolloProvider client={client}>

diff --git a/examples/react/apollo-client/src/react-app-env.d.ts b/examples/react/apollo-client/src/react-app-env.d.ts
diff --git a/examples/react/apollo-client/tsconfig.json b/examples/react/apollo-client/tsconfig.json
@@ -1,19 +1,18 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
     "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
-    "moduleResolution": "node",
+    "jsx": "preserve",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx"
+    "esModuleInterop": true,
+    "lib": ["ESNext", "DOM"],
+    "skipLibCheck": true,
+    "noEmit": true
   },
-  "include": ["src"]
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }]
 }