types: add UseReactCompareSliderRefReturn to `ReactCompareSliderPro…

…ps` type
nerdyman · Sep 23, 2023 · efaeee2 · efaeee2
1 parent 1515584
commit efaeee2
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 15 deletions.
diff --git a/lib/package.json b/lib/package.json
@@ -48,7 +48,7 @@
     "dev": "concurrently -k -s first -n \"tsup,ts\" -c \"blue,cyan\" \"tsup --watch\" \"pnpm run check:types --watch --preserveWatchOutput\"",
     "start": "pnpm run dev",
     "build": "pnpm run check:types && NODE_ENV=production tsup",
-    "release": "pnpm run -w lint && pnpm run -w test && pnpm run build && pnpm run check && np --no-tests --no-cleanup",
+    "release": "cp ../README.md ../LICENSE . && pnpm run -w lint && pnpm run -w test && pnpm run build && pnpm run check && np --no-tests --no-cleanup",
     "check": "concurrently -n \"package,types\" -c \"blue,magenta\" \"pnpm run check:package\" \"pnpm run check:types\"",
     "check:package": "attw -P . --ignore-rules cjs-resolves-to-esm",
     "check:types": "tsc --noEmit"

diff --git a/lib/src/ReactCompareSlider.tsx b/lib/src/ReactCompareSlider.tsx
@@ -6,7 +6,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import type { CSSProperties, ForwardRefExoticComponent, ReactElement, RefAttributes } from 'react';
+import type { CSSProperties, ReactElement } from 'react';
 
 import { ContainerClip, ContainerHandle } from './Container';
 import { ReactCompareSliderHandle } from './ReactCompareSliderHandle';
@@ -31,9 +31,10 @@ const EVENT_PASSIVE_PARAMS = { capture: false, passive: true };
 const EVENT_CAPTURE_PARAMS = { capture: true, passive: false };
 
 /** Root Comparison slider. */
-export const ReactCompareSlider: ForwardRefExoticComponent<
-  ReactCompareSliderDetailedProps & RefAttributes<UseReactCompareSliderRefReturn>
-> = forwardRef(
+export const ReactCompareSlider = forwardRef<
+  UseReactCompareSliderRefReturn,
+  ReactCompareSliderDetailedProps
+>(
   (
     {
       disabled = false,
@@ -298,9 +299,9 @@ export const ReactCompareSlider: ForwardRefExoticComponent<
 
     useImperativeHandle(
       ref,
-      (): UseReactCompareSliderRefReturn => {
+      () => {
         return {
-          rootContainer: rootContainerRef.current as HTMLDivElement,
+          rootContainer: rootContainerRef.current,
           setPosition(nextPosition): void {
             const { width, height } = (
               rootContainerRef.current as HTMLDivElement

diff --git a/lib/src/types.ts b/lib/src/types.ts
@@ -1,4 +1,4 @@
-import type { HtmlHTMLAttributes, ReactNode } from 'react';
+import type { HtmlHTMLAttributes, ReactNode, RefAttributes } from 'react';
 
 /** Slider position property. */
 export type ReactCompareSliderPropPosition = number;
@@ -19,8 +19,8 @@ export interface ReactCompareSliderCommonProps {
   transition?: string;
 }
 
-/** Comparison slider properties. */
-export interface ReactCompareSliderProps extends Partial<ReactCompareSliderCommonProps> {
+/** Slider component props *without* ref return props. */
+export interface ReactCompareSliderRootProps extends Partial<ReactCompareSliderCommonProps> {
   /** Padding in pixels to limit the slideable bounds on the X-axis (landscape) or Y-axis (portrait). */
   boundsPadding?: number;
   /** Whether the slider should follow the pointer on hover. */
@@ -39,10 +39,6 @@ export interface ReactCompareSliderProps extends Partial<ReactCompareSliderCommo
   onPositionChange?: (position: ReactCompareSliderPropPosition) => void;
 }
 
-/** `ReactCompareSliderProps` and all valid `div` element props. */
-export type ReactCompareSliderDetailedProps = ReactCompareSliderProps &
-  HtmlHTMLAttributes<HTMLDivElement>;
-
 /** Properties returned by the `useReactCompareSliderRef` hook. */
 export type UseReactCompareSliderRefReturn = {
   /**
@@ -58,3 +54,11 @@ export type UseReactCompareSliderRefReturn = {
    */
   setPosition: (position: ReactCompareSliderPropPosition) => void;
 };
+
+/** Slider component props *with* ref return props. */
+export type ReactCompareSliderProps = ReactCompareSliderRootProps &
+  RefAttributes<UseReactCompareSliderRefReturn>;
+
+/** `ReactCompareSliderProps` and all valid `div` element props. */
+export type ReactCompareSliderDetailedProps = ReactCompareSliderProps &
+  HtmlHTMLAttributes<HTMLDivElement>;
diff --git a/lib/tsup.config.ts b/lib/tsup.config.ts
@@ -7,7 +7,7 @@ import { defineConfig } from 'tsup';
 const target = resolveToEsbuildTarget(browserslist()) as Options['target'];
 
 export default defineConfig((options) => ({
-  clean: true,
+  clean: !options.watch,
   dts: true,
   entry: ['src/index.ts'],
   format: ['esm'],