@untemps/react-vocal 1.7.35 → 2.0.0-beta.2

package/.github/workflows/publish.yml

@@ -12,6 +12,8 @@ permissions:
 jobs:
   release:
     runs-on: ubuntu-latest
+    env:
+      HUSKY: '0'
     steps:
       - uses: actions/checkout@v6
         with:

package/.husky/commit-msg

@@ -0,0 +1 @@
+npx --no -- commitlint --edit "$1"

package/.husky/pre-commit

@@ -0,0 +1 @@
+yarn test:ci && yarn prettier

package/.prettierignore

@@ -1,2 +1,3 @@
 dist/
 node_modules/
+coverage/

package/.prettierrc

@@ -10,7 +10,7 @@
     {
       "files": "./**/*.js",
       "options": {
-        "parser": "babylon"
+        "parser": "babel"
       }
     },
     {

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+# [2.0.0-beta.2](https://github.com/untemps/react-vocal/compare/v2.0.0-beta.1...v2.0.0-beta.2) (2026-05-07)
+
+
+### Bug Fixes
+
+* Stabilize event handlers and fix stale prop closures ([#112](https://github.com/untemps/react-vocal/issues/112)) ([69c5c00](https://github.com/untemps/react-vocal/commit/69c5c00ed73e792b6dd91dd6b294163e1c3d00dc))
+
+# [2.0.0-beta.1](https://github.com/untemps/react-vocal/compare/v1.7.35...v2.0.0-beta.1) (2026-05-05)
+
+
+### Bug Fixes
+
+* Address review feedback on migration PR ([0dba863](https://github.com/untemps/react-vocal/commit/0dba86374736f8a2a3763ef20073cdb5bc3a4ac8))
+* Commit Vitest snapshots and remove __snapshots__ from gitignore ([e120fda](https://github.com/untemps/react-vocal/commit/e120fda321c5ed553d02262399ead46653b4e002))
+* Fix comment accuracy and trailing blank line in Vocal ([0ffbbc9](https://github.com/untemps/react-vocal/commit/0ffbbc97dcda8c4c1008b5d9259cbc70753d6551))
+* Restore Icon colors broken by React 19 defaultProps removal ([3d50a38](https://github.com/untemps/react-vocal/commit/3d50a38996e1cc2589ac238e30c1b164b3677252))
+
+
+### Features
+
+* Migrate to Vite, Vitest and React 19 ([#109](https://github.com/untemps/react-vocal/issues/109)) ([29ecf60](https://github.com/untemps/react-vocal/commit/29ecf607d7e4a0eb2ac802b31e6003a225d7fecc))
+
+
+### BREAKING CHANGES
+
+* Runtime prop validation removed. `Vocal.propTypes` and `Icon.propTypes` have been deleted — React 19 deprecated static propTypes on function components. Consumers relying on development-time prop warnings must migrate to TypeScript or an equivalent static type checker.
+* Node >=20.19.0 required. Vite 8 and jsdom 29 enforce this minimum. Node 18 and 19 are no longer supported for development or CI.
+* `background: none` replaced by `backgroundColor: transparent` on the default button. The shorthand previously reset all background sub-properties (image, gradient…); the longhand only resets the color. Impact is minimal for most users but visible if a custom style prop relied on the implicit background-image reset.
+
 ## [1.7.35](https://github.com/untemps/react-vocal/compare/v1.7.34...v1.7.35) (2026-05-03)
 
 ## [1.7.34](https://github.com/untemps/react-vocal/compare/v1.7.33...v1.7.34) (2026-05-03)

package/CLAUDE.md

@@ -5,23 +5,23 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 ## Commands
 
 ```bash
-yarn test           # watch mode
+yarn test           # watch mode (Vitest)
 yarn test:ci        # CI mode with coverage (also runs in pre-commit hook)
-yarn build          # build CJS + ES + UMD to dist/
+yarn build          # build CJS + ES + UMD to dist/ (Vite library mode)
 yarn dev            # dev server at http://localhost:10001/ (separate dev/ package)
-yarn prettier       # format all JS files and stage changes
+yarn prettier       # format all JS files and stage tracked changes
 ```
 
 Run a single test file:
 ```bash
-yarn jest src/hooks/__tests__/useVocal.test.js
+yarn vitest src/hooks/__tests__/useVocal.test.js
 ```
 
-Build formats are driven by `BABEL_ENV`: `cjs` → `dist/index.js`, `es` → `dist/index.es.js`, `umd` → `dist/index.umd.js`.
+Build formats defined in `vite.config.js` `build.lib`: `cjs` → `dist/index.js`, `es` → `dist/index.es.js`, `umd` → `dist/index.umd.js`.
 
 ## Architecture
 
-This is a React library wrapping the [Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API) via `@untemps/vocal` (the `SpeechRecognitionWrapper` class).
+React library wrapping the [Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API) via `@untemps/vocal` (the `SpeechRecognitionWrapper` class).
 
 ### Public API (`src/index.js`)
 
@@ -37,18 +37,22 @@ This is a React library wrapping the [Web Speech API](https://developer.mozilla.
 | `useCommands` | Fuzzy-matches a speech result string against a `commands` map using **fuse.js** (default score threshold `0.4` — lower = stricter). Keys are lowercased. |
 | `useTimeout` | Manages the recognition timeout: starts on `start` event, pauses on `speechstart`, restarts on `speechend`, fires `_onEnd` on expiry. |
 
-### Component (`src/components/Vocal.js`)
+### Component (`src/components/Vocal.jsx`)
 
 Composes the three hooks above. Three render modes depending on `children`:
 - **function** `(start, stop, isStarted) => element` — full control
 - **React element** — receives `onClick` injected via `cloneElement`
 - **no children** — renders the default `<Icon>` button
 
+All props have default values in the function signature (React 19: `defaultProps` no longer applied to function components). No `propTypes` — removed as deprecated in React 19.
+
 The `__rsInstance` prop (undocumented) injects a custom `SpeechRecognitionWrapper` instance, used exclusively in tests.
 
 ### Testing
 
-`jest/jest.setup.js` globally mocks `SpeechRecognition`, `Permissions`, `MediaDevices`, and `SpeechGrammarList`. The mock exposes a custom `say(sentence)` method that fires the full `speechstart → result/nomatch → speechend` event sequence synchronously — use it to simulate recognition in tests.
+`vitest.setup.js` globally mocks `SpeechRecognition`, `Permissions`, `MediaDevices`, and `SpeechGrammarList`. The mock exposes a custom `say(sentence)` method that fires the full `speechstart → result/nomatch → speechend` event sequence synchronously — use it to simulate recognition in tests.
+
+Vitest globals are enabled (`globals: true`) — `describe`, `it`, `expect`, `vi` available without imports in test files.
 
 ## Commit convention
 

package/README.md

@@ -8,7 +8,7 @@
 ---
 
 [![npm](https://img.shields.io/npm/v/@untemps/react-vocal?style=for-the-badge)](https://www.npmjs.com/package/@untemps/react-vocal)
-[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/untemps/react-vocal/index.yml?style=for-the-badge)](https://github.com/untemps/react-vocal/actions)
+[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/untemps/react-vocal/publish.yml?style=for-the-badge)](https://github.com/untemps/react-vocal/actions)
 [![Codecov](https://img.shields.io/codecov/c/github/untemps/react-vocal?style=for-the-badge)](https://codecov.io/gh/untemps/react-vocal)
 
 ## Links
@@ -35,6 +35,11 @@ For example, browsers on iOS 14.5, the `SpeechGrammar` and `SpeechGrammarList` a
 
 Although the lack of `SpeechGrammar` and `SpeechGrammarList` is handled by the underlaying `@untemps/vocal` library, you need to deal with `Permissions` by yourself.
 
+## Requirements
+
+-   React >= 16.13.1
+-   Node >= 20.19.0
+
 ## Installation
 
 ```bash
@@ -201,21 +206,23 @@ See [fuze.js scoring theory](https://fusejs.io/concepts/scoring-theory.html) for
 
 #### `Vocal` component API
 
-| Props         | Type              | Default | Description                                                                                     |
-| ------------- | ----------------- | ------- | ----------------------------------------------------------------------------------------------- |
-| commands      | object            | null    | Callbacks to be triggered when specified commands are detected by the recognition               |
-| lang          | string            | 'en-US' | Language understood by the recognition [BCP 47 language tag](https://tools.ietf.org/html/bcp47) |
-| grammars      | SpeechGrammarList | null    | Grammars understood by the recognition [JSpeech Grammar Format](https://www.w3.org/TR/jsgf/)    |
-| timeout       | number            | 3000    | Time in ms to wait before discarding the recognition                                            |
-| style         | object            | null    | Styles of the root element if className is not specified                                        |
-| className     | string            | null    | Class of the root element                                                                       |
-| onStart       | func              | null    | Handler called when the recognition starts                                                      |
-| onEnd         | func              | null    | Handler called when the recognition ends                                                        |
-| onSpeechStart | func              | null    | Handler called when the speech starts                                                           |
-| onSpeechEnd   | func              | null    | Handler called when the speech ends                                                             |
-| onResult      | func              | null    | Handler called when a result is recognized                                                      |
-| onError       | func              | null    | Handler called when an error occurs                                                             |
-| onNoMatch     | func              | null    | Handler called when no result can be recognized                                                 |
+| Props         | Type              | Default              | Description                                                                                     |
+| ------------- | ----------------- | -------------------- | ----------------------------------------------------------------------------------------------- |
+| commands      | object            | null                 | Callbacks to be triggered when specified commands are detected by the recognition               |
+| lang          | string            | 'en-US'              | Language understood by the recognition [BCP 47 language tag](https://tools.ietf.org/html/bcp47) |
+| grammars      | SpeechGrammarList | null                 | Grammars understood by the recognition [JSpeech Grammar Format](https://www.w3.org/TR/jsgf/)    |
+| timeout       | number            | 3000                 | Time in ms to wait before discarding the recognition                                            |
+| style         | object            | null                 | Styles of the root element if className is not specified                                        |
+| className     | string            | null                 | Class of the root element                                                                       |
+| ariaLabel     | string            | 'start recognition'  | Accessible label for the default button                                                         |
+| outlineStyle  | string            | '2px solid'          | Focus outline style applied to the default button                                               |
+| onStart       | func              | null                 | Handler called when the recognition starts                                                      |
+| onEnd         | func              | null                 | Handler called when the recognition ends                                                        |
+| onSpeechStart | func              | null                 | Handler called when the speech starts                                                           |
+| onSpeechEnd   | func              | null                 | Handler called when the speech ends                                                             |
+| onResult      | func              | null                 | Handler called when a result is recognized                                                      |
+| onError       | func              | null                 | Handler called when an error occurs                                                             |
+| onNoMatch     | func              | null                 | Handler called when no result can be recognized                                                 |
 
 ### `useVocal` hook
 

package/dev/index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta name="theme-color" content="#000000" />
+		<meta name="description" content="react-vocal" />
+		<title>react-vocal</title>
+		<style>
+			* {
+				font-family: Arial, sans-serif;
+				font-size: 12px;
+			}
+			body {
+				padding: 32px;
+			}
+		</style>
+	</head>
+	<body>
+		<noscript>You need to enable JavaScript to run this app.</noscript>
+		<div id="root"></div>
+		<script type="module" src="/src/index.jsx"></script>
+	</body>
+</html>

package/dev/package.json

@@ -1,14 +1,18 @@
 {
 	"name": "react-vocal-demo",
 	"version": "1.0.0",
-	"main": "index.js",
-	"license": "MIT",
-	"devDependencies": {
-		"@rollup/plugin-replace": "^2.3.3",
-		"rollup-plugin-livereload": "^2.0.0",
-		"rollup-plugin-serve": "^1.0.4"
-	},
+	"private": true,
 	"scripts": {
-		"start": "rollup -c -w"
+		"dev": "vite",
+		"build": "vite build",
+		"preview": "vite preview"
+	},
+	"dependencies": {
+		"react": "^19.2.5",
+		"react-dom": "^19.2.5"
+	},
+	"devDependencies": {
+		"@vitejs/plugin-react": "^6.0.1",
+		"vite": "^8.0.10"
 	}
 }

package/dev/src/{index.js → index.jsx}

@@ -1,6 +1,5 @@
-import 'regenerator-runtime/runtime'
 import React, { useState } from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 
 import Vocal from '../../src'
 
@@ -43,4 +42,4 @@ const App = () => {
 	)
 }
 
-ReactDOM.render(<App />, document.getElementById('root'))
+createRoot(document.getElementById('root')).render(<App />)

package/dev/vite.config.js

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+	plugins: [react()],
+	server: {
+		port: 10001,
+		open: true,
+	},
+})