create-foldkit-app 0.27.3 → 0.28.0

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

@@ -0,0 +1,163 @@
+import { Effect, Match as M, Schema as S } from 'effect'
+import { Command, Runtime } from 'foldkit'
+import { type Document, type Html, type HtmlBuilder } from 'foldkit/html'
+import { defineMessageUnion } from 'foldkit/message'
+import { UrlRequest, load, pushUrl } from 'foldkit/navigation'
+import { evo } from 'foldkit/struct'
+import { Url, toString as urlToString } from 'foldkit/url'
+
+import { AppRoute, aboutRouter, homeRouter, urlToAppRoute } from './route'
+
+// MODEL
+
+export const Model = S.Struct({
+  route: AppRoute,
+  count: S.Number,
+})
+export type Model = typeof Model.Type
+
+// MESSAGE
+
+export const Message = defineMessageUnion({
+  ClickedIncrement: {},
+  ClickedLink: { request: UrlRequest },
+  ChangedUrl: { url: Url },
+  CompletedNavigateInternal: {},
+  CompletedLoadExternal: {},
+})
+
+export type Message = typeof Message.Type
+
+// INIT
+
+export const init: Runtime.RoutingApplicationInit<Model, Message> = url => [
+  { route: urlToAppRoute(url), count: 0 },
+  [],
+]
+
+// COMMAND
+
+const NavigateInternal = Command.define('NavigateInternal', {
+  args: { url: S.String },
+  messages: [Message.CompletedNavigateInternal],
+  execute: ({ url }) =>
+    pushUrl(url).pipe(Effect.as(Message.CompletedNavigateInternal())),
+})
+
+const LoadExternal = Command.define('LoadExternal', {
+  args: { href: S.String },
+  messages: [Message.CompletedLoadExternal],
+  execute: ({ href }) =>
+    load(href).pipe(Effect.as(Message.CompletedLoadExternal())),
+})
+
+// UPDATE
+
+type UpdateReturn = readonly [Model, ReadonlyArray<Command.Command<Message>>]
+const withUpdateReturn = M.withReturnType<UpdateReturn>()
+
+export const update = (model: Model, message: Message) =>
+  Message.match<UpdateReturn>(message, {
+    ClickedIncrement: () => [evo(model, { count: count => count + 1 }), []],
+    ClickedLink: ({ request }) =>
+      M.value(request).pipe(
+        withUpdateReturn,
+        M.tagsExhaustive({
+          Internal: ({ url }) => [
+            model,
+            [NavigateInternal({ url: urlToString(url) })],
+          ],
+          External: ({ href }) => [model, [LoadExternal({ href })]],
+        }),
+      ),
+    ChangedUrl: ({ url }) => [
+      evo(model, { route: () => urlToAppRoute(url) }),
+      [],
+    ],
+    CompletedNavigateInternal: () => [model, []],
+    CompletedLoadExternal: () => [model, []],
+  })
+
+// VIEW
+
+const routeTitle = (route: AppRoute): string =>
+  M.value(route).pipe(
+    M.tagsExhaustive({
+      Home: () => 'Home | Static Generation | Foldkit',
+      About: () => 'About | Static Generation | Foldkit',
+      NotFound: () => 'Not Found | Static Generation | Foldkit',
+    }),
+  )
+
+const navigationView = (h: HtmlBuilder<Message>): Html =>
+  h.nav(
+    [h.Class('flex gap-4')],
+    [
+      h.a([h.Href(homeRouter()), h.Class('underline')], ['Home']),
+      h.a([h.Href(aboutRouter()), h.Class('underline')], ['About']),
+    ],
+  )
+
+const pageView = (model: Model, h: HtmlBuilder<Message>): Html =>
+  M.value(model.route).pipe(
+    M.tagsExhaustive({
+      Home: () =>
+        h.section(
+          [h.Class('grid gap-4')],
+          [
+            h.h1(
+              [h.Id('page-title'), h.Class('text-4xl font-bold')],
+              ['Statically generated home'],
+            ),
+            h.p(
+              [],
+              [
+                'This route was rendered during the build and hydrated in place.',
+              ],
+            ),
+            h.button(
+              [
+                h.OnClick(Message.ClickedIncrement()),
+                h.Class('w-fit bg-black px-4 py-2 text-white'),
+              ],
+              [`Count: ${model.count}`],
+            ),
+          ],
+        ),
+      About: () =>
+        h.section(
+          [h.Class('grid gap-4')],
+          [
+            h.h1(
+              [h.Id('page-title'), h.Class('text-4xl font-bold')],
+              ['Statically generated about page'],
+            ),
+            h.p(
+              [],
+              [
+                'The same renderPage function produced this route in the same build.',
+              ],
+            ),
+          ],
+        ),
+      NotFound: ({ path }) =>
+        h.section(
+          [h.Class('grid gap-4')],
+          [
+            h.h1(
+              [h.Id('page-title'), h.Class('text-4xl font-bold')],
+              ['Not found'],
+            ),
+            h.p([], [`No statically generated page exists for ${path}.`]),
+          ],
+        ),
+    }),
+  )
+
+export const view = (model: Model, h: HtmlBuilder<Message>): Document => ({
+  title: routeTitle(model.route),
+  body: h.main(
+    [h.Class('mx-auto grid min-h-screen max-w-3xl content-center gap-10 p-8')],
+    [navigationView(h), pageView(model, h)],
+  ),
+})

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

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

package/dist/templates/examples/ssr/package.json

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

package/dist/templates/examples/ssr/src/cookie.ts

@@ -0,0 +1,13 @@
+import { Number as Number_, Option, Record, pipe } from 'effect'
+import { Cookies } from 'effect/unstable/http'
+
+export const COUNT_COOKIE = 'foldkit-ssr-count'
+
+export const readCountCookie = (cookieHeader: string): number =>
+  pipe(
+    Cookies.parseHeader(cookieHeader),
+    Record.get(COUNT_COOKIE),
+    Option.flatMap(Number_.parse),
+    Option.filter(Number.isSafeInteger),
+    Option.getOrElse(() => 0),
+  )

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

@@ -0,0 +1,51 @@
+import { Effect } from 'effect'
+import { Server } from 'foldkit/experimental'
+
+import { readCountCookie } from './cookie'
+import { Flags, init, view } from './main'
+
+const flagsForRequest = (cookieHeader: string): Flags => ({
+  initialCount: readCountCookie(cookieHeader),
+  renderedAt: new Date().toISOString(),
+  renderedOn: 'Server',
+})
+
+// NOTE: the Flags built from this request are serialized into the rendered
+// HTML and travel to the browser with it. The hydrating client reads them
+// back and calls init with the exact values this render used; the client
+// computes no Flags of its own.
+
+// NOTE: a preflight reaches the entry in development and in production alike,
+// so this is where an application's CORS policy goes: it can allow one origin
+// for one route and refuse it for another, which no host-level setting could
+// express. This example allows nothing and only reports what it forwards.
+const preflightResponse = (): Response =>
+  new Response(null, {
+    status: 204,
+    headers: { allow: Server.HOST_METHOD_ANSWERS.allow },
+  })
+
+export const renderPage = (request: Request): Promise<Server.EntryResult> =>
+  Effect.runPromise(
+    Effect.gen(function* () {
+      if (request.method === 'OPTIONS') {
+        return Server.Responded(preflightResponse())
+      }
+
+      const renderedApplication = yield* Server.renderToString(
+        { Flags, init, view },
+        {
+          flags: flagsForRequest(request.headers.get('cookie') ?? ''),
+          buildId: import.meta.env.FOLDKIT_BUILD_ID,
+        },
+      )
+
+      return Server.Rendered(renderedApplication, {
+        headers: {
+          'cache-control': 'private, no-store',
+          vary: 'cookie',
+          'x-content-type-options': 'nosniff',
+        },
+      })
+    }),
+  )

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

@@ -0,0 +1,170 @@
+import { Effect, Schema as S } from 'effect'
+import { Command, Runtime } from 'foldkit'
+import { type Document, type Html, type HtmlBuilder } from 'foldkit/html'
+import { defineMessageUnion } 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 Message = defineMessageUnion({
+  ClickedDecrement: {},
+  ClickedIncrement: {},
+  CompletedPersistCount: {},
+})
+
+export type Message = typeof Message.Type
+
+// UPDATE
+
+export const update = (model: Model, message: Message) =>
+  Message.match<readonly [Model, ReadonlyArray<Command.Command<Message>>]>(
+    message,
+    {
+      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: [Message.CompletedPersistCount],
+  execute: ({ count }) =>
+    Effect.try(() => {
+      document.cookie = `${COUNT_COOKIE}=${count}; path=/; max-age=${COUNT_COOKIE_MAX_AGE_SECONDS}`
+    }).pipe(
+      Effect.map(() => Message.CompletedPersistCount()),
+      Effect.catch(() => Effect.succeed(Message.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: Message.ClickedDecrement(),
+              toView: attributes =>
+                h.button([...attributes.button, h.Class(buttonStyle)], ['-']),
+            },
+            h,
+          ),
+          Button.view(
+            {
+              onClick: Message.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.',
+        ],
+      ),
+      parseEquivalenceView(h),
+    ],
+  ),
+})
+
+// NOTE: elements whose served markup and whose freshly built DOM are easy to
+// get subtly different. A browser gives a later `selected` option ownership
+// while the DOM `value` setter takes the first match, and it drops one newline
+// after a <pre> or <textarea> start tag that assigning `innerHTML` would keep.
+// The e2e suite loads this page once with scripting off and once hydrated, and
+// requires the two readings to agree.
+const parseEquivalenceView = (h: HtmlBuilder<Message>): Html =>
+  h.div(
+    [h.Id('parse-equivalence'), h.Class('hidden')],
+    [
+      h.select(
+        [h.Id('equivalence-select'), h.Value('a')],
+        [
+          h.option([h.Value('a')], ['A']),
+          h.option([h.Value('a'), h.Selected(true)], ['B']),
+        ],
+      ),
+      h.pre([h.Id('equivalence-pre'), h.InnerHTML('\nleading')]),
+      h.textarea([h.Id('equivalence-textarea'), h.Value('\nleading')]),
+    ],
+  )
+
+// STYLE
+
+const buttonStyle = 'bg-black text-white hover:bg-gray-700 px-4 py-2 transition'

package/{templates/rendering → dist/templates/examples}/ssr/src/scene.test.ts

@@ -1,13 +1,7 @@
 import { Command, click, expect, given, role, scene, text } from 'foldkit/scene'
 import { describe, test } from 'vitest'
 
-import {
-  CompletedPersistCount,
-  Model,
-  PersistCount,
-  update,
-  view,
-} from './main'
+import { Message, Model, PersistCount, update, view } from './main'
 
 const initialModel = Model.make({
   count: 3,
@@ -36,7 +30,10 @@ describe('view', () => {
       click(role('button', { name: '+' })),
       expect(text('4')).toExist(),
       Command.expectHas(PersistCount({ count: 4 })),
-      Command.resolve(PersistCount({ count: 4 }), CompletedPersistCount()),
+      Command.resolve(
+        PersistCount({ count: 4 }),
+        Message.CompletedPersistCount(),
+      ),
       Command.expectNone(),
     )
   })

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

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

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

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

package/dist/templates/examples/state-machine/package.json

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

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

package/dist/templates/examples/state-machine/src/icon.ts

@@ -0,0 +1,51 @@
+import { Html, inertHtml as ih } from 'foldkit/html'
+
+const icon = (d: string, className: string): Html =>
+  ih.svg(
+    [
+      ih.AriaHidden(true),
+      ih.Class(className),
+      ih.Xmlns('http://www.w3.org/2000/svg'),
+      ih.Fill('none'),
+      ih.ViewBox('0 0 24 24'),
+      ih.StrokeWidth('1.75'),
+      ih.Stroke('currentColor'),
+    ],
+    [ih.path([ih.StrokeLinecap('round'), ih.StrokeLinejoin('round'), ih.D(d)])],
+  )
+
+export const arrowRight = (className: string = 'h-4 w-4'): Html =>
+  icon('M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3', className)
+
+export const check = (className: string = 'h-4 w-4'): Html =>
+  icon('m4.5 12.75 6 6 9-13.5', className)
+
+export const codeBracket = (className: string = 'h-4 w-4'): Html =>
+  icon(
+    'M17.25 6.75 22.5 12l-5.25 5.25M6.75 17.25 1.5 12l5.25-5.25M14.25 3.75l-4.5 16.5',
+    className,
+  )
+
+export const creditCard = (className: string = 'h-5 w-5'): Html =>
+  icon(
+    'M2.25 8.25h19.5m-18 9h16.5a1.5 1.5 0 0 0 1.5-1.5v-9a1.5 1.5 0 0 0-1.5-1.5H3.75a1.5 1.5 0 0 0-1.5 1.5v9a1.5 1.5 0 0 0 1.5 1.5Zm1.5-5.25h3',
+    className,
+  )
+
+export const download = (className: string = 'h-5 w-5'): Html =>
+  icon(
+    'M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-4.5-6L12 15m0 0-4.5-4.5M12 15V3',
+    className,
+  )
+
+export const lockClosed = (className: string = 'h-4 w-4'): Html =>
+  icon(
+    'M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 10.5h10.5a2.25 2.25 0 0 0 2.25-2.25v-6a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6A2.25 2.25 0 0 0 6.75 21Z',
+    className,
+  )
+
+export const truck = (className: string = 'h-5 w-5'): Html =>
+  icon(
+    'M8.25 18.75a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0m3 0h6.75m-9.75 0H3.75A.75.75 0 0 1 3 18V6.75A.75.75 0 0 1 3.75 6h9.75v12.75m1.5 0a1.5 1.5 0 1 1 3 0m-3 0a1.5 1.5 0 1 0 3 0m-3 0h3m0 0h2.25A.75.75 0 0 0 21 18v-5.25l-3-3H13.5',
+    className,
+  )