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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@untemps/react-vocal",
-	"version": "1.7.34",
+	"version": "2.0.0-beta.1",
 	"author": "Vincent Le Badezet <v.lebadezet@untemps.net>",
 	"repository": "git@github.com:untemps/react-vocal.git",
 	"license": "MIT",
@@ -23,67 +23,36 @@
 	"main": "dist/index.js",
 	"module": "dist/index.es.js",
 	"engines": {
-		"node": ">=18.0.0"
+		"node": "^20.19.0 || >=22.12.0"
 	},
 	"devDependencies": {
-		"@babel/cli": "^7.12.10",
-		"@babel/core": "^7.12.10",
-		"@babel/plugin-proposal-class-properties": "^7.12.1",
-		"@babel/plugin-transform-react-jsx": "^7.12.12",
-		"@babel/plugin-transform-runtime": "^7.12.10",
-		"@babel/preset-env": "^7.12.11",
-		"@babel/preset-react": "^7.12.10",
-		"@commitlint/cli": "^9.1.1",
-		"@commitlint/config-conventional": "^9.1.1",
-		"@rollup/plugin-babel": "^5.2.2",
-		"@rollup/plugin-commonjs": "^17.0.0",
-		"@rollup/plugin-node-resolve": "^11.0.1",
+		"@commitlint/cli": "^20.5.3",
+		"@commitlint/config-conventional": "^20.5.3",
 		"@semantic-release/changelog": "^6.0.3",
 		"@semantic-release/git": "^10.0.1",
 		"@semantic-release/github": "^12.0.6",
-		"@testing-library/dom": "^7.29.0",
-		"@testing-library/jest-dom": "^5.11.6",
-		"@testing-library/react": "^11.2.2",
-		"@testing-library/react-hooks": "^3.7.0",
-		"@untemps/utils": "^2.0.0-beta.1",
-		"babel-jest": "^28.0.0-alpha.11",
-		"cross-env": "^7.0.3",
-		"husky": "^4.3.6",
-		"jest": "^28.0.0-alpha.11",
-		"jest-environment-jsdom": "^28.0.0-alpha.11",
-		"prettier": "^2.2.1",
-		"prop-types": "^15.7.2",
-		"react": "^17.0.1",
-		"react-dom": "^17.0.1",
-		"react-test-renderer": "^17.0.1",
-		"rimraf": "^3.0.2",
-		"rollup": "^2.35.1",
-		"rollup-plugin-sizes": "^1.0.4",
-		"rollup-plugin-terser": "^7.0.2",
-		"rollup-plugin-visualizer": "^5.14.0",
-		"semantic-release": "^25.0.3"
+		"@testing-library/dom": "^10.4.1",
+		"@testing-library/jest-dom": "^6.9.1",
+		"@testing-library/react": "^16.3.2",
+		"@untemps/utils": "^3.2.0",
+		"@vitejs/plugin-react": "^6.0.1",
+		"@vitest/coverage-v8": "^4.1.5",
+		"husky": "^9.1.7",
+		"jsdom": "^29.1.1",
+		"prettier": "^3.8.3",
+		"react": "^19.2.5",
+		"react-dom": "^19.2.5",
+		"semantic-release": "^25.0.3",
+		"vite": "^8.0.10",
+		"vitest": "^4.1.5"
 	},
 	"peerDependencies": {
-		"react": "^16.13.1",
-		"react-dom": "^16.13.1"
+		"react": ">=16.13.1",
+		"react-dom": ">=16.13.1"
 	},
 	"dependencies": {
 		"@untemps/vocal": "^1.3.0",
-		"fuse.js": "^6.4.6"
-	},
-	"jest": {
-		"coverageDirectory": "./coverage/",
-		"collectCoverage": true,
-		"setupFilesAfterEnv": [
-			"<rootDir>/jest/jest.setup.js"
-		],
-		"restoreMocks": true
-	},
-	"husky": {
-		"hooks": {
-			"pre-commit": "yarn test:ci && yarn prettier",
-			"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
-		}
+		"fuse.js": "^7.3.0"
 	},
 	"release": {
 		"branches": [
@@ -131,13 +100,11 @@
 		]
 	},
 	"scripts": {
-		"dev": "cd dev && rimraf dist && yarn && yarn start",
-		"test": "jest -u --watch",
-		"test:ci": "jest -u -b --ci --coverage",
-		"build": "rimraf dist && yarn build:cjs && yarn build:es && yarn build:umd",
-		"build:cjs": "cross-env NODE_ENV=production BABEL_ENV=cjs rollup -c",
-		"build:es": "cross-env NODE_ENV=production BABEL_ENV=es rollup -c",
-		"build:umd": "cross-env NODE_ENV=production BABEL_ENV=umd rollup -c",
-		"prettier": "prettier \"*/**/*.js\" --ignore-path ./.prettierignore --write && git add . && git status"
+		"dev": "cd dev && yarn && yarn dev",
+		"test": "vitest",
+		"test:ci": "vitest run --coverage",
+		"build": "vite build",
+		"prepare": "husky",
+		"prettier": "prettier \"*/**/*.js\" --ignore-path ./.prettierignore --write && git add -u && git status"
 	}
 }

package/src/components/{Icon.js → Icon.jsx}

@@ -1,7 +1,6 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 
-const Icon = ({ color, activeColor, isActive }) => {
+const Icon = ({ color = 'black', activeColor = 'red', isActive = false }) => {
 	return (
 		<svg
 			data-testid="__icon-root__"
@@ -22,16 +21,4 @@ const Icon = ({ color, activeColor, isActive }) => {
 	)
 }
 
-Icon.propTypes = {
-	color: PropTypes.string,
-	activeColor: PropTypes.string,
-	isActive: PropTypes.bool,
-}
-
-Icon.defaultProps = {
-	color: 'black',
-	activeColor: 'red',
-	isActive: false,
-}
-
 export default Icon

package/src/components/Vocal.jsx

@@ -0,0 +1,168 @@
+import React, { cloneElement, isValidElement, useRef, useState } from 'react'
+import { Vocal as SpeechRecognitionWrapper } from '@untemps/vocal'
+import { isFunction } from '@untemps/utils/function/isFunction'
+
+import useVocal from '../hooks/useVocal'
+import useTimeout from '../hooks/useTimeout'
+import useCommands from '../hooks/useCommands'
+
+import Icon from './Icon'
+
+const Vocal = ({
+	children,
+	commands = null,
+	lang = 'en-US',
+	grammars = null,
+	timeout = 3000,
+	ariaLabel = 'start recognition',
+	style = null,
+	className = null,
+	outlineStyle = '2px solid',
+	onStart = null,
+	onEnd = null,
+	onSpeechStart = null,
+	onSpeechEnd = null,
+	onResult = null,
+	onError = null,
+	onNoMatch = null,
+	__rsInstance,
+}) => {
+	const buttonRef = useRef(null)
+	const [isListening, setIsListening] = useState(false)
+
+	const [, { start, stop, subscribe, unsubscribe }] = useVocal(lang, grammars, __rsInstance)
+	const triggerCommand = useCommands(commands)
+
+	const _onEnd = (e) => {
+		stopTimer()
+		stopRecognition()
+		unsubscribeAll()
+		onEnd?.(e)
+	}
+
+	const [startTimer, stopTimer] = useTimeout(_onEnd, timeout)
+
+	const startRecognition = () => {
+		try {
+			setIsListening(true)
+			subscribeAll()
+			start()
+		} catch (error) {
+			_onError(error)
+		}
+	}
+
+	const stopRecognition = () => {
+		try {
+			setIsListening(false)
+			stop()
+		} catch (error) {
+			onError?.(error)
+		}
+	}
+
+	const _onFocus = () => {
+		if (!className && outlineStyle) {
+			buttonRef.current.style.outline = outlineStyle
+		}
+	}
+
+	const _onBlur = () => {
+		if (!className && outlineStyle) {
+			buttonRef.current.style.outline = 'none'
+		}
+	}
+
+	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__"
+			ref={buttonRef}
+			role="button"
+			aria-label={ariaLabel}
+			style={
+				className
+					? null
+					: {
+							width: 24,
+							height: 24,
+							backgroundColor: 'transparent', // `background: none` shorthand resets all sub-properties; jsdom 29 + jest-dom v6 don't reflect that correctly via getComputedStyle
+							border: 'none',
+							padding: 0,
+							cursor: !isListening ? 'pointer' : 'default',
+							...style,
+					  }
+			}
+			className={className}
+			onFocus={_onFocus}
+			onBlur={_onBlur}
+			onClick={startRecognition}
+		>
+			<Icon isActive={isListening} color="#aaa" />
+		</button>
+	)
+
+	const _renderChildren = () => {
+		if (SpeechRecognitionWrapper.isSupported) {
+			if (isFunction(children)) {
+				return children(startRecognition, stopRecognition, isListening)
+			} else if (isValidElement(children)) {
+				return cloneElement(children, {
+					...(!isListening && { onClick: startRecognition }),
+				})
+			} else {
+				return _renderDefault()
+			}
+		}
+		return null
+	}
+
+	return _renderChildren()
+}
+
+export default Vocal

package/src/components/__tests__/{Icon.test.js → Icon.test.jsx}

@@ -1,7 +1,3 @@
-/**
- * @jest-environment jsdom
- */
-
 import React from 'react'
 import { render } from '@testing-library/react'
 

package/src/components/__tests__/{Vocal.test.js → Vocal.test.jsx}

@@ -1,7 +1,3 @@
-/**
- * @jest-environment jsdom
- */
-
 import React from 'react'
 import { waitFor } from '@testing-library/dom'
 import { act, fireEvent, render } from '@testing-library/react'
@@ -34,11 +30,11 @@ describe('Vocal', () => {
 	})
 
 	it('renders no children element if SpeechRecognition is not supported', () => {
-		jest.spyOn(SpeechRecognitionWrapper, 'isSupported', 'get').mockReturnValueOnce(false)
+		vi.spyOn(SpeechRecognitionWrapper, 'isSupported', 'get').mockReturnValueOnce(false)
 		const { queryByTestId } = render(getInstance(null, <div data-testid="__vocal-custom-root__" />))
 		expect(queryByTestId('__vocal-root__')).not.toBeInTheDocument()
 		expect(queryByTestId('__vocal-custom-root__')).not.toBeInTheDocument()
-		jest.clearAllMocks()
+		vi.clearAllMocks()
 	})
 
 	it('renders custom children function', () => {
@@ -48,7 +44,7 @@ describe('Vocal', () => {
 	})
 
 	it('starts recognition with custom children function', async () => {
-		const onStart = jest.fn()
+		const onStart = vi.fn()
 		const { queryByTestId } = render(
 			getInstance({ onStart }, (start) => <div data-testid="__vocal-custom-root__" onClick={start} />)
 		)
@@ -59,7 +55,7 @@ describe('Vocal', () => {
 	})
 
 	it('stops recognition with custom children function', async () => {
-		const onEnd = jest.fn()
+		const onEnd = vi.fn()
 		const { queryByText } = render(
 			getInstance({ onEnd }, (start, stop) => (
 				<div data-testid="__vocal-custom-root__">
@@ -76,7 +72,7 @@ describe('Vocal', () => {
 	})
 
 	it('gets recognition status with custom children function', async () => {
-		const onEnd = jest.fn()
+		const onEnd = vi.fn()
 		const { queryByText } = render(
 			getInstance({ onEnd }, (start, stop, isStarted) => (
 				<div data-testid="__vocal-custom-root__">
@@ -128,11 +124,12 @@ describe('Vocal', () => {
 
 	it('uses custom styles', () => {
 		const { getByTestId } = render(getInstance({ style: { backgroundColor: 'blue' } }))
-		expect(getByTestId('__vocal-root__')).toHaveStyle({ backgroundColor: 'blue' })
+		// jest-dom v6 + jsdom 29: `div.style.color = 'blue'` reads back as 'blue' but getComputedStyle returns RGB; normalisation no longer bridges the gap
+		expect(getByTestId('__vocal-root__')).toHaveStyle({ backgroundColor: 'rgb(0, 0, 255)' })
 	})
 
 	it('responds to command', async () => {
-		const callback = jest.fn()
+		const callback = vi.fn()
 		const recognition = new SpeechRecognitionWrapper()
 		const commands = { foo: callback }
 		const { getByTestId } = render(getInstance({ __rsInstance: recognition, commands }))
@@ -153,7 +150,7 @@ describe('Vocal', () => {
 	})
 
 	it('triggers onStart handler', async () => {
-		const onStart = jest.fn()
+		const onStart = vi.fn()
 		const { queryByTestId } = render(getInstance({ onStart }))
 		await act(async () => {
 			fireEvent.click(queryByTestId('__vocal-root__'))
@@ -162,7 +159,7 @@ describe('Vocal', () => {
 	})
 
 	it('triggers onResult handler', async () => {
-		const onResult = jest.fn()
+		const onResult = vi.fn()
 		const recognition = new SpeechRecognitionWrapper()
 		const { getByTestId } = render(getInstance({ __rsInstance: recognition, onResult }))
 
@@ -182,7 +179,7 @@ describe('Vocal', () => {
 	})
 
 	it('triggers onNoMatch handler', async () => {
-		const onNoMatch = jest.fn()
+		const onNoMatch = vi.fn()
 		const recognition = new SpeechRecognitionWrapper()
 		const { getByTestId } = render(getInstance({ __rsInstance: recognition, onNoMatch }))
 
@@ -202,7 +199,7 @@ describe('Vocal', () => {
 	})
 
 	it('triggers onSpeechStart handler', async () => {
-		const onSpeechStart = jest.fn()
+		const onSpeechStart = vi.fn()
 		const recognition = new SpeechRecognitionWrapper()
 		const { getByTestId } = render(getInstance({ __rsInstance: recognition, onSpeechStart }))
 
@@ -222,7 +219,7 @@ describe('Vocal', () => {
 	})
 
 	it('triggers onSpeechEnd handler', async () => {
-		const onSpeechEnd = jest.fn()
+		const onSpeechEnd = vi.fn()
 		const recognition = new SpeechRecognitionWrapper()
 		const { getByTestId } = render(getInstance({ __rsInstance: recognition, onSpeechEnd }))
 
@@ -243,7 +240,7 @@ describe('Vocal', () => {
 
 	it('triggers onEnd handler after timeout', async () => {
 		const timeout = 100
-		const onEnd = jest.fn()
+		const onEnd = vi.fn()
 		const { getByTestId } = render(getInstance({ timeout, onEnd }))
 		await act(async () => {
 			fireEvent.click(getByTestId('__vocal-root__'))
@@ -252,7 +249,7 @@ describe('Vocal', () => {
 	})
 
 	it('triggers onEnd handler after speech', async () => {
-		const onEnd = jest.fn()
+		const onEnd = vi.fn()
 		const recognition = new SpeechRecognitionWrapper()
 		const { getByTestId } = render(getInstance({ __rsInstance: recognition, onEnd }))
 

package/src/components/__tests__/{VocalWithMockedUseVocal.test.js → VocalWithMockedUseVocal.test.jsx}

@@ -1,22 +1,20 @@
-/**
- * @jest-environment jsdom
- */
-
 import React from 'react'
 import { waitFor } from '@testing-library/dom'
 import { act, fireEvent, render } from '@testing-library/react'
 
 import Vocal from '../Vocal'
 
-jest.mock('../../hooks/useVocal', () => {
-	return () => [
-		null,
-		{
-			subscribe: () => {
-				throw new Error('Foo')
+vi.mock('../../hooks/useVocal', () => {
+	return {
+		default: () => [
+			null,
+			{
+				subscribe: () => {
+					throw new Error('Foo')
+				},
 			},
-		},
-	]
+		],
+	}
 })
 
 const defaultProps = {}
@@ -28,7 +26,7 @@ const getInstance = (props = {}, children = null) => (
 
 describe('Vocal', () => {
 	it('triggers onError handler', async () => {
-		const onError = jest.fn()
+		const onError = vi.fn()
 		const { queryByTestId } = render(getInstance({ onError }))
 		await act(async () => {
 			fireEvent.click(queryByTestId('__vocal-root__'))

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

@@ -0,0 +1,21 @@
+// 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

@@ -0,0 +1,28 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Vocal > matches snapshot 1`] = `
+<DocumentFragment>
+  <button
+    aria-label="start recognition"
+    data-testid="__vocal-root__"
+    role="button"
+    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,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks'
+import { renderHook } from '@testing-library/react'
 
 import useCommands from '../useCommands'
 

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

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks'
+import { renderHook } from '@testing-library/react'
 
 import useTimeout from '../useTimeout'
 
@@ -10,13 +10,13 @@ const wait = (delay) => {
 
 describe('useTimeout', () => {
 	it('not triggers handler before calling start', () => {
-		const handler = jest.fn()
+		const handler = vi.fn()
 		renderHook(() => useTimeout(handler))
 		expect(handler).not.toHaveBeenCalled()
 	})
 
 	it('not triggers handler before timeout', async () => {
-		const handler = jest.fn()
+		const handler = vi.fn()
 		const timeout = 500
 		const {
 			result: {
@@ -29,7 +29,7 @@ describe('useTimeout', () => {
 	})
 
 	it('triggers handler immediately', async () => {
-		const handler = jest.fn()
+		const handler = vi.fn()
 		const {
 			result: {
 				current: [start],
@@ -41,7 +41,7 @@ describe('useTimeout', () => {
 	})
 
 	it('triggers handler after delay', async () => {
-		const handler = jest.fn()
+		const handler = vi.fn()
 		const timeout = 500
 		const {
 			result: {
@@ -54,7 +54,7 @@ describe('useTimeout', () => {
 	})
 
 	it('not triggers handler if stop is called before timeout', async () => {
-		const handler = jest.fn()
+		const handler = vi.fn()
 		const timeout = 500
 		const {
 			result: {

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

@@ -1,19 +1,19 @@
-import { renderHook } from '@testing-library/react-hooks'
+import { renderHook } from '@testing-library/react'
 import { Vocal as SpeechRecognitionWrapper } from '@untemps/vocal'
 
 import useVocal from '../useVocal'
 
-jest.mock('@untemps/vocal')
+vi.mock('@untemps/vocal')
 
 describe('useVocal', () => {
-	const mockStart = jest.fn()
-	const mockStop = jest.fn()
-	const mockAbort = jest.fn()
-	const mockAddEventListener = jest.fn()
-	const mockRemoveEventListener = jest.fn()
-	const mockCleanup = jest.fn()
-
-	const mockIsSupported = jest.fn()
+	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,
 	})
@@ -78,7 +78,7 @@ describe('useVocal', () => {
 					current: [, { subscribe }],
 				},
 			} = renderHook(() => useVocal())
-			subscribe('foo', jest.fn())
+			subscribe('foo', vi.fn())
 			expect(mockAddEventListener).not.toHaveBeenCalled()
 		})
 
@@ -88,7 +88,7 @@ describe('useVocal', () => {
 					current: [, { unsubscribe }],
 				},
 			} = renderHook(() => useVocal())
-			unsubscribe('foo', jest.fn())
+			unsubscribe('foo', vi.fn())
 			expect(mockRemoveEventListener).not.toHaveBeenCalled()
 		})
 	})
@@ -99,7 +99,7 @@ describe('useVocal', () => {
 		})
 
 		beforeEach(() => {
-			SpeechRecognitionWrapper.mockImplementation(() => {
+			SpeechRecognitionWrapper.mockImplementation(function () {
 				return {
 					start: mockStart,
 					stop: mockStop,
@@ -180,7 +180,7 @@ describe('useVocal', () => {
 					current: [, { subscribe }],
 				},
 			} = renderHook(() => useVocal())
-			subscribe('foo', jest.fn())
+			subscribe('foo', vi.fn())
 			expect(mockAddEventListener).toHaveBeenCalled()
 		})
 
@@ -190,7 +190,7 @@ describe('useVocal', () => {
 					current: [, { unsubscribe }],
 				},
 			} = renderHook(() => useVocal())
-			unsubscribe('foo', jest.fn())
+			unsubscribe('foo', vi.fn())
 			expect(mockRemoveEventListener).toHaveBeenCalled()
 		})
 	})

package/src/hooks/useTimeout.js

@@ -19,5 +19,3 @@ const useTimeout = (handler, timeout = 0) => {
 }
 
 export default useTimeout
-
-// TODO: Return a promise

package/src/hooks/useVocal.js

@@ -54,5 +54,3 @@ const useVocal = (lang = 'en-US', grammars = null, __rsInstance = null) => {
 }
 
 export default useVocal
-
-// TODO: Return the instance, not the ref