Buoy for Solid

Buoy runs in Solid 1.9 apps built with Vite, as a beta. Your app stays all Solid. Buoy uses React for its own screens and brings it along. The full guide is the Solid page.

Install and sign in

Run these from your app folder:

npm install --save-dev @buoy-gg/core @buoy-gg/solid @buoy-gg/network
npx --package=@buoy-gg/core buoy login

Add more tools the same way. Use the same version for all Buoy packages. buoy login writes VITE_BUOY_KEY to a file Git ignores.

Set up

Add the Vite plugin:

// vite.config.ts
import solid from 'vite-plugin-solid';
import { buoy } from '@buoy-gg/core/vite';

export default defineConfig({ plugins: [solid(), buoy()] });

Put <Buoy /> in your router's root, inside QueryClientProvider:

import { Buoy } from '@buoy-gg/solid';

function Layout(props) {
  return (
    <>
      {props.children}
      <Buoy />
    </>
  );
}

<Router root={Layout}>...</Router>

That's all. The plugin finds your tools and adds the early hook. It leaves Buoy out of prod builds. <Buoy /> reads your key and starts Buoy after the first render. It links Solid Router and Solid Query when you have them. It stops Buoy when it goes away, so hot reload is safe.

Options

<Buoy /> takes the same props as mountBuoy from @buoy-gg/core/web, plus these:

startBuoy(options) starts Buoy with no component. It can't read Solid context, so pass queryClient yourself.

Solid stores and signals

import { buoySolidSignal, buoySolidStore } from '@buoy-gg/solid/store';

<Buoy zustandStores={{
  todos: buoySolidStore([todos, setTodos]),
  count: buoySolidSignal([count, setCount]),
}} />

They show in the Zustand tool. You can read and edit them there. An edit keeps the fields you did not change.

Entry points

Each entry has a buoy-disabled build that does nothing. The Vite plugin picks it for prod builds.