create-foldkit-app 0.27.3 → 0.28.0

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

@@ -0,0 +1,90 @@
+import {
+  all,
+  click,
+  expect,
+  expectAll,
+  first,
+  given,
+  nth,
+  role,
+  scene,
+  text,
+} from 'foldkit/scene'
+import { describe, test } from 'vitest'
+
+import { type Model, update, view } from './main'
+
+const initialModel: Model = {
+  rows: [
+    { id: 'counter-0', counter: { count: 0 } },
+    { id: 'counter-1', counter: { count: 0 } },
+  ],
+  nextRowId: 2,
+}
+
+describe('view', () => {
+  test('renders one Counter row per entry', () => {
+    scene(
+      { update, view },
+      given(initialModel),
+      expectAll(all.role('button', { name: '+' })).toHaveCount(2),
+      expectAll(all.role('button', { name: '-' })).toHaveCount(2),
+      expectAll(all.role('button', { name: 'Remove' })).toHaveCount(2),
+    )
+  })
+
+  test('clicking + on a Counter dispatches through h.submodel back to the right row', () => {
+    scene(
+      { update, view },
+      given(initialModel),
+      expectAll(all.text('0')).toHaveCount(2),
+      click(nth(all.role('button', { name: '+' }), 1)),
+      expect(text('0')).toExist(),
+      expect(text('1')).toExist(),
+    )
+  })
+
+  test('clicking - on a Counter dispatches through h.submodel and decrements', () => {
+    scene(
+      { update, view },
+      given({
+        rows: [{ id: 'counter-0', counter: { count: 3 } }],
+        nextRowId: 1,
+      }),
+      expect(text('3')).toExist(),
+      click(role('button', { name: '-' })),
+      expect(text('2')).toExist(),
+    )
+  })
+
+  test('Add Counter creates a new row with a fresh Counter', () => {
+    scene(
+      { update, view },
+      given(initialModel),
+      click(role('button', { name: '+ Add Counter' })),
+      expectAll(all.role('button', { name: 'Remove' })).toHaveCount(3),
+      expectAll(all.text('0')).toHaveCount(3),
+    )
+  })
+
+  test('Remove deletes a row and routes future events to surviving rows', () => {
+    scene(
+      { update, view },
+      given({
+        rows: [
+          { id: 'counter-0', counter: { count: 5 } },
+          { id: 'counter-1', counter: { count: 10 } },
+        ],
+        nextRowId: 2,
+      }),
+      expect(text('5')).toExist(),
+      expect(text('10')).toExist(),
+      click(first(all.role('button', { name: 'Remove' }))),
+      expectAll(all.role('button', { name: 'Remove' })).toHaveCount(1),
+      expect(text('5')).not.toExist(),
+      expect(text('10')).toExist(),
+      click(role('button', { name: '+' })),
+      expect(text('11')).toExist(),
+    )
+  })
+})

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

@@ -0,0 +1,127 @@
+import { given, message, model, story } from 'foldkit/story'
+import { describe, expect, test } from 'vitest'
+
+import { Message as CounterMessage } from './counter'
+import { Message, type Model, update } from './main'
+
+const initialModel: Model = {
+  rows: [
+    { id: 'counter-0', counter: { count: 0 } },
+    { id: 'counter-1', counter: { count: 0 } },
+  ],
+  nextRowId: 2,
+}
+
+describe('update', () => {
+  test('ClickedAddRow appends a fresh Counter row with the next id', () => {
+    story(
+      update,
+      given(initialModel),
+      message(Message.ClickedAddRow()),
+      model(model => {
+        expect(model.rows).toHaveLength(3)
+        expect(model.rows[2]?.id).toBe('counter-2')
+        expect(model.rows[2]?.counter.count).toBe(0)
+        expect(model.nextRowId).toBe(3)
+      }),
+    )
+  })
+
+  test('ClickedRemoveRow drops only the targeted row', () => {
+    story(
+      update,
+      given(initialModel),
+      message(Message.ClickedRemoveRow({ id: 'counter-0' })),
+      model(model => {
+        expect(model.rows).toHaveLength(1)
+        expect(model.rows[0]?.id).toBe('counter-1')
+      }),
+    )
+  })
+
+  test('GotCounterMessage routes ClickedIncrement to the matching row only', () => {
+    story(
+      update,
+      given(initialModel),
+      message(
+        Message.GotCounterMessage({
+          id: 'counter-1',
+          message: CounterMessage.ClickedIncrement(),
+        }),
+      ),
+      model(model => {
+        expect(model.rows[0]?.counter.count).toBe(0)
+        expect(model.rows[1]?.counter.count).toBe(1)
+      }),
+    )
+  })
+
+  test('GotCounterMessage routes ClickedDecrement to the matching row only', () => {
+    story(
+      update,
+      given({
+        rows: [
+          { id: 'counter-0', counter: { count: 5 } },
+          { id: 'counter-1', counter: { count: 5 } },
+        ],
+        nextRowId: 2,
+      }),
+      message(
+        Message.GotCounterMessage({
+          id: 'counter-0',
+          message: CounterMessage.ClickedDecrement(),
+        }),
+      ),
+      model(model => {
+        expect(model.rows[0]?.counter.count).toBe(4)
+        expect(model.rows[1]?.counter.count).toBe(5)
+      }),
+    )
+  })
+
+  test('GotCounterMessage for a missing id leaves the model unchanged', () => {
+    story(
+      update,
+      given(initialModel),
+      message(
+        Message.GotCounterMessage({
+          id: 'counter-99',
+          message: CounterMessage.ClickedIncrement(),
+        }),
+      ),
+      model(model => {
+        expect(model.rows[0]?.counter.count).toBe(0)
+        expect(model.rows[1]?.counter.count).toBe(0)
+      }),
+    )
+  })
+
+  test('successive Messages accumulate per row independently', () => {
+    story(
+      update,
+      given(initialModel),
+      message(
+        Message.GotCounterMessage({
+          id: 'counter-0',
+          message: CounterMessage.ClickedIncrement(),
+        }),
+      ),
+      message(
+        Message.GotCounterMessage({
+          id: 'counter-0',
+          message: CounterMessage.ClickedIncrement(),
+        }),
+      ),
+      message(
+        Message.GotCounterMessage({
+          id: 'counter-1',
+          message: CounterMessage.ClickedDecrement(),
+        }),
+      ),
+      model(model => {
+        expect(model.rows[0]?.counter.count).toBe(2)
+        expect(model.rows[1]?.counter.count).toBe(-1)
+      }),
+    )
+  })
+})

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

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

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

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

package/dist/templates/examples/crash-view/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "crash-view-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/crash-view/src/entry.ts

@@ -0,0 +1,28 @@
+import { Option } from 'effect'
+import { Runtime } from 'foldkit'
+
+import { Message, Model, crashView, init, update, view } from './main'
+
+const application = Runtime.makeApplication({
+  Model,
+  init,
+  update,
+  view,
+  // Remove me to see the default crash view
+  crash: {
+    view: crashView,
+    report: ({ error, model, message }) => {
+      console.log('Crash report:', {
+        error,
+        model,
+        message: Option.getOrUndefined(message),
+      })
+    },
+  },
+  container: document.getElementById('root'),
+  devTools: {
+    Message,
+  },
+})
+
+Runtime.run(application)

package/dist/templates/examples/crash-view/src/main.ts

@@ -0,0 +1,104 @@
+import { Schema } from 'effect'
+import { Command, Runtime } from 'foldkit'
+import { Document, HtmlBuilder } from 'foldkit/html'
+import { defineMessageUnion } from 'foldkit/message'
+
+import { Button } from '@foldkit/ui'
+
+// MODEL
+
+export const Model = Schema.Null
+export type Model = typeof Model.Type
+
+// MESSAGE
+
+export const Message = defineMessageUnion({
+  ClickedCrash: {},
+})
+
+export type Message = typeof Message.Type
+
+// UPDATE
+
+export const update = (
+  _model: Model,
+  _message: Message,
+): readonly [Model, ReadonlyArray<Command.Command<Message>>] => {
+  throw new Error('This is a simulated crash!')
+}
+
+// INIT
+
+export const init: Runtime.ApplicationInit<Model, Message> = () => [null, []]
+
+// VIEW
+
+export const view = (_model: Model, h: HtmlBuilder<Message>): Document => ({
+  title: 'Crash View Example',
+  body: h.div(
+    [h.Class('min-h-screen bg-white flex items-center justify-center')],
+    [
+      Button.view(
+        {
+          onClick: Message.ClickedCrash(),
+          toView: attributes =>
+            h.button(
+              [
+                ...attributes.button,
+                h.Class(
+                  'bg-red-600 text-white text-lg font-semibold hover:bg-red-700 px-6 py-3 rounded transition cursor-pointer',
+                ),
+              ],
+              ['Crash'],
+            ),
+        },
+        h,
+      ),
+    ],
+  ),
+})
+
+// CRASH
+
+export const crashView = (
+  { error }: Runtime.CrashContext<Model, Message>,
+  h: HtmlBuilder<never>,
+): Document => ({
+  title: 'Crash View Example | crashed',
+  body: h.div(
+    [h.Class('min-h-screen flex items-center justify-center bg-red-50 p-8')],
+    [
+      h.div(
+        [
+          h.Class(
+            'max-w-md w-full bg-white rounded-lg border border-red-200 p-8 text-center',
+          ),
+        ],
+        [
+          h.h1(
+            [h.Class('text-red-600 text-2xl font-semibold mb-4')],
+            ['Something went wrong'],
+          ),
+          h.p([h.Class('text-gray-700 mb-6 leading-relaxed')], [error.message]),
+          Button.view(
+            {
+              toView: attributes =>
+                h.button(
+                  [
+                    ...attributes.button,
+                    h.Class(
+                      'bg-red-600 text-white border-none px-6 py-2.5 rounded-md text-sm font-medium cursor-pointer hover:bg-red-700 transition',
+                    ),
+                    // oxlint-disable-next-line foldkit/no-raw-dom-event-attributes -- the crash view renders outside the dispatch loop, so there is no runtime to route a Message
+                    h.Attribute('onclick', 'location.reload()'),
+                  ],
+                  ['Reload'],
+                ),
+            },
+            h,
+          ),
+        ],
+      ),
+    ],
+  ),
+})

package/dist/templates/examples/crash-view/src/scene.test.ts

@@ -0,0 +1,14 @@
+import { expect, given, role, scene } from 'foldkit/scene'
+import { describe, test } from 'vitest'
+
+import { update, view } from './main'
+
+describe('view', () => {
+  test('initial view shows the Crash button', () => {
+    scene(
+      { update, view },
+      given(null),
+      expect(role('button', { name: 'Crash' })).toExist(),
+    )
+  })
+})

package/dist/templates/examples/crash-view/src/story.test.ts

@@ -0,0 +1,11 @@
+import { describe, expect, test } from 'vitest'
+
+import { Message, update } from './main'
+
+describe('update', () => {
+  test('handling any Message throws to trigger the crash view', () => {
+    expect(() => update(null, Message.ClickedCrash())).toThrow(
+      'This is a simulated crash!',
+    )
+  })
+})

package/dist/templates/examples/crash-view/src/styles.css

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

package/dist/templates/examples/crash-view/src/vitest-setup.ts

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

package/dist/templates/examples/embedding/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "embedding-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/embedding/src/entry.ts

@@ -0,0 +1,3 @@
+import { startHost } from './host'
+
+startHost()

package/dist/templates/examples/embedding/src/host.ts

@@ -0,0 +1,108 @@
+import { Function, Option } from 'effect'
+import { Runtime } from 'foldkit'
+
+import { makeElement } from './main'
+
+const INITIAL_COUNT = 10
+
+const getElement = (elementId: string): HTMLElement => {
+  const element = document.getElementById(elementId)
+  if (element === null) {
+    throw new Error(`Missing host element "${elementId}"`)
+  }
+  return element
+}
+
+const getInputElement = (elementId: string): HTMLInputElement => {
+  const element = document.getElementById(elementId)
+  if (!(element instanceof HTMLInputElement)) {
+    throw new Error(`Missing host input "${elementId}"`)
+  }
+  return element
+}
+
+export const startHost = (): void => {
+  getElement('root').outerHTML = `
+    <div class="mx-auto flex min-h-screen max-w-xl flex-col gap-6 p-8">
+      <header class="flex flex-col gap-1">
+        <h1 class="text-2xl font-bold text-gray-900">Host application</h1>
+        <p class="text-sm text-gray-600">
+          This page is plain TypeScript with no Foldkit runtime of its own. It
+          embeds the widget below with <code>Runtime.embed</code> and talks to it
+          only through the handle: Flags at mount, <code>send</code> in,
+          <code>subscribe</code> out, <code>dispose</code> on unmount.
+        </p>
+      </header>
+
+      <section class="flex flex-col gap-3 rounded-xl border border-gray-200 bg-white p-6">
+        <h2 class="text-sm font-semibold text-gray-900">Host controls</h2>
+        <div class="flex flex-wrap items-center gap-4">
+          <button
+            id="mount-toggle"
+            class="cursor-pointer rounded-lg bg-gray-900 px-4 py-2 text-sm font-semibold text-white hover:bg-gray-700"
+          ></button>
+          <label class="flex items-center gap-2 text-sm text-gray-700">
+            Step
+            <input id="step-range" type="range" min="1" max="10" value="1" />
+            <span id="step-value" class="w-4 font-semibold tabular-nums">1</span>
+          </label>
+        </div>
+        <p class="text-sm text-gray-700">
+          Last count received from the widget:
+          <span id="host-count" class="font-semibold tabular-nums">none yet</span>
+        </p>
+      </section>
+
+      <div id="widget-slot"></div>
+    </div>
+  `
+
+  const mountToggleButton = getElement('mount-toggle')
+  const stepRange = getInputElement('step-range')
+  const stepValueDisplay = getElement('step-value')
+  const hostCountDisplay = getElement('host-count')
+  const widgetSlot = getElement('widget-slot')
+
+  const element = makeElement(widgetSlot, { initialCount: INITIAL_COUNT })
+
+  type WidgetHandle = Runtime.EmbedHandle<typeof element.ports>
+
+  let maybeHandle: Option.Option<WidgetHandle> = Option.none()
+
+  const mountWidget = (): void => {
+    const handle = Runtime.embed(element)
+
+    handle.ports.countChanged.subscribe(count => {
+      hostCountDisplay.textContent = String(count)
+    })
+    handle.ports.stepChanged.send(Number(stepRange.value))
+
+    maybeHandle = Option.some(handle)
+    mountToggleButton.textContent = 'Unmount widget'
+  }
+
+  const unmountWidget = (handle: WidgetHandle): void => {
+    handle.dispose()
+    maybeHandle = Option.none()
+    mountToggleButton.textContent = 'Mount widget'
+  }
+
+  mountToggleButton.addEventListener('click', () => {
+    Option.match(maybeHandle, {
+      onNone: mountWidget,
+      onSome: unmountWidget,
+    })
+  })
+
+  stepRange.addEventListener('input', () => {
+    stepValueDisplay.textContent = stepRange.value
+    Option.match(maybeHandle, {
+      onNone: Function.constVoid,
+      onSome: handle => {
+        handle.ports.stepChanged.send(Number(stepRange.value))
+      },
+    })
+  })
+
+  mountWidget()
+}