fix: export useCountdown types fixes #193

This is fix for the issue where types for the hook are referenced by the shared package, which is not exported. The solve the problem now we copy the types from the shared package and add them to each package when bundling the code. This is not the best solution but it is the simplest. Once we have a good way to bundle types from monorepo this can be changed.

Author: vydimitrov

packages/mobile/package.json

@@ -1,15 +1,14 @@
 {
   "name": "react-native-countdown-circle-timer",
-  "version": "3.0.8",
+  "version": "3.0.9",
   "description": "Lightweight React Native countdown timer component with color and progress animation based on SVG",
   "main": "./lib/index.js",
   "source": "./src/index.ts",
   "files": [
     "lib"
   ],
   "scripts": {
-    "ts-declaration": "tsc --declaration --emitDeclarationOnly --outDir lib",
-    "build": "pnpm ts-declaration && node scripts/build.js",
+    "build": "node scripts/build.js",
     "dev:push": "pnpm run build && yalc push",
     "test": "jest --collectCoverage",
     "test:watch": "jest --watch",

packages/mobile/scripts/build.js

@@ -1,3 +1,4 @@
+const fs = require('fs')
 const esbuild = require('esbuild')
 const pkg = require('../package.json')
 
@@ -8,8 +9,16 @@ const commonProps = {
   external: ['react', 'react-native', 'react-native-svg'],
 }
 
-esbuild.build({
-  ...commonProps,
-  outfile: pkg.main,
-  format: 'cjs',
-})
+esbuild
+  .build({
+    ...commonProps,
+    outfile: pkg.main,
+    format: 'cjs',
+  })
+  .then(() => {
+    fs.copyFile('../shared/src/types.ts', './lib/index.d.ts', (err) => {
+      if (err) {
+        throw err
+      }
+    })
+  })

packages/mobile/src/CountdownCircleTimer.tsx

@@ -3,7 +3,7 @@ import { View } from 'react-native'
 import type { StyleProp, ViewStyle } from 'react-native'
 import Svg, { Path } from 'react-native-svg'
 import { useCountdown, getWrapperStyle, timeStyle } from '@countdown/shared'
-import type { Props } from './types'
+import type { Props } from '@countdown/shared'
 
 const CountdownCircleTimer = (props: Props) => {
   const { children, duration, strokeLinecap, trailColor, trailStrokeWidth } =

packages/mobile/src/index.ts

@@ -1,2 +1,2 @@
 export { CountdownCircleTimer, useCountdown } from './CountdownCircleTimer'
-export type { Props } from './types'
+export type { Props } from '@countdown/shared'

packages/mobile/src/types.ts

@@ -1,8 +1,11 @@
+/// <reference types="react" />
+
 type ColorHex = `#${string}`
 type ColorRGBA = `rgba(${string})`
 type ColorURL = `url(#${string})`
-export type ColorRGB = `rgb(${string})`
-export type ColorFormat = ColorHex | ColorRGB | ColorRGBA | ColorURL
+export declare type ColorRGB = `rgb(${string})`
+export declare type ColorFormat = ColorHex | ColorRGB | ColorRGBA | ColorURL
+
 type TimeProps = {
   remainingTime: number
   elapsedTime: number
@@ -32,7 +35,7 @@ type OnComplete = {
   newInitialRemainingTime?: number
 }
 
-export type Props = {
+export declare type Props = {
   /** Countdown duration in seconds */
   duration: number
   /** Set the initial remaining time if it is different than the duration */
@@ -62,3 +65,20 @@ export type Props = {
   /** On remaining time update event handler */
   onUpdate?: (remainingTime: number) => void
 } & (SingleColor | MultipleColors)
+
+export declare const useCountdown: (props: Props) => {
+  elapsedTime: number
+  path: string
+  pathLength: number
+  remainingTime: number
+  rotation: 'clockwise' | 'counterclockwise'
+  size: number
+  stroke: ColorFormat
+  strokeDashoffset: number
+  strokeWidth: number
+}
+
+export declare const CountdownCircleTimer: {
+  (props: Props): JSX.Element
+  displayName: 'CountdownCircleTimer'
+}

packages/shared/src/types.ts

@@ -1,6 +1,6 @@
 {
   "name": "react-countdown-circle-timer",
-  "version": "3.0.8",
+  "version": "3.0.9",
   "description": "Lightweight React countdown timer component with color and progress animation based on SVG",
   "main": "./lib/index.js",
   "module": "./lib/index.module.js",
@@ -10,8 +10,7 @@
   ],
   "scripts": {
     "start": "node scripts/serve.js",
-    "ts-declaration": "tsc --declaration --emitDeclarationOnly --outDir lib",
-    "build": "pnpm ts-declaration && node scripts/build.js",
+    "build": "node scripts/build.js",
     "dev:push": "pnpm run build && yalc push",
     "test": "jest --collectCoverage",
     "test:watch": "jest --watch",

packages/web/package.json

@@ -1,3 +1,4 @@
+const fs = require('fs')
 const esbuild = require('esbuild')
 const pkg = require('../package.json')
 
@@ -14,8 +15,16 @@ esbuild.build({
   format: 'cjs',
 })
 
-esbuild.build({
-  ...commonProps,
-  outfile: pkg.module,
-  format: 'esm',
-})
+esbuild
+  .build({
+    ...commonProps,
+    outfile: pkg.module,
+    format: 'esm',
+  })
+  .then(() => {
+    fs.copyFile('../shared/src/types.ts', './lib/index.d.ts', (err) => {
+      if (err) {
+        throw err
+      }
+    })
+  })

packages/web/scripts/build.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { useCountdown, getWrapperStyle, timeStyle } from '@countdown/shared'
-import type { Props } from './types'
+import type { Props } from '@countdown/shared'
 
 const CountdownCircleTimer = (props: Props) => {
   const { children, strokeLinecap, trailColor, trailStrokeWidth } = props

packages/web/src/CountdownCircleTimer.tsx

@@ -1,2 +1,2 @@
 export { CountdownCircleTimer, useCountdown } from './CountdownCircleTimer'
-export type { Props } from './types'
+export type { Props } from '@countdown/shared'