From a779a93c29fa55c94907078896b5b56a3b30e342 Mon Sep 17 00:00:00 2001 From: Morgan Ney Date: Sat, 20 Jul 2024 19:32:39 -0500 Subject: [PATCH] refactor: remove jsx-runtime from hook and highlighter. (#81) --- docs/examples.md | 72 ++++---------------------- package-lock.json | 27 ++++++++-- package.json | 4 +- packages/tts-react/package.json | 2 +- packages/tts-react/src/highlighter.tsx | 46 ++++++++-------- packages/tts-react/src/hook.tsx | 29 ++++++----- 6 files changed, 77 insertions(+), 103 deletions(-) diff --git a/docs/examples.md b/docs/examples.md index e5f9970..b42f705 100644 --- a/docs/examples.md +++ b/docs/examples.md @@ -1,56 +1,11 @@ # Examples -### UMD - -Using `tts-react` from a CDN: - -```html - - - - tts-react UMD example - - - - - - -
- - - -``` - ### Import Map -Uses [htm](https://github.com/developit/htm) and [import maps](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap): +Using `tts-react` with ESM from a CDN and [import maps](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap): ```html - + @@ -58,28 +13,23 @@ Uses [htm](https://github.com/developit/htm) and [import maps](https://developer - Import Map (no build): tts-react + ESM / CDN / Import Map -
@@ -90,7 +40,7 @@ Uses [htm](https://github.com/developit/htm) and [import maps](https://developer Counting on command: -```tsx +```jsx import { useState, useCallback, useEffect } from 'react' import { useTts } from 'tts-react' diff --git a/package-lock.json b/package-lock.json index 475248c..75ff3a9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,8 +23,6 @@ "@testing-library/user-event": "^14.5.2", "@types/eslint__js": "^8.42.3", "@types/jest": "^29.5.12", - "@types/react": "^18.3.3", - "@types/react-dom": "^18.3.0", "@vitejs/plugin-react": "^4.2.1", "babel-jest": "^29.7.0", "eslint": "^8.57.0", @@ -37,6 +35,8 @@ "jest-environment-jsdom": "^29.7.0", "prettier": "^3.2.5", "ts-jest-resolver": "^2.0.1", + "types-react": "^19.0.0-rc.1", + "types-react-dom": "^19.0.0-rc.1", "typescript": "^5.5.2", "typescript-eslint": "^8.0.0-alpha.39" }, @@ -6386,8 +6386,9 @@ "version": "18.3.0", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz", "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==", - "devOptional": true, "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "@types/react": "*" } @@ -19565,6 +19566,24 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/types-react": { + "version": "19.0.0-rc.1", + "resolved": "https://registry.npmjs.org/types-react/-/types-react-19.0.0-rc.1.tgz", + "integrity": "sha512-RshndUfqTW6K3STLPis8BtAYCGOkMbtvYsi90gmVNDZBXUyUc5juf2PE9LfS/JmOlUIRO8cWTS/1MTnmhjDqyQ==", + "dev": true, + "dependencies": { + "csstype": "^3.0.2" + } + }, + "node_modules/types-react-dom": { + "version": "19.0.0-rc.1", + "resolved": "https://registry.npmjs.org/types-react-dom/-/types-react-dom-19.0.0-rc.1.tgz", + "integrity": "sha512-VSLZJl8VXCD0fAWp7DUTFUDCcZ8DVXOQmjhJMD03odgeFmu14ZQJHCXeETm3BEAhJqfgJaFkLnGkQv88sRx0fQ==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, "node_modules/typescript": { "version": "5.5.2", "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.2.tgz", @@ -20626,7 +20645,7 @@ } }, "packages/tts-react": { - "version": "4.0.0-rc.0", + "version": "4.0.0-rc.1", "license": "MIT", "engines": { "node": ">=18.16.0", diff --git a/package.json b/package.json index 176a165..59c4da9 100644 --- a/package.json +++ b/package.json @@ -37,8 +37,6 @@ "@testing-library/user-event": "^14.5.2", "@types/eslint__js": "^8.42.3", "@types/jest": "^29.5.12", - "@types/react": "^18.3.3", - "@types/react-dom": "^18.3.0", "@vitejs/plugin-react": "^4.2.1", "babel-jest": "^29.7.0", "eslint": "^8.57.0", @@ -51,6 +49,8 @@ "jest-environment-jsdom": "^29.7.0", "prettier": "^3.2.5", "ts-jest-resolver": "^2.0.1", + "types-react": "^19.0.0-rc.1", + "types-react-dom": "^19.0.0-rc.1", "typescript": "^5.5.2", "typescript-eslint": "^8.0.0-alpha.39" }, diff --git a/packages/tts-react/package.json b/packages/tts-react/package.json index 7265a30..52c4df9 100644 --- a/packages/tts-react/package.json +++ b/packages/tts-react/package.json @@ -1,6 +1,6 @@ { "name": "tts-react", - "version": "4.0.0-rc.0", + "version": "4.0.0-rc.1", "description": "React hook and component for converting text to speech using the Web Speech API or Amazon Polly.", "type": "module", "main": "dist/index.js", diff --git a/packages/tts-react/src/highlighter.tsx b/packages/tts-react/src/highlighter.tsx index cca7b9f..fffbf5c 100644 --- a/packages/tts-react/src/highlighter.tsx +++ b/packages/tts-react/src/highlighter.tsx @@ -1,4 +1,4 @@ -import { useMemo } from 'react' +import { useMemo, createElement, Fragment } from 'react' import type { CSSProperties } from 'react' interface HighliterProps { @@ -27,32 +27,32 @@ const Highlighter = ({ text, mark, color, backgroundColor }: HighliterProps) => const parts = textStr.split(regex) if (parts.length > 1) { - return ( - - {parts.map((part, idx) => { - const key = `${part}-${idx}` - - if (!part) { - // Happens when the entire text matches the mark - return null - } - - if (regex.test(part)) { - return ( - - {part} - - ) - } - - return {part} - })} - + return createElement( + 'span', + null, + ...parts.map((part, idx) => { + const key = `${part}-${idx}` + + if (!part) { + // Happens when the entire text matches the mark + return null + } + + if (regex.test(part)) { + return createElement( + 'mark', + { key, style: markStyle, 'data-testid': 'tts-react-mark' }, + part + ) + } + + return createElement('span', { key }, part) + }) ) } } - return <>{text} + return createElement(Fragment, null, text) } export { Highlighter } diff --git a/packages/tts-react/src/hook.tsx b/packages/tts-react/src/hook.tsx index b58e57f..d9c4c90 100644 --- a/packages/tts-react/src/hook.tsx +++ b/packages/tts-react/src/hook.tsx @@ -6,7 +6,9 @@ import { useEffect, Children, cloneElement, - isValidElement + createElement, + isValidElement, + Fragment } from 'react' import type { ReactNode } from 'react' @@ -217,18 +219,21 @@ const parseChildrenRecursively = ({ const after = text.substring(end, text.length) if (found) { - return ( - <> - {prev} - - {after} - + const Highlight = createElement(Highlighter, { + text: found, + mark: stripPunctuation(found), + color: markColor, + backgroundColor: markBackgroundColor + }) + const Highlighted = createElement( + Fragment, + { key: `tts-${start}-${end}` }, + prev, + Highlight, + after ) + + return Highlighted } } }