Altus
Altus10mo ago

Fresh ClassList Broken

GitHub
GitHub: Let’s build from here
GitHub is where over 100 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and fea...
29 Replies
Altus
Altus10mo ago
This is a basic recreation of my problem. This problem lost me 5 hours with no progress. This is worse because now I can't finish a project I needed to complete.
cdoremus
cdoremus10mo ago
Can you specify what your error is including stack trace and detailing what you were doing when things went awry?
king8fisher
king8fisher10mo ago
You need a ref. It's React/Preact, not jQuery. There's eggs & chicken
Altus
Altus10mo ago
@cdoremus @king8fisher ??? There is an island. It changes the classlist. But the classlist does not change. I can't find anything about it in the docs. The green div should be red but it is not. No error or anything. It is a weird problem.
king8fisher
king8fisher10mo ago
Refs – Preact Tutorial
As we learned in the first chapter, the DOM provides an imperative API, which lets us make changes by calling functions on elements. One example where we might need to access the imperative DOM API fr
king8fisher
king8fisher10mo ago
I'm taking my words back. Check if class is defined It works in Tailwind but Twind may discover classes differently.
NDH
NDH10mo ago
Green-div or Red-div is based on a LocalStorage value! And yet, I've seen nowhere that a LocalStorage value is being set in the Browser context (an Island). LocalStorage in Deno != LocalStorage in a Browser!
king8fisher
king8fisher10mo ago
I thought the problem is in islands/Testcomp.tsx localStorage indeed exists in Deno runtime separate from the browser which is cool (would require node-localstorage in pure Node, I think)
NDH
NDH10mo ago
But he can't examine a Deno LS in an Island. He gets the Browsers LS which is empty.
king8fisher
king8fisher10mo ago
Which part are you touching on, @Dun?
NDH
NDH10mo ago
If you look at the project he linked, It has nothing todo with the problem he describes! Looks like an unchanged fresh init project. I'm sorry! He changed the problem, example he was describing in https://discord.com/channels/684898665143206084/991511118524715139/1156300331848839328
king8fisher
king8fisher10mo ago
I think they are minimizing the issue, reproducing it in Testcomp.tsx, there's no localStorage involved. It basically works, it's just the classes that don't show up. As far as I understood
NDH
NDH10mo ago
You're right. I'll but out. Good luck.
export default function Testcomp() {

// first, create a dom-reference to a dummy element
const hiddenElementRef = useRef(null);

// on mount
useEffect(() => {
// I like to think of this as 'domContentLoaded'
if (hiddenElementRef.current) {
const hidiv = document.getElementById("hi") as HTMLElement;
hidiv.classList.remove("bg-[#86efac]")
hidiv.classList.add("bg-red-500")
},[]);

return (
<div>
<div id="hi" class="px-4 py-8 mx-auto bg-[#86efac]"></div>
<p ref={hiddenElementRef} hidden/>
</div>
);
}
export default function Testcomp() {

// first, create a dom-reference to a dummy element
const hiddenElementRef = useRef(null);

// on mount
useEffect(() => {
// I like to think of this as 'domContentLoaded'
if (hiddenElementRef.current) {
const hidiv = document.getElementById("hi") as HTMLElement;
hidiv.classList.remove("bg-[#86efac]")
hidiv.classList.add("bg-red-500")
},[]);

return (
<div>
<div id="hi" class="px-4 py-8 mx-auto bg-[#86efac]"></div>
<p ref={hiddenElementRef} hidden/>
</div>
);
}
Altus
Altus10mo ago
@Dun This does not run on the browser? Idk. Anyways, my problem is not to do with my code. Yes. The code works, if run from a onclick="...". But otherwise, it kind of reverts the changes. It is weird.
Esente
Esente10mo ago
I haven't looked at the repo, but from the code, I see a potential issue with removing the class of hidiv. They are using what is called arbitrary value in Tailwind land. But in JS, those square brackets may need to be escaped. hidiv.classList.remove("bg-\[#86efac\]")
Altus
Altus10mo ago
? Why? That probably won't work. That would both be a different class name, and not allowed because you can leave a useless non-backslashed backlash in your code. So it would probably error. Also, I found the fix. You need to add the function call is a useeffect function. I learnt that from lucky testing, it definetly was not clear.
Lukas
Lukas10mo ago
your implementation is kinda nonstandard btw, so that could be why you had trouble
Altus
Altus10mo ago
??? Why is it non-standard?
Lukas
Lukas10mo ago
again, still not sure what the main issue is but generally we don't use document.getbyid or classlist.add/remove
Altus
Altus10mo ago
Why not classlist.add/remove? There is no other good way of doing this.
NDH
NDH10mo ago
Member above is sus. Has a New discord account right after a member was banned. Using a brand new Github account https://github.com/Vanadium900 This Git name is simmilar to the banned member.
Altus
Altus10mo ago
??? Wtf.
Altus
Altus10mo ago
class={${IS_BROWSER ? "bg-red-500" : "bg-[#86efac]"} ... }? I have fixed it. But that is not good. Idk what you are trying to do? It will not run that code on the browser. I believe. So IS_BROWSER is useless.
Lukas
Lukas10mo ago
because the components are statically generated serverside, I belive it would always be red when you see it
Lukas
Lukas10mo ago
here's the example the docs uses
No description
Lukas
Lukas10mo ago
I've been trying my best to follow this situation, but you haven't provided any meaningful code or use case
Lukas
Lukas10mo ago
The XY Problem
Asking about your attempted solution rather than your actual problem
Altus
Altus10mo ago
It will be red, but it will be red on the server. So the other stuff is useless. + my problem is fixed mostly. I have another problem where KV is acting very weirdly, but that is different. Fresh uses a lot of requests lol.