create-foldkit-app 0.27.3 → 0.28.0

package/dist/templates/examples/route-transitions/src/route.ts

@@ -0,0 +1,48 @@
+import { Schema as S, pipe } from 'effect'
+import { Route } from 'foldkit'
+import { int, literal, r, slash } from 'foldkit/route'
+
+export const HomeRoute = r('Home')
+export const GalleryRoute = r('Gallery')
+export const PaintingRoute = r('Painting', { paintingId: S.Number })
+export const StudioRoute = r('Studio')
+export const NotFoundRoute = r('NotFound', { path: S.String })
+
+export const AppRoute = S.Union([
+  HomeRoute,
+  GalleryRoute,
+  PaintingRoute,
+  StudioRoute,
+  NotFoundRoute,
+])
+
+export type HomeRoute = typeof HomeRoute.Type
+export type GalleryRoute = typeof GalleryRoute.Type
+export type PaintingRoute = typeof PaintingRoute.Type
+export type StudioRoute = typeof StudioRoute.Type
+export type NotFoundRoute = typeof NotFoundRoute.Type
+export type AppRoute = typeof AppRoute.Type
+
+export const homeRouter = pipe(Route.root, Route.mapTo(HomeRoute))
+
+export const galleryRouter = pipe(literal('gallery'), Route.mapTo(GalleryRoute))
+
+export const paintingRouter = pipe(
+  literal('gallery'),
+  slash(int('paintingId')),
+  Route.mapTo(PaintingRoute),
+)
+
+export const studioRouter = pipe(literal('studio'), Route.mapTo(StudioRoute))
+
+const routeParser = Route.oneOf(
+  paintingRouter,
+  galleryRouter,
+  studioRouter,
+  homeRouter,
+)
+
+export const urlToAppRoute = Route.parseUrlWithFallback(
+  routeParser,
+  NotFoundRoute,
+)

package/dist/templates/examples/route-transitions/src/story.test.ts

@@ -0,0 +1,225 @@
+import { Array, Option } from 'effect'
+import { Command, given, message, model, story } from 'foldkit/story'
+import { evo } from 'foldkit/struct'
+import { fromString } from 'foldkit/url'
+import { describe, expect, test } from 'vitest'
+
+import {
+  AppRoute,
+  GalleryRoute,
+  HomeRoute,
+  LoadCatalog,
+  LoadPainting,
+  Message,
+  Model,
+  PaintingIdle,
+  PaintingLoading,
+  PaintingReady,
+  PaintingRoute,
+  SaveDraft,
+  StudioRoute,
+  init,
+  update,
+} from './main'
+
+const urlOrThrow = (raw: string) =>
+  Option.getOrThrowWith(
+    fromString(raw),
+    () => new Error(`Failed to parse url: ${raw}`),
+  )
+
+const modelOn = (route: AppRoute): Model =>
+  Model.make({
+    route,
+    transitionLog: [],
+    catalogStatus: 'Idle',
+    paintingStatus: PaintingIdle(),
+    studioDraft: '',
+    maybeSavedDraft: Option.none(),
+  })
+
+describe('init', () => {
+  test('a cold load into the gallery logs the transition and loads the catalog', () => {
+    const [model, commands] = init(urlOrThrow('http://localhost/gallery'))
+
+    expect(model.route._tag).toBe('Gallery')
+    expect(model.catalogStatus).toBe('Loading')
+    expect(model.transitionLog).toHaveLength(1)
+    expect(
+      Array.map(model.transitionLog, entry => entry.maybePreviousRoute),
+    ).toStrictEqual([Option.none()])
+    expect(Array.map(commands, command => command.name)).toContain(
+      'LoadCatalog',
+    )
+  })
+
+  test('a cold load into the home route loads nothing', () => {
+    const [model, commands] = init(urlOrThrow('http://localhost/'))
+
+    expect(model.route._tag).toBe('Home')
+    expect(model.catalogStatus).toBe('Idle')
+    expect(model.transitionLog).toHaveLength(1)
+    expect(commands).toStrictEqual([])
+  })
+})
+
+describe('update', () => {
+  test('entering the gallery loads the catalog and logs the transition', () => {
+    story(
+      update,
+      given(modelOn(HomeRoute())),
+      message(
+        Message.ChangedUrl({ url: urlOrThrow('http://localhost/gallery') }),
+      ),
+      model(model => {
+        expect(model.route._tag).toBe('Gallery')
+        expect(model.catalogStatus).toBe('Loading')
+        expect(model.transitionLog).toHaveLength(1)
+      }),
+      Command.expectHas(LoadCatalog),
+      Command.resolve(LoadCatalog, Message.SucceededLoadCatalog()),
+      model(model => {
+        expect(model.catalogStatus).toBe('Ready')
+      }),
+    )
+  })
+
+  test('re-entering the gallery while a catalog load is in flight does not fire another', () => {
+    story(
+      update,
+      given(evo(modelOn(HomeRoute()), { catalogStatus: () => 'Loading' })),
+      message(
+        Message.ChangedUrl({ url: urlOrThrow('http://localhost/gallery') }),
+      ),
+      Command.expectNone(),
+      model(model => {
+        expect(model.catalogStatus).toBe('Loading')
+      }),
+    )
+  })
+
+  test('entering a painting loads it with the payload from the route', () => {
+    story(
+      update,
+      given(modelOn(GalleryRoute())),
+      message(
+        Message.ChangedUrl({ url: urlOrThrow('http://localhost/gallery/3') }),
+      ),
+      model(model => {
+        expect(model.paintingStatus).toStrictEqual(
+          PaintingLoading({ paintingId: 3 }),
+        )
+      }),
+      Command.expectHas(LoadPainting),
+      Command.resolve(
+        LoadPainting,
+        Message.SucceededLoadPainting({ paintingId: 3 }),
+      ),
+      model(model => {
+        expect(model.paintingStatus).toStrictEqual(
+          PaintingReady({ paintingId: 3 }),
+        )
+      }),
+    )
+  })
+
+  test('staying on the painting route with a new id refetches', () => {
+    story(
+      update,
+      given(
+        evo(modelOn(PaintingRoute({ paintingId: 1 })), {
+          paintingStatus: () => PaintingReady({ paintingId: 1 }),
+        }),
+      ),
+      message(
+        Message.ChangedUrl({ url: urlOrThrow('http://localhost/gallery/2') }),
+      ),
+      model(model => {
+        expect(model.paintingStatus).toStrictEqual(
+          PaintingLoading({ paintingId: 2 }),
+        )
+        expect(
+          Array.map(model.transitionLog, entry => entry.maybePreviousRoute),
+        ).toStrictEqual([Option.some(PaintingRoute({ paintingId: 1 }))])
+      }),
+      Command.expectHas(LoadPainting),
+      Command.resolve(
+        LoadPainting,
+        Message.SucceededLoadPainting({ paintingId: 2 }),
+      ),
+      model(model => {
+        expect(model.paintingStatus).toStrictEqual(
+          PaintingReady({ paintingId: 2 }),
+        )
+      }),
+    )
+  })
+
+  test('staying on the painting route with the same id does not refetch', () => {
+    story(
+      update,
+      given(
+        evo(modelOn(PaintingRoute({ paintingId: 1 })), {
+          paintingStatus: () => PaintingReady({ paintingId: 1 }),
+        }),
+      ),
+      message(
+        Message.ChangedUrl({ url: urlOrThrow('http://localhost/gallery/1') }),
+      ),
+      Command.expectNone(),
+      model(model => {
+        expect(model.paintingStatus).toStrictEqual(
+          PaintingReady({ paintingId: 1 }),
+        )
+      }),
+    )
+  })
+
+  test('a stale painting response for another id is ignored', () => {
+    story(
+      update,
+      given(
+        evo(modelOn(PaintingRoute({ paintingId: 2 })), {
+          paintingStatus: () => PaintingLoading({ paintingId: 2 }),
+        }),
+      ),
+      message(Message.SucceededLoadPainting({ paintingId: 1 })),
+      model(model => {
+        expect(model.paintingStatus).toStrictEqual(
+          PaintingLoading({ paintingId: 2 }),
+        )
+      }),
+    )
+  })
+
+  test('leaving the studio saves the draft', () => {
+    story(
+      update,
+      given(
+        evo(modelOn(StudioRoute()), {
+          studioDraft: () => 'half-finished thought',
+        }),
+      ),
+      message(Message.ChangedUrl({ url: urlOrThrow('http://localhost/') })),
+      Command.expectHas(SaveDraft),
+      Command.resolve(
+        SaveDraft,
+        Message.SucceededSaveDraft({ draft: 'half-finished thought' }),
+      ),
+      model(model => {
+        expect(model.maybeSavedDraft).toStrictEqual(
+          Option.some('half-finished thought'),
+        )
+      }),
+    )
+  })
+
+  test('leaving the studio with an empty draft saves nothing', () => {
+    story(
+      update,
+      given(modelOn(StudioRoute())),
+      message(Message.ChangedUrl({ url: urlOrThrow('http://localhost/') })),
+      Command.expectNone(),
+    )
+  })
+})

package/dist/templates/examples/route-transitions/src/styles.css

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

package/dist/templates/examples/route-transitions/src/vitest-setup.ts

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

package/dist/templates/examples/routing/package.json

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

@@ -0,0 +1,20 @@
+import { Runtime } from 'foldkit'
+
+import { Message, Model, init, update, view } from './main'
+
+const application = Runtime.makeApplication({
+  Model,
+  init,
+  update,
+  view,
+  container: document.getElementById('root'),
+  routing: {
+    onUrlRequest: request => Message.ClickedLink({ request }),
+    onUrlChange: url => Message.ChangedUrl({ url }),
+  },
+  devTools: {
+    Message,
+  },
+})
+
+Runtime.run(application)

package/dist/templates/examples/routing/src/fileTree.ts

@@ -0,0 +1,98 @@
+import { Array, Match as M, Option, Schema as S, pipe } from 'effect'
+import { ts } from 'foldkit/schema'
+
+export type File = typeof File.Type
+export type Directory = Readonly<{
+  _tag: 'Directory'
+  name: string
+  entries: ReadonlyArray<FileTreeEntry>
+}>
+export type FileTreeEntry = File | Directory
+
+export const File = ts('File', {
+  name: S.String,
+  sizeInBytes: S.Number,
+})
+
+export const Directory = ts('Directory', {
+  name: S.String,
+  entries: S.Array(S.suspend((): S.Codec<FileTreeEntry> => FileTreeEntry)),
+})
+
+export const FileTreeEntry = S.Union([File, Directory])
+
+export const fileTree: ReadonlyArray<FileTreeEntry> = [
+  Directory({
+    name: 'documents',
+    entries: [
+      File({ name: 'resume.pdf', sizeInBytes: 48_230 }),
+      Directory({
+        name: 'taxes',
+        entries: [
+          File({ name: '2024.pdf', sizeInBytes: 182_400 }),
+          File({ name: '2025.pdf', sizeInBytes: 196_812 }),
+        ],
+      }),
+    ],
+  }),
+  Directory({
+    name: 'photos',
+    entries: [
+      Directory({
+        name: 'vacation',
+        entries: [
+          File({ name: 'beach.jpg', sizeInBytes: 2_348_100 }),
+          File({ name: 'sunset.jpg', sizeInBytes: 1_982_450 }),
+        ],
+      }),
+    ],
+  }),
+  File({ name: 'notes.txt', sizeInBytes: 1_204 }),
+]
+
+const findDirectoryEntries = (
+  entries: ReadonlyArray<FileTreeEntry>,
+  name: string,
+): Option.Option<ReadonlyArray<FileTreeEntry>> =>
+  pipe(
+    Array.findFirst(entries, entry => entry.name === name),
+    Option.flatMap(entry =>
+      M.value(entry).pipe(
+        M.tagsExhaustive({
+          File: () => Option.none(),
+          Directory: directory => Option.some(directory.entries),
+        }),
+      ),
+    ),
+  )
+
+export const findEntry = (
+  path: Array.NonEmptyReadonlyArray<string>,
+): Option.Option<FileTreeEntry> => {
+  const [parentSegments, entryName] = Array.unappend(path)
+
+  return pipe(
+    parentSegments,
+    Array.reduce(Option.some(fileTree), (maybeEntries, segment) =>
+      Option.flatMap(maybeEntries, entries =>
+        findDirectoryEntries(entries, segment),
+      ),
+    ),
+    Option.flatMap(entries =>
+      Array.findFirst(entries, entry => entry.name === entryName),
+    ),
+  )
+}
+
+const BYTES_PER_KILOBYTE = 1024
+const BYTES_PER_MEGABYTE = BYTES_PER_KILOBYTE * 1024
+
+export const formatFileSize = (sizeInBytes: number): string => {
+  if (sizeInBytes >= BYTES_PER_MEGABYTE) {
+    return `${(sizeInBytes / BYTES_PER_MEGABYTE).toFixed(1)} MB`
+  } else if (sizeInBytes >= BYTES_PER_KILOBYTE) {
+    return `${(sizeInBytes / BYTES_PER_KILOBYTE).toFixed(1)} KB`
+  } else {
+    return `${sizeInBytes} B`
+  }
+}