Skip to content

Commit a779a93

Browse files
morganneymorganney
authored
refactor: remove jsx-runtime from hook and highlighter. (#81)
1 parent 3316d00 commit a779a93

File tree

6 files changed

+77
-103
lines changed

6 files changed

+77
-103
lines changed

‎docs/examples.md‎

Lines changed: 11 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,35 @@
11
# Examples
22

3-
### UMD
4-
5-
Using `tts-react` from a CDN:
6-
7-
```html
8-
<!DOCTYPE html>
9-
<html lang="en-US">
10-
<head>
11-
<title>tts-react UMD example</title>
12-
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
13-
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
14-
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
15-
<script src="https://unpkg.com/[email protected]/dist/umd/tts-react.min.js"></script>
16-
</head>
17-
<body>
18-
<div id="root"></div>
19-
<script type="text/babel">
20-
const root = ReactDOM.createRoot(document.getElementById('root'))
21-
const { TextToSpeech, useTts } = TTSReact
22-
const CustomTTS = ({ children }) => {
23-
const { play, ttsChildren } = useTts({ children })
24-
25-
return (
26-
<>
27-
<button onClick={() => play()}>Play</button>
28-
<div>{ttsChildren}</div>
29-
</>
30-
)
31-
}
32-
33-
root.render(
34-
<>
35-
<CustomTTS>
36-
<p><code>useTts</code> as a UMD module.</p>
37-
</CustomTTS>
38-
<TextToSpeech markTextAsSpoken>
39-
<p><code>TextToSpeech</code> as a UMD module.</p>
40-
</TextToSpeech>
41-
</>
42-
)
43-
</script>
44-
</body>
45-
</html>
46-
```
47-
483
### Import Map
494

50-
Uses [htm](https://github.com/developit/htm) and [import maps](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap):
5+
Using `tts-react` with ESM from a CDN and [import maps](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap):
516

527
```html
53-
<!DOCTYPE html>
8+
<!doctype html>
549
<html lang="en">
5510
<head>
5611
<meta charset="UTF-8" />
5712
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
5813
<script type="importmap">
5914
{
6015
"imports": {
61-
"react": "https://esm.sh/react",
62-
"react-dom/": "https://esm.sh/react-dom/",
63-
"tts-react": "https://esm.sh/tts-react",
64-
"htm/": "https://esm.sh/htm/"
16+
"react": "https://esm.sh/react@rc",
17+
"react-dom/": "https://esm.sh/react-dom@rc/",
18+
"react/jsx-runtime": "https://esm.sh/react@rc/jsx-runtime",
19+
"tts-react": "https://esm.sh/tts-react@next"
6520
}
6621
}
6722
</script>
68-
<title>Import Map (no build): tts-react</title>
23+
<title>ESM / CDN / Import Map</title>
6924
</head>
7025
<body>
71-
<div id="root"></div>
7226
<script type="module">
27+
import { createElement } from 'react'
7328
import { createRoot } from 'react-dom/client'
7429
import { TextToSpeech } from 'tts-react'
75-
import { html } from 'htm/react'
7630
77-
createRoot(document.getElementById('root')).render(
78-
html`
79-
<${TextToSpeech} markTextAsSpoken>
80-
<p>Hello from tts-react.</p>
81-
</${TextToSpeech}>
82-
`
31+
createRoot(document.body).render(
32+
createElement(TextToSpeech, { markTextAsSpoken: true }, 'Hello from tts-react.')
8333
)
8434
</script>
8535
</body>
@@ -90,7 +40,7 @@ Uses [htm](https://github.com/developit/htm) and [import maps](https://developer
9040

9141
Counting on command:
9242

93-
```tsx
43+
```jsx
9444
import { useState, useCallback, useEffect } from 'react'
9545
import { useTts } from 'tts-react'
9646

‎package-lock.json‎

Lines changed: 23 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,6 @@
3737
"@testing-library/user-event": "^14.5.2",
3838
"@types/eslint__js": "^8.42.3",
3939
"@types/jest": "^29.5.12",
40-
"@types/react": "^18.3.3",
41-
"@types/react-dom": "^18.3.0",
4240
"@vitejs/plugin-react": "^4.2.1",
4341
"babel-jest": "^29.7.0",
4442
"eslint": "^8.57.0",
@@ -51,6 +49,8 @@
5149
"jest-environment-jsdom": "^29.7.0",
5250
"prettier": "^3.2.5",
5351
"ts-jest-resolver": "^2.0.1",
52+
"types-react": "^19.0.0-rc.1",
53+
"types-react-dom": "^19.0.0-rc.1",
5454
"typescript": "^5.5.2",
5555
"typescript-eslint": "^8.0.0-alpha.39"
5656
},

‎packages/tts-react/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "tts-react",
3-
"version": "4.0.0-rc.0",
3+
"version": "4.0.0-rc.1",
44
"description": "React hook and component for converting text to speech using the Web Speech API or Amazon Polly.",
55
"type": "module",
66
"main": "dist/index.js",

‎packages/tts-react/src/highlighter.tsx‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useMemo } from 'react'
1+
import { useMemo, createElement, Fragment } from 'react'
22
import type { CSSProperties } from 'react'
33

44
interface HighliterProps {
@@ -27,32 +27,32 @@ const Highlighter = ({ text, mark, color, backgroundColor }: HighliterProps) =>
2727
const parts = textStr.split(regex)
2828

2929
if (parts.length > 1) {
30-
return (
31-
<span>
32-
{parts.map((part, idx) => {
33-
const key = `${part}-${idx}`
34-
35-
if (!part) {
36-
// Happens when the entire text matches the mark
37-
return null
38-
}
39-
40-
if (regex.test(part)) {
41-
return (
42-
<mark key={key} style={markStyle} data-testid="tts-react-mark">
43-
{part}
44-
</mark>
45-
)
46-
}
47-
48-
return <span key={key}>{part}</span>
49-
})}
50-
</span>
30+
return createElement(
31+
'span',
32+
null,
33+
...parts.map((part, idx) => {
34+
const key = `${part}-${idx}`
35+
36+
if (!part) {
37+
// Happens when the entire text matches the mark
38+
return null
39+
}
40+
41+
if (regex.test(part)) {
42+
return createElement(
43+
'mark',
44+
{ key, style: markStyle, 'data-testid': 'tts-react-mark' },
45+
part
46+
)
47+
}
48+
49+
return createElement('span', { key }, part)
50+
})
5151
)
5252
}
5353
}
5454

55-
return <>{text}</>
55+
return createElement(Fragment, null, text)
5656
}
5757

5858
export { Highlighter }

‎packages/tts-react/src/hook.tsx‎

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,9 @@ import {
66
useEffect,
77
Children,
88
cloneElement,
9-
isValidElement
9+
createElement,
10+
isValidElement,
11+
Fragment
1012
} from 'react'
1113
import type { ReactNode } from 'react'
1214

@@ -217,18 +219,21 @@ const parseChildrenRecursively = ({
217219
const after = text.substring(end, text.length)
218220

219221
if (found) {
220-
return (
221-
<>
222-
{prev}
223-
<Highlighter
224-
text={found}
225-
mark={stripPunctuation(found)}
226-
color={markColor}
227-
backgroundColor={markBackgroundColor}
228-
/>
229-
{after}
230-
</>
222+
const Highlight = createElement(Highlighter, {
223+
text: found,
224+
mark: stripPunctuation(found),
225+
color: markColor,
226+
backgroundColor: markBackgroundColor
227+
})
228+
const Highlighted = createElement(
229+
Fragment,
230+
{ key: `tts-${start}-${end}` },
231+
prev,
232+
Highlight,
233+
after
231234
)
235+
236+
return Highlighted
232237
}
233238
}
234239
}

0 commit comments

Comments
 (0)