How to create a global context in Fresh Deno?

I want to create a global instance of GunDB so that it only initializes once on the client side and I could then use it on any island.

I tried in index.tsx to simply add const gun = Gun() and send props to the island, the only problem is that then the island component does not see the Gun instance, which is normal because the Gun instance is initialized on the server side and not the client side.

In theory, it only needs a global context on the client side. Something like createContext() in react.

Solution

Fresh v1.1 adds Preact Signals support.

Preact Signals:

Signals are a way of expressing state that ensure apps stay fast regardless of how complex they get. Signals are based on reactive principles and provide excellent developer ergonomics, with a unique implementation optimized for Virtual DOM.

…
// Imagine this is some global state that the whole app needs access to:
const count = signal(0);

function Counter() {
 return (
   <button onClick={() => count.value++}>
     Value: {count.value}
   </button>
 );
}

You can create a module that exports a signal for your global Gun instance:

import { signal } from "@preact/signals";

export default signal(Gun());

Then you can import this in any interactive island module to use it both server-side and client-side:

import gun from "./path/to/gun.ts";