refactor: remove jsx-runtime from hook and highlighter. (#81)

morganney · Jul 21, 2024 · a779a93 · a779a93
1 parent 3316d00
commit a779a93
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 103 deletions.
diff --git a/docs/examples.md b/docs/examples.md
@@ -1,85 +1,35 @@
 # Examples
 
-### UMD
-
-Using `tts-react` from a CDN:
-
-```html
-<!DOCTYPE html>
-<html lang="en-US">
-  <head>
-    <title>tts-react UMD example</title>
-    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
-    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
-    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
-    <script src="https://unpkg.com/tts-react@3.0.0/dist/umd/tts-react.min.js"></script>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="text/babel">
-      const root = ReactDOM.createRoot(document.getElementById('root'))
-      const { TextToSpeech, useTts } = TTSReact
-      const CustomTTS = ({ children }) => {
-        const { play, ttsChildren } = useTts({ children })
-
-        return (
-          <>
-            <button onClick={() => play()}>Play</button>
-            <div>{ttsChildren}</div>
-          </>
-        )
-      }
-
-      root.render(
-        <>
-          <CustomTTS>
-            <p><code>useTts</code> as a UMD module.</p>
-          </CustomTTS>
-          <TextToSpeech markTextAsSpoken>
-            <p><code>TextToSpeech</code> as a UMD module.</p>
-          </TextToSpeech>
-        </>
-      )
-    </script>
-  </body>
-</html>
-```
-
 ### 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
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script type="importmap">
       {
         "imports": {
-          "react": "https://esm.sh/react",
-          "react-dom/": "https://esm.sh/react-dom/",
-          "tts-react": "https://esm.sh/tts-react",
-          "htm/": "https://esm.sh/htm/"
+          "react": "https://esm.sh/react@rc",
+          "react-dom/": "https://esm.sh/react-dom@rc/",
+          "react/jsx-runtime": "https://esm.sh/react@rc/jsx-runtime",
+          "tts-react": "https://esm.sh/tts-react@next"
         }
       }
     </script>
-    <title>Import Map (no build): tts-react</title>
+    <title>ESM / CDN / Import Map</title>
   </head>
   <body>
-    <div id="root"></div>
     <script type="module">
+      import { createElement } from 'react'
       import { createRoot } from 'react-dom/client'
       import { TextToSpeech } from 'tts-react'
-      import { html } from 'htm/react'
 
-      createRoot(document.getElementById('root')).render(
-        html`
-          <${TextToSpeech} markTextAsSpoken>
-            <p>Hello from tts-react.</p>
-          </${TextToSpeech}>
-        `
+      createRoot(document.body).render(
+        createElement(TextToSpeech, { markTextAsSpoken: true }, 'Hello from tts-react.')
       )
     </script>
   </body>
@@ -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
diff --git 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
@@ -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
@@ -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 (
-        <span>
-          {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 (
-                <mark key={key} style={markStyle} data-testid="tts-react-mark">
-                  {part}
-                </mark>
-              )
-            }
-
-            return <span key={key}>{part}</span>
-          })}
-        </span>
+      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
@@ -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}
-              <Highlighter
-                text={found}
-                mark={stripPunctuation(found)}
-                color={markColor}
-                backgroundColor={markBackgroundColor}
-              />
-              {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
         }
       }
     }