inconsistent or duplicate elements rendered when using preact standalone version #159

catdad · 2020-03-15T21:46:59Z

I created a small repro demo that I set up in two ways:

using preact@10.3.4 with htm@3.0.3
using only htm@3.0.3 with the preact standalone version of the module

Code:

//import { html, render } from 'https://cdn.jsdelivr.net/npm/htm@3.0.3/preact/standalone.module.js';
//import { Fragment } from 'https://cdn.jsdelivr.net/npm/preact@10.3.4/dist/preact.module.js';

import { h, render, Fragment } from 'https://cdn.jsdelivr.net/npm/preact@10.3.4/dist/preact.module.js';
import htm from 'https://cdn.jsdelivr.net/npm/htm@3.0.3/dist/htm.module.js';
const html = htm.bind(h);

const elem = document.querySelector("#app");

const Item = (item) => {
	return html`
  	<div key=${item.id} data-id=${item.id}>
      ${item.text}
    </div>`;
};

const items = [{id: 1, text: 'one'}, { id: 2, text:'two' }];

const performRender = () => {
  const children = items.map(item => html`<${Item} ...${item} />`);
  render(html`<${Fragment}>${children.reverse()}<//>`, elem);
};

setTimeout(() => {
  items.push({ id: 3, text: 'three'});
  performRender();
}, 1000);

setTimeout(() => {
  items.push({ id: 4, text: 'four'});
  performRender();
}, 2000);

window.onload = performRender;

Fiddle for reference: https://jsfiddle.net/0ukweoz1/2/

Results:

when using preact with htm, the final version renders as:

four
three
two
one

using htm preact standalone, the final version renders as:

four
three
two
one
one

note that also, the render after 1 second does not actually update the DOM, so three is never just added by itself

developit · 2020-04-02T17:24:30Z

Hi @catdad - this happens because you are using two copies of Preact - Fragment from one, and render() from another. Preact is a singleton and using two copies of it will cause all sorts of strange problems like this, in addition to just downloading preact twice.

Some context - the reason we don't export Fragment from htm/preact/standalone is because it should never be necessary when using HTM, since HTM supports implicit fragments.

However: it looks like the copy of Preact we bundled with htm 3.0.3 has a bug with fragments at the root, or our bundling is breaking something. That's a bug.

Here's your demo without the Fragment usage:

// should work, but seems to have an issue with bundled preact and fragments:
//import { html, render } from 'https://cdn.jsdelivr.net/npm/htm@3.0.3/preact/standalone.module.js';

import { h, render } from 'https://cdn.jsdelivr.net/npm/preact@10.3.4/dist/preact.module.js';
import htm from 'https://cdn.jsdelivr.net/npm/htm@3.0.3/dist/htm.module.js';
const html = htm.bind(h);

const elem = document.querySelector("#app");

const Item = (item) => {
	return html`
  	<div key=${item.id} data-id=${item.id}>
      ${item.text}
    </div>`;
};

const items = [{id: 1, text: 'one'}, { id: 2, text:'two' }];

const performRender = () => {
  const children = items.map(item => html`<${Item} ...${item} />`);
  render(html`${children.reverse()}`, elem);
};

setTimeout(() => {
  items.push({ id: 3, text: 'three'});
  performRender();
}, 1000);

setTimeout(() => {
  items.push({ id: 4, text: 'four'});
  performRender();
}, 2000);

window.onload = performRender;

Fix render() in standalone build (fixes #159)

developit · 2020-04-15T16:42:57Z

This has been fixed! It's available on unpkg and npm as htm 3.0.4.

developit mentioned this issue Apr 15, 2020

Fix render() in standalone build (fixes #159) #163

Merged

developit closed this in #163 Apr 15, 2020

Oct	NOV	Dec
	21
2019	2020	2021

developit / htm

inconsistent or duplicate elements rendered when using preact standalone version #159

inconsistent or duplicate elements rendered when using preact standalone version #159

catdad commented Mar 15, 2020 •

edited

developit commented Apr 2, 2020

developit commented Apr 15, 2020

developit / htm

Join GitHub today

GitHub is where the world builds software

inconsistent or duplicate elements rendered when using preact standalone version #159

inconsistent or duplicate elements rendered when using preact standalone version #159

Comments

catdad commented Mar 15, 2020 • edited

developit commented Apr 2, 2020

developit commented Apr 15, 2020

Essential cookies

Always active

Analytics cookies

catdad commented Mar 15, 2020 •

edited