Error with higher level components at depth
SilentCicero opened this issue ยท 9 comments
import { H, R } from 'dot-dom';
function Page1() {
return H('div');
}
function Page2() {
return H(Page1);
}
R(
H(Page2),
document.body,
);
Throws this error:
Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('function Page1() {
return (0, _dotDom.H)('div');
}') is not a valid name.
at http://localhost:3000/bundle.js:5425:51
at Array.map (native)
at render (http://localhost:3000/bundle.js:5374:38)
at Object.<anonymous> (http://localhost:3000/bundle.js:4177:15)
at __webpack_require__ (http://localhost:3000/bundle.js:21:30)
at Object.defineProperty.value (http://localhost:3000/bundle.js:12114:18)
at __webpack_require__ (http://localhost:3000/bundle.js:21:30)
at module.exports.ctor.super_ (http://localhost:3000/bundle.js:67:18)
at http://localhost:3000/bundle.js:70:10
Flagging this line first:
? document.createTextNode(vnode) : document.createElement(vnode.E);
It seems that I have to nest them.. but why.
Valid:
import { H, R } from 'dot-dom';
function Page1() {
return H('div');
}
function Page2() {
return H('div', H(Page1));
}
R(
H(Page2),
document.body,
);
Not Valid:
import { H, R } from 'dot-dom';
function Page1() {
return H('div');
}
function Page2() {
return H(Page1);
}
R(
H(Page2),
document.body,
);
My hack, dont know if this will screw the whole dom up though:
const o = (v) => (v.E && v.E.call ? // If the vnode is a functional component, expand
o(v.E( // it and replace the current vnode variable.
v.P, // 1. The component properties
_state[0], // 2. The stateful component state
(newState) => // 3. The setState function
Object.assign( // First we update the state part of the record
_state[0], // Note: When we defined the variable we kept the
newState // reference to the record array
) &&
render( // We then trigger the same render cycle that will
vnodes, // update the DOM
dom,
_npath
)
)) : v);
vnode = o(vnode);
@wavesoft any thoughts on this one? ^^
Oh, blast I didn't read this. Yeah I know what causes this ๐
This is caused by a size-vs-feature tradeoff and must definitely be mentioned in the Caveats
. I saw you figured out that the functional component is evaluated only once here: https://github.com/wavesoft/dot-dom/blob/master/src/dotdom.js#L105
Therefore, the library "assumes" that it will receive some VNode as a response and not a nested component. That's why return H('div', H(SubComponent))
works and return H(SubComponent)
doesn't.
A recursive approach as the one you suggested seems to be a good idea, but the problem is that a stateful component needs a rendered node on which to store the state record. The bottom line is that your solution works, but the first + child components will share the same state.
Though from the top of my I head I think doing something like _npath + '>'
would fix that issue.
@wavesoft something to be considered for sure. I'll try out the _npath + '>'. Are you sure this would fix the state issue? Is the state actually going to be different? Do you have an email I can reach you at? I dont really use linkedin. Yes, adding that to the path would seem to work in this case.
Hey @SilentCicero , I just created a gitter for the project, you can find me there ๐
@wavesoft checkout the PR ;)
This is still not fully addressed so I am adding the bug label
This is now fixed on the latest 0.3.0 release ๐