@untemps/react-vocal 2.0.0-beta.4 → 2.0.0-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@untemps/react-vocal",
-	"version": "2.0.0-beta.4",
+	"version": "2.0.0-beta.5",
 	"author": "Vincent Le Badezet <v.lebadezet@untemps.net>",
 	"repository": "git@github.com:untemps/react-vocal.git",
 	"license": "MIT",
@@ -27,6 +27,7 @@
 	},
 	"devDependencies": {
 		"@commitlint/cli": "^20.5.3",
+		"fuse.js": "^7.3.0",
 		"@commitlint/config-conventional": "^20.5.3",
 		"@semantic-release/changelog": "^6.0.3",
 		"@semantic-release/git": "^10.0.1",
@@ -47,12 +48,17 @@
 		"vitest": "^4.1.5"
 	},
 	"peerDependencies": {
+		"fuse.js": ">=6.0.0",
 		"react": ">=16.13.1",
 		"react-dom": ">=16.13.1"
 	},
+	"peerDependenciesMeta": {
+		"fuse.js": {
+			"optional": true
+		}
+	},
 	"dependencies": {
-		"@untemps/vocal": "^1.3.0",
-		"fuse.js": "^7.3.0"
+		"@untemps/vocal": "^1.3.0"
 	},
 	"release": {
 		"branches": [

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

@@ -1,7 +1,17 @@
-import { renderHook } from '@testing-library/react'
+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())
@@ -41,13 +51,15 @@ describe('useCommands', () => {
 			['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', (command, input, expected) => {
+		])('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)
 		})
 	})
@@ -86,4 +98,18 @@ describe('useCommands', () => {
 		// 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/useCommands.js

@@ -1,5 +1,4 @@
-import { useMemo } from 'react'
-import Fuse from 'fuse.js'
+import { useEffect, useMemo, useRef } from 'react'
 
 const useCommands = (commands, precision = 0.4) => {
 	const normalized = useMemo(
@@ -16,11 +15,28 @@ const useCommands = (commands, precision = 0.4) => {
 	// Single-word keys use exact case-insensitive lookup — simpler and no false positives.
 	const hasPhraseKeys = useMemo(() => keys.some((k) => k.includes(' ')), [keys])
 
-	// precision only applies to phrase keys — single-word keys always use exact lookup
-	const fuse = useMemo(
-		() => (hasPhraseKeys ? new Fuse(keys, { includeScore: true, ignoreLocation: true }) : null),
-		[hasPhraseKeys, 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 = (input) => {
 		if (!keys.length) return null
@@ -35,10 +51,20 @@ const useCommands = (commands, precision = 0.4) => {
 			return null
 		}
 
-		const result = fuse.search(input).filter((r) => r.score < precision)
-		if (result?.length) {
-			const key = result[0].item.toLowerCase()
-			return normalized[key]?.(input)
+		const fuse = fuseRef.current
+		if (fuse) {
+			const result = fuse.search(input).filter((r) => r.score < precision)
+			if (result?.length) {
+				const key = result[0].item.toLowerCase()
+				return normalized[key]?.(input)
+			}
+		} 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 = input.toLowerCase()
+			const match = keys.find((k) => lInput.includes(k) || k.includes(lInput))
+			if (match) return normalized[match]?.(input)
 		}
 		return null
 	}

package/vite.config.js

@@ -11,11 +11,12 @@ export default defineConfig({
 			fileName: (format) => ({ es: 'index.es.js', umd: 'index.umd.js', cjs: 'index.js' })[format],
 		},
 		rollupOptions: {
-			external: ['react', 'react-dom'],
+			external: ['react', 'react-dom', 'fuse.js'],
 			output: {
 				globals: {
 					react: 'React',
 					'react-dom': 'ReactDOM',
+					'fuse.js': 'Fuse',
 				},
 			},
 		},