Adapters

Browser

@stone-js/browser-adapter makes the browser a context like any other. It captures browser causes, a navigation, a load, and drives the app client-side. Paired with use-react it powers SPAs, and stacked with a server adapter it hydrates SSR.

#Install & enable

terminalbash

npm i @stone-js/browser-adapter @stone-js/use-react

app/Application.tsdeclarativeimperative

import { StoneApp } from '@stone-js/core'
import { Routing } from '@stone-js/router'
import { UseReact } from '@stone-js/use-react'
import { Browser } from '@stone-js/browser-adapter'

@Browser()   // run in the browser
@UseReact()
@Routing()
@StoneApp({ name: 'tasks-ui' })
export class Application {}
import { defineStoneApp } from '@stone-js/core'
import { routerBlueprint } from '@stone-js/router'
import { useReactBlueprint } from '@stone-js/use-react'
import { browserAdapterBlueprint } from '@stone-js/browser-adapter'

export const App = defineStoneApp(
  { name: 'tasks-ui' },
  [routerBlueprint, useReactBlueprint, browserAdapterBlueprint]
)

#SPA and hydration

Alone, the Browser adapter renders a pure client app (CSR). Stacked with a server or edge adapter, it hydrates the server-rendered HTML: the server context resolves the first paint, the browser context takes over. The rendering page covers the strategies in full.

Option	Type	Description
rendering: csr	`browser only`	A pure SPA; the Browser adapter renders everything.
rendering: ssr + Browser	`server + browser`	Server render, then the Browser adapter hydrates.
rendering: ssg + Browser	`build + browser`	Static HTML, then hydrated on load.

#Browser primitives

The adapter builds on @stone-js/browser-core, the browser's runtime-agnostic event and response model, the counterpart of http-core on the server. You rarely touch it directly (pages and the event accessor cover day-to-day work), but it is what makes a browser navigation just another normalised intention.

browser-core	Type	Description
IncomingBrowserEvent	`event`	A browser cause (navigation, load) as an intention your pages read with event.get().
OutgoingBrowserResponse	`response`	The browser-side response the view is rendered from.
RedirectBrowserResponse	`response`	A client-side redirect.
Cookie / CookieCollection	`cookies`	Cookie access in the browser context.

#Deploy

A CSR or SSG build is static assets: deploy dist/ to any static host or CDN. An SSR build pairs these client assets with the server/edge adapter you stacked, deployed as that adapter dictates.

terminalbash

npm run build     # client bundle (+ static HTML for SSG)
npm run preview   # serve it locally