D
Deno

help

Fresh ClassList Broken

AAltus9/26/2023
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...
AAltus9/26/2023
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.
Ccdoremus9/26/2023
Can you specify what your error is including stack trace and detailing what you were doing when things went awry?
Kking8fisher9/26/2023
You need a ref. It's React/Preact, not jQuery. There's eggs & chicken
AAltus9/26/2023
@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.
Kking8fisher9/26/2023
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
Kking8fisher9/26/2023
I'm taking my words back. Check if class is defined It works in Tailwind but Twind may discover classes differently.
ABAltair 680b9/26/2023
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!
Kking8fisher9/26/2023
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)
ABAltair 680b9/26/2023
But he can't examine a Deno LS in an Island. He gets the Browsers LS which is empty.
Kking8fisher9/26/2023
Which part are you touching on, @Dun?
ABAltair 680b9/26/2023
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
Kking8fisher9/26/2023
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
ABAltair 680b9/26/2023
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>
);
}
AAltus9/27/2023
@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.
EEsente9/27/2023
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\]")
AAltus9/27/2023
? 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.
LLukas9/27/2023
your implementation is kinda nonstandard btw, so that could be why you had trouble
AAltus9/27/2023
??? Why is it non-standard?
LLukas9/27/2023
again, still not sure what the main issue is but generally we don't use document.getbyid or classlist.add/remove
AAltus9/27/2023
Why not classlist.add/remove? There is no other good way of doing this.
ABAltair 680b9/27/2023
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.
AAltus9/27/2023
??? Wtf.
AAltus9/27/2023
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.
LLukas9/27/2023
because the components are statically generated serverside, I belive it would always be red when you see it
LLukas9/27/2023
here's the example the docs uses
No description
LLukas9/27/2023
I've been trying my best to follow this situation, but you haven't provided any meaningful code or use case
LLukas9/27/2023
The XY Problem
Asking about your attempted solution rather than your actual problem
AAltus9/27/2023
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.

Looking for more? Join the community!

Recommended Posts
Leave TLS connection open in between testsWhen I have 2 tests that use a database connection and attempt to close the connection `afterAll` thNvim tsserver clash with denolsI have read the docs and added a root_dir in my lua lsp file but for some reason tsserver still lanccircular type reference nonsensewhy does removing an array nest cause this to be a circular dependency?? shouldn't it be functionallGetting exports from an evaluated module with get_module_namespace always results in null valuesTrying to get module exports like the example [here](https://github.com/denoland/deno/pull/14026/fiIs there any way to define a signal inside a route component?Is there any way to define a signal inside a route component? I am trying to do it but an error raiDeno EmitHow come does `deno bundle` work a lot differently to Deno emit (https://deno.land/x/emit@0.28.0 )? `deno lsp` does not understand bare imports without prefixEven in minimal project, freshly created from a template, Deno marks imports as errors and doesn't uWhen I use crypto in this code, it returns 'Unknown cipher.'const secret ="**1111111111111111111**"; let encryptedText='test'; const decipher = crypto.cTroubleshooting deno.land downloadsI have docker containers, within a minikube cluster, that have trouble downloading https://deno.landRun remote Fresh application code locally.Is it possible to run a remotely hosted Fresh application? E.g. I'm attempting to do `deno run -A hmigrate from node to deno: p5js projectHi, I want to rewrite my p5js project built with nodejs in deno. Here is my code: https://github.coPeer dependencyCan I somehow mark a dependency as "peer"? So this dependency (which is known to shuffle typings bet'Spawn' multiple promises from the same moduleI'm trying to use Deno for scripted npcs in a game, the main issue that the npc has to await user acReturn results from execute_main_moduleI currently have this function to run some execute some js ``` pub async fn run(&self, path_to_Fresh Blog + Website Thingshttps://vuepress-theme-yuu.netlify.app/, what is the closest thing to that which can be run on FreshDetermine subcommandIf I run `deno test` from the command line, how can I determine that `test` is the subcommand being setting a cookie for import requestsis there a way to modify request headers or set cookies for the GET requests that deno makes when reHow to run tailwindcss cli with deno task?I would like to be able to run the tailwindcss cli tool to watch and build stylesheets as per their Deno DeployIs it possible to use only cronjobs on deno deploy?Deno cannot import mainfile by reading from package.jsondeno 1.36.0 (release, x86_64-unknown-linux-gnu) v8 11.6.189.12 typescript 5.1.6