Is there a way to access the DOM on Fresh?

[rempas]

Is there a way to access the DOM on fresh? When it comes to Deno itself, there are solutions like deno-dom but seeing the example, I don't understand how to make it work with Fresh.

Are there better ways to do that? Should I do it at all?

[predaytor]

If you mean server-side (e.g parsing html) you can use ultrahtml package.
https://github.com/natemoo-re/ultrahtml/blob/main/test/selector.test.ts

[rempas]

If you mean server-side (e.g parsing html) you can use ultrahtml package. https://github.com/natemoo-re/ultrahtml/blob/main/test/selector.test.ts

Unfortunately, no. I want to be able to use it in the client. What I actually try to do is have a "toggle" that changes the mode from light to dark and dark to light.

[predaytor]

basically the jsx you are writing is DOM in itself (eg. a Virtual DOM), not sure what you are trying to archive..

[rempas]

basically the jsx you are writing is DOM in itself (eg. a Virtual DOM), not sure what you are trying to archive..

I'm trying to get the element and change its class, in a function. I'm not aware if that's possible through jsx. More specifically, I try to create this

[rschristian]

This doesn't have much to do with VDOM or JSX, just how components are built in (p)react.

Depends a bit on whether your click target is a component or not, but here's a super simple example of a toggle button component matching that doc:

function toggleDataTheme() {
    const theme = document.documentElement.getAttribute('data-theme');
    document.documentElement.setAttribute('data-theme', theme === 'dark' ? 'light' : 'dark');
}

function MyToggleButton() {
    return <button onClick={toggleDataTheme}>My Toggle Button</button>;
}

You can use bog-standard DOM queries in components, but it's important to know that islands, when server-side rendered, don't have access to the DOM. document would be undefined. Shouldn't be an issue putting it in a function like this, however.

[rempas]

This doesn't have much to do with VDOM or JSX, just how components are built in (p)react.

Depends a bit on whether your click target is a component or not, but here's a super simple example of a toggle button component matching that doc:

function toggleDataTheme() {
    const theme = document.documentElement.getAttribute('data-theme');
    document.documentElement.setAttribute('data-theme', theme === 'dark' ? 'light' : 'dark');
}

function MyToggleButton() {
    return <button onClick={toggleDataTheme}>My Toggle Button</button>;
}

You can use bog-standard DOM queries in components, but it's important to know that islands, when server-side rendered, don't have access to the DOM. document would be undefined. Shouldn't be an issue putting it in a function like this, however.

Thank you for the information! I was just coming to close this thread and say that I was able to achieve what I want with useRef, and I'm just "finalizing" it and trying to make it fully work as I want it.

Thank you all and have a beutiful day!

[rschristian]

Ah yep, if you render the element you want to manipulate like this, useRef is a much better choice.

Glad you found something that worked!

[rempas]

Ah yep, if you render the element you want to manipulate like this, useRef is a much better choice.

Glad you found something that worked!

useRef, in addition with useEffect actually makes it so document is never needed. I just found out today, and it actually makes so much sense.

[rschristian]

Tiny caveat, it's only not needed if you're targeting an element that Preact renders. If you want to target document.documentElement, as your original tutorial linked to, you still need document. Some events too you'll want to attach that way.