examples: migrate to vite (#211)

* examples: migrate to vite * fix e2e
dai-shi · May 21, 2024 · 6df0fba · 6df0fba
1 parent 30309a5
commit 6df0fba
Show file tree

Hide file tree

Showing 129 changed files with 1,430 additions and 1,068 deletions.
diff --git a/README.md b/README.md
@@ -48,13 +48,7 @@ that provide useSelector-like hooks.
 This package requires some peer dependencies, which you need to install by yourself.
 
 ```bash
-yarn add react-tracked react scheduler react-dom
-```
-
-For React Native users:
-
-```bash
-yarn add react-tracked react scheduler react-native
+npm add react-tracked react scheduler
 ```
 
 ## Usage
@@ -231,25 +225,25 @@ The [examples](examples) folder contains working examples.
 You can run one of them with
 
 ```bash
-PORT=8080 yarn run examples:01_minimal
+PORT=8080 pnpm run examples:01_minimal
 ```
 
 and open <http://localhost:8080> in your web browser.
 
-You can also try them in codesandbox.io:
-[01](https://codesandbox.io/s/github/dai-shi/react-tracked/tree/main/examples/01_minimal)
-[02](https://codesandbox.io/s/github/dai-shi/react-tracked/tree/main/examples/02_typescript)
-[03](https://codesandbox.io/s/github/dai-shi/react-tracked/tree/main/examples/03_usestate)
-[04](https://codesandbox.io/s/github/dai-shi/react-tracked/tree/main/examples/04_selector)
-[05](https://codesandbox.io/s/github/dai-shi/react-tracked/tree/main/examples/05_container)
-[06](https://codesandbox.io/s/github/dai-shi/react-tracked/tree/main/examples/06_customhook)
-[07](https://codesandbox.io/s/github/dai-shi/react-tracked/tree/main/examples/07_todolist)
-[08](https://codesandbox.io/s/github/dai-shi/react-tracked/tree/main/examples/08_comparison)
-[09](https://codesandbox.io/s/github/dai-shi/react-tracked/tree/main/examples/09_reactmemo)
-[10](https://codesandbox.io/s/github/dai-shi/react-tracked/tree/main/examples/10_untracked)
-[11](https://codesandbox.io/s/github/dai-shi/react-tracked/tree/main/examples/11_form)
-[12](https://codesandbox.io/s/github/dai-shi/react-tracked/tree/main/examples/12_async)
-[13](https://codesandbox.io/s/github/dai-shi/react-tracked/tree/main/examples/13_saga)
+You can also try them directly:
+[01](https://stackblitz.com/github/dai-shi/react-tracked/tree/main/examples/01_minimal)
+[02](https://stackblitz.com/github/dai-shi/react-tracked/tree/main/examples/02_typescript)
+[03](https://stackblitz.com/github/dai-shi/react-tracked/tree/main/examples/03_usestate)
+[04](https://stackblitz.com/github/dai-shi/react-tracked/tree/main/examples/04_selector)
+[05](https://stackblitz.com/github/dai-shi/react-tracked/tree/main/examples/05_container)
+[06](https://stackblitz.com/github/dai-shi/react-tracked/tree/main/examples/06_customhook)
+[07](https://stackblitz.com/github/dai-shi/react-tracked/tree/main/examples/07_todolist)
+[08](https://stackblitz.com/github/dai-shi/react-tracked/tree/main/examples/08_comparison)
+[09](https://stackblitz.com/github/dai-shi/react-tracked/tree/main/examples/09_reactmemo)
+[10](https://stackblitz.com/github/dai-shi/react-tracked/tree/main/examples/10_untracked)
+[11](https://stackblitz.com/github/dai-shi/react-tracked/tree/main/examples/11_form)
+[12](https://stackblitz.com/github/dai-shi/react-tracked/tree/main/examples/12_async)
+[13](https://stackblitz.com/github/dai-shi/react-tracked/tree/main/examples/13_saga)
 
 ## Benchmarks
 

diff --git a/examples/01_counter/index.html b/examples/01_counter/index.html
@@ -0,0 +1,9 @@
+<html>
+  <head>
+    <title>example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/01_counter/package.json b/examples/01_counter/package.json
@@ -2,20 +2,19 @@
   "name": "example",
   "version": "0.0.0",
   "private": true,
-  "type": "commonjs",
+  "type": "module",
   "dependencies": {
-    "@types/react": "latest",
-    "@types/react-dom": "latest",
     "react": "latest",
     "react-dom": "latest",
-    "react-scripts": "latest",
-    "react-tracked": "latest",
-    "typescript": "latest"
+    "react-tracked": "latest"
+  },
+  "devDependencies": {
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "typescript": "latest",
+    "vite": "latest"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "dev": "vite"
   }
 }
diff --git a/examples/01_counter/public/index.html b/examples/01_counter/public/index.html
diff --git a/examples/01_counter/src/index.tsx b/examples/01_counter/src/index.tsx
diff --git a/examples/01_counter/src/main.tsx b/examples/01_counter/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import App from './app';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
diff --git a/examples/01_counter/tsconfig.json b/examples/01_counter/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "target": "es2018",
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "skipLibCheck": true,
+    "allowJs": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "jsx": "react-jsx"
+  }
+}
diff --git a/examples/02_person/index.html b/examples/02_person/index.html
@@ -0,0 +1,9 @@
+<html>
+  <head>
+    <title>example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/02_person/package.json b/examples/02_person/package.json
@@ -2,20 +2,19 @@
   "name": "example",
   "version": "0.0.0",
   "private": true,
-  "type": "commonjs",
+  "type": "module",
   "dependencies": {
-    "@types/react": "latest",
-    "@types/react-dom": "latest",
     "react": "latest",
     "react-dom": "latest",
-    "react-scripts": "latest",
-    "react-tracked": "latest",
-    "typescript": "latest"
+    "react-tracked": "latest"
+  },
+  "devDependencies": {
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "typescript": "latest",
+    "vite": "latest"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "dev": "vite"
   }
 }
diff --git a/examples/02_person/public/index.html b/examples/02_person/public/index.html
diff --git a/examples/02_person/src/index.tsx b/examples/02_person/src/index.tsx
diff --git a/examples/02_person/src/main.tsx b/examples/02_person/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import App from './app';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
diff --git a/examples/02_person/tsconfig.json b/examples/02_person/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "target": "es2018",
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "skipLibCheck": true,
+    "allowJs": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "jsx": "react-jsx"
+  }
+}
diff --git a/examples/03_usestate/index.html b/examples/03_usestate/index.html
@@ -0,0 +1,9 @@
+<html>
+  <head>
+    <title>example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/03_usestate/package.json b/examples/03_usestate/package.json
@@ -2,20 +2,19 @@
   "name": "example",
   "version": "0.0.0",
   "private": true,
-  "type": "commonjs",
+  "type": "module",
   "dependencies": {
-    "@types/react": "latest",
-    "@types/react-dom": "latest",
     "react": "latest",
     "react-dom": "latest",
-    "react-scripts": "latest",
-    "react-tracked": "latest",
-    "typescript": "latest"
+    "react-tracked": "latest"
+  },
+  "devDependencies": {
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "typescript": "latest",
+    "vite": "latest"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "dev": "vite"
   }
 }
diff --git a/examples/03_usestate/public/index.html b/examples/03_usestate/public/index.html
diff --git a/examples/03_usestate/src/index.tsx b/examples/03_usestate/src/index.tsx
diff --git a/examples/03_usestate/src/main.tsx b/examples/03_usestate/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import App from './app';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
diff --git a/examples/03_usestate/tsconfig.json b/examples/03_usestate/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "target": "es2018",
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "skipLibCheck": true,
+    "allowJs": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "jsx": "react-jsx"
+  }
+}
diff --git a/examples/04_selector/index.html b/examples/04_selector/index.html
@@ -0,0 +1,9 @@
+<html>
+  <head>
+    <title>example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/04_selector/package.json b/examples/04_selector/package.json
@@ -2,20 +2,19 @@
   "name": "example",
   "version": "0.0.0",
   "private": true,
-  "type": "commonjs",
+  "type": "module",
   "dependencies": {
-    "@types/react": "latest",
-    "@types/react-dom": "latest",
     "react": "latest",
     "react-dom": "latest",
-    "react-scripts": "latest",
-    "react-tracked": "latest",
-    "typescript": "latest"
+    "react-tracked": "latest"
+  },
+  "devDependencies": {
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "typescript": "latest",
+    "vite": "latest"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "dev": "vite"
   }
 }
diff --git a/examples/04_selector/public/index.html b/examples/04_selector/public/index.html
diff --git a/examples/04_selector/src/index.tsx b/examples/04_selector/src/index.tsx
diff --git a/examples/04_selector/src/main.tsx b/examples/04_selector/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import App from './app';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);