Skip to content

Commit 0e41ca9

Browse files
dai-shidai-shi
authored
examples: migrate to vite (#128)
* examples: migrate to vite * missing tsconfig
1 parent 6d32be4 commit 0e41ca9

23 files changed

+132
-135
lines changed

‎README.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -243,15 +243,15 @@ The [examples](examples) folder contains working examples.
243243
You can run one of them with
244244

245245
```bash
246-
PORT=8080 yarn run examples:01_counter
246+
PORT=8080 pnpm run examples:01_counter
247247
```
248248

249249
and open <http://localhost:8080> in your web browser.
250250

251-
You can also try them in codesandbox.io:
252-
[01](https://codesandbox.io/s/github/dai-shi/use-context-selector/tree/main/examples/01_counter)
253-
[02](https://codesandbox.io/s/github/dai-shi/use-context-selector/tree/main/examples/02_person)
254-
[03](https://codesandbox.io/s/github/dai-shi/use-context-selector/tree/main/examples/03_suspense)
251+
You can also try them directly:
252+
[01](https://stackblitz.com/github/dai-shi/use-context-selector/tree/main/examples/01_counter)
253+
[02](https://stackblitz.com/github/dai-shi/use-context-selector/tree/main/examples/02_person)
254+
[03](https://stackblitz.com/github/dai-shi/use-context-selector/tree/main/examples/03_suspense)
255255

256256
## Projects that use use-context-selector
257257

‎examples/01_counter/index.html

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<html>
2+
<head>
3+
<title>example</title>
4+
</head>
5+
<body>
6+
<div id="root"></div>
7+
<script type="module" src="/src/main.tsx"></script>
8+
</body>
9+
</html>

‎examples/01_counter/package.json

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,19 @@
22
"name": "example",
33
"version": "0.0.0",
44
"private": true,
5-
"type": "commonjs",
5+
"type": "module",
66
"dependencies": {
7-
"@types/react": "latest",
8-
"@types/react-dom": "latest",
97
"react": "latest",
108
"react-dom": "latest",
11-
"react-scripts": "latest",
12-
"typescript": "latest",
139
"use-context-selector": "latest"
1410
},
11+
"devDependencies": {
12+
"@types/react": "latest",
13+
"@types/react-dom": "latest",
14+
"typescript": "latest",
15+
"vite": "latest"
16+
},
1517
"scripts": {
16-
"start": "react-scripts start",
17-
"build": "react-scripts build",
18-
"test": "react-scripts test",
19-
"eject": "react-scripts eject"
18+
"dev": "vite"
2019
}
2120
}

‎examples/01_counter/public/index.html

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎examples/01_counter/src/index.tsx

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎examples/01_counter/src/main.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { StrictMode } from 'react';
2+
import { createRoot } from 'react-dom/client';
3+
4+
import App from './app';
5+
6+
createRoot(document.getElementById('root')!).render(
7+
<StrictMode>
8+
<App />
9+
</StrictMode>,
10+
);

‎examples/01_counter/tsconfig.json

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"compilerOptions": {
3+
"strict": true,
4+
"target": "es2018",
5+
"esModuleInterop": true,
6+
"module": "esnext",
7+
"moduleResolution": "bundler",
8+
"skipLibCheck": true,
9+
"allowJs": true,
10+
"noUncheckedIndexedAccess": true,
11+
"exactOptionalPropertyTypes": true,
12+
"jsx": "react-jsx"
13+
}
14+
}

‎examples/02_person/index.html

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<html>
2+
<head>
3+
<title>example</title>
4+
</head>
5+
<body>
6+
<div id="root"></div>
7+
<script type="module" src="/src/main.tsx"></script>
8+
</body>
9+
</html>

‎examples/02_person/package.json

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,19 @@
22
"name": "example",
33
"version": "0.0.0",
44
"private": true,
5-
"type": "commonjs",
5+
"type": "module",
66
"dependencies": {
7-
"@types/react": "latest",
8-
"@types/react-dom": "latest",
97
"react": "latest",
108
"react-dom": "latest",
11-
"react-scripts": "latest",
12-
"typescript": "latest",
139
"use-context-selector": "latest"
1410
},
11+
"devDependencies": {
12+
"@types/react": "latest",
13+
"@types/react-dom": "latest",
14+
"typescript": "latest",
15+
"vite": "latest"
16+
},
1517
"scripts": {
16-
"start": "react-scripts start",
17-
"build": "react-scripts build",
18-
"test": "react-scripts test",
19-
"eject": "react-scripts eject"
18+
"dev": "vite"
2019
}
2120
}

‎examples/02_person/public/index.html

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎examples/02_person/src/index.tsx

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎examples/02_person/src/main.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { StrictMode } from 'react';
2+
import { createRoot } from 'react-dom/client';
3+
4+
import App from './app';
5+
6+
createRoot(document.getElementById('root')!).render(
7+
<StrictMode>
8+
<App />
9+
</StrictMode>,
10+
);

‎examples/02_person/tsconfig.json

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"compilerOptions": {
3+
"strict": true,
4+
"target": "es2018",
5+
"esModuleInterop": true,
6+
"module": "esnext",
7+
"moduleResolution": "bundler",
8+
"skipLibCheck": true,
9+
"allowJs": true,
10+
"noUncheckedIndexedAccess": true,
11+
"exactOptionalPropertyTypes": true,
12+
"jsx": "react-jsx"
13+
}
14+
}

‎examples/03_suspense/index.html

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<html>
2+
<head>
3+
<title>example</title>
4+
</head>
5+
<body>
6+
<div id="root"></div>
7+
<script type="module" src="/src/main.tsx"></script>
8+
</body>
9+
</html>

‎examples/03_suspense/package.json

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,19 @@
22
"name": "example",
33
"version": "0.0.0",
44
"private": true,
5-
"type": "commonjs",
5+
"type": "module",
66
"dependencies": {
7-
"@types/react": "latest",
8-
"@types/react-dom": "latest",
97
"react": "latest",
108
"react-dom": "latest",
11-
"react-scripts": "latest",
12-
"typescript": "latest",
139
"use-context-selector": "latest"
1410
},
11+
"devDependencies": {
12+
"@types/react": "latest",
13+
"@types/react-dom": "latest",
14+
"typescript": "latest",
15+
"vite": "latest"
16+
},
1517
"scripts": {
16-
"start": "react-scripts start",
17-
"build": "react-scripts build",
18-
"test": "react-scripts test",
19-
"eject": "react-scripts eject"
18+
"dev": "vite"
2019
}
2120
}

‎examples/03_suspense/public/index.html

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎examples/03_suspense/src/index.tsx

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎examples/03_suspense/src/main.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { StrictMode } from 'react';
2+
import { createRoot } from 'react-dom/client';
3+
4+
import App from './app';
5+
6+
createRoot(document.getElementById('root')!).render(
7+
<StrictMode>
8+
<App />
9+
</StrictMode>,
10+
);

‎examples/03_suspense/tsconfig.json

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"compilerOptions": {
3+
"strict": true,
4+
"target": "es2018",
5+
"esModuleInterop": true,
6+
"module": "esnext",
7+
"moduleResolution": "bundler",
8+
"skipLibCheck": true,
9+
"allowJs": true,
10+
"noUncheckedIndexedAccess": true,
11+
"exactOptionalPropertyTypes": true,
12+
"jsx": "react-jsx"
13+
}
14+
}

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@
7979
"scheduler": "^0.23.2",
8080
"ts-expect": "^1.3.0",
8181
"typescript": "^5.4.5",
82+
"use-context-selector": "link:.",
8283
"vite": "^5.2.11",
8384
"vitest": "^1.6.0"
8485
},

‎pnpm-lock.yaml

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎tsconfig.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
"compilerOptions": {
33
"strict": true,
44
"target": "es2018",
5-
"downlevelIteration": true,
65
"esModuleInterop": true,
76
"module": "nodenext",
87
"skipLibCheck": true,

‎vite.config.ts

Lines changed: 0 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
/// <reference types="vitest" />
22

33
import { resolve } from 'node:path';
4-
import { readFileSync } from 'node:fs';
54
import { defineConfig } from 'vite';
6-
import type { Plugin } from 'vite';
75

86
const { DIR, PORT = '8080' } = process.env;
97

@@ -24,42 +22,5 @@ export default defineConfig(({ mode }) => {
2422
root: resolve('examples', DIR),
2523
server: { port: Number(PORT) },
2624
resolve: { alias: { 'use-context-selector': resolve('src') } },
27-
plugins: [indexHtml(resolve('examples', DIR, 'public', 'index.html'))],
2825
};
2926
});
30-
31-
function indexHtml(file: string): Plugin {
32-
const html = readFileSync(file, 'utf8');
33-
return {
34-
name: 'index-html-plugin',
35-
configureServer(server) {
36-
return () => {
37-
server.middlewares.use((req, res) => {
38-
server
39-
.transformIndexHtml(req.url || '', html)
40-
.then((content) => {
41-
res.statusCode = 200;
42-
res.setHeader('content-type', 'text/html; charset=utf-8');
43-
res.end(content);
44-
})
45-
.catch((err) => {
46-
console.error('Error transforming index.html', err);
47-
res.statusCode = 500;
48-
res.end('Internal Server Error');
49-
});
50-
});
51-
};
52-
},
53-
config() {
54-
return { optimizeDeps: { entries: ['src/index'] } };
55-
},
56-
transformIndexHtml() {
57-
return [
58-
{
59-
tag: 'script',
60-
attrs: { type: 'module', src: '/src/index' },
61-
},
62-
];
63-
},
64-
};
65-
}

0 commit comments

Comments
 (0)