feat: improve messages

packages/demos/jotai-turnstile/package.json

@@ -10,8 +10,8 @@
 		"preview": "vite preview"
 	},
 	"dependencies": {
-		"@constellar/core": "*",
-		"@constellar/jotai": "*",
+		"@constellar/core": "workspace:^",
+		"@constellar/jotai": "workspace:^",
 		"@vitejs/plugin-react": "^4.3.1",
 		"jotai": "^2.9.3",
 		"jotai-effect": "^1.0.2",

packages/demos/jotai-turnstile/src/machine.ts

@@ -1,6 +1,6 @@
 import { multiStateMachine } from '@constellar/core'
 
-type State =
+export type State =
 	| { effects: { payment: { id: string; now: number } }; type: 'payment' }
 	| { id: string; type: 'payment' }
 	| { type: 'locked' }

packages/libs/core/src/machines/core.ts

@@ -6,7 +6,7 @@ export interface IMachine<Event, State, Message, Transformed, SubState, Final> {
 	reducer: (
 		event: Event,
 		transformed: Transformed,
-		send: (e: Message) => void,
+		emit: (e: Message) => void,
 	) => State | undefined
 	transform: (state: State) => Transformed
 	visit: <Acc>(
@@ -35,3 +35,7 @@ export function fromSendable<Event extends Typed>(
 			({ type: event } as unknown as Event)
 		: event
 }
+
+export function withSend<Event extends Typed>(emit: (event: Event) => void) {
+	return (e: Sendable<Event>) => emit(fromSendable(e)) as undefined
+}

packages/libs/core/src/machines/effects.test.ts

@@ -45,7 +45,7 @@ test('effects without interpreter', () => {
 		const cb = machineCb(m)
 		const { visit } = cb(m.transform({ n: 0 }))
 		m.transform({ n: 1 })
-		const eff = new MachineEffects(() => {}, undefined)
-		eff.update(visit)
+		const eff = new MachineEffects(undefined)
+		eff.update(visit, () => {})
 	}).not.toThrowError()
 })

packages/libs/core/src/machines/effects.ts

@@ -29,30 +29,29 @@ export class MachineEffects<Event, SubState> {
 		string,
 		Map<string, { args: any; unmount: (() => void) | void }>
 	>()
-	constructor(
-		private send: (event: Event) => void,
-		private interpreter: Interpreter<Event, SubState>,
-	) {}
-	private foldSubState(subState: SubState, acc: Set<string>, index: string) {
-		if (this.interpreter === undefined) return acc
-		acc.add(index)
-		for (const entry of Object.entries(this.interpreter)) {
-			const [effect, cb] = entry as [string, any]
-			const args = ((subState as any).effects as any)?.[effect]
-			let fromIndex = this.last.get(index)
-			if (!fromIndex) {
-				fromIndex = new Map()
-				this.last.set(index, fromIndex)
+	constructor(private interpreter: Interpreter<Event, SubState>) {}
+	private foldSubState(send: (event: Event) => void) {
+		return (subState: SubState, acc: Set<string>, index: string) => {
+			if (this.interpreter === undefined) return acc
+			acc.add(index)
+			for (const entry of Object.entries(this.interpreter)) {
+				const [effect, cb] = entry as [string, any]
+				const args = ((subState as any).effects as any)?.[effect]
+				let fromIndex = this.last.get(index)
+				if (!fromIndex) {
+					fromIndex = new Map()
+					this.last.set(index, fromIndex)
+				}
+				const last = fromIndex.get(effect)
+				if (shallowEqual(last?.args, args)) continue
+				last?.unmount?.()
+				fromIndex.set(effect, {
+					args,
+					unmount: args === undefined ? undefined : cb(args, send),
+				})
 			}
-			const last = fromIndex.get(effect)
-			if (shallowEqual(last?.args, args)) continue
-			last?.unmount?.()
-			fromIndex.set(effect, {
-				args,
-				unmount: args === undefined ? undefined : cb(args, this.send),
-			})
+			return acc
 		}
-		return acc
 	}
 	flush(indices?: Set<string>) {
 		this.last.forEach((fromIndex, index) => {
@@ -66,7 +65,8 @@ export class MachineEffects<Event, SubState> {
 			f: (subState: SubState, acc: Set<string>, index: string) => Set<string>,
 			acc: Set<string>,
 		) => Set<string>,
+		send: (event: Event) => void,
 	) {
-		this.flush(visit(this.foldSubState.bind(this), new Set<string>()))
+		this.flush(visit(this.foldSubState(send), new Set<string>()))
 	}
 }

packages/libs/core/src/machines/listener.test.ts

@@ -14,8 +14,9 @@ describe('listener', () => {
 		expect(b).toHaveBeenCalledTimes(0)
 	})
 	test('function', () => {
-		const listener = toListener(vi.fn())
+		const a = vi.fn()
+		const listener = toListener(a)
 		listener({ type: 'a', value: 1 }, 2)
-		expect(listener).toHaveBeenCalledWith({ type: 'a', value: 1 }, 2)
+		expect(a).toHaveBeenCalledWith({ type: 'a', value: 1 }, 2)
 	})
 })

packages/libs/core/src/machines/listener.ts

@@ -1,21 +1,25 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 import { isFunction, Typed } from '../utils'
+import { fromSendable, Sendable } from './core'
 
 export type Listener<Message extends Typed, Args extends any[]> =
-	| ((event: Message, ...args: Args) => void)
+	| ((message: Message, ...args: Args) => void)
 	| {
 			[K in Message['type']]: (
-				event: { type: K } & Message,
+				message: { type: K } & Message,
 				...args: Args
 			) => void
 	  }
 
 export function toListener<Message extends Typed, Args extends any[]>(
 	listener: Listener<Message, Args>,
-): (event: Message, ...args: Args) => void {
-	if (isFunction(listener)) return listener
+): (message: Sendable<Message>, ...args: Args) => void {
+	if (isFunction(listener))
+		return (message: Sendable<Message>, ...args) =>
+			listener(fromSendable(message), ...args)
 	return (message, ...args) => {
-		;(listener as any)[message.type](message, ...args)
+		const m = fromSendable(message)
+		;(listener as any)[m.type](m, ...args)
 	}
 }

packages/libs/core/src/machines/multi-state.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { fromSendable, IMachine, Sendable } from '.'
+import { fromSendable, IMachine, Sendable, withSend } from '.'
 import { Init, isEmpty, isFunction, Prettify, toInit, Typed } from '../utils'
 
 type ArgOfInit<T> = T extends (p: infer R) => any ? R : void
@@ -25,7 +25,7 @@ type AnyStates<
 				  >(
 						event: E,
 						state: S,
-						send: (message: Sendable<Message>) => undefined,
+						emit: (message: Sendable<Message>) => undefined,
 				  ) => Sendable<State> | undefined)
 				| Sendable<State>
 		}>
@@ -88,11 +88,6 @@ type Final<
 	States extends Record<string, unknown>,
 > = FinalStates<States> & State
 
-function withSend<Message extends Typed>(emit: (message: Message) => void) {
-	return (message: Sendable<Message>) =>
-		emit(fromSendable(message)) as undefined
-}
-
 export function multiStateMachine<
 	Event extends Typed,
 	State extends Typed,

packages/libs/core/src/machines/object.ts

@@ -28,14 +28,14 @@ class ObjectMachine<Event, State, Message, Transformed, SubState, Final> {
 		this.state = machine.transform(machine.init)
 		this.final = machine.getFinal(this.state)
 		if (opts?.interpreter) {
-			this.effects = new MachineEffects(this.send.bind(this), opts.interpreter)
-			this.effects.update(this.visit.bind(this))
+			this.effects = new MachineEffects(opts.interpreter)
+			this.effects.update(this.visit.bind(this), this.send.bind(this))
 		}
 	}
 	private onChange() {
 		if (!this.effects) return
 		const run = this.queue.length === 0
-		this.effects.update(this.visit.bind(this))
+		this.effects.update(this.visit.bind(this), this.send.bind(this))
 		if (!run) return
 		while (true) {
 			const event = this.queue.shift()

packages/libs/jotai/src/machine.test.tsx

@@ -1,4 +1,8 @@
-import { multiStateMachine, simpleStateMachine } from '@constellar/core'
+import {
+	Listener,
+	multiStateMachine,
+	simpleStateMachine,
+} from '@constellar/core'
 import { fireEvent, render, screen } from '@testing-library/react'
 import { atom, createStore, useAtom } from 'jotai'
 import { useState } from 'react'
@@ -248,3 +252,30 @@ describe('messages', () => {
 		expect(store.get(countAtom)).toBe(1)
 	})
 })
+
+/*
+describe('listener', () => {
+	type Message = { p: number; type: 'out' } | { q: string; type: 'in' }
+	const x: Listener<Message, [number, string]> = {
+		in: ({ q }, x, y) => console.log(e.type, x, q),
+		out: ({ p }, x, y) => console.log(e.type, x, p),
+	}
+	type State = { type: 'a' }
+	type Event = { q: string; type: 'a' }
+	const someMachine = multiStateMachine<
+		Event,
+		State,
+		object,
+		object,
+		Message
+	>()({
+		init: 'a',
+		states: {
+			a: {},
+		},
+	})
+	const someAtom = machineAtom(someMachine(), {
+		listener: (x) => console.log(x),
+	})
+})
+*/

packages/libs/jotai/src/machine.ts

@@ -37,6 +37,7 @@ export function machineAtom<
 		atomFactory: (
 			init: State,
 		) => WritableAtom<Promise<State>, [Promise<State>], R>
+		interpreter?: Interpreter<Event, SubState>
 		listener?: Listener<Message, [Getter, Setter]>
 	},
 ): WritableAtom<
@@ -63,6 +64,7 @@ export function machineAtom<
 	>,
 	opts?: {
 		atomFactory?: (init: State) => WritableAtom<State, [State], R>
+		interpreter?: Interpreter<Event, SubState>
 		listener?: Listener<Message, [Getter, Setter]>
 	},
 ): WritableAtom<
@@ -89,6 +91,7 @@ export function machineAtom<
 	>,
 	opts?: {
 		atomFactory?: (init: State) => WritableAtom<State, [State], R>
+		interpreter?: Interpreter<Event, SubState>
 		listener?: Listener<Message, [Getter, Setter]>
 	},
 ) {
@@ -98,7 +101,16 @@ export function machineAtom<
 	const reducer = machine.reducer
 	const cb = machineCb(machine)
 	const listener = opts?.listener ? toListener(opts.listener) : () => {}
-	return atom(
+	const effAtom = opts?.interpreter
+		? atom<MachineEffects<Event, SubState>>()
+		: null
+	if (effAtom)
+		effAtom.onMount = (setAtom) => {
+			const effects = new MachineEffects<Event, SubState>(opts!.interpreter!)
+			setAtom(effects)
+			return () => effects.flush()
+		}
+	const resAtom = atom(
 		(get) => unwrap(get(stateAtom), cb),
 		(get, set, event: Sendable<Event>) =>
 			unwrap(get(stateAtom), (state) => {
@@ -107,8 +119,18 @@ export function machineAtom<
 				)
 				if (nextState === undefined) return
 				set(stateAtom, nextState)
+				const send = (e: Event) => set(resAtom, e)
+				if (effAtom)
+					setTimeout(
+						() =>
+							unwrap(get(resAtom), (res) =>
+								get(effAtom)!.update(res.visit, send),
+							),
+						0,
+					)
 			}),
 	)
+	return resAtom
 }
 
 export function useMachineEffects<
@@ -122,14 +144,11 @@ export function useMachineEffects<
 ) {
 	const machineEffects = useRef<MachineEffects<Event, Transformed>>()
 	useEffect(() => {
-		machineEffects.current = new MachineEffects<Event, Transformed>(
-			send,
-			interpreter,
-		)
+		machineEffects.current = new MachineEffects<Event, Transformed>(interpreter)
 		return () => machineEffects.current!.flush()
 	}, [interpreter, send])
 	useEffect(
-		() => machineEffects.current!.update(transformed.visit),
+		() => machineEffects.current!.update(transformed.visit, send),
 		[transformed, send, interpreter],
 	)
 }