antfu/reactivue

npm i reactivue

import React from 'React'
import { defineComponent, ref, computed, onUnmounted } from 'reactivue'

interface Props {
  value: number
}

const MyCounter = defineComponent(
  // setup function in Vue
  (props: Props) => {
    const counter = ref(props.value)
    const doubled = computed(() => counter.value * 2)
    const inc = () => counter.value += 1

    onUnmounted(() => console.log('Goodbye World'))

    return { counter, doubled, inc }
  },
  // functional component in React
  ({ counter, doubled, inc }) => {
    // you can still use other React hooks
    return (
      <div>
        <div>{counter} x 2 = {doubled}</div>
        <button onClick={inc}>Increase</button>
      </div>
    )
  }
)

// use it as you normally would
render(<MyCounter value={10}>, el)

import React from 'React'
import { useSetup, ref, computed, onUnmounted } from 'reactivue'

interface Props {
  value: number
}

function MyCounter(Props: Props) {
  const state = useSetup(
    (props: Props) => { // props is a reactive object in Vue
      const counter = ref(props.value)
      const doubled = computed(() => counter.value * 2)
      const inc = () => counter.value += 1

      onUnmounted(() => console.log('Goodbye World'))

      return { counter, doubled, inc }
    },
    Props // pass React props to it
  )

  // state is a plain object just like React state
  const { counter, doubled, inc } = state

  return (
    <div>
      <div>{counter} x 2 = {doubled}</div>
      <button onClick={inc}>Increase</button>
    </div>
  )
}

// mySetup.ts
import { createSetup, ref, computed, onUnmounted } from 'reactivue'

export interface Props {
  value: number
}

// create a custom hook that can be reused
export const useMySetup = createSetup(
  (props: Props) => {
    const counter = ref(props.value)
    const doubled = computed(() => counter.value * 2)
    const inc = () => counter.value += 1

    onUnmounted(() => console.log('Goodbye World'))

    return { counter, doubled, inc }
  },
)

// Counter.tsx
import React from 'react'
import { useMySetup, Props } from './mySetup'

export const Counter = (props: Props) => {
  const { counter, doubled, inc } = useMySetup(props)
  const { counter: counter2, doubled: doubled2, inc: inc2 } = useMySetup({ value: 10 })

  return (
    <div>
      <div>{counter} x 2 = {doubled}</div>
      <button onClick={inc}>Increase</button>
      <br/>

      <div>{counter2} x 2 = {doubled2}</div>
      <button onClick={inc2}>Increase</button>
    </div>
  )
}

import { h } from 'preact'
-import { defineComponent, ref, computed, onUnmounted } from 'reactivue'
+import { defineComponent, ref, computed, onUnmounted } from 'reactivue/preact'

import { createApp } from 'reactivue'
import { createPinia } from 'pinia'

const app = createApp()

app.use(createPinia())

// the following two line are equivalent.
import { ref, reactive, computed } from 'reactivue'
import { ref, reactive, computed } from '@vue/reactivity'