Skip to content
Draft
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
99 changes: 31 additions & 68 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,83 +1,46 @@
# React + TypeScript + Vite
# Go Struct Mapping Visualizer

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
A visual web application for creating and managing mappings between Go struct fields with automatic code generation.

Currently, two official plugins are available:
## Features

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@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
- **Visual Mapping**: Drag-and-drop interface for connecting struct fields
- **Code Generation**: Generate Go transformation functions from visual mappings
- **Monaco Editor**: Built-in Go code editor with syntax highlighting
- **Flow Diagrams**: Interactive diagrams using React Flow
- **Transformer Nodes**: Custom transformation logic between fields

## Deployment

This project is automatically deployed to GitHub Pages when changes are pushed to the `main` branch. The live application is available at:

https://thitiph0n.github.io/go-struct-mapping-visualizer/

### Manual Deployment
## Live Demo

To deploy manually:
🔗 **[https://thitiph0n.github.io/go-struct-mapping-visualizer/](https://thitiph0n.github.io/go-struct-mapping-visualizer/)**

1. Build the project: `npm run build`
2. The built files will be in the `dist` directory
3. Push to the `main` branch to trigger automatic deployment
## Development

## Expanding the ESLint configuration
```bash
# Install dependencies
npm install

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
# Start development server
npm run dev

```js
export default tseslint.config([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
# Build for production
npm run build

// Remove tseslint.configs.recommended and replace with this
...tseslint.configs.recommendedTypeChecked,
// Alternatively, use this for stricter rules
...tseslint.configs.strictTypeChecked,
// Optionally, add this for stylistic rules
...tseslint.configs.stylisticTypeChecked,
# Preview production build
npm run preview

// Other configs...
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])
# Lint code
npm run lint
```

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:
## Tech Stack

```js
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'
- **Frontend**: React 19 + TypeScript + Vite
- **UI**: shadcn/ui components with Tailwind CSS
- **Diagrams**: React Flow for visual mapping
- **Editor**: Monaco Editor for Go code editing
- **Icons**: Lucide React

export default tseslint.config([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Enable lint rules for React
reactX.configs['recommended-typescript'],
// Enable lint rules for React DOM
reactDom.configs.recommended,
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])
```
## Deployment

Automatically deployed to GitHub Pages on push to `main` branch. Manual deployment: `npm run build` → push to `main`.