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:
Jorge Bucaran 2021-01-21 22:29:32 +09:00
parent 4676877484
commit 8e6a490895
No known key found for this signature in database
GPG Key ID: E54BA3C0E646DB30
2 changed files with 33 additions and 38 deletions

View File

@ -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 = () =>

View File

@ -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",
}), }),
]), ]),
]), ]),