Altus•15mo ago

Fresh ClassList Broken

GitHub

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

AltusOP•15mo 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•15mo ago

Can you specify what your error is including stack trace and detailing what you were doing when things went awry?

king8fisher•15mo ago

You need a ref. It's React/Preact, not jQuery. There's eggs & chicken

AltusOP•15mo 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•15mo ago

https://preactjs.com/tutorial/05-refs/

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•15mo ago

I'm taking my words back. Check if class is defined It works in Tailwind but Twind may discover classes differently.

NDH•15mo 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•15mo 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•15mo ago

But he can't examine a Deno LS in an Island. He gets the Browsers LS which is empty.

king8fisher•15mo ago

Which part are you touching on, @Dun?

NDH•15mo 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•15mo 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•15mo 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>
  );
}

AltusOP•15mo 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•15mo 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\]")

AltusOP•15mo 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•15mo ago

your implementation is kinda nonstandard btw, so that could be why you had trouble

AltusOP•15mo ago

??? Why is it non-standard?

Lukas•15mo ago

again, still not sure what the main issue is but generally we don't use document.getbyid or classlist.add/remove

AltusOP•15mo ago

Why not classlist.add/remove? There is no other good way of doing this.

NDH•15mo 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.

AltusOP•15mo ago

??? Wtf.

Lukas•15mo ago

https://discord.com/channels/684898665143206084/991511118524715139/1156441693416063006

AltusOP•15mo 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•15mo ago

because the components are statically generated serverside, I belive it would always be red when you see it

Lukas•15mo ago

here's the example the docs uses

Lukas•15mo ago

I've been trying my best to follow this situation, but you haven't provided any meaningful code or use case

Lukas•15mo ago

https://xyproblem.info/

The XY Problem

Asking about your attempted solution rather than your actual problem

AltusOP•15mo 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.