Discussion about the .dom, the tiny (≤ 512 byte) template engine that uses virtual DOM and some of react principles
seems to be triggering way more mounts and unmounts with my code over the original
which can lead to odd rendering results I'm assuming
could also be that multiple components are bonded to the one element, and so they fire the hooks far more
which would make sense
anyway, something to think abut
for (;(vnode.$ || renderChildren).call;) // (This expands to : vnode.$ && vnode.$.call &&)
// If the vnode is a functional component, expand
(k => vnode = vnode.$( // it and replace the current vnode variable.
vnode.a, // 1. The component properties
(_state[k] = _state[k] || {}) && _state[k], // 2. The stateful component state
newState => // 3. The setState function
ObjectAssign( // First we update the state record, that also updates
_state[k], // the contents of the DOM element, since the reference
newState // is perserved.
) &&
render( // We then trigger the same render cycle that will
vnodes, // update the DOM
dom
),
_hooks // 4. The lifecycle method hooks
))(index++);
it seems to cause a problem during re-render, where others merged on the same state are not reset
so when setState is fire, it cant just be for this node, it has to reset the state of the other components below it
this will work, it resets the other state:
for (;(vnode.$ || renderChildren).call;) // (This expands to : vnode.$ && vnode.$.call &&)
// If the vnode is a functional component, expand
(k => vnode = vnode.$( // it and replace the current vnode variable.
vnode.a, // 1. The component properties
_state[k] || {}, // 2. The stateful component state
newState =>
_state.fill({}, 0, k) && // 3. The setState function
ObjectAssign( // First we update the state record, that also updates
(_state[k] = _state[k] || {}) && _state[k], // the contents of the DOM element, since the reference
newState // is perserved.
) &&
render( // We then trigger the same render cycle that will
vnodes, // update the DOM
dom
),
_hooks // 4. The lifecycle method hooks
))(j++);
I was actually thinking, if we use a similar design for the entire state model, we can just fill an array downward with empty state, thus resetting state on re-render
thats if the entire state was an array 0 -- x
or just splice it out and allow reset
each node would be given a number in the state memory (a nonce)
Feature Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari
Basic support 45 [1] 31 (31) (Yes) No support No support 7.1
no IE support though
Do you think you can make a proper pull request to discuss over there? It's kind of hard to track the diffs as a comment :D
Seems that you found some interesting solution there
So what's limiting the support? The
.fill ?
What about Array(k) ?
hmm.. not repeating the
{}
Didn't have time to figure it out
Yes, I can do a PR to discuss
just thinking out loud
by calling the render function if the higher order component function returns a function
so the element == render result (that way it is recursive)
but I also think we should not bond anything to the dom
just compare old dom element to new, but dont store props or state on the dom at all
that way we can have infinite amounts of higher order components without touching the dom
I think it's the right way to do this
to have a real vdom comparible to the big boys for IOT
@wavesoft hello. I came across dot-dom after searching for a smaller virtual dom implementation but was frustrated that root vnodes are re-rendered when state changes on sub-components. I was able to find a way around this but I'm seeing issues with mock-browser returning blank strings for innerHTML while running tests, yet running the same tests from actual browser look fine.
@wavesoft check out this modification, it adds a cache for node referencing. Here is a before and after fiddle. It has a larger footprint than 512 bytes and doesn't pass tests because of mock-browser's issues so maybe this other version should stay as a separate repo? Let me know what you think. Also, it's been a huge relief to find something this small that can do essentially the same thing as what behemoths like React and Angular are doing. Your work here is greatly appreciated. Thank you.
I had this discussion with other guys regarding features "extending the 512 byte limit", and therefore I thought of introducing a build-on-demand system where you can pick which extensions to include in the bundle.
Can you (1) Create a branch in your fork with your changes and (2) Create PR with your message above in order for me not to forget?
I also started working on state on
ic/smarter-state-perservation
on 0.3.0 I introduced lifecycle methods, towards proper high-order components.
@wavesoft I created a new fork and branch from master @ https://github.com/brettg2/dot-dom/tree/brettg2/cache but the pull request hangs on jest. I'm not sure what to do next.
It's getting this error message: No output has been received in the last 10m0s, this potentially indicates a stalled build or something wrong with the build itself.
Check the details on how to adjust your build configuration on: https://docs.travis-ci.com/user/common-build-problems/#Build-times-out-because-no-output-was-received
The build has been terminated
I can't think of anything from the top of my head that would hang the build