farm-plugin-vue-reaction

Functional Vue component syntax for FarmFE — write Vue components as plain functions.

Install

npm install farm-plugin-vue-reaction

Concept

Write Vue SFC components as functions. The function body is the setup() context, and the template is defined via reactionTemplate tagged template or JSX return. At compile time, each function is compiled into a standard Vue SFC.

This is functionally identical to <script setup> — all top-level bindings in the function body are available in the template.

Usage

import reaction from 'farm-plugin-vue-reaction'

export default {
  plugins: [reaction()],
}

Writing Components

reactionTemplate — Tagged template

// Counter.reaction.ts
import { ref } from 'vue'
import { reactionTemplate } from 'farm-plugin-vue-reaction'

export function Counter() {
  const count = ref(0)
  const increment = () => count.value++
  return reactionTemplate`
    <button @click="increment">{{ count }}</button>
  `
}

Compiles to:

<template>
  <button @click="increment">{{ count }}</button>
</template>
<script setup lang="ts">
const count = ref(0)
const increment = () => count.value++
</script>

JSX return

// Button.reaction.ts
import { ref } from 'vue'

export function Button() {
  const loading = ref(false)
  const onClick = () => { loading.value = true }
  return <button onClick={onClick} disabled={loading.value}>Click</button>
}

With Props

// Greeting.reaction.ts
import { reactionTemplate } from 'farm-plugin-vue-reaction'

export function Greeting({ title, count }: { title: string; count: number }) {
  return reactionTemplate`
    <div>{{ title }} — {{ count }}</div>
  `
}

API

reactionTemplate

Tagged template literal that defines the component's template. At runtime, returns the template string. At compile time, the plugin extracts the content and generates a proper Vue SFC.

import { reactionTemplate } from 'farm-plugin-vue-reaction'

export function MyComp() {
  return reactionTemplate`<div>Hello</div>`
}

Options

• outputFormat — Output format: 'sfc' (Vue SFC for vue-sfc pipeline) or 'module' (JS module with defineComponent). Default: 'sfc'

reaction({ outputFormat: 'module' })

File Convention

• Files must end in .reaction.ts
• Each exported function becomes a Vue component
• The component name is derived from the function name

HMR

Invalidates on .reaction.ts file changes.

License

MIT