functional-vue v0.1.4

Install

yarn  add functional-vue
// or
npm install functional-vue
// or
pnpm install yarn  add functional-vue

Usage

use props

import  FC from "functional-vue"

type IProps={
    name:string;
    age?:number
}
const MyComponent=FC<IProps>(props=>{
    return ()=><div>name:{props.name}</div>
})

use setup

import  FC from "functional-vue"
import { reactive } from "vue"

type IProps={
    name:string;
    age?:number
}
const configProvider=(props,setup)=>{
    const config=reactive({
        someState:'someState'
    })
    function updateConfig=(newState:string)=>{
        config.someState=newState
    }
    return [config,updateConfig]
}


const MyComponent=FC<IProps>((props,setup)=>{
      // each component has its own setup state
    const [config,updateConfig]=setup(configProvider)
    return ()=><div>
        <div>config:{config.someState}</div>
        <button onClick={()=>{
            updateConfig('newState')
        }}>update </button>
    </div>
})

use setup shared state

import  FC from "functional-vue"
import { reactive } from "vue"
type IProps={
    name:string;
    age?:number
}

const createSharedConfig=()=>{
    const configProvider=()=>{
        const config=reactive({
            someState:'someState'
        })
        function updateConfig=(newState:string)=>{
            config.someState=newState
        }
        return [config,updateConfig]
    }
   return configProvider()
}
const sharedConfig=createSharedConfig()

const MyComponent=FC<IProps>((props,setup)=>{
      // share state between components
    const [config,updateConfig]=setup(sharedConfig)
    return ()=><div>
        <div>config:{config.someState}</div>
        <button onClick={()=>{
            updateConfig('newState')
        }}>update </button>
    </div>
})

setup in setup

import  FC from "functional-vue"
import { reactive } from "vue"
type IProps={
    name:string;
    age?:number
}

 const firstProvider=(props,setup)=>{
        const config=reactive({
            someState:'someState'
        })
        function updateConfig=(newState:string)=>{
            config.someState=newState
        }
        return [config,updateConfig]
    }

 const secondProvider=(props,setup)=>{
        const firstConfig=setup(firstProvider)
        return firstConfig
}

const MyComponent=FC<IProps>((props,setup)=>{
    const [config,updateConfig]=setup(secondProvider)
    return ()=><div>
        <div>config:{config.someState}</div>
        <button onClick={()=>{
            updateConfig('newState')
        }}>update </button>
    </div>
})