Skip to content

Commit abb9842

Browse files
author
lishiwen
committed
feat; customRender example
1 parent 493322a commit abb9842

File tree

7 files changed

+75
-12
lines changed

7 files changed

+75
-12
lines changed

‎example/customrender/App.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { h } from "../../lib/m-vue.esm.js";
2+
3+
export default {
4+
setup() {
5+
return {
6+
x: 300,
7+
y: 300,
8+
};
9+
},
10+
11+
render() {
12+
return h("rect", {
13+
x: this.x,
14+
y: this.y,
15+
});
16+
},
17+
};

‎example/customrender/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>props-html</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
</body>
12+
<script src="https://pixijs.download/release/pixi.js"></script>
13+
<script src="./main.js" type="module"></script>
14+
</html>

‎example/customrender/main.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { renderer } from "./renderer.js";
2+
import App from "./App.js";
3+
4+
const app = new PIXI.Application({
5+
width: window.innerWidth,
6+
height: window.innerHeight,
7+
});
8+
document.body.appendChild(app.view);
9+
10+
// Create a new instance of a PIXI renderer.
11+
renderer.createApp(App).mount(app.stage);

‎example/customrender/renderer.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { createRenderer } from "../../lib/m-vue.esm.js";
2+
3+
export const renderer = createRenderer({
4+
createElement: (tagName) => {
5+
if (tagName === "rect") {
6+
const rect = new PIXI.Graphics();
7+
rect.beginFill(0xf0f000);
8+
rect.drawRect(0, 0, 100, 100);
9+
rect.endFill();
10+
return rect;
11+
}
12+
},
13+
14+
patchProp: (el, key, value) => {
15+
el[key] = value;
16+
},
17+
18+
insert: (el, parent) => {
19+
parent.addChild(el);
20+
},
21+
});

‎lib/m-vue.cjs.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -311,7 +311,7 @@ function createAppAPI(render) {
311311
}
312312

313313
function createRenderer(customRenderOptions) {
314-
const { createElement, patchProp, insert } = customRenderOptions;
314+
const { createElement: hostCreateElement, patchProp: hostPatchProp, insert: hostInsert } = customRenderOptions;
315315
function render(vnode, container, parentComponent) {
316316
patch(vnode, container, parentComponent);
317317
}
@@ -348,15 +348,15 @@ function createRenderer(customRenderOptions) {
348348
setupRenderEffect(instance, container, initialVNode);
349349
}
350350
function mountElement(vnode, container, parentComponent) {
351-
const el = (vnode.el = createElement(vnode.type));
351+
const el = (vnode.el = hostCreateElement(vnode.type));
352352
if (vnode.shapeFlag & 4 /* ShapeFlags.TEXT_CHILDREN */) {
353353
el.textContent = vnode.children;
354354
}
355355
else if (vnode.shapeFlag & 8 /* ShapeFlags.ARRAY_CHILDREN */) {
356356
mountChildren(vnode.children, el, parentComponent);
357357
}
358358
addAttrs(vnode, el);
359-
insert(el, container);
359+
hostInsert(el, container);
360360
}
361361
function mountChildren(children = [], container, parentComponent) {
362362
children.forEach(child => {
@@ -368,7 +368,7 @@ function createRenderer(customRenderOptions) {
368368
for (const key in props) {
369369
if (Object.prototype.hasOwnProperty.call(props, key)) {
370370
const value = props[key];
371-
patchProp(container, key, value);
371+
hostPatchProp(container, key, value);
372372
}
373373
}
374374
}

‎lib/m-vue.esm.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -307,7 +307,7 @@ function createAppAPI(render) {
307307
}
308308

309309
function createRenderer(customRenderOptions) {
310-
const { createElement, patchProp, insert } = customRenderOptions;
310+
const { createElement: hostCreateElement, patchProp: hostPatchProp, insert: hostInsert } = customRenderOptions;
311311
function render(vnode, container, parentComponent) {
312312
patch(vnode, container, parentComponent);
313313
}
@@ -344,15 +344,15 @@ function createRenderer(customRenderOptions) {
344344
setupRenderEffect(instance, container, initialVNode);
345345
}
346346
function mountElement(vnode, container, parentComponent) {
347-
const el = (vnode.el = createElement(vnode.type));
347+
const el = (vnode.el = hostCreateElement(vnode.type));
348348
if (vnode.shapeFlag & 4 /* ShapeFlags.TEXT_CHILDREN */) {
349349
el.textContent = vnode.children;
350350
}
351351
else if (vnode.shapeFlag & 8 /* ShapeFlags.ARRAY_CHILDREN */) {
352352
mountChildren(vnode.children, el, parentComponent);
353353
}
354354
addAttrs(vnode, el);
355-
insert(el, container);
355+
hostInsert(el, container);
356356
}
357357
function mountChildren(children = [], container, parentComponent) {
358358
children.forEach(child => {
@@ -364,7 +364,7 @@ function createRenderer(customRenderOptions) {
364364
for (const key in props) {
365365
if (Object.prototype.hasOwnProperty.call(props, key)) {
366366
const value = props[key];
367-
patchProp(container, key, value);
367+
hostPatchProp(container, key, value);
368368
}
369369
}
370370
}

‎src/runtime-core/render.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Text } from "../shared/SpecificBuiltinTags";
55
import { createAppAPI } from "./createApp";
66

77
export function createRenderer(customRenderOptions) {
8-
const { createElement, patchProp, insert } = customRenderOptions;
8+
const { createElement: hostCreateElement, patchProp: hostPatchProp, insert: hostInsert } = customRenderOptions;
99

1010
function render(vnode, container, parentComponent) {
1111
patch(vnode, container, parentComponent);
@@ -46,14 +46,14 @@ export function createRenderer(customRenderOptions) {
4646
setupRenderEffect(instance, container, initialVNode);
4747
}
4848
function mountElement(vnode: any, container: any, parentComponent) {
49-
const el = (vnode.el = createElement(vnode.type))
49+
const el = (vnode.el = hostCreateElement(vnode.type))
5050
if (vnode.shapeFlag & ShapeFlags.TEXT_CHILDREN) {
5151
el.textContent = vnode.children;
5252
} else if (vnode.shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
5353
mountChildren(vnode.children, el, parentComponent);
5454
}
5555
addAttrs(vnode, el);
56-
insert(el, container);
56+
hostInsert(el, container);
5757
}
5858
function mountChildren(children = [], container, parentComponent) {
5959
children.forEach(child => {
@@ -66,7 +66,7 @@ export function createRenderer(customRenderOptions) {
6666
for (const key in props) {
6767
if (Object.prototype.hasOwnProperty.call(props, key)) {
6868
const value = props[key];
69-
patchProp(container, key, value);
69+
hostPatchProp(container, key, value);
7070
}
7171
}
7272
}

0 commit comments

Comments
 (0)