@untemps/react-vocal 2.0.0-beta.1 → 2.0.0-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@untemps/react-vocal",
-	"version": "2.0.0-beta.1",
+	"version": "2.0.0-beta.3",
 	"author": "Vincent Le Badezet <v.lebadezet@untemps.net>",
 	"repository": "git@github.com:untemps/react-vocal.git",
 	"license": "MIT",

package/src/components/Vocal.jsx

@@ -1,4 +1,4 @@
-import React, { cloneElement, isValidElement, useRef, useState } from 'react'
+import React, { cloneElement, isValidElement, useCallback, useMemo, useRef, useState } from 'react'
 import { Vocal as SpeechRecognitionWrapper } from '@untemps/vocal'
 import { isFunction } from '@untemps/utils/function/isFunction'
 
@@ -33,33 +33,128 @@ const Vocal = ({
 	const [, { start, stop, subscribe, unsubscribe }] = useVocal(lang, grammars, __rsInstance)
 	const triggerCommand = useCommands(commands)
 
-	const _onEnd = (e) => {
-		stopTimer()
-		stopRecognition()
-		unsubscribeAll()
-		onEnd?.(e)
-	}
+	const propsRef = useRef({})
+	propsRef.current = { onStart, onEnd, onSpeechStart, onSpeechEnd, onResult, onError, onNoMatch }
+
+	const triggerCommandRef = useRef(triggerCommand)
+	triggerCommandRef.current = triggerCommand
+
+	const unsubscribeAllRef = useRef(null)
+	const onEndRef = useRef(null)
 
-	const [startTimer, stopTimer] = useTimeout(_onEnd, timeout)
+	// Breaks the circular dep: _onEnd → useTimeout(handler) → startTimer captures _onEnd
+	const stableTimerCb = useCallback(() => onEndRef.current?.(), [])
+	const [startTimer, stopTimer] = useTimeout(stableTimerCb, timeout)
 
-	const startRecognition = () => {
+	const stopRecognition = useCallback(() => {
 		try {
-			setIsListening(true)
-			subscribeAll()
-			start()
+			setIsListening(false)
+			stop()
 		} catch (error) {
-			_onError(error)
+			propsRef.current.onError?.(error)
+		} finally {
+			unsubscribeAllRef.current?.()
 		}
-	}
+	}, [stop])
+
+	const _onStart = useCallback(
+		(e) => {
+			startTimer()
+			propsRef.current.onStart?.(e)
+		},
+		[startTimer]
+	)
+
+	const _onSpeechStart = useCallback(
+		(e) => {
+			stopTimer()
+			propsRef.current.onSpeechStart?.(e)
+		},
+		[stopTimer]
+	)
+
+	const _onSpeechEnd = useCallback(
+		(e) => {
+			startTimer()
+			propsRef.current.onSpeechEnd?.(e)
+		},
+		[startTimer]
+	)
+
+	const _onResult = useCallback(
+		(event) => {
+			const transcript = Array.from(event?.results ?? [], (segment) => {
+				let best = { confidence: -Infinity, transcript: '' }
+				for (let j = 0; j < segment.length; j++) {
+					const alt = segment[j]
+					if (alt.confidence === undefined || alt.confidence > best.confidence) {
+						best = alt
+					}
+				}
+				return best.transcript ?? ''
+			}).join('')
+
+			stopTimer()
+			stopRecognition()
+			triggerCommandRef.current(transcript)
+			propsRef.current.onResult?.(transcript, event)
+		},
+		[stopTimer, stopRecognition]
+	)
+
+	const _onError = useCallback(
+		(error) => {
+			stopRecognition()
+			propsRef.current.onError?.(error)
+		},
+		[stopRecognition]
+	)
+
+	const _onNoMatch = useCallback(
+		(e) => {
+			stopTimer()
+			stopRecognition()
+			propsRef.current.onNoMatch?.(e)
+		},
+		[stopTimer, stopRecognition]
+	)
+
+	const _onEnd = useCallback(
+		(e) => {
+			stopTimer()
+			stopRecognition()
+			propsRef.current.onEnd?.(e)
+		},
+		[stopTimer, stopRecognition]
+	)
+
+	onEndRef.current = _onEnd
+
+	const HANDLERS = useMemo(
+		() => ({
+			start: _onStart,
+			end: _onEnd,
+			speechstart: _onSpeechStart,
+			speechend: _onSpeechEnd,
+			result: _onResult,
+			error: _onError,
+			nomatch: _onNoMatch,
+		}),
+		[_onStart, _onEnd, _onSpeechStart, _onSpeechEnd, _onResult, _onError, _onNoMatch]
+	)
+
+	// Assigned inline (not in useEffect) so it's ready before any event fires
+	unsubscribeAllRef.current = () => Object.entries(HANDLERS).forEach(([event, fn]) => unsubscribe?.(event, fn))
 
-	const stopRecognition = () => {
+	const startRecognition = useCallback(() => {
 		try {
-			setIsListening(false)
-			stop()
+			setIsListening(true)
+			Object.entries(HANDLERS).forEach(([event, fn]) => subscribe(event, fn))
+			start()
 		} catch (error) {
-			onError?.(error)
+			_onError(error)
 		}
-	}
+	}, [HANDLERS, subscribe, start, _onError])
 
 	const _onFocus = () => {
 		if (!className && outlineStyle) {
@@ -73,52 +168,6 @@ const Vocal = ({
 		}
 	}
 
-	const _onStart = (e) => {
-		startTimer()
-		onStart?.(e)
-	}
-
-	const _onSpeechStart = (e) => {
-		stopTimer()
-		onSpeechStart?.(e)
-	}
-
-	const _onSpeechEnd = (e) => {
-		startTimer()
-		onSpeechEnd?.(e)
-	}
-
-	const _onResult = (event, result) => {
-		stopTimer()
-		stopRecognition()
-		triggerCommand(result)
-		onResult?.(result, event)
-	}
-
-	const _onError = (error) => {
-		stopRecognition()
-		onError?.(error)
-	}
-
-	const _onNoMatch = (e) => {
-		stopTimer()
-		stopRecognition()
-		onNoMatch?.(e)
-	}
-
-	const HANDLERS = {
-		start: _onStart,
-		end: _onEnd,
-		speechstart: _onSpeechStart,
-		speechend: _onSpeechEnd,
-		result: _onResult,
-		error: _onError,
-		nomatch: _onNoMatch,
-	}
-
-	const subscribeAll = () => Object.entries(HANDLERS).forEach(([event, handler]) => subscribe(event, handler))
-	const unsubscribeAll = () => Object.entries(HANDLERS).forEach(([event, handler]) => unsubscribe(event, handler))
-
 	const _renderDefault = () => (
 		<button
 			data-testid="__vocal-root__"

package/src/components/__tests__/Vocal.test.jsx

@@ -267,4 +267,210 @@ describe('Vocal', () => {
 			await waitFor(() => expect(onEnd).toHaveBeenCalled())
 		})
 	})
+
+	it('calls the updated onEnd prop after a re-render during an active session', async () => {
+		const onEndV1 = vi.fn()
+		const onEndV2 = vi.fn()
+		const recognition = new SpeechRecognitionWrapper()
+		const { getByTestId, rerender } = render(getInstance({ __rsInstance: recognition, onEnd: onEndV1 }))
+
+		await act(async () => {
+			fireEvent.click(getByTestId('__vocal-root__'))
+			await waitFor(() => expect(getByTestId('__vocal-root__')).toHaveStyle({ cursor: 'default' }))
+		})
+
+		await act(async () => {
+			rerender(getInstance({ __rsInstance: recognition, onEnd: onEndV2 }))
+		})
+
+		await act(async () => {
+			recognition.instance.say('Foo')
+			await waitFor(() => expect(onEndV2).toHaveBeenCalled())
+		})
+
+		expect(onEndV1).not.toHaveBeenCalled()
+	})
+
+	it('resets to idle after a re-render during an active session', async () => {
+		const onEnd = vi.fn()
+		const recognition = new SpeechRecognitionWrapper()
+		const { getByTestId, rerender } = render(getInstance({ __rsInstance: recognition, onEnd }))
+
+		await act(async () => {
+			fireEvent.click(getByTestId('__vocal-root__'))
+			await waitFor(() => expect(getByTestId('__vocal-root__')).toHaveStyle({ cursor: 'default' }))
+		})
+
+		await act(async () => {
+			rerender(getInstance({ __rsInstance: recognition, onEnd }))
+		})
+
+		await act(async () => {
+			recognition.instance.say('Foo')
+			await waitFor(() => expect(onEnd).toHaveBeenCalled())
+		})
+
+		expect(getByTestId('__vocal-root__')).toHaveStyle({ cursor: 'pointer' })
+	})
+
+	it('calls the updated onResult prop after a re-render during an active session', async () => {
+		const onResultV1 = vi.fn()
+		const onResultV2 = vi.fn()
+		const recognition = new SpeechRecognitionWrapper()
+		const { getByTestId, rerender } = render(getInstance({ __rsInstance: recognition, onResult: onResultV1 }))
+
+		await act(async () => {
+			fireEvent.click(getByTestId('__vocal-root__'))
+			await waitFor(() => expect(getByTestId('__vocal-root__')).toHaveStyle({ cursor: 'default' }))
+		})
+
+		await act(async () => {
+			rerender(getInstance({ __rsInstance: recognition, onResult: onResultV2 }))
+		})
+
+		await act(async () => {
+			recognition.instance.say('Foo')
+			await waitFor(() => expect(onResultV2).toHaveBeenCalledWith('Foo', expect.anything()))
+		})
+
+		expect(onResultV1).not.toHaveBeenCalled()
+	})
+
+	it('calls the updated onSpeechStart prop after a re-render during an active session', async () => {
+		const onSpeechStartV1 = vi.fn()
+		const onSpeechStartV2 = vi.fn()
+		const recognition = new SpeechRecognitionWrapper()
+		const { getByTestId, rerender } = render(getInstance({ __rsInstance: recognition, onSpeechStart: onSpeechStartV1 }))
+
+		await act(async () => {
+			fireEvent.click(getByTestId('__vocal-root__'))
+			await waitFor(() => expect(getByTestId('__vocal-root__')).toHaveStyle({ cursor: 'default' }))
+		})
+
+		await act(async () => {
+			rerender(getInstance({ __rsInstance: recognition, onSpeechStart: onSpeechStartV2 }))
+		})
+
+		await act(async () => {
+			recognition.instance.say('Foo')
+			await waitFor(() => expect(onSpeechStartV2).toHaveBeenCalled())
+		})
+
+		expect(onSpeechStartV1).not.toHaveBeenCalled()
+	})
+
+	it('calls the updated onSpeechEnd prop after a re-render during an active session', async () => {
+		const onSpeechEndV1 = vi.fn()
+		const onSpeechEndV2 = vi.fn()
+		const recognition = new SpeechRecognitionWrapper()
+		const { getByTestId, rerender } = render(getInstance({ __rsInstance: recognition, onSpeechEnd: onSpeechEndV1 }))
+
+		await act(async () => {
+			fireEvent.click(getByTestId('__vocal-root__'))
+			await waitFor(() => expect(getByTestId('__vocal-root__')).toHaveStyle({ cursor: 'default' }))
+		})
+
+		await act(async () => {
+			rerender(getInstance({ __rsInstance: recognition, onSpeechEnd: onSpeechEndV2 }))
+		})
+
+		await act(async () => {
+			recognition.instance.say('Foo')
+			await waitFor(() => expect(onSpeechEndV2).toHaveBeenCalled())
+		})
+
+		expect(onSpeechEndV1).not.toHaveBeenCalled()
+	})
+
+	it('calls the updated onNoMatch prop after a re-render during an active session', async () => {
+		const onNoMatchV1 = vi.fn()
+		const onNoMatchV2 = vi.fn()
+		const recognition = new SpeechRecognitionWrapper()
+		const { getByTestId, rerender } = render(getInstance({ __rsInstance: recognition, onNoMatch: onNoMatchV1 }))
+
+		await act(async () => {
+			fireEvent.click(getByTestId('__vocal-root__'))
+			await waitFor(() => expect(getByTestId('__vocal-root__')).toHaveStyle({ cursor: 'default' }))
+		})
+
+		await act(async () => {
+			rerender(getInstance({ __rsInstance: recognition, onNoMatch: onNoMatchV2 }))
+		})
+
+		await act(async () => {
+			recognition.instance.say(null)
+			await waitFor(() => expect(onNoMatchV2).toHaveBeenCalled())
+		})
+
+		expect(onNoMatchV1).not.toHaveBeenCalled()
+	})
+
+	it('calls the updated onError prop after a re-render during an active session', async () => {
+		const onErrorV1 = vi.fn()
+		const onErrorV2 = vi.fn()
+		const recognition = new SpeechRecognitionWrapper()
+		const { getByTestId, rerender } = render(getInstance({ __rsInstance: recognition, onError: onErrorV1 }))
+
+		await act(async () => {
+			fireEvent.click(getByTestId('__vocal-root__'))
+			await waitFor(() => expect(getByTestId('__vocal-root__')).toHaveStyle({ cursor: 'default' }))
+		})
+
+		await act(async () => {
+			rerender(getInstance({ __rsInstance: recognition, onError: onErrorV2 }))
+		})
+
+		await act(async () => {
+			recognition.instance.error(new Error('mic failure'))
+			await waitFor(() => expect(onErrorV2).toHaveBeenCalled())
+		})
+
+		expect(onErrorV1).not.toHaveBeenCalled()
+	})
+
+	it('returns the most confident alternative when multiple alternatives are provided', async () => {
+		const onResult = vi.fn()
+		const recognition = new SpeechRecognitionWrapper()
+		const { getByTestId } = render(getInstance({ __rsInstance: recognition, onResult }))
+
+		await act(async () => {
+			fireEvent.click(getByTestId('__vocal-root__'))
+			recognition.instance.say([[
+				{ transcript: 'bar', confidence: 0.4 },
+				{ transcript: 'foo', confidence: 0.9 },
+				{ transcript: 'baz', confidence: 0.1 },
+			]])
+			await waitFor(() => expect(onResult).toHaveBeenCalledWith('foo', expect.anything()))
+		})
+	})
+
+	it('joins all segments when multiple result segments are provided', async () => {
+		const onResult = vi.fn()
+		const recognition = new SpeechRecognitionWrapper()
+		const { getByTestId } = render(getInstance({ __rsInstance: recognition, onResult }))
+
+		await act(async () => {
+			fireEvent.click(getByTestId('__vocal-root__'))
+			recognition.instance.say([
+				[{ transcript: 'hello ', confidence: 0.9 }],
+				[{ transcript: 'world', confidence: 0.8 }],
+			])
+			await waitFor(() => expect(onResult).toHaveBeenCalledWith('hello world', expect.anything()))
+		})
+	})
+
+	it('picks highest-confidence alternative per segment when multi-segment with multi-alternative', async () => {
+		const onResult = vi.fn()
+		const recognition = new SpeechRecognitionWrapper()
+		const { getByTestId } = render(getInstance({ __rsInstance: recognition, onResult }))
+
+		await act(async () => {
+			fireEvent.click(getByTestId('__vocal-root__'))
+			recognition.instance.say([
+				[{ transcript: 'good ', confidence: 0.8 }, { transcript: 'bad ', confidence: 0.2 }],
+				[{ transcript: 'day', confidence: 0.95 }, { transcript: 'dey', confidence: 0.3 }],
+			])
+			await waitFor(() => expect(onResult).toHaveBeenCalledWith('good day', expect.anything()))
+		})
+	})
 })

package/vitest.setup.js

@@ -54,18 +54,21 @@ global.SpeechRecognition = vi.fn(function () {
 		abort: vi.fn(function () {
 			handlers.end?.()
 		}),
-		say: vi.fn(function (sentence) {
+		say: vi.fn(function (input) {
 			handlers.speechstart?.()
 
 			const resultEvent = new Event('result')
 			resultEvent.resultIndex = 0
-			resultEvent.results = [[{ transcript: sentence }]]
+			resultEvent.results = Array.isArray(input) ? input : input ? [[{ transcript: input }]] : []
 			handlers.speechend?.()
-			if (sentence) {
+			if (input) {
 				handlers.result?.(resultEvent)
 			} else {
 				handlers.nomatch?.()
 			}
 		}),
+		error: vi.fn(function (err) {
+			handlers.error?.(err)
+		}),
 	}
 })