Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Only last element renders when reusing #401

Closed
sidvishnoi opened this issue Sep 22, 2020 · 6 comments
Closed

Only last element renders when reusing #401

sidvishnoi opened this issue Sep 22, 2020 · 6 comments

Comments

@sidvishnoi
Copy link

sidvishnoi commented Sep 22, 2020

I maybe misunderstanding how hyperHTML works, but in the first case of the example below, only the last usage of icon is rendered. Does hyperHTML move the elements into the DOM instead of cloning them?

See minimal reproduction: https://codepen.io/sidvishnoi/pen/VwaqwzM

// Case 1:
const icon = hyperHTML`<em>🚫</em>`;
for (const num of [1, "2", "3 only last SVG is rendered"]) {
  const contents = [];
  contents.push(hyperHTML`<span>${icon} ${num}</span>`);
  // ... 
  document.getElementById("main1").append(hyperHTML`<h2>${contents}</h2>`);
}

// Case 2:
for (const num of [4, 5, 6]) {
  const icon = hyperHTML`<em></em>`;
  const contents = [];
  contents.push(hyperHTML`<span>${icon} ${num}</span>`);
  // ...
  document.getElementById("main2").append(hyperHTML`<h2>${contents}</h2>`);
}


console.log(document.getElementById("main1").innerHTML);
console.log(document.getElementById("main2").innerHTML);
@WebReflection
Copy link
Owner

have you tried to use wire?

const icon = hyperHTML.wire()`<em>🚫</em>`;
for (const num of [1, "2", "3 only last SVG is rendered"]) {
  const contents = [];
  contents.push(hyperHTML.wire()`<span>${icon} ${num}</span>`);
  // ... 
  document.getElementById("main1").append(hyperHTML`<h2>${contents}</h2>`);
}

@WebReflection
Copy link
Owner

WebReflection commented Sep 22, 2020

Actually ... wait a minute ... yes, hyperHTML optimize the hell out of everything, never cache content if you want to use it in multiple places ... it's also not necessary, nor faster, it's just error prone, due referenced content/nods that are of course moved around when cached, that's the point of caching.

Either wire content with different IDs, or simply create a new element within each loop, as you want a different element within each loop.

@sidvishnoi
Copy link
Author

That makes sense, though my intention of keeping the content out of the function was for clarity, instead of optimization. Thanks for clarifying!

@WebReflection
Copy link
Owner

if that's the intent, make it arrow?

const icon = () => hyperHTML`<em>🚫</em>`;
for (const num of [1, "2", "3 only last SVG is rendered"]) {
  const contents = [];
  contents.push(hyperHTML`<span>${icon()} ${num}</span>`);
  // ... 
  document.getElementById("main1").append(hyperHTML`<h2>${contents}</h2>`);
}

@sidvishnoi
Copy link
Author

sidvishnoi commented Sep 22, 2020

Appreciate the suggestion, though we went with cloneNode() instead.

@WebReflection
Copy link
Owner

free to do whatever you prefer, but the whole point of this library is that you don't need to use DOM APIs ... it's better to understand how these work, imho 👋

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants