create-foldkit-app 0.30.1 → 0.31.0

package/dist/templates/examples/routing/src/page/people.ts

@@ -12,12 +12,17 @@ import { Command, Submodel, type Update } from 'foldkit'
 import { Html, HtmlBuilder } from 'foldkit/html'
 import { defineMessageUnion } from 'foldkit/message'
 import { pushUrl } from 'foldkit/navigation'
-import { ts } from 'foldkit/schema'
+import { defineTaggedUnion } from 'foldkit/schema'
 import { evo } from 'foldkit/struct'
 
 import { Button, Input } from '@foldkit/ui'
 
-import { PeopleRoute, peopleRouter, personRouter } from '../route'
+import {
+  AppRoute,
+  type PeopleRoute,
+  peopleRouter,
+  personRouter,
+} from '../route'
 
 // DOMAIN
 
@@ -77,13 +82,10 @@ export const findPerson = (id: number) =>
 
 // MODEL
 
-export const SearchLoading = ts('SearchLoading')
-export const SearchLoaded = ts('SearchLoaded', {
-  query: S.String,
-  people: S.Array(Person),
+export const SearchResults = defineTaggedUnion({
+  Loading: {},
+  Loaded: { query: S.String, people: S.Array(Person) },
 })
-
-export const SearchResults = S.Union([SearchLoading, SearchLoaded])
 export type SearchResults = typeof SearchResults.Type
 
 export const Model = S.Struct({
@@ -98,7 +100,7 @@ export type Model = typeof Model.Type
 export const Message = defineMessageUnion({
   ChangedSearchInput: { value: S.String },
   SubmittedSearch: {},
-  ChangedRoute: { route: PeopleRoute },
+  ChangedRoute: { route: AppRoute.People },
   SucceededFetchPeople: {
     query: S.String,
     people: S.Array(Person),
@@ -118,7 +120,7 @@ export const init = (route: PeopleRoute): InitReturn => {
     model: {
       searchInput: searchText,
       searchHistory: addSearchToHistory([], searchText),
-      results: SearchLoading(),
+      results: SearchResults.Loading(),
     },
     commands: [FetchPeople({ searchText })],
   }
@@ -175,7 +177,7 @@ export const update = (model: Model, message: Message) =>
           searchInput: () => searchText,
           searchHistory: searchHistory =>
             addSearchToHistory(searchHistory, searchText),
-          results: () => SearchLoading(),
+          results: () => SearchResults.Loading(),
         }),
         commands: [FetchPeople({ searchText })],
       }
@@ -183,7 +185,7 @@ export const update = (model: Model, message: Message) =>
 
     SucceededFetchPeople: ({ query, people: fetchedPeople }) => ({
       model: evo(model, {
-        results: () => SearchLoaded({ query, people: fetchedPeople }),
+        results: () => SearchResults.Loaded({ query, people: fetchedPeople }),
       }),
     }),
 
@@ -203,8 +205,8 @@ export const informRouteChanged = (model: Model, route: PeopleRoute) =>
 const statusText = (results: SearchResults): string =>
   M.value(results).pipe(
     M.withReturnType<string>(),
-    M.tag('SearchLoading', () => 'Searching…'),
-    M.tag('SearchLoaded', ({ query, people: found }) => {
+    M.tag('Loading', () => 'Searching…'),
+    M.tag('Loaded', ({ query, people: found }) => {
       if (String.isEmpty(query)) {
         return 'Click on any person to view their details:'
       }
@@ -330,8 +332,8 @@ export const view = Submodel.defineView<Model, Message>(
         ),
 
         M.value(model.results).pipe(
-          M.tag('SearchLoading', () => h.empty),
-          M.tag('SearchLoaded', ({ people: results }) =>
+          M.tag('Loading', () => h.empty),
+          M.tag('Loaded', ({ people: results }) =>
             h.ul(
               [h.Class('space-y-3')],
               Array.map(results, person => personListItemView(person, h)),

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

@@ -1,35 +1,21 @@
 import { Schema as S, pipe } from 'effect'
 import { Route } from 'foldkit'
-import { int, literal, r, rest, slash } from 'foldkit/route'
+import { defineRouteUnion, int, literal, rest, slash } from 'foldkit/route'
 
-export const HomeRoute = r('Home')
-export const NestedRoute = r('Nested')
-export const PeopleRoute = r('People', { searchText: S.Option(S.String) })
-export const PersonRoute = r('Person', { personId: S.Number })
-export const FilesIndexRoute = r('FilesIndex')
-export const FilesRoute = r('Files', { path: S.NonEmptyArray(S.String) })
-export const NotFoundRoute = r('NotFound', { path: S.String })
+export const AppRoute = defineRouteUnion({
+  Home: {},
+  Nested: {},
+  People: { searchText: S.Option(S.String) },
+  Person: { personId: S.Number },
+  FilesIndex: {},
+  Files: { path: S.NonEmptyArray(S.String) },
+  NotFound: { path: S.String },
+})
 
-export const AppRoute = S.Union([
-  HomeRoute,
-  NestedRoute,
-  PeopleRoute,
-  PersonRoute,
-  FilesIndexRoute,
-  FilesRoute,
-  NotFoundRoute,
-])
-
-export type HomeRoute = typeof HomeRoute.Type
-export type NestedRoute = typeof NestedRoute.Type
-export type PeopleRoute = typeof PeopleRoute.Type
-export type PersonRoute = typeof PersonRoute.Type
-export type FilesIndexRoute = typeof FilesIndexRoute.Type
-export type FilesRoute = typeof FilesRoute.Type
-export type NotFoundRoute = typeof NotFoundRoute.Type
 export type AppRoute = typeof AppRoute.Type
+export type PeopleRoute = typeof AppRoute.People.Type
 
-export const homeRouter = pipe(Route.root, Route.mapTo(HomeRoute))
+export const homeRouter = pipe(Route.root, Route.mapTo(AppRoute.Home))
 
 export const nestedRouter = pipe(
   literal('nested'),
@@ -37,7 +23,7 @@ export const nestedRouter = pipe(
   slash(literal('is')),
   slash(literal('very')),
   slash(literal('nested')),
-  Route.mapTo(NestedRoute),
+  Route.mapTo(AppRoute.Nested),
 )
 
 export const peopleRouter = pipe(
@@ -47,24 +33,24 @@ export const peopleRouter = pipe(
       searchText: S.OptionFromOptional(S.String),
     }),
   ),
-  Route.mapTo(PeopleRoute),
+  Route.mapTo(AppRoute.People),
 )
 
 export const personRouter = pipe(
   literal('people'),
   slash(int('personId')),
-  Route.mapTo(PersonRoute),
+  Route.mapTo(AppRoute.Person),
 )
 
 export const filesIndexRouter = pipe(
   literal('files'),
-  Route.mapTo(FilesIndexRoute),
+  Route.mapTo(AppRoute.FilesIndex),
 )
 
 export const filesRouter = pipe(
   literal('files'),
   slash(rest('path')),
-  Route.mapTo(FilesRoute),
+  Route.mapTo(AppRoute.Files),
 )
 
 const routeParser = Route.oneOf(
@@ -78,5 +64,5 @@ const routeParser = Route.oneOf(
 
 export const urlToAppRoute = Route.parseUrlWithFallback(
   routeParser,
-  NotFoundRoute,
+  AppRoute.NotFound,
 )

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

@@ -2,25 +2,14 @@ import { Array, Option, String } from 'effect'
 import { expect, given, role, scene, text } from 'foldkit/scene'
 import { describe, test } from 'vitest'
 
-import {
-  FilesIndexRoute,
-  FilesRoute,
-  HomeRoute,
-  Model,
-  NestedRoute,
-  NotFoundRoute,
-  PeopleRoute,
-  PersonRoute,
-  update,
-  view,
-} from './main'
+import { AppRoute, Model, update, view } from './main'
 import { People } from './page'
 
 const peoplePageWith = (searchInput: string) =>
   People.Model.make({
     searchInput,
     searchHistory: Array.liftPredicate(String.isNonEmpty)(searchInput),
-    results: People.SearchLoaded({
+    results: People.SearchResults.Loaded({
       query: searchInput,
       people: People.searchPeople(searchInput),
     }),
@@ -28,35 +17,38 @@ const peoplePageWith = (searchInput: string) =>
 
 const initialPeoplePage = peoplePageWith('')
 
-const home = Model.make({ route: HomeRoute(), peoplePage: initialPeoplePage })
+const home = Model.make({
+  route: AppRoute.Home(),
+  peoplePage: initialPeoplePage,
+})
 const people = (searchInput: string) =>
   Model.make({
-    route: PeopleRoute({
+    route: AppRoute.People({
       searchText: Option.liftPredicate(String.isNonEmpty)(searchInput),
     }),
     peoplePage: peoplePageWith(searchInput),
   })
 const person = (personId: number) =>
   Model.make({
-    route: PersonRoute({ personId }),
+    route: AppRoute.Person({ personId }),
     peoplePage: initialPeoplePage,
   })
 const nested = Model.make({
-  route: NestedRoute(),
+  route: AppRoute.Nested(),
   peoplePage: initialPeoplePage,
 })
 const filesIndex = Model.make({
-  route: FilesIndexRoute(),
+  route: AppRoute.FilesIndex(),
   peoplePage: initialPeoplePage,
 })
 const files = (path: Array.NonEmptyReadonlyArray<string>) =>
   Model.make({
-    route: FilesRoute({ path }),
+    route: AppRoute.Files({ path }),
     peoplePage: initialPeoplePage,
   })
 const notFound = (path: string) =>
   Model.make({
-    route: NotFoundRoute({ path }),
+    route: AppRoute.NotFound({ path }),
     peoplePage: initialPeoplePage,
   })
 

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

@@ -3,7 +3,7 @@ import { Command, given, message, model, story } from 'foldkit/story'
 import { fromString } from 'foldkit/url'
 import { describe, expect, test } from 'vitest'
 
-import { HomeRoute, Message, Model, PeopleRoute, update } from './main'
+import { AppRoute, Message, Model, update } from './main'
 import { People } from './page'
 import { Message as PeopleMessage } from './page/people'
 
@@ -11,7 +11,7 @@ const peoplePageWith = (searchInput: string) =>
   People.Model.make({
     searchInput,
     searchHistory: Array.liftPredicate(String.isNonEmpty)(searchInput),
-    results: People.SearchLoaded({
+    results: People.SearchResults.Loaded({
       query: searchInput,
       people: People.searchPeople(searchInput),
     }),
@@ -19,11 +19,14 @@ const peoplePageWith = (searchInput: string) =>
 
 const initialPeoplePage = peoplePageWith('')
 
-const home = Model.make({ route: HomeRoute(), peoplePage: initialPeoplePage })
+const home = Model.make({
+  route: AppRoute.Home(),
+  peoplePage: initialPeoplePage,
+})
 
 const onPeople = (searchInput: string) =>
   Model.make({
-    route: PeopleRoute({
+    route: AppRoute.People({
       searchText: Option.liftPredicate(String.isNonEmpty)(searchInput),
     }),
     peoplePage: peoplePageWith(searchInput),
@@ -177,12 +180,12 @@ describe('update', () => {
         model(model => {
           expect(model.peoplePage.searchInput).toBe('designer')
           expect(model.peoplePage.searchHistory).toStrictEqual(['designer'])
-          expect(model.peoplePage.results._tag).toBe('SearchLoading')
+          expect(model.peoplePage.results._tag).toBe('Loading')
         }),
         Command.expectHas(People.FetchPeople),
         resolveFetch('designer'),
         model(model => {
-          if (model.peoplePage.results._tag === 'SearchLoaded') {
+          if (model.peoplePage.results._tag === 'Loaded') {
             expect(
               model.peoplePage.results.people.map(person => person.name),
             ).toStrictEqual(['Alice Johnson', 'Eva Brown'])

package/dist/templates/examples/shopping-cart/src/route.ts

@@ -1,24 +1,16 @@
 import { Schema as S, pipe } from 'effect'
 import { Route } from 'foldkit'
-import { literal, r } from 'foldkit/route'
+import { defineRouteUnion, literal } from 'foldkit/route'
 
 // ROUTE
 
-export const ProductsRoute = r('Products', { searchText: S.Option(S.String) })
-export const CartRoute = r('Cart')
-export const CheckoutRoute = r('Checkout')
-export const NotFoundRoute = r('NotFound', { path: S.String })
-export const AppRoute = S.Union([
-  ProductsRoute,
-  CartRoute,
-  CheckoutRoute,
-  NotFoundRoute,
-])
+export const AppRoute = defineRouteUnion({
+  Products: { searchText: S.Option(S.String) },
+  Cart: {},
+  Checkout: {},
+  NotFound: { path: S.String },
+})
 
-export type ProductsRoute = typeof ProductsRoute.Type
-export type CartRoute = typeof CartRoute.Type
-export type CheckoutRoute = typeof CheckoutRoute.Type
-export type NotFoundRoute = typeof NotFoundRoute.Type
 export type AppRoute = typeof AppRoute.Type
 
 // ROUTERS
@@ -26,12 +18,12 @@ export type AppRoute = typeof AppRoute.Type
 export const productsRouter = pipe(
   Route.root,
   Route.query(S.Struct({ searchText: S.OptionFromOptional(S.String) })),
-  Route.mapTo(ProductsRoute),
+  Route.mapTo(AppRoute.Products),
 )
-export const cartRouter = pipe(literal('cart'), Route.mapTo(CartRoute))
+export const cartRouter = pipe(literal('cart'), Route.mapTo(AppRoute.Cart))
 export const checkoutRouter = pipe(
   literal('checkout'),
-  Route.mapTo(CheckoutRoute),
+  Route.mapTo(AppRoute.Checkout),
 )
 
 // PARSER
@@ -39,5 +31,5 @@ export const checkoutRouter = pipe(
 const routeParser = Route.oneOf(checkoutRouter, cartRouter, productsRouter)
 export const urlToAppRoute = Route.parseUrlWithFallback(
   routeParser,
-  NotFoundRoute,
+  AppRoute.NotFound,
 )

package/dist/templates/examples/shopping-cart/src/scene.test.ts

@@ -6,13 +6,13 @@ import { products } from './data/products'
 import { Cart } from './domain'
 import { type Model, update, view } from './main'
 import { Products } from './page'
-import { CartRoute, CheckoutRoute, NotFoundRoute, ProductsRoute } from './route'
+import { AppRoute } from './route'
 
 const apple = { id: '1', name: 'Apple', price: 1.5 }
 const banana = { id: '2', name: 'Banana', price: 0.75 }
 
 const baseModel: Model = {
-  route: ProductsRoute({ searchText: Option.none() }),
+  route: AppRoute.Products({ searchText: Option.none() }),
   cart: [],
   deliveryInstructions: '',
   orderPlaced: false,
@@ -65,7 +65,7 @@ describe('view', () => {
       { update, view },
       given({
         ...baseModel,
-        route: CartRoute(),
+        route: AppRoute.Cart(),
       }),
       expect(role('heading', { name: 'Shopping Cart' })).toExist(),
       expect(text('Your cart is empty')).toExist(),
@@ -75,7 +75,9 @@ describe('view', () => {
   test('the Cart route renders items and the running total', () => {
     scene(
       { update, view },
-      given(withCart([{ item: apple, quantity: 2 }], { route: CartRoute() })),
+      given(
+        withCart([{ item: apple, quantity: 2 }], { route: AppRoute.Cart() }),
+      ),
       expect(text('Apple')).toExist(),
       expect(text('$1.50 each')).toExist(),
       expect(text('$3.00')).toExist(),
@@ -89,7 +91,7 @@ describe('view', () => {
       { update, view },
       given({
         ...baseModel,
-        route: CheckoutRoute(),
+        route: AppRoute.Checkout(),
       }),
       expect(role('heading', { name: 'Checkout' })).toExist(),
       expect(text('Your cart is empty')).toExist(),
@@ -101,7 +103,7 @@ describe('view', () => {
       { update, view },
       given(
         withCart([{ item: apple, quantity: 2 }], {
-          route: CheckoutRoute(),
+          route: AppRoute.Checkout(),
         }),
       ),
       expect(role('heading', { name: 'Order Summary' })).toExist(),
@@ -116,7 +118,7 @@ describe('view', () => {
       { update, view },
       given(
         withCart([{ item: apple, quantity: 1 }], {
-          route: CheckoutRoute(),
+          route: AppRoute.Checkout(),
         }),
       ),
       click(role('button', { name: 'Place Order' })),
@@ -129,7 +131,7 @@ describe('view', () => {
       { update, view },
       given({
         ...baseModel,
-        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/shopping-cart/src/story.test.ts

@@ -7,13 +7,13 @@ import { products } from './data/products'
 import { Message, type Model, update } from './main'
 import { Products } from './page'
 import { Message as ProductsMessage } from './page/products'
-import { ProductsRoute } from './route'
+import { AppRoute } from './route'
 
 const apple = { id: '1', name: 'Apple', price: 1.5 }
 const banana = { id: '2', name: 'Banana', price: 0.75 }
 
 const baseModel: Model = {
-  route: ProductsRoute({ searchText: Option.none() }),
+  route: AppRoute.Products({ searchText: Option.none() }),
   cart: [],
   deliveryInstructions: '',
   orderPlaced: false,

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

@@ -1,20 +1,21 @@
 import { Schema as S, pipe } from 'effect'
 import { Route } from 'foldkit'
-import { literal, r } from 'foldkit/route'
+import { defineRouteUnion, literal } from 'foldkit/route'
 
-export const HomeRoute = r('Home')
-export const AboutRoute = r('About')
-export const NotFoundRoute = r('NotFound', { path: S.String })
+export const AppRoute = defineRouteUnion({
+  Home: {},
+  About: {},
+  NotFound: { path: S.String },
+})
 
-export const AppRoute = S.Union([HomeRoute, AboutRoute, NotFoundRoute])
 export type AppRoute = typeof AppRoute.Type
 
-export const homeRouter = pipe(Route.root, Route.mapTo(HomeRoute))
-export const aboutRouter = pipe(literal('about'), Route.mapTo(AboutRoute))
+export const homeRouter = pipe(Route.root, Route.mapTo(AppRoute.Home))
+export const aboutRouter = pipe(literal('about'), Route.mapTo(AppRoute.About))
 
 const routeParser = Route.oneOf(aboutRouter, homeRouter)
 
 export const urlToAppRoute = Route.parseUrlWithFallback(
   routeParser,
-  NotFoundRoute,
+  AppRoute.NotFound,
 )