Skip to content

Commit 8837d71

Browse files
VdustRCopilot
VdustR
and
Copilot
authored
fix: default ReactLive and @babel/traverse resolution (#4)
* fix: default ReactLive and @babel/traverse resolution * Update packages/docs/src/components/StyledButton.tsx Co-authored-by: Copilot <[email protected]> --------- Co-authored-by: Copilot <[email protected]>
1 parent d2b601a commit 8837d71

Some content is hidden

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

44 files changed

+1206
-782
lines changed

‎.gitignore‎

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
1-
# Created by https://www.toptal.com/developers/gitignore/api/node
2-
# Edit at https://www.toptal.com/developers/gitignore?templates=node
1+
# START: https://github.com/github/gitignore/blob/3800aff/Node.gitignore
32

4-
### Node ###
53
# Logs
64
logs
75
*.log
@@ -106,6 +104,13 @@ dist
106104

107105
# vuepress v2.x temp and cache directory
108106
.temp
107+
.cache
108+
109+
# vitepress build output
110+
**/.vitepress/dist
111+
112+
# vitepress cache directory
113+
**/.vitepress/cache
109114

110115
# Docusaurus cache and generated files
111116
.docusaurus
@@ -132,16 +137,7 @@ dist
132137
.yarn/install-state.gz
133138
.pnp.*
134139

135-
### Node Patch ###
136-
# Serverless Webpack directories
137-
.webpack/
138-
139-
# Optional stylelint cache
140-
141-
# SvelteKit build / generate output
142-
.svelte-kit
143-
144-
# End of https://www.toptal.com/developers/gitignore/api/node
140+
# END: https://github.com/github/gitignore/blob/3800aff/Node.gitignore
145141

146142
!.env
147143
!.env.*

‎cspell.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,8 @@
3434
"tsdoc",
3535
"unplugin",
3636
"unrs",
37+
"vite",
38+
"vitejs",
3739
"vitest"
3840
]
3941
}

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252
"fast-glob": "catalog:",
5353
"husky": "catalog:",
5454
"jiti": "catalog:",
55-
"lerna": "^8.2.2",
55+
"lerna": "catalog:",
5656
"lint-staged": "catalog:",
5757
"pathe": "catalog:",
5858
"postcss-styled-syntax": "catalog:",

‎packages/demo-vite/README.md‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
# React + TypeScript + Vite
2+
3+
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4+
5+
Currently, two official plugins are available:
6+
7+
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
8+
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9+
10+
## Expanding the ESLint configuration
11+
12+
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
13+
14+
```js
15+
export default tseslint.config({
16+
extends: [
17+
// Remove ...tseslint.configs.recommended and replace with this
18+
...tseslint.configs.recommendedTypeChecked,
19+
// Alternatively, use this for stricter rules
20+
...tseslint.configs.strictTypeChecked,
21+
// Optionally, add this for stylistic rules
22+
...tseslint.configs.stylisticTypeChecked,
23+
],
24+
languageOptions: {
25+
// other options...
26+
parserOptions: {
27+
project: ["./tsconfig.node.json", "./tsconfig.app.json"],
28+
tsconfigRootDir: import.meta.dirname,
29+
},
30+
},
31+
});
32+
```
33+
34+
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:
35+
36+
```js
37+
import reactDom from "eslint-plugin-react-dom";
38+
// eslint.config.js
39+
import reactX from "eslint-plugin-react-x";
40+
41+
export default tseslint.config({
42+
plugins: {
43+
// Add the react-x and react-dom plugins
44+
"react-x": reactX,
45+
"react-dom": reactDom,
46+
},
47+
rules: {
48+
// other rules...
49+
// Enable its recommended typescript rules
50+
...reactX.configs["recommended-typescript"].rules,
51+
...reactDom.configs.recommended.rules,
52+
},
53+
});
54+
```

‎packages/demo-vite/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + React + TS</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
13+
</html>

‎packages/demo-vite/package.json‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"name": "demo-vite",
3+
"version": "0.0.0-unused",
4+
"private": true,
5+
"description": "Demo Vite for react-live-unplugin",
6+
"type": "module",
7+
"scripts": {
8+
"build": "tsc -b && vite build",
9+
"dev": "vite",
10+
"preview": "vite preview"
11+
},
12+
"dependencies": {
13+
"react": "catalog:",
14+
"react-dom": "catalog:"
15+
},
16+
"devDependencies": {
17+
"@types/react": "catalog:",
18+
"@types/react-dom": "catalog:",
19+
"@vitejs/plugin-react-swc": "catalog:",
20+
"react-live-unplugin": "workspace:*",
21+
"typescript": "catalog:",
22+
"vite": "catalog:"
23+
}
24+
}

‎packages/demo-vite/public/vite.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎packages/demo-vite/src/App.css‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
#root {
2+
max-width: 2560px;
3+
padding: 2rem;
4+
margin: 0 auto;
5+
text-align: center;
6+
}
7+
8+
.logo {
9+
height: 6em;
10+
padding: 1.5em;
11+
transition: filter 300ms;
12+
will-change: filter;
13+
}
14+
15+
.logo:hover {
16+
filter: drop-shadow(0 0 2em #646cffaa);
17+
}
18+
19+
.logo.react:hover {
20+
filter: drop-shadow(0 0 2em #61dafbaa);
21+
}
22+
23+
@keyframes logo-spin {
24+
from {
25+
transform: rotate(0deg);
26+
}
27+
28+
to {
29+
transform: rotate(360deg);
30+
}
31+
}
32+
33+
@media (prefers-reduced-motion: no-preference) {
34+
a:nth-of-type(2) .logo {
35+
animation: logo-spin infinite 20s linear;
36+
}
37+
}
38+
39+
.card {
40+
padding: 2em;
41+
}
42+
43+
.read-the-docs {
44+
color: #888;
45+
}

‎packages/demo-vite/src/App.live.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { useState } from "react";
2+
import reactLogo from "./assets/react.svg";
3+
import "./App.css";
4+
import viteLogo from "/vite.svg";
5+
6+
function App() {
7+
const [count, setCount] = useState(0);
8+
9+
return (
10+
<>
11+
<div>
12+
<a href="https://vite.dev" target="_blank" rel="noopener noreferrer">
13+
<img
14+
src={viteLogo}
15+
className="logo"
16+
alt="Vite logo"
17+
rel="noopener noreferrer"
18+
/>
19+
</a>
20+
<a href="https://react.dev" target="_blank" rel="noopener noreferrer">
21+
<img src={reactLogo} className="logo react" alt="React logo" />
22+
</a>
23+
</div>
24+
<h1>Vite + React</h1>
25+
<div className="card">
26+
<button type="button" onClick={() => setCount((count) => count + 1)}>
27+
count is {count}
28+
</button>
29+
<p>
30+
Edit <code>src/App.tsx</code> and save to test HMR
31+
</p>
32+
</div>
33+
<p className="read-the-docs">
34+
Click on the Vite and React logos to learn more
35+
</p>
36+
</>
37+
);
38+
}
39+
40+
export default App;

‎packages/demo-vite/src/assets/react.svg‎

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)