Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    Ioannis Charalampidis
    @wavesoft
    I am slowly getting back to work and I will then start digesting your suggestions ;)
    Nick Dodson
    @SilentCicero

    @wavesoft my main take aways are:

    1) the higher component problem seems to be fixed with the code above + your new state design
    2) your parent/state problem can be solved by subscribing the lower components with the higher parents unmount hook (how to do this best is yet to be seen)
    3) we are really running out of space to tackle future potential problems (which will happen), I recommend we make the className proxy it's own seperate module
    4) it seems that deeply nested component style is not being reset
    5) the object assignment of properties seems to work fine over the mapping, and with no difference in preformance/compat.

    Nick Dodson
    @SilentCicero
    seems like my complex state solution doesn't maintain state through complex re-rendering
    so the problem is this, I think

    ( 0 ( 1 ( 2 ( el

    the count goes from 0 - x
    when it should go from x - 0 (how far away the component is from the actual DOM element)

    so we need to figure out a way to go the other way
    I think going in negatives may work
    but yeah, this is the problem
    it's not finding the right depth numbers, and thus state is not being properly kept
    the 1-1 state bonding is still the most simple
    Nick Dodson
    @SilentCicero
    so we need to attain the total depth, then subtract the current index in order to complete this model
    unless we have another state model altoether
    Nick Dodson
    @SilentCicero
    actually, I dont see why this wouldn't work, the scenario above is not possible so I found out (as re-render triggers the higher vnodes var anyway)
    j=1
          ) => {
            /* Expand functional Components */
    
            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
    
              ))(j++);
    Nick Dodson
    @SilentCicero
    but it seems it causes some re-render problems, not sure how to debug yet though
    Nick Dodson
    @SilentCicero
    this is a component with the code above:
    mounted!
    index.js:21 unmounted!
    index.js:19 mounted!
    index.js:21 unmounted!
    index.js:19 mounted!
    index.js:20 updated!
    index.js:21 unmounted!
    index.js:19 mounted!
    index.js:21 unmounted!
    index.js:19 mounted!
    2index.js:20 updated!
    index.js:20 updated!
    2index.js:20 updated!
    index.js:20 updated!
    2index.js:20 updated!
    index.js:20 updated!
    index.js:20 updated!
    Now without the for loop:
    mounted!
    index.js:20 updated!
    index.js:20 updated!
    index.js:20 updated!
    3index.js:20 updated!
    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
    Nick Dodson
    @SilentCicero
    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
    Nick Dodson
    @SilentCicero
    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)
    Nick Dodson
    @SilentCicero
    ha! that fixed my other problem.. yay
    
    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
    Ioannis Charalampidis
    @wavesoft
    Wow man, you have done some serious thinking here :D
    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 {}
    Nick Dodson
    @SilentCicero
    So the fill was for doing state. Although there seemed to be problems with this approach
    Didn't have time to figure it out
    Yes, I can do a PR to discuss
    just thinking out loud
    Nick Dodson
    @SilentCicero
    @wavesoft I've been thinking about a way to solve double higher order components
    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