Skip to content

Commit 647545e

Browse files
author
lishiwen
committed
feat: vue3 render tempalte this
1 parent 5987153 commit 647545e

File tree

7 files changed

+76
-37
lines changed

7 files changed

+76
-37
lines changed

‎example/simple/App.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
import { h } from "../../lib/m-vue.esm.js";
22

3+
// debugger instance
4+
window.vueInstance = null;
5+
36
export const App = {
47
// vue template -> render
58
render() {
9+
window.vueInstance = this;
610
// return h("div", {}, "shi-wen" + this.msg);
711
return h(
812
"div",

‎lib/m-vue.cjs.js‎

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ function createVNode(type, props, children) {
77
type,
88
props,
99
children,
10+
el: null,
1011
};
1112
return vnode;
1213
}
@@ -21,6 +22,20 @@ function isString(value) {
2122
return Object.prototype.toString.call(value) === "[object String]";
2223
}
2324

25+
const PublicPropertiesMaps = {
26+
"$el": (instance) => instance.vnode.el,
27+
};
28+
const ComponentPublicInstanceHandlers = {
29+
get({ _instance }, key) {
30+
if (key in _instance.setupState) {
31+
return _instance.setupState[key];
32+
}
33+
if (key in PublicPropertiesMaps) {
34+
return PublicPropertiesMaps[key](_instance);
35+
}
36+
}
37+
};
38+
2439
function createComponentInstance(vnode) {
2540
const component = {
2641
vnode,
@@ -40,14 +55,8 @@ function initProps(instance) {
4055
}
4156
function setupStatefulComponent(instance) {
4257
const Component = instance.type;
43-
const context = {};
44-
instance.proxy = new Proxy(context, {
45-
get(target, key) {
46-
if (key in instance.setupState) {
47-
return instance.setupState[key];
48-
}
49-
}
50-
});
58+
const context = { _instance: instance, _component: Component };
59+
instance.proxy = new Proxy(context, ComponentPublicInstanceHandlers);
5160
if (Component.setup) {
5261
const setupResult = Component.setup();
5362
handleSetupResult(instance, setupResult);
@@ -87,11 +96,12 @@ function processComponent(vnode, container) {
8796
function mountComponent(vnode, container) {
8897
const instance = createComponentInstance(vnode);
8998
setupComponent(instance);
90-
setupRenderEffect(instance, container);
99+
setupRenderEffect(instance, container, vnode);
91100
}
92101
function mountElement(vnode, container) {
93102
// vnode type -> div/span
94-
const el = document.createElement(vnode.type);
103+
// vnode.el -> element.el
104+
const el = (vnode.el = document.createElement(vnode.type));
95105
// children
96106
if (isString(vnode.children)) {
97107
el.textContent = vnode.children;
@@ -116,9 +126,10 @@ function addAttrs(vnode, container) {
116126
}
117127
}
118128
}
119-
function setupRenderEffect(instance, container) {
129+
function setupRenderEffect(instance, container, vnode) {
120130
const subTree = instance.render.call(instance.proxy);
121131
patch(subTree, container);
132+
vnode.el = subTree.el;
122133
}
123134

124135
function createApp(rootComponent) {

‎lib/m-vue.esm.js‎

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ function createVNode(type, props, children) {
33
type,
44
props,
55
children,
6+
el: null,
67
};
78
return vnode;
89
}
@@ -17,6 +18,20 @@ function isString(value) {
1718
return Object.prototype.toString.call(value) === "[object String]";
1819
}
1920

21+
const PublicPropertiesMaps = {
22+
"$el": (instance) => instance.vnode.el,
23+
};
24+
const ComponentPublicInstanceHandlers = {
25+
get({ _instance }, key) {
26+
if (key in _instance.setupState) {
27+
return _instance.setupState[key];
28+
}
29+
if (key in PublicPropertiesMaps) {
30+
return PublicPropertiesMaps[key](_instance);
31+
}
32+
}
33+
};
34+
2035
function createComponentInstance(vnode) {
2136
const component = {
2237
vnode,
@@ -36,14 +51,8 @@ function initProps(instance) {
3651
}
3752
function setupStatefulComponent(instance) {
3853
const Component = instance.type;
39-
const context = {};
40-
instance.proxy = new Proxy(context, {
41-
get(target, key) {
42-
if (key in instance.setupState) {
43-
return instance.setupState[key];
44-
}
45-
}
46-
});
54+
const context = { _instance: instance, _component: Component };
55+
instance.proxy = new Proxy(context, ComponentPublicInstanceHandlers);
4756
if (Component.setup) {
4857
const setupResult = Component.setup();
4958
handleSetupResult(instance, setupResult);
@@ -83,11 +92,12 @@ function processComponent(vnode, container) {
8392
function mountComponent(vnode, container) {
8493
const instance = createComponentInstance(vnode);
8594
setupComponent(instance);
86-
setupRenderEffect(instance, container);
95+
setupRenderEffect(instance, container, vnode);
8796
}
8897
function mountElement(vnode, container) {
8998
// vnode type -> div/span
90-
const el = document.createElement(vnode.type);
99+
// vnode.el -> element.el
100+
const el = (vnode.el = document.createElement(vnode.type));
91101
// children
92102
if (isString(vnode.children)) {
93103
el.textContent = vnode.children;
@@ -112,9 +122,10 @@ function addAttrs(vnode, container) {
112122
}
113123
}
114124
}
115-
function setupRenderEffect(instance, container) {
125+
function setupRenderEffect(instance, container, vnode) {
116126
const subTree = instance.render.call(instance.proxy);
117127
patch(subTree, container);
128+
vnode.el = subTree.el;
118129
}
119130

120131
function createApp(rootComponent) {

‎src/runtime-core/component.ts‎

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import { isStructObject } from "../shared/type";
2+
import { ComponentPublicInstanceHandlers } from "./componentPublicInstance";
3+
24

35
export function createComponentInstance(vnode) {
46
const component = {
@@ -9,7 +11,6 @@ export function createComponentInstance(vnode) {
911
return component;
1012
}
1113

12-
1314
export function setupComponent(instance) {
1415
initProps(instance);
1516
// initSlots();
@@ -23,16 +24,8 @@ function initProps(instance) {
2324

2425
function setupStatefulComponent(instance) {
2526
const Component = instance.type;
26-
27-
const context = {};
28-
instance.proxy = new Proxy(context, {
29-
get(target, key) {
30-
if (key in instance.setupState) {
31-
return instance.setupState[key];
32-
}
33-
}
34-
});
35-
27+
const context = { _instance: instance, _component: Component };
28+
instance.proxy = new Proxy(context, ComponentPublicInstanceHandlers);
3629
if (Component.setup) {
3730
const setupResult = Component.setup();
3831
handleSetupResult(instance, setupResult);

‎src/runtime-core/componentPublicInstance.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
export const PublicPropertiesMaps = {
2+
"$el": (instance) => instance.vnode.el,
3+
};
4+
5+
export const ComponentPublicInstanceHandlers = {
6+
get({ _instance }, key) {
7+
if (key in _instance.setupState) {
8+
return _instance.setupState[key];
9+
};
10+
11+
if (key in PublicPropertiesMaps) {
12+
return PublicPropertiesMaps[key](_instance);
13+
}
14+
}
15+
};

‎src/runtime-core/createVNode.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ export function createVNode(type, props?, children?) {
33
type,
44
props,
55
children,
6+
el: null,
67
};
8+
79
return vnode;
810
}

‎src/runtime-core/render.ts‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,12 +26,13 @@ function processComponent(vnode, container) {
2626
function mountComponent(vnode, container) {
2727
const instance = createComponentInstance(vnode);
2828
setupComponent(instance);
29-
setupRenderEffect(instance, container);
29+
setupRenderEffect(instance, container, vnode);
3030
}
3131

3232
function mountElement(vnode: any, container: any) {
3333
// vnode type -> div/span
34-
const el = document.createElement(vnode.type);
34+
// vnode.el -> element.el
35+
const el = (vnode.el = document.createElement(vnode.type));
3536

3637
// children
3738
if (isString(vnode.children)) {
@@ -61,7 +62,9 @@ function addAttrs(vnode, container) {
6162
}
6263
}
6364

64-
function setupRenderEffect(instance, container) {
65+
function setupRenderEffect(instance, container, vnode) {
6566
const subTree = instance.render.call(instance.proxy);
66-
patch(subTree, container)
67+
patch(subTree, container);
68+
69+
vnode.el = subTree.el;
6770
}

0 commit comments

Comments
 (0)