Vue JSX Vapor

https://jsx-vapor.netlify.app
Admin
Vue JSX Vapor is a type-safe, high-performance implementation of Vue's Vapor Mode using JSX,...
Tokens:13,405
Snippets:184
Trust Score:7.6
Update:4 months ago
Show doc for...
Tokens:
Raw
### Install ESLint Plugin

Source: https://jsx-vapor.netlify.app/introduction/eslint

Install the ESLint plugin for vue-jsx-vapor using pnpm.

```sh
pnpm add @vue-jsx-vapor/eslint
```

--------------------------------

### Install Standalone Macros Plugin

Source: https://jsx-vapor.netlify.app/features/macros.html

Install the standalone macros plugin as a development dependency for use in Virtual DOM projects.

```bash
pnpm add @vue-jsx-vapor/macros -D
```

--------------------------------

### Main App Setup for Vapor with Virtual DOM Interop

Source: https://jsx-vapor.netlify.app/introduction/interop

Set up the main Vapor application using `createVaporApp` and `vaporInteropPlugin` to allow embedding Virtual DOM components.

```typescript
import { createVaporApp, vaporInteropPlugin } from 'vue'
import App from './App.tsx'
createVaporApp(App).use(vaporInteropPlugin).mount('#app')
```

--------------------------------

### Define a Component with Async Setup and Fallthrough Attributes

Source: https://jsx-vapor.netlify.app/features/macros.html

Use `defineComponent` to define a Virtual DOM component that supports async setup functions and automatically collects referenced props. Unreferenced props are treated as fallthrough attributes.

```tsx
import { 
defineComponent
, 
nextTick
, 
Suspense
, 
useAttrs
 } from 'vue'

const 
Comp
 = 
defineComponent
(
  async (props: {
    foo?: string
    bar?: string
    // ^ Unreferenced props are treated as fallthrough attributes.
  }) => {
    await 
nextTick()
    const attrs = useAttrs()
    
return () => (
      <div >
        <span {...attrs}>{props.foo}</span>
      </div>
    )
  },
)

export default () => (
  <Suspense>
    <Comp 
foo="foo" 
bar="bar" />
  </Suspension>
)
```

--------------------------------

### Main App Setup for Virtual DOM with Vapor Interop

Source: https://jsx-vapor.netlify.app/introduction/interop

Set up the main Vue application to use the `vaporInteropPlugin` when embedding Vapor components within a Virtual DOM structure.

```typescript
import { createApp, vaporInteropPlugin } from 'vue'
import App from './App.tsx'
createApp(App).use(vaporInteropPlugin).mount('#app')
```

--------------------------------

### Create a Simple Div with h()

Source: https://jsx-vapor.netlify.app/tutorial/step-14

Example of creating a basic 'div' element using the h() function.

```tsx
import { h } from 'vue-jsx-vapor'
export default () => h('div', null, 'hello')
```

--------------------------------

### jsx-sort-props reservedFirst Example

Source: https://jsx-vapor.netlify.app/introduction/eslint

Demonstrates how `reservedFirst` props are ordered before other props in JSX elements.

```jsx
// Before
const Before = <App a v-for={i in list} v-if={list} b />

// After
const After = <App v-if={list} v-for={i in list} a b />
```

--------------------------------

### Compiled Code for Vapor Component with Props Handling

Source: https://jsx-vapor.netlify.app/features/macros.html

The compiled output for the `defineVaporComponent` example, demonstrating how props defaults, required attributes, and `inheritAttrs` are handled.

```tsx
import { defineVaporComponent } from 'vue'
import { createPropsDefaultProxy } from '/vue-macros/jsx-macros/with-defaults'
defineVaporComponent(
  (_props) => {
    const props = createPropsDefaultProxy(_props, { bar: '' })
    const attrs = useAttrs()
    return () => (
      <div>
        <span {...attrs}>{props.foo}</span>
      </div>
    )
  },
  { props: { foo: null, bar: { required: true } }, inheritAttrs: false },
)
```

--------------------------------

### Install Vue JSX Vapor Plugin and Runtime

Source: https://jsx-vapor.netlify.app/introduction/getting-started

Install the necessary packages for Vue JSX Vapor. Ensure you are using Vue 3.6.0-beta.11 or later for Vapor Mode.

```bash
# Plugin
pnpm add vue-jsx-vapor

# Runtime
pnpm add vue@3.6.0-beta.11
```

--------------------------------

### Compiled Code for Async Component Definition

Source: https://jsx-vapor.netlify.app/features/macros.html

This is the compiled output of the `defineComponent` example, showing how async operations and attribute handling are transformed.

```tsx
import { defineComponent, useAttrs, withAsyncContext } from 'vue'
defineComponent(
  async (props) => {
    let __temp, __restore
    ;([__temp, __restore] = withAsyncContext(() => nextTick())),
      await __temp,
      __restore()
    const attrs = useAttrs()
    return () => (
      <div>
        <span {...attrs}>{props.foo}</span>
      </div>
    )
  },
  { props: { foo: null } },
)
```

--------------------------------

### jsx-sort-props reservedLast Example

Source: https://jsx-vapor.netlify.app/introduction/eslint

Demonstrates how `reservedLast` props are ordered after all other props in JSX elements.

```jsx
// Before
const Before = <App v-slot={{ foo }} onClick={onClick} />

// After
const After = <App onClick={onClick} v-slot={{ foo }} />
```

--------------------------------

### Vite Configuration for Vapor with Virtual DOM Interop

Source: https://jsx-vapor.netlify.app/introduction/interop

Configure Vite for Vapor DOM rendering with interop enabled, including the 'macros' option. This setup is for embedding Virtual DOM components within a Vapor DOM structure.

```typescript
import { defineConfig } from 'vite'
import vueJsxVapor from 'vue-jsx-vapor/vite'

export default defineConfig({
  plugins: [
    vueJsxVapor({
      macros: true,
      interop: true,
    }),
  ],
})
```

--------------------------------

### Default Slot Usage in Parent

Source: https://jsx-vapor.netlify.app/tutorial/step-9

Example of passing content to the default slot of a child component from the parent.

```jsx
<Comp>
  This is the default slot content!
</Comp>
```

--------------------------------

### Event Modifiers in Vue JSX Vapor

Source: https://jsx-vapor.netlify.app/tutorial/step-4

Event modifiers in Vue JSX Vapor start with an underscore. Examples include '_prevent' for preventing default behavior and '_enter' for key events.

```tsx
<form onSubmit_prevent>
  <input onKeyup_enter={submit} />
</form>
```

--------------------------------

### Vue JSX Fragment Example

Source: https://jsx-vapor.netlify.app/tutorial/step-2

Use JSX fragments to render multiple top-level elements without a wrapper div. This is useful for returning multiple sibling elements from a component.

```jsx
<>
  <h1>Title</h1>
  <h2>Sub Title</h2>
</>
```

--------------------------------

### Embedding Vapor Component in Virtual DOM

Source: https://jsx-vapor.netlify.app/introduction/interop

Define and use a Vapor DOM component (`defineVaporComponent`) within a standard Vue component (`defineComponent`). This example demonstrates passing props and accessing exposed methods.

```tsx
import {
  computed
,
  defineComponent
,
  defineVaporComponent
,
  ref
} from 'vue'
import { 
useRef
 } from 'vue-jsx-vapor'

const 
Comp
 = 
defineVaporComponent
(({ 
count
 = 0 }) => {
  
defineExpose
({
    
double
:
      computed
(() => 
count
 * 2),
  })
  
return
 <
span
> x 2 = </
span
>
})

export default 
defineComponent
(() => {
  const 
count
 = 
ref
(1)
  const 
compRef
 = 
useRef
()
  
return
 () => (
    <>
      <
input
 
v-model
={~
count
.
value}
 />
      <
Comp
 
count
={~
count
.
value}
 
ref
={~
compRef
}></
Comp
>
      {~
compRef
.
value
?. 
double
}
    </>
  )
})
```

--------------------------------

### Embedding Virtual DOM Component in Vapor

Source: https://jsx-vapor.netlify.app/introduction/interop

Define and use a standard Vue component (`defineComponent`) within a Vapor DOM context (`defineVaporComponent`). This example shows how to integrate existing Virtual DOM components into a Vapor DOM application.

```tsx
import {
  computed
,
  defineComponent
,
  defineVaporComponent
,
  ref
} from 'vue'
import { 
useRef
 } from 'vue-jsx-vapor'

const 
Comp
 = 
defineVaporComponent
(({ 
count
 = 0 }) => {
  
defineExpose
({
    
double
:
      computed
(() => 
count
 * 2),
  })
  
return
 <
span
> x 2 = </
span
>
})

export default 
defineComponent
(() => {
  const 
count
 = 
ref
(1)
  const 
compRef
 = 
useRef
()
  
return
 () => (
    <>
      <
input
 
v-model
={~
count
.
value}
/>
      <
Comp
 
count
={~
count
.
value}
 
ref
={~
compRef
}></
Comp
>
      {~
compRef
.
value
?. 
double
}
    </>
  )
})
```

--------------------------------

### Define Styles with CSS Preprocessors

Source: https://jsx-vapor.netlify.app/features/macros.html

Illustrates how to use `defineStyle` to define styles, supporting various CSS preprocessors like SCSS and Stylus. Multiple calls are permitted within a single file.

```ts
declare function defineStyle(
  style: string,
  options?: { scoped?: boolean },
): void
```

```ts
defineStyle.scss(`...`)
defineStyle.stylus(`...`)
// ...
```

--------------------------------

### Define CSS Modules Styles

Source: https://jsx-vapor.netlify.app/features/macros.html

Demonstrates how to enable CSS Modules support by assigning `defineStyle` to a variable. This allows for locally scoped class names.

```tsx
export default () => {
  const 
styles
 = 
defineStyle
. 
scss
(
    `
      .foo {
        color: blue;
        .bar {
          background: red;
        }
      }
    `
  )

  return < 
div
 
class
={ 
styles
. 
bar
} />
}
```

--------------------------------

### Define Exposed Instance Properties

Source: https://jsx-vapor.netlify.app/features/macros.html

Shows how to use `defineExpose` to expose properties from a component instance, similar to its usage in Vue SFCs. This allows parent components to access these properties via a ref.

```tsx
import { 
useRef
 } from 'vue-jsx-vapor'

const 
Comp
 = < 
T
 ,>({ 
foo
 = 
undefined
 as 
T
 }) => {
  
defineExpose
({
    
foo
,
  })
  
return
 < 
div
 />
}

export default () => {
  const 
compRef
 = 
useRef
()
  
compRef
. 
value
 ?. 
foo



  return < 
Comp
 
ref
={ 
compRef
} 
foo
={1 as 
const
} />
}
```

```tsx
import { currentInstance } from 'vue'
import { useRef } from 'vue-jsx-vapor'
import { useExpose } from '/vue-macros/jsx-macros/use-expose'

const Comp = ({ foo }) => {
  currentInstance.exposed = {
    foo,
  }
  return <div />
}
```

--------------------------------

### Vite Configuration for Macros

Source: https://jsx-vapor.netlify.app/introduction/migration

Enable macros in vite.config.ts to allow for features like reactive prop destructuring in defineVaporComponent.

```ts
// vite.config.ts
import vueJsxVapor from 'vue-jsx-vapor/vite'

export default defineConfig ({
  plugins: [
    vueJsxVapor ({
      macros: true,
    }),
  ]
})
```

--------------------------------

### Define Slots with Default Values

Source: https://jsx-vapor.netlify.app/features/macros.html

Demonstrates how to define slots with default implementations and props in Vue Macros. This approach is recommended for providing default slot content and behavior.

```tsx
function 
Comp
<const 
T
>() {
  const 
slots
 = 
defineSlots
({
    
title
: ( 
props
: { 
bar
?: 
T
 }) => <
div
>title slot: {
props
. 
bar
}</
div
>,
    
default
: ( 
props
: { 
foo
: number }) => <
div
>default slot: {
props
. 
foo
}</
div
>,
  })

  
return
 (
    <>
      < 
slots
. 
title
 />
      < 
slots
. 
default
 
foo
={1} />
    </>
  )
}

export default () => (
  < 
Comp
<1>>
    <template v-slot={{ 
foo
 }}>{ 
foo
}</template>
    <template v-slot: 
title
={{ 
bar
 }}>{ 
bar
}</template>
  </ 
Comp
>
)
```

--------------------------------

### Render a Dynamic Component

Source: https://jsx-vapor.netlify.app/tutorial/step-13

Demonstrates how to render a component stored in a shallowRef variable. The component is accessed via `.value` and rendered within an expression container.

```jsx
import { shallowRef } from 'vue'

const Foo = () => <div>Foo</div>
const Bar = () => <div>Bar</div>

export default () => {
  const DynamicComponent = shallowRef(Foo)
  return <>{<DynamicComponent.value />}</>
}
```

--------------------------------

### Configure define-style Rule

Source: https://jsx-vapor.netlify.app/introduction/eslint

Enable and configure the `define-style` rule to format styles within the `defineStyle` macro using Prettier with a specified tab width.

```ts
import 
vueJsxVapor
 from '@vue-jsx-vapor/eslint'

export default [
  
vueJsxVapor
({
    
rules
: {
      'vue-jsx-vapor/define-style': [1, { 
tabWidth
: 2 }]
    }
  })
]
```

--------------------------------

### List Rendering with `map`

Source: https://jsx-vapor.netlify.app/tutorial/step-6

Use the JavaScript `map` function to render lists when performance is not a primary concern. Ensure each list item has a unique `key` attribute.

```jsx
<ul>
  {todos.map((todo) => {
    return <li key={todo.id}>{todo.text}</li>
  })}
</ul>
```

--------------------------------

### List Rendering with v-for

Source: https://jsx-vapor.netlify.app/features/directives

Demonstrates the list rendering directive for iterating over arrays or ranges in JSX.

```tsx
export default () => (
  < 
div 
v-for={( 
item
, 
index
 ) in 4} 
key
={ 
index
}>
    { 
item
}
  </ 
div 
>)

```

--------------------------------

### Basic ESLint Configuration

Source: https://jsx-vapor.netlify.app/introduction/eslint

Configure ESLint to use the vue-jsx-vapor plugin in your eslint.config.ts file.

```ts
import vueJsxVapor from '@vue-jsx-vapor/eslint'

export default [
  vueJsxVapor()
]
```

--------------------------------

### JSX vs h() for Dynamic Components

Source: https://jsx-vapor.netlify.app/tutorial/step-14

Compares JSX syntax with the equivalent h() function call for dynamic components, highlighting the need for explicit function wrapping in h().

```tsx
<>{<DynamicComponent.value />}</>
```

```tsx
h(Fragment, null, [() => h(DynamicComponent.value)])
```

--------------------------------

### Import Child Component

Source: https://jsx-vapor.netlify.app/tutorial/step-7

Import a child component from its file path. This is the first step before using it in your JSX.

```jsx
import Child from './Child'
```

--------------------------------

### Switch Between Components Dynamically

Source: https://jsx-vapor.netlify.app/tutorial/step-13

Shows a common pattern for switching between two components (`Foo` and `Bar`) stored in a `shallowRef`. The `toggle` function updates the `shallowRef` to switch the currently rendered component.

```jsx
const DynamicComponent = shallowRef(Foo)

const toggle = () => {
  DynamicComponent.value = DynamicComponent.value === Foo ? Bar : Foo
}
```

--------------------------------

### Configure jsx-sort-props Rule

Source: https://jsx-vapor.netlify.app/introduction/eslint

Enable and configure the `jsx-sort-props` rule with custom `reservedFirst` and `reservedLast` options.

```ts
import 
vueJsxVapor
 from '@vue-jsx-vapor/eslint'

export default [
  
vueJsxVapor
({
    
rules
: {
      'vue-jsx-vapor/jsx-sort-props': [2, {
        
reservedFirst
: ['v-if', 'v-for'], 
        
reservedLast
: ['v-slot'],
      }]
    }
  })
]
```

--------------------------------

### Dynamic Component with Expression Container

Source: https://jsx-vapor.netlify.app/tutorial/step-13

Illustrates the necessity of using an expression container `{}` to render a dynamic component reference in Vapor mode. This ensures the compiler treats it as a dynamic expression.

```jsx
<>{<DynamicComponent.value />}</>
```

--------------------------------

### Using v-slots for Multiple Slots

Source: https://jsx-vapor.netlify.app/features/directives

Shows how to pass multiple slots as an object to the `v-slots` directive in JSX.

```tsx
const 
Comp
 = () => {
  
defineSlots
<{
    
default
: () => any
    
slot
: ( 
scope
: { 
bar
: number }) => any
    
slots
: ( 
scope
: { 
baz
: boolean }) => any
  }>()
  
return
 < 
div 
/>
}

export default () => (
  < 
Comp

    
v-slots
={{ 
      
default
: () => <>
default slot</>
,
      
slot
: ({ 
bar
 }) => <>{ 
bar
}</>,
    }}
  />
)

```

--------------------------------

### Configure TypeScript for JSX

Source: https://jsx-vapor.netlify.app/introduction/getting-started

Set up your tsconfig.json to use Vue JSX Vapor as the JSX import source and preserve JSX.

```json
{
  "compilerOptions": {
    "jsx": "preserve",
    "jsxImportSource": "vue-jsx-vapor"
  }
}
```

--------------------------------

### Conditional Rendering with v-if, v-else-if, v-else

Source: https://jsx-vapor.netlify.app/features/directives

Shows how conditional rendering directives work seamlessly with proper type narrowing support in JSX.

```tsx
export default ({ 
foo
 = 0 }) => {
  return (
    <>
      < 
div 
v-if={ 
foo
 === 0}>{ 
foo
}</
div 
>

      < 
div 
v-else-if={ 
foo
 === 1}>{ 
foo
}</
div 
>

      < 
div 
v-else>{ 
foo
}</
div 
>
    </>
  )
}
```

--------------------------------

### Define Scoped Styles

Source: https://jsx-vapor.netlify.app/features/macros.html

Shows how to define scoped styles using `defineStyle`. Top-level definitions are unscoped by default, while definitions within functions are scoped.

```tsx
function 
Comp
({ 
color
 = 'red' }) {
  
defineStyle
. 
scss
(`
    .foo {
      color: ${
color
};

      :deep(.bar) {
        color: blue;
      }
    }
  `)
  return < 
div
 
color
="red" 
class
="foo bar">foo</ 
div
>
}


defineStyle
(
  `
    .bar {
      background: black;
    }
  `
)
```

--------------------------------

### Using Macros for Reactive Deconstructed Props

Source: https://jsx-vapor.netlify.app/tutorial/step-8

Enable macros and wrap the component in defineVaporComponent to regain reactivity when deconstructing props. The props are converted to __props and prefixed.

```jsx
const Comp = defineVaporComponent(({ foo }) => {
  return <div>{foo}</div>
})
```

```jsx
const Comp = defineVaporComponent((__props) => {
  return <div>{__props.foo}</div>
})
```

--------------------------------

### Using defineModel Macro (Child)

Source: https://jsx-vapor.netlify.app/tutorial/step-12

The `defineModel` macro simplifies two-way binding by returning a writable ref that syncs with the parent.

```jsx
const Comp = () => {
  const model = defineModel()
  return (
    <input
      value={model.value}
      onInput={(e) => (model.value = e.target.value)}
    />
  )
}
```

--------------------------------

### Basic useRef Usage

Source: https://jsx-vapor.netlify.app/features/use-ref

Demonstrates how to use the useRef hook to create and expose a ref to a child component. The ref's value is typed automatically based on the exposed properties of the child component.

```tsx
import { 
defineVaporComponent
 } from 'vue'
import { 
useRef
 } from 'vue-jsx-vapor'
// or
// import { shallowRef as useRef } from 'vue'

export const 
Comp
 = () => {
  
defineExpose
({
    
foo
: 1
  })

  
return
 <
 div
 />
}

export default 
defineVaporComponent
(() => {
  const 
comp
 = 
useRef
()
  
comp
. 
value
 ?.
foo


  
return
 (
    <
 div
 >
      <
 Comp
 
ref
={
comp
} />
    </
 div
 >
  )
})
```

--------------------------------

### Configure Standalone Macros Plugin in Vite

Source: https://jsx-vapor.netlify.app/features/macros.html

Configure the standalone macros plugin in your `vite.config.ts` by importing and using `jsxMacros()`.

```typescript
// vite.config.ts
import jsxMacros from '@vue-jsx-vapor/macros/vite'

export default {
  plugins: [
    jsxMacros()
  ]
}
```

--------------------------------

### Basic and Multiple Event Bindings

Source: https://jsx-vapor.netlify.app/tutorial/step-4

Use 'on' followed by a capitalized event name for single event bindings. The 'v-on' directive can bind multiple event handlers.

```tsx
<>
  <div onClick={onClick} />
  {/* multiple bindings */}
  <form v-on={{ click: onClick, submit: onSubmit }}></form>
</>
```

--------------------------------

### Dynamic Props with h()

Source: https://jsx-vapor.netlify.app/tutorial/step-14

Wrap dynamic props in functions to ensure reactivity when using h().

```tsx
h('div', { id: () => props.id })
```

--------------------------------

### Expose Child State with defineExpose Macro

Source: https://jsx-vapor.netlify.app/tutorial/step-11

Enable the macros option and use the `defineExpose` macro to expose state from a component. This approach simplifies the exposure process by using a macro.

```jsx
import { computed } from 'vue'

const Comp = (props) => {
  const double = computed(() => props.count * 2)
  defineExpose({
    double
  })
  return []
}
```

--------------------------------

### Configure defineComponent Macro Aliases

Source: https://jsx-vapor.netlify.app/features/macros.html

Customize the aliases for `defineComponent` and `defineVaporComponent` macros. Set `alias` to an empty array to disable the `defineComponent` macro.

```typescript
VueJsxVapor({
  defineComponent: {
    /**
     * @default ['defineComponent','defineVaporComponent']
     *
     * Set alias to an empty array to disable the defineComponent macro.
     */
    alias: []
  }
})
```

--------------------------------

### Define a Model with Synchronous Updates

Source: https://jsx-vapor.netlify.app/features/macros.html

Use `defineModel` to create a model property. Appending `!` marks the model as required. Model values can be read synchronously after modification without needing `nextTick()`.

```tsx
import { ref } from 'vue'

function Comp() {
  const modelValue = defineModel<string>()!
  
modelValue.value = 'foo'
  
return <div>{modelValue.value}</div>
}

export default () => {
  const foo = ref('')
  return <input value={foo.value} />
}
```

--------------------------------

### Dynamic Component with h()

Source: https://jsx-vapor.netlify.app/tutorial/step-14

Use a function to return the current component for dynamic component rendering.

```tsx
h(Fragment, null, [() => h('El' + props.type)])
```

--------------------------------

### Enable Macros in Vite Config

Source: https://jsx-vapor.netlify.app/features/macros.html

Enable macros by setting the `macros` option to `true` in your `vite.config.ts` file.

```typescript
import { defineConfig } from 'vite'
import vueJsxVapor from 'vue-jsx-vapor/vite'

export default defineConfig({
  plugins: [
    vueJsxVapor({
      macros: true,
    }),
  ],
})
```

```typescript
import vueJsxVapor from 'vue-jsx-vapor/volar'

export default {
  plugins: [
    vueJsxVapor({
      macros: true,
    }),
  ],
}
```

--------------------------------

### useImperativeHandle to defineExpose Migration

Source: https://jsx-vapor.netlify.app/introduction/migration

Migrate React's useImperativeHandle to Vue's defineExpose for exposing component instance properties.

```tsx
// React
const Comp = ({ count, ref }) => {
  useImperativeHandle(ref, () => {
    return {
      count: count * 2
    }
  }, [count])
  return <div>{count}</div>
}

// Vue
const Comp = ({ count }) => {
  defineExpose(computed(() => {
    return {
      count: count * 2
    }
  }))
  return <div>{count}</div>
}
```

--------------------------------

### Vite Configuration for Interop

Source: https://jsx-vapor.netlify.app/introduction/interop

Configure Vite to use the vue-jsx-vapor plugin with interop enabled. This allows for mixed rendering modes.

```typescript
import { defineConfig } from 'vite'
import vueJsxVapor from 'vue-jsx-vapor/vite'

export default defineConfig({
  plugins: [
    vueJsxVapor({
      interop: true,
    }),
  ],
})
```

--------------------------------

### Multiple Slots with h()

Source: https://jsx-vapor.netlify.app/tutorial/step-14

Pass multiple slots as an object to h().

```tsx
h(Comp, null, {
  default: (slotProps) => ['hello', () => slotProps.foo],
  other: () => 'other slot',
})
```

--------------------------------

### List Rendering with `v-for` Directive

Source: https://jsx-vapor.netlify.app/tutorial/step-6

Utilize the `v-for` directive for list rendering, which offers performance comparable to Vue templates. The `key` attribute is crucial for accurate element tracking and updates.

```jsx
<ul>
  <li v-for={todo in todos} key={todo.id}>
    {todo.text}
  </li>
</ul>
```

--------------------------------

### Children with h()

Source: https://jsx-vapor.netlify.app/tutorial/step-14

Demonstrates passing a single child or an array of children to h().

```tsx
h('div', null, 'hello')
h('div', null, ['hello', () => world])
```

--------------------------------

### Using ref Prop with h()

Source: https://jsx-vapor.netlify.app/tutorial/step-14

The 'ref' prop in h() supports both reactive variables and callback functions.

```tsx
const divRef = shallowRef()
h('div', { ref: divRef })
h('div', { ref: (el) => (divRef.value = el) })
```

--------------------------------

### Two-Way Binding with v-model

Source: https://jsx-vapor.netlify.app/features/directives

Demonstrates two-way binding using `v-model` with support for dynamic model names and modifiers in JSX.

```tsx
import { 
ref
 } from 'vue'

const 
Comp
 = () => {
  const 
model
 = 
defineModel
<string>('model')
  const 
models
 = 
defineModel
<string[]>('models')
  
return
 < 
div 
/>
}

export default () => {
  const 
foo
 = 
ref
('')
  const 
name
 = 
ref
('model')
  return (
    < 
Comp

      v-model:$ 
name
_ 
value
$={ 
foo
. 
value
}
      v-model:m
odel
={ 
foo
. 
value
}
    />
  )
}

```

--------------------------------

### Type Checking Script

Source: https://jsx-vapor.netlify.app/introduction/getting-started

Add this script to your package.json for type checking with TS Macro.

```json
{
  "scripts": {
    "typecheck": "tsmc --noEmit"
  }
}
```

--------------------------------

### Using defineModel Macro for Named Models (Child)

Source: https://jsx-vapor.netlify.app/tutorial/step-12

For named models, pass the model name to `defineModel` to create separate writable refs for each.

```jsx
const Comp = () => {
  const title = defineModel('title')
  const content = defineModel('content')
  return (
    <>
      <input
        value={title.value}
        onInput={(e) => (title.value = e.target.value)}
      />
      <input
        value={content.value}
        onInput={(e) => (content.value = e.target.value)}
      />
    </>
  )
}
```

--------------------------------

### Using Modifiers and Dynamic Arguments with Directives

Source: https://jsx-vapor.netlify.app/features/directives

Demonstrates how to use modifiers (e.g., `_prevent`) and dynamic arguments (e.g., `v-model_number`) in JSX by substituting '.' with '_' and using '$' for dynamic arguments.

```tsx
<form onSubmit_prevent>
  <input v-model_number={value} />
</form>
```

--------------------------------

### Defining and Using Slots with v-slot

Source: https://jsx-vapor.netlify.app/features/directives

Illustrates how to define and use named slots with the `v-slot` directive in JSX. Note that default parameter values in slot scope destructuring are not supported.

```tsx
const 
Comp
 = () => {
  
defineSlots
<{
    
default
: () => any
    
slot
: ( 
scope
: { 
bar
: number }) => any
    
slots
: ( 
scope
: { 
baz
: boolean }) => any
  }>()
  
return
 < 
div 
/>
}

export default () => (
  < 
Comp
>
    default slot
    <template 
v-slot:s
lot
={{ 
bar
 }}>
      { 
bar
}
    </template>
  </ 
Comp
>
)

```

--------------------------------

### useMemo to computed Migration

Source: https://jsx-vapor.netlify.app/introduction/migration

Migrate React's useMemo hook to Vue's computed property for memoizing expensive calculations.

```ts
// React
const double = useMemo(() => foo * 2, [foo])
console.log({ double }, [double])

// Vue
const double = computed(() => foo * 2)
console.log({ double: double.value }, [double.value])
```

--------------------------------

### Dynamic Attribute Binding with JSX

Source: https://jsx-vapor.netlify.app/tutorial/step-3

Use curly braces `{}` for single dynamic prop binding and the spread operator `{...}` for multiple attribute bindings.

```jsx
export default (props) => (
  <>
    <div id={props.id} />
    {/* multiple bindings */}
    <div {...props} />
  </>
)
```

--------------------------------

### Manual TS Macro Configuration

Source: https://jsx-vapor.netlify.app/introduction/getting-started

Manually configure TS Macro with Vue JSX Vapor if automatic detection is not sufficient. This is typically handled by the Volar plugin.

```typescript
import vueJsxVapor from 'vue-jsx-vapor/volar'

export default {
  plugins: [
    vueJsxVapor({
      macros: true,
    }),
  ],
}
```

--------------------------------

### React useCallback to direct function definition

Source: https://jsx-vapor.netlify.app/introduction/migration

Vue's reactivity system eliminates the need for useCallback. Define functions directly.

```ts
// React
const callback = useCallback(() => {
  console.log(foo)
}, [foo])

// Vue
const callback = () => {
  console.log(foo)
}
```

--------------------------------

### Compiled Code for defineModel Usage

Source: https://jsx-vapor.netlify.app/features/macros.html

This compiled code shows how `defineModel` is transformed, utilizing `useModel` for managing the model's state and updates.

```tsx
import { ref } from 'vue'
import { useModel } from '/vue-macros/jsx-macros/use-model'

function Comp(_props: {
  modelValue: string
  'onUpdate:modelValue': (value: string) => any
}) {
  const modelValue = useModel<string>(_props, 'modelValue', { required: true })
  modelValue.value = 'foo'
  return <div>{modelValue.value}</div>
}
```

--------------------------------

### Defining Slots with Macros

Source: https://jsx-vapor.netlify.app/tutorial/step-9

Defines a child component using the defineSlots macro to declare slots with associated fallback content. The component then renders its default slot.

```jsx
const Comp = (props) => {
  const slots = defineSlots({
    default: () => <>Fallback content</>
  })
  return <slots.default>Fallback content</slots.default>
}
```

--------------------------------

### Define a Vapor Component with Destructured Props and Required Attributes

Source: https://jsx-vapor.netlify.app/features/macros.html

Use `defineVaporComponent` to define a Vapor component. Destructured props maintain reactivity, and appending `!` marks a prop as required. Rest parameters are converted to `useAttrs()` with `inheritAttrs` defaulting to `false`.

```tsx
import { 
defineVaporComponent
 } from 'vue'

const 
Comp
 = 
defineVaporComponent
(
  <T,>({ foo = undefined as T, bar = ''!, ...attrs }) => {
    
return (
      <div >
        <span {...attrs}>{foo}</span>
      </div>
    )
  },
)

export default () => <Comp<string> foo={1} 
bar="bar" />
Type 'number' is not assignable to type 'string'.

```

--------------------------------

### React children prop to defineSlots

Source: https://jsx-vapor.netlify.app/introduction/migration

Replace React's children prop pattern with Vue's defineSlots for managing content projection.

```tsx
// React
const Comp = ({ children }) => {
  return children
}

// Vue
const Comp = () => {
  const slots = defineSlots()
  return <slots.default />
}
```

--------------------------------

### Using v-model for Two-way Binding

Source: https://jsx-vapor.netlify.app/tutorial/step-12

`v-model` is syntactic sugar that automatically binds `modelValue` and `onUpdate:modelValue` for simplified two-way binding.

```jsx
<Comp v-model={msg.value} />
```

--------------------------------

### Expose Child State with expose Function

Source: https://jsx-vapor.netlify.app/tutorial/step-11

Use the expose function provided in the second context parameter of a functional component to expose state. This method requires explicit import and usage of the expose function.

```jsx
import { computed } from 'vue'

const Comp = (props, { expose }) => {
  const double = computed(() => props.count * 2)
  expose({
    double
  })
  return []
}
```

--------------------------------

### v-model Syntax Migration

Source: https://jsx-vapor.netlify.app/introduction/migration

Migrate from array expressions with v-model to explicit modifier syntax for v-model bindings.

```tsx
<>
    {/* ❌ Not supported */}
    <input v-model={[foo, ['trim']]} />
    
    {/* ✅ Use this instead */}
    <input v-model:$name$_trim={foo} />
  </>
```

--------------------------------

### Using <slot> Element as Outlet

Source: https://jsx-vapor.netlify.app/tutorial/step-9

Defines a child component using the <slot> element as an outlet for the default slot. Content within the <slot> tag serves as fallback content.

```jsx
const Comp = (props, { slots }) => {
  return <slot>Fallback content</slot>
}
```

--------------------------------

### React forwardRef to automatic handling

Source: https://jsx-vapor.netlify.app/introduction/migration

Vue handles ref forwarding automatically, removing the need for the forwardRef wrapper.

```tsx
// React
const Comp = forwardRef(({ count }, ref) => {
  return <div>{count}</div>
})

// Vue
const Comp = ({ count }) => {
  return <div>{count}</div>
}
```

--------------------------------

### Default Slot with h()

Source: https://jsx-vapor.netlify.app/tutorial/step-14

Pass the default slot directly as a function to h().

```tsx
h(Comp, null, (slotProps) => ['hello', () => slotProps.foo])
```

--------------------------------

### HyperScript h() Function Signature

Source: https://jsx-vapor.netlify.app/tutorial/step-14

The basic signature for Vapor's h() function. Props are required if children are provided.

```tsx
h(type, props?, children?)
```

--------------------------------

### Merging Props with h()

Source: https://jsx-vapor.netlify.app/tutorial/step-14

Merge multiple props objects by passing an array to '$:' and wrapping each object in a function.

```tsx
h('div', { $: [() => ({ id: props.id }), () => attrs] })
```

--------------------------------

### Define Generic Slots

Source: https://jsx-vapor.netlify.app/features/macros.html

Use `defineSlots` with generics to define typed slots. When generics are used, all defined slots are treated as optional.

```tsx
const slots = defineSlots<{
  default: () => any
}>()


slots.default?.()
//           ^ optional

```

--------------------------------

### Receiving Multiple Named Scoped Slot Props with v-slot Template

Source: https://jsx-vapor.netlify.app/tutorial/step-10

Use the `v-slot` directive within `<template>` tags to manage multiple named slots and their props. This provides a clear structure for defining content for each slot.

```jsx
export default () => (
  <Comp>
    <template v-slot={{ foo }}>
      <div>{foo}</div>
    </template>
    <template v-slot:title={{ foo }}>
      <div>{foo}</div>
    </template>
  </Comp>
)
```

--------------------------------

### Conditional Rendering with v-if, v-else-if, and v-else Directives

Source: https://jsx-vapor.netlify.app/tutorial/step-5

Utilize Vue's v-if, v-else-if, and v-else directives for more complex conditional rendering scenarios. Ensure only one element is rendered based on the condition.

```jsx
<>
  <h1 v-if={level === 1}>Title</h1>
  <h2 v-else-if={level === 2}>Sub Title</h2>
  <div v-else>Content</div>
</>
```

--------------------------------

### Configure Vite for Vue JSX Vapor

Source: https://jsx-vapor.netlify.app/introduction/getting-started

Integrate the Vue JSX Vapor Vite plugin into your vite.config.ts. Enable macros if needed.

```typescript
import { defineConfig } from 'vite'
import vueJsxVapor from 'vue-jsx-vapor/vite'

export default defineConfig({
  plugins: [
    vueJsxVapor({
      macros: true,
    }),
  ],
})
```

--------------------------------

### Accessing Default Slot via Context

Source: https://jsx-vapor.netlify.app/tutorial/step-9

Defines a child component that accesses and renders its default slot content using the slots context parameter. Displays fallback content if no slot content is provided.

```jsx
const Comp = (props, { slots }) => {
  return <>{slots.default ? <slots.default /> : 'Fallback content'}</>
}
```

--------------------------------

### useEffect to watchEffect Migration

Source: https://jsx-vapor.netlify.app/introduction/migration

Migrate React's useEffect hook to Vue's watchEffect for reactive side effects.

```ts
// React
useEffect(() => {
  console.log(foo)
}, [foo])

// Vue
watchEffect(() => {
  console.log(foo)
})
```

--------------------------------

### Render Child Component in Parent

Source: https://jsx-vapor.netlify.app/tutorial/step-7

Use the imported child component within the parent component's JSX. Ensure the child component is correctly imported.

```jsx
import Child from './Child'

export default () => {
  return (
    <div>
      Parent
      <Child />
    </div>
  )
}
```

--------------------------------

### Passing Reactive Ref as Prop

Source: https://jsx-vapor.netlify.app/tutorial/step-8

Solution to maintain reactivity by passing a reactive ref object directly as a prop. Note: This component might not be usable in Vue templates as they auto-unwrap refs.

```jsx
function Comp({ foo }) {
  return <div>{foo.value}</div>
}

export default () => {
  const foo = ref('foo')
  return <Comp foo={foo} /> 
}
```

--------------------------------

### useState to ref Migration

Source: https://jsx-vapor.netlify.app/introduction/migration

Migrate React's useState hook to Vue's ref for managing state. Note the difference in accessing and updating values.

```ts
// React
const [foo, setFoo] = useState(count)
console.log([foo, setFoo(1), setFoo])

// Vue
const foo = ref(0)
console.log([foo.value, foo.value = 1, val => foo.value = val])
```

--------------------------------

### React Functional Component to defineVaporComponent

Source: https://jsx-vapor.netlify.app/introduction/migration

Migrate React functional components to Vue's defineVaporComponent, which enables reactive props destructuring.

```tsx
// React
const Comp = ({ count = 1 }) => {
  return <div>{count}</div>
}

// Vue
const Comp = defineVaporComponent(({ count = 1 }) => {
  return <div>{count}</div>
})
```

--------------------------------

### Receiving Multiple Scoped Slot Props with Object Expression

Source: https://jsx-vapor.netlify.app/tutorial/step-10

Employ an object expression to handle multiple named slots and their respective props. This approach is useful when a component exposes several distinct slots.

```jsx
export default () => (
  <Comp>{{ 
    default: (slotProps) => <div>{slotProps.foo}</div>,
    title: (slotProps) => <div>{slotProps.bar}</div>
  }}</Comp>
)
```

--------------------------------

### Manual Two-way Binding (Parent)

Source: https://jsx-vapor.netlify.app/tutorial/step-12

Manually pass `modelValue` as a prop and listen to the `onUpdate:modelValue` event for two-way binding without v-model.

```jsx
<Comp modelValue={msg.value} onUpdate:modelValue={(v) => (msg.value = v)} />
```

--------------------------------

### Passing Attributes to Slot Outlet

Source: https://jsx-vapor.netlify.app/tutorial/step-10

Pass attributes directly to a `<slot>` outlet. This method also allows data to be passed from the child scope to the parent.

```jsx
const Comp = () => {
  return <slot foo="from child"></slot>
}
```

--------------------------------

### Named v-model Binding (Parent)

Source: https://jsx-vapor.netlify.app/tutorial/step-12

Use named `v-model` to bind multiple values to different props and events.

```jsx
<Comp v-model:title={title.value} v-model:content={content.value} />
```

--------------------------------

### Deconstructing Props (Reactivity Loss)

Source: https://jsx-vapor.netlify.app/tutorial/step-8

Deconstructing props directly can lead to loss of reactivity. Use with caution.

```jsx
const Comp = ({ foo }) => (
  <div>
    {foo} this will no longer update
  </div>
)
```

--------------------------------

### Named Slots with Fallback Content

Source: https://jsx-vapor.netlify.app/tutorial/step-9

Defines a child component with both a default slot and a named slot ('title'), each providing fallback content. Uses the <slot> element for both.

```jsx
const Comp = (props, { slots }) => {
  return [
    <slot>Fallback content</slot>,
    <slot name="title">Title fallback content</slot>
  ]
}
```

--------------------------------

### Access Exposed State using shallowRef

Source: https://jsx-vapor.netlify.app/tutorial/step-11

Access exposed state from a child component in the parent using the `ref` prop and `shallowRef`. This allows the parent to interact with the child's exposed properties.

```jsx
import { shallowRef } from 'vue'

export default () => {
  const compRef = shallowRef()
  return (
    <>
      <Comp ref={compRef} count={1} />
      {compRef.value?.double}
    </>
  )
}
```

--------------------------------

### Accessing Props in Functional Component

Source: https://jsx-vapor.netlify.app/tutorial/step-8

Props are passed as the first parameter to a functional component.

```jsx
const Comp = (props) => (
  <div>{props.foo}</div>
)
```

--------------------------------

### Receiving Scoped Slot Props with v-slot Directive

Source: https://jsx-vapor.netlify.app/tutorial/step-10

Utilize the `v-slot` directive for receiving scoped slot props, similar to how it's done in Vue templates. This method offers a declarative way to bind slot props.

```jsx
export default () => (
  <Comp v-slot={{ foo }}>
    <div>{foo}</div>
  </Comp>
)
```

--------------------------------

### Conditional Rendering with Ternaries and Boolean Expressions

Source: https://jsx-vapor.netlify.app/tutorial/step-5

Use ternary operators or boolean expressions within JSX to conditionally render elements. This is useful for simple show/hide logic.

```jsx
<>
  { toggle ? <h1>Title</h1> : null }
  { toggle && <h1>Title</h1> }
</>
```

--------------------------------

### Manual Two-way Binding (Child)

Source: https://jsx-vapor.netlify.app/tutorial/step-12

The child component receives `modelValue` and emits `onUpdate:modelValue` to notify the parent of changes.

```jsx
const Comp = (props) => {
  return (
    <input
      value={props.modelValue}
      onInput={(e) => props['onUpdate:modelValue'](e.target.value)}
    />
  )
}
```

--------------------------------

### Access Exposed State using useRef Alias

Source: https://jsx-vapor.netlify.app/tutorial/step-11

Utilize the `useRef` API from `vue-jsx-vapor` as a `shallowRef` alias to receive exposed state. This alias can automatically infer the component's exposed types, simplifying type handling.

```tsx
import { 
computed
 } from 'vue'
import { 
useRef
 } from 'vue-jsx-vapor'

const 
Comp
 = (
props
: { 
count
: number }) => {
  const 
double
 = 
computed
(() => 
props
. 
count
 * 2)
  
defineExpose
({
    
double

  })
  
return
 []
}

export default () => {
  const 
compRef
 = 
useRef
()
  return (
    <>
      < 
Comp
 
ref
={ 
compRef
} 
count
={1} />
      {
compRef
. 
value
?. 
double
}
    </>
  )
}
```

--------------------------------

### Props Destructuring Reactivity Issue

Source: https://jsx-vapor.netlify.app/introduction/migration

Destructuring props in a functional component can break reactivity. Pass the ref directly or use defineVaporComponent with macros.

```tsx
function Comp({ foo }) {
  return <div>{foo}</div>
}

export default () => {
  const foo = ref('foo')
  return <Comp foo={foo.value} />
}
```

```tsx
function Comp({ foo }) {
  return <div>{foo.value}</div>
}

export default () => {
  const foo = ref('foo')
  return <Comp foo={foo} />
}
```

```tsx
import { defineVaporComponent, ref } from 'vue'

const Comp = defineVaporComponent(({ foo }) => {
  return <>{foo}</>
})
// Compiles to:
const Comp = defineVaporComponent((_props) => {
  return <>{_props.foo}</>
}, { props: ['foo'] })

export default () => {
  const foo = ref('foo')
  return <Comp foo={foo.value} />
}
```

--------------------------------

### Receiving Scoped Slot Props with Function Expression

Source: https://jsx-vapor.netlify.app/tutorial/step-10

Use a function expression within the child component's content to receive and utilize slot props. This is a straightforward way to access data passed from the slot.

```jsx
export default () => (
  <Comp>{(slotProps) => <div>{slotProps.foo}</div>}</Comp>
)
```

--------------------------------

### Named v-model Binding (Child)

Source: https://jsx-vapor.netlify.app/tutorial/step-12

The child component receives named models as separate props and emits corresponding update events.

```jsx
const Comp = (props) => {
  return (
    <>
      <input
        value={props.title}
        onInput={(e) => props['onUpdate:title'](e.target.value)}
      />
      <input
        value={props.content}
        onInput={(e) => props['onUpdate:content'](e.target.value)}
      />
    </>
  )
}
```

--------------------------------

### Passing Attributes to Default Slot

Source: https://jsx-vapor.netlify.app/tutorial/step-10

Pass attributes to the `<slots.default />` component to share data from the child scope to the parent. This is similar to passing props to a regular component.

```jsx
const Comp = (props, { slots }) => {
  return <slots.default foo="from child" />
}
```

--------------------------------

### Conditional Style Bindings in Vue JSX

Source: https://jsx-vapor.netlify.app/tutorial/step-3

Conditionally bind styles using string, object, or array expressions. The 'undefined' value in object expressions will omit the style.

```tsx
export default (props: { hidden: boolean }) => (
  <>
    <h1 style={`display: ${ props.hidden ? 'none' : 'block' }`}>h1</h1>
    <h2 style={{ display: props.hidden ? 'none': undefined }}>h2</h2>
    <h3 style={[ props.hidden && 'display: none;' ]}>h3</h3>
  </>
)
```

--------------------------------

### Conditional Class Bindings in Vue JSX

Source: https://jsx-vapor.netlify.app/tutorial/step-3

Conditionally bind classes using string, object, or array expressions. The 'hidden' class is applied when the 'hidden' prop is true.

```tsx
export default (props: { hidden: boolean }) => (
  <>
    <h1 class={props.hidden && 'hidden'}>h1</h1>
    <h2 class={{ 'hidden': props.hidden }}>h2</h2>
    <h3 class={[ props.hidden && 'hidden' ]}>h3</h3>
  </>
)
```
Tokens:
Raw