react-vfor/README.md

`ReactVFor` is a Vite/React plugin that allows you to use Vue-like `v-for` syntax in React components.

# ReactVFor

`ReactVFor` is a Vite/React plugin that allows you to use Vue-like `v-for` syntax in React components.

With this plugin, you can write loops in JSX like this:

```jsx
<ul>
  <li v-for="item, i in items">{i} - {item}</li>
</ul>
```

The plugin automatically transforms it into standard React JSX:

```jsx
<ul>
  {items.map((item, i) => (
    <li key={i}>{i} - {item}</li>
  ))}
</ul>
```

---

## Installation

```bash
npm install react-vfor
# or
yarn add react-vfor
```

---

## Usage

### Vite

```ts
// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import VForPlugin from 'react-vfor'

export default defineConfig({
  plugins: [react(), VForPlugin()],
})
```

### Example Component

```tsx
import React from 'react'

function App() {
  const items = ["Apple", "Banana", "Cherry"]

  return (
    <ul>
      <li v-for="item, i in items">{i} - {item}</li>
    </ul>
  )
}

export default App
```

After transformation, it becomes:

```tsx
function App() {
  const items = ["Apple", "Banana", "Cherry"]

  return (
    <ul>
      {items.map((item, i) => (
        <li key={i}>{i} - {item}</li>
      ))}
    </ul>
  )
}
```

---

## Features

* Vue-like `v-for` syntax in React JSX
* Supports `item, index in items` syntax
* Automatically adds `key` if not present
* Works with Vite and React projects