Foldkit 0.167.0

Foldkit 0.167.0 lets your server entry render the whole HTML page and adds a Node host adapter. It also improves VirtualList for chat and feeds, adds Update.foldChildAt for updating one Submodel selected by key, and moves existing browser Stream helpers into Dom.

SSR and SSG builds now render the whole HTML page from the server entry, replacing the separate index.html template. That includes the <html>, <head>, and <body> elements. Server.renderDocument supplies the default document, which you can customize with extra head content or a default language. Request-time rendering and prerendering use the same renderer.

The new @foldkit/node package hosts a built application on Node, serving its static assets and forwarding application requests to its Fetch handler. New SSR projects from create-foldkit-app use the adapter.

The server rendering guide covers document rendering, the Node adapter, and custom hosts. The SSR example shows the complete setup.

Thank you to @filipfalcon for proposing rendering the whole HTML page from the server entry and the Node adapter!

VirtualList now supports rows that change height and lists that follow appended content. A chat can stay at the bottom as new messages arrive, then preserve the reader's place when they scroll up or load older history.

Try appending messages at the bottom, then scroll up and append another. Click to expand a message and change its height, or load older messages above the viewport:

The VirtualList guide explains how this demo handles measured rows and older history.

Update.foldChildAt runs a child update for one Submodel selected by key. Define the fold once, then pass it the key and child Message. Here, the parent stores Applicant Submodels in an array, each with a stable entry ID:

import { Array, Option } from 'effect'
import { Update } from 'foldkit'
import { modifyFields } from 'foldkit/struct'

const foldApplicant = Update.foldChildAt({
  update: Applicant.update,
  readAt: (model: Model, entryId: string) =>
    Option.map(
      Array.findFirst(model.applicants, applicant => applicant.id === entryId),
      applicant => applicant.entry,
    ),
  writeAt: (model, entryId, nextEntry) =>
    modifyFields(model, {
      applicants: Array.map(applicant =>
        applicant.id === entryId
          ? modifyFields(applicant, { entry: () => nextEntry })
          : applicant,
      ),
    }),
  toParentMessage: (entryId, message) =>
    Message.GotApplicantMessage({ entryId, message }),
})

const update = (model: Model, message: Message) =>
  Message.match<Update.Return<Model, Message>>(message, {
    GotApplicantMessage: ({ entryId, message }) =>
      foldApplicant(model, entryId, message),
  })

readAt finds the child Model, writeAt stores the next one, and toParentMessage carries the key when lifting the child's Command results. If readAt returns None, the parent Model is unchanged.

This replaces a common pattern where each call to foldChild closes over an entry's key. The job-application example uses the new helper for education, work-history, and skills Submodels stored in arrays. The Submodels guide covers the fold and its OutMessage handling.

The Oxlint plugin also recognizes direct-field boundaries declared through foldChildAt and catches empty curried toParentOutMessage mappers.

Thank you to @armancharan for contributing the helper!

Browser event, media query, and key-binding Stream helpers move from Subscription to the Dom module. For example, Subscription.fromEvent becomes Dom.streamFromEvent, making its role as an Effect Stream constructor explicit.

Subscription entry helpers are also renamed to describe what they return:

• DevTools can copy Model, Message, Command, and Mount payloads as formatted JSON. The copied value includes collapsed fields, so you can share the whole payload without expanding the inspector tree.

• The Vite plugin applies its dependency and bundling rules in every environment, including named Cloudflare Worker environments. This fixes missing build IDs and duplicate runtime instances in those integrations.

Thank you to @filipfalcon for reporting and fixing the DevTools overlay and Vite environment issues!

See the full 0.167.0 release notes for all changes, package versions, and upgrade guidance.

Thanks to everyone building with Foldkit!

Devin