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:

| Prop | What it does | |---|---| | routes | Your route config, so the Routes sitemap lists every page | | load | Loads app settings with Buoy. Use a dev check so prod drops the file | | modules | Your own tool list, in place of the plugin's | | enableInRelease | Starts Buoy in a release build too. Set buoy({ enableInRelease: true }) as well | | onMount | Called with the stop function once Buoy is up | | onDestroy | Called when Buoy stops |

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

| Import | Holds | |---|---| | @buoy-gg/solid | <Buoy />, startBuoy | | @buoy-gg/solid/register | The early hook. The Vite plugin adds it for you | | @buoy-gg/solid/router | connectBuoyRouter, for a router link by hand | | @buoy-gg/solid/store | buoySolidStore, buoySolidSignal | | @buoy-gg/solid/highlights | connectBuoyHighlights, for Highlight by hand |

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