Skip to content

Commit

Permalink
Don't obfuscate VDOM shape
Browse files Browse the repository at this point in the history
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,
  }
  • Loading branch information
jorgebucaran committed Jan 21, 2021
1 parent 4676877 commit 8e6a490
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 37 deletions.
55 changes: 25 additions & 30 deletions index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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)
Expand All @@ -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
Expand All @@ -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 (
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
var createVNode = (tag, props, children, type, node) => ({
tag,
props,
key: props.key,
children,
type,
node,
key,
tag,
})

export var memo = (tag, memo) => ({ tag, memo })

export var text = (value, node) =>
createVNode(value, EMPTY_OBJ, EMPTY_ARR, node, null, TEXT_NODE)

export var h = (type, props, children) =>
createVNode(
type,
props,
isArray(children) ? children : children == null ? EMPTY_ARR : [children],
null,
props.key
)
createVNode(value, EMPTY_OBJ, EMPTY_ARR, TEXT_NODE, node)

export var h = (tag, props, children = EMPTY_ARR) =>
createVNode(tag, props, isArray(children) ? children : [children])

export var app = (props) => {
var view = props.view
Expand Down Expand Up @@ -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 = () =>
Expand Down
14 changes: 7 additions & 7 deletions tests/index.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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",
}),
]),
]),
Expand Down

0 comments on commit 8e6a490

Please sign in to comment.