redom: [BUG] setChildren with a element with children

Hi,

think i found another bug ; ). (Sorry for playing around with strange corner cases 😄).

The following code

const {
  mount,
  el,
  setChildren,
} = redom;

const myElem = el('div');
const mySelect = el('select', [
  el('option', { value: '1' }, 'one'),
  el('option', { value: '2' }, 'two'),
  el('option', { value: '3' }, 'three'),
]);
setChildren(myElem, mySelect);

mount(document.getElementById('app'), myElem);

results in this html:

<div>
  <select>
    <option value="2">two</option>
  </select>
  <option value="1">one</option>
  <option value="3">three</option>
</div>

JSFiddle to play with: Example

Am i doing something wrong ?

Cheers

Marc

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 23 (18 by maintainers)

Commits related to this issue

Added failing test for #102 — committed to redom/redom by pakastin 6 years ago

Most upvoted comments

For us the biggest reasons of using RE:DOM instead of major players are:

Performance
Memory-efficiency
Flexibility and control
Simplicity
Web standards

Virtual DOM used to be actually quite slow. It’s gotten faster, however there’s still long stack traces and in certain cases quite bad performance. Also the memory consumption is an issue with virtual DOM, since it creates the whole DOM tree twice (virtual DOM + DOM).

There’s also situations where virtual DOM don’t know how to update without setting key to every element. And if you want to customize the experience, it’s harder to do with templating. With RE:DOM you can just create and control regular HTML elements how you like and call it a day.

It’s also easier to debug issues, when the codebase is small and stack traces are short.

Our digital signage players for example need to run in low-powered and low-memory devices, where you need to drip every performance you can get out of your code. And transitions need to be controlled precisely so that there’s no hickups. I have custom requestAnimationFrame loops etc in place there, which might be quite hard to do with virtual dom.

Also everytime we want to include new web standards features (like web components), it’s possible with RE:DOM because you create just regular DOM elements. Also integrations with 3rd party libraries are really simple, since you don’t need to worry about virtual dom messing things up. Try using google maps with virtual dom for example, without google-map-react or similar…

pakastin on Jan 30, 2018

I would love to see more blog posts or videos about redom in real projects.

ghost on Jan 30, 2018

Oh, and with others I’ve had problematic dealing with templates. They are really restricting of what you can do. With RE:DOM there really is no limits because it’s all just web standards, you can even create games with it really easily.

pakastin on Jan 30, 2018

cool. At the moment i have a side project with redom. And im trying to convince my boss that we should use it in our next big project. So some “war stories” would really help.

ghost on Jan 30, 2018