examples: migrate to vite (#128)

* examples: migrate to vite * missing tsconfig
dai-shi · May 21, 2024 · 0e41ca9 · 0e41ca9
1 parent 6d32be4
commit 0e41ca9
Show file tree

Hide file tree

Showing 23 changed files with 132 additions and 135 deletions.
diff --git a/README.md b/README.md
@@ -243,15 +243,15 @@ The [examples](examples) folder contains working examples.
 You can run one of them with
 
 ```bash
-PORT=8080 yarn run examples:01_counter
+PORT=8080 pnpm run examples:01_counter
 ```
 
 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/use-context-selector/tree/main/examples/01_counter)
-[02](https://codesandbox.io/s/github/dai-shi/use-context-selector/tree/main/examples/02_person)
-[03](https://codesandbox.io/s/github/dai-shi/use-context-selector/tree/main/examples/03_suspense)
+You can also try them directly:
+[01](https://stackblitz.com/github/dai-shi/use-context-selector/tree/main/examples/01_counter)
+[02](https://stackblitz.com/github/dai-shi/use-context-selector/tree/main/examples/02_person)
+[03](https://stackblitz.com/github/dai-shi/use-context-selector/tree/main/examples/03_suspense)
 
 ## Projects that use use-context-selector
 

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",
-    "typescript": "latest",
     "use-context-selector": "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",
-    "typescript": "latest",
     "use-context-selector": "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_suspense/index.html b/examples/03_suspense/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_suspense/package.json b/examples/03_suspense/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",
-    "typescript": "latest",
     "use-context-selector": "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_suspense/public/index.html b/examples/03_suspense/public/index.html
diff --git a/examples/03_suspense/src/index.tsx b/examples/03_suspense/src/index.tsx
diff --git a/examples/03_suspense/src/main.tsx b/examples/03_suspense/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_suspense/tsconfig.json b/examples/03_suspense/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/package.json b/package.json
@@ -79,6 +79,7 @@
     "scheduler": "^0.23.2",
     "ts-expect": "^1.3.0",
     "typescript": "^5.4.5",
+    "use-context-selector": "link:.",
     "vite": "^5.2.11",
     "vitest": "^1.6.0"
   },

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/tsconfig.json b/tsconfig.json
@@ -2,7 +2,6 @@
   "compilerOptions": {
     "strict": true,
     "target": "es2018",
-    "downlevelIteration": true,
     "esModuleInterop": true,
     "module": "nodenext",
     "skipLibCheck": true,

diff --git a/vite.config.ts b/vite.config.ts
@@ -1,9 +1,7 @@
 /// <reference types="vitest" />
 
 import { resolve } from 'node:path';
-import { readFileSync } from 'node:fs';
 import { defineConfig } from 'vite';
-import type { Plugin } from 'vite';
 
 const { DIR, PORT = '8080' } = process.env;
 
@@ -24,42 +22,5 @@ export default defineConfig(({ mode }) => {
     root: resolve('examples', DIR),
     server: { port: Number(PORT) },
     resolve: { alias: { 'use-context-selector': resolve('src') } },
-    plugins: [indexHtml(resolve('examples', DIR, 'public', 'index.html'))],
   };
 });
-
-function indexHtml(file: string): Plugin {
-  const html = readFileSync(file, 'utf8');
-  return {
-    name: 'index-html-plugin',
-    configureServer(server) {
-      return () => {
-        server.middlewares.use((req, res) => {
-          server
-            .transformIndexHtml(req.url || '', html)
-            .then((content) => {
-              res.statusCode = 200;
-              res.setHeader('content-type', 'text/html; charset=utf-8');
-              res.end(content);
-            })
-            .catch((err) => {
-              console.error('Error transforming index.html', err);
-              res.statusCode = 500;
-              res.end('Internal Server Error');
-            });
-        });
-      };
-    },
-    config() {
-      return { optimizeDeps: { entries: ['src/index'] } };
-    },
-    transformIndexHtml() {
-      return [
-        {
-          tag: 'script',
-          attrs: { type: 'module', src: '/src/index' },
-        },
-      ];
-    },
-  };
-}