create-foldkit-app 0.32.0 → 0.32.1

package/dist/templates/examples/map/src/mount.test.ts

@@ -0,0 +1,127 @@
+import { Deferred, Effect, PubSub, Stream } from 'effect'
+import { Mount } from 'foldkit'
+import { beforeEach, describe, expect, test, vi } from 'vitest'
+
+import { MountMap } from './main'
+
+const maplibre = vi.hoisted(() => {
+  let container: HTMLElement | undefined
+
+  return {
+    get container(): HTMLElement | undefined {
+      return container
+    },
+    set container(nextContainer: HTMLElement | undefined) {
+      container = nextContainer
+    },
+    disableKeyboard: vi.fn(),
+    enableKeyboard: vi.fn(),
+    makeMap: vi.fn(),
+    removeMap: vi.fn(),
+  }
+})
+
+vi.mock('maplibre-gl', () => {
+  class Map {
+    readonly keyboard = {
+      disable: maplibre.disableKeyboard,
+      enable: maplibre.enableKeyboard,
+    }
+
+    constructor({ container }: { container: HTMLElement }) {
+      maplibre.container = container
+      maplibre.makeMap()
+    }
+
+    remove(): void {
+      maplibre.removeMap()
+    }
+  }
+
+  class Marker {
+    readonly element: HTMLButtonElement
+
+    constructor({ element }: { element: HTMLButtonElement }) {
+      this.element = element
+    }
+
+    setLngLat(): this {
+      return this
+    }
+
+    addTo(): this {
+      maplibre.container?.appendChild(this.element)
+      return this
+    }
+  }
+
+  return { Map, Marker, setWorkerUrl: vi.fn() }
+})
+
+describe('MountMap', () => {
+  beforeEach(() => {
+    maplibre.container = undefined
+    vi.clearAllMocks()
+  })
+
+  test('makes the surviving map read-only while its view is paused', async () => {
+    const host = document.createElement('div')
+
+    await Effect.runPromise(
+      Effect.scoped(
+        Effect.gen(function* () {
+          const observedInitialLive = yield* Deferred.make<void>()
+          const observedPaused = yield* Deferred.make<void>()
+          const observedResumed = yield* Deferred.make<void>()
+          maplibre.enableKeyboard.mockImplementation(() => {
+            if (maplibre.enableKeyboard.mock.calls.length === 1) {
+              Effect.runSync(Deferred.succeed(observedInitialLive, undefined))
+            } else if (maplibre.enableKeyboard.mock.calls.length === 2) {
+              Effect.runSync(Deferred.succeed(observedResumed, undefined))
+            }
+          })
+          maplibre.disableKeyboard.mockImplementation(() => {
+            Effect.runSync(Deferred.succeed(observedPaused, undefined))
+          })
+
+          const viewStates = yield* PubSub.unbounded<Mount.ViewState>({
+            replay: 1,
+          })
+          yield* PubSub.publish(viewStates, Mount.ViewState.make('Live'))
+          yield* MountMap({ hostId: 'test-map-host' })
+            .f(host, Stream.fromPubSub(viewStates))
+            .pipe(Stream.runDrain, Effect.forkScoped)
+
+          yield* Deferred.await(observedInitialLive)
+          yield* Effect.yieldNow
+          expect(maplibre.makeMap).toHaveBeenCalledOnce()
+          const markers = host.querySelectorAll('button[data-location-id]')
+          expect(markers.length).toBeGreaterThan(0)
+          for (const marker of markers) {
+            expect(marker).toHaveProperty('disabled', false)
+          }
+
+          yield* PubSub.publish(viewStates, Mount.ViewState.make('Paused'))
+          yield* Deferred.await(observedPaused)
+          yield* Effect.yieldNow
+          expect(maplibre.makeMap).toHaveBeenCalledOnce()
+          for (const marker of markers) {
+            expect(marker).toHaveProperty('disabled', true)
+          }
+
+          yield* PubSub.publish(viewStates, Mount.ViewState.make('Live'))
+          yield* Deferred.await(observedResumed)
+          yield* Effect.yieldNow
+          expect(maplibre.makeMap).toHaveBeenCalledOnce()
+          for (const marker of markers) {
+            expect(marker).toHaveProperty('disabled', false)
+          }
+        }),
+      ),
+    )
+
+    expect(maplibre.disableKeyboard).toHaveBeenCalledOnce()
+    expect(maplibre.enableKeyboard).toHaveBeenCalledTimes(2)
+    expect(maplibre.removeMap).toHaveBeenCalledOnce()
+  })
+})

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

@@ -1,4 +1,4 @@
-import { Array, Effect, Predicate, Schema as S } from 'effect'
+import { Array, Effect, Predicate, Schema } from 'effect'
 import { KeyValueStore } from 'effect/unstable/persistence'
 import { Command } from 'foldkit'
 
@@ -14,8 +14,8 @@ import { PALETTE_THEMES, resolveColor } from './palette'
 export const SaveCanvas = Command.define('SaveCanvas', {
   args: {
     grid: Grid,
-    gridSize: S.Number,
-    paletteThemeIndex: S.Number,
+    gridSize: Schema.Number,
+    paletteThemeIndex: Schema.Number,
     selectedColorIndex: PaletteIndex,
   },
   messages: [Message.CompletedSaveCanvas],
@@ -28,7 +28,10 @@ export const SaveCanvas = Command.define('SaveCanvas', {
         paletteThemeIndex,
         selectedColorIndex,
       }
-      yield* store.set(STORAGE_KEY, S.encodeSync(SavedCanvasJsonString)(data))
+      yield* store.set(
+        STORAGE_KEY,
+        Schema.encodeSync(SavedCanvasJsonString)(data),
+      )
       return Message.CompletedSaveCanvas()
     }).pipe(
       Effect.catch(() => Effect.succeed(Message.CompletedSaveCanvas())),
@@ -45,7 +48,11 @@ export const saveCanvas = (model: Model) =>
   })
 
 export const ExportPng = Command.define('ExportPng', {
-  args: { grid: Grid, gridSize: S.Number, paletteThemeIndex: S.Number },
+  args: {
+    grid: Grid,
+    gridSize: Schema.Number,
+    paletteThemeIndex: Schema.Number,
+  },
   messages: [Message.SucceededExportPng, Message.FailedExportPng],
   execute: ({ grid, gridSize, paletteThemeIndex }) =>
     Effect.gen(function* () {

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

@@ -1,4 +1,4 @@
-import { Effect, Option, Schema as S } from 'effect'
+import { Effect, Option, Schema } from 'effect'
 import { KeyValueStore } from 'effect/unstable/persistence'
 import { Runtime } from 'foldkit'
 
@@ -25,8 +25,8 @@ import {
 
 // FLAGS
 
-export const Flags = S.Struct({
-  maybeSavedCanvas: S.Option(SavedCanvas),
+export const Flags = Schema.Struct({
+  maybeSavedCanvas: Schema.Option(SavedCanvas),
 })
 export type Flags = typeof Flags.Type
 
@@ -35,7 +35,7 @@ export const flags: Effect.Effect<Flags> = Effect.gen(function* () {
   const json = yield* Effect.fromOption(
     Option.fromNullishOr(yield* store.get(STORAGE_KEY)),
   )
-  const decoded = yield* S.decodeEffect(SavedCanvasJsonString)(json)
+  const decoded = yield* Schema.decodeEffect(SavedCanvasJsonString)(json)
   return Flags.make({ maybeSavedCanvas: Option.some(decoded) })
 }).pipe(
   Effect.catch(() =>

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

@@ -1,4 +1,4 @@
-import { Schema as S } from 'effect'
+import { Schema } from 'effect'
 import { defineMessageUnion } from 'foldkit/message'
 
 import { Dialog, Listbox, RadioGroup } from '@foldkit/ui'
@@ -6,23 +6,23 @@ import { Dialog, Listbox, RadioGroup } from '@foldkit/ui'
 import { PaletteIndex, Tool } from './model'
 
 export const Message = defineMessageUnion({
-  PressedCell: { x: S.Number, y: S.Number },
-  EnteredCell: { x: S.Number, y: S.Number },
+  PressedCell: { x: Schema.Number, y: Schema.Number },
+  EnteredCell: { x: Schema.Number, y: Schema.Number },
   LeftCanvas: {},
   ReleasedMouse: {},
   SelectedColor: { colorIndex: PaletteIndex },
   SelectedTool: { tool: Tool },
-  SelectedGridSize: { size: S.Number },
+  SelectedGridSize: { size: Schema.Number },
   ToggledMirrorHorizontal: {},
   ToggledMirrorVertical: {},
   ClickedUndo: {},
   ClickedRedo: {},
-  ClickedHistoryStep: { stepIndex: S.Number },
-  ClickedRedoStep: { stepIndex: S.Number },
+  ClickedHistoryStep: { stepIndex: Schema.Number },
+  ClickedRedoStep: { stepIndex: Schema.Number },
   ClickedClear: {},
   ClickedExport: {},
   SucceededExportPng: {},
-  FailedExportPng: { error: S.String },
+  FailedExportPng: { error: Schema.String },
   GotErrorDialogMessage: { message: Dialog.Message },
   GotThemeListboxMessage: { message: Listbox.Message },
   GotToolRadioGroupMessage: { message: RadioGroup.Message },

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

@@ -1,67 +1,72 @@
-import { Option, Schema as S } from 'effect'
+import { Option, Schema } from 'effect'
 
 import { Dialog, Listbox, RadioGroup } from '@foldkit/ui'
 
 // CONSTANT
 
-export const PaletteIndex = S.Literals([
+export const PaletteIndex = Schema.Literals([
   0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15,
 ])
 export type PaletteIndex = typeof PaletteIndex.Type
 
-export const HexColor = S.String.check(S.isPattern(/^#[0-9a-f]{6}$/)).pipe(
-  S.brand('HexColor'),
-)
+export const HexColor = Schema.String.check(
+  Schema.isPattern(/^#[0-9a-f]{6}$/),
+).pipe(Schema.brand('HexColor'))
 export type HexColor = typeof HexColor.Type
 
-export const Tool = S.Literals(['Brush', 'Fill', 'Eraser'])
+export const Tool = Schema.Literals(['Brush', 'Fill', 'Eraser'])
 export type Tool = typeof Tool.Type
 
-export const MirrorMode = S.Literals(['None', 'Horizontal', 'Vertical', 'Both'])
+export const MirrorMode = Schema.Literals([
+  'None',
+  'Horizontal',
+  'Vertical',
+  'Both',
+])
 export type MirrorMode = typeof MirrorMode.Type
 
-export const Cell = S.Option(PaletteIndex)
+export const Cell = Schema.Option(PaletteIndex)
 export type Cell = typeof Cell.Type
 
-const Row = S.Array(Cell)
-export const Grid = S.Array(Row)
+const Row = Schema.Array(Cell)
+export const Grid = Schema.Array(Row)
 export type Grid = typeof Grid.Type
 
-export const Position = S.Struct({ x: S.Number, y: S.Number })
+export const Position = Schema.Struct({ x: Schema.Number, y: Schema.Number })
 
-const SavedCell = S.Option(PaletteIndex)
-const SavedRow = S.Array(SavedCell)
-const SavedGrid = S.Array(SavedRow)
+const SavedCell = Schema.Option(PaletteIndex)
+const SavedRow = Schema.Array(SavedCell)
+const SavedGrid = Schema.Array(SavedRow)
 
-export const SavedCanvas = S.Struct({
+export const SavedCanvas = Schema.Struct({
   grid: SavedGrid,
-  gridSize: S.Number,
-  paletteThemeIndex: S.Number,
+  gridSize: Schema.Number,
+  paletteThemeIndex: Schema.Number,
   selectedColorIndex: PaletteIndex,
 })
 export type SavedCanvas = typeof SavedCanvas.Type
 
-export const SavedCanvasJsonString = S.fromJsonString(
-  S.toCodecJson(SavedCanvas),
+export const SavedCanvasJsonString = Schema.fromJsonString(
+  Schema.toCodecJson(SavedCanvas),
 )
 
 // MODEL
 
-export const Model = S.Struct({
+export const Model = Schema.Struct({
   grid: Grid,
-  undoStack: S.Array(Grid),
-  redoStack: S.Array(Grid),
+  undoStack: Schema.Array(Grid),
+  redoStack: Schema.Array(Grid),
   selectedColorIndex: PaletteIndex,
-  gridSize: S.Number,
+  gridSize: Schema.Number,
   tool: Tool,
   mirrorMode: MirrorMode,
-  isDrawing: S.Boolean,
-  maybeHoveredCell: S.Option(Position),
+  isDrawing: Schema.Boolean,
+  maybeHoveredCell: Schema.Option(Position),
   errorDialog: Dialog.Model,
-  maybeExportError: S.Option(S.String),
-  paletteThemeIndex: S.Number,
+  maybeExportError: Schema.Option(Schema.String),
+  paletteThemeIndex: Schema.Number,
   gridSizeConfirmDialog: Dialog.Model,
-  maybePendingGridSize: S.Option(S.Number),
+  maybePendingGridSize: Schema.Option(Schema.Number),
   themeListbox: Listbox.Model,
   toolRadioGroup: RadioGroup.Model,
   gridSizeRadioGroup: RadioGroup.Model,
@@ -74,6 +79,6 @@ export const paletteIndexFromValue = (
   fallback: PaletteIndex,
 ): PaletteIndex =>
   Option.getOrElse(
-    S.decodeUnknownOption(PaletteIndex)(Number(value)),
+    Schema.decodeUnknownOption(PaletteIndex)(Number(value)),
     () => fallback,
   )

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

@@ -1,4 +1,4 @@
-import { Effect, Option, Schema as S, Stream } from 'effect'
+import { Effect, Option, Schema, Stream } from 'effect'
 import { Subscription } from 'foldkit'
 
 import { Message } from './message'
@@ -46,7 +46,7 @@ export const subscriptions = Subscription.make<Model, Message>()(entry => ({
   ),
 
   mouseRelease: entry(
-    { isDrawing: S.Boolean },
+    { isDrawing: Schema.Boolean },
     {
       modelToDependencies: model => ({ isDrawing: model.isDrawing }),
       dependenciesToStream: ({ isDrawing }) =>

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

@@ -1,4 +1,4 @@
-import { Array, Match as M, Option } from 'effect'
+import { Array, Match, Option } from 'effect'
 import { Update } from 'foldkit'
 import { evo } from 'foldkit/struct'
 
@@ -32,7 +32,7 @@ import {
 
 type UpdateReturn = Update.Return<Model, Message>
 
-const withUpdateReturn = M.withReturnType<UpdateReturn>()
+const withUpdateReturn = Match.withReturnType<UpdateReturn>()
 
 const applyEraser = (model: Model, x: number, y: number) => {
   const positions = getMirroredPositions(x, y, model.gridSize, model.mirrorMode)
@@ -51,15 +51,14 @@ 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 => ({
-      model: evo(model, { maybeExportError: () => Option.none() }),
-    }),
+const foldErrorDialogOutMessage = Dialog.OutMessage.match<
+  Update.Step<Model, Message>
+>({
+  Opened: () => model => ({ model }),
+  Closed: () => model => ({
+    model: evo(model, { maybeExportError: () => Option.none() }),
   }),
-)
+})
 
 const foldErrorDialog = Update.foldChild({
   update: Dialog.update,
@@ -79,27 +78,24 @@ const foldErrorDialogOpen = Update.foldChildStep({
   foldOutMessage: foldErrorDialogOutMessage,
 })
 
-const foldThemeListboxOutMessage: (
-  outMessage: Listbox.OutMessage,
-) => Update.Step<Model, Message> = M.type<Listbox.OutMessage>().pipe(
-  M.withReturnType<Update.Step<Model, Message>>(),
-  M.tagsExhaustive({
-    Selected:
-      ({ value }) =>
-      model => {
-        const themeIndex = Number(value)
-        const maybeNextTheme = Array.get(PALETTE_THEMES, themeIndex)
-        if (Option.isNone(maybeNextTheme)) {
-          return { model }
-        }
-        const nextModel = evo(model, {
-          paletteThemeIndex: () => themeIndex,
-          selectedColorIndex: () => DEFAULT_COLOR_INDEX,
-        })
-        return { model: nextModel, commands: [saveCanvas(nextModel)] }
-      },
-  }),
-)
+const foldThemeListboxOutMessage = Listbox.OutMessage.match<
+  Update.Step<Model, Message>
+>({
+  Selected:
+    ({ value }) =>
+    model => {
+      const themeIndex = Number(value)
+      const maybeNextTheme = Array.get(PALETTE_THEMES, themeIndex)
+      if (Option.isNone(maybeNextTheme)) {
+        return { model }
+      }
+      const nextModel = evo(model, {
+        paletteThemeIndex: () => themeIndex,
+        selectedColorIndex: () => DEFAULT_COLOR_INDEX,
+      })
+      return { model: nextModel, commands: [saveCanvas(nextModel)] }
+    },
+})
 
 const foldThemeListbox = Update.foldChild({
   update: ThemeListbox.update,
@@ -110,15 +106,14 @@ const foldThemeListbox = Update.foldChild({
   foldOutMessage: foldThemeListboxOutMessage,
 })
 
-const foldGridSizeConfirmDialogOutMessage = M.type<Dialog.OutMessage>().pipe(
-  M.withReturnType<Update.Step<Model, Message>>(),
-  M.tagsExhaustive({
-    Opened: () => model => ({ model }),
-    Closed: () => model => ({
-      model: evo(model, { maybePendingGridSize: () => Option.none() }),
-    }),
+const foldGridSizeConfirmDialogOutMessage = Dialog.OutMessage.match<
+  Update.Step<Model, Message>
+>({
+  Opened: () => model => ({ model }),
+  Closed: () => model => ({
+    model: evo(model, { maybePendingGridSize: () => Option.none() }),
   }),
-)
+})
 
 const foldGridSizeConfirmDialog = Update.foldChild({
   update: Dialog.update,
@@ -159,15 +154,15 @@ const selectColor = (model: Model, colorIndex: PaletteIndex): UpdateReturn => {
   return { model: nextModel, commands: [saveCanvas(nextModel)] }
 }
 
-const foldToolRadioGroupOutMessage = M.type<RadioGroup.OutMessage<Tool>>().pipe(
-  M.withReturnType<Update.Step<Model, Message>>(),
-  M.tagsExhaustive({
-    Selected:
-      ({ value }) =>
-      model =>
-        selectTool(model, value),
-  }),
-)
+const foldToolRadioGroupOutMessage = RadioGroup.OutMessage.match<
+  Update.Step<Model, Message>,
+  RadioGroup.OutMessage<Tool>
+>({
+  Selected:
+    ({ value }) =>
+    model =>
+      selectTool(model, value),
+})
 
 const foldToolRadioGroup = Update.foldChild({
   update: ToolRadioGroup.update,
@@ -178,15 +173,14 @@ const foldToolRadioGroup = Update.foldChild({
   foldOutMessage: foldToolRadioGroupOutMessage,
 })
 
-const foldGridSizeRadioGroupOutMessage = M.type<RadioGroup.OutMessage>().pipe(
-  M.withReturnType<Update.Step<Model, Message>>(),
-  M.tagsExhaustive({
-    Selected:
-      ({ value }) =>
-      model =>
-        requestGridSizeChange(model, Number(value)),
-  }),
-)
+const foldGridSizeRadioGroupOutMessage = RadioGroup.OutMessage.match<
+  Update.Step<Model, Message>
+>({
+  Selected:
+    ({ value }) =>
+    model =>
+      requestGridSizeChange(model, Number(value)),
+})
 
 const foldGridSizeRadioGroup = Update.foldChild({
   update: GridSizeRadioGroup.update,
@@ -197,18 +191,17 @@ const foldGridSizeRadioGroup = Update.foldChild({
   foldOutMessage: foldGridSizeRadioGroupOutMessage,
 })
 
-const foldPaletteRadioGroupOutMessage = M.type<RadioGroup.OutMessage>().pipe(
-  M.withReturnType<Update.Step<Model, Message>>(),
-  M.tagsExhaustive({
-    Selected:
-      ({ value }) =>
-      model =>
-        selectColor(
-          model,
-          paletteIndexFromValue(value, model.selectedColorIndex),
-        ),
-  }),
-)
+const foldPaletteRadioGroupOutMessage = RadioGroup.OutMessage.match<
+  Update.Step<Model, Message>
+>({
+  Selected:
+    ({ value }) =>
+    model =>
+      selectColor(
+        model,
+        paletteIndexFromValue(value, model.selectedColorIndex),
+      ),
+})
 
 const foldPaletteRadioGroup = Update.foldChild({
   update: PaletteRadioGroup.update,
@@ -222,9 +215,9 @@ const foldPaletteRadioGroup = Update.foldChild({
 export const update = (model: Model, message: Message) =>
   Message.match<UpdateReturn>(message, {
     PressedCell: ({ x, y }) =>
-      M.value(model.tool).pipe(
+      Match.value(model.tool).pipe(
         withUpdateReturn,
-        M.when('Brush', () => ({
+        Match.when('Brush', () => ({
           model: evo(model, {
             grid: () => applyBrush(model, x, y),
             undoStack: () => pushHistory(model.undoStack, model.grid),
@@ -232,7 +225,7 @@ export const update = (model: Model, message: Message) =>
             isDrawing: () => true,
           }),
         })),
-        M.when('Fill', () => {
+        Match.when('Fill', () => {
           const nextModel = evo(model, {
             grid: () => applyFill(model, x, y),
             undoStack: () => pushHistory(model.undoStack, model.grid),
@@ -240,7 +233,7 @@ export const update = (model: Model, message: Message) =>
           })
           return { model: nextModel, commands: [saveCanvas(nextModel)] }
         }),
-        M.when('Eraser', () => ({
+        Match.when('Eraser', () => ({
           model: evo(model, {
             grid: () => applyEraser(model, x, y),
             undoStack: () => pushHistory(model.undoStack, model.grid),
@@ -248,7 +241,7 @@ export const update = (model: Model, message: Message) =>
             isDrawing: () => true,
           }),
         })),
-        M.exhaustive,
+        Match.exhaustive,
       ),
 
     EnteredCell: ({ x, y }) => {
@@ -299,23 +292,23 @@ export const update = (model: Model, message: Message) =>
       foldPaletteRadioGroup(model, message),
 
     ToggledMirrorHorizontal: () => {
-      const nextMirrorMode = M.value(model.mirrorMode).pipe(
-        M.when('None', () => 'Horizontal' as const),
-        M.when('Horizontal', () => 'None' as const),
-        M.when('Vertical', () => 'Both' as const),
-        M.when('Both', () => 'Vertical' as const),
-        M.exhaustive,
+      const nextMirrorMode = Match.value(model.mirrorMode).pipe(
+        Match.when('None', () => 'Horizontal' as const),
+        Match.when('Horizontal', () => 'None' as const),
+        Match.when('Vertical', () => 'Both' as const),
+        Match.when('Both', () => 'Vertical' as const),
+        Match.exhaustive,
       )
       return { model: evo(model, { mirrorMode: () => nextMirrorMode }) }
     },
 
     ToggledMirrorVertical: () => {
-      const nextMirrorMode = M.value(model.mirrorMode).pipe(
-        M.when('None', () => 'Vertical' as const),
-        M.when('Vertical', () => 'None' as const),
-        M.when('Horizontal', () => 'Both' as const),
-        M.when('Both', () => 'Horizontal' as const),
-        M.exhaustive,
+      const nextMirrorMode = Match.value(model.mirrorMode).pipe(
+        Match.when('None', () => 'Vertical' as const),
+        Match.when('Vertical', () => 'None' as const),
+        Match.when('Horizontal', () => 'Both' as const),
+        Match.when('Both', () => 'Horizontal' as const),
+        Match.exhaustive,
       )
       return { model: evo(model, { mirrorMode: () => nextMirrorMode }) }
     },