Merge pull request #133 from hmousavin/main

#11392 Migrate docs example sandboxes to use Vite instead of CRA
apollographql · Aug 14, 2024 · 4ede1dd · 4ede1dd
2 parents 7c9ed4e + 85db125
commit 4ede1dd
Show file tree

Hide file tree

Showing 32 changed files with 13,780 additions and 44,832 deletions.
diff --git a/apollo-client/v3/getting-started/index.html b/apollo-client/v3/getting-started/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+  <meta name="theme-color" content="#000000" />
+  <title>AC Docs > Get started with Apollo Client</title>
+</head>
+
+<body>
+  <noscript> You need to enable JavaScript to run this app. </noscript>
+  <div id="root"></div>
+  <script type="module" src="src/index.tsx"></script>
+</body>
+
+</html>
diff --git a/apollo-client/v3/getting-started/jest.config.js b/apollo-client/v3/getting-started/jest.config.js
@@ -0,0 +1,8 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} **/
+module.exports = {
+  testEnvironment: "node",
+  transform: {
+    "^.+.tsx?$": ["ts-jest",{}],
+  },
+  preset: "ts-jest"
+};
diff --git a/apollo-client/v3/getting-started/package-lock.json b/apollo-client/v3/getting-started/package-lock.json
diff --git a/apollo-client/v3/getting-started/package.json b/apollo-client/v3/getting-started/package.json
@@ -7,16 +7,18 @@
   "main": "src/index.js",
   "dependencies": {
     "@apollo/client": "3.7.17",
+    "@vitejs/plugin-react": "^4.3.1",
     "graphql": "16.8.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-scripts": "5.0.1"
+    "vite": "^5.3.4",
+    "vite-tsconfig-paths": "^4.3.2"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
+    "start": "vite",
+    "build": "vite build",
+    "test": "jest",
+    "eject": "vite eject"
   },
   "browserslist": {
     "production": [
@@ -29,5 +31,11 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/jest": "^29.5.12",
+    "jest": "^29.7.0",
+    "ts-jest": "^29.2.3",
+    "typescript": "^5.5.4"
   }
-}
+}
diff --git a/apollo-client/v3/getting-started/public/index.html b/apollo-client/v3/getting-started/public/index.html
diff --git a/apollo-client/v3/getting-started/public/vite.svg b/apollo-client/v3/getting-started/public/vite.svg
diff --git a/apollo-client/v3/getting-started/src/App.js → apollo-client/v3/getting-started/src/App.tsx b/apollo-client/v3/getting-started/src/App.js → apollo-client/v3/getting-started/src/App.tsx
@@ -1,4 +1,5 @@
 import { useQuery, gql } from "@apollo/client";
+import React from "react";
 
 const GET_LOCATIONS = gql`
   query getLocations {

diff --git a/...lo-client/v3/getting-started/src/index.js → ...o-client/v3/getting-started/src/index.tsx b/...lo-client/v3/getting-started/src/index.js → ...o-client/v3/getting-started/src/index.tsx
diff --git a/apollo-client/v3/getting-started/src/vite-env.d.ts b/apollo-client/v3/getting-started/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/apollo-client/v3/getting-started/vite.config.ts b/apollo-client/v3/getting-started/vite.config.ts
@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import viteTsconfigPaths from 'vite-tsconfig-paths'
+
+export default defineConfig({
+    base: '',
+    plugins: [react(), viteTsconfigPaths()],
+    server: {
+        open: true,
+        port: 3000,
+    },
+})
diff --git a/...lient/v3/suspense-hooks/public/index.html → apollo-client/v3/suspense-hooks/index.html b/...lient/v3/suspense-hooks/public/index.html → apollo-client/v3/suspense-hooks/index.html
@@ -1,21 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Web site created using create-react-app" />
+  <link rel="apple-touch-icon" href="/logo192.png" />
+  <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
+  <link rel="manifest" href="/manifest.json" />
+  <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -24,12 +22,14 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
+  <title>React App</title>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <script type="module" src="src/index.tsx"></script>
+  <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -39,5 +39,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-  </body>
-</html>
+</body>
+
+</html>
diff --git a/apollo-client/v3/suspense-hooks/jest.config.js b/apollo-client/v3/suspense-hooks/jest.config.js
@@ -0,0 +1,7 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} **/
+module.exports = {
+  testEnvironment: "node",
+  transform: {
+    "^.+.tsx?$": ["ts-jest",{}],
+  },
+};