create-foldkit-app 0.29.0 → 0.29.1

package/dist/templates/examples/pixel-art/src/update.ts

@@ -1,5 +1,5 @@
 import { Array, Match as M, Option } from 'effect'
-import { Command, Update } from 'foldkit'
+import { Update } from 'foldkit'
 import { evo } from 'foldkit/struct'
 
 import { Dialog, Listbox, RadioGroup } from '@foldkit/ui'
@@ -30,7 +30,7 @@ import {
   ToolRadioGroup,
 } from './view/toolbar'
 
-type UpdateReturn = readonly [Model, ReadonlyArray<Command.Command<Message>>]
+type UpdateReturn = Update.Return<Model, Message>
 
 const withUpdateReturn = M.withReturnType<UpdateReturn>()
 
@@ -54,11 +54,10 @@ const applyFill = (model: Model, x: number, y: number) => {
 const foldErrorDialogOutMessage = M.type<Dialog.OutMessage>().pipe(
   M.withReturnType<Update.Step<Model, Message>>(),
   M.tagsExhaustive({
-    Opened: () => model => [model, []],
-    Closed: () => model => [
-      evo(model, { maybeExportError: () => Option.none() }),
-      [],
-    ],
+    Opened: () => model => ({ model }),
+    Closed: () => model => ({
+      model: evo(model, { maybeExportError: () => Option.none() }),
+    }),
   }),
 )
 
@@ -71,6 +70,15 @@ const foldErrorDialog = Update.foldChild({
   foldOutMessage: foldErrorDialogOutMessage,
 })
 
+const foldErrorDialogOpen = Update.foldChildStep({
+  update: Dialog.open,
+  read: (model: Model) => Option.some(model.errorDialog),
+  write: (model, nextErrorDialog) =>
+    evo(model, { errorDialog: () => nextErrorDialog }),
+  toParentMessage: message => Message.GotErrorDialogMessage({ message }),
+  foldOutMessage: foldErrorDialogOutMessage,
+})
+
 const foldThemeListboxOutMessage: (
   outMessage: Listbox.OutMessage,
 ) => Update.Step<Model, Message> = M.type<Listbox.OutMessage>().pipe(
@@ -82,13 +90,13 @@ const foldThemeListboxOutMessage: (
         const themeIndex = Number(value)
         const maybeNextTheme = Array.get(PALETTE_THEMES, themeIndex)
         if (Option.isNone(maybeNextTheme)) {
-          return [model, []]
+          return { model }
         }
         const nextModel = evo(model, {
           paletteThemeIndex: () => themeIndex,
           selectedColorIndex: () => DEFAULT_COLOR_INDEX,
         })
-        return [nextModel, [saveCanvas(nextModel)]]
+        return { model: nextModel, commands: [saveCanvas(nextModel)] }
       },
   }),
 )
@@ -105,11 +113,10 @@ const foldThemeListbox = Update.foldChild({
 const foldGridSizeConfirmDialogOutMessage = M.type<Dialog.OutMessage>().pipe(
   M.withReturnType<Update.Step<Model, Message>>(),
   M.tagsExhaustive({
-    Opened: () => model => [model, []],
-    Closed: () => model => [
-      evo(model, { maybePendingGridSize: () => Option.none() }),
-      [],
-    ],
+    Opened: () => model => ({ model }),
+    Closed: () => model => ({
+      model: evo(model, { maybePendingGridSize: () => Option.none() }),
+    }),
   }),
 )
 
@@ -123,14 +130,33 @@ const foldGridSizeConfirmDialog = Update.foldChild({
   foldOutMessage: foldGridSizeConfirmDialogOutMessage,
 })
 
-const selectTool = (model: Model, tool: Tool): UpdateReturn => [
-  evo(model, { tool: () => tool }),
-  [],
-]
+const foldGridSizeConfirmDialogOpen = Update.foldChildStep({
+  update: Dialog.open,
+  read: (model: Model) => Option.some(model.gridSizeConfirmDialog),
+  write: (model, nextGridSizeConfirmDialog) =>
+    evo(model, { gridSizeConfirmDialog: () => nextGridSizeConfirmDialog }),
+  toParentMessage: message =>
+    Message.GotGridSizeConfirmDialogMessage({ message }),
+  foldOutMessage: foldGridSizeConfirmDialogOutMessage,
+})
+
+const foldGridSizeConfirmDialogClose = Update.foldChildStep({
+  update: Dialog.close,
+  read: (model: Model) => Option.some(model.gridSizeConfirmDialog),
+  write: (model, nextGridSizeConfirmDialog) =>
+    evo(model, { gridSizeConfirmDialog: () => nextGridSizeConfirmDialog }),
+  toParentMessage: message =>
+    Message.GotGridSizeConfirmDialogMessage({ message }),
+  foldOutMessage: foldGridSizeConfirmDialogOutMessage,
+})
+
+const selectTool = (model: Model, tool: Tool): UpdateReturn => ({
+  model: evo(model, { tool: () => tool }),
+})
 
 const selectColor = (model: Model, colorIndex: PaletteIndex): UpdateReturn => {
   const nextModel = evo(model, { selectedColorIndex: () => colorIndex })
-  return [nextModel, [saveCanvas(nextModel)]]
+  return { model: nextModel, commands: [saveCanvas(nextModel)] }
 }
 
 const foldToolRadioGroupOutMessage = M.type<RadioGroup.OutMessage<Tool>>().pipe(
@@ -198,32 +224,30 @@ export const update = (model: Model, message: Message) =>
     PressedCell: ({ x, y }) =>
       M.value(model.tool).pipe(
         withUpdateReturn,
-        M.when('Brush', () => [
-          evo(model, {
+        M.when('Brush', () => ({
+          model: evo(model, {
             grid: () => applyBrush(model, x, y),
             undoStack: () => pushHistory(model.undoStack, model.grid),
             redoStack: () => [],
             isDrawing: () => true,
           }),
-          [],
-        ]),
+        })),
         M.when('Fill', () => {
           const nextModel = evo(model, {
             grid: () => applyFill(model, x, y),
             undoStack: () => pushHistory(model.undoStack, model.grid),
             redoStack: () => [],
           })
-          return [nextModel, [saveCanvas(nextModel)]]
+          return { model: nextModel, commands: [saveCanvas(nextModel)] }
         }),
-        M.when('Eraser', () => [
-          evo(model, {
+        M.when('Eraser', () => ({
+          model: evo(model, {
             grid: () => applyEraser(model, x, y),
             undoStack: () => pushHistory(model.undoStack, model.grid),
             redoStack: () => [],
             isDrawing: () => true,
           }),
-          [],
-        ]),
+        })),
         M.exhaustive,
       ),
 
@@ -233,27 +257,30 @@ export const update = (model: Model, message: Message) =>
       })
 
       if (model.isDrawing && model.tool === 'Brush') {
-        return [evo(withHover, { grid: () => applyBrush(model, x, y) }), []]
+        return {
+          model: evo(withHover, { grid: () => applyBrush(model, x, y) }),
+        }
       }
 
       if (model.isDrawing && model.tool === 'Eraser') {
-        return [evo(withHover, { grid: () => applyEraser(model, x, y) }), []]
+        return {
+          model: evo(withHover, { grid: () => applyEraser(model, x, y) }),
+        }
       }
 
-      return [withHover, []]
+      return { model: withHover }
     },
 
-    LeftCanvas: () => [
-      evo(model, { maybeHoveredCell: () => Option.none() }),
-      [],
-    ],
+    LeftCanvas: () => ({
+      model: evo(model, { maybeHoveredCell: () => Option.none() }),
+    }),
 
     ReleasedMouse: () => {
       if (!model.isDrawing) {
-        return [model, []]
+        return { model }
       }
       const nextModel = evo(model, { isDrawing: () => false })
-      return [nextModel, [saveCanvas(nextModel)]]
+      return { model: nextModel, commands: [saveCanvas(nextModel)] }
     },
 
     SelectedColor: ({ colorIndex }) => selectColor(model, colorIndex),
@@ -279,7 +306,7 @@ export const update = (model: Model, message: Message) =>
         M.when('Both', () => 'Vertical' as const),
         M.exhaustive,
       )
-      return [evo(model, { mirrorMode: () => nextMirrorMode }), []]
+      return { model: evo(model, { mirrorMode: () => nextMirrorMode }) }
     },
 
     ToggledMirrorVertical: () => {
@@ -290,39 +317,39 @@ export const update = (model: Model, message: Message) =>
         M.when('Both', () => 'Horizontal' as const),
         M.exhaustive,
       )
-      return [evo(model, { mirrorMode: () => nextMirrorMode }), []]
+      return { model: evo(model, { mirrorMode: () => nextMirrorMode }) }
     },
 
     ClickedUndo: () =>
       Array.match(model.undoStack, {
-        onEmpty: () => [model, []],
+        onEmpty: () => ({ model }),
         onNonEmpty: nonEmptyUndoStack => {
           const nextModel = evo(model, {
             grid: () => Array.lastNonEmpty(nonEmptyUndoStack),
             undoStack: () => Array.initNonEmpty(nonEmptyUndoStack),
             redoStack: () => [...model.redoStack, model.grid],
           })
-          return [nextModel, [saveCanvas(nextModel)]]
+          return { model: nextModel, commands: [saveCanvas(nextModel)] }
         },
       }),
 
     ClickedRedo: () =>
       Array.match(model.redoStack, {
-        onEmpty: () => [model, []],
+        onEmpty: () => ({ model }),
         onNonEmpty: nonEmptyRedoStack => {
           const nextModel = evo(model, {
             grid: () => Array.lastNonEmpty(nonEmptyRedoStack),
             undoStack: () => [...model.undoStack, model.grid],
             redoStack: () => Array.initNonEmpty(nonEmptyRedoStack),
           })
-          return [nextModel, [saveCanvas(nextModel)]]
+          return { model: nextModel, commands: [saveCanvas(nextModel)] }
         },
       }),
 
     ClickedHistoryStep: ({ stepIndex }) => {
       const targetGrid = model.undoStack[stepIndex]
       if (targetGrid === undefined) {
-        return [model, []]
+        return { model }
       }
 
       const statesAfterTarget = Array.drop(model.undoStack, stepIndex + 1)
@@ -337,13 +364,13 @@ export const update = (model: Model, message: Message) =>
         ],
       })
 
-      return [nextModel, [saveCanvas(nextModel)]]
+      return { model: nextModel, commands: [saveCanvas(nextModel)] }
     },
 
     ClickedRedoStep: ({ stepIndex }) => {
       const targetGrid = model.redoStack[stepIndex]
       if (targetGrid === undefined) {
-        return [model, []]
+        return { model }
       }
 
       const statesBetweenCurrentAndTarget = Array.drop(
@@ -361,7 +388,7 @@ export const update = (model: Model, message: Message) =>
         redoStack: () => Array.take(model.redoStack, stepIndex),
       })
 
-      return [nextModel, [saveCanvas(nextModel)]]
+      return { model: nextModel, commands: [saveCanvas(nextModel)] }
     },
 
     ClickedClear: () => {
@@ -370,39 +397,33 @@ export const update = (model: Model, message: Message) =>
         undoStack: () => pushHistory(model.undoStack, model.grid),
         redoStack: () => [],
       })
-      return [nextModel, [saveCanvas(nextModel)]]
+      return { model: nextModel, commands: [saveCanvas(nextModel)] }
     },
 
-    ClickedExport: () => [
+    ClickedExport: () => ({
       model,
-      [
+      commands: [
         ExportPng({
           grid: model.grid,
           gridSize: model.gridSize,
           paletteThemeIndex: model.paletteThemeIndex,
         }),
       ],
-    ],
-
-    SucceededExportPng: () => [model, []],
+    }),
 
-    CompletedSaveCanvas: () => [model, []],
+    SucceededExportPng: () => ({ model }),
 
-    FailedExportPng: ({ error }) => {
-      const [nextErrorDialog, errorDialogCommands] = Dialog.open(
-        model.errorDialog,
-      )
+    CompletedSaveCanvas: () => ({ model }),
 
-      return [
-        evo(model, {
-          maybeExportError: () => Option.some(error),
-          errorDialog: () => nextErrorDialog,
+    FailedExportPng: ({ error }) =>
+      Update.combine(model, [
+        stepModel => ({
+          model: evo(stepModel, {
+            maybeExportError: () => Option.some(error),
+          }),
         }),
-        Command.mapMessages(errorDialogCommands, dialogMessage =>
-          Message.GotErrorDialogMessage({ message: dialogMessage }),
-        ),
-      ]
-    },
+        foldErrorDialogOpen,
+      ]),
 
     GotErrorDialogMessage: ({ message }) => foldErrorDialog(model, message),
 
@@ -410,33 +431,24 @@ export const update = (model: Model, message: Message) =>
 
     ConfirmedGridSizeChange: () =>
       Option.match(model.maybePendingGridSize, {
-        onNone: () => [model, []],
-        onSome: pendingSize => {
-          const [nextDialog, dialogCommands] = Dialog.close(
-            model.gridSizeConfirmDialog,
-          )
-          const mappedDialogCommands = Command.mapMessages(
-            dialogCommands,
-            dialogMessage =>
-              Message.GotGridSizeConfirmDialogMessage({
-                message: dialogMessage,
-              }),
-          )
-          const [resizedModel] = applyGridSizeChange(model, pendingSize)
-          const nextModel = evo(resizedModel, {
-            gridSizeConfirmDialog: () => nextDialog,
-            maybePendingGridSize: () => Option.none(),
-          })
-          return [nextModel, [...mappedDialogCommands, saveCanvas(nextModel)]]
-        },
+        onNone: () => ({ model }),
+        onSome: pendingSize =>
+          Update.combine(model, [
+            stepModel => applyGridSizeChange(stepModel, pendingSize),
+            foldGridSizeConfirmDialogClose,
+            stepModel => ({
+              model: stepModel,
+              commands: [saveCanvas(stepModel)],
+            }),
+          ]),
       }),
 
     GotGridSizeConfirmDialogMessage: ({ message }) =>
       foldGridSizeConfirmDialog(model, message),
   })
 
-const applyGridSizeChange = (model: Model, size: number): UpdateReturn => [
-  evo(model, {
+const applyGridSizeChange = (model: Model, size: number): UpdateReturn => ({
+  model: evo(model, {
     grid: () => createEmptyGrid(size),
     gridSize: () => size,
     undoStack: () => [],
@@ -444,26 +456,23 @@ const applyGridSizeChange = (model: Model, size: number): UpdateReturn => [
     isDrawing: () => false,
     maybeHoveredCell: () => Option.none(),
   }),
-  [],
-]
+})
 
 const requestGridSizeChange = (model: Model, size: number): UpdateReturn => {
   if (size === model.gridSize) {
-    return [model, []]
+    return { model }
   }
 
   if (isGridEmpty(model.grid)) {
     return applyGridSizeChange(model, size)
   }
 
-  const [nextDialog, dialogCommands] = Dialog.open(model.gridSizeConfirmDialog)
-  return [
-    evo(model, {
-      maybePendingGridSize: () => Option.some(size),
-      gridSizeConfirmDialog: () => nextDialog,
+  return Update.combine(model, [
+    stepModel => ({
+      model: evo(stepModel, {
+        maybePendingGridSize: () => Option.some(size),
+      }),
     }),
-    Command.mapMessages(dialogCommands, dialogMessage =>
-      Message.GotGridSizeConfirmDialogMessage({ message: dialogMessage }),
-    ),
-  ]
+    foldGridSizeConfirmDialogOpen,
+  ])
 }

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

@@ -190,14 +190,13 @@ export const init: Runtime.RoutingApplicationInit<Model, Message> = (
 ) => {
   const route = urlToAppRoute(url)
 
-  return [
-    {
+  return {
+    model: {
       route,
       dietListbox: Listbox.init({ id: 'diet-filter' }),
       periodListbox: Listbox.init({ id: 'period-filter' }),
     },
-    [],
-  ]
+  }
 }
 
 // UPDATE
@@ -267,7 +266,7 @@ const LoadExternal = Command.define('LoadExternal', {
     load(href).pipe(Effect.as(Message.CompletedLoadExternal())),
 })
 
-type UpdateReturn = readonly [Model, ReadonlyArray<Command.Command<Message>>]
+type UpdateReturn = Update.Return<Model, Message>
 const withUpdateReturn = M.withReturnType<UpdateReturn>()
 
 const DietListbox = Listbox.create<string>()
@@ -282,15 +281,15 @@ const foldDietListboxOutMessage: (
       ({ value }) =>
       model => {
         const fields = routeToBrowseFields(model.route)
-        return [
+        return {
           model,
-          [
+          commands: [
             ReplaceFilters({
               ...fields,
               diet: selectionToParam(Option.some(value), Diet),
             }),
           ],
-        ]
+        }
       },
   }),
 )
@@ -313,15 +312,15 @@ const foldPeriodListboxOutMessage: (
       ({ value }) =>
       model => {
         const fields = routeToBrowseFields(model.route)
-        return [
+        return {
           model,
-          [
+          commands: [
             ReplaceFilters({
               ...fields,
               period: selectionToParam(Option.some(value), Period),
             }),
           ],
-        ]
+        }
       },
   }),
 )
@@ -337,54 +336,57 @@ const foldPeriodListbox = Update.foldChild({
 
 export const update = (model: Model, message: Message) =>
   Message.match<UpdateReturn>(message, {
-    CompletedNavigateInternal: () => [model, []],
-    CompletedLoadExternal: () => [model, []],
-    CompletedReplaceFilters: () => [model, []],
+    CompletedNavigateInternal: () => ({ model }),
+    CompletedLoadExternal: () => ({ model }),
+    CompletedReplaceFilters: () => ({ model }),
 
     ClickedLink: ({ request }) =>
       M.value(request).pipe(
         withUpdateReturn,
         M.tagsExhaustive({
-          Internal: ({ url }) => [
+          Internal: ({ url }) => ({
             model,
-            [NavigateInternal({ url: urlToString(url) })],
-          ],
-          External: ({ href }) => [model, [LoadExternal({ href })]],
+            commands: [NavigateInternal({ url: urlToString(url) })],
+          }),
+          External: ({ href }) => ({
+            model,
+            commands: [LoadExternal({ href })],
+          }),
         }),
       ),
 
     ChangedUrl: ({ url }) => {
       const nextRoute = urlToAppRoute(url)
 
-      return [evo(model, { route: () => nextRoute }), []]
+      return { model: evo(model, { route: () => nextRoute }) }
     },
 
     ChangedSearchInput: ({ value }) => {
       const fields = routeToBrowseFields(model.route)
 
-      return [
+      return {
         model,
-        [
+        commands: [
           ReplaceFilters({
             ...fields,
             search: Option.liftPredicate(value, String.isNonEmpty),
           }),
         ],
-      ]
+      }
     },
 
     ClickedColumnHeader: ({ column }) => {
       const fields = routeToBrowseFields(model.route)
 
-      return [
+      return {
         model,
-        [
+        commands: [
           ReplaceFilters({
             ...fields,
             sorting: nextSorting(fields.sorting, column),
           }),
         ],
-      ]
+      }
     },
 
     GotDietListboxMessage: ({ message }) => foldDietListbox(model, message),