-
-
Notifications
You must be signed in to change notification settings - Fork 144
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
[rdom]: updating state inside a $replace that no longer has it's parent #410
Comments
maxsei
changed the title
rdom: replacing a $replace inside a $replace
[rdom]: replacing a $replace inside a $replace
Sep 7, 2023
maxsei
changed the title
[rdom]: replacing a $replace inside a $replace
[rdom]: updating state inside a $replace that no longer has it's parent
Sep 7, 2023
It turns out you can avoid this problem entirely by wrapping the componentlike's inside the import { defAtom } from "@thi.ng/atom";
import * as rx from "@thi.ng/rstream";
import * as tx from "@thi.ng/transducers";
import { ComponentLike } from "@thi.ng/rdom";
import { $compile, $replace } from "@thi.ng/rdom";
import { Fn0 } from "@thi.ng/api";
const root = document.getElementById("root");
if (!(root instanceof HTMLElement)) throw new Error("Root element not found");
const modal = defAtom<Fn0<ComponentLike>[]>([]);
const modalContainer = (body?: Fn0<ComponentLike>) =>
body && [
"div.absolute.absolute--fill.justify-center.items-center.flex.dn",
{ style: { "pointer-events": "none" } },
body(),
];
const rdom = $compile([
"div.relative.vh-100",
{},
$replace(
rx
.fromAtom(modal)
.subscribe(rx.trace("modal"))
.map((x) => modalContainer(x[0])),
),
[
"button",
{
onclick: () => {
const window_of_5_random_numbers = rx
.fromInterval(1000)
.transform(
tx.comp(
tx.map(() => parseFloat(Math.random().toFixed(3))),
tx.slidingWindow(5),
tx.map((xx) => ["div", {}, xx.join(", ")]),
),
)
.subscribe(rx.trace("window_of_5_random_numbers"));
const next = () => $replace(window_of_5_random_numbers);
modal.swap((prev) => [...prev, next]);
},
},
"Click Me to Push Random Numbers into the Modal",
],
[
"button",
{
onclick: () => {
modal.swap((prev) => {
prev.shift();
return [...prev];
});
},
},
"click me to pop modal",
],
]);
rdom.mount(root); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
It seems that continuously updating the state of a
$replace
component that has a$replace
inside of it causes the inner$replace
to get into an invalid state because the parent no longer exists. Is this intended behavior and/or misuse ofrdom
, or can this problem be solved within rdom itself?After clicking the "Click Me to Push Random Numbers into the Modal" twice in a row
The text was updated successfully, but these errors were encountered: