create-foldkit-app 0.27.3 → 0.28.0

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

@@ -0,0 +1,144 @@
+import { Duration, Effect, Schema as S, Stream } from 'effect'
+import { Command, Port, Runtime, Subscription } from 'foldkit'
+import { Html, HtmlBuilder } from 'foldkit/html'
+import { defineMessageUnion } from 'foldkit/message'
+import { evo } from 'foldkit/struct'
+
+import { Button } from '@foldkit/ui'
+
+// MODEL
+
+export const Model = S.Struct({ count: S.Number, step: S.Number })
+export type Model = typeof Model.Type
+
+// MESSAGE
+
+export const Message = defineMessageUnion({
+  Ticked: {},
+  ClickedAdvance: {},
+  ChangedStep: { step: S.Number },
+  CompletedReportCount: {},
+})
+
+export type Message = typeof Message.Type
+
+// PORT
+
+export const ports = {
+  inbound: { stepChanged: Port.inbound(S.Number) },
+  outbound: { countChanged: Port.outbound(S.Number) },
+}
+
+// INIT
+
+export const Flags = S.Struct({ initialCount: S.Number })
+export type Flags = typeof Flags.Type
+
+export const init: Runtime.ElementInit<Model, Message, Flags> = flags => [
+  { count: flags.initialCount, step: 1 },
+  [],
+]
+
+// COMMAND
+
+export const ReportCount = Command.define('ReportCount', {
+  args: { count: S.Number },
+  messages: [Message.CompletedReportCount],
+  execute: ({ count }) =>
+    Port.emit(ports.outbound.countChanged, count).pipe(
+      Effect.as(Message.CompletedReportCount()),
+    ),
+})
+
+// UPDATE
+
+type UpdateReturn = readonly [Model, ReadonlyArray<Command.Command<Message>>]
+
+const advance = (model: Model): UpdateReturn => {
+  const count = model.count + model.step
+  return [evo(model, { count: () => count }), [ReportCount({ count })]]
+}
+
+export const update = (model: Model, message: Message) =>
+  Message.match<UpdateReturn>(message, {
+    Ticked: () => advance(model),
+    ClickedAdvance: () => advance(model),
+    ChangedStep: ({ step }) => [evo(model, { step: () => step }), []],
+    CompletedReportCount: () => [model, []],
+  })
+
+// SUBSCRIPTION
+
+const TICK_INTERVAL = Duration.seconds(1)
+
+export const subscriptions = Subscription.make<Model, Message>()(_entry => ({
+  tick: Subscription.persistent(
+    Stream.tick(TICK_INTERVAL).pipe(Stream.map(Message.Ticked)),
+  ),
+  hostStep: Port.subscription(ports.inbound.stepChanged, step =>
+    Message.ChangedStep({ step }),
+  ),
+}))
+
+// VIEW
+
+export const view = (model: Model, h: HtmlBuilder<Message>): Html =>
+  h.div(
+    [
+      h.Class(
+        'flex flex-col items-center gap-4 rounded-xl border border-teal-200 bg-teal-50 p-6',
+      ),
+    ],
+    [
+      h.div(
+        [
+          h.Class(
+            'text-xs font-semibold uppercase tracking-wide text-teal-700',
+          ),
+        ],
+        ['Foldkit widget'],
+      ),
+      h.div(
+        [h.Class('text-5xl font-bold tabular-nums text-gray-900')],
+        [String(model.count)],
+      ),
+      h.div(
+        [h.Class('text-sm text-gray-600')],
+        [`Ticking up by ${model.step} every second`],
+      ),
+      Button.view(
+        {
+          onClick: Message.ClickedAdvance(),
+          toView: attributes =>
+            h.button(
+              [
+                ...attributes.button,
+                h.Class(
+                  'cursor-pointer rounded-lg bg-teal-600 px-4 py-2 text-sm font-semibold text-white hover:bg-teal-500',
+                ),
+              ],
+              [`Advance by ${model.step}`],
+            ),
+        },
+        h,
+      ),
+    ],
+  )
+
+// PROGRAM
+
+export const makeElement = (container: HTMLElement, flags: Flags) =>
+  Runtime.makeElement({
+    Model,
+    Flags,
+    flags: Effect.succeed(flags),
+    init,
+    update,
+    view,
+    subscriptions,
+    ports,
+    container,
+    devTools: {
+      Message,
+    },
+  })

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

@@ -0,0 +1,28 @@
+import { Command, click, expect, given, role, scene, text } from 'foldkit/scene'
+import { describe, test } from 'vitest'
+
+import { Message, type Model, ReportCount, update, view } from './main'
+
+const initialModel: Model = { count: 10, step: 1 }
+
+describe('view', () => {
+  test('initial view shows the count, the tick description, and the advance button', () => {
+    scene(
+      { update, view },
+      given(initialModel),
+      expect(text('10')).toExist(),
+      expect(text('Ticking up by 1 every second')).toExist(),
+      expect(role('button', { name: 'Advance by 1' })).toExist(),
+    )
+  })
+
+  test('clicking the advance button moves the count by the step', () => {
+    scene(
+      { update, view },
+      given({ ...initialModel, step: 4 }),
+      click(role('button', { name: 'Advance by 4' })),
+      Command.resolve(ReportCount, Message.CompletedReportCount()),
+      expect(text('14')).toExist(),
+    )
+  })
+})

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

@@ -0,0 +1,64 @@
+import { Command, given, message, model, story } from 'foldkit/story'
+import { describe, expect, test } from 'vitest'
+
+import { Message, type Model, ReportCount, update } from './main'
+
+const initialModel: Model = { count: 10, step: 1 }
+
+describe('update', () => {
+  describe('counting', () => {
+    test('Ticked advances the count by the step and reports it on the outbound port', () => {
+      story(
+        update,
+        given({ ...initialModel, step: 3 }),
+        message(Message.Ticked()),
+        model(model => {
+          expect(model.count).toBe(13)
+        }),
+        Command.expectHas(ReportCount),
+        Command.resolve(ReportCount, Message.CompletedReportCount()),
+      )
+    })
+
+    test('ClickedAdvance advances the count by the step and reports it', () => {
+      story(
+        update,
+        given(initialModel),
+        message(Message.ClickedAdvance()),
+        model(model => {
+          expect(model.count).toBe(11)
+        }),
+        Command.expectHas(ReportCount),
+        Command.resolve(ReportCount, Message.CompletedReportCount()),
+      )
+    })
+  })
+
+  describe('host input', () => {
+    test('ChangedStep stores the step pushed in by the host', () => {
+      story(
+        update,
+        given(initialModel),
+        message(Message.ChangedStep({ step: 7 })),
+        model(model => {
+          expect(model.step).toBe(7)
+          expect(model.count).toBe(10)
+        }),
+        Command.expectNone(),
+      )
+    })
+
+    test('a changed step applies from the next tick onward', () => {
+      story(
+        update,
+        given(initialModel),
+        message(Message.ChangedStep({ step: 5 })),
+        message(Message.Ticked()),
+        model(model => {
+          expect(model.count).toBe(15)
+        }),
+        Command.resolve(ReportCount, Message.CompletedReportCount()),
+      )
+    })
+  })
+})

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

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

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

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

package/dist/templates/examples/form/package.json

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

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