flamethrower icon indicating copy to clipboard operation
flamethrower copied to clipboard

Counter Example

Open prowebat opened this issue 2 years ago • 2 comments

It would be great if to add the counter example. Obviously because flamethrower replaces the whole html body, the counter still gets reinitialized when navigating. So you need to save the state in the browser storage? i'm also thinking about a way to not recreate the counter instance in the dom, but rather replace everything around it.

prowebat avatar Aug 18 '22 16:08 prowebat

I think the example in the video of the counter would be outside the scope of the project as that has to do with how one chooses to implement such an island.

There could be some interesting ways to do the second concern (not persisting islands).

Maybe using a dataset property that provides a key.

Then in the new dom, could find elements with those keys, and if the old dom had an element with that key, you swap the old one into the new, though I'm not positive how that all works in the browser. If you swap a node out of the dom, but then back into the dom in the same tick, does it's state reset?

would it's own mount/unmount stuff swap?

ekwoka avatar Aug 23 '22 10:08 ekwoka

How would you implement it? There should be some general pointers on how to implement such behavior in the docs.

btw: i have a pull request with a possible solution: https://github.com/fireship-io/flamethrower/pull/54 this also preserves the state of the dom element (web component) and does not need any reinitialization.

prowebat avatar Aug 23 '22 17:08 prowebat