create-foldkit-app 0.27.3 → 0.28.0

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

@@ -0,0 +1,345 @@
+import {
+  Array,
+  Duration,
+  Effect,
+  Match as M,
+  Schema as S,
+  Stream,
+  pipe,
+} from 'effect'
+import { Command, Runtime, Subscription } from 'foldkit'
+import { Document, Html, HtmlBuilder } from 'foldkit/html'
+import { defineMessageUnion } from 'foldkit/message'
+import { evo } from 'foldkit/struct'
+
+import { GAME, GAME_SPEED } from './constants'
+import { Apple, Direction, Position, Snake } from './domain'
+
+// MODEL
+
+export const GameState = S.Literals([
+  'NotStarted',
+  'Playing',
+  'Paused',
+  'GameOver',
+])
+export type GameState = typeof GameState.Type
+
+export const Model = S.Struct({
+  snake: Snake.Snake,
+  apple: Position.Position,
+  direction: Direction.Direction,
+  nextDirection: Direction.Direction,
+  gameState: GameState,
+  points: S.Number,
+  highScore: S.Number,
+})
+export type Model = typeof Model.Type
+
+// MESSAGE
+
+export const Message = defineMessageUnion({
+  TickedClock: {},
+  PressedKey: { key: S.String },
+  PausedGame: {},
+  RestartedGame: {},
+  CompletedGenerateApplePosition: { position: Position.Position },
+})
+
+export type Message = typeof Message.Type
+
+// INIT
+
+export const init: Runtime.ApplicationInit<Model, Message> = () => {
+  const snake = Snake.create(GAME.INITIAL_POSITION)
+
+  return [
+    {
+      snake,
+      apple: { x: 15, y: 15 },
+      direction: GAME.INITIAL_DIRECTION,
+      nextDirection: GAME.INITIAL_DIRECTION,
+      gameState: 'NotStarted',
+      points: 0,
+      highScore: 0,
+    },
+    [GenerateApplePosition({ snake: snake })],
+  ]
+}
+
+// UPDATE
+
+export const update = (model: Model, message: Message) =>
+  Message.match<readonly [Model, ReadonlyArray<Command.Command<Message>>]>(
+    message,
+    {
+      PressedKey: ({ key }) =>
+        M.value(key).pipe(
+          M.withReturnType<
+            readonly [Model, ReadonlyArray<Command.Command<Message>>]
+          >(),
+          M.whenOr(
+            'ArrowUp',
+            'ArrowDown',
+            'ArrowLeft',
+            'ArrowRight',
+            'w',
+            'a',
+            's',
+            'd',
+            moveKey => {
+              const nextDirection = M.value(moveKey).pipe(
+                M.withReturnType<Direction.Direction>(),
+                M.whenOr('ArrowUp', 'w', () => 'Up'),
+                M.whenOr('ArrowDown', 's', () => 'Down'),
+                M.whenOr('ArrowLeft', 'a', () => 'Left'),
+                M.whenOr('ArrowRight', 'd', () => 'Right'),
+                M.exhaustive,
+              )
+
+              if (model.gameState === 'Playing') {
+                return [
+                  evo(model, {
+                    nextDirection: () => nextDirection,
+                  }),
+                  [],
+                ]
+              } else {
+                return [model, []]
+              }
+            },
+          ),
+          M.when(' ', () => {
+            const nextGameState = M.value(model.gameState).pipe(
+              M.withReturnType<GameState>(),
+              M.when('NotStarted', () => 'Playing'),
+              M.when('Playing', () => 'Paused'),
+              M.when('Paused', () => 'Playing'),
+              M.when('GameOver', () => 'GameOver'),
+              M.exhaustive,
+            )
+            return [
+              evo(model, {
+                gameState: () => nextGameState,
+              }),
+              [],
+            ]
+          }),
+          M.when('r', () => {
+            const nextSnake = Snake.create(GAME.INITIAL_POSITION)
+
+            return [
+              evo(model, {
+                snake: () => nextSnake,
+                direction: () => GAME.INITIAL_DIRECTION,
+                nextDirection: () => GAME.INITIAL_DIRECTION,
+                gameState: () => 'NotStarted',
+                points: () => 0,
+              }),
+              [GenerateApplePosition({ snake: nextSnake })],
+            ]
+          }),
+          M.orElse(() => [model, []]),
+        ),
+
+      TickedClock: () => {
+        if (model.gameState !== 'Playing') {
+          return [model, []]
+        }
+
+        const currentDirection = Direction.isOpposite(
+          model.direction,
+          model.nextDirection,
+        )
+          ? model.direction
+          : model.nextDirection
+
+        const newHead = Position.move(model.snake[0], currentDirection)
+        const willEatApple = Position.equivalence(newHead, model.apple)
+
+        const nextSnake = willEatApple
+          ? Snake.grow(model.snake, currentDirection)
+          : Snake.move(model.snake, currentDirection)
+
+        if (Snake.hasCollision(nextSnake)) {
+          return [
+            evo(model, {
+              gameState: () => 'GameOver',
+              highScore: highScore => Math.max(model.points, highScore),
+            }),
+            [],
+          ]
+        }
+
+        const commands = willEatApple
+          ? [GenerateApplePosition({ snake: nextSnake })]
+          : []
+
+        return [
+          evo(model, {
+            snake: () => nextSnake,
+            direction: () => currentDirection,
+            points: points =>
+              willEatApple ? points + GAME.POINTS_PER_APPLE : points,
+          }),
+          commands,
+        ]
+      },
+
+      PausedGame: () => [
+        evo(model, {
+          gameState: gameState =>
+            gameState === 'Playing' ? 'Paused' : 'Playing',
+        }),
+        [],
+      ],
+
+      RestartedGame: () => {
+        const startPos: Position.Position = { x: 10, y: 10 }
+        const nextSnake = Snake.create(startPos)
+
+        return [
+          evo(model, {
+            snake: () => nextSnake,
+            direction: () => 'Right',
+            nextDirection: () => 'Right',
+            gameState: () => 'NotStarted',
+            points: () => 0,
+          }),
+          [GenerateApplePosition({ snake: nextSnake })],
+        ]
+      },
+
+      CompletedGenerateApplePosition: ({ position }) => [
+        evo(model, {
+          apple: () => position,
+        }),
+        [],
+      ],
+    },
+  )
+
+// COMMAND
+
+export const GenerateApplePosition = Command.define('GenerateApplePosition', {
+  args: { snake: Snake.Snake },
+  messages: [Message.CompletedGenerateApplePosition],
+  execute: ({ snake }) =>
+    Apple.generatePosition(snake).pipe(
+      Effect.map(position =>
+        Message.CompletedGenerateApplePosition({ position }),
+      ),
+    ),
+})
+
+// SUBSCRIPTION
+
+export const subscriptions = Subscription.make<Model, Message>()(entry => ({
+  gameClock: entry(
+    {
+      isPlaying: S.Boolean,
+      interval: S.Number,
+    },
+    {
+      modelToDependencies: model => ({
+        isPlaying: model.gameState === 'Playing',
+        interval: Math.max(
+          GAME_SPEED.MIN_INTERVAL,
+          GAME_SPEED.BASE_INTERVAL - model.points,
+        ),
+      }),
+      dependenciesToStream: ({ isPlaying, interval }) =>
+        Stream.when(
+          Stream.tick(Duration.millis(interval)).pipe(
+            Stream.map(Message.TickedClock),
+          ),
+          Effect.sync(() => isPlaying),
+        ),
+    },
+  ),
+
+  keyboard: Subscription.persistent(
+    Stream.fromEventListener<KeyboardEvent>(document, 'keydown').pipe(
+      Stream.mapEffect(keyboardEvent =>
+        Effect.sync(() => keyboardEvent.preventDefault()).pipe(
+          Effect.as(Message.PressedKey({ key: keyboardEvent.key })),
+        ),
+      ),
+    ),
+  ),
+}))
+
+// VIEW
+
+const cellClass = (x: number, y: number, model: Model): string => {
+  const isSnakeHead = Position.equivalence({ x, y }, model.snake[0])
+  const isSnakeTail = pipe(
+    model.snake,
+    Array.tailNonEmpty,
+    Array.some(segment => Position.equivalence({ x, y }, segment)),
+  )
+  const isApple = Position.equivalence({ x, y }, model.apple)
+
+  return M.value({ isSnakeHead, isSnakeTail, isApple }).pipe(
+    M.when({ isSnakeHead: true }, () => 'bg-green-700'),
+    M.when({ isSnakeTail: true }, () => 'bg-green-500'),
+    M.when({ isApple: true }, () => 'bg-red-500'),
+    M.orElse(() => 'bg-gray-800'),
+  )
+}
+
+const gridView = (model: Model, h: HtmlBuilder<Message>): Html =>
+  h.div(
+    [h.Class('inline-block border-2 border-gray-600')],
+    Array.makeBy(GAME.GRID_SIZE, y =>
+      h.div(
+        [h.Class('flex')],
+        Array.makeBy(GAME.GRID_SIZE, x =>
+          h.div([h.Class(`w-6 h-6 ${cellClass(x, y, model)}`)]),
+        ),
+      ),
+    ),
+  )
+
+const gameStateView = (gameState: GameState): string =>
+  M.value(gameState).pipe(
+    M.when('NotStarted', () => 'Press SPACE to start'),
+    M.when('Playing', () => 'Playing - SPACE to pause'),
+    M.when('Paused', () => 'Paused - SPACE to continue'),
+    M.when('GameOver', () => 'Game Over - Press R to restart'),
+    M.exhaustive,
+  )
+
+const instructionsView = (h: HtmlBuilder<Message>): Html =>
+  h.div(
+    [h.Class('mt-4 text-sm text-gray-400')],
+    [
+      h.p([], ['Use ARROW KEYS or WASD to move']),
+      h.p([], ['SPACE to pause/start']),
+      h.p([], ['R to restart']),
+    ],
+  )
+
+export const view = (model: Model, h: HtmlBuilder<Message>): Document => ({
+  title: `Snake | ${model.points} pts`,
+  body: h.div(
+    [
+      h.Class(
+        'flex flex-col items-center justify-center min-h-screen bg-black text-white p-8',
+      ),
+    ],
+    [
+      h.h1([h.Class('text-4xl font-bold mb-4')], ['Snake Game']),
+      h.div(
+        [h.Class('flex gap-8 mb-4')],
+        [
+          h.p([h.Class('text-xl')], [`Score: ${model.points}`]),
+          h.p([h.Class('text-xl')], [`High Score: ${model.highScore}`]),
+        ],
+      ),
+      h.p([h.Class('text-lg mb-4')], [gameStateView(model.gameState)]),
+      gridView(model, h),
+      instructionsView(h),
+    ],
+  ),
+})

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

@@ -0,0 +1,77 @@
+import { expect, given, role, scene, text } from 'foldkit/scene'
+import { describe, test } from 'vitest'
+
+import { Snake } from './domain'
+import { type Model, update, view } from './main'
+
+const baseModel: Model = {
+  snake: Snake.create({ x: 10, y: 10 }),
+  apple: { x: 15, y: 15 },
+  direction: 'Right',
+  nextDirection: 'Right',
+  gameState: 'NotStarted',
+  points: 0,
+  highScore: 0,
+}
+
+describe('view', () => {
+  test('initial view shows the heading, score, and start prompt', () => {
+    scene(
+      { update, view },
+      given(baseModel),
+      expect(role('heading', { name: 'Snake Game' })).toExist(),
+      expect(text('Score: 0')).toExist(),
+      expect(text('High Score: 0')).toExist(),
+      expect(text('Press SPACE to start')).toExist(),
+    )
+  })
+
+  test('renders the keyboard instructions', () => {
+    scene(
+      { update, view },
+      given(baseModel),
+      expect(text('Use ARROW KEYS or WASD to move')).toExist(),
+      expect(text('SPACE to pause/start')).toExist(),
+      expect(text('R to restart')).toExist(),
+    )
+  })
+
+  test('shows the playing prompt while the game is active', () => {
+    scene(
+      { update, view },
+      given({ ...baseModel, gameState: 'Playing' }),
+      expect(text('Playing - SPACE to pause')).toExist(),
+    )
+  })
+
+  test('shows the paused prompt while the game is paused', () => {
+    scene(
+      { update, view },
+      given({ ...baseModel, gameState: 'Paused' }),
+      expect(text('Paused - SPACE to continue')).toExist(),
+    )
+  })
+
+  test('shows the game-over prompt at the end of a run', () => {
+    scene(
+      { update, view },
+      given({ ...baseModel, gameState: 'GameOver', points: 50 }),
+      expect(text('Game Over - Press R to restart')).toExist(),
+      expect(text('Score: 50')).toExist(),
+    )
+  })
+
+  test('the current and high scores reflect the Model', () => {
+    scene(
+      { update, view },
+      given({
+        ...baseModel,
+        gameState: 'Playing',
+        points: 120,
+        highScore: 200,
+      }),
+      expect(text('Score: 120')).toExist(),
+      expect(text('High Score: 200')).toExist(),
+    )
+  })
+})

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

@@ -0,0 +1,165 @@
+import { Command, given, message, model, story } from 'foldkit/story'
+import { describe, expect, test } from 'vitest'
+
+import { Snake } from './domain'
+import { GenerateApplePosition, Message, type Model, update } from './main'
+
+const initialSnake = Snake.create({ x: 10, y: 10 })
+
+const playingModel: Model = {
+  snake: initialSnake,
+  apple: { x: 15, y: 15 },
+  direction: 'Right',
+  nextDirection: 'Right',
+  gameState: 'Playing',
+  points: 0,
+  highScore: 0,
+}
+
+const notStartedModel: Model = {
+  ...playingModel,
+  gameState: 'NotStarted',
+}
+
+describe('update', () => {
+  describe('movement controls', () => {
+    test('arrow key updates nextDirection while playing', () => {
+      story(
+        update,
+        given(playingModel),
+        message(Message.PressedKey({ key: 'ArrowUp' })),
+        model(model => {
+          expect(model.nextDirection).toBe('Up')
+        }),
+      )
+    })
+
+    test('WASD key updates nextDirection while playing', () => {
+      story(
+        update,
+        given(playingModel),
+        message(Message.PressedKey({ key: 'a' })),
+        model(model => {
+          expect(model.nextDirection).toBe('Left')
+        }),
+      )
+    })
+
+    test('arrow keys are ignored while the game is paused', () => {
+      story(
+        update,
+        given({ ...playingModel, gameState: 'Paused' }),
+        message(Message.PressedKey({ key: 'ArrowDown' })),
+        model(model => {
+          expect(model.nextDirection).toBe('Right')
+        }),
+      )
+    })
+  })
+
+  describe('space key', () => {
+    test('SPACE starts the game from NotStarted', () => {
+      story(
+        update,
+        given(notStartedModel),
+        message(Message.PressedKey({ key: ' ' })),
+        model(model => {
+          expect(model.gameState).toBe('Playing')
+        }),
+      )
+    })
+
+    test('SPACE pauses the game when Playing', () => {
+      story(
+        update,
+        given(playingModel),
+        message(Message.PressedKey({ key: ' ' })),
+        model(model => {
+          expect(model.gameState).toBe('Paused')
+        }),
+      )
+    })
+
+    test('SPACE on GameOver does nothing', () => {
+      story(
+        update,
+        given({ ...playingModel, gameState: 'GameOver' }),
+        message(Message.PressedKey({ key: ' ' })),
+        model(model => {
+          expect(model.gameState).toBe('GameOver')
+        }),
+      )
+    })
+  })
+
+  describe('restart', () => {
+    test('R fires GenerateApplePosition and resets the snake', () => {
+      story(
+        update,
+        given({ ...playingModel, points: 100 }),
+        message(Message.PressedKey({ key: 'r' })),
+        model(model => {
+          expect(model.gameState).toBe('NotStarted')
+          expect(model.points).toBe(0)
+          expect(model.direction).toBe('Right')
+        }),
+        Command.expectHas(GenerateApplePosition),
+        Command.resolve(
+          GenerateApplePosition,
+          Message.CompletedGenerateApplePosition({ position: { x: 5, y: 5 } }),
+        ),
+        model(model => {
+          expect(model.apple).toEqual({ x: 5, y: 5 })
+        }),
+      )
+    })
+  })
+
+  describe('TickedClock', () => {
+    test('moves the snake one cell while Playing', () => {
+      story(
+        update,
+        given(playingModel),
+        message(Message.TickedClock()),
+        model(model => {
+          expect(model.snake[0]).toEqual({ x: 11, y: 10 })
+        }),
+      )
+    })
+
+    test('does nothing when not Playing', () => {
+      story(
+        update,
+        given(notStartedModel),
+        message(Message.TickedClock()),
+        model(model => {
+          expect(model.snake).toEqual(initialSnake)
+        }),
+      )
+    })
+
+    test('eating an apple grows the snake, adds points, and requests a new apple', () => {
+      const aboutToEatModel: Model = {
+        ...playingModel,
+        apple: { x: 11, y: 10 },
+      }
+      const lengthBefore = aboutToEatModel.snake.length
+
+      story(
+        update,
+        given(aboutToEatModel),
+        message(Message.TickedClock()),
+        Command.expectHas(GenerateApplePosition),
+        Command.resolve(
+          GenerateApplePosition,
+          Message.CompletedGenerateApplePosition({ position: { x: 5, y: 5 } }),
+        ),
+        model(model => {
+          expect(model.snake.length).toBe(lengthBefore + 1)
+          expect(model.points).toBe(10)
+          expect(model.apple).toEqual({ x: 5, y: 5 })
+        }),
+      )
+    })
+  })
+})

package/dist/templates/examples/snake/src/styles.css

@@ -0,0 +1 @@
+@import 'tailwindcss';

package/dist/templates/examples/snake/src/vitest-setup.ts

@@ -0,0 +1,3 @@
+import { setup } from 'foldkit/test/vitest'
+
+setup()

package/dist/templates/examples/ssg/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "ssg-example",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "node scripts/build.mjs",
+    "preview": "vite preview --outDir dist/client",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@effect/platform-browser": "4.0.0-rc.109",
+    "@effect/platform-node": "4.0.0-rc.109",
+    "@tailwindcss/vite": "^4.3.1",
+    "effect": "4.0.0-rc.109",
+    "foldkit": "workspace:*",
+    "tailwindcss": "^4.3.1"
+  },
+  "devDependencies": {
+    "@foldkit/devtools": "workspace:*",
+    "@foldkit/vite-plugin": "workspace:*",
+    "@trivago/prettier-plugin-sort-imports": "^6.0.2",
+    "prettier": "^3.8.4",
+    "tsx": "^4.22.4",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16"
+  }
+}

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

@@ -0,0 +1,14 @@
+import { Effect } from 'effect'
+import { Server } from 'foldkit/experimental'
+
+import { init, view } from './main'
+
+export const prerenderPaths: ReadonlyArray<string> = ['/', '/about']
+
+export const renderPage = (request: Request): Promise<Server.EntryResult> =>
+  Effect.runPromise(
+    Server.renderToString(
+      { routing: {}, init, view },
+      { url: request.url, buildId: import.meta.env.FOLDKIT_BUILD_ID },
+    ).pipe(Effect.map(Server.Rendered)),
+  )

package/{templates/rendering → dist/templates/examples}/ssg/src/entry.ts

@@ -1,14 +1,6 @@
 import { Runtime } from 'foldkit'
 
-import {
-  ChangedUrl,
-  ClickedLink,
-  Message,
-  Model,
-  init,
-  update,
-  view,
-} from './main'
+import { Message, Model, init, update, view } from './main'
 
 const application = Runtime.makeApplication({
   Model,
@@ -17,8 +9,8 @@ const application = Runtime.makeApplication({
   view,
   container: document.getElementById('root'),
   routing: {
-    onUrlRequest: request => ClickedLink({ request }),
-    onUrlChange: url => ChangedUrl({ url }),
+    onUrlRequest: request => Message.ClickedLink({ request }),
+    onUrlChange: url => Message.ChangedUrl({ url }),
   },
   devTools: {
     Message,