From 976844790ebe0963d04a90449a127dd2bc24e5b3 Mon Sep 17 00:00:00 2001 From: Evan You Date: Wed, 19 Jun 2019 17:08:42 +0800 Subject: [PATCH] wip: $state -> $data --- packages/runtime-core/src/component.ts | 42 ++++++++++++--------- packages/runtime-core/src/componentProxy.ts | 20 +++++----- 2 files changed, 34 insertions(+), 28 deletions(-) diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts index 17e5cd81..13ccb6d9 100644 --- a/packages/runtime-core/src/component.ts +++ b/packages/runtime-core/src/component.ts @@ -17,7 +17,7 @@ export type Data = { [key: string]: any } // public properties exposed on the proxy, which is used as the render context // in templates (as `this` in the render option) export type ComponentRenderProxy

= { - $state: S + $data: S $props: PublicProps $attrs: Data $refs: Data @@ -97,6 +97,8 @@ interface SetupContext { attrs: Data slots: Slots refs: Data + parent: ComponentInstance | null + root: ComponentInstance emit: ((event: string, ...args: any[]) => void) } @@ -112,7 +114,7 @@ export type ComponentInstance

= { render: RenderFunction | null // the rest are only for stateful components - state: S + data: S props: P renderProxy: ComponentRenderProxy | null propsProxy: P | null @@ -193,7 +195,7 @@ export function createComponentInstance( effects: null, // public properties - state: EMPTY_OBJ, + data: EMPTY_OBJ, props: EMPTY_OBJ, attrs: EMPTY_OBJ, slots: EMPTY_OBJ, @@ -217,10 +219,7 @@ export let currentInstance: ComponentInstance | null = null export function setupStatefulComponent(instance: ComponentInstance) { const Component = instance.type as ComponentOptions // 1. create render proxy - const proxy = (instance.renderProxy = new Proxy( - instance, - RenderProxyHandlers - ) as any) + instance.renderProxy = new Proxy(instance, RenderProxyHandlers) as any // 2. call setup() const { setup } = Component if (setup) { @@ -233,14 +232,14 @@ export function setupStatefulComponent(instance: ComponentInstance) { : null) const setupContext = (instance.setupContext = setup.length > 1 ? createSetupContext(instance) : null) - const setupResult = setup.call(proxy, propsProxy, setupContext) + const setupResult = setup.call(null, propsProxy, setupContext) if (isFunction(setupResult)) { // setup returned an inline render function instance.render = setupResult } else { // setup returned bindings. // assuming a render function compiled from template is present. - instance.state = state(setupResult) + instance.data = state(setupResult) if (__DEV__ && !Component.render) { // TODO warn missing render fn } @@ -269,7 +268,9 @@ function createSetupContext(instance: ComponentInstance): SetupContext { attrs: new Proxy(instance, SetupProxyHandlers.attrs), slots: new Proxy(instance, SetupProxyHandlers.slots), refs: new Proxy(instance, SetupProxyHandlers.refs), - emit: instance.emit + emit: instance.emit, + parent: instance.parent, + root: instance.root } as any return __DEV__ ? Object.freeze(context) : context } @@ -284,7 +285,9 @@ export function renderComponentRoot(instance: ComponentInstance): VNode { slots, attrs, refs, - emit + emit, + parent, + root } = instance if (vnode.shapeFlag & STATEFUL_COMPONENT) { return normalizeVNode( @@ -292,13 +295,18 @@ export function renderComponentRoot(instance: ComponentInstance): VNode { ) } else { // functional + const render = Component as FunctionalComponent return normalizeVNode( - (Component as FunctionalComponent)(props, { - attrs, - slots, - refs, - emit - }) + render.length > 1 + ? render(props, { + attrs, + slots, + refs, + emit, + parent, + root + }) + : render(props, null as any) ) } } diff --git a/packages/runtime-core/src/componentProxy.ts b/packages/runtime-core/src/componentProxy.ts index 90b75be1..348740a3 100644 --- a/packages/runtime-core/src/componentProxy.ts +++ b/packages/runtime-core/src/componentProxy.ts @@ -2,17 +2,17 @@ import { ComponentInstance } from './component' export const RenderProxyHandlers = { get(target: ComponentInstance, key: string) { - const { state, props } = target - if (state.hasOwnProperty(key)) { - return state[key] + const { data, props } = target + if (data.hasOwnProperty(key)) { + return data[key] } else if (props.hasOwnProperty(key)) { return props[key] } else { switch (key) { - case '$state': - return target.state + case '$data': + return data case '$props': - return target.props + return props case '$attrs': return target.attrs case '$slots': @@ -23,8 +23,6 @@ export const RenderProxyHandlers = { return target.parent case '$root': return target.root - case '$el': - return target.vnode && target.vnode.el case '$emit': return target.emit default: @@ -33,9 +31,9 @@ export const RenderProxyHandlers = { } }, set(target: ComponentInstance, key: string, value: any): boolean { - const { state } = target - if (state.hasOwnProperty(key)) { - state[key] = value + const { data } = target + if (data.hasOwnProperty(key)) { + data[key] = value return true } else { if (__DEV__) {