|
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 | | - globalIgnores(['dist']), |
17 | | - { |
18 | | - files: ['**/*.{ts,tsx}'], |
19 | | - extends: [ |
20 | | - // Other configs... |
21 | | - |
22 | | - // Remove tseslint.configs.recommended and replace with this |
23 | | - ...tseslint.configs.recommendedTypeChecked, |
24 | | - // Alternatively, use this for stricter rules |
25 | | - ...tseslint.configs.strictTypeChecked, |
26 | | - // Optionally, add this for stylistic rules |
27 | | - ...tseslint.configs.stylisticTypeChecked, |
28 | | - |
29 | | - // Other configs... |
30 | | - ], |
31 | | - languageOptions: { |
32 | | - parserOptions: { |
33 | | - project: ['./tsconfig.node.json', './tsconfig.app.json'], |
34 | | - tsconfigRootDir: import.meta.dirname, |
35 | | - }, |
36 | | - // other options... |
37 | | - }, |
38 | | - }, |
39 | | -]) |
40 | | -``` |
| 1 | +# Diff Viewer |
| 2 | + |
| 3 | +A simple real-time diff viewer built with Monaco Editor. |
| 4 | + |
| 5 | +## ✨ Features |
| 6 | + |
| 7 | +- **Side-by-side Comparison**: Compare two text snippets in real-time |
| 8 | +- **Data Safe**: Don't store any data either on the server or the client |
| 9 | +- **Powerful Editor**: Powered by the Monaco Editor |
| 10 | +- **Modern UI**: Clean, intuitive interface built with React and Tailwind CSS |
| 11 | + |
| 12 | +## 🚀 Live Demo |
| 13 | + |
| 14 | +Visit the live demo at: [diff-viewer.ziven.me](https://diff-viewer.ziven.me) |
| 15 | + |
| 16 | +### Local Development |
| 17 | + |
| 18 | +1. **Clone the repository** |
| 19 | + ```bash |
| 20 | + git clone https://github.com/zeevenn/diff-viewer.git |
| 21 | + cd diff-viewer |
| 22 | + ``` |
| 23 | + |
| 24 | +2. **Install dependencies** |
| 25 | + ```bash |
| 26 | + pnpm install |
| 27 | + ``` |
41 | 28 |
|
42 | | -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: |
43 | | - |
44 | | -```js |
45 | | -// eslint.config.js |
46 | | -import reactX from 'eslint-plugin-react-x' |
47 | | -import reactDom from 'eslint-plugin-react-dom' |
48 | | - |
49 | | -export default tseslint.config([ |
50 | | - globalIgnores(['dist']), |
51 | | - { |
52 | | - files: ['**/*.{ts,tsx}'], |
53 | | - extends: [ |
54 | | - // Other configs... |
55 | | - // Enable lint rules for React |
56 | | - reactX.configs['recommended-typescript'], |
57 | | - // Enable lint rules for React DOM |
58 | | - reactDom.configs.recommended, |
59 | | - ], |
60 | | - languageOptions: { |
61 | | - parserOptions: { |
62 | | - project: ['./tsconfig.node.json', './tsconfig.app.json'], |
63 | | - tsconfigRootDir: import.meta.dirname, |
64 | | - }, |
65 | | - // other options... |
66 | | - }, |
67 | | - }, |
68 | | -]) |
| 29 | +3. **Start development server** |
| 30 | + ```bash |
| 31 | + pnpm dev |
| 32 | + ``` |
| 33 | + |
| 34 | +4. **Open your browser** |
| 35 | + Navigate to `http://localhost:5173` |
| 36 | + |
| 37 | +### Build for Production |
| 38 | + |
| 39 | +```bash |
| 40 | +pnpm build |
69 | 41 | ``` |
| 42 | + |
| 43 | +The built files will be in the `dist` directory. |
| 44 | + |
| 45 | +## 🤝 Contributing |
| 46 | + |
| 47 | +Contributions are welcome! Please feel free to submit a Pull Request. |
| 48 | + |
| 49 | +1. Fork the repository |
| 50 | +2. Create your feature branch (`git checkout -b feature/AmazingFeature`) |
| 51 | +3. Commit your changes (`git commit -m 'Add some AmazingFeature'`) |
| 52 | +4. Push to the branch (`git push origin feature/AmazingFeature`) |
| 53 | +5. Open a Pull Request |
| 54 | + |
| 55 | +## 📝 License |
| 56 | + |
| 57 | +This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. |
0 commit comments