JSX Support

Rasen supports JSX/TSX syntax through the @rasenjs/jsx-runtime package.

Setup

1. Install the package

npm install @rasenjs/jsx-runtime

2. Configure TypeScript

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@rasenjs/jsx-runtime"
  }
}

Usage

import { setReactiveRuntime } from '@rasenjs/core'
import { createVueRuntime } from '@rasenjs/reactive-vue'
import { mount } from '@rasenjs/dom'
import { ref } from 'vue'

setReactiveRuntime(createVueRuntime())

const App = () => {
  const count = ref(0)
  
  return (
    <div class="app">
      <h1>Hello Rasen</h1>
      <p>Count: {count}</p>
      <button onClick={() => count.value++}>+</button>
    </div>
  )
}

mount(<App />, document.getElementById('app'))

Reactive Values

Refs are automatically tracked:

const name = ref('World')

// Both work:
<p>{name}</p>
<p>{name.value}</p>

Event Handlers

<button onClick={() => console.log('clicked')}>Click</button>
<input onInput={(e) => text.value = e.target.value} />

Conditionals

{isLoading.value ? <Spinner /> : <Content />}
{showHeader && <Header />}

Lists

{items.value.map(item => (
  <li key={item.id}>{item.name}</li>
))}

Fragments

<>
  <Header />
  <Content />
</>

Custom Tags

import { registerTag } from '@rasenjs/jsx-runtime'

registerTag('custom-button', CustomButton)

<custom-button onClick={handleClick}>Click me</custom-button>