client rendering for SS

[steady sand]

I have a svelte component which only works client side (uses canvas etc), how can I render it client side in an SSR app? I tried doing export const ssr = false for the component but that doesn't work

[plush rock]

Tried wrapping the initial canvas code in a onMount call?

[steady sand]

It already is, think I just need to move a library in to "noExternal"

const storedDarkMode = JSON.parse(localStorage.getItem('darkMode')) || false
if (storedDarkMode) document.documentElement.classList.add('dark')

let darkMode = $state(storedDarkMode)

export default {
    get darkMode() {
        return darkMode
    },

    toggle() {
        darkMode = !darkMode
        localStorage.setItem('darkMode', JSON.stringify(darkMode))
        document.documentElement.classList.toggle('dark')
    }
}

I know I'm supposed to write code like this on "onMount" but this is a global store, how could I tell vite something like this should only run on the client side?

[plush rock]

You may find this useful: https://vitejs.dev/guide/ssr#conditional-logic

I'm a Vue user, so VueUse is something I make use of, think bunch of prefabbed stores with useful functionality. They deal with it by instead checking for a browser like environment and acting differently on both ends of the SSR or client side relation.

[steady sand]

Sveltekit has a similar store was wondering if inertia had one, but the vite global is fine too

Cheers

[plush rock]

Yea, Inertia does not because it trys to let you leverage what your framework and it's ecosystem provides.

Anything Inertia does that's "extra" is kinda fat to the project if it's not needed for Inertia's own logic and would be better served by people who are experts in the framework anyway.