Comments (8)
TylorS
commented on June 11, 2024
Sorry to cause an issue! And thank you for the issue.
Is there somewhere that I can test this code? If not, could I get more of the stack trace for the error (if there is one)?
from cycle-snabbdom.
TylorS
commented on June 11, 2024
I think I figured it out
from cycle-snabbdom.
SkaterDad
commented on June 11, 2024
I tried out the changes you proposed, and it's no longer posting the error messages.
However, it's still stopping the page from rendering when one of the vTree children looks like this when logged:
children: Array[1]
0: null
length: 1This situation is caused by my likely crappy code above which concats a null value to an array in some cases.
Here's what I think happens in the transposeVtree function:
This technically-not-empty array passes the first check.
if (vTree.children && vTree.children.length > 0) {
return Rx.Observable.combineLatest(
vTree.children.map(transposeVTree).filter(x => !!x),Then when it gets mapped & filtered in the combineLatest, the filter strips the null value out, therefore making it an empty array. It's like a trojan horse, specially designed to break rendering.
I ended up fixing this by moving the vTree.children.map().filter() above the if statements. I did it on the ES5 transpiled code, but this should be equivalent in the es6 source.
} else if (typeof vTree === `object`) {
+ if (vTree.children) {
+ vTree.children = vTree.children.map(transposeVTree).filter(x => !!x)
+ }
if (vTree.children && vTree.children.length > 0) {
return Rx.Observable.combineLatest(
+ vTree.children,
(...children) => ({
sel: vTree.sel,
data: vTree.data,
text: vTree.text,
elm: vTree.elm,
key: vTree.key,
children,
})
)
}
return Rx.Observable.just(vTree)
Do you think this is an acceptable solution? I haven't run your test suite, but all of my personal examples seemed to work fine.
from cycle-snabbdom.
TylorS
commented on June 11, 2024
Thank you for the detailed report 😄
That seems to make plenty of sense, though I would hate to have to add a mutation (I will if necessary). In the big update I had to make some adjustments to h() regarding SVG, so I'm thinking I can probably find a way to simply filter null values from there. What do you think?
from cycle-snabbdom.
TylorS
commented on June 11, 2024
Release 1.0.2 to NPM. Thanks again!
from cycle-snabbdom.
SkaterDad
commented on June 11, 2024
@TylorS Another question (not really an issue, but I can't use Gitter right now).
Did you change how snabbdom is mounting to the page? I'd been using a clever trick (or so i thought) of making my root vnode the same as the HTML element snabbdom would overwrite. This made Hot Module Replacement simpler.
Now I'm seeing 'my' root vnode as a child of the original page's element.
I'll adjust my code as needed if this is the case. It certainly makes this driver more of a direct replacement for @cycle/dom.
<body>
<div class="app-container">
<div class="app-container">...</div>
</div>
.....
</body>
from cycle-snabbdom.
SkaterDad
commented on June 11, 2024
n/m. Found an issue with the makeVNodeWrapper function.
I'll submit a PR with changes and tests soon. It will be good practice for me since I've never written a test before.
from cycle-snabbdom.
TylorS
commented on June 11, 2024
Okay! Thank you :)
from cycle-snabbdom.
Related Issues (13)
- Any progress on the 'dirty hack' in Index.js? HOT 13
- Access snabbdom-to-html modules when using makeHTMLDriver HOT 1
- snabbdom-to-html should be a hard dependency
- Observable of vtrees inside a regular vtree HOT 4
- Cannot find module 'snabbdom-to-html' when installing from NPM HOT 24
- Silent failures with v1.1 HOT 13
- parseTree not handling null vTree HOT 18
- not receiving blur or focus events HOT 2
- Root element is replaced HOT 5
- Empty hyperscript helpers return undefined HOT 10
- Isolate bug? HOT 41
- can not make cycle-snabbdom runable with xstream HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from cycle-snabbdom.