Fresh ClassList Broken

[heady zephyr]

https://github.com/

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.

[digital lintel]

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

[sweet relic]

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

[heady zephyr]

@digital lintel @sweet relic ???

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.

[sweet relic]

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

I'm taking my words back. Check if class is defined

It works in Tailwind but Twind may discover classes differently.

[tall gale]

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!

[sweet relic]

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)

[tall gale]

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

[sweet relic]

Which part are you touching on, @Dun?

[tall gale]

If you look at the project he linked, It has nothing todo with the problem he describes!
Looks like an unchanged fresh init project.

[tall gale]

I'm sorry! He changed the problem, example he was describing in #fresh message

[sweet relic]

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

[tall gale]

You're right. I'll but out. Good luck.

[tall gale]

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>
  );
}

[heady zephyr]

@tall gale This does not run on the browser?

Idk.

Anyways, my problem is not to do with my code.

[heady zephyr]

Yes.

The code works, if run from a onclick="...".

But otherwise, it kind of reverts the changes.

It is weird.

[latent palm]

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\]")

[heady zephyr]

?

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.

[quiet pewter]

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

[heady zephyr]

???

Why is it non-standard?

[quiet pewter]

again, still not sure what the main issue is

but generally we don't use document.getbyid or classlist.add/remove

[heady zephyr]

Why not classlist.add/remove?

There is no other good way of doing this.

[tall gale]

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.

[heady zephyr]

???

[heady zephyr]

Wtf.

[quiet pewter]

#fresh message

[heady zephyr]

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.

[quiet pewter]

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

here's the example the docs uses

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

https://xyproblem.info/

[heady zephyr]

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.