Skip to content

Commit 3ac1dbf

Browse files
hoorayhooray
committed
feat: 更新依赖和示例
1 parent 076b96d commit 3ac1dbf

49 files changed

Lines changed: 2973 additions & 2756 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.node-version‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
20
1+
24

‎README.CN.md‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,14 @@ export default defineConfig({
2727
})
2828
```
2929

30+
不传参数时会直接使用插件内置的 `loading.html`。
31+
3032
在合适的时机隐藏加载动画：
3133

3234
```ts
3335
// src/main.ts
3436
import { loadingFadeOut } from 'virtual:app-loading'
37+
3538
loadingFadeOut()
3639
```
3740

@@ -61,7 +64,7 @@ loadingFadeOut()
6164

6265
## 自定义动画
6366

64-
在应用根目录创建 `loading.html` 文件：
67+
在应用根目录创建 `loading.html` 文件，并显式传入文件路径：
6568

6669
```html
6770
<style>
@@ -90,7 +93,7 @@ export default defineConfig({
9093
})
9194
```
9295

93-
![](https://github.com/user-attachments/assets/b05f8157-2f06-44af-b8bb-fa53701daf29)
96+
![example](https://github.com/user-attachments/assets/b05f8157-2f06-44af-b8bb-fa53701daf29)
9497

9598
> [!TIP]
9699
> 你可以从下列网站中找找灵感，它们都提供了纯 CSS 的加载动画，非常适合搭配本插件一起使用。

‎README.md‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,14 @@ export default defineConfig({
2727
})
2828
```
2929

30+
If no argument is passed, the plugin uses the built-in `loading.html`.
31+
3032
Hide the loading animation at the right time:
3133

3234
```ts
3335
// src/main.ts
3436
import { loadingFadeOut } from 'virtual:app-loading'
37+
3538
loadingFadeOut()
3639
```
3740

@@ -61,7 +64,7 @@ There are two ways of telling typescript about the types of the virtual import:
6164

6265
## Custom animations
6366

64-
Create a `loading.html` file at the root directory:
67+
Create a `loading.html` file at the root directory and pass its path explicitly:
6568

6669
```html
6770
<style>
@@ -90,7 +93,7 @@ export default defineConfig({
9093
})
9194
```
9295

93-
![](https://github.com/user-attachments/assets/b05f8157-2f06-44af-b8bb-fa53701daf29)
96+
![example](https://github.com/user-attachments/assets/b05f8157-2f06-44af-b8bb-fa53701daf29)
9497

9598
> [!TIP]
9699
> You can find inspiration from the following websites, which all provide CSS-only loading animations that are perfect for use with this plugin.

‎example/react/README.md‎

Lines changed: 53 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -4,47 +4,70 @@ This template provides a minimal setup to get React working in Vite with HMR and
44

55
Currently, two official plugins are available:
66

7-
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8-
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
7+
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
8+
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
99

10-
## Expanding the ESLint configuration
10+
## React Compiler
11+
12+
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
1113

12-
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
14+
## Expanding the ESLint configuration
1315

14-
- Configure the top-level `parserOptions` property like this:
16+
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
1517

1618
```js
17-
export default tseslint.config({
18-
languageOptions: {
19-
// other options...
20-
parserOptions: {
21-
project: ['./tsconfig.node.json', './tsconfig.app.json'],
22-
tsconfigRootDir: import.meta.dirname,
19+
export default defineConfig([
20+
globalIgnores(['dist']),
21+
{
22+
files: ['**/*.{ts,tsx}'],
23+
extends: [
24+
// Other configs...
25+
26+
// Remove tseslint.configs.recommended and replace with this
27+
tseslint.configs.recommendedTypeChecked,
28+
// Alternatively, use this for stricter rules
29+
tseslint.configs.strictTypeChecked,
30+
// Optionally, add this for stylistic rules
31+
tseslint.configs.stylisticTypeChecked,
32+
33+
// Other configs...
34+
],
35+
languageOptions: {
36+
parserOptions: {
37+
project: ['./tsconfig.node.json', './tsconfig.app.json'],
38+
tsconfigRootDir: import.meta.dirname,
39+
},
40+
// other options...
2341
},
2442
},
25-
})
43+
])
2644
```
2745

28-
- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
29-
- Optionally add `...tseslint.configs.stylisticTypeChecked`
30-
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
46+
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
3147

3248
```js
3349
// eslint.config.js
34-
import react from 'eslint-plugin-react'
35-
36-
export default tseslint.config({
37-
// Set the react version
38-
settings: { react: { version: '18.3' } },
39-
plugins: {
40-
// Add the react plugin
41-
react,
42-
},
43-
rules: {
44-
// other rules...
45-
// Enable its recommended rules
46-
...react.configs.recommended.rules,
47-
...react.configs['jsx-runtime'].rules,
50+
import reactX from 'eslint-plugin-react-x'
51+
import reactDom from 'eslint-plugin-react-dom'
52+
53+
export default defineConfig([
54+
globalIgnores(['dist']),
55+
{
56+
files: ['**/*.{ts,tsx}'],
57+
extends: [
58+
// Other configs...
59+
// Enable lint rules for React
60+
reactX.configs['recommended-typescript'],
61+
// Enable lint rules for React DOM
62+
reactDom.configs.recommended,
63+
],
64+
languageOptions: {
65+
parserOptions: {
66+
project: ['./tsconfig.node.json', './tsconfig.app.json'],
67+
tsconfigRootDir: import.meta.dirname,
68+
},
69+
// other options...
70+
},
4871
},
49-
})
72+
])
5073
```

‎example/react/eslint.config.js‎

Lines changed: 11 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,23 @@
11
import js from '@eslint/js'
2+
import globals from 'globals'
23
import reactHooks from 'eslint-plugin-react-hooks'
34
import reactRefresh from 'eslint-plugin-react-refresh'
4-
import globals from 'globals'
55
import tseslint from 'typescript-eslint'
6+
import { defineConfig, globalIgnores } from 'eslint/config'
67

7-
export default tseslint.config(
8-
{ ignores: ['dist'] },
8+
export default defineConfig([
9+
globalIgnores(['dist']),
910
{
10-
extends: [js.configs.recommended, ...tseslint.configs.recommended],
1111
files: ['**/*.{ts,tsx}'],
12+
extends: [
13+
js.configs.recommended,
14+
tseslint.configs.recommended,
15+
reactHooks.configs.flat.recommended,
16+
reactRefresh.configs.vite,
17+
],
1218
languageOptions: {
1319
ecmaVersion: 2020,
1420
globals: globals.browser,
1521
},
16-
plugins: {
17-
'react-hooks': reactHooks,
18-
'react-refresh': reactRefresh,
19-
},
20-
rules: {
21-
...reactHooks.configs.recommended.rules,
22-
'react-refresh/only-export-components': [
23-
'warn',
24-
{ allowConstantExport: true },
25-
],
26-
},
2722
},
28-
)
23+
])

‎example/react/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
5+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Vite + React + TS</title>
7+
<title>react</title>
88
</head>
99
<body>
1010
<div id="root"></div>

‎example/react/loading.html‎

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

‎example/react/package.json‎

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,31 @@
11
{
22
"name": "react",
3-
"type": "module",
4-
"version": "0.4.0",
53
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
66
"scripts": {
77
"dev": "vite",
88
"build": "tsc -b && vite build",
99
"lint": "eslint .",
1010
"preview": "vite preview"
1111
},
1212
"dependencies": {
13-
"react": "^18.3.1",
14-
"react-dom": "^18.3.1"
13+
"react": "^19.2.4",
14+
"react-dom": "^19.2.5"
1515
},
1616
"devDependencies": {
17-
"@eslint/js": "^9.28.0",
18-
"@types/react": "^19.1.6",
19-
"@types/react-dom": "^19.1.5",
20-
"@vitejs/plugin-react": "^4.5.1",
21-
"eslint": "^9.28.0",
22-
"eslint-plugin-react-hooks": "^5.2.0",
23-
"eslint-plugin-react-refresh": "^0.4.20",
24-
"globals": "^15.15.0",
25-
"typescript": "^5.8.3",
26-
"typescript-eslint": "^8.33.1",
27-
"vite": "^6.3.5",
17+
"@eslint/js": "^9.39.4",
18+
"@types/node": "^25.6.0",
19+
"@types/react": "^19.2.14",
20+
"@types/react-dom": "^19.2.3",
21+
"@vitejs/plugin-react": "^6.0.1",
22+
"eslint": "^9.39.4",
23+
"eslint-plugin-react-hooks": "^7.0.1",
24+
"eslint-plugin-react-refresh": "^0.5.2",
25+
"globals": "^17.5.0",
26+
"typescript": "~6.0.2",
27+
"typescript-eslint": "^8.58.2",
28+
"vite": "^8.0.8",
2829
"vite-plugin-app-loading": "workspace:*"
2930
}
3031
}

‎example/react/public/favicon.svg‎

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)