From 4dfd3742a043c4440bdcdf84e7ca7faeb48d6396 Mon Sep 17 00:00:00 2001 From: Daishi Kato Date: Mon, 20 May 2024 22:35:17 +0900 Subject: [PATCH] examples: migrate to vite (#7) * examples: migrate to vite * fix format --- README.md | 8 +++--- examples/01_counter/index.html | 9 ++++++ examples/01_counter/package.json | 19 ++++++------- examples/01_counter/public/index.html | 8 ------ examples/01_counter/src/index.tsx | 9 ------ examples/01_counter/src/main.tsx | 10 +++++++ examples/01_counter/tsconfig.json | 15 ++++++++++ examples/02_suspense/index.html | 9 ++++++ examples/02_suspense/package.json | 19 ++++++------- examples/02_suspense/public/index.html | 8 ------ examples/02_suspense/src/index.tsx | 9 ------ examples/02_suspense/src/main.tsx | 10 +++++++ examples/02_suspense/tsconfig.json | 15 ++++++++++ vite.config.ts | 39 -------------------------- 14 files changed, 90 insertions(+), 97 deletions(-) create mode 100644 examples/01_counter/index.html delete mode 100644 examples/01_counter/public/index.html delete mode 100644 examples/01_counter/src/index.tsx create mode 100644 examples/01_counter/src/main.tsx create mode 100644 examples/01_counter/tsconfig.json create mode 100644 examples/02_suspense/index.html delete mode 100644 examples/02_suspense/public/index.html delete mode 100644 examples/02_suspense/src/index.tsx create mode 100644 examples/02_suspense/src/main.tsx create mode 100644 examples/02_suspense/tsconfig.json diff --git a/README.md b/README.md index 14e8908..0c8def3 100644 --- a/README.md +++ b/README.md @@ -65,11 +65,11 @@ 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 in your web browser. -You can also try them in codesandbox.io: -[01](https://codesandbox.io/s/github/zustandjs/use-zustand/tree/main/examples/01_counter) -[02](https://codesandbox.io/s/github/zustandjs/use-zustand/tree/main/examples/02_suspense) +You can also try them directly: +[01](https://stackblitz.com/github/zustandjs/use-zustand/tree/main/examples/01_counter) +[02](https://stackblitz.com/github/zustandjs/use-zustand/tree/main/examples/02_suspense) diff --git a/examples/01_counter/index.html b/examples/01_counter/index.html new file mode 100644 index 0000000..ec005a3 --- /dev/null +++ b/examples/01_counter/index.html @@ -0,0 +1,9 @@ + + + example + + +
+ + + diff --git a/examples/01_counter/package.json b/examples/01_counter/package.json index 7f08de4..533ae60 100644 --- a/examples/01_counter/package.json +++ b/examples/01_counter/package.json @@ -2,21 +2,20 @@ "name": "example", "version": "0.0.0", "private": true, - "type": "commonjs", + "type": "module", "dependencies": { + "react": "latest", + "react-dom": "latest", + "use-zustand": "latest", + "zustand": "latest" + }, + "devDependencies": { "@types/react": "latest", "@types/react-dom": "latest", - "react": "beta", - "react-dom": "beta", - "react-scripts": "latest", "typescript": "latest", - "use-zustand": "latest", - "zustand": "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 deleted file mode 100644 index ad4c782..0000000 --- a/examples/01_counter/public/index.html +++ /dev/null @@ -1,8 +0,0 @@ - - - example - - -
- - diff --git a/examples/01_counter/src/index.tsx b/examples/01_counter/src/index.tsx deleted file mode 100644 index bce2fb1..0000000 --- a/examples/01_counter/src/index.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import { createRoot } from 'react-dom/client'; - -import App from './app'; - -const ele = document.getElementById('app'); -if (ele) { - createRoot(ele).render(React.createElement(App)); -} diff --git a/examples/01_counter/src/main.tsx b/examples/01_counter/src/main.tsx new file mode 100644 index 0000000..1a72c01 --- /dev/null +++ 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( + + + , +); diff --git a/examples/01_counter/tsconfig.json b/examples/01_counter/tsconfig.json new file mode 100644 index 0000000..d387817 --- /dev/null +++ b/examples/01_counter/tsconfig.json @@ -0,0 +1,15 @@ +{ + "compilerOptions": { + "strict": true, + "target": "es2018", + "downlevelIteration": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "bundler", + "skipLibCheck": true, + "allowJs": true, + "noUncheckedIndexedAccess": true, + "exactOptionalPropertyTypes": true, + "jsx": "react-jsx" + } +} diff --git a/examples/02_suspense/index.html b/examples/02_suspense/index.html new file mode 100644 index 0000000..ec005a3 --- /dev/null +++ b/examples/02_suspense/index.html @@ -0,0 +1,9 @@ + + + example + + +
+ + + diff --git a/examples/02_suspense/package.json b/examples/02_suspense/package.json index 7f08de4..533ae60 100644 --- a/examples/02_suspense/package.json +++ b/examples/02_suspense/package.json @@ -2,21 +2,20 @@ "name": "example", "version": "0.0.0", "private": true, - "type": "commonjs", + "type": "module", "dependencies": { + "react": "latest", + "react-dom": "latest", + "use-zustand": "latest", + "zustand": "latest" + }, + "devDependencies": { "@types/react": "latest", "@types/react-dom": "latest", - "react": "beta", - "react-dom": "beta", - "react-scripts": "latest", "typescript": "latest", - "use-zustand": "latest", - "zustand": "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_suspense/public/index.html b/examples/02_suspense/public/index.html deleted file mode 100644 index ad4c782..0000000 --- a/examples/02_suspense/public/index.html +++ /dev/null @@ -1,8 +0,0 @@ - - - example - - -
- - diff --git a/examples/02_suspense/src/index.tsx b/examples/02_suspense/src/index.tsx deleted file mode 100644 index bce2fb1..0000000 --- a/examples/02_suspense/src/index.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import { createRoot } from 'react-dom/client'; - -import App from './app'; - -const ele = document.getElementById('app'); -if (ele) { - createRoot(ele).render(React.createElement(App)); -} diff --git a/examples/02_suspense/src/main.tsx b/examples/02_suspense/src/main.tsx new file mode 100644 index 0000000..1a72c01 --- /dev/null +++ b/examples/02_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( + + + , +); diff --git a/examples/02_suspense/tsconfig.json b/examples/02_suspense/tsconfig.json new file mode 100644 index 0000000..d387817 --- /dev/null +++ b/examples/02_suspense/tsconfig.json @@ -0,0 +1,15 @@ +{ + "compilerOptions": { + "strict": true, + "target": "es2018", + "downlevelIteration": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "bundler", + "skipLibCheck": true, + "allowJs": true, + "noUncheckedIndexedAccess": true, + "exactOptionalPropertyTypes": true, + "jsx": "react-jsx" + } +} diff --git a/vite.config.ts b/vite.config.ts index bd4a88e..0a6e8c2 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,9 +1,7 @@ /// 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-zustand': 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' }, - }, - ]; - }, - }; -}