foldkit 0.133.0 → 0.135.0

package/README.md

@@ -41,7 +41,7 @@ A complete Foldkit program. State lives in a single Model, events become Message
 // src/main.ts
 import { Match as M, Schema as S } from 'effect'
 import { Command, Runtime } from 'foldkit'
-import { Document, html } from 'foldkit/html'
+import { Document, HtmlBuilder } from 'foldkit/html'
 import { m } from 'foldkit/message'
 
 // MODEL
@@ -88,22 +88,18 @@ export const init: Runtime.ApplicationInit<Model, Message> = () => [
 
 // VIEW
 
-export const view = (model: Model): Document => {
-  const h = html<Message>()
-
-  return {
-    title: `Counter: ${model.count}`,
-    body: h.div(
-      [],
-      [
-        h.p([], [model.count.toString()]),
-        h.button([h.OnClick(ClickedDecrement())], ['-']),
-        h.button([h.OnClick(ClickedReset())], ['Reset']),
-        h.button([h.OnClick(ClickedIncrement())], ['+']),
-      ],
-    ),
-  }
-}
+export const view = (model: Model, h: HtmlBuilder<Message>): Document => ({
+  title: `Counter: ${model.count}`,
+  body: h.div(
+    [],
+    [
+      h.p([], [model.count.toString()]),
+      h.button([h.OnClick(ClickedDecrement())], ['-']),
+      h.button([h.OnClick(ClickedReset())], ['Reset']),
+      h.button([h.OnClick(ClickedIncrement())], ['+']),
+    ],
+  ),
+})
 ```
 
 ```ts

package/dist/canvas/view.d.ts

@@ -1,4 +1,4 @@
-import { type Html } from '../html/index.js';
+import { type Html, type HtmlBuilder } from '../html/index.js';
 import type { Point, Shape } from './shape.js';
 /**
  * Configuration for `Canvas.view`. Pointer handlers are optional and
@@ -21,18 +21,25 @@ export type ViewConfig<Message> = Readonly<{
  * postpatch hook re-paints on every render. The canvas is a pure function of
  * `shapes`. Same shapes produce the same pixels.
  *
+ * The trailing `h` fixes `Message` to the calling view's frame; the pointer
+ * handlers dispatch through that frame at fire time, so passing the builder
+ * that built the surrounding view is what makes the handler types truthful.
+ *
  * @example
  * ```typescript
- * Canvas.view<Message>({
- *   width: 400,
- *   height: 300,
- *   shapes: [
- *     Canvas.Rect({ x: 0, y: 0, width: 400, height: 300, fill: '#000' }),
- *     Canvas.Circle({ x: 200, y: 150, radius: 50, fill: '#f0a' }),
- *   ],
- *   onPointerDown: ({ x, y }) => ClickedCanvas({ x, y }),
- * })
+ * Canvas.view(
+ *   {
+ *     width: 400,
+ *     height: 300,
+ *     shapes: [
+ *       Canvas.Rect({ x: 0, y: 0, width: 400, height: 300, fill: '#000' }),
+ *       Canvas.Circle({ x: 200, y: 150, radius: 50, fill: '#f0a' }),
+ *     ],
+ *     onPointerDown: ({ x, y }) => ClickedCanvas({ x, y }),
+ *   },
+ *   h,
+ * )
  * ```
  */
-export declare const view: <Message>(config: ViewConfig<Message>) => Html;
+export declare const view: <Message>(config: ViewConfig<NoInfer<Message>>, _h: HtmlBuilder<Message>) => Html;
 //# sourceMappingURL=view.d.ts.map

package/dist/canvas/view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"view.d.ts","sourceRoot":"","sources":["../../src/canvas/view.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,IAAI,EAAqB,MAAM,kBAAkB,CAAA;AAI/D,OAAO,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAE9C;;;;;GAKG;AACH,MAAM,MAAM,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC;IACzC,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,aAAa,CAAC,KAAK,CAAC,CAAA;IAC5B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC9B,aAAa,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,CAAC,GAAG,SAAS,CAAA;IACvD,aAAa,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,CAAC,GAAG,SAAS,CAAA;IACvD,WAAW,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,CAAC,GAAG,SAAS,CAAA;CACtD,CAAC,CAAA;AA8BF;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,IAAI,GAAI,OAAO,EAAE,QAAQ,UAAU,CAAC,OAAO,CAAC,KAAG,IAwE3D,CAAA"}
+{"version":3,"file":"view.d.ts","sourceRoot":"","sources":["../../src/canvas/view.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,IAAI,EACT,KAAK,WAAW,EAEjB,MAAM,kBAAkB,CAAA;AAIzB,OAAO,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAE9C;;;;;GAKG;AACH,MAAM,MAAM,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC;IACzC,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,aAAa,CAAC,KAAK,CAAC,CAAA;IAC5B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC9B,aAAa,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,CAAC,GAAG,SAAS,CAAA;IACvD,aAAa,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,CAAC,GAAG,SAAS,CAAA;IACvD,WAAW,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,CAAC,GAAG,SAAS,CAAA;CACtD,CAAC,CAAA;AA8BF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,IAAI,GAAI,OAAO,EAC1B,QAAQ,UAAU,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,EACpC,IAAI,WAAW,CAAC,OAAO,CAAC,KACvB,IAwEF,CAAA"}

package/dist/canvas/view.js

@@ -1,5 +1,5 @@
 import { Array, Predicate, Record, String, pipe } from 'effect';
-import { __requireDispatch } from '../html/index.js';
+import { __requireDispatch, } from '../html/index.js';
 import { h } from '../snabbdom/index.js';
 import { paintScene } from './paint.js';
 /**
@@ -24,20 +24,27 @@ const classesFromClassName = (className) => pipe(className, String.split(/\s+/),
  * postpatch hook re-paints on every render. The canvas is a pure function of
  * `shapes`. Same shapes produce the same pixels.
  *
+ * The trailing `h` fixes `Message` to the calling view's frame; the pointer
+ * handlers dispatch through that frame at fire time, so passing the builder
+ * that built the surrounding view is what makes the handler types truthful.
+ *
  * @example
  * ```typescript
- * Canvas.view<Message>({
- *   width: 400,
- *   height: 300,
- *   shapes: [
- *     Canvas.Rect({ x: 0, y: 0, width: 400, height: 300, fill: '#000' }),
- *     Canvas.Circle({ x: 200, y: 150, radius: 50, fill: '#f0a' }),
- *   ],
- *   onPointerDown: ({ x, y }) => ClickedCanvas({ x, y }),
- * })
+ * Canvas.view(
+ *   {
+ *     width: 400,
+ *     height: 300,
+ *     shapes: [
+ *       Canvas.Rect({ x: 0, y: 0, width: 400, height: 300, fill: '#000' }),
+ *       Canvas.Circle({ x: 200, y: 150, radius: 50, fill: '#f0a' }),
+ *     ],
+ *     onPointerDown: ({ x, y }) => ClickedCanvas({ x, y }),
+ *   },
+ *   h,
+ * )
  * ```
  */
-export const view = (config) => {
+export const view = (config, _h) => {
     const dispatchSync = __requireDispatch();
     const { width, height, shapes, className, onPointerDown, onPointerMove, onPointerUp, } = config;
     const pointerListener = (toMessage) => (event) => {

package/dist/customElement/index.d.ts

@@ -1,5 +1,5 @@
 import { type Schema } from 'effect';
-import type { Attribute, Child, Html } from '../html/index.js';
+import type { Attribute, Child, Html, HtmlBuilder } from '../html/index.js';
 /** Type-level kebab-case to PascalCase, used to convert event names like
  *  `'change-rating'` into the corresponding factory name `'OnChangeRating'`. */
 type KebabToPascal<S extends string> = S extends `${infer Head}-${infer Tail}` ? `${Capitalize<Head>}${KebabToPascal<Tail>}` : Capitalize<S>;
@@ -24,19 +24,24 @@ export interface CustomElementConfig<Tag extends string, Properties extends Reco
     readonly events: Events;
 }
 /** A defined custom element, untyped on Message at definition time so the
- *  spec can be exported and shared across modules. Call `.withMessage<Message>()`
- *  inside a view module to mint a typed `ElementBuilder` bound to the
- *  consumer's Message universe. */
+ *  spec can be exported and shared across modules. Call `.withMessage(h)`
+ *  with a view's builder to mint a typed `ElementBuilder` bound to that
+ *  frame's Message universe. The builder argument is a type witness: it
+ *  fixes `Message` to the frame the element renders in, so the spec cannot
+ *  be bound to a Message universe its events will not dispatch into. */
 export interface CustomElementSpec<Tag extends string, Properties extends Record<string, Schema.Top>, Events extends Record<string, Schema.Top>> {
     readonly tag: Tag;
     readonly properties: Properties;
     readonly events: Events;
-    readonly withMessage: <Message>() => ElementBuilder<Message, Properties, Events>;
+    readonly withMessage: <Message>(h: HtmlBuilder<Message>) => ElementBuilder<Message, Properties, Events>;
 }
 /** The typed builder for a given spec and Message universe. Equivalent to
  *  the value `Spec.withMessage<Message>()` returns, expressed as a type
  *  consumers can name without reaching for `ReturnType<typeof ...>`. */
 export type Builder<Spec, Message> = Spec extends CustomElementSpec<string, infer Properties, infer Events> ? ElementBuilder<Message, Properties, Events> : never;
+/** @internal Shared with the Scene test helpers so their error messages name
+ *  the same `On*` factory this module generates. */
+export declare const kebabToPascal: (input: string) => string;
 /**
  * Define a typed binding for a custom element. The returned spec describes
  * the element's properties and events with Schema, and exposes a
@@ -62,7 +67,8 @@ export type Builder<Spec, Message> = Spec extends CustomElementSpec<string, infe
  *   },
  * })
  *
- * const picker = hexColorPicker.withMessage<Message>()
+ * // Inside a view, with its `h` in scope:
+ * const picker = hexColorPicker.withMessage(h)
  *
  * picker(
  *   [

package/dist/customElement/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/customElement/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/customElement/index.ts"],"names":[],"mappings":"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"}

package/dist/customElement/index.js

@@ -1,6 +1,8 @@
 import { Array, String, pipe } from 'effect';
 import { OnCustomEvent, Prop, customElement as customElementVNode, } from '../html/index.js';
-const kebabToPascal = (input) => pipe(input, String.split('-'), Array.map(String.capitalize), Array.join(''));
+/** @internal Shared with the Scene test helpers so their error messages name
+ *  the same `On*` factory this module generates. */
+export const kebabToPascal = (input) => pipe(input, String.split('-'), Array.map(String.capitalize), Array.join(''));
 const IDENTIFIER_PATTERN = /^[A-Za-z_$][A-Za-z0-9_$]*$/;
 const isValidPropertyName = (name) => IDENTIFIER_PATTERN.test(name);
 const isValidEventName = (name) => {
@@ -38,7 +40,8 @@ const eventFactoryName = (eventName) => `On${kebabToPascal(eventName)}`;
  *   },
  * })
  *
- * const picker = hexColorPicker.withMessage<Message>()
+ * // Inside a view, with its `h` in scope:
+ * const picker = hexColorPicker.withMessage(h)
  *
  * picker(
  *   [
@@ -53,7 +56,7 @@ export const define = (config) => {
     const propertyNames = Object.keys(config.properties);
     const eventNames = Object.keys(config.events);
     validateNames({ tag: config.tag, propertyNames, eventNames });
-    const buildForMessage = () => {
+    const buildElementBuilder = () => {
         const createVNode = customElementVNode()(config.tag);
         const elementFn = (attributes = [], children = []) => createVNode(attributes, children);
         /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
@@ -70,11 +73,21 @@ export const define = (config) => {
         /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
         return builder;
     };
+    // NOTE: `withMessage` is called once per render, so the ElementBuilder is
+    // constructed once and retyped per call. Message is erased at runtime: the
+    // factories close over nothing Message-specific, exactly like the html
+    // builder singleton.
+    let cachedElementBuilder;
+    const withMessage = (_h) => {
+        cachedElementBuilder ??= buildElementBuilder();
+        /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+        return cachedElementBuilder;
+    };
     return {
         tag: config.tag,
         properties: config.properties,
         events: config.events,
-        withMessage: buildForMessage,
+        withMessage,
     };
 };
 const validateNames = (input) => {