examples: migrate to vite

jotaijs · May 21, 2024 · cc04517 · cc04517
1 parent 04b5858
commit cc04517
Show file tree

Hide file tree

Showing 10 changed files with 46 additions and 71 deletions.
diff --git a/examples/01_typescript/index.html b/examples/01_typescript/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_typescript/package.json b/examples/01_typescript/package.json
@@ -2,21 +2,20 @@
   "name": "example",
   "version": "0.0.0",
   "private": true,
-  "type": "commonjs",
+  "type": "module",
   "dependencies": {
-    "@types/react": "latest",
-    "@types/react-dom": "latest",
-    "jotai": "latest",
     "jotai-cache": "latest",
     "react": "latest",
     "react-dom": "latest",
-    "react-scripts": "latest",
-    "typescript": "latest"
+    "valtio": "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_typescript/public/index.html b/examples/01_typescript/public/index.html
diff --git a/examples/01_typescript/src/index.tsx b/examples/01_typescript/src/index.tsx
diff --git a/examples/01_typescript/src/main.tsx b/examples/01_typescript/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_typescript/tsconfig.json b/examples/01_typescript/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
@@ -69,6 +69,7 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "happy-dom": "^14.10.1",
     "jotai": "^2.8.0",
+    "jotai-cache": "link:.",
     "prettier": "^3.2.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

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: { 'jotai-cache': 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' },
-        },
-      ];
-    },
-  };
-}