build: simplify with babel-dual-package. (#47)

.github/workflows/ci.yml

@@ -32,7 +32,7 @@ jobs:
       - name: Test
         run: npm test
       - name: Report Coverage
-        uses: codecov/[email protected].0
+        uses: codecov/[email protected].4
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
       - name: Pack

babel.config.json

@@ -21,19 +21,7 @@
         }]
       ]
     },
-    "cjs": {
-      "presets": [
-        ["@babel/preset-env", {
-          "modules": "commonjs"
-        }]
-      ],
-      "plugins": [
-        ["react-remove-properties", {
-          "properties": ["data-testid"]
-        }]
-      ]
-    },
-    "esm": {
+    "dual": {
       "presets": [
         ["@babel/preset-env", {
           "modules": false

codecov.yml

@@ -4,7 +4,11 @@ coverage:
       default:
         target: 80%
         threshold: 0
+        paths:
+          - "packages/tts-react/src"
     patch:
       default:
         target: 81%
         threshold: 0.5
+        paths:
+          - "packages/tts-react/src"

package.json

@@ -35,9 +35,10 @@
     "@types/react-dom": "^17.0.17",
     "@typescript-eslint/eslint-plugin": "^5.35.1",
     "@typescript-eslint/parser": "^5.35.1",
+    "babel-dual-package": "^1.0.0-alpha.2",
     "babel-jest": "^29.5.0",
     "babel-plugin-react-remove-properties": "^0.3.0",
-    "codecov": "^3.8.3",
+    "codecov": "^4.0.0-0",
     "eslint": "^8.23.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-react": "^7.31.1",
@@ -48,7 +49,6 @@
     "microbundle": "^0.15.1",
     "prettier": "^2.7.1",
     "ts-jest-resolver": "^2.0.1",
-    "ts-node": "^10.9.1",
     "typescript": "^5.0.4"
   }
 }

packages/tts-react/__tests__/icons.ts

@@ -1,15 +1,15 @@
 import { describe } from '@jest/globals'
 
-import { icons } from '../src/icons.js'
+import { icons, Sizes } from '../src/icons.js'
 
 describe('icons', () => {
   it('is a map of functions returning svg strings', () => {
-    expect(icons.play({ size: undefined })).toContain('svg')
-    expect(icons.stop({ size: undefined })).toContain('svg')
-    expect(icons.pause({ size: undefined })).toContain('svg')
-    expect(icons.replay({ size: undefined })).toContain('svg')
-    expect(icons.volumeDown({ size: undefined })).toContain('svg')
-    expect(icons.volumeUp({ size: undefined })).toContain('svg')
-    expect(icons.volumeOff({ size: undefined })).toContain('svg')
+    expect(icons.play(Sizes.MEDIUM)).toContain('<svg')
+    expect(icons.stop(Sizes.MEDIUM)).toContain('<svg')
+    expect(icons.pause(Sizes.MEDIUM)).toContain('<svg')
+    expect(icons.replay(Sizes.MEDIUM)).toContain('<svg')
+    expect(icons.volumeDown(Sizes.MEDIUM)).toContain('<svg')
+    expect(icons.volumeUp(Sizes.MEDIUM)).toContain('<svg')
+    expect(icons.volumeOff(Sizes.MEDIUM)).toContain('<svg')
   })
 })

packages/tts-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tts-react",
-  "version": "3.0.0",
+  "version": "3.0.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",
@@ -12,13 +12,13 @@
         "default": "./dist/index.js"
       },
       "require": {
-        "types": "./dist/cjs/index.d.ts",
-        "default": "./dist/cjs/index.js"
+        "types": "./dist/cjs/index.d.cts",
+        "default": "./dist/cjs/index.cjs"
       }
     },
     "./*": {
       "import": "./dist/*.js",
-      "require": "./dist/cjs/*.js"
+      "require": "./dist/cjs/*.cjs"
     },
     "./package.json": "./package.json"
   },
@@ -27,12 +27,9 @@
   "scripts": {
     "check-types": "tsc --noEmit",
     "build:types": "tsc --emitDeclarationOnly",
-    "build:esm": "BABEL_ENV=esm babel --root-mode upward src --out-dir dist --extensions '.ts,.tsx'",
-    "build:cjs": "BABEL_ENV=cjs babel --root-mode upward src --out-dir dist/cjs --extensions '.ts,.tsx'",
+    "build:dual": "BABEL_ENV=dual babel-dual-package --root-mode upward --out-dir dist --extensions .ts,.tsx src",
     "build:umd": "BABEL_ENV=umd microbundle -i src/index.ts -o dist/umd/tts-react.min.js -f umd --no-pkg-main --name='TTSReact' --globals react='React' --jsx='' --jsxFragment='' --tsconfig='./tsconfig.umd.json'",
-    "build:base": "npm run build:types && npm run build:esm",
-    "build": "npm run build:base && npm run build:cjs && npm run build:umd && npm run dcts",
-    "dcts": "node --experimental-loader ts-node/esm dcts.ts",
+    "build": "npm run build:types && npm run build:dual && npm run build:umd",
     "prepack": "npm run build"
   },
   "repository": {

packages/tts-react/src/component.tsx

@@ -108,7 +108,8 @@ const content = (): CSSProperties => {
  * `useTts` is a React hook for converting text to speech using
  * the `SpeechSynthesis` and `SpeechSynthesisUtterance` Browser API's.
  * Optionally, you can fallback to using the `HTMLAudioElement` API
- * when setting the `fetchAudioData` prop, for example to use Amazon Polly.
+ * when setting the `fetchAudioData` prop, for example to use Amazon Polly,
+ * or MS Azure Cognitive Speech Services.
  *
  * The `TextToSpeech` component is an implementation of `useTts` that provides
  * controls for playing, pausing/stopping, and replaying the spoken text.

packages/tts-react/src/control.tsx

@@ -57,7 +57,7 @@ const Control = ({
 }: ControlProps) => {
   const styleDataId = 'tts-react-controls'
   const svg = useMemo(() => {
-    return icons[type]({ size })
+    return icons[type](size)
   }, [type, size])
   const btnStyle = useMemo(() => button({ size, align, type }), [size, align, type])
 

packages/tts-react/src/icons.ts

@@ -4,8 +4,9 @@ enum Sizes {
   LARGE = 'large'
 }
 
+type Size = `${Sizes}`
 interface SvgProps {
-  size?: `${Sizes}`
+  size: Size
 }
 
 const iconSizes = {
@@ -14,7 +15,7 @@ const iconSizes = {
   large: 32
 }
 const icons = {
-  play({ size = Sizes.MEDIUM }: SvgProps) {
+  play(size: Size) {
     return `
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -32,7 +33,7 @@ const icons = {
       </svg>
     `
   },
-  pause({ size = Sizes.MEDIUM }: SvgProps) {
+  pause(size: Size) {
     return `
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -50,7 +51,7 @@ const icons = {
       </svg>
     `
   },
-  stop({ size = Sizes.MEDIUM }: SvgProps) {
+  stop(size: Size) {
     return `
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -68,7 +69,7 @@ const icons = {
       </svg>
     `
   },
-  replay({ size = Sizes.MEDIUM }: SvgProps) {
+  replay(size: Size) {
     return `
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -86,7 +87,7 @@ const icons = {
       </svg>
     `
   },
-  volumeDown({ size = Sizes.MEDIUM }: SvgProps) {
+  volumeDown(size: Size) {
     return `
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -104,7 +105,7 @@ const icons = {
       </svg>
     `
   },
-  volumeOff({ size = Sizes.MEDIUM }: SvgProps) {
+  volumeOff(size: Size) {
     return `
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -122,7 +123,7 @@ const icons = {
       </svg>
     `
   },
-  volumeUp({ size = Sizes.MEDIUM }: SvgProps) {
+  volumeUp(size: Size) {
     return `
       <svg
         xmlns="http://www.w3.org/2000/svg"