create-foldkit-app 0.38.0 → 0.39.0

package/dist/templates/examples/ssr/package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "@effect/platform-browser": "4.0.0",
     "@effect/platform-node": "4.0.0",
-    "@effect/platform-node-shared": "4.0.0",
+    "@foldkit/node": "workspace:*",
     "@foldkit/ui": "workspace:*",
     "effect": "4.0.0",
     "foldkit": "workspace:*"

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

@@ -4,6 +4,8 @@ import { Server } from 'foldkit/experimental'
 import { readCountCookie } from './cookie'
 import { Flags, init, view } from './main'
 
+export const renderDocument = Server.renderDocument
+
 const flagsForRequest = (cookieHeader: string): Flags => ({
   initialCount: readCountCookie(cookieHeader),
   renderedAt: new Date().toISOString(),

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

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

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

@@ -123,6 +123,7 @@ export const subscriptions = Subscription.make<Model, Message>()(entry => ({
       dependenciesToStream: ({ isRunning }) =>
         Stream.when(
           Stream.tick(Duration.millis(TICK_INTERVAL_MS)).pipe(
+            Stream.drop(1),
             Stream.map(Message.Ticked),
           ),
           Effect.sync(() => isRunning),

package/dist/templates/examples/ui-showcase/src/main.ts

@@ -385,8 +385,8 @@ const mobileNavLinkClassName = (isActive: boolean): string =>
       : 'text-gray-700 hover:bg-gray-200',
   )
 
-const sidebarView = (currentRoute: AppRoute, h: HtmlBuilder<Message>): Html =>
-  componentNav(currentRoute, ({ nav, items }) =>
+const sidebarView = (currentRoute: AppRoute, h: HtmlBuilder<Message>): Html => {
+  const sidebarNavView = ({ nav, items }: Nav.RenderInfo): Html =>
     h.nav(
       [
         ...nav,
@@ -412,15 +412,28 @@ const sidebarView = (currentRoute: AppRoute, h: HtmlBuilder<Message>): Html =>
         ),
         navListView(items, navLinkClassName, h),
       ],
-    ),
-  )
+    )
+
+  return componentNav(currentRoute, sidebarNavView)
+}
 
 const mobileMenuContent = (
   currentRoute: AppRoute,
   closeButton: Dialog.RenderInfo['closeButton'],
   h: HtmlBuilder<UiMessage>,
-): Html =>
-  h.div(
+): Html => {
+  const mobileNavView = ({ nav, items }: Nav.RenderInfo): Html =>
+    h.nav(
+      [
+        ...nav,
+        h.Class('flex-1 overflow-y-auto min-h-0 p-4'),
+        h.Tabindex(-1),
+        h.Autofocus(true),
+      ],
+      [navListView(items, mobileNavLinkClassName, h)],
+    )
+
+  return h.div(
     [h.Class('flex flex-col h-full')],
     [
       h.div(
@@ -460,19 +473,10 @@ const mobileMenuContent = (
           ),
         ],
       ),
-      componentNav(currentRoute, ({ nav, items }) =>
-        h.nav(
-          [
-            ...nav,
-            h.Class('flex-1 overflow-y-auto min-h-0 p-4'),
-            h.Tabindex(-1),
-            h.Autofocus(true),
-          ],
-          [navListView(items, mobileNavLinkClassName, h)],
-        ),
-      ),
+      componentNav(currentRoute, mobileNavView),
     ],
   )
+}
 
 const mobileHeaderView = (model: Model, h: HtmlBuilder<Message>): Html =>
   h.header(
@@ -522,33 +526,41 @@ const mobileMenuDialogView = Submodel.defineView<
   UiModel,
   UiMessage,
   MobileMenuViewInputs
->((model, { currentRoute }, h): Html =>
-  h.submodel({
+>((model, { currentRoute }, h): Html => {
+  const mobileMenuDialogContent = ({
+    dialog,
+    backdrop,
+    panel,
+    closeButton,
+    isVisible,
+  }: Dialog.RenderInfo): Html =>
+    h.dialog(
+      [...dialog, h.Class('md:hidden')],
+      isVisible
+        ? [
+            h.div([...backdrop, h.Class('fixed inset-0 z-[59]')]),
+            h.div(
+              [
+                ...panel,
+                h.Class('fixed inset-0 z-[60] bg-white flex flex-col'),
+              ],
+              [mobileMenuContent(currentRoute, closeButton, h)],
+            ),
+          ]
+        : [],
+    )
+
+  return h.submodel({
     slotId: model.mobileMenuDialog.id,
     model: model.mobileMenuDialog,
     view: Dialog.view,
     viewInputs: {
-      toView: ({ dialog, backdrop, panel, closeButton, isVisible }) =>
-        h.dialog(
-          [...dialog, h.Class('md:hidden')],
-          isVisible
-            ? [
-                h.div([...backdrop, h.Class('fixed inset-0 z-[59]')]),
-                h.div(
-                  [
-                    ...panel,
-                    h.Class('fixed inset-0 z-[60] bg-white flex flex-col'),
-                  ],
-                  [mobileMenuContent(currentRoute, closeButton, h)],
-                ),
-              ]
-            : [],
-        ),
+      toView: mobileMenuDialogContent,
     },
     toParentMessage: message =>
       UiMessage.GotMobileMenuDialogMessage({ message }),
-  }),
-)
+  })
+})
 
 const mobileMenuView = (model: Model, h: HtmlBuilder<Message>): Html =>
   h.submodel({

package/dist/templates/examples/ui-showcase/src/ui/subscriptions.ts

@@ -1,7 +1,7 @@
 import { Option } from 'effect'
 import { Subscription } from 'foldkit'
 
-import { DragAndDrop, Slider, VirtualList } from '@foldkit/ui'
+import { DragAndDrop, Slider } from '@foldkit/ui'
 
 import { Message as UiMessage } from './message'
 import type { UiModel } from './model'
@@ -33,21 +33,6 @@ const sliderVolumeSubscriptions = Subscription.lift({
   toParentMessage: message => UiMessage.GotSliderVolumeDemoMessage({ message }),
 })
 
-const virtualListDemoSubscriptions = Subscription.lift({
-  virtualListContainerEvents: VirtualList.subscriptions.containerEvents,
-})<UiModel, UiMessage>({
-  read: model => Option.some(model.virtualListDemo),
-  toParentMessage: message => UiMessage.GotVirtualListDemoMessage({ message }),
-})
-
-const virtualListVariableDemoSubscriptions = Subscription.lift({
-  virtualListVariableContainerEvents: VirtualList.subscriptions.containerEvents,
-})<UiModel, UiMessage>({
-  read: model => Option.some(model.virtualListVariableDemo),
-  toParentMessage: message =>
-    UiMessage.GotVirtualListVariableDemoMessage({ message }),
-})
-
 const toastDemoSubscriptions = Subscription.lift(Toast.subscriptions)<
   UiModel,
   UiMessage
@@ -60,7 +45,5 @@ export const subscriptions = Subscription.aggregate(
   dragAndDropSubscriptions,
   sliderRatingSubscriptions,
   sliderVolumeSubscriptions,
-  virtualListDemoSubscriptions,
-  virtualListVariableDemoSubscriptions,
   toastDemoSubscriptions,
 )

package/dist/templates/examples/ui-showcase/src/ui/update.ts

@@ -35,11 +35,7 @@ import { CityCombobox, CityMultiCombobox } from './view/combobox'
 import { CharacterListbox, ItemListbox, ItemMultiListbox } from './view/listbox'
 import { PlanRadioGroup } from './view/radioGroup'
 import { DemoTabs } from './view/tabs'
-import {
-  ROW_COUNT as VIRTUAL_LIST_ROW_COUNT,
-  variableActivities,
-  variableRowHeightPx,
-} from './view/virtualList'
+import { ROW_COUNT as VIRTUAL_LIST_ROW_COUNT } from './view/virtualList'
 
 const reorderColumns = (
   columns: ReadonlyArray<DemoColumn>,
@@ -906,13 +902,7 @@ const foldVirtualListVariableDemo = Update.foldChild({
 })
 
 const foldVirtualListVariableDemoScrollToIndex = Update.foldChild({
-  update: (virtualList: VirtualList.Model, index: number) =>
-    VirtualList.scrollToIndexVariable(
-      virtualList,
-      variableActivities,
-      variableRowHeightPx,
-      index,
-    ),
+  update: VirtualList.scrollToIndex,
   read: (model: UiModel) => Option.some(model.virtualListVariableDemo),
   write: (model, nextVirtualListVariableDemo) =>
     modifyFields(model, {

package/dist/templates/examples/ui-showcase/src/ui/view/calendar.ts

@@ -175,6 +175,14 @@ const yearsView = (
 
 export const view = Submodel.defineView<UiModel, UiMessage>(
   (model, h): Html => {
+    const calendarView = Match.type<Calendar.CalendarAttributes>().pipe(
+      Match.tagsExhaustive({
+        Days: days => daysView(days, h),
+        Months: months => monthsView(months, h),
+        Years: years => yearsView(years, h),
+      }),
+    )
+
     return h.div(
       [],
       [
@@ -185,13 +193,7 @@ export const view = Submodel.defineView<UiModel, UiMessage>(
           view: Calendar.view,
           viewInputs: {
             maybeSelectedDate: model.maybeCalendarBasicDemoSelectedDate,
-            toView: Match.type<Calendar.CalendarAttributes>().pipe(
-              Match.tagsExhaustive({
-                Days: days => daysView(days, h),
-                Months: months => monthsView(months, h),
-                Years: years => yearsView(years, h),
-              }),
-            ),
+            toView: calendarView,
           },
           toParentMessage: message =>
             UiMessage.GotCalendarBasicDemoMessage({ message }),

package/dist/templates/examples/ui-showcase/src/ui/view/checkbox.ts

@@ -24,6 +24,31 @@ const descriptionClassName = 'text-sm text-gray-500'
 export const view = Submodel.defineView<UiModel, UiMessage>(
   (model, h): Html => {
     const checkmark = h.span([h.Class('text-white text-xs')], ['✓'])
+    const basicCheckboxView = (
+      attributes: Checkbox.CheckboxAttributes<UiMessage>,
+    ): Html =>
+      h.div(
+        [h.Class('flex flex-col gap-1')],
+        [
+          h.div(
+            [h.Class(topRowClassName)],
+            [
+              h.button(
+                [...attributes.checkbox, h.Class(checkboxClassName)],
+                model.isCheckboxBasicDemoChecked ? [checkmark] : [],
+              ),
+              h.label(
+                [...attributes.label, h.Class(labelClassName)],
+                ['Accept terms and conditions'],
+              ),
+            ],
+          ),
+          h.p(
+            [...attributes.description, h.Class(descriptionClassName)],
+            ['You agree to our Terms of Service and Privacy Policy.'],
+          ),
+        ],
+      )
 
     return h.div(
       [],
@@ -41,29 +66,7 @@ export const view = Submodel.defineView<UiModel, UiMessage>(
             hasDescription: true,
             onToggle: isChecked =>
               UiMessage.ToggledCheckboxBasicDemo({ isChecked }),
-            toView: attributes =>
-              h.div(
-                [h.Class('flex flex-col gap-1')],
-                [
-                  h.div(
-                    [h.Class(topRowClassName)],
-                    [
-                      h.button(
-                        [...attributes.checkbox, h.Class(checkboxClassName)],
-                        model.isCheckboxBasicDemoChecked ? [checkmark] : [],
-                      ),
-                      h.label(
-                        [...attributes.label, h.Class(labelClassName)],
-                        ['Accept terms and conditions'],
-                      ),
-                    ],
-                  ),
-                  h.p(
-                    [...attributes.description, h.Class(descriptionClassName)],
-                    ['You agree to our Terms of Service and Privacy Policy.'],
-                  ),
-                ],
-              ),
+            toView: basicCheckboxView,
           },
           h,
         ),
@@ -101,6 +104,57 @@ const indeterminateDemo = (
     }
   }
 
+  const selectAllView = (
+    attributes: Checkbox.CheckboxAttributes<UiMessage>,
+  ): Html =>
+    h.div(
+      [h.Class(topRowClassName)],
+      [
+        h.button(
+          [...attributes.checkbox, h.Class(checkboxClassName)],
+          resolveSelectAllMark(),
+        ),
+        h.label(
+          [...attributes.label, h.Class(labelClassName)],
+          ['All notifications'],
+        ),
+      ],
+    )
+
+  const emailNotificationsView = (
+    attributes: Checkbox.CheckboxAttributes<UiMessage>,
+  ): Html =>
+    notificationOptionView(
+      attributes,
+      model.isCheckboxOptionADemoChecked,
+      'Email notifications',
+    )
+
+  const pushNotificationsView = (
+    attributes: Checkbox.CheckboxAttributes<UiMessage>,
+  ): Html =>
+    notificationOptionView(
+      attributes,
+      model.isCheckboxOptionBDemoChecked,
+      'Push notifications',
+    )
+
+  const notificationOptionView = (
+    attributes: Checkbox.CheckboxAttributes<UiMessage>,
+    isChecked: boolean,
+    label: string,
+  ): Html =>
+    h.div(
+      [h.Class(topRowClassName)],
+      [
+        h.button(
+          [...attributes.checkbox, h.Class(checkboxClassName)],
+          isChecked ? [checkmark] : [],
+        ),
+        h.label([...attributes.label, h.Class(labelClassName)], [label]),
+      ],
+    )
+
   return [
     h.div(
       [h.Class('flex flex-col gap-3')],
@@ -112,20 +166,7 @@ const indeterminateDemo = (
             isIndeterminate,
             onToggle: isChecked =>
               UiMessage.ToggledCheckboxAllDemo({ isChecked }),
-            toView: attributes =>
-              h.div(
-                [h.Class(topRowClassName)],
-                [
-                  h.button(
-                    [...attributes.checkbox, h.Class(checkboxClassName)],
-                    resolveSelectAllMark(),
-                  ),
-                  h.label(
-                    [...attributes.label, h.Class(labelClassName)],
-                    ['All notifications'],
-                  ),
-                ],
-              ),
+            toView: selectAllView,
           },
           h,
         ),
@@ -138,20 +179,7 @@ const indeterminateDemo = (
                 isChecked: model.isCheckboxOptionADemoChecked,
                 onToggle: isChecked =>
                   UiMessage.ToggledCheckboxOptionADemo({ isChecked }),
-                toView: attributes =>
-                  h.div(
-                    [h.Class(topRowClassName)],
-                    [
-                      h.button(
-                        [...attributes.checkbox, h.Class(checkboxClassName)],
-                        model.isCheckboxOptionADemoChecked ? [checkmark] : [],
-                      ),
-                      h.label(
-                        [...attributes.label, h.Class(labelClassName)],
-                        ['Email notifications'],
-                      ),
-                    ],
-                  ),
+                toView: emailNotificationsView,
               },
               h,
             ),
@@ -161,20 +189,7 @@ const indeterminateDemo = (
                 isChecked: model.isCheckboxOptionBDemoChecked,
                 onToggle: isChecked =>
                   UiMessage.ToggledCheckboxOptionBDemo({ isChecked }),
-                toView: attributes =>
-                  h.div(
-                    [h.Class(topRowClassName)],
-                    [
-                      h.button(
-                        [...attributes.checkbox, h.Class(checkboxClassName)],
-                        model.isCheckboxOptionBDemoChecked ? [checkmark] : [],
-                      ),
-                      h.label(
-                        [...attributes.label, h.Class(labelClassName)],
-                        ['Push notifications'],
-                      ),
-                    ],
-                  ),
+                toView: pushNotificationsView,
               },
               h,
             ),