drop create-react-app

dotansimha · Feb 24, 2023 · 0ee4c0c · 0ee4c0c
1 parent 183ee72
commit 0ee4c0c
Show file tree

Hide file tree

Showing 109 changed files with 574 additions and 5,942 deletions.
diff --git a/.changeset/config.json b/.changeset/config.json
@@ -5,7 +5,7 @@
   "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"],
   "changelog": [
     "@changesets/changelog-github",
     {

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/...es/react/babel-optimized/scripts/build.js → ...apollo-client-swc-plugin/scripts/build.js b/...es/react/babel-optimized/scripts/build.js → ...apollo-client-swc-plugin/scripts/build.js
diff --git a/...es/react/babel-optimized/scripts/start.js → ...apollo-client-swc-plugin/scripts/start.js b/...es/react/babel-optimized/scripts/start.js → ...apollo-client-swc-plugin/scripts/start.js
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": "1.15.4"
+    "start-server-and-test": "1.15.4",
+    "vite": "^4.1.0"
   },
   "scripts": {
-    "dev": "react-scripts start",
-    "build": "react-scripts build",
+    "dev": "vite",
+    "build": "vite build",
     "start": "serve -s build",
     "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" }]
 }
diff --git a/examples/react/apollo-client/tsconfig.node.json b/examples/react/apollo-client/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/vite.config.ts b/examples/react/apollo-client/vite.config.ts
@@ -0,0 +1,8 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+});
diff --git a/examples/react/babel-optimized/.babelrc.js b/examples/react/babel-optimized/.babelrc.js
diff --git a/examples/react/babel-optimized/README.md b/examples/react/babel-optimized/README.md