create-foldkit-app 0.38.0 → 0.39.0

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

@@ -3,14 +3,13 @@ import {
   Array,
   Effect,
   Equal,
-  Function,
   Option,
   Queue,
   Schema,
   Stream,
   String,
 } from 'effect'
-import { Command, Mount, Runtime, Subscription, Update } from 'foldkit'
+import { Command, Mount, Runtime, Update } from 'foldkit'
 import * as Dom from 'foldkit/dom'
 import type { Document, Html } from 'foldkit/html'
 import { HtmlBuilder } from 'foldkit/html'
@@ -89,6 +88,12 @@ export const Message = defineMessageUnion({
 
 export type Message = typeof Message.Type
 
+type MountMapMessage =
+  | typeof Message.SucceededMountMap.Type
+  | typeof Message.FailedMountMap.Type
+  | typeof Message.MovedMap.Type
+  | typeof Message.ClickedMarker.Type
+
 // COMMAND
 
 const flyToMap = (
@@ -310,101 +315,140 @@ export const init: Runtime.ApplicationInit<Model, Message> = () => ({
 
 // MAP MOUNT
 
-type MountedMap = Readonly<{
-  map: MapInstance
-  markerElements: ReadonlyArray<HTMLButtonElement>
-}>
-
-const applyMapViewState = (
-  { map, markerElements }: MountedMap,
-  viewState: Mount.ViewState,
-): Effect.Effect<void> =>
-  Effect.sync(() => {
-    const isLive = viewState === 'Live'
-
-    if (isLive) {
-      map.keyboard.enable()
-    } else {
-      map.keyboard.disable()
-    }
-
-    Array.forEach(markerElements, markerElement => {
-      markerElement.disabled = !isLive
-    })
+const toMapMountError = (error: unknown): Error =>
+  error instanceof Error ? error : new Error(`Failed to mount map: ${error}`)
+
+const addLocationMarkers = (
+  map: MapInstance,
+  maplibre: typeof import('maplibre-gl'),
+) =>
+  Effect.try({
+    try: () =>
+      Array.forEach(featuredLocations, ({ id, lng, lat }) => {
+        const markerElement = document.createElement('button')
+        markerElement.setAttribute('data-location-id', id)
+        markerElement.setAttribute('aria-label', `Marker: ${id}`)
+        markerElement.className = markerStyle
+        new maplibre.Marker({ element: markerElement })
+          .setLngLat([lng, lat])
+          .addTo(map)
+      }),
+    catch: toMapMountError,
   })
 
-const mountMap = (
-  element: Element,
-  hostId: string,
-  viewStateChanges: Stream.Stream<Mount.ViewState>,
+const listenToMapMovesAndMarkerClicks = (
+  map: MapInstance,
+  queue: Queue.Enqueue<MountMapMessage>,
 ) =>
-  Effect.gen(function* () {
-    if (!(element instanceof HTMLElement)) {
-      return Message.FailedMountMap({
-        reason: 'Map host is not an HTMLElement.',
-      })
-    }
-
-    return yield* Effect.gen(function* () {
-      const mountedMap = yield* Effect.acquireRelease(
+  Effect.acquireRelease(
+    Effect.try({
+      try: () => {
+        const container = map.getContainer()
+        const onMoveEnd = () => {
+          Queue.offerUnsafe(
+            queue,
+            Message.MovedMap({ bounds: boundsFromMap(map) }),
+          )
+        }
+        const onContainerClick = (event: MouseEvent) => {
+          const target = event.target
+          if (!(target instanceof Element)) {
+            return
+          }
+          const marker = target.closest('[data-location-id]')
+          if (!(marker instanceof HTMLElement)) {
+            return
+          }
+          const locationId = marker.dataset['locationId']
+          if (locationId !== undefined) {
+            Queue.offerUnsafe(queue, Message.ClickedMarker({ locationId }))
+          }
+        }
+
+        try {
+          map.on('moveend', onMoveEnd)
+          container.addEventListener('click', onContainerClick)
+          return { container, onMoveEnd, onContainerClick }
+        } catch (error) {
+          map.off('moveend', onMoveEnd)
+          container.removeEventListener('click', onContainerClick)
+          throw error
+        }
+      },
+      catch: toMapMountError,
+    }),
+    ({ container, onMoveEnd, onContainerClick }) =>
+      Effect.sync(() => {
+        map.off('moveend', onMoveEnd)
+        container.removeEventListener('click', onContainerClick)
+      }),
+  )
+
+const mountMap = (element: Element, hostId: string) =>
+  Stream.callback<MountMapMessage>(queue =>
+    Effect.gen(function* () {
+      if (!(element instanceof HTMLElement)) {
+        Queue.offerUnsafe(
+          queue,
+          Message.FailedMountMap({
+            reason: 'Map host is not an HTMLElement.',
+          }),
+        )
+        return yield* Effect.never
+      }
+
+      const mapResource = yield* Effect.acquireRelease(
         Effect.gen(function* () {
           const maplibre = yield* Effect.tryPromise(() => import('maplibre-gl'))
-          maplibre.setWorkerUrl(maplibreWorkerUrl)
-          const map = new maplibre.Map({
-            container: element,
-            style: 'https://demotiles.maplibre.org/style.json',
-            center: [0, 20],
-            zoom: INITIAL_MAP_ZOOM,
-          })
-
-          const markerElements = Array.map(
-            featuredLocations,
-            ({ id, lng, lat }) => {
-              const markerElement = document.createElement('button')
-              markerElement.setAttribute('data-location-id', id)
-              markerElement.setAttribute('aria-label', `Marker: ${id}`)
-              markerElement.className = markerStyle
-              new maplibre.Marker({ element: markerElement })
-                .setLngLat([lng, lat])
-                .addTo(map)
-              return markerElement
+          const map = yield* Effect.try({
+            try: () => {
+              maplibre.setWorkerUrl(maplibreWorkerUrl)
+              return new maplibre.Map({
+                container: element,
+                style: 'https://demotiles.maplibre.org/style.json',
+                center: [0, 20],
+                zoom: INITIAL_MAP_ZOOM,
+              })
             },
-          )
-
-          setMap(hostId, map)
-          return { map, markerElements }
+            catch: toMapMountError,
+          })
+          return { map, maplibre }
         }),
-        () => Effect.sync(() => removeMap(hostId)),
+        ({ map }) => Effect.sync(() => removeMap(hostId, map)),
       )
+      const { map, maplibre } = mapResource
 
-      yield* viewStateChanges.pipe(
-        Stream.runForEach(viewState =>
-          applyMapViewState(mountedMap, viewState),
-        ),
-        Effect.forkScoped,
-      )
+      yield* addLocationMarkers(map, maplibre)
+      setMap(hostId, map)
 
-      return Message.SucceededMountMap({ hostId })
+      yield* listenToMapMovesAndMarkerClicks(map, queue)
+
+      Queue.offerUnsafe(queue, Message.SucceededMountMap({ hostId }))
+      Queue.offerUnsafe(queue, Message.MovedMap({ bounds: boundsFromMap(map) }))
+      return yield* Effect.never
     }).pipe(
       Effect.catch(error =>
-        Effect.succeed(
-          Message.FailedMountMap({
-            reason: error instanceof Error ? error.message : `${error}`,
-          }),
+        Effect.sync(() =>
+          Queue.offerUnsafe(
+            queue,
+            Message.FailedMountMap({ reason: toMapMountError(error).message }),
+          ),
         ),
       ),
-    )
-  })
+    ),
+  )
 
-export const MountMap = Mount.define('MountMap', {
+export const MountMap = Mount.defineStream('MountMap', {
   args: { hostId: Schema.String },
-  messages: [Message.SucceededMountMap, Message.FailedMountMap],
-  execute: ({ element, hostId, viewStateChanges }) =>
-    mountMap(element, hostId, viewStateChanges),
+  messages: [
+    Message.SucceededMountMap,
+    Message.FailedMountMap,
+    Message.MovedMap,
+    Message.ClickedMarker,
+  ],
+  execute: ({ element, hostId }) => mountMap(element, hostId),
 })
 
-// SUBSCRIPTIONS
-
 const boundsFromMap = (map: MapInstance): Bounds => {
   const bounds = map.getBounds()
   return {
@@ -415,72 +459,6 @@ const boundsFromMap = (map: MapInstance): Bounds => {
   }
 }
 
-const streamMapEvents = (hostId: string) =>
-  Stream.callback<Message>(queue =>
-    Effect.acquireRelease(
-      Effect.sync(() =>
-        Option.map(getMap(hostId), map => {
-          const onMoveEnd = () => {
-            Queue.offerUnsafe(
-              queue,
-              Message.MovedMap({ bounds: boundsFromMap(map) }),
-            )
-          }
-
-          const onContainerClick = (event: MouseEvent) => {
-            const target = event.target
-            if (!(target instanceof Element)) {
-              return
-            }
-            const marker = target.closest('[data-location-id]')
-            if (!(marker instanceof HTMLElement)) {
-              return
-            }
-            const locationId = marker.dataset['locationId']
-            if (locationId !== undefined) {
-              Queue.offerUnsafe(queue, Message.ClickedMarker({ locationId }))
-            }
-          }
-
-          map.on('moveend', onMoveEnd)
-          map.getContainer().addEventListener('click', onContainerClick)
-          Queue.offerUnsafe(
-            queue,
-            Message.MovedMap({ bounds: boundsFromMap(map) }),
-          )
-
-          return { map, onMoveEnd, onContainerClick }
-        }),
-      ),
-      maybeHandle =>
-        Effect.sync(() =>
-          Option.match(maybeHandle, {
-            onNone: Function.constVoid,
-            onSome: ({ map, onMoveEnd, onContainerClick }) => {
-              map.off('moveend', onMoveEnd)
-              map.getContainer().removeEventListener('click', onContainerClick)
-            },
-          }),
-        ),
-    ).pipe(Effect.flatMap(() => Effect.never)),
-  )
-
-export const subscriptions = Subscription.make<Model, Message>()(entry => ({
-  mapEvents: entry(
-    { maybeMapHostId: Schema.Option(Schema.String) },
-    {
-      modelToDependencies: model => ({
-        maybeMapHostId: model.maybeMapHostId,
-      }),
-      dependenciesToStream: ({ maybeMapHostId }) =>
-        Option.match(maybeMapHostId, {
-          onNone: () => Stream.empty,
-          onSome: streamMapEvents,
-        }),
-    },
-  ),
-}))
-
 // VIEW
 
 const HOST_ID = 'map-host-1'

package/dist/templates/examples/map/src/mapHost.ts

@@ -1,11 +1,10 @@
-import { Function, Option } from 'effect'
+import { Option } from 'effect'
 import type { Map as MapInstance } from 'maplibre-gl'
 
 const mapsByHostId = new Map<string, MapInstance>()
 
-/** Stash a live Map instance against an id so Subscriptions and Commands
- *  can reach it without putting the (mutable, unfreezable) instance in the
- *  Model. Cleanup is paired in `OnMount`'s cleanup. */
+/** Stash a live Map instance against an id so Commands can reach it without
+ *  putting the mutable, unfreezable instance in the Model. */
 export const setMap = (hostId: string, instance: MapInstance): void => {
   mapsByHostId.set(hostId, instance)
 }
@@ -13,11 +12,10 @@ export const setMap = (hostId: string, instance: MapInstance): void => {
 export const getMap = (hostId: string): Option.Option<MapInstance> =>
   Option.fromNullishOr(mapsByHostId.get(hostId))
 
-export const removeMap = (hostId: string): void =>
-  Option.match(getMap(hostId), {
-    onNone: Function.constVoid,
-    onSome: map => {
-      map.remove()
-      mapsByHostId.delete(hostId)
-    },
-  })
+export const removeMap = (hostId: string, map: MapInstance): void => {
+  map.remove()
+
+  if (mapsByHostId.get(hostId) === map) {
+    mapsByHostId.delete(hostId)
+  }
+}

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

@@ -1,11 +1,11 @@
-import { Deferred, Effect, PubSub, Stream } from 'effect'
-import { Mount } from 'foldkit'
+import { Deferred, Effect, Stream } from 'effect'
 import { beforeEach, describe, expect, test, vi } from 'vitest'
 
-import { MountMap } from './main'
+import { Message, MountMap } from './main'
 
 const maplibre = vi.hoisted(() => {
   let container: HTMLElement | undefined
+  let onMoveEnd: (() => void) | undefined
 
   return {
     get container(): HTMLElement | undefined {
@@ -14,8 +14,15 @@ const maplibre = vi.hoisted(() => {
     set container(nextContainer: HTMLElement | undefined) {
       container = nextContainer
     },
-    disableKeyboard: vi.fn(),
-    enableKeyboard: vi.fn(),
+    clearEventHandlers: (): void => {
+      onMoveEnd = undefined
+    },
+    emitMoveEnd: (): void => {
+      onMoveEnd?.()
+    },
+    setMoveEndListener: (listener: () => void): void => {
+      onMoveEnd = listener
+    },
     makeMap: vi.fn(),
     removeMap: vi.fn(),
   }
@@ -23,11 +30,6 @@ const maplibre = vi.hoisted(() => {
 
 vi.mock('maplibre-gl', () => {
   class Map {
-    readonly keyboard = {
-      disable: maplibre.disableKeyboard,
-      enable: maplibre.enableKeyboard,
-    }
-
     constructor({ container }: { container: HTMLElement }) {
       maplibre.container = container
       maplibre.makeMap()
@@ -36,6 +38,31 @@ vi.mock('maplibre-gl', () => {
     remove(): void {
       maplibre.removeMap()
     }
+
+    on(eventName: string, listener: () => void): this {
+      if (eventName === 'moveend') {
+        maplibre.setMoveEndListener(listener)
+      }
+      return this
+    }
+
+    off(): this {
+      maplibre.clearEventHandlers()
+      return this
+    }
+
+    getContainer(): HTMLElement {
+      return maplibre.container ?? document.createElement('div')
+    }
+
+    getBounds() {
+      return {
+        getWest: () => -180,
+        getSouth: () => -85,
+        getEast: () => 180,
+        getNorth: () => 85,
+      }
+    }
   }
 
   class Marker {
@@ -58,70 +85,68 @@ vi.mock('maplibre-gl', () => {
   return { Map, Marker, setWorkerUrl: vi.fn() }
 })
 
+const mountAndInteract = (host: HTMLElement): Effect.Effect<Array<Message>> =>
+  Effect.scoped(
+    Effect.gen(function* () {
+      const received: Array<Message> = []
+      const mounted = yield* Deferred.make<void>()
+
+      yield* MountMap({ hostId: 'test-map-host' })
+        .f(host, Stream.empty)
+        .pipe(
+          Stream.runForEach(message =>
+            Effect.sync(() => {
+              received.push(message)
+              if (message._tag === 'MovedMap') {
+                Effect.runSync(Deferred.succeed(mounted, undefined))
+              }
+            }),
+          ),
+          Effect.forkScoped,
+        )
+
+      yield* Deferred.await(mounted)
+      const marker = host.querySelector('[data-location-id]')
+      if (marker === null) {
+        throw new Error('Expected a mounted marker')
+      }
+
+      marker.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+      maplibre.emitMoveEnd()
+      yield* Effect.yieldNow
+
+      expect(received.map(message => message._tag)).toEqual([
+        'SucceededMountMap',
+        'MovedMap',
+        'ClickedMarker',
+        'MovedMap',
+      ])
+      return received
+    }),
+  )
+
 describe('MountMap', () => {
   beforeEach(() => {
     maplibre.container = undefined
+    maplibre.clearEventHandlers()
     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)
+  test('rebinds map events when the same host id remounts', async () => {
+    const firstHost = document.createElement('div')
+    const firstMessages = await Effect.runPromise(mountAndInteract(firstHost))
     expect(maplibre.removeMap).toHaveBeenCalledOnce()
+
+    maplibre.emitMoveEnd()
+    firstHost
+      .querySelector('[data-location-id]')
+      ?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    expect(firstMessages).toHaveLength(4)
+
+    const secondHost = document.createElement('div')
+    await Effect.runPromise(mountAndInteract(secondHost))
+
+    expect(maplibre.makeMap).toHaveBeenCalledTimes(2)
+    expect(maplibre.removeMap).toHaveBeenCalledTimes(2)
   })
 })

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

@@ -1,5 +1,5 @@
 import { Effect, Match, Option, Schema, Stream } from 'effect'
-import { Subscription } from 'foldkit'
+import { Dom, Subscription } from 'foldkit'
 
 import { Message } from './message'
 import type { Model } from './model'
@@ -39,16 +39,16 @@ const toToolMessage = (event: KeyboardEvent): Option.Option<Message> => {
 }
 
 export const subscriptions = Subscription.make<Model, Message>()(entry => ({
-  undoRedoKeys: Subscription.persistent(
-    Subscription.fromEventFilterMapPreventDefault({
+  undoRedoKeys: Subscription.persistentEntry(
+    Dom.streamFromEventFilterMapPreventDefault({
       target: document,
       type: 'keydown',
       filterMapEvent: toUndoRedoMessage,
     }),
   ),
 
-  toolKeys: Subscription.persistent(
-    Subscription.fromEventFilterMap({
+  toolKeys: Subscription.persistentEntry(
+    Dom.streamFromEventFilterMap({
       target: document,
       type: 'keydown',
       filterMapEvent: toToolMessage,

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

@@ -1,5 +1,5 @@
 import { Array, Effect, Match, Option, Schema } from 'effect'
-import { Command, Runtime, Subscription, Update } from 'foldkit'
+import { Command, Dom, Runtime, Subscription, Update } from 'foldkit'
 import { Document, Html, HtmlBuilder } from 'foldkit/html'
 import { defineMessageUnion } from 'foldkit/message'
 import { UrlRequest, load, pushUrl } from 'foldkit/navigation'
@@ -160,8 +160,8 @@ export const update = (model: Model, message: Message) =>
 // SUBSCRIPTION
 
 export const subscriptions = Subscription.make<Model, Message>()(() => ({
-  keyBindings: Subscription.persistent(
-    Subscription.keyBindings<Message>({
+  keyBindings: Subscription.persistentEntry(
+    Dom.streamFromKeyBindings<Message>({
       bindings: [
         {
           keys: ['G', 'H'],

package/dist/templates/examples/slow-warnings/src/main.ts

@@ -1,5 +1,5 @@
 import { Array, Match, Number, Option, Schema, Stream, pipe } from 'effect'
-import { Runtime, Subscription, type Update } from 'foldkit'
+import { Dom, Runtime, Subscription, type Update } from 'foldkit'
 import { type Document, type Html, HtmlBuilder, createLazy } from 'foldkit/html'
 import { defineMessageUnion } from 'foldkit/message'
 import { modifyFields } from 'foldkit/struct'
@@ -61,7 +61,7 @@ export const Message = defineMessageUnion({
 
 export type Message = typeof Message.Type
 
-const slowWarningTarget: Subscription.TypedEventTarget<{
+const slowWarningTarget: Dom.TypedEventTarget<{
   [SLOW_WARNING_EVENT]: CustomEvent<SlowWarningReport>
 }> = new EventTarget()
 
@@ -219,8 +219,8 @@ export const init: Runtime.ApplicationInit<Model, Message> = () => ({
 // SUBSCRIPTION
 
 export const subscriptions = Subscription.make<Model, Message>()(entry => ({
-  slowWarnings: Subscription.persistent(
-    Subscription.fromEventFilterMap({
+  slowWarnings: Subscription.persistentEntry(
+    Dom.streamFromEventFilterMap({
       target: slowWarningTarget,
       type: SLOW_WARNING_EVENT,
       filterMapEvent: event =>

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

@@ -8,7 +8,7 @@ import {
   Stream,
   pipe,
 } from 'effect'
-import { Command, Runtime, Subscription, type Update } from 'foldkit'
+import { Command, Dom, Runtime, Subscription, type Update } from 'foldkit'
 import { Document, Html, HtmlBuilder } from 'foldkit/html'
 import { defineMessageUnion } from 'foldkit/message'
 import { modifyFields } from 'foldkit/struct'
@@ -244,6 +244,7 @@ export const subscriptions = Subscription.make<Model, Message>()(entry => ({
       dependenciesToStream: ({ isPlaying, interval }) =>
         Stream.when(
           Stream.tick(Duration.millis(interval)).pipe(
+            Stream.drop(1),
             Stream.map(Message.TickedClock),
           ),
           Effect.sync(() => isPlaying),
@@ -251,8 +252,8 @@ export const subscriptions = Subscription.make<Model, Message>()(entry => ({
     },
   ),
 
-  keyboard: Subscription.persistent(
-    Subscription.fromEventFilterMapPreventDefault({
+  keyboard: Subscription.persistentEntry(
+    Dom.streamFromEventFilterMapPreventDefault({
       target: document,
       type: 'keydown',
       filterMapEvent: keyboardEvent =>

package/dist/templates/examples/ssg/src/entry.server.ts

@@ -3,6 +3,8 @@ import { Server } from 'foldkit/experimental'
 
 import { init, view } from './main'
 
+export const renderDocument = Server.renderDocument
+
 export const prerenderPaths: ReadonlyArray<string> = ['/', '/about']
 
 export const renderPage = (request: Request): Promise<Server.EntryResult> =>

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

@@ -1,6 +1,7 @@
 import { Runtime } from 'foldkit'
 
 import { Message, Model, init, update, view } from './main'
+import './styles.css'
 
 const application = Runtime.makeApplication({
   Model,