Don't obfuscate VDOM shape
There was no need to mutilate the VDOM shape beyond recognition just to save a few bytes. Now each prop clearly expresses its intent: { tag, props, children, node, type, key, }
This commit is contained in:
parent
4676877484
commit
8e6a490895
57
index.js
57
index.js
|
@ -80,7 +80,9 @@ var patchProperty = (node, key, oldValue, newValue, listener, isSvg) => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else if (key[0] === "o" && key[1] === "n") {
|
} else if (key[0] === "o" && key[1] === "n") {
|
||||||
if (!((node.tag || (node.tag = {}))[(key = key.slice(2))] = newValue)) {
|
if (
|
||||||
|
!((node.events || (node.events = {}))[(key = key.slice(2))] = newValue)
|
||||||
|
) {
|
||||||
node.removeEventListener(key, listener)
|
node.removeEventListener(key, listener)
|
||||||
} else if (!oldValue) {
|
} else if (!oldValue) {
|
||||||
node.addEventListener(key, listener)
|
node.addEventListener(key, listener)
|
||||||
|
@ -101,11 +103,11 @@ var patchProperty = (node, key, oldValue, newValue, listener, isSvg) => {
|
||||||
var createNode = (vdom, listener, isSvg) => {
|
var createNode = (vdom, listener, isSvg) => {
|
||||||
var props = vdom.props
|
var props = vdom.props
|
||||||
var node =
|
var node =
|
||||||
vdom.tag === TEXT_NODE
|
vdom.type === TEXT_NODE
|
||||||
? document.createTextNode(vdom.type)
|
? document.createTextNode(vdom.tag)
|
||||||
: (isSvg = isSvg || vdom.type === "svg")
|
: (isSvg = isSvg || vdom.tag === "svg")
|
||||||
? document.createElementNS(SVG_NS, vdom.type, { is: props.is })
|
? document.createElementNS(SVG_NS, vdom.tag, { is: props.is })
|
||||||
: document.createElement(vdom.type, { is: props.is })
|
: document.createElement(vdom.tag, { is: props.is })
|
||||||
|
|
||||||
for (var k in props) {
|
for (var k in props) {
|
||||||
patchProperty(node, k, null, props[k], listener, isSvg)
|
patchProperty(node, k, null, props[k], listener, isSvg)
|
||||||
|
@ -128,11 +130,11 @@ var patch = (parent, node, oldVNode, newVNode, listener, isSvg) => {
|
||||||
if (oldVNode === newVNode) {
|
if (oldVNode === newVNode) {
|
||||||
} else if (
|
} else if (
|
||||||
oldVNode != null &&
|
oldVNode != null &&
|
||||||
oldVNode.tag === TEXT_NODE &&
|
oldVNode.type === TEXT_NODE &&
|
||||||
newVNode.tag === TEXT_NODE
|
newVNode.type === TEXT_NODE
|
||||||
) {
|
) {
|
||||||
if (oldVNode.type !== newVNode.type) node.nodeValue = newVNode.type
|
if (oldVNode.tag !== newVNode.tag) node.nodeValue = newVNode.tag
|
||||||
} else if (oldVNode == null || oldVNode.type !== newVNode.type) {
|
} else if (oldVNode == null || oldVNode.tag !== newVNode.tag) {
|
||||||
node = parent.insertBefore(
|
node = parent.insertBefore(
|
||||||
createNode((newVNode = maybeVNode(newVNode)), listener, isSvg),
|
createNode((newVNode = maybeVNode(newVNode)), listener, isSvg),
|
||||||
node
|
node
|
||||||
|
@ -158,7 +160,7 @@ var patch = (parent, node, oldVNode, newVNode, listener, isSvg) => {
|
||||||
var oldTail = oldVKids.length - 1
|
var oldTail = oldVKids.length - 1
|
||||||
var newTail = newVKids.length - 1
|
var newTail = newVKids.length - 1
|
||||||
|
|
||||||
isSvg = isSvg || newVNode.type === "svg"
|
isSvg = isSvg || newVNode.tag === "svg"
|
||||||
|
|
||||||
for (var i in { ...oldProps, ...newProps }) {
|
for (var i in { ...oldProps, ...newProps }) {
|
||||||
if (
|
if (
|
||||||
|
@ -251,7 +253,7 @@ var patch = (parent, node, oldVNode, newVNode, listener, isSvg) => {
|
||||||
continue
|
continue
|
||||||
}
|
}
|
||||||
|
|
||||||
if (newKey == null || oldVNode.tag === SSR_NODE) {
|
if (newKey == null || oldVNode.type === SSR_NODE) {
|
||||||
if (oldKey == null) {
|
if (oldKey == null) {
|
||||||
patch(
|
patch(
|
||||||
node,
|
node,
|
||||||
|
@ -342,33 +344,26 @@ var recycleNode = (node) =>
|
||||||
node.nodeName.toLowerCase(),
|
node.nodeName.toLowerCase(),
|
||||||
EMPTY_OBJ,
|
EMPTY_OBJ,
|
||||||
map.call(node.childNodes, recycleNode),
|
map.call(node.childNodes, recycleNode),
|
||||||
node,
|
SSR_NODE,
|
||||||
null,
|
node
|
||||||
SSR_NODE
|
|
||||||
)
|
)
|
||||||
|
|
||||||
var createVNode = (type, props, children, node, key, tag) => ({
|
var createVNode = (tag, props, children, type, node) => ({
|
||||||
type,
|
|
||||||
props,
|
|
||||||
children,
|
|
||||||
node,
|
|
||||||
key,
|
|
||||||
tag,
|
tag,
|
||||||
|
props,
|
||||||
|
key: props.key,
|
||||||
|
children,
|
||||||
|
type,
|
||||||
|
node,
|
||||||
})
|
})
|
||||||
|
|
||||||
export var memo = (tag, memo) => ({ tag, memo })
|
export var memo = (tag, memo) => ({ tag, memo })
|
||||||
|
|
||||||
export var text = (value, node) =>
|
export var text = (value, node) =>
|
||||||
createVNode(value, EMPTY_OBJ, EMPTY_ARR, node, null, TEXT_NODE)
|
createVNode(value, EMPTY_OBJ, EMPTY_ARR, TEXT_NODE, node)
|
||||||
|
|
||||||
export var h = (type, props, children) =>
|
export var h = (tag, props, children = EMPTY_ARR) =>
|
||||||
createVNode(
|
createVNode(tag, props, isArray(children) ? children : [children])
|
||||||
type,
|
|
||||||
props,
|
|
||||||
isArray(children) ? children : children == null ? EMPTY_ARR : [children],
|
|
||||||
null,
|
|
||||||
props.key
|
|
||||||
)
|
|
||||||
|
|
||||||
export var app = (props) => {
|
export var app = (props) => {
|
||||||
var view = props.view
|
var view = props.view
|
||||||
|
@ -405,7 +400,7 @@ export var app = (props) => {
|
||||||
)
|
)
|
||||||
|
|
||||||
var listener = function (event) {
|
var listener = function (event) {
|
||||||
dispatch(this.tag[event.type], event)
|
dispatch(this.events[event.type], event)
|
||||||
}
|
}
|
||||||
|
|
||||||
var render = () =>
|
var render = () =>
|
||||||
|
|
|
@ -8,23 +8,23 @@ export default [
|
||||||
deepEqual(h("zord", { foo: true }, []), {
|
deepEqual(h("zord", { foo: true }, []), {
|
||||||
children: [],
|
children: [],
|
||||||
key: undefined,
|
key: undefined,
|
||||||
node: null,
|
node: undefined,
|
||||||
props: {
|
props: {
|
||||||
foo: true,
|
foo: true,
|
||||||
},
|
},
|
||||||
tag: undefined,
|
type: undefined,
|
||||||
type: "zord",
|
tag: "zord",
|
||||||
}),
|
}),
|
||||||
]),
|
]),
|
||||||
]),
|
]),
|
||||||
t("text function", [
|
t("text function", [
|
||||||
deepEqual(text("tenet"), {
|
deepEqual(text("hyper"), {
|
||||||
children: [],
|
children: [],
|
||||||
key: null,
|
key: undefined,
|
||||||
node: undefined,
|
node: undefined,
|
||||||
props: {},
|
props: {},
|
||||||
tag: 3,
|
type: 3,
|
||||||
type: "tenet",
|
tag: "hyper",
|
||||||
}),
|
}),
|
||||||
]),
|
]),
|
||||||
]),
|
]),
|
||||||
|
|
Loading…
Reference in New Issue