@untemps/react-vocal 2.0.0-beta.6 → 2.0.0-beta.7

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

@@ -1,38 +0,0 @@
-import React from 'react'
-import { waitFor } from '@testing-library/dom'
-import { act, fireEvent, render } from '@testing-library/react'
-
-import Vocal from '../Vocal'
-
-vi.mock('../../hooks/useVocal', () => {
-	return {
-		default: () => [
-			null,
-			{
-				subscribe: () => {
-					throw new Error('Foo')
-				},
-			},
-		],
-	}
-})
-
-const defaultProps = {}
-const getInstance = (props = {}, children = null) => (
-	<Vocal {...defaultProps} {...props}>
-		{children}
-	</Vocal>
-)
-
-describe('Vocal', () => {
-	it('triggers onError handler', async () => {
-		const onError = vi.fn()
-		const { queryByTestId } = render(getInstance({ onError }))
-		await act(async () => {
-			fireEvent.click(queryByTestId('__vocal-root__'))
-			await waitFor(() => expect(onError).toHaveBeenCalled())
-		})
-	})
-})
-
-// TODO: Merge this file with Vocal.test.js

package/src/components/__tests__/__snapshots__/Icon.test.jsx.snap

@@ -1,21 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`Icon > matches snapshot 1`] = `
-<DocumentFragment>
-  <svg
-    data-testid="__icon-root__"
-    height="100%"
-    viewBox="0 0 24 24"
-    width="100%"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g>
-      <path
-        d="M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z"
-        data-testid="__icon-path__"
-        fill="black"
-      />
-    </g>
-  </svg>
-</DocumentFragment>
-`;

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

@@ -1,28 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`Vocal > matches snapshot 1`] = `
-<DocumentFragment>
-  <button
-    aria-label="start recognition"
-    aria-pressed="false"
-    data-testid="__vocal-root__"
-    style="width: 24px; height: 24px; background-color: transparent; border: medium; padding: 0px; cursor: pointer;"
-  >
-    <svg
-      data-testid="__icon-root__"
-      height="100%"
-      viewBox="0 0 24 24"
-      width="100%"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g>
-        <path
-          d="M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z"
-          data-testid="__icon-path__"
-          fill="#aaa"
-        />
-      </g>
-    </svg>
-  </button>
-</DocumentFragment>
-`;

package/src/hooks/__tests__/useCommands.test.js

@@ -1,115 +0,0 @@
-import { act, renderHook } from '@testing-library/react'
-
-import useCommands from '../useCommands'
-
-// Static import anchors fuse.js in the module graph so vi.mock intercepts the
-// dynamic import('fuse.js') inside the hook. Without it the dynamic import resolves
-// against the real module before the async mock factory completes.
-import 'fuse.js'
-
-vi.mock('fuse.js', async () => {
-	const actual = await vi.importActual('fuse.js')
-	return actual
-})
-
-describe('useCommands', () => {
-	it('returns triggerCommand function', () => {
-		const triggerCommand = renderHook(() => useCommands())
-		expect(triggerCommand).toBeDefined()
-	})
-
-	it('triggers callback mapped to the exact input', () => {
-		const commands = {
-			foo: () => 'bar',
-		}
-		const {
-			result: { current: triggerCommand },
-		} = renderHook(() => useCommands(commands))
-		expect(triggerCommand('foo')).toBe('bar')
-	})
-
-	it('passes input as callback argument', () => {
-		const commands = {
-			foo: (input) => input,
-		}
-		const {
-			result: { current: triggerCommand },
-		} = renderHook(() => useCommands(commands))
-		expect(triggerCommand('foo')).toBe('foo')
-	})
-
-	describe('Approximate inputs', () => {
-		const value = 'foo'
-		it.each([
-			['Change la bordure en vert', 'Change la bordure en verre', value],
-			['Change la bordure en vert', 'Change la bordure en verres', value],
-			['Change la bordure en vert', 'Change la bordure en vers', value],
-			['Change la bordure en vert', 'Change la bordure en vairs', value],
-			['Change la bordure en vert', 'Changez la bordure en verre', value],
-			['Change la bordure en vert', 'Changez la bodure en verre', null],
-			['Change la bordure en vert', 'Change la bordure en rouge', null],
-			['Change la bordure en vert', 'Change la bordure en verre de rouge', null],
-			['Change la bordure en vert', 'Change la bordure en violet', null],
-			['Change la bordure en vert', 'Modifie la bordure en violet', null],
-		])('triggers callback mapped to approximate inputs', async (command, input, expected) => {
-			const commands = {
-				[command]: () => value,
-			}
-			const {
-				result: { current: triggerCommand },
-			} = renderHook(() => useCommands(commands))
-			// Flush the dynamic import microtask
-			await act(async () => {})
-			expect(triggerCommand(input)).toBe(expected)
-		})
-	})
-
-	it('returns null as no command is mapped to the input', () => {
-		const commands = {
-			foo: () => 'bar',
-		}
-		const {
-			result: { current: triggerCommand },
-		} = renderHook(() => useCommands(commands))
-		expect(triggerCommand('gag')).toBeNull()
-	})
-
-	it('triggers all registered commands when multiple commands are defined', () => {
-		const commands = {
-			rouge: () => 'red',
-			bleu: () => 'blue',
-			jaune: () => 'yellow',
-		}
-		const {
-			result: { current: triggerCommand },
-		} = renderHook(() => useCommands(commands))
-		expect(triggerCommand('rouge')).toBe('red')
-		expect(triggerCommand('bleu')).toBe('blue')
-		expect(triggerCommand('jaune')).toBe('yellow')
-	})
-
-	it('does not match near-homophones with strict precision — rely on maxAlternatives instead', () => {
-		const commands = { vert: () => 'green' }
-		const {
-			result: { current: triggerCommand },
-		} = renderHook(() => useCommands(commands))
-		// 'verre' scores 0.4 against 'vert' — not strictly < STRICT_PRECISION (0.4)
-		expect(triggerCommand('verre')).toBeNull()
-		// The engine surfaces 'vert' as a secondary alternative (score 0) — exact match
-		expect(triggerCommand('vert')).toBe('green')
-	})
-
-	it('falls back to contains matching when fuse.js is not available', async () => {
-		vi.doMock('fuse.js', () => {
-			throw new Error('fuse.js not installed')
-		})
-		const { default: useCommandsWithoutFuse } = await import('../useCommands')
-		const commands = { 'change color': () => 'matched' }
-		const {
-			result: { current: triggerCommand },
-		} = renderHook(() => useCommandsWithoutFuse(commands))
-		await act(async () => {})
-		expect(triggerCommand('change color')).toBe('matched')
-		vi.doUnmock('fuse.js')
-	})
-})

package/src/hooks/__tests__/useTimeout.test.js

@@ -1,69 +0,0 @@
-import { renderHook } from '@testing-library/react'
-
-import useTimeout from '../useTimeout'
-
-const wait = (delay) => {
-	return new Promise((resolve) => {
-		setTimeout(resolve, delay)
-	})
-}
-
-describe('useTimeout', () => {
-	it('not triggers handler before calling start', () => {
-		const handler = vi.fn()
-		renderHook(() => useTimeout(handler))
-		expect(handler).not.toHaveBeenCalled()
-	})
-
-	it('not triggers handler before timeout', async () => {
-		const handler = vi.fn()
-		const timeout = 500
-		const {
-			result: {
-				current: [start],
-			},
-		} = renderHook(() => useTimeout(handler, timeout))
-		start()
-		await wait(timeout - 50)
-		expect(handler).not.toHaveBeenCalled()
-	})
-
-	it('triggers handler immediately', async () => {
-		const handler = vi.fn()
-		const {
-			result: {
-				current: [start],
-			},
-		} = renderHook(() => useTimeout(handler))
-		start()
-		await wait(0)
-		expect(handler).toHaveBeenCalled()
-	})
-
-	it('triggers handler after delay', async () => {
-		const handler = vi.fn()
-		const timeout = 500
-		const {
-			result: {
-				current: [start],
-			},
-		} = renderHook(() => useTimeout(handler, timeout))
-		start()
-		await wait(timeout)
-		expect(handler).toHaveBeenCalled()
-	})
-
-	it('not triggers handler if stop is called before timeout', async () => {
-		const handler = vi.fn()
-		const timeout = 500
-		const {
-			result: {
-				current: [start, stop],
-			},
-		} = renderHook(() => useTimeout(handler, timeout))
-		start()
-		stop()
-		await wait(timeout)
-		expect(handler).not.toHaveBeenCalled()
-	})
-})

package/src/hooks/__tests__/useVocal.test.js

@@ -1,207 +0,0 @@
-import { renderHook } from '@testing-library/react'
-import { Vocal as SpeechRecognitionWrapper } from '@untemps/vocal'
-
-import useVocal from '../useVocal'
-
-vi.mock('@untemps/vocal')
-
-describe('useVocal', () => {
-	const mockStart = vi.fn()
-	const mockStop = vi.fn()
-	const mockAbort = vi.fn()
-	const mockAddEventListener = vi.fn()
-	const mockRemoveEventListener = vi.fn()
-	const mockCleanup = vi.fn()
-
-	const mockIsSupported = vi.fn()
-	Object.defineProperty(SpeechRecognitionWrapper, 'isSupported', {
-		get: mockIsSupported,
-	})
-
-	describe('with no SpeechRecognition support', () => {
-		beforeAll(() => {
-			mockIsSupported.mockReturnValue(false)
-		})
-
-		it('cannot create SpeechRecognition instance', () => {
-			const {
-				result: {
-					current: [ref],
-				},
-			} = renderHook(() => useVocal())
-			expect(ref.current).toBeNull()
-		})
-
-		it('not triggers start function', () => {
-			const {
-				result: {
-					current: [, { start }],
-				},
-			} = renderHook(() => useVocal())
-			start()
-			expect(mockStart).not.toHaveBeenCalled()
-		})
-
-		it('not triggers stop function', () => {
-			const {
-				result: {
-					current: [, { stop }],
-				},
-			} = renderHook(() => useVocal())
-			stop()
-			expect(mockStop).not.toHaveBeenCalled()
-		})
-
-		it('not triggers abort function', () => {
-			const {
-				result: {
-					current: [, { abort }],
-				},
-			} = renderHook(() => useVocal())
-			abort()
-			expect(mockAbort).not.toHaveBeenCalled()
-		})
-
-		it('not triggers clean function', () => {
-			const {
-				result: {
-					current: [, { clean }],
-				},
-			} = renderHook(() => useVocal())
-			clean()
-			expect(mockCleanup).not.toHaveBeenCalled()
-		})
-
-		it('not triggers subscribe function', () => {
-			const {
-				result: {
-					current: [, { subscribe }],
-				},
-			} = renderHook(() => useVocal())
-			subscribe('foo', vi.fn())
-			expect(mockAddEventListener).not.toHaveBeenCalled()
-		})
-
-		it('not triggers unsubscribe function', () => {
-			const {
-				result: {
-					current: [, { unsubscribe }],
-				},
-			} = renderHook(() => useVocal())
-			unsubscribe('foo', vi.fn())
-			expect(mockRemoveEventListener).not.toHaveBeenCalled()
-		})
-	})
-
-	describe('with SpeechRecognition support', () => {
-		beforeAll(() => {
-			mockIsSupported.mockReturnValue(true)
-		})
-
-		beforeEach(() => {
-			SpeechRecognitionWrapper.mockImplementation(function () {
-				return {
-					start: mockStart,
-					stop: mockStop,
-					abort: mockAbort,
-					addEventListener: mockAddEventListener,
-					removeEventListener: mockRemoveEventListener,
-					cleanup: mockCleanup,
-				}
-			})
-		})
-
-		afterEach(() => {
-			SpeechRecognitionWrapper.mockReset()
-		})
-
-		it('creates SpeechRecognition instance', () => {
-			const {
-				result: {
-					current: [ref],
-				},
-			} = renderHook(() => useVocal())
-			expect(ref.current).toBeDefined()
-		})
-
-		it('passes maxAlternatives to SpeechRecognitionWrapper constructor', () => {
-			renderHook(() => useVocal('en-US', null, 5))
-			expect(SpeechRecognitionWrapper).toHaveBeenCalledWith({
-				lang: 'en-US',
-				grammars: null,
-				maxAlternatives: 5,
-				continuous: false,
-			})
-		})
-
-		it('uses custom SpeechRecognition instance', () => {
-			const foo = new SpeechRecognitionWrapper()
-			const {
-				result: {
-					current: [ref],
-				},
-			} = renderHook(() => useVocal(null, null, 1, false, foo))
-			expect(ref.current).toBe(foo)
-		})
-
-		it('triggers start function', () => {
-			const {
-				result: {
-					current: [, { start }],
-				},
-			} = renderHook(() => useVocal())
-			start()
-			expect(mockStart).toHaveBeenCalled()
-		})
-
-		it('triggers stop function', () => {
-			const {
-				result: {
-					current: [, { stop }],
-				},
-			} = renderHook(() => useVocal())
-			stop()
-			expect(mockStop).toHaveBeenCalled()
-		})
-
-		it('triggers abort function', () => {
-			const {
-				result: {
-					current: [, { abort }],
-				},
-			} = renderHook(() => useVocal())
-			abort()
-			expect(mockAbort).toHaveBeenCalled()
-		})
-
-		it('triggers clean function', () => {
-			const {
-				result: {
-					current: [, { clean }],
-				},
-			} = renderHook(() => useVocal())
-			clean()
-			expect(mockCleanup).toHaveBeenCalled()
-		})
-
-		it('triggers subscribe function', () => {
-			const {
-				result: {
-					current: [, { subscribe }],
-				},
-			} = renderHook(() => useVocal())
-			subscribe('foo', vi.fn())
-			expect(mockAddEventListener).toHaveBeenCalled()
-		})
-
-		it('triggers unsubscribe function', () => {
-			const {
-				result: {
-					current: [, { unsubscribe }],
-				},
-			} = renderHook(() => useVocal())
-			unsubscribe('foo', vi.fn())
-			expect(mockRemoveEventListener).toHaveBeenCalled()
-		})
-	})
-})

package/src/hooks/useCommands.js

@@ -1,75 +0,0 @@
-import { useEffect, useMemo, useRef } from 'react'
-
-const useCommands = (commands, precision = 0.4) => {
-	const normalized = useMemo(
-		() =>
-			!!commands
-				? Object.entries(commands).reduce((acc, [key, value]) => ({ ...acc, [key.toLowerCase()]: value }), {})
-				: {},
-		[commands]
-	)
-
-	const keys = useMemo(() => Object.keys(normalized), [normalized])
-
-	// Fuzzy matching is only needed for phrase command keys.
-	// Single-word keys use exact case-insensitive lookup — simpler and no false positives.
-	const hasPhraseKeys = useMemo(() => keys.some((k) => k.includes(' ')), [keys])
-
-	// Lazy-loaded so consumers using only single-word commands incur no bundle cost.
-	const fuseRef = useRef(null)
-
-	useEffect(() => {
-		if (!hasPhraseKeys) {
-			fuseRef.current = null
-			return
-		}
-		import('fuse.js')
-			.then((module) => {
-				const Fuse = module.default ?? module
-				fuseRef.current = new Fuse(keys, { includeScore: true, ignoreLocation: true })
-			})
-			.catch(() => {
-				if (process.env.NODE_ENV !== 'production') {
-					console.warn(
-						'[react-vocal] fuse.js is not installed. Phrase command keys will fall back to exact matching. ' +
-							'Install fuse.js to enable fuzzy matching: npm install fuse.js'
-					)
-				}
-			})
-	}, [hasPhraseKeys, keys])
-
-	const triggerCommand = (rawInput) => {
-		if (!keys.length) return null
-
-		if (!hasPhraseKeys) {
-			const words = rawInput.trim().split(/\s+/)
-			const targets = words.length > 1 ? words : [rawInput.trim()]
-			for (const w of targets) {
-				const commandKey = w.toLowerCase()
-				if (commandKey in normalized) return normalized[commandKey]?.(w, commandKey)
-			}
-			return null
-		}
-
-		const fuse = fuseRef.current
-		if (fuse) {
-			const result = fuse.search(rawInput).filter((r) => r.score < precision)
-			if (result?.length) {
-				const commandKey = result[0].item.toLowerCase()
-				return normalized[commandKey]?.(rawInput, commandKey)
-			}
-		} else {
-			// `k.includes(lInput)` can produce false positives when input is short
-			// (e.g. "rouge" matches "change en rouge"). Accepted tradeoff: this branch
-			// only runs when fuse.js is absent, so degraded precision is expected.
-			const lInput = rawInput.toLowerCase()
-			const commandKey = keys.find((k) => lInput.includes(k) || k.includes(lInput))
-			if (commandKey) return normalized[commandKey]?.(rawInput, commandKey)
-		}
-		return null
-	}
-
-	return triggerCommand
-}
-
-export default useCommands

package/src/hooks/useTimeout.js

@@ -1,21 +0,0 @@
-import { useCallback, useEffect, useRef } from 'react'
-
-const useTimeout = (handler, timeout = 0) => {
-	const ref = useRef(-1)
-
-	const stop = useCallback(() => {
-		clearTimeout(ref.current)
-		ref.current = -1
-	}, [])
-
-	const start = useCallback(() => {
-		stop()
-		ref.current = setTimeout(handler, timeout)
-	}, [handler, timeout, stop])
-
-	useEffect(() => stop, [stop])
-
-	return [start, stop]
-}
-
-export default useTimeout

package/src/hooks/useVocal.js

@@ -1,56 +0,0 @@
-import { useCallback, useEffect, useRef } from 'react'
-import { Vocal as SpeechRecognitionWrapper } from '@untemps/vocal'
-
-const useVocal = (lang = 'en-US', grammars = null, maxAlternatives = 1, continuous = false, __rsInstance = null) => {
-	const ref = useRef(null)
-
-	useEffect(() => {
-		if (SpeechRecognitionWrapper.isSupported) {
-			ref.current = __rsInstance || new SpeechRecognitionWrapper({ lang, grammars, maxAlternatives, continuous })
-			return () => {
-				ref.current.abort()
-				ref.current.cleanup()
-			}
-		}
-	}, [lang, grammars, maxAlternatives, continuous, __rsInstance])
-
-	const start = useCallback(() => {
-		if (ref.current) {
-			ref.current.start()
-		}
-	}, [])
-
-	const stop = useCallback(() => {
-		if (ref.current) {
-			ref.current.stop()
-		}
-	}, [])
-
-	const abort = useCallback(() => {
-		if (ref.current) {
-			ref.current.abort()
-		}
-	}, [])
-
-	const subscribe = useCallback((eventType, handler) => {
-		if (ref.current) {
-			ref.current.addEventListener(eventType, handler)
-		}
-	}, [])
-
-	const unsubscribe = useCallback((eventType, handler) => {
-		if (ref.current) {
-			ref.current.removeEventListener(eventType, handler)
-		}
-	}, [])
-
-	const clean = useCallback(() => {
-		if (ref.current) {
-			ref.current.cleanup()
-		}
-	}, [])
-
-	return [ref, { start, stop, abort, subscribe, unsubscribe, clean }]
-}
-
-export default useVocal

package/src/index.js

@@ -1,7 +0,0 @@
-import Vocal from './components/Vocal'
-import { Vocal as SpeechRecognitionWrapper } from '@untemps/vocal'
-
-export { default as useVocal } from './hooks/useVocal'
-export const isSupported = SpeechRecognitionWrapper.isSupported
-
-export default Vocal

package/vite.config.js

@@ -1,36 +0,0 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-
-export default defineConfig({
-	plugins: [react()],
-	build: {
-		lib: {
-			entry: 'src/index.js',
-			name: 'ReactVocal',
-			formats: ['es', 'cjs', 'umd'],
-			fileName: (format) => ({ es: 'index.es.js', umd: 'index.umd.js', cjs: 'index.js' })[format],
-		},
-		rollupOptions: {
-			external: ['react', 'react-dom', 'fuse.js'],
-			output: {
-				globals: {
-					react: 'React',
-					'react-dom': 'ReactDOM',
-					'fuse.js': 'Fuse',
-				},
-			},
-		},
-		sourcemap: true,
-	},
-	test: {
-		globals: true,
-		environment: 'jsdom',
-		setupFiles: ['./vitest.setup.js'],
-		restoreMocks: true,
-		coverage: {
-			provider: 'v8',
-			reporter: ['text', 'lcov'],
-			reportsDirectory: './coverage',
-		},
-	},
-})