create-foldkit-app 0.27.3 → 0.28.0

package/dist/templates/examples/state-machine/src/vitest-setup.ts

@@ -0,0 +1,3 @@
+import { setup } from 'foldkit/test/vitest'
+
+setup()

package/dist/templates/examples/stopwatch/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "stopwatch-example",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@effect/platform-browser": "4.0.0-rc.109",
+    "@foldkit/ui": "workspace:*",
+    "@tailwindcss/vite": "^4.3.1",
+    "effect": "4.0.0-rc.109",
+    "foldkit": "workspace:*",
+    "tailwindcss": "^4.3.1"
+  },
+  "devDependencies": {
+    "@foldkit/devtools": "workspace:*",
+    "@foldkit/vite-plugin": "workspace:*",
+    "@trivago/prettier-plugin-sort-imports": "^6.0.2",
+    "happy-dom": "^20.10.4",
+    "prettier": "^3.8.4",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16",
+    "vitest": "^4.1.9"
+  }
+}

package/dist/templates/examples/stopwatch/src/entry.ts

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

package/dist/templates/examples/stopwatch/src/main.ts

@@ -0,0 +1,237 @@
+import {
+  Clock,
+  Duration,
+  Effect,
+  Schema as S,
+  Stream,
+  String,
+  flow,
+  pipe,
+} from 'effect'
+import { Command, Runtime, Subscription } from 'foldkit'
+import { Document, Html, HtmlBuilder } from 'foldkit/html'
+import { defineMessageUnion } from 'foldkit/message'
+import { evo } from 'foldkit/struct'
+
+import { Button } from '@foldkit/ui'
+
+const TICK_INTERVAL_MS = 10
+
+// MODEL
+
+export const Model = S.Struct({
+  elapsedMs: S.Number,
+  isRunning: S.Boolean,
+  startTime: S.Number,
+})
+export type Model = typeof Model.Type
+
+// MESSAGE
+
+export const Message = defineMessageUnion({
+  ClickedStart: {},
+  CompletedDetermineStartTime: { startTime: S.Number },
+  ClickedStop: {},
+  ClickedReset: {},
+  Ticked: {},
+  CompletedDetermineTickTime: { elapsedMs: S.Number },
+})
+
+export type Message = typeof Message.Type
+
+// COMMAND
+
+export const DetermineStartTime = Command.define('DetermineStartTime', {
+  args: { elapsedMs: S.Number },
+  messages: [Message.CompletedDetermineStartTime],
+  execute: ({ elapsedMs }) =>
+    Effect.gen(function* () {
+      const now = yield* Clock.currentTimeMillis
+      return Message.CompletedDetermineStartTime({ startTime: now - elapsedMs })
+    }),
+})
+
+export const DetermineTickTime = Command.define('DetermineTickTime', {
+  args: { startTime: S.Number },
+  messages: [Message.CompletedDetermineTickTime],
+  execute: ({ startTime }) =>
+    Effect.gen(function* () {
+      const now = yield* Clock.currentTimeMillis
+      return Message.CompletedDetermineTickTime({ elapsedMs: now - startTime })
+    }),
+})
+
+// UPDATE
+
+export const update = (model: Model, message: Message) =>
+  Message.match<readonly [Model, ReadonlyArray<Command.Command<Message>>]>(
+    message,
+    {
+      ClickedStart: () => [
+        model,
+        [DetermineStartTime({ elapsedMs: model.elapsedMs })],
+      ],
+
+      CompletedDetermineStartTime: ({ startTime }) => [
+        evo(model, {
+          isRunning: () => true,
+          startTime: () => startTime,
+        }),
+        [],
+      ],
+
+      ClickedStop: () => [
+        evo(model, {
+          isRunning: () => false,
+        }),
+        [],
+      ],
+
+      ClickedReset: () => [
+        evo(model, {
+          elapsedMs: () => 0,
+          isRunning: () => false,
+          startTime: () => 0,
+        }),
+        [],
+      ],
+
+      Ticked: () => [
+        model,
+        [DetermineTickTime({ startTime: model.startTime })],
+      ],
+
+      CompletedDetermineTickTime: ({ elapsedMs }) => [
+        evo(model, {
+          elapsedMs: () => elapsedMs,
+        }),
+        [],
+      ],
+    },
+  )
+
+// INIT
+
+export const init: Runtime.ApplicationInit<Model, Message> = () => [
+  {
+    elapsedMs: 0,
+    isRunning: false,
+    startTime: 0,
+  },
+  [],
+]
+
+// SUBSCRIPTION
+
+export const subscriptions = Subscription.make<Model, Message>()(entry => ({
+  tick: entry(
+    { isRunning: S.Boolean },
+    {
+      modelToDependencies: model => ({ isRunning: model.isRunning }),
+      dependenciesToStream: ({ isRunning }) =>
+        Stream.when(
+          Stream.tick(Duration.millis(TICK_INTERVAL_MS)).pipe(
+            Stream.map(Message.Ticked),
+          ),
+          Effect.sync(() => isRunning),
+        ),
+    },
+  ),
+}))
+
+// VIEW
+
+const formatTime = (ms: number): string => {
+  const minutes = pipe(Duration.millis(ms), Duration.toMinutes, floorAndPad)
+
+  const seconds = pipe(
+    Duration.millis(ms % 60000),
+    Duration.toSeconds,
+    floorAndPad,
+  )
+
+  const centiseconds = pipe(
+    Duration.millis(ms % 1000),
+    Duration.toMillis,
+    v => v / 10,
+    floorAndPad,
+  )
+
+  return `${minutes}:${seconds}.${centiseconds}`
+}
+
+const floorAndPad = flow(Math.floor, v => v.toString(), String.padStart(2, '0'))
+
+export const view = (model: Model, h: HtmlBuilder<Message>): Document => ({
+  title: `Stopwatch ${formatTime(model.elapsedMs)}`,
+  body: h.div(
+    [h.Class('min-h-screen bg-gray-200 flex items-center justify-center')],
+    [
+      h.div(
+        [h.Class('bg-white text-center')],
+        [
+          h.div(
+            [h.Class('text-6xl font-mono font-bold text-gray-800 p-8')],
+            [formatTime(model.elapsedMs)],
+          ),
+          h.div(
+            [h.Class('flex')],
+            [
+              Button.view(
+                {
+                  onClick: Message.ClickedReset(),
+                  toView: attributes =>
+                    h.button(
+                      [
+                        ...attributes.button,
+                        h.Class(buttonStyle + ' bg-gray-500 hover:bg-gray-600'),
+                      ],
+                      ['Reset'],
+                    ),
+                },
+                h,
+              ),
+              startStopButton(model.isRunning, h),
+            ],
+          ),
+        ],
+      ),
+    ],
+  ),
+})
+
+const startStopButton = (isRunning: boolean, h: HtmlBuilder<Message>): Html =>
+  isRunning
+    ? Button.view(
+        {
+          onClick: Message.ClickedStop(),
+          toView: attributes =>
+            h.button(
+              [
+                ...attributes.button,
+                h.Class(buttonStyle + ' bg-red-500 hover:bg-red-600'),
+              ],
+              ['Stop'],
+            ),
+        },
+        h,
+      )
+    : Button.view(
+        {
+          onClick: Message.ClickedStart(),
+          toView: attributes =>
+            h.button(
+              [
+                ...attributes.button,
+                h.Class(buttonStyle + ' bg-green-500 hover:bg-green-600'),
+              ],
+              ['Start'],
+            ),
+        },
+        h,
+      )
+
+// STYLE
+
+const buttonStyle =
+  'px-6 py-4 flex-1 font-semibold text-white transition-colors'

package/dist/templates/examples/stopwatch/src/scene.test.ts

@@ -0,0 +1,124 @@
+import {
+  Command,
+  Subscription,
+  click,
+  expect,
+  given,
+  role,
+  scene,
+  text,
+} from 'foldkit/scene'
+import { describe, test } from 'vitest'
+
+import {
+  DetermineStartTime,
+  DetermineTickTime,
+  Message,
+  Model,
+  update,
+  view,
+} from './main'
+
+const initialModel = Model.make({
+  elapsedMs: 0,
+  isRunning: false,
+  startTime: 0,
+})
+
+describe('view', () => {
+  test('initial view shows the zeroed time and Start + Reset buttons', () => {
+    scene(
+      { update, view },
+      given(initialModel),
+      expect(text('00:00.00')).toExist(),
+      expect(role('button', { name: 'Start' })).toExist(),
+      expect(role('button', { name: 'Reset' })).toExist(),
+      expect(role('button', { name: 'Stop' })).toBeAbsent(),
+    )
+  })
+
+  test('clicking Start fires DetermineStartTime and switches to Stop', () => {
+    scene(
+      { update, view },
+      given(initialModel),
+      click(role('button', { name: 'Start' })),
+      Command.expectExact(DetermineStartTime({ elapsedMs: 0 })),
+      Command.resolve(
+        DetermineStartTime,
+        Message.CompletedDetermineStartTime({ startTime: 1000 }),
+      ),
+      expect(role('button', { name: 'Stop' })).toExist(),
+      expect(role('button', { name: 'Start' })).toBeAbsent(),
+    )
+  })
+
+  test('clicking Stop while running switches back to Start', () => {
+    const runningModel = Model.make({
+      elapsedMs: 1500,
+      isRunning: true,
+      startTime: 1000,
+    })
+
+    scene(
+      { update, view },
+      given(runningModel),
+      expect(role('button', { name: 'Stop' })).toExist(),
+      click(role('button', { name: 'Stop' })),
+      expect(role('button', { name: 'Start' })).toExist(),
+      expect(role('button', { name: 'Stop' })).toBeAbsent(),
+    )
+  })
+
+  test('clicking Reset zeros the elapsed time', () => {
+    const runningModel = Model.make({
+      elapsedMs: 12345,
+      isRunning: true,
+      startTime: 1000,
+    })
+
+    scene(
+      { update, view },
+      given(runningModel),
+      expect(text('00:12.34')).toExist(),
+      click(role('button', { name: 'Reset' })),
+      expect(text('00:00.00')).toExist(),
+      expect(role('button', { name: 'Start' })).toExist(),
+    )
+  })
+
+  test('a tick from the running Subscription advances the elapsed time', () => {
+    const startTime = 1000
+    const runningModel = Model.make({
+      elapsedMs: 0,
+      isRunning: true,
+      startTime,
+    })
+
+    scene(
+      { update, view },
+      given(runningModel),
+      expect(text('00:00.00')).toExist(),
+      Subscription.emit(Message.Ticked()),
+      Command.expectExact(DetermineTickTime({ startTime })),
+      Command.resolve(
+        DetermineTickTime,
+        Message.CompletedDetermineTickTime({ elapsedMs: 4320 }),
+      ),
+      expect(text('00:04.32')).toExist(),
+    )
+  })
+
+  test('elapsed time formats as MM:SS.cc', () => {
+    const longRunModel = Model.make({
+      elapsedMs: 67890,
+      isRunning: false,
+      startTime: 0,
+    })
+
+    scene(
+      { update, view },
+      given(longRunModel),
+      expect(text('01:07.89')).toExist(),
+    )
+  })
+})

package/dist/templates/examples/stopwatch/src/story.test.ts

@@ -0,0 +1,126 @@
+import { Command, given, message, model, story } from 'foldkit/story'
+import { describe, expect, test } from 'vitest'
+
+import {
+  DetermineStartTime,
+  DetermineTickTime,
+  Message,
+  type Model,
+  update,
+} from './main'
+
+const idleModel: Model = {
+  elapsedMs: 0,
+  isRunning: false,
+  startTime: 0,
+}
+
+const runningModel: Model = {
+  elapsedMs: 5000,
+  isRunning: true,
+  startTime: 1000,
+}
+
+describe('update', () => {
+  describe('start', () => {
+    test('ClickedStart fires DetermineStartTime with current elapsed time', () => {
+      story(
+        update,
+        given({ ...idleModel, elapsedMs: 2000 }),
+        message(Message.ClickedStart()),
+        Command.expectHas(DetermineStartTime),
+        model(model => {
+          expect(model.isRunning).toBe(false)
+        }),
+        Command.resolve(
+          DetermineStartTime,
+          Message.CompletedDetermineStartTime({ startTime: 500 }),
+        ),
+        model(model => {
+          expect(model.isRunning).toBe(true)
+          expect(model.startTime).toBe(500)
+        }),
+      )
+    })
+
+    test('CompletedDetermineStartTime stores the offset start time and starts running', () => {
+      story(
+        update,
+        given(idleModel),
+        message(Message.CompletedDetermineStartTime({ startTime: 1000 })),
+        model(model => {
+          expect(model.isRunning).toBe(true)
+          expect(model.startTime).toBe(1000)
+        }),
+      )
+    })
+  })
+
+  describe('stop and reset', () => {
+    test('ClickedStop pauses the stopwatch without zeroing time', () => {
+      story(
+        update,
+        given(runningModel),
+        message(Message.ClickedStop()),
+        model(model => {
+          expect(model.isRunning).toBe(false)
+          expect(model.elapsedMs).toBe(5000)
+          expect(model.startTime).toBe(1000)
+        }),
+      )
+    })
+
+    test('ClickedReset zeros elapsedMs, isRunning, and startTime', () => {
+      story(
+        update,
+        given(runningModel),
+        message(Message.ClickedReset()),
+        model(model => {
+          expect(model.elapsedMs).toBe(0)
+          expect(model.isRunning).toBe(false)
+          expect(model.startTime).toBe(0)
+        }),
+      )
+    })
+
+    test('ClickedReset on an idle stopwatch is a no-op', () => {
+      story(
+        update,
+        given(idleModel),
+        message(Message.ClickedReset()),
+        model(model => {
+          expect(model).toEqual(idleModel)
+        }),
+      )
+    })
+  })
+
+  describe('ticking', () => {
+    test('Ticked fires DetermineTickTime with the stored startTime', () => {
+      story(
+        update,
+        given(runningModel),
+        message(Message.Ticked()),
+        Command.expectHas(DetermineTickTime),
+        Command.resolve(
+          DetermineTickTime,
+          Message.CompletedDetermineTickTime({ elapsedMs: 6000 }),
+        ),
+        model(model => {
+          expect(model.elapsedMs).toBe(6000)
+        }),
+      )
+    })
+
+    test('CompletedDetermineTickTime stores the new elapsed time', () => {
+      story(
+        update,
+        given(runningModel),
+        message(Message.CompletedDetermineTickTime({ elapsedMs: 7500 })),
+        model(model => {
+          expect(model.elapsedMs).toBe(7500)
+        }),
+      )
+    })
+  })
+})

package/dist/templates/examples/stopwatch/src/styles.css

@@ -0,0 +1 @@
+@import 'tailwindcss';

package/dist/templates/examples/stopwatch/src/vitest-setup.ts

@@ -0,0 +1,3 @@
+import { setup } from 'foldkit/test/vitest'
+
+setup()

package/dist/templates/examples/todo/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "todo-example",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@effect/platform-browser": "4.0.0-rc.109",
+    "@foldkit/ui": "workspace:*",
+    "@tailwindcss/vite": "^4.3.1",
+    "clsx": "^2.1.1",
+    "effect": "4.0.0-rc.109",
+    "foldkit": "workspace:*",
+    "tailwindcss": "^4.3.1"
+  },
+  "devDependencies": {
+    "@foldkit/devtools": "workspace:*",
+    "@foldkit/vite-plugin": "workspace:*",
+    "@trivago/prettier-plugin-sort-imports": "^6.0.2",
+    "happy-dom": "^20.10.4",
+    "prettier": "^3.8.4",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16",
+    "vitest": "^4.1.9"
+  }
+}

package/dist/templates/examples/todo/src/entry.ts

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