@haikit/react 0.11.0 → 0.13.0

package/README.md

@@ -57,6 +57,23 @@ contract the server implements:
 Import the contract with `import type`. Only the types are needed, so the
 schemas and their library stay out of the browser bundle.
 
+## Notices
+
+`reactNotice` does the same for a notice, from the same `defineNotice` contract
+the server sends it with. `NoticeProps<typeof yourNotice>` gives the component
+`payload`, typed from the contract, its `seq`, and the `handle` of the surface
+it sits beside, if any. There is no `send`: a notice cannot reach the server.
+
+```tsx
+import type { holdConfirmed } from "../shared/notices";
+
+function HoldConfirmed({ payload }: NoticeProps<typeof holdConfirmed>) {
+  return <p>Fare held · {payload.flightId} · ref {payload.reference}</p>;
+}
+
+mountChat({ root, registry, notices: { hold_confirmed: reactNotice(HoldConfirmed) } });
+```
+
 ## Lifecycle
 
 The default transcript mounts a surface **once**, so `useState` survives the

package/dist/index.d.ts

@@ -10,8 +10,8 @@
  * prop or an action that changes there stops this side compiling.
  */
 import { type ComponentType } from "react";
-import type { ComponentDef, SurfaceMode, SurfaceState } from "@haikit/client";
-import type { ActionMap, Infer, QueryMap, Surface } from "@haikit/core";
+import type { ComponentDef, NoticeDef, SurfaceMode, SurfaceState } from "@haikit/client";
+import type { ActionMap, Infer, Notice, QueryMap, Surface } from "@haikit/core";
 type AnySurface = Surface<any, ActionMap, QueryMap>;
 type PropsOf<S> = S extends Surface<infer P, any, any> ? P : never;
 type ActionsOf<S> = S extends Surface<any, infer A, any> ? A : never;
@@ -46,5 +46,22 @@ export interface SurfaceProps<S extends AnySurface> {
  * unmounted when the surface goes away, so effects clean up after themselves.
  */
 export declare function reactSurface<S extends AnySurface>(Component: ComponentType<SurfaceProps<S>>): ComponentDef<PropsOf<S>>;
+type AnyNotice = Notice<any>;
+type PayloadOf<N> = N extends Notice<infer P> ? P : never;
+/** What a React notice component receives, typed from its notice contract. */
+export interface NoticeProps<N extends AnyNotice> {
+    /** The notice's payload, as its `payload` schema produced it. */
+    payload: PayloadOf<N>;
+    /** Its sequence number in the conversation. */
+    seq: number;
+    /** The surface it is shown beside, if any. */
+    handle?: string;
+}
+/**
+ * A notices registry entry that renders `Component` into the notice's element.
+ * As with `reactSurface`, the first render is synchronous and the root is
+ * unmounted when the notice goes away. A notice has no `send`.
+ */
+export declare function reactNotice<N extends AnyNotice>(Component: ComponentType<NoticeProps<N>>): NoticeDef<PayloadOf<N>>;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAiB,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAG1D,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9E,OAAO,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAExE,KAAK,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAC;AACpD,KAAK,OAAO,CAAC,CAAC,IAAI,CAAC,SAAS,OAAO,CAAC,MAAM,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AACnE,KAAK,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,OAAO,CAAC,GAAG,EAAE,MAAM,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AAErE,gFAAgF;AAChF,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,UAAU;IAChD,gEAAgE;IAChE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IAClB;;;;OAIG;IACH,IAAI,EAAE,WAAW,CAAC;IAClB,4EAA4E;IAC5E,KAAK,EAAE,YAAY,CAAC;IACpB,wDAAwD;IACxD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gFAAgF;IAChF,OAAO,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,IAAI,CAAC,CAAC,SAAS,MAAM,SAAS,CAAC,CAAC,CAAC,GAAG,MAAM,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC/G;AAED;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,UAAU,EAAE,SAAS,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CA4CtH"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAiB,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAG1D,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzF,OAAO,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEhF,KAAK,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAC;AACpD,KAAK,OAAO,CAAC,CAAC,IAAI,CAAC,SAAS,OAAO,CAAC,MAAM,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AACnE,KAAK,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,OAAO,CAAC,GAAG,EAAE,MAAM,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AAErE,gFAAgF;AAChF,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,UAAU;IAChD,gEAAgE;IAChE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IAClB;;;;OAIG;IACH,IAAI,EAAE,WAAW,CAAC;IAClB,4EAA4E;IAC5E,KAAK,EAAE,YAAY,CAAC;IACpB,wDAAwD;IACxD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gFAAgF;IAChF,OAAO,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,IAAI,CAAC,CAAC,SAAS,MAAM,SAAS,CAAC,CAAC,CAAC,GAAG,MAAM,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC/G;AAED;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,UAAU,EAAE,SAAS,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CA4CtH;AAED,KAAK,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;AAC7B,KAAK,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,MAAM,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AAE1D,8EAA8E;AAC9E,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,SAAS;IAC9C,iEAAiE;IACjE,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;IACtB,+CAA+C;IAC/C,GAAG,EAAE,MAAM,CAAC;IACZ,8CAA8C;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,SAAS,EAAE,SAAS,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAiBlH"}

package/dist/index.js

@@ -63,4 +63,28 @@ export function reactSurface(Component) {
         },
     };
 }
+/**
+ * A notices registry entry that renders `Component` into the notice's element.
+ * As with `reactSurface`, the first render is synchronous and the root is
+ * unmounted when the notice goes away. A notice has no `send`.
+ */
+export function reactNotice(Component) {
+    return {
+        mount(element, payload, ctx) {
+            const root = createRoot(element);
+            try {
+                flushSync(() => root.render(createElement(Component, { payload, seq: ctx.seq, handle: ctx.handle })));
+            }
+            catch (err) {
+                root.unmount();
+                throw err;
+            }
+            return {
+                unmount() {
+                    root.unmount();
+                },
+            };
+        },
+    };
+}
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,aAAa,EAAsB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AA+BtC;;;;;;;GAOG;AACH,MAAM,UAAU,YAAY,CAAuB,SAAyC;IAC1F,OAAO;QACL,KAAK,CAAC,OAAO,EAAE,KAAK,EAAE,GAAG;YACvB,MAAM,IAAI,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC;YACjC,IAAI,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC;YACtB,wCAAwC;YACxC,IAAI,SAAS,GAAG,GAAG,CAAC,SAAS,CAAC;YAC9B,IAAI,OAAO,GAAG,KAAK,CAAC;YACpB,MAAM,IAAI,GAAG,GAAG,EAAE,CAChB,IAAI,CAAC,MAAM,CACT,aAAa,CAAC,SAAS,EAAE;gBACvB,KAAK;gBACL,IAAI,EAAE,GAAG,CAAC,IAAI;gBACd,KAAK;gBACL,SAAS;gBACT,OAAO;gBACP,IAAI,EAAE,GAAG,CAAC,IAA+B;aAC1C,CAAC,CACH,CAAC;YACJ,wEAAwE;YACxE,yEAAyE;YACzE,qEAAqE;YACrE,IAAI,CAAC;gBACH,SAAS,CAAC,IAAI,CAAC,CAAC;YAClB,CAAC;YAAC,OAAO,GAAG,EAAE,CAAC;gBACb,IAAI,CAAC,OAAO,EAAE,CAAC;gBACf,MAAM,GAAG,CAAC;YACZ,CAAC;YACD,OAAO;gBACL,MAAM,CAAC,MAAM;oBACX,KAAK,GAAG,QAAQ,CAAC;oBACjB,SAAS,GAAG,MAAM,CAAC;oBACnB,IAAI,EAAE,CAAC;gBACT,CAAC;gBACD,MAAM;oBACJ,OAAO,GAAG,IAAI,CAAC;oBACf,IAAI,EAAE,CAAC;gBACT,CAAC;gBACD,OAAO;oBACL,IAAI,CAAC,OAAO,EAAE,CAAC;gBACjB,CAAC;aACF,CAAC;QACJ,CAAC;KACF,CAAC;AACJ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,aAAa,EAAsB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AA+BtC;;;;;;;GAOG;AACH,MAAM,UAAU,YAAY,CAAuB,SAAyC;IAC1F,OAAO;QACL,KAAK,CAAC,OAAO,EAAE,KAAK,EAAE,GAAG;YACvB,MAAM,IAAI,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC;YACjC,IAAI,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC;YACtB,wCAAwC;YACxC,IAAI,SAAS,GAAG,GAAG,CAAC,SAAS,CAAC;YAC9B,IAAI,OAAO,GAAG,KAAK,CAAC;YACpB,MAAM,IAAI,GAAG,GAAG,EAAE,CAChB,IAAI,CAAC,MAAM,CACT,aAAa,CAAC,SAAS,EAAE;gBACvB,KAAK;gBACL,IAAI,EAAE,GAAG,CAAC,IAAI;gBACd,KAAK;gBACL,SAAS;gBACT,OAAO;gBACP,IAAI,EAAE,GAAG,CAAC,IAA+B;aAC1C,CAAC,CACH,CAAC;YACJ,wEAAwE;YACxE,yEAAyE;YACzE,qEAAqE;YACrE,IAAI,CAAC;gBACH,SAAS,CAAC,IAAI,CAAC,CAAC;YAClB,CAAC;YAAC,OAAO,GAAG,EAAE,CAAC;gBACb,IAAI,CAAC,OAAO,EAAE,CAAC;gBACf,MAAM,GAAG,CAAC;YACZ,CAAC;YACD,OAAO;gBACL,MAAM,CAAC,MAAM;oBACX,KAAK,GAAG,QAAQ,CAAC;oBACjB,SAAS,GAAG,MAAM,CAAC;oBACnB,IAAI,EAAE,CAAC;gBACT,CAAC;gBACD,MAAM;oBACJ,OAAO,GAAG,IAAI,CAAC;oBACf,IAAI,EAAE,CAAC;gBACT,CAAC;gBACD,OAAO;oBACL,IAAI,CAAC,OAAO,EAAE,CAAC;gBACjB,CAAC;aACF,CAAC;QACJ,CAAC;KACF,CAAC;AACJ,CAAC;AAeD;;;;GAIG;AACH,MAAM,UAAU,WAAW,CAAsB,SAAwC;IACvF,OAAO;QACL,KAAK,CAAC,OAAO,EAAE,OAAO,EAAE,GAAG;YACzB,MAAM,IAAI,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC;YACjC,IAAI,CAAC;gBACH,SAAS,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,SAAS,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC;YACxG,CAAC;YAAC,OAAO,GAAG,EAAE,CAAC;gBACb,IAAI,CAAC,OAAO,EAAE,CAAC;gBACf,MAAM,GAAG,CAAC;YACZ,CAAC;YACD,OAAO;gBACL,OAAO;oBACL,IAAI,CAAC,OAAO,EAAE,CAAC;gBACjB,CAAC;aACF,CAAC;QACJ,CAAC;KACF,CAAC;AACJ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haikit/react",
-  "version": "0.11.0",
+  "version": "0.13.0",
   "description": "Write haikit surface components in React: typed props and actions from the shared surface contract.",
   "keywords": [
     "haikit",
@@ -28,8 +28,8 @@
     "prepack": "npm --prefix ../.. run build"
   },
   "dependencies": {
-    "@haikit/client": "0.11.0",
-    "@haikit/core": "0.11.0"
+    "@haikit/client": "0.13.0",
+    "@haikit/core": "0.13.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/index.ts

@@ -13,8 +13,8 @@
 import { createElement, type ComponentType } from "react";
 import { createRoot } from "react-dom/client";
 import { flushSync } from "react-dom";
-import type { ComponentDef, SurfaceMode, SurfaceState } from "@haikit/client";
-import type { ActionMap, Infer, QueryMap, Surface } from "@haikit/core";
+import type { ComponentDef, NoticeDef, SurfaceMode, SurfaceState } from "@haikit/client";
+import type { ActionMap, Infer, Notice, QueryMap, Surface } from "@haikit/core";
 
 type AnySurface = Surface<any, ActionMap, QueryMap>;
 type PropsOf<S> = S extends Surface<infer P, any, any> ? P : never;
@@ -96,3 +96,40 @@ export function reactSurface<S extends AnySurface>(Component: ComponentType<Surf
     },
   };
 }
+
+type AnyNotice = Notice<any>;
+type PayloadOf<N> = N extends Notice<infer P> ? P : never;
+
+/** What a React notice component receives, typed from its notice contract. */
+export interface NoticeProps<N extends AnyNotice> {
+  /** The notice's payload, as its `payload` schema produced it. */
+  payload: PayloadOf<N>;
+  /** Its sequence number in the conversation. */
+  seq: number;
+  /** The surface it is shown beside, if any. */
+  handle?: string;
+}
+
+/**
+ * A notices registry entry that renders `Component` into the notice's element.
+ * As with `reactSurface`, the first render is synchronous and the root is
+ * unmounted when the notice goes away. A notice has no `send`.
+ */
+export function reactNotice<N extends AnyNotice>(Component: ComponentType<NoticeProps<N>>): NoticeDef<PayloadOf<N>> {
+  return {
+    mount(element, payload, ctx) {
+      const root = createRoot(element);
+      try {
+        flushSync(() => root.render(createElement(Component, { payload, seq: ctx.seq, handle: ctx.handle })));
+      } catch (err) {
+        root.unmount();
+        throw err;
+      }
+      return {
+        unmount() {
+          root.unmount();
+        },
+      };
+    },
+  };
+}