antfu/reactivue

[FeatureRequest] setup return render function

xialvjun opened this issue · 4 comments

change

import { UnwrapRef } from '@vue/reactivity'
import { useSetup } from './useSetup'

export function defineComponent<PropsType, State>(
  setupFunction: (props: PropsType) => State,
  renderFunction: (state: UnwrapRef<State>) => JSX.Element,
): (props: PropsType) => JSX.Element {
  return (props: PropsType) => {
    const state = useSetup(setupFunction, props)
    return renderFunction(state)
  }
}

to

import { UnwrapRef } from '@vue/reactivity'
import { useSetup } from './useSetup'

export function defineComponent<PropsType, State>(
  setupFunction: (props: PropsType) => State | () => JSX.Element,
  renderFunction?: (state: UnwrapRef<State>) => JSX.Element,
): (props: PropsType) => JSX.Element {
  return (props: PropsType) => {
    const stateOrRender = useSetup(setupFunction, props)
    return renderFunction ?  renderFunction(stateOrRender) : stateOrRender();
  }
}

sorry, seems this code is wrong.

antfu commented

Cool, would you mind to draft a PR for it? Thanks!

I have read reactivue's code, it seems it's not that easy to change defineComponent to return a render function.

I've written some ideas to achieve this before, but it may be a big change. https://github.com/xialvjun/reactivity-react/blob/master/index.tsx

antfu commented

I'd be appreciated if you can have a quick explanation of it. Thanks.