create-foldkit-app 0.38.0 → 0.39.0

package/dist/templates/examples/ui-showcase/src/ui/view/textarea.ts

@@ -15,6 +15,36 @@ const descriptionClassName = 'text-sm text-gray-500'
 
 export const view = Submodel.defineView<UiModel, UiMessage>(
   (model, h): Html => {
+    const basicTextareaView = (
+      attributes: Textarea.TextareaAttributes<UiMessage>,
+    ): Html =>
+      h.div(
+        [h.Class('flex flex-col gap-1.5 w-full')],
+        [
+          h.label([...attributes.label, h.Class(labelClassName)], ['Bio']),
+          h.textarea([...attributes.textarea, h.Class(textareaClassName)]),
+          h.span(
+            [...attributes.description, h.Class(descriptionClassName)],
+            ['A brief introduction about yourself.'],
+          ),
+        ],
+      )
+
+    const disabledTextareaView = (
+      attributes: Textarea.TextareaAttributes<UiMessage>,
+    ): Html =>
+      h.div(
+        [h.Class('flex flex-col gap-1.5 max-w-sm')],
+        [
+          h.label([...attributes.label, h.Class(labelClassName)], ['Bio']),
+          h.textarea([...attributes.textarea, h.Class(textareaClassName)]),
+          h.span(
+            [...attributes.description, h.Class(descriptionClassName)],
+            ['This textarea is disabled.'],
+          ),
+        ],
+      )
+
     return h.div(
       [],
       [
@@ -35,27 +65,7 @@ export const view = Submodel.defineView<UiModel, UiMessage>(
                 onInput: value => UiMessage.UpdatedTextareaDemoValue({ value }),
                 placeholder: 'Tell us about yourself...',
                 rows: 4,
-                toView: attributes =>
-                  h.div(
-                    [h.Class('flex flex-col gap-1.5 w-full')],
-                    [
-                      h.label(
-                        [...attributes.label, h.Class(labelClassName)],
-                        ['Bio'],
-                      ),
-                      h.textarea([
-                        ...attributes.textarea,
-                        h.Class(textareaClassName),
-                      ]),
-                      h.span(
-                        [
-                          ...attributes.description,
-                          h.Class(descriptionClassName),
-                        ],
-                        ['A brief introduction about yourself.'],
-                      ),
-                    ],
-                  ),
+                toView: basicTextareaView,
               },
               h,
             ),
@@ -74,24 +84,7 @@ export const view = Submodel.defineView<UiModel, UiMessage>(
             value:
               "Mathematician and writer, known for work on Charles Babbage's Analytical Engine.",
             rows: 3,
-            toView: attributes =>
-              h.div(
-                [h.Class('flex flex-col gap-1.5 max-w-sm')],
-                [
-                  h.label(
-                    [...attributes.label, h.Class(labelClassName)],
-                    ['Bio'],
-                  ),
-                  h.textarea([
-                    ...attributes.textarea,
-                    h.Class(textareaClassName),
-                  ]),
-                  h.span(
-                    [...attributes.description, h.Class(descriptionClassName)],
-                    ['This textarea is disabled.'],
-                  ),
-                ],
-              ),
+            toView: disabledTextareaView,
           },
           h,
         ),

package/dist/templates/examples/ui-showcase/src/ui/view/tooltip.ts

@@ -23,6 +23,52 @@ const TOOLTIP_ANCHOR: AnchorConfig = {
 
 export const view = Submodel.defineView<UiModel, UiMessage>(
   (model, h): Html => {
+    const basicTooltipView = ({
+      trigger,
+      panel,
+      isVisible,
+    }: Tooltip.RenderInfo): Html =>
+      h.div(
+        [h.Class(wrapperClassName)],
+        [
+          h.button(
+            [...trigger, h.Class(triggerClassName)],
+            [h.span([], ['Hover or focus me'])],
+          ),
+          ...(isVisible
+            ? [
+                h.div(
+                  [...panel, h.Class(panelClassName)],
+                  [h.span([], ['This is a tooltip'])],
+                ),
+              ]
+            : []),
+        ],
+      )
+
+    const noDelayTooltipView = ({
+      trigger,
+      panel,
+      isVisible,
+    }: Tooltip.RenderInfo): Html =>
+      h.div(
+        [h.Class(wrapperClassName)],
+        [
+          h.button(
+            [...trigger, h.Class(triggerClassName)],
+            [h.span([], ['No delay'])],
+          ),
+          ...(isVisible
+            ? [
+                h.div(
+                  [...panel, h.Class(panelClassName)],
+                  [h.span([], ['Shows immediately'])],
+                ),
+              ]
+            : []),
+        ],
+      )
+
     return h.div(
       [],
       [
@@ -48,24 +94,7 @@ export const view = Submodel.defineView<UiModel, UiMessage>(
               view: Tooltip.view,
               viewInputs: {
                 anchor: TOOLTIP_ANCHOR,
-                toView: ({ trigger, panel, isVisible }) =>
-                  h.div(
-                    [h.Class(wrapperClassName)],
-                    [
-                      h.button(
-                        [...trigger, h.Class(triggerClassName)],
-                        [h.span([], ['Hover or focus me'])],
-                      ),
-                      ...(isVisible
-                        ? [
-                            h.div(
-                              [...panel, h.Class(panelClassName)],
-                              [h.span([], ['This is a tooltip'])],
-                            ),
-                          ]
-                        : []),
-                    ],
-                  ),
+                toView: basicTooltipView,
               },
               toParentMessage: message =>
                 UiMessage.GotTooltipBasicDemoMessage({ message }),
@@ -93,24 +122,7 @@ export const view = Submodel.defineView<UiModel, UiMessage>(
               view: Tooltip.view,
               viewInputs: {
                 anchor: TOOLTIP_ANCHOR,
-                toView: ({ trigger, panel, isVisible }) =>
-                  h.div(
-                    [h.Class(wrapperClassName)],
-                    [
-                      h.button(
-                        [...trigger, h.Class(triggerClassName)],
-                        [h.span([], ['No delay'])],
-                      ),
-                      ...(isVisible
-                        ? [
-                            h.div(
-                              [...panel, h.Class(panelClassName)],
-                              [h.span([], ['Shows immediately'])],
-                            ),
-                          ]
-                        : []),
-                    ],
-                  ),
+                toView: noDelayTooltipView,
               },
               toParentMessage: message =>
                 UiMessage.GotTooltipNoDelayDemoMessage({ message }),

package/dist/templates/examples/websocket-chat/src/main.ts

@@ -64,9 +64,12 @@ export type Model = typeof Model.Type
 
 export const Message = defineMessageUnion({
   ClickedConnect: {},
-  Connected: {},
-  Disconnected: {},
-  FailedConnect: { error: Schema.String },
+  ConnectedChatSocket: {},
+  DisconnectedChatSocket: {},
+  ReleasedChatSocket: {},
+  FailedConnectChatSocket: { error: Schema.String },
+  FailedChatSocket: { error: Schema.String },
+  FailedSendMessage: { error: Schema.String },
   UpdatedMessageInput: { value: Schema.String },
   SubmittedMessage: {},
   SucceededSendMessage: { text: Schema.String },
@@ -92,20 +95,34 @@ export const update = (model: Model, message: Message) =>
       }),
     }),
 
-    Connected: () => ({
+    ConnectedChatSocket: () => ({
       model: modifyFields(model, {
         connection: () => ConnectionState.Connected(),
       }),
     }),
 
-    Disconnected: () => ({
+    DisconnectedChatSocket: () => ({
       model: modifyFields(model, {
         connection: () => ConnectionState.Disconnected(),
         messages: () => [],
       }),
     }),
 
-    FailedConnect: ({ error }) => ({
+    ReleasedChatSocket: () => ({ model }),
+
+    FailedConnectChatSocket: ({ error }) => ({
+      model: modifyFields(model, {
+        connection: () => ConnectionState.Error({ error }),
+      }),
+    }),
+
+    FailedChatSocket: ({ error }) => ({
+      model: modifyFields(model, {
+        connection: () => ConnectionState.Error({ error }),
+      }),
+    }),
+
+    FailedSendMessage: ({ error }) => ({
       model: modifyFields(model, {
         connection: () => ConnectionState.Error({ error }),
       }),
@@ -196,17 +213,26 @@ export const TimestampReceivedMessage = Command.define(
 
 export const SendMessage = Command.define('SendMessage', {
   args: { text: Schema.String },
-  messages: [Message.SucceededSendMessage, Message.FailedConnect],
+  messages: [Message.SucceededSendMessage, Message.FailedSendMessage],
   execute: ({ text }) =>
     ChatSocket.get.pipe(
       Effect.flatMap(socket =>
-        Effect.sync(() => {
-          socket.send(text)
-          return Message.SucceededSendMessage({ text })
+        Effect.try({
+          try: () => {
+            socket.send(text)
+            return Message.SucceededSendMessage({ text })
+          },
+          catch: error =>
+            error instanceof Error ? error.message : 'Failed to send message',
         }),
       ),
       Effect.catchTag('ResourceNotAvailable', () =>
-        Effect.succeed(Message.FailedConnect({ error: 'Socket unavailable' })),
+        Effect.succeed(
+          Message.FailedSendMessage({ error: 'Socket unavailable' }),
+        ),
+      ),
+      Effect.catch(error =>
+        Effect.succeed(Message.FailedSendMessage({ error })),
       ),
     ),
 })
@@ -254,10 +280,10 @@ export const managedResources = ManagedResource.make<Model, Message>()(
         Effect.sync(() => {
           socket.close()
         }),
-      onAcquired: () => Message.Connected(),
-      onReleased: () => Message.Disconnected(),
+      onAcquired: () => Message.ConnectedChatSocket(),
+      onReleased: () => Message.ReleasedChatSocket(),
       onAcquireError: error =>
-        Message.FailedConnect({
+        Message.FailedConnectChatSocket({
           error: error instanceof Error ? error.message : 'Unknown error',
         }),
     }),
@@ -269,8 +295,8 @@ export const managedResources = ManagedResource.make<Model, Message>()(
 const streamChatSocketMessages = (socket: WebSocket) =>
   Stream.callback<
     | typeof Message.ReceivedMessage.Type
-    | typeof Message.Disconnected.Type
-    | typeof Message.FailedConnect.Type
+    | typeof Message.DisconnectedChatSocket.Type
+    | typeof Message.FailedChatSocket.Type
   >(queue =>
     Effect.acquireRelease(
       Effect.sync(() => {
@@ -281,13 +307,13 @@ const streamChatSocketMessages = (socket: WebSocket) =>
           )
         }
         const handleClose = () => {
-          Queue.offerUnsafe(queue, Message.Disconnected())
+          Queue.offerUnsafe(queue, Message.DisconnectedChatSocket())
           Queue.endUnsafe(queue)
         }
         const handleError = () => {
           Queue.offerUnsafe(
             queue,
-            Message.FailedConnect({ error: 'Connection error' }),
+            Message.FailedChatSocket({ error: 'Connection error' }),
           )
           Queue.endUnsafe(queue)
         }

package/dist/templates/examples/websocket-chat/src/story.test.ts

@@ -38,7 +38,7 @@ describe('update', () => {
       )
     })
 
-    test('Connected moves into Connected', () => {
+    test('ConnectedChatSocket moves into Connected', () => {
       story(
         update,
         given(
@@ -46,14 +46,14 @@ describe('update', () => {
             connection: () => ConnectionState.Connecting(),
           }),
         ),
-        message(Message.Connected()),
+        message(Message.ConnectedChatSocket()),
         model(model => {
           expect(model.connection._tag).toBe('Connected')
         }),
       )
     })
 
-    test('Disconnected returns to Disconnected and clears messages', () => {
+    test('DisconnectedChatSocket returns to Disconnected and clears messages', () => {
       story(
         update,
         given(
@@ -61,7 +61,7 @@ describe('update', () => {
             messages: () => [{ text: 'old', zoned: zonedNow, isSent: true }],
           }),
         ),
-        message(Message.Disconnected()),
+        message(Message.DisconnectedChatSocket()),
         model(model => {
           expect(model.connection._tag).toBe('Disconnected')
           expect(model.messages).toHaveLength(0)
@@ -69,7 +69,7 @@ describe('update', () => {
       )
     })
 
-    test('FailedConnect captures the error message', () => {
+    test('FailedConnectChatSocket captures the error message', () => {
       story(
         update,
         given(
@@ -77,7 +77,7 @@ describe('update', () => {
             connection: () => ConnectionState.Connecting(),
           }),
         ),
-        message(Message.FailedConnect({ error: 'Timeout' })),
+        message(Message.FailedConnectChatSocket({ error: 'Timeout' })),
         model(model => {
           if (model.connection._tag === 'Error') {
             expect(model.connection.error).toBe('Timeout')
@@ -87,6 +87,33 @@ describe('update', () => {
         }),
       )
     })
+
+    test('releasing the socket preserves a connection error', () => {
+      story(
+        update,
+        given(connectedModel),
+        message(Message.FailedChatSocket({ error: 'Connection error' })),
+        message(Message.ReleasedChatSocket()),
+        model(model => {
+          expect(model.connection).toEqual(
+            ConnectionState.Error({ error: 'Connection error' }),
+          )
+        }),
+      )
+    })
+
+    test('FailedSendMessage reports an unavailable socket', () => {
+      story(
+        update,
+        given(connectedModel),
+        message(Message.FailedSendMessage({ error: 'Socket unavailable' })),
+        model(model => {
+          expect(model.connection).toEqual(
+            ConnectionState.Error({ error: 'Socket unavailable' }),
+          )
+        }),
+      )
+    })
   })
 
   describe('message input', () => {

package/dist/templates/release.json

@@ -1,22 +1,23 @@
 {
   "schemaVersion": 1,
   "channel": "stable",
-  "sourceCommit": "7590156835c822a0aa135a5fde14c8e2009c9124",
+  "sourceCommit": "74071173b1253e9efeec050a31ca86df1931ce5a",
   "packages": {
-    "create-foldkit-app": "0.38.0",
-    "@foldkit/devtools": "0.166.0",
+    "create-foldkit-app": "0.39.0",
+    "@foldkit/devtools": "0.167.0",
     "@foldkit/devtools-mcp": "0.24.1",
-    "foldkit": "0.166.0",
-    "@foldkit/markdown": "0.14.1",
-    "@foldkit/oxlint-plugin": "0.15.2",
-    "@foldkit/ui": "0.166.0",
-    "@foldkit/vite-plugin": "0.26.1"
+    "foldkit": "0.167.0",
+    "@foldkit/markdown": "0.14.2",
+    "@foldkit/node": "0.1.0",
+    "@foldkit/oxlint-plugin": "0.15.3",
+    "@foldkit/ui": "0.167.0",
+    "@foldkit/vite-plugin": "0.27.0"
   },
   "dependencies": {
-    "@foldkit/devtools": "0.166.0",
-    "@foldkit/vite-plugin": "0.26.1",
+    "@foldkit/devtools": "0.167.0",
+    "@foldkit/vite-plugin": "0.27.0",
     "@foldkit/devtools-mcp": "0.24.1",
-    "@foldkit/oxlint-plugin": "0.15.2",
+    "@foldkit/oxlint-plugin": "0.15.3",
     "@types/node": "26.4.0",
     "happy-dom": "^20.14.5",
     "oxfmt": "^0.66.0",

package/dist/templates/rendering/ssg/src/entry.server.ts

@@ -3,6 +3,8 @@ import { Server } from 'foldkit/experimental'
 
 import { init, view } from './main'
 
+export const renderDocument = Server.renderDocument
+
 export const prerenderPaths: ReadonlyArray<string> = ['/', '/about']
 
 export const renderPage = (request: Request): Promise<Server.EntryResult> =>

package/dist/templates/rendering/ssg/src/entry.ts

@@ -1,6 +1,7 @@
 import { Runtime } from 'foldkit'
 
 import { Message, Model, init, update, view } from './main'
+import './styles.css'
 
 const application = Runtime.makeApplication({
   Model,

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

@@ -9,6 +9,7 @@ export default defineConfig({
     foldkit({
       ssr: {
         serverEntry: '/src/entry.server.ts',
+        clientEntry: '/src/entry.ts',
         build: { prerender: true },
       },
     }),

package/dist/templates/rendering/ssr/scripts/serve.ts

@@ -1,155 +1,14 @@
-import { Config, Effect, Layer, Match, Option, Predicate, String } from 'effect'
-import {
-  HttpServer,
-  HttpServerError,
-  HttpServerRequest,
-  HttpServerResponse,
-  HttpStaticServer,
-} from 'effect/http'
-import { Server } from 'foldkit/experimental'
-import { createServer } from 'node:http'
-import { dirname, resolve } from 'node:path'
-import { fileURLToPath } from 'node:url'
+import { Config, Option, String } from 'effect'
 
-import {
-  NodeHttpPlatform,
-  NodeHttpServer,
-  NodeRuntime,
-  NodeServices,
-} from '@effect/platform-node'
+import { NodeRuntime } from '@effect/platform-node'
+import * as Node from '@foldkit/node'
 
-type FetchHandler = {
-  readonly fetch: (request: Request) => Promise<Response>
-}
-
-const EXAMPLE_DIR = resolve(dirname(fileURLToPath(import.meta.url)), '..')
-const CLIENT_DIR = resolve(EXAMPLE_DIR, 'dist/client')
-const FETCH_MODULE_URL = new URL('../dist/server/fetch.js', import.meta.url)
-  .href
 const DEFAULT_PORT = 3000
 
 const PORT = Config.withDefault(Config.Port('PORT'), DEFAULT_PORT)
 
-// NOTE: the origin this deployment serves. A client may send an absolute-form
-// target or a network-path reference such as `//elsewhere.example/page`.
-// Deriving the origin from the request would let the client choose redirects
-// and cookie domains, so a target that resolves anywhere else is refused
-// before static files or fetch. Set ORIGIN when deploying behind a proxy or
-// TLS terminator.
 const ORIGIN = Config.option(Config.String('ORIGIN')).pipe(
   Config.map(Option.filter(String.isNonEmpty)),
 )
 
-const isFetchHandler = (value: unknown): value is FetchHandler =>
-  Predicate.hasProperty(value, 'fetch') && Predicate.isFunction(value.fetch)
-
-const isFetchModule = (
-  value: unknown,
-): value is { readonly default: FetchHandler } =>
-  Predicate.hasProperty(value, 'default') && isFetchHandler(value.default)
-
-const isRouteNotFound = (error: HttpServerError.HttpServerError): boolean =>
-  error.reason._tag === 'RouteNotFound'
-
-const hostSettledResponse = () =>
-  HttpServerResponse.setHeader(
-    HttpServerResponse.empty({
-      status: Server.HOST_METHOD_ANSWERS.refusedStatus,
-    }),
-    'allow',
-    Server.HOST_METHOD_ANSWERS.allow,
-  )
-
-const fetchResponse = (
-  app: FetchHandler,
-  request: HttpServerRequest.HttpServerRequest,
-  requestUrl: string,
-) =>
-  Effect.gen(function* () {
-    const webRequest = yield* HttpServerRequest.toWeb(request)
-    const response = yield* Effect.promise(() =>
-      app.fetch(new Request(requestUrl, webRequest)),
-    )
-    return HttpServerResponse.fromWeb(response)
-  })
-
-const loadFetchHandler = Effect.gen(function* () {
-  const loaded: unknown = yield* Effect.tryPromise({
-    try: () => import(FETCH_MODULE_URL),
-    catch: cause =>
-      new Error(
-        'dist/server/fetch.js could not be loaded. Run `vite build` first.',
-        { cause },
-      ),
-  })
-  if (!isFetchModule(loaded)) {
-    return yield* Effect.die(
-      new Error('dist/server/fetch.js must default-export a Web fetch handler'),
-    )
-  }
-  return loaded.default
-})
-
-const makeHandler = Effect.gen(function* () {
-  const port = yield* PORT
-  const origin = Option.getOrElse(
-    yield* ORIGIN,
-    () => `http://localhost:${globalThis.String(port)}`,
-  )
-  const app = yield* loadFetchHandler
-  // NOTE: directory requests reach `fetch` even when a generated index file
-  // exists. This host serves assets as files and renders pages at request time.
-  const staticFiles = yield* HttpStaticServer.make({
-    root: CLIENT_DIR,
-    index: undefined,
-  })
-
-  return HttpServerRequest.HttpServerRequest.use(request => {
-    // NOTE: refuse an off-origin target before looking for a file. A
-    // network-path request such as `//evil.example/../assets/app.js` names
-    // another host, then a path that exists on disk. The fetch handler trusts
-    // the `Request.url` it is given, so this is the one place that resolves it.
-    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 = Match.value(normalizedRequest.method).pipe(
-      Match.whenOr('GET', 'HEAD', () => {
-        if (Server.resolvesToIndexHtml(requestUrl)) {
-          return fetchResponse(app, normalizedRequest, requestUrl)
-        }
-        return staticFiles.pipe(
-          Effect.catchIf(isRouteNotFound, () =>
-            fetchResponse(app, normalizedRequest, requestUrl),
-          ),
-        )
-      }),
-      Match.orElse(() => {
-        if (Server.isHostSettledMethod(normalizedRequest.method)) {
-          return Effect.succeed(hostSettledResponse())
-        }
-        return fetchResponse(app, normalizedRequest, requestUrl)
-      }),
-    )
-    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))
+NodeRuntime.runMain(Node.serve({ port: PORT, origin: ORIGIN }))

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

@@ -4,6 +4,8 @@ import { Server } from 'foldkit/experimental'
 import { readCountCookie } from './cookie'
 import { Flags, init, view } from './main'
 
+export const renderDocument = Server.renderDocument
+
 const flagsForRequest = (cookieHeader: string): Flags => ({
   initialCount: readCountCookie(cookieHeader),
   renderedAt: new Date().toISOString(),

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

@@ -1,6 +1,7 @@
 import { Runtime } from 'foldkit'
 
 import { Flags, Message, Model, init, update, view } from './main'
+import './styles.css'
 
 const application = Runtime.makeApplication({
   Model,

package/dist/templates/rendering/ssr/vite.config.ts

@@ -9,6 +9,7 @@ export default defineConfig({
     foldkit({
       ssr: {
         serverEntry: '/src/entry.server.ts',
+        clientEntry: '/src/entry.ts',
         build: true,
       },
     }),

package/dist/utils/files.js

@@ -70,10 +70,12 @@ const createPackageManagerFiles = (projectPath, packageManager) => Effect.gen(fu
     yield* createFiles(projectPath, packageManagerFiles);
 });
 const overlayRenderingFiles = (projectPath, directory) => Effect.gen(function* () {
+    const fs = yield* FileSystem.FileSystem;
     const path = yield* Path.Path;
     const templateRoot = yield* getTemplateRoot;
     const renderingFiles = yield* getTemplateFiles(path.join(templateRoot, 'rendering', directory));
     yield* createFiles(projectPath, renderingFiles);
+    yield* fs.remove(path.join(projectPath, 'index.html'));
 });
 const createRenderingFiles = (projectPath, scaffold) => Match.value(scaffold).pipe(Match.tagsExhaustive({
     Spa: () => Effect.void,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-foldkit-app",
-  "version": "0.38.0",
+  "version": "0.39.0",
   "description": "Create Foldkit applications",
   "type": "module",
   "main": "./dist/index.js",