How can I include CSR-only functions with Fresh?

[HeavySnowJakarta]

Pls see the details at the stackoverflow page.

My question is, when I tried to include a function (which operates browser-specific objects like document) and ensure it to be rendered client-side only, it always claims that document is not available. Here is what I tried:

// Initialize the editor, run CSR-only after the DOM is loaded.

import { useEffect } from "https://esm.sh/v128/[email protected]/hooks/src/index.js";
import { IS_BROWSER } from "$fresh/runtime.ts";
import { init } from "../static/editor.js"

export default function Init() {
    if (!IS_BROWSER) {return <></>}

    useEffect(() => {
        if (IS_BROWSER){
            init()
        }
    })

    return <></>
}

and it claims

Task start deno run -A --watch=static/,routes/ dev.ts
Watcher Process started.
The manifest has been generated for 3 routes and 6 islands.
error: Uncaught (in promise) ReferenceError: document is not defined
    document.addEventListener('DOMContentLoaded', () => {
    ^
    at init (file:///path/to/project/static/editor.js:7:5)
    at file:///path/to/project/static/editor.js:38:1

    info: document global is not available in Deno.
    hint: Use a library like happy-dom, deno_dom, linkedom or JSDom
          and setup the document global according to the library documentation.
Watcher Process failed. Restarting on file change...

[CAYdenberg]

This is a general strategy, not specific instructions. It will take some trial and error.

When you import in this way, Deno (the server side runtime) is the first thing seeing editor.js and it will attempt to execute any top-level code in that module.

What you really want is to include a totally separate non-Deno script built for the browser specifically. If you can identify a pre-compiled bundle in a CDN somewhere, that'll save you some work. Or you can build your own (probably using Vite) and serve it via the static folder or another server that you host.

As for actually including the script, I don't know if a script tag will work in Preact's JSX, the other option is to inject a script tag in a useEffect with document.createElement and so on.