create-foldkit-app 0.26.0 → 0.27.1

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

@@ -0,0 +1,155 @@
+import { Effect, Match as M, Schema as S } from 'effect'
+import { Command, Runtime } from 'foldkit'
+import { type Document, type HtmlBuilder } from 'foldkit/html'
+import { m } from 'foldkit/message'
+import { evo } from 'foldkit/struct'
+
+import { Button } from '@foldkit/ui'
+
+import { COUNT_COOKIE } from './cookie'
+
+// MODEL
+
+export const Model = S.Struct({
+  count: S.Number,
+  renderedAt: S.String,
+  renderedOn: S.Literals(['Server', 'Client']),
+})
+export type Model = typeof Model.Type
+
+// FLAGS
+
+export const Flags = S.Struct({
+  initialCount: S.Number,
+  renderedAt: S.String,
+  renderedOn: S.Literals(['Server', 'Client']),
+})
+export type Flags = typeof Flags.Type
+
+// MESSAGE
+
+export const ClickedDecrement = m('ClickedDecrement')
+export const ClickedIncrement = m('ClickedIncrement')
+export const CompletedPersistCount = m('CompletedPersistCount')
+
+export const Message = S.Union([
+  ClickedDecrement,
+  ClickedIncrement,
+  CompletedPersistCount,
+])
+export type Message = typeof Message.Type
+
+// UPDATE
+
+export const update = (
+  model: Model,
+  message: Message,
+): readonly [Model, ReadonlyArray<Command.Command<Message>>] =>
+  M.value(message).pipe(
+    M.withReturnType<
+      readonly [Model, ReadonlyArray<Command.Command<Message>>]
+    >(),
+    M.tagsExhaustive({
+      ClickedDecrement: () => {
+        const nextCount = model.count - 1
+        return [
+          evo(model, { count: () => nextCount }),
+          [PersistCount({ count: nextCount })],
+        ]
+      },
+      ClickedIncrement: () => {
+        const nextCount = model.count + 1
+        return [
+          evo(model, { count: () => nextCount }),
+          [PersistCount({ count: nextCount })],
+        ]
+      },
+      CompletedPersistCount: () => [model, []],
+    }),
+  )
+
+// COMMAND
+
+const COUNT_COOKIE_MAX_AGE_SECONDS = 31536000
+
+export const PersistCount = Command.define('PersistCount', {
+  args: { count: S.Number },
+  messages: [CompletedPersistCount],
+  execute: ({ count }) =>
+    Effect.try(() => {
+      document.cookie = `${COUNT_COOKIE}=${count}; path=/; max-age=${COUNT_COOKIE_MAX_AGE_SECONDS}`
+    }).pipe(
+      Effect.map(() => CompletedPersistCount()),
+      Effect.catch(() => Effect.succeed(CompletedPersistCount())),
+    ),
+})
+
+// INIT
+
+export const init: Runtime.ApplicationInit<Model, Message, Flags> = flags => [
+  {
+    count: flags.initialCount,
+    renderedAt: flags.renderedAt,
+    renderedOn: flags.renderedOn,
+  },
+  [],
+]
+
+// VIEW
+
+export const view = (model: Model, h: HtmlBuilder<Message>): Document => ({
+  title: `Count ${model.count}`,
+  body: h.div(
+    [
+      h.Class(
+        'min-h-screen bg-white flex flex-col items-center justify-center gap-6 p-6',
+      ),
+    ],
+    [
+      h.h1(
+        [h.Class('text-2xl font-semibold text-gray-800')],
+        ['Server-rendered counter'],
+      ),
+      h.p(
+        [h.Id('count'), h.Class('text-6xl font-bold text-gray-800')],
+        [model.count.toString()],
+      ),
+      h.div(
+        [h.Class('flex flex-wrap justify-center gap-4')],
+        [
+          Button.view(
+            {
+              onClick: ClickedDecrement(),
+              toView: attributes =>
+                h.button([...attributes.button, h.Class(buttonStyle)], ['-']),
+            },
+            h,
+          ),
+          Button.view(
+            {
+              onClick: ClickedIncrement(),
+              toView: attributes =>
+                h.button([...attributes.button, h.Class(buttonStyle)], ['+']),
+            },
+            h,
+          ),
+        ],
+      ),
+      h.p(
+        [h.Id('provenance'), h.Class('text-sm text-gray-500')],
+        [`Rendered on the ${model.renderedOn} at ${model.renderedAt}`],
+      ),
+      h.p(
+        [h.Class('text-sm text-gray-500 max-w-md text-center')],
+        [
+          'The count persists in a cookie. Reload the page and the server ' +
+            'renders your latest count into the HTML before any JavaScript runs.',
+        ],
+      ),
+    ],
+  ),
+})
+
+// STYLE
+
+const buttonStyle = 'bg-black text-white hover:bg-gray-700 px-4 py-2 transition'

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

@@ -0,0 +1,43 @@
+import { Command, click, expect, given, role, scene, text } from 'foldkit/scene'
+import { describe, test } from 'vitest'
+
+import {
+  CompletedPersistCount,
+  Model,
+  PersistCount,
+  update,
+  view,
+} from './main'
+
+const initialModel = Model.make({
+  count: 3,
+  renderedAt: '2026-07-26T00:00:00.000Z',
+  renderedOn: 'Server',
+})
+
+describe('view', () => {
+  test('renders the count and provenance line', () => {
+    scene(
+      { update, view },
+      given(initialModel),
+      expect(text('3')).toExist(),
+      expect(
+        text('Rendered on the Server at 2026-07-26T00:00:00.000Z'),
+      ).toExist(),
+      expect(role('button', { name: '+' })).toExist(),
+      expect(role('button', { name: '-' })).toExist(),
+    )
+  })
+
+  test('clicking + increments and persists the count', () => {
+    scene(
+      { update, view },
+      given(initialModel),
+      click(role('button', { name: '+' })),
+      expect(text('4')).toExist(),
+      Command.expectHas(PersistCount({ count: 4 })),
+      Command.resolve(PersistCount({ count: 4 }), CompletedPersistCount()),
+      Command.expectNone(),
+    )
+  })
+})

package/templates/rendering/ssr/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/ssr/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/**/*", "server/**/*"]
+}

package/templates/rendering/ssr/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'],
+  },
+})