create-foldkit-app 0.26.0 → 0.27.1

package/templates/rendering/ssg/src/main.ts

@@ -0,0 +1,176 @@
+import { Effect, Match as M, Schema as S, pipe } from 'effect'
+import { Command, Runtime } from 'foldkit'
+import { type Document, type Html, type HtmlBuilder } from 'foldkit/html'
+import { m } from 'foldkit/message'
+import { UrlRequest, load, pushUrl } from 'foldkit/navigation'
+import { evo } from 'foldkit/struct'
+import { Url, toString as urlToString } from 'foldkit/url'
+
+import { AppRoute, aboutRouter, homeRouter, urlToAppRoute } from './route'
+
+// MODEL
+
+export const Model = S.Struct({
+  route: AppRoute,
+  count: S.Number,
+})
+export type Model = typeof Model.Type
+
+// MESSAGE
+
+export const ClickedIncrement = m('ClickedIncrement')
+export const ClickedLink = m('ClickedLink', { request: UrlRequest })
+export const ChangedUrl = m('ChangedUrl', { url: Url })
+export const CompletedNavigateInternal = m('CompletedNavigateInternal')
+export const CompletedLoadExternal = m('CompletedLoadExternal')
+
+export const Message = S.Union([
+  ClickedIncrement,
+  ClickedLink,
+  ChangedUrl,
+  CompletedNavigateInternal,
+  CompletedLoadExternal,
+])
+export type Message = typeof Message.Type
+
+// INIT
+
+export const init: Runtime.RoutingApplicationInit<Model, Message> = url => [
+  { route: urlToAppRoute(url), count: 0 },
+  [],
+]
+
+// COMMAND
+
+const NavigateInternal = Command.define('NavigateInternal', {
+  args: { url: S.String },
+  messages: [CompletedNavigateInternal],
+  execute: ({ url }) =>
+    pushUrl(url).pipe(Effect.as(CompletedNavigateInternal())),
+})
+
+const LoadExternal = Command.define('LoadExternal', {
+  args: { href: S.String },
+  messages: [CompletedLoadExternal],
+  execute: ({ href }) => load(href).pipe(Effect.as(CompletedLoadExternal())),
+})
+
+// UPDATE
+
+type UpdateReturn = readonly [Model, ReadonlyArray<Command.Command<Message>>]
+const withUpdateReturn = M.withReturnType<UpdateReturn>()
+
+export const update = (model: Model, message: Message): UpdateReturn =>
+  M.value(message).pipe(
+    withUpdateReturn,
+    M.tagsExhaustive({
+      ClickedIncrement: () => [evo(model, { count: count => count + 1 }), []],
+      ClickedLink: ({ request }) =>
+        M.value(request).pipe(
+          withUpdateReturn,
+          M.tagsExhaustive({
+            Internal: ({ url }) => [
+              model,
+              [NavigateInternal({ url: urlToString(url) })],
+            ],
+            External: ({ href }) => [model, [LoadExternal({ href })]],
+          }),
+        ),
+      ChangedUrl: ({ url }) => [
+        evo(model, { route: () => urlToAppRoute(url) }),
+        [],
+      ],
+      CompletedNavigateInternal: () => [model, []],
+      CompletedLoadExternal: () => [model, []],
+    }),
+  )
+
+// VIEW
+
+const APP_NAME = 'Foldkit App'
+
+const appendAppName = (page: string): string => `${page} | ${APP_NAME}`
+
+const routeTitle = (route: AppRoute): string =>
+  pipe(
+    M.value(route),
+    M.tagsExhaustive({
+      Home: () => 'Home',
+      About: () => 'About',
+      NotFound: () => 'Not Found',
+    }),
+    appendAppName,
+  )
+
+const navigationView = (h: HtmlBuilder<Message>): Html =>
+  h.nav(
+    [h.Class('flex gap-4')],
+    [
+      h.a([h.Href(homeRouter()), h.Class('underline')], ['Home']),
+      h.a([h.Href(aboutRouter()), h.Class('underline')], ['About']),
+    ],
+  )
+
+const pageView = (model: Model, h: HtmlBuilder<Message>): Html =>
+  M.value(model.route).pipe(
+    M.tagsExhaustive({
+      Home: () =>
+        h.section(
+          [h.Class('grid gap-4')],
+          [
+            h.h1(
+              [h.Id('page-title'), h.Class('text-4xl font-bold')],
+              ['Statically generated home'],
+            ),
+            h.p(
+              [],
+              [
+                'This route was rendered during the build and hydrated in place.',
+              ],
+            ),
+            h.button(
+              [
+                h.OnClick(ClickedIncrement()),
+                h.Class('w-fit bg-black px-4 py-2 text-white'),
+              ],
+              [`Count: ${model.count}`],
+            ),
+          ],
+        ),
+      About: () =>
+        h.section(
+          [h.Class('grid gap-4')],
+          [
+            h.h1(
+              [h.Id('page-title'), h.Class('text-4xl font-bold')],
+              ['Statically generated about page'],
+            ),
+            h.p(
+              [],
+              [
+                'The same renderPage function produced this route in the same build.',
+              ],
+            ),
+          ],
+        ),
+      NotFound: ({ path }) =>
+        h.section(
+          [h.Class('grid gap-4')],
+          [
+            h.h1(
+              [h.Id('page-title'), h.Class('text-4xl font-bold')],
+              ['Not found'],
+            ),
+            h.p([], [`No statically generated page exists for ${path}.`]),
+          ],
+        ),
+    }),
+  )
+
+export const view = (model: Model, h: HtmlBuilder<Message>): Document => ({
+  title: routeTitle(model.route),
+  body: h.main(
+    [h.Class('mx-auto grid min-h-screen max-w-3xl content-center gap-10 p-8')],
+    [navigationView(h), pageView(model, h)],
+  ),
+})

package/templates/rendering/ssg/src/route.ts

@@ -0,0 +1,20 @@
+import { Schema as S, pipe } from 'effect'
+import { Route } from 'foldkit'
+import { literal, r } from 'foldkit/route'
+
+export const HomeRoute = r('Home')
+export const AboutRoute = r('About')
+export const NotFoundRoute = r('NotFound', { path: S.String })
+
+export const AppRoute = S.Union([HomeRoute, AboutRoute, NotFoundRoute])
+export type AppRoute = typeof AppRoute.Type
+
+export const homeRouter = pipe(Route.root, Route.mapTo(HomeRoute))
+export const aboutRouter = pipe(literal('about'), Route.mapTo(AboutRoute))
+
+const routeParser = Route.oneOf(aboutRouter, homeRouter)
+
+export const urlToAppRoute = Route.parseUrlWithFallback(
+  routeParser,
+  NotFoundRoute,
+)

package/templates/rendering/ssg/src/scene.test.ts

@@ -0,0 +1,27 @@
+import { click, expect, given, role, scene, text } from 'foldkit/scene'
+import { describe, test } from 'vitest'
+
+import { Model, update, view } from './main'
+import { HomeRoute } from './route'
+
+const initialModel = Model.make({ route: HomeRoute(), count: 0 })
+
+describe('view', () => {
+  test('renders the statically generated home page', () => {
+    scene(
+      { update, view },
+      given(initialModel),
+      expect(text('Statically generated home')).toExist(),
+      expect(role('button', { name: 'Count: 0' })).toExist(),
+    )
+  })
+
+  test('clicking the counter increments the count', () => {
+    scene(
+      { update, view },
+      given(initialModel),
+      click(role('button', { name: 'Count: 0' })),
+      expect(role('button', { name: 'Count: 1' })).toExist(),
+    )
+  })
+})

package/templates/rendering/ssg/src/vite-env.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="vite/client" />
+
+// `@foldkit/vite-plugin` compiles the deployment's build id in here, from its
+// `buildId` option or the `FOLDKIT_BUILD_ID` environment variable. The server
+// entry hands it to `renderToString` and the client entry to `Runtime.hydrate`,
+// which is how hydration tells a page from this deployment apart from one served
+// by another.
+//
+// Declared as required rather than optional because this project's build always
+// supplies one. A build that did not would produce `undefined` here, and both
+// entries refuse it at runtime; typing it as optional would only push that
+// failure past the compiler and into the served page.
+interface ImportMetaEnv {
+  readonly FOLDKIT_BUILD_ID: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

package/templates/rendering/ssg/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM"],
+    "moduleResolution": "bundler",
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "exactOptionalPropertyTypes": true,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "include": ["src/**/*", "scripts/**/*"]
+}

package/templates/rendering/ssg/vite.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from 'vite'
+
+import { foldkit } from '@foldkit/vite-plugin'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  plugins: [
+    tailwindcss(),
+    foldkit({
+      devToolsMcpPort: 9988,
+      ssr: { serverEntry: '/src/entry.server.ts' },
+    }),
+  ],
+  optimizeDeps: {
+    entries: ['src/entry.ts'],
+  },
+})

package/templates/rendering/ssr/README.md

@@ -0,0 +1,65 @@
+# My Foldkit App
+
+A server-rendered Foldkit application built with Effect.
+
+## Getting Started
+
+```bash
+{{installCommand}}
+{{devCommand}}
+```
+
+## Building and serving
+
+```bash
+{{buildCommand}}
+{{startCommand}}
+```
+
+The build script runs `scripts/build.mjs`, which builds the client bundle and the
+server bundle and gives both the same build id.
+
+`PORT` sets the port the server listens on. `ORIGIN` sets the public origin it
+serves, which the server entry sees as `Request.url`; set it when deploying
+behind a proxy or a TLS terminator. It defaults to `http://localhost:<PORT>`.
+
+## The build id
+
+The build id does not make hydration correct. It makes hydration refuse when it
+would otherwise be incorrect.
+
+The server stamps the id on the page, and the client bundle carries its own
+copy. Hydration compares the two before it reads the Flags payload or adopts
+DOM. When they differ, startup stops and the document body is marked `inert`,
+`aria-hidden`, and `data-foldkit-refused`. A nondismissable modal shield covers
+its controls and existing top-layer content, then takes focus without closing
+author-owned dialogs. Nothing moves, so no custom element reconnects and no
+frame reloads.
+
+Without that check, stale HTML from an earlier deployment can be hydrated by the
+newer client. Where the old markup happens to line up with the new markup,
+an input the old page called `email` can be adopted for whatever the new build
+puts in that position, carrying what the visitor typed into it.
+
+The comparison happens when a client boots against a page. A tab whose client
+is already running when a deployment lands is not rechecked.
+
+`scripts/build.mjs` takes care of this: it produces one id per build and passes
+it to both build commands. Supply `FOLDKIT_BUILD_ID` when the two commands run
+in separate jobs, or when you want the served id to name a deployment you can
+look up later:
+
+```bash
+FOLDKIT_BUILD_ID="$CI_DEPLOYMENT_ID" {{buildCommand}}
+```
+
+The id is public HTML and must never contain a secret or be derived from one.
+The client and server halves of one deployment must share an id. By contrast,
+two deployments must never share one. Reusing an id produces no warning: the
+ids agree, so hydration proceeds. When in doubt, leave `FOLDKIT_BUILD_ID` unset
+and let the build script generate one.
+
+## Learn More
+
+- [Foldkit Documentation](https://github.com/foldkit/foldkit)
+- [Effect Documentation](https://effect.website)

package/templates/rendering/ssr/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "{{name}}",
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "node scripts/build.mjs",
+    "start": "node dist/server/main.js",
+    "typecheck": "tsc --noEmit",
+    "format": "prettier -w .",
+    "test": "vitest run",
+    "lint": "oxlint src server scripts"
+  }
+}

package/templates/rendering/ssr/scripts/build.mjs

@@ -0,0 +1,36 @@
+import { spawnSync } from 'node:child_process'
+import { randomUUID } from 'node:crypto'
+
+// NOTE: one id names this build, and every command below is given that same
+// id, so the client bundle and the server bundle of a deployment agree on which
+// deployment they are. `renderToString` stamps it on the rendered root and
+// `Runtime.hydrate` compares it before adopting any DOM, so a page left over
+// from an earlier deployment is refused and contained rather than reconciled
+// against a client that no longer means the same thing by it.
+//
+// The id is published in the HTML every visitor receives. It identifies a
+// deployment and is never a credential, so keep secrets out of it. Set
+// FOLDKIT_BUILD_ID to name builds from a value the deployment already has, such
+// as a commit or a release tag; without one, each build takes a fresh id.
+// NOTE: `??` alone would take an empty FOLDKIT_BUILD_ID as a real value, and
+// the plugin treats empty as absent, so the build would compile no id at all and
+// fail later at the render. Empty is unset here too.
+const supplied = process.env.FOLDKIT_BUILD_ID
+const buildId =
+  supplied === undefined || supplied === '' ? randomUUID() : supplied
+
+const steps = [
+  ['vite', ['build', '--outDir', 'dist/client']],
+  ['vite', ['build', '--ssr', 'server/main.ts', '--outDir', 'dist/server']],
+]
+
+for (const [command, args] of steps) {
+  const { status } = spawnSync(command, args, {
+    stdio: 'inherit',
+    shell: process.platform === 'win32',
+    env: { ...process.env, FOLDKIT_BUILD_ID: buildId },
+  })
+  if (status !== 0) {
+    process.exit(status ?? 1)
+  }
+}

package/templates/rendering/ssr/server/main.ts

@@ -0,0 +1,205 @@
+import { Config, Effect, FileSystem, Layer, Match as M, Option } from 'effect'
+import {
+  Headers as HttpHeaders,
+  HttpServer,
+  HttpServerError,
+  HttpServerRequest,
+  HttpServerResponse,
+  HttpStaticServer,
+} from 'effect/unstable/http'
+import { Server } from 'foldkit/experimental'
+import { createServer } from 'node:http'
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+import {
+  NodeHttpPlatform,
+  NodeHttpServer,
+  NodeRuntime,
+  NodeServices,
+} from '@effect/platform-node'
+
+import { renderPage } from '../src/entry.server'
+
+const PROJECT_DIR = resolve(dirname(fileURLToPath(import.meta.url)), '../..')
+const CLIENT_DIR = resolve(PROJECT_DIR, 'dist/client')
+const DEFAULT_PORT = 3000
+
+const PORT = Config.withDefault(Config.port('PORT'), DEFAULT_PORT)
+
+// NOTE: the origin this deployment serves, which the entry sees as
+// `Request.url`. It is configuration, not something a request carries: a client
+// may send an absolute-form target, or a network-path reference such as
+// `//elsewhere.example/page`, and a `Host` header naming any site at all.
+// Deriving the origin from the request would let the client choose the
+// redirects, canonical URLs, and cookie domains the entry builds from it, so a
+// target that resolves anywhere but this origin is refused before it reaches
+// renderPage. Set ORIGIN to the public origin when deploying behind a proxy or
+// TLS terminator.
+const ORIGIN = Config.option(Config.string('ORIGIN'))
+
+const renderRequest = (
+  request: HttpServerRequest.HttpServerRequest,
+  template: string,
+  requestUrl: string,
+) =>
+  Effect.gen(function* () {
+    const webRequest = yield* HttpServerRequest.toWeb(request)
+    const result = yield* Effect.promise(() =>
+      renderPage(new Request(requestUrl, webRequest)),
+    )
+    return HttpServerResponse.fromWeb(Server.toResponse(template, result))
+  })
+
+// NOTE: every outcome a static miss negotiates declares both headers the
+// negotiation read. The same extensionless URL answers 404 to a script request
+// and HTML to a navigation, so declaring only one would let a shared cache
+// serve either response to the other kind of request.
+const withNegotiatedVary = (
+  response: HttpServerResponse.HttpServerResponse,
+): HttpServerResponse.HttpServerResponse =>
+  HttpServerResponse.setHeader(
+    response,
+    'vary',
+    Server.varyWith(
+      Server.varyWithAccept(
+        Option.getOrUndefined(HttpHeaders.get('vary')(response.headers)),
+      ),
+      'Sec-Fetch-Dest',
+    ),
+  )
+
+const isRouteNotFound = (error: HttpServerError.HttpServerError): boolean =>
+  error.reason._tag === 'RouteNotFound'
+
+type RequestKind = 'Render' | 'StaticOrRender' | 'HostSettled'
+
+// NOTE: one rule for every method, matching the Vite dev host so a form action
+// or a `Server.Responded` reply cannot work in development and fail only after
+// deployment. Static files answer GET and HEAD; every other request reaches the
+// server entry, which decides what to do with it. An entry that has no answer
+// for a method returns its own response rather than the host guessing one.
+//
+// `/` and `/index.html` (and the encoded paths that resolve to them) are
+// application requests even though a file exists for them: the file on disk is
+// the unfilled template, and serving it raw would hand the browser an unstamped
+// shell that Runtime.hydrate refuses.
+const requestKind = ({
+  method,
+  url,
+}: HttpServerRequest.HttpServerRequest): RequestKind =>
+  M.value(method).pipe(
+    M.withReturnType<RequestKind>(),
+    M.whenOr('GET', 'HEAD', () =>
+      Server.resolvesToIndexHtml(url) ? 'Render' : 'StaticOrRender',
+    ),
+    M.orElse(() =>
+      Server.isHostSettledMethod(method) ? 'HostSettled' : 'Render',
+    ),
+  )
+
+// NOTE: CONNECT, TRACE, and TRACK never reach the entry, in this host or under
+// Vite: the WHATWG `Request` constructor rejects them, so forwarding one answers
+// 500 instead of refusing. OPTIONS does reach the entry in both, which is where
+// a preflight is answered.
+const hostSettledResponse = () =>
+  HttpServerResponse.setHeader(
+    HttpServerResponse.empty({
+      status: Server.HOST_METHOD_ANSWERS.refusedStatus,
+    }),
+    'allow',
+    Server.HOST_METHOD_ANSWERS.allow,
+  )
+
+const makeHandler = Effect.gen(function* () {
+  const fs = yield* FileSystem.FileSystem
+  const port = yield* PORT
+  const origin = Option.getOrElse(
+    yield* ORIGIN,
+    () => `http://localhost:${port}`,
+  )
+  const template = yield* fs.readFileString(resolve(CLIENT_DIR, 'index.html'))
+  const staticFiles = yield* HttpStaticServer.make({
+    root: CLIENT_DIR,
+    index: undefined,
+  })
+
+  // NOTE: a static miss is Accept-negotiated because a deep link into a client
+  // route has no file on disk but an HTML client should still get the app
+  // shell. It renders, anything else 404s, and both carry Vary: Accept. A miss
+  // that names an asset never renders: browsers fetch scripts and stylesheets
+  // with `Accept: */*`, so a hashed asset from a previous deployment would
+  // otherwise be answered with the app shell at 200 and read as a blank page
+  // rather than the 404 it is. That refusal does not depend on Accept, so it
+  // carries no Vary.
+  const serveStaticOrRender = (
+    request: HttpServerRequest.HttpServerRequest,
+    requestUrl: string,
+  ) =>
+    staticFiles.pipe(
+      Effect.catchIf(isRouteNotFound, () =>
+        M.value(
+          Server.classifyRequest(
+            request.url,
+            request.headers['sec-fetch-dest'],
+          ),
+        ).pipe(
+          M.when('PathAsset', () =>
+            Effect.succeed(HttpServerResponse.empty({ status: 404 })),
+          ),
+          M.when('DestinationAsset', () =>
+            Effect.succeed(
+              withNegotiatedVary(HttpServerResponse.empty({ status: 404 })),
+            ),
+          ),
+          M.when('Page', () =>
+            Server.acceptsHtml(request.headers['accept'])
+              ? renderRequest(request, template, requestUrl).pipe(
+                  Effect.map(withNegotiatedVary),
+                )
+              : Effect.succeed(
+                  withNegotiatedVary(HttpServerResponse.empty({ status: 404 })),
+                ),
+          ),
+          M.exhaustive,
+        ),
+      ),
+    )
+
+  return HttpServerRequest.HttpServerRequest.use(request => {
+    const requestUrl = Server.resolveRequestUrl(request.url, origin)
+    if (requestUrl === undefined) {
+      return Effect.succeed(HttpServerResponse.empty({ status: 400 }))
+    }
+    const resolved = new URL(requestUrl)
+    const normalizedRequest = request.modify({
+      url: `${resolved.pathname}${resolved.search}`,
+    })
+    const response = M.value(requestKind(normalizedRequest)).pipe(
+      M.when('Render', () =>
+        renderRequest(normalizedRequest, template, requestUrl),
+      ),
+      M.when('StaticOrRender', () =>
+        serveStaticOrRender(normalizedRequest, requestUrl),
+      ),
+      M.when('HostSettled', () => Effect.succeed(hostSettledResponse())),
+      M.exhaustive,
+    )
+    return Effect.provideService(
+      response,
+      HttpServerRequest.HttpServerRequest,
+      normalizedRequest,
+    )
+  })
+})
+
+const Main = Layer.unwrap(
+  Effect.map(makeHandler, handler => HttpServer.serve(handler)),
+).pipe(
+  HttpServer.withLogAddress,
+  Layer.provide(NodeHttpServer.layerConfig(createServer, { port: PORT })),
+  Layer.provide(NodeHttpPlatform.layer),
+  Layer.provide(NodeServices.layer),
+)
+
+NodeRuntime.runMain(Layer.launch(Main))

package/templates/rendering/ssr/src/cookie.ts

@@ -0,0 +1,13 @@
+import { Number as Number_, Option, Record, pipe } from 'effect'
+import { Cookies } from 'effect/unstable/http'
+
+export const COUNT_COOKIE = 'count'
+
+export const readCountCookie = (cookieHeader: string): number =>
+  pipe(
+    Cookies.parseHeader(cookieHeader),
+    Record.get(COUNT_COOKIE),
+    Option.flatMap(Number_.parse),
+    Option.filter(Number.isSafeInteger),
+    Option.getOrElse(() => 0),
+  )

package/templates/rendering/ssr/src/entry.server.ts

@@ -0,0 +1,50 @@
+import { Effect } from 'effect'
+import { Server } from 'foldkit/experimental'
+
+import { readCountCookie } from './cookie'
+import { Flags, init, view } from './main'
+
+const flagsForRequest = (cookieHeader: string): Flags => ({
+  initialCount: readCountCookie(cookieHeader),
+  renderedAt: new Date().toISOString(),
+  renderedOn: 'Server',
+})
+
+// NOTE: the Flags built from this request are serialized into the rendered
+// HTML and travel to the browser with it. The hydrating client reads them
+// back and calls init with the exact values this render used; the client
+// computes no Flags of its own.
+// NOTE: a preflight reaches this entry in development and in production alike,
+// so an application's CORS policy goes here rather than in the host: it can
+// allow one origin for one route and refuse it for another. This answer allows
+// nothing and only reports which methods the host forwards.
+const preflightResponse = (): Response =>
+  new Response(null, {
+    status: 204,
+    headers: { allow: Server.HOST_METHOD_ANSWERS.allow },
+  })
+
+export const renderPage = (request: Request): Promise<Server.EntryResult> =>
+  Effect.runPromise(
+    Effect.gen(function* () {
+      if (request.method === 'OPTIONS') {
+        return Server.Responded(preflightResponse())
+      }
+
+      const renderedApplication = yield* Server.renderToString(
+        { Flags, init, view },
+        {
+          flags: flagsForRequest(request.headers.get('cookie') ?? ''),
+          buildId: import.meta.env.FOLDKIT_BUILD_ID,
+        },
+      )
+
+      return Server.Rendered(renderedApplication, {
+        headers: {
+          'cache-control': 'private, no-store',
+          vary: 'cookie',
+          'x-content-type-options': 'nosniff',
+        },
+      })
+    }),
+  )

package/templates/rendering/ssr/src/entry.ts

@@ -0,0 +1,17 @@
+import { Runtime } from 'foldkit'
+
+import { Flags, Message, Model, init, update, view } from './main'
+
+const application = Runtime.makeApplication({
+  Model,
+  Flags,
+  init,
+  update,
+  view,
+  container: document.getElementById('root'),
+  devTools: {
+    Message,
+  },
+})
+
+Runtime.hydrate(application, { buildId: import.meta.env.FOLDKIT_BUILD_ID })