wip: make dev mode work for sfc generated code

This commit is contained in:
Evan You 2024-12-08 16:12:08 +08:00
parent 30a7e7967c
commit 6f5493c677
No known key found for this signature in database
GPG Key ID: 00E9AB7A6704CE0A
1 changed files with 24 additions and 12 deletions

View File

@ -34,6 +34,7 @@ import { setStyle } from './dom/style'
import { setClass, setDynamicProp } from './dom/prop' import { setClass, setDynamicProp } from './dom/prop'
import { import {
type RawSlots, type RawSlots,
type Slot,
type StaticSlots, type StaticSlots,
dynamicSlotsProxyHandlers, dynamicSlotsProxyHandlers,
getSlot, getSlot,
@ -61,7 +62,13 @@ export interface ObjectVaporComponent
inheritAttrs?: boolean inheritAttrs?: boolean
props?: ComponentPropsOptions props?: ComponentPropsOptions
emits?: EmitsOptions emits?: EmitsOptions
render?(ctx: any): Block render?(
ctx: any,
props?: any,
emit?: EmitFn,
attrs?: any,
slots?: Record<string, Slot>,
): Block
name?: string name?: string
vapor?: boolean vapor?: boolean
@ -114,13 +121,11 @@ export function createComponent(
} }
const setupFn = isFunction(component) ? component : component.setup const setupFn = isFunction(component) ? component : component.setup
const setupContext =
setupFn && setupFn.length > 1 ? new SetupContext(instance) : null
const setupResult = setupFn const setupResult = setupFn
? setupFn( ? setupFn(
instance.props, instance.props,
// @ts-expect-error // @ts-expect-error
setupContext, setupFn.length > 1 ? new SetupContext(instance) : null,
) || EMPTY_OBJ ) || EMPTY_OBJ
: EMPTY_OBJ : EMPTY_OBJ
@ -135,7 +140,14 @@ export function createComponent(
instance.block = [] instance.block = []
} else { } else {
instance.setupState = setupResult instance.setupState = setupResult
instance.block = component.render.call(null, proxyRefs(setupResult)) instance.block = component.render.call(
null,
proxyRefs(setupResult),
instance.props,
instance.emit,
instance.attrs,
instance.slots,
)
} }
} else { } else {
// in prod result can only be block // in prod result can only be block
@ -188,6 +200,7 @@ export class VaporComponentInstance implements GenericComponentInstance {
rawProps: RawProps rawProps: RawProps
rawSlots: RawSlots rawSlots: RawSlots
emit: EmitFn
emitted: Record<string, boolean> | null emitted: Record<string, boolean> | null
propsDefaults: Record<string, any> | null propsDefaults: Record<string, any> | null
@ -244,6 +257,7 @@ export class VaporComponentInstance implements GenericComponentInstance {
this.block = null! // to be set this.block = null! // to be set
this.scope = new EffectScope(true) this.scope = new EffectScope(true)
this.emit = emit.bind(null, this)
this.provides = currentInstance this.provides = currentInstance
? currentInstance.provides ? currentInstance.provides
: Object.create(this.appContext.provides) : Object.create(this.appContext.provides)
@ -282,8 +296,6 @@ export class VaporComponentInstance implements GenericComponentInstance {
this.propsOptions = normalizePropsOptions(comp) this.propsOptions = normalizePropsOptions(comp)
this.emitsOptions = normalizeEmitsOptions(comp) this.emitsOptions = normalizeEmitsOptions(comp)
} }
// TODO init slots
} }
} }
@ -293,16 +305,16 @@ export function isVaporComponent(
return value instanceof VaporComponentInstance return value instanceof VaporComponentInstance
} }
export class SetupContext<E = EmitsOptions> { export class SetupContext {
attrs: Record<string, any> attrs: Record<string, any>
emit: EmitFn<E> emit: EmitFn
// TODO slots: Readonly<StaticSlots> slots: Readonly<StaticSlots>
expose: (exposed?: Record<string, any>) => void expose: (exposed?: Record<string, any>) => void
constructor(instance: VaporComponentInstance) { constructor(instance: VaporComponentInstance) {
this.attrs = instance.attrs this.attrs = instance.attrs
this.emit = emit.bind(null, instance) as EmitFn<E> this.emit = instance.emit
// this.slots = instance.slots this.slots = instance.slots
this.expose = (exposed = {}) => { this.expose = (exposed = {}) => {
instance.exposed = exposed instance.exposed = exposed
} }