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

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

package/vite.config.js

@@ -0,0 +1,35 @@
+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'],
+			output: {
+				globals: {
+					react: 'React',
+					'react-dom': 'ReactDOM',
+				},
+			},
+		},
+		sourcemap: true,
+	},
+	test: {
+		globals: true,
+		environment: 'jsdom',
+		setupFiles: ['./vitest.setup.js'],
+		restoreMocks: true,
+		coverage: {
+			provider: 'v8',
+			reporter: ['text', 'lcov'],
+			reportsDirectory: './coverage',
+		},
+	},
+})

package/vitest.setup.js

@@ -0,0 +1,74 @@
+import { vi } from 'vitest'
+import '@testing-library/jest-dom/vitest'
+
+Object.defineProperty(global, 'navigator', {
+	value: { userAgent: 'node.js' },
+	writable: true,
+	configurable: true,
+})
+global.PermissionStatus = vi.fn(function () {
+	return {
+		state: 'granted',
+		addEventListener: vi.fn(),
+	}
+})
+global.Permissions = vi.fn(function () {
+	return {
+		query: vi.fn().mockResolvedValue(new PermissionStatus()),
+	}
+})
+Object.defineProperty(global.navigator, 'permissions', {
+	value: new Permissions(),
+	writable: true,
+	configurable: true,
+})
+global.MediaDevices = vi.fn(function () {
+	return {
+		getUserMedia: vi.fn().mockResolvedValue('foo'),
+	}
+})
+Object.defineProperty(global.navigator, 'mediaDevices', {
+	value: new MediaDevices(),
+	writable: true,
+	configurable: true,
+})
+global.SpeechGrammarList = vi.fn(function () {
+	return {
+		length: 0,
+	}
+})
+global.SpeechRecognition = vi.fn(function () {
+	const handlers = {}
+	return {
+		addEventListener: vi.fn(function (type, callback) {
+			handlers[type] = callback
+		}),
+		removeEventListener: vi.fn(),
+		dispatchEvent: vi.fn(),
+		start: vi.fn(function () {
+			handlers.start?.()
+		}),
+		stop: vi.fn(function () {
+			handlers.end?.()
+		}),
+		abort: vi.fn(function () {
+			handlers.end?.()
+		}),
+		say: vi.fn(function (sentence) {
+			handlers.speechstart?.()
+
+			const resultEvent = new Event('result')
+			resultEvent.resultIndex = 0
+			resultEvent.results = [[{ transcript: sentence }]]
+			handlers.speechend?.()
+			if (sentence) {
+				handlers.result?.(resultEvent)
+			} else {
+				handlers.nomatch?.()
+			}
+		}),
+		error: vi.fn(function (err) {
+			handlers.error?.(err)
+		}),
+	}
+})

package/babel.config.js

@@ -1,12 +0,0 @@
-module.exports = api => ({
-	"presets": [
-		"@babel/preset-env",
-		"@babel/preset-react"
-	],
-	"plugins": [
-		"@babel/plugin-proposal-class-properties",
-		"@babel/plugin-transform-react-jsx",
-		...(api.env('test') ? ["@babel/plugin-transform-runtime"] : [])
-	]
-})
-

package/dev/babel.config.js

@@ -1,4 +0,0 @@
-module.exports = {
-	presets: ['@babel/preset-react'],
-	plugins: ['@babel/plugin-proposal-class-properties', '@babel/plugin-transform-react-jsx'],
-}

package/dev/rollup.config.js

@@ -1,29 +0,0 @@
-import babel from '@rollup/plugin-babel'
-import resolve from '@rollup/plugin-node-resolve'
-import replace from '@rollup/plugin-replace'
-import serve from 'rollup-plugin-serve'
-import livereload from 'rollup-plugin-livereload'
-import commonjs from '@rollup/plugin-commonjs'
-
-export default {
-	input: 'src/index.js',
-	output: {
-		file: 'dist/index.js',
-	},
-	plugins: [
-		replace({
-			'process.env.NODE_ENV': JSON.stringify('development'),
-		}),
-		babel({
-			exclude: 'node_modules/**',
-			babelHelpers: 'bundled',
-		}),
-		resolve(),
-		commonjs(),
-		serve({
-			open: true,
-			contentBase: ['dist', 'public'],
-		}),
-		livereload(),
-	],
-}

package/jest/jest.setup.js

@@ -1,72 +0,0 @@
-import '@testing-library/jest-dom/extend-expect'
-import { toBeInTheDocument, toHaveAttribute, toHaveStyle } from '@testing-library/jest-dom/matchers'
-
-expect.extend({ toBeInTheDocument, toHaveAttribute, toHaveStyle })
-
-Object.defineProperty(global, 'navigator', {
-	value: { userAgent: 'node.js' },
-	writable: true,
-	configurable: true,
-})
-global.PermissionStatus = jest.fn(() => ({
-	state: 'granted',
-	addEventListener: jest.fn(),
-}))
-const status = new PermissionStatus()
-global.Permissions = jest.fn(() => ({
-	query: jest.fn().mockResolvedValue(status),
-}))
-Object.defineProperty(global.navigator, 'permissions', {
-	value: new Permissions(),
-	writable: true,
-	configurable: true,
-})
-global.MediaDevices = jest.fn(() => ({
-	getUserMedia: jest.fn().mockResolvedValue('foo'),
-}))
-Object.defineProperty(global.navigator, 'mediaDevices', {
-	value: new MediaDevices(),
-	writable: true,
-	configurable: true,
-})
-global.SpeechGrammarList = jest.fn(() => ({
-	length: 0,
-}))
-global.SpeechRecognition = jest.fn(() => {
-	const handlers = {}
-	return {
-		addEventListener: jest.fn((type, callback) => {
-			handlers[type] = callback
-		}),
-		removeEventListener: jest.fn(),
-		dispatchEvent: jest.fn(),
-		start: jest.fn(() => {
-			!!handlers.start && handlers.start()
-		}),
-		stop: jest.fn(() => {
-			!!handlers.end && handlers.end()
-		}),
-		abort: jest.fn(() => {
-			!!handlers.end && handlers.end()
-		}),
-		say: jest.fn((sentence) => {
-			!!handlers.speechstart && handlers.speechstart()
-
-			const resultEvent = new Event('result')
-			resultEvent.resultIndex = 0
-			resultEvent.results = [
-				[
-					{
-						transcript: sentence,
-					},
-				],
-			]
-			if (sentence) {
-				!!handlers.result && handlers.result(resultEvent)
-			} else {
-				!!handlers.nomatch && handlers.nomatch()
-			}
-			!!handlers.speechend && handlers.speechend()
-		}),
-	}
-})

package/rollup.config.js

@@ -1,42 +0,0 @@
-import babel from '@rollup/plugin-babel'
-import commonjs from '@rollup/plugin-commonjs'
-import resolve from '@rollup/plugin-node-resolve'
-import filesize from 'rollup-plugin-sizes'
-import { terser } from 'rollup-plugin-terser'
-import visualizer from 'rollup-plugin-visualizer'
-
-const production = process.env.NODE_ENV === 'production'
-const target = process.env.BABEL_ENV
-
-export default {
-	input: 'src/index.js',
-	output: {
-		name: 'react-vocal',
-		file: {
-			cjs: 'dist/index.js',
-			es: 'dist/index.es.js',
-			umd: 'dist/index.umd.js',
-		}[target],
-		format: target,
-		globals: {
-			react: 'React',
-			'react-dom': 'ReactDOM',
-			'prop-types': 'PropTypes',
-		},
-		sourcemap: 'inline',
-	},
-	external: ['react', 'react-dom', 'prop-types', '@babel/plugin-transform-runtime'],
-	plugins: [
-		babel({
-			exclude: 'node_modules/**',
-			babelHelpers: 'bundled',
-		}),
-		resolve(),
-		commonjs(),
-		production && terser(),
-		filesize(),
-		visualizer({
-			sourcemap: true
-		})
-	],
-}