Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
createElement called multiple times even when update always return false
See original GitHub issueThere is a decent chance I misunderstood the README, but I was expecting createElement only be called once if update always returned false, to make embedding of other DOM elements easier.
This doesn’t always seem to be the case when using multiple components. Here is a test-case:
// save as app.js
var html = require('nanohtml')
var morph = require('nanomorph')
var Button = require('./component.js')
var c1 = new Component('a')
var c2 = new Component('b')
var tick = 0
// render both 10 times
for (var i = 0; i < 10; i++) {
render(c1)
render(c2)
}
// some render function that just updates a counter
function render (c) {
const b = html`<body>
${c.render('hi:' + tick++)}
</body>`
morph(document.body, b)
}
// save as component.js
// This component is the one from the README in the section about mutable components.
// Modified to write out every time createElement is called.
var Nanocomponent = require('nanocomponent')
var html = require('nanohtml')
class Component extends Nanocomponent {
constructor () {
super()
this.text = ''
}
createElement (text) {
console.log('Calling createElement')
this.text = text
return html`<h1>${text}</h1>`
}
update (text) {
if (text !== this.text) {
this.text = text
this.element.innerText = this.text // Directly update the element
}
return false // Don't call createElement again
}
unload (text) {
console.log('No longer mounted on the DOM!')
}
}
module.exports = Component
Running the above app will result in 20 createElements being written out. If only one component is used then it’s only written out once. Is that working as expected? If so how would you embed a third party dom element.
For now we’ve published a fork of nanomorph that supports short circuiting “guarded” elements for this using https://github.com/hyperdivision/nanomorph/blob/master/index.js#L63 and https://github.com/hyperdivision/nanomorph-guard
Thanks for all the great stuff btw! 😃
Issue Analytics
- State:
- Created 5 years ago
- Comments:6 (5 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
Thanks @ungoldman, that explains the behaivor. I’d suggest we update the example in the README to be more clearer about this, https://github.com/choojs/nanocomponent#mutating-the-components-instead-of-re-rendering, to not confuse someone else 😃
Was wondering if you could use
npxto execute a bin from an arbitrary github repo… you can!