Looping onMount
Hey, I currently try to create an userscript and wanna use SolidJS, does anyone know why onMount keeps getting called and why productElems stays null?
const { default: html } = await import("https://esm.sh/solid-js@1.8.1/html");
const { render } = await import("https://esm.sh/solid-js@1.8.1/web");
const { onCleanup, createSignal, createEffect, createMemo, onMount, Show } = await import("https://esm.sh/solid-js@1.8.1");
GM_addStyle(`
.beb {
position: fixed;
bottom: 0;
right: 0;
width: 256px;
height: 256px;
z-index: 100;
background-color: white;
p {
font-size: 16px;
color: black;
}
}
`);
const App = () => {
const [productElems, setProductElems] = createSignal(null);
const productCount = () => productElems() ? productElems().length : null;
onMount(() => {
console.log(productElems());
setProductElems([...document.querySelectorAll(".product-list__list .product-item")]);
});
return html`
<p>Product count: ${productCount()}</p>
`;
}
const app = document.createElement("div");
app.classList.add("beb");
app.style = "";
document.body.appendChild(app);
render(() => App, app);const { default: html } = await import("https://esm.sh/solid-js@1.8.1/html");
const { render } = await import("https://esm.sh/solid-js@1.8.1/web");
const { onCleanup, createSignal, createEffect, createMemo, onMount, Show } = await import("https://esm.sh/solid-js@1.8.1");
GM_addStyle(`
.beb {
position: fixed;
bottom: 0;
right: 0;
width: 256px;
height: 256px;
z-index: 100;
background-color: white;
p {
font-size: 16px;
color: black;
}
}
`);
const App = () => {
const [productElems, setProductElems] = createSignal(null);
const productCount = () => productElems() ? productElems().length : null;
onMount(() => {
console.log(productElems());
setProductElems([...document.querySelectorAll(".product-list__list .product-item")]);
});
return html`
<p>Product count: ${productCount()}</p>
`;
}
const app = document.createElement("div");
app.classList.add("beb");
app.style = "";
document.body.appendChild(app);
render(() => App, app);
