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") {
if (!((node.tag || (node.tag = {}))[(key = key.slice(2))] = newValue)) {
if (
!((node.events || (node.events = {}))[(key = key.slice(2))] = newValue)
) {
node.removeEventListener(key, listener)
} else if (!oldValue) {
node.addEventListener(key, listener)
@ -101,11 +103,11 @@ var patchProperty = (node, key, oldValue, newValue, listener, isSvg) => {
var createNode = (vdom, listener, isSvg) => {
var props = vdom.props
var node =
vdom.tag === TEXT_NODE
? document.createTextNode(vdom.type)
: (isSvg = isSvg || vdom.type === "svg")
? document.createElementNS(SVG_NS, vdom.type, { is: props.is })
: document.createElement(vdom.type, { is: props.is })
vdom.type === TEXT_NODE
? document.createTextNode(vdom.tag)
: (isSvg = isSvg || vdom.tag === "svg")
? document.createElementNS(SVG_NS, vdom.tag, { is: props.is })
: document.createElement(vdom.tag, { is: props.is })
for (var k in props) {
patchProperty(node, k, null, props[k], listener, isSvg)
@ -128,11 +130,11 @@ var patch = (parent, node, oldVNode, newVNode, listener, isSvg) => {
if (oldVNode === newVNode) {
} else if (
oldVNode != null &&
oldVNode.tag === TEXT_NODE &&
newVNode.tag === TEXT_NODE
oldVNode.type === TEXT_NODE &&
newVNode.type === TEXT_NODE
) {
if (oldVNode.type !== newVNode.type) node.nodeValue = newVNode.type
} else if (oldVNode == null || oldVNode.type !== newVNode.type) {
if (oldVNode.tag !== newVNode.tag) node.nodeValue = newVNode.tag
} else if (oldVNode == null || oldVNode.tag !== newVNode.tag) {
node = parent.insertBefore(
createNode((newVNode = maybeVNode(newVNode)), listener, isSvg),
node
@ -158,7 +160,7 @@ var patch = (parent, node, oldVNode, newVNode, listener, isSvg) => {
var oldTail = oldVKids.length - 1
var newTail = newVKids.length - 1
isSvg = isSvg || newVNode.type === "svg"
isSvg = isSvg || newVNode.tag === "svg"
for (var i in { ...oldProps, ...newProps }) {
if (
@ -251,7 +253,7 @@ var patch = (parent, node, oldVNode, newVNode, listener, isSvg) => {
continue
}
if (newKey == null || oldVNode.tag === SSR_NODE) {
if (newKey == null || oldVNode.type === SSR_NODE) {
if (oldKey == null) {
patch(
node,
@ -342,33 +344,26 @@ var recycleNode = (node) =>
node.nodeName.toLowerCase(),
EMPTY_OBJ,
map.call(node.childNodes, recycleNode),
node,
null,
SSR_NODE
SSR_NODE,
node
)
var createVNode = (type, props, children, node, key, tag) => ({
type,
props,
children,
node,
key,
var createVNode = (tag, props, children, type, node) => ({
tag,
props,
key: props.key,
children,
type,
node,
})
export var memo = (tag, memo) => ({ tag, memo })
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) =>
createVNode(
type,
props,
isArray(children) ? children : children == null ? EMPTY_ARR : [children],
null,
props.key
)
export var h = (tag, props, children = EMPTY_ARR) =>
createVNode(tag, props, isArray(children) ? children : [children])
export var app = (props) => {
var view = props.view
@ -405,7 +400,7 @@ export var app = (props) => {
)
var listener = function (event) {
dispatch(this.tag[event.type], event)
dispatch(this.events[event.type], event)
}
var render = () =>

View File

@ -8,23 +8,23 @@ export default [
deepEqual(h("zord", { foo: true }, []), {
children: [],
key: undefined,
node: null,
node: undefined,
props: {
foo: true,
},
tag: undefined,
type: "zord",
type: undefined,
tag: "zord",
}),
]),
]),
t("text function", [
deepEqual(text("tenet"), {
deepEqual(text("hyper"), {
children: [],
key: null,
key: undefined,
node: undefined,
props: {},
tag: 3,
type: "tenet",
type: 3,
tag: "hyper",
}),
]),
]),