create-foldkit-app 0.30.1 → 0.31.0

package/dist/templates/examples/query-sync/src/main.ts

@@ -15,8 +15,8 @@ import { Command, Route, Runtime, Update } from 'foldkit'
 import { Document, Html, HtmlBuilder, childAttributes } from 'foldkit/html'
 import { defineMessageUnion } from 'foldkit/message'
 import { UrlRequest, load, pushUrl, replaceUrl } from 'foldkit/navigation'
-import { r } from 'foldkit/route'
-import { ts } from 'foldkit/schema'
+import { defineRouteUnion } from 'foldkit/route'
+import { defineTaggedUnion } from 'foldkit/schema'
 import { evo } from 'foldkit/struct'
 import { Url, toString as urlToString } from 'foldkit/url'
 
@@ -30,11 +30,12 @@ const Period = S.Literals(['Triassic', 'Jurassic', 'Cretaceous'])
 const SortColumn = S.Literals(['Name', 'Period', 'Diet', 'Length', 'Weight'])
 type SortColumn = typeof SortColumn.Type
 
-export const Unsorted = ts('Unsorted')
-export const Ascending = ts('Ascending', { column: SortColumn })
-export const Descending = ts('Descending', { column: SortColumn })
-const Sorting = S.Union([Unsorted, Ascending, Descending])
-type Sorting = typeof Sorting.Type
+export const Sorting = defineTaggedUnion({
+  Unsorted: {},
+  Ascending: { column: SortColumn },
+  Descending: { column: SortColumn },
+})
+export type Sorting = typeof Sorting.Type
 
 const dietFilterItems: ReadonlyArray<string> = ['', ...Diet.literals]
 const periodFilterItems: ReadonlyArray<string> = ['', ...Period.literals]
@@ -71,7 +72,7 @@ const sortingFromParam = (() => {
       SchemaTransformation.transform({
         decode: (maybeRaw: Option.Option<string>): Sorting =>
           Option.match(maybeRaw, {
-            onNone: () => Unsorted(),
+            onNone: () => Sorting.Unsorted(),
             onSome: value => {
               const parts = String.split(value, SORT_PARAM_SEPARATOR)
 
@@ -90,12 +91,12 @@ const sortingFromParam = (() => {
                 }),
                 Option.map(({ column, direction }) =>
                   M.value(direction).pipe(
-                    M.when('Ascending', () => Ascending({ column })),
-                    M.when('Descending', () => Descending({ column })),
+                    M.when('Ascending', () => Sorting.Ascending({ column })),
+                    M.when('Descending', () => Sorting.Descending({ column })),
                     M.exhaustive,
                   ),
                 ),
-                Option.getOrElse(() => Unsorted()),
+                Option.getOrElse(() => Sorting.Unsorted()),
               )
             },
           }),
@@ -115,19 +116,19 @@ const sortingFromParam = (() => {
   )
 })()
 
-export const BrowseRoute = r('Browse', {
-  search: S.Option(S.String),
-  sorting: Sorting,
-  diet: S.Option(Diet),
-  period: S.Option(Period),
+export const AppRoute = defineRouteUnion({
+  Browse: {
+    search: S.Option(S.String),
+    sorting: Sorting,
+    diet: S.Option(Diet),
+    period: S.Option(Period),
+  },
+  NotFound: { path: S.String },
 })
 
-export const NotFoundRoute = r('NotFound', { path: S.String })
-
-const AppRoute = S.Union([BrowseRoute, NotFoundRoute])
-type AppRoute = typeof AppRoute.Type
+export type AppRoute = typeof AppRoute.Type
 
-const browseRouter = pipe(
+export const browseRouter = pipe(
   Route.root,
   Route.query(
     S.Struct({
@@ -137,11 +138,11 @@ const browseRouter = pipe(
       period: optionFromValidParam(Period),
     }),
   ),
-  Route.mapTo(BrowseRoute),
+  Route.mapTo(AppRoute.Browse),
 )
 
 const routeParser = Route.oneOf(browseRouter)
-const urlToAppRoute = Route.parseUrlWithFallback(routeParser, NotFoundRoute)
+const urlToAppRoute = Route.parseUrlWithFallback(routeParser, AppRoute.NotFound)
 
 // MODEL
 
@@ -170,11 +171,11 @@ export type Message = typeof Message.Type
 
 // INIT
 
-type BrowseFields = Omit<typeof BrowseRoute.Type, '_tag'>
+type BrowseFields = Omit<typeof AppRoute.Browse.Type, '_tag'>
 
 const emptyBrowseFields: BrowseFields = {
   search: Option.none(),
-  sorting: Unsorted(),
+  sorting: Sorting.Unsorted(),
   diet: Option.none(),
   period: Option.none(),
 }
@@ -219,9 +220,9 @@ const nextSorting = (sorting: Sorting, column: SortColumn): Sorting =>
   pipe(
     columnSortDirection(sorting, column),
     M.value,
-    M.when('Unsorted', () => Ascending({ column })),
-    M.when('Ascending', () => Descending({ column })),
-    M.when('Descending', () => Unsorted()),
+    M.when('Unsorted', () => Sorting.Ascending({ column })),
+    M.when('Ascending', () => Sorting.Descending({ column })),
+    M.when('Descending', () => Sorting.Unsorted()),
     M.exhaustive,
   )
 
@@ -649,7 +650,7 @@ const periodLabel = (item: string): string =>
 
 const browseView = (
   model: Model,
-  route: typeof BrowseRoute.Type,
+  route: typeof AppRoute.Browse.Type,
   h: HtmlBuilder<Message>,
 ): Html => {
   const fields = routeToBrowseFields(route)

package/dist/templates/examples/query-sync/src/scene.test.ts

@@ -4,19 +4,12 @@ import { describe, test } from 'vitest'
 
 import { Listbox } from '@foldkit/ui'
 
-import {
-  BrowseRoute,
-  type Model,
-  NotFoundRoute,
-  Unsorted,
-  update,
-  view,
-} from './main'
+import { AppRoute, type Model, Sorting, update, view } from './main'
 
 const browseModel: Model = {
-  route: BrowseRoute({
+  route: AppRoute.Browse({
     search: Option.none(),
-    sorting: Unsorted(),
+    sorting: Sorting.Unsorted(),
     diet: Option.none(),
     period: Option.none(),
   }),
@@ -47,9 +40,9 @@ describe('view', () => {
       { update, view },
       given({
         ...browseModel,
-        route: BrowseRoute({
+        route: AppRoute.Browse({
           search: Option.some('Tyranno'),
-          sorting: Unsorted(),
+          sorting: Sorting.Unsorted(),
           diet: Option.none(),
           period: Option.none(),
         }),
@@ -63,9 +56,9 @@ describe('view', () => {
       { update, view },
       given({
         ...browseModel,
-        route: BrowseRoute({
+        route: AppRoute.Browse({
           search: Option.some('zzzNoMatch'),
-          sorting: Unsorted(),
+          sorting: Sorting.Unsorted(),
           diet: Option.none(),
           period: Option.none(),
         }),
@@ -79,7 +72,7 @@ describe('view', () => {
       { update, view },
       given({
         ...browseModel,
-        route: NotFoundRoute({ path: '/oops' }),
+        route: AppRoute.NotFound({ path: '/oops' }),
       }),
       expect(role('heading', { name: '404 — Page Not Found' })).toExist(),
       expect(text('The path "/oops" was not found.')).toExist(),

package/dist/templates/examples/query-sync/src/story.test.ts

@@ -7,19 +7,19 @@ import { Listbox } from '@foldkit/ui'
 import { Message as ListboxMessage } from '@foldkit/ui/listbox'
 
 import {
-  Ascending,
-  BrowseRoute,
+  AppRoute,
   Message,
   type Model,
   ReplaceFilters,
-  Unsorted,
+  Sorting,
+  browseRouter,
   update,
 } from './main'
 
 const browseModel: Model = {
-  route: BrowseRoute({
+  route: AppRoute.Browse({
     search: Option.none(),
-    sorting: Unsorted(),
+    sorting: Sorting.Unsorted(),
     diet: Option.none(),
     period: Option.none(),
   }),
@@ -33,6 +33,19 @@ const urlOrThrow = (raw: string) =>
     () => new Error(`Failed to parse url: ${raw}`),
   )
 
+describe('routing', () => {
+  test('prints sorting in the same format the parser accepts', () => {
+    const path = browseRouter({
+      search: Option.none(),
+      sorting: Sorting.Ascending({ column: 'Length' }),
+      diet: Option.none(),
+      period: Option.none(),
+    })
+
+    expect(decodeURIComponent(path)).toBe('/?sorting=Length:Ascending')
+  })
+})
+
 describe('update', () => {
   describe('ChangedUrl', () => {
     test('parses search, sorting, diet, and period from the URL', () => {
@@ -52,7 +65,7 @@ describe('update', () => {
           }
           expect(model.route.search).toStrictEqual(Option.some('raptor'))
           expect(model.route.sorting).toStrictEqual(
-            Ascending({ column: 'Length' }),
+            Sorting.Ascending({ column: 'Length' }),
           )
           expect(model.route.diet).toStrictEqual(Option.some('Carnivore'))
           expect(model.route.period).toStrictEqual(Option.some('Cretaceous'))
@@ -92,9 +105,9 @@ describe('update', () => {
         update,
         given({
           ...browseModel,
-          route: BrowseRoute({
+          route: AppRoute.Browse({
             search: Option.some('foo'),
-            sorting: Unsorted(),
+            sorting: Sorting.Unsorted(),
             diet: Option.none(),
             period: Option.none(),
           }),

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

@@ -12,7 +12,7 @@ import { Document, Html, HtmlBuilder } from 'foldkit/html'
 import { defineMessageUnion } from 'foldkit/message'
 import { UrlRequest, load, pushUrl } from 'foldkit/navigation'
 import { Transition } from 'foldkit/route'
-import { ts } from 'foldkit/schema'
+import { defineTaggedUnion } from 'foldkit/schema'
 import { evo } from 'foldkit/struct'
 import { Url, toString as urlToString } from 'foldkit/url'
 
@@ -26,14 +26,7 @@ import {
   urlToAppRoute,
 } from './route'
 
-export {
-  AppRoute,
-  GalleryRoute,
-  HomeRoute,
-  NotFoundRoute,
-  PaintingRoute,
-  StudioRoute,
-} from './route'
+export { AppRoute } from './route'
 
 const CATALOG_LATENCY = Duration.millis(600)
 const PAINTING_LATENCY = Duration.millis(400)
@@ -45,15 +38,11 @@ const MAX_LOGGED_TRANSITIONS = 20
 export const CatalogStatus = S.Literals(['Idle', 'Loading', 'Ready'])
 export type CatalogStatus = typeof CatalogStatus.Type
 
-export const PaintingIdle = ts('PaintingIdle')
-export const PaintingLoading = ts('PaintingLoading', { paintingId: S.Number })
-export const PaintingReady = ts('PaintingReady', { paintingId: S.Number })
-
-export const PaintingStatus = S.Union([
-  PaintingIdle,
-  PaintingLoading,
-  PaintingReady,
-])
+export const PaintingStatus = defineTaggedUnion({
+  Idle: {},
+  Loading: { paintingId: S.Number },
+  Ready: { paintingId: S.Number },
+})
 export type PaintingStatus = typeof PaintingStatus.Type
 
 export const LoggedTransition = S.Struct({
@@ -180,7 +169,7 @@ const loadPaintingOnEntry =
       onNone: () => ({ model }),
       onSome: ({ paintingId }) => ({
         model: evo(model, {
-          paintingStatus: () => PaintingLoading({ paintingId }),
+          paintingStatus: () => PaintingStatus.Loading({ paintingId }),
         }),
         commands: [LoadPainting({ paintingId })],
       }),
@@ -197,7 +186,9 @@ const reloadPaintingOnIdChange =
           : {
               model: evo(model, {
                 paintingStatus: () =>
-                  PaintingLoading({ paintingId: nextRoute.paintingId }),
+                  PaintingStatus.Loading({
+                    paintingId: nextRoute.paintingId,
+                  }),
               }),
               commands: [LoadPainting({ paintingId: nextRoute.paintingId })],
             },
@@ -260,11 +251,11 @@ export const update = (model: Model, message: Message) =>
     }),
 
     SucceededLoadPainting: ({ paintingId }) =>
-      model.paintingStatus._tag === 'PaintingLoading' &&
+      model.paintingStatus._tag === 'Loading' &&
       model.paintingStatus.paintingId === paintingId
         ? {
             model: evo(model, {
-              paintingStatus: () => PaintingReady({ paintingId }),
+              paintingStatus: () => PaintingStatus.Ready({ paintingId }),
             }),
           }
         : { model },
@@ -288,7 +279,7 @@ export const init: Runtime.RoutingApplicationInit<Model, Message> = (
     route,
     transitionLog: [],
     catalogStatus: 'Idle',
-    paintingStatus: PaintingIdle(),
+    paintingStatus: PaintingStatus.Idle(),
     studioDraft: '',
     maybeSavedDraft: Option.none(),
   })
@@ -544,8 +535,7 @@ const foundPaintingView = (
   h: HtmlBuilder<Message>,
 ): Html => {
   const isPaintingReady =
-    paintingStatus._tag === 'PaintingReady' &&
-    paintingStatus.paintingId === painting.id
+    paintingStatus._tag === 'Ready' && paintingStatus.paintingId === painting.id
 
   return h.div(
     [],

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

@@ -1,39 +1,34 @@
 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
+import { defineRouteUnion, int, literal, slash } from 'foldkit/route'
+
+export const AppRoute = defineRouteUnion({
+  Home: {},
+  Gallery: {},
+  Painting: { paintingId: S.Number },
+  Studio: {},
+  NotFound: { path: S.String },
+})
+
 export type AppRoute = typeof AppRoute.Type
 
-export const homeRouter = pipe(Route.root, Route.mapTo(HomeRoute))
+export const homeRouter = pipe(Route.root, Route.mapTo(AppRoute.Home))
 
-export const galleryRouter = pipe(literal('gallery'), Route.mapTo(GalleryRoute))
+export const galleryRouter = pipe(
+  literal('gallery'),
+  Route.mapTo(AppRoute.Gallery),
+)
 
 export const paintingRouter = pipe(
   literal('gallery'),
   slash(int('paintingId')),
-  Route.mapTo(PaintingRoute),
+  Route.mapTo(AppRoute.Painting),
 )
 
-export const studioRouter = pipe(literal('studio'), Route.mapTo(StudioRoute))
+export const studioRouter = pipe(
+  literal('studio'),
+  Route.mapTo(AppRoute.Studio),
+)
 
 const routeParser = Route.oneOf(
   paintingRouter,
@@ -44,5 +39,5 @@ const routeParser = Route.oneOf(
 
 export const urlToAppRoute = Route.parseUrlWithFallback(
   routeParser,
-  NotFoundRoute,
+  AppRoute.NotFound,
 )

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

@@ -6,18 +6,12 @@ import { describe, expect, test } from 'vitest'
 
 import {
   AppRoute,
-  GalleryRoute,
-  HomeRoute,
   LoadCatalog,
   LoadPainting,
   Message,
   Model,
-  PaintingIdle,
-  PaintingLoading,
-  PaintingReady,
-  PaintingRoute,
+  PaintingStatus,
   SaveDraft,
-  StudioRoute,
   init,
   update,
 } from './main'
@@ -33,7 +27,7 @@ const modelOn = (route: AppRoute): Model =>
     route,
     transitionLog: [],
     catalogStatus: 'Idle',
-    paintingStatus: PaintingIdle(),
+    paintingStatus: PaintingStatus.Idle(),
     studioDraft: '',
     maybeSavedDraft: Option.none(),
   })
@@ -67,7 +61,7 @@ describe('update', () => {
   test('entering the gallery loads the catalog and logs the transition', () => {
     story(
       update,
-      given(modelOn(HomeRoute())),
+      given(modelOn(AppRoute.Home())),
       message(
         Message.ChangedUrl({ url: urlOrThrow('http://localhost/gallery') }),
       ),
@@ -87,7 +81,7 @@ describe('update', () => {
   test('re-entering the gallery while a catalog load is in flight does not fire another', () => {
     story(
       update,
-      given(evo(modelOn(HomeRoute()), { catalogStatus: () => 'Loading' })),
+      given(evo(modelOn(AppRoute.Home()), { catalogStatus: () => 'Loading' })),
       message(
         Message.ChangedUrl({ url: urlOrThrow('http://localhost/gallery') }),
       ),
@@ -101,13 +95,13 @@ describe('update', () => {
   test('entering a painting loads it with the payload from the route', () => {
     story(
       update,
-      given(modelOn(GalleryRoute())),
+      given(modelOn(AppRoute.Gallery())),
       message(
         Message.ChangedUrl({ url: urlOrThrow('http://localhost/gallery/3') }),
       ),
       model(model => {
         expect(model.paintingStatus).toStrictEqual(
-          PaintingLoading({ paintingId: 3 }),
+          PaintingStatus.Loading({ paintingId: 3 }),
         )
       }),
       Command.expectHas(LoadPainting),
@@ -117,7 +111,7 @@ describe('update', () => {
       ),
       model(model => {
         expect(model.paintingStatus).toStrictEqual(
-          PaintingReady({ paintingId: 3 }),
+          PaintingStatus.Ready({ paintingId: 3 }),
         )
       }),
     )
@@ -127,8 +121,8 @@ describe('update', () => {
     story(
       update,
       given(
-        evo(modelOn(PaintingRoute({ paintingId: 1 })), {
-          paintingStatus: () => PaintingReady({ paintingId: 1 }),
+        evo(modelOn(AppRoute.Painting({ paintingId: 1 })), {
+          paintingStatus: () => PaintingStatus.Ready({ paintingId: 1 }),
         }),
       ),
       message(
@@ -136,11 +130,11 @@ describe('update', () => {
       ),
       model(model => {
         expect(model.paintingStatus).toStrictEqual(
-          PaintingLoading({ paintingId: 2 }),
+          PaintingStatus.Loading({ paintingId: 2 }),
         )
         expect(
           Array.map(model.transitionLog, entry => entry.maybePreviousRoute),
-        ).toStrictEqual([Option.some(PaintingRoute({ paintingId: 1 }))])
+        ).toStrictEqual([Option.some(AppRoute.Painting({ paintingId: 1 }))])
       }),
       Command.expectHas(LoadPainting),
       Command.resolve(
@@ -149,7 +143,7 @@ describe('update', () => {
       ),
       model(model => {
         expect(model.paintingStatus).toStrictEqual(
-          PaintingReady({ paintingId: 2 }),
+          PaintingStatus.Ready({ paintingId: 2 }),
         )
       }),
     )
@@ -159,8 +153,8 @@ describe('update', () => {
     story(
       update,
       given(
-        evo(modelOn(PaintingRoute({ paintingId: 1 })), {
-          paintingStatus: () => PaintingReady({ paintingId: 1 }),
+        evo(modelOn(AppRoute.Painting({ paintingId: 1 })), {
+          paintingStatus: () => PaintingStatus.Ready({ paintingId: 1 }),
         }),
       ),
       message(
@@ -169,7 +163,7 @@ describe('update', () => {
       Command.expectNone(),
       model(model => {
         expect(model.paintingStatus).toStrictEqual(
-          PaintingReady({ paintingId: 1 }),
+          PaintingStatus.Ready({ paintingId: 1 }),
         )
       }),
     )
@@ -179,14 +173,14 @@ describe('update', () => {
     story(
       update,
       given(
-        evo(modelOn(PaintingRoute({ paintingId: 2 })), {
-          paintingStatus: () => PaintingLoading({ paintingId: 2 }),
+        evo(modelOn(AppRoute.Painting({ paintingId: 2 })), {
+          paintingStatus: () => PaintingStatus.Loading({ paintingId: 2 }),
         }),
       ),
       message(Message.SucceededLoadPainting({ paintingId: 1 })),
       model(model => {
         expect(model.paintingStatus).toStrictEqual(
-          PaintingLoading({ paintingId: 2 }),
+          PaintingStatus.Loading({ paintingId: 2 }),
         )
       }),
     )
@@ -196,7 +190,7 @@ describe('update', () => {
     story(
       update,
       given(
-        evo(modelOn(StudioRoute()), {
+        evo(modelOn(AppRoute.Studio()), {
           studioDraft: () => 'half-finished thought',
         }),
       ),
@@ -217,7 +211,7 @@ describe('update', () => {
   test('leaving the studio with an empty draft saves nothing', () => {
     story(
       update,
-      given(modelOn(StudioRoute())),
+      given(modelOn(AppRoute.Studio())),
       message(Message.ChangedUrl({ url: urlOrThrow('http://localhost/') })),
       Command.expectNone(),
     )

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

@@ -1,5 +1,5 @@
 import { Array, Match as M, Option, Schema as S, pipe } from 'effect'
-import { ts } from 'foldkit/schema'
+import { taggedStruct } from 'foldkit/schema'
 
 export type File = typeof File.Type
 export type Directory = Readonly<{
@@ -9,12 +9,12 @@ export type Directory = Readonly<{
 }>
 export type FileTreeEntry = File | Directory
 
-export const File = ts('File', {
+export const File = taggedStruct('File', {
   name: S.String,
   sizeInBytes: S.Number,
 })
 
-export const Directory = ts('Directory', {
+export const Directory = taggedStruct('Directory', {
   name: S.String,
   entries: S.Array(S.suspend((): S.Codec<FileTreeEntry> => FileTreeEntry)),
 })

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

@@ -16,7 +16,6 @@ import {
 import { People } from './page'
 import {
   AppRoute,
-  PeopleRoute,
   filesIndexRouter,
   filesRouter,
   homeRouter,
@@ -25,16 +24,7 @@ import {
   urlToAppRoute,
 } from './route'
 
-export {
-  AppRoute,
-  FilesIndexRoute,
-  FilesRoute,
-  HomeRoute,
-  NestedRoute,
-  NotFoundRoute,
-  PeopleRoute,
-  PersonRoute,
-} from './route'
+export { AppRoute } from './route'
 
 // MODEL
 
@@ -66,7 +56,7 @@ export const init: Runtime.RoutingApplicationInit<Model, Message> = (
 
   const initialPeopleRoute = M.value(route).pipe(
     M.tag('People', peopleRoute => peopleRoute),
-    M.orElse(() => PeopleRoute({ searchText: Option.none() })),
+    M.orElse(() => AppRoute.People({ searchText: Option.none() })),
   )
 
   const peopleInit = People.init(initialPeopleRoute)