diff --git a/README.md b/README.md index 1737499..7579a6c 100644 --- 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 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 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 2a326d4..1d0658f 100644 --- 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 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 10774d1..0000000 --- a/examples/01_counter/src/index.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { StrictMode } from 'react'; -import { createRoot } from 'react-dom/client'; - -import App from './app'; - -const ele = document.getElementById('app'); -if (ele) { - createRoot(ele).render( - - - , - ); -} 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..f9e0a7e --- /dev/null +++ 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 new file mode 100644 index 0000000..ec005a3 --- /dev/null +++ b/examples/02_person/index.html @@ -0,0 +1,9 @@ + + + example + + +
+ + + diff --git a/examples/02_person/package.json b/examples/02_person/package.json index 2a326d4..1d0658f 100644 --- 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 deleted file mode 100644 index ad4c782..0000000 --- a/examples/02_person/public/index.html +++ /dev/null @@ -1,8 +0,0 @@ - - - example - - -
- - diff --git a/examples/02_person/src/index.tsx b/examples/02_person/src/index.tsx deleted file mode 100644 index 10774d1..0000000 --- a/examples/02_person/src/index.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { StrictMode } from 'react'; -import { createRoot } from 'react-dom/client'; - -import App from './app'; - -const ele = document.getElementById('app'); -if (ele) { - createRoot(ele).render( - - - , - ); -} diff --git a/examples/02_person/src/main.tsx b/examples/02_person/src/main.tsx new file mode 100644 index 0000000..1a72c01 --- /dev/null +++ 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( + + + , +); diff --git a/examples/02_person/tsconfig.json b/examples/02_person/tsconfig.json new file mode 100644 index 0000000..f9e0a7e --- /dev/null +++ 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 new file mode 100644 index 0000000..ec005a3 --- /dev/null +++ b/examples/03_suspense/index.html @@ -0,0 +1,9 @@ + + + example + + +
+ + + diff --git a/examples/03_suspense/package.json b/examples/03_suspense/package.json index 2a326d4..1d0658f 100644 --- 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 deleted file mode 100644 index ad4c782..0000000 --- a/examples/03_suspense/public/index.html +++ /dev/null @@ -1,8 +0,0 @@ - - - example - - -
- - diff --git a/examples/03_suspense/src/index.tsx b/examples/03_suspense/src/index.tsx deleted file mode 100644 index 10774d1..0000000 --- a/examples/03_suspense/src/index.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { StrictMode } from 'react'; -import { createRoot } from 'react-dom/client'; - -import App from './app'; - -const ele = document.getElementById('app'); -if (ele) { - createRoot(ele).render( - - - , - ); -} diff --git a/examples/03_suspense/src/main.tsx b/examples/03_suspense/src/main.tsx new file mode 100644 index 0000000..1a72c01 --- /dev/null +++ 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( + + + , +); diff --git a/examples/03_suspense/tsconfig.json b/examples/03_suspense/tsconfig.json new file mode 100644 index 0000000..f9e0a7e --- /dev/null +++ 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 index 820e59b..d7192bf 100644 --- 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 index e3c64d5..4317300 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -77,6 +77,9 @@ devDependencies: typescript: specifier: ^5.4.5 version: 5.4.5 + use-context-selector: + specifier: link:. + version: 'link:' vite: specifier: ^5.2.11 version: 5.2.11(@types/node@20.12.10) diff --git a/tsconfig.json b/tsconfig.json index 10a4364..1060a44 100644 --- 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 index 66eab8f..9583765 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-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' }, - }, - ]; - }, - }; -}