fix: update project to React19, Tailwind 4x and DasisyUI 5.x

.eslintrc

@@ -15,6 +15,7 @@
     }
   },
   "rules": {
+    "@typescript-eslint/no-throw-literal": "off",
     "no-extra-label": "warn",
     "no-iterator": "warn",
     "no-label-var": "warn",

demo/.postcssrc

@@ -1,5 +1,5 @@
 {
   "plugins": {
-    "tailwindcss": {}
+    "@tailwindcss/postcss": {}
   }
-}
+}

demo/components/IfWithPromise.tsx

@@ -24,7 +24,11 @@ const IfWithPromise: React.FC<Props> = ({ resolutionReturnValue, rejectionReturn
   const createPromise = (shouldResolve: boolean) => {
     const newPromise: ExtendedPromise = new Promise((resolve, reject) => {
       setTimeout(() => {
-        shouldResolve ? resolve(resolutionReturnValue) : reject(rejectionReturnValue);
+        if (shouldResolve) {
+          resolve(resolutionReturnValue);
+        } else {
+          reject(rejectionReturnValue);
+        }
       }, delay * 1000);
     });
     newPromise._id = currentPromiseId.current;

demo/index.css

@@ -1,11 +1,24 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+@plugin "daisyui";
 
-body,
-html {
-  margin: 0;
-  padding: 0;
+@plugin "daisyui/theme" {
+  name: 'dark';
+  default: true;
+  --color-primary: '#5865f2';
+  --color-secondary: '#ed4245';
+  --color-primary-content: '#000000';
+  --color-accent: '#57f287';
+  --color-accent-content: : '#000000';
+  --color-neutral: '#1f2123';
+  --color-neutral-content: '#ffffff';
+  --color-base-100: '#2c2f33';
+  --color-base-200: '#212123';
+  --color-base-300: '#0e0f10';
+  --color-base-content: '#ffffff';
+  --color-info: '#2094f3';
+  --color-success: '#009485';
+  --color-warning: '#ff9900';
+  --color-error: '#ff5724';
 }
 
 * {
@@ -14,6 +27,8 @@ html {
 
 html,
 body {
+  margin: 0;
+  padding: 0;
   display: grid;
   place-content: center;
   height: 100vh;

demo/index.tsx

@@ -1,9 +1,11 @@
+import './index.css';
+
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
+
 import IfThen from './components/IfThen';
 import IfThenElse from './components/IfThenElse';
 import IfWithPromise from './components/IfWithPromise';
-import './index.css';
 
 const App = () => {
   return (
@@ -38,4 +40,10 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.getElementById('root'));
+const rootElement = document.getElementById('root');
+if (rootElement) {
+  const root = createRoot(rootElement);
+  root.render(<App />);
+} else {
+  console.error('Element with id "root" not found.');
+}

demo/package.json

@@ -10,11 +10,12 @@
     "build": "parcel build index.html"
   },
   "devDependencies": {
-    "autoprefixer": "^10.4.21",
-    "daisyui": "^4.12.24",
+    "@parcel/transformer-postcss": "^2.15.2",
+    "@tailwindcss/postcss": "^4.1.7",
+    "daisyui": "^5.0.37",
     "parcel": "^2.15.2",
     "postcss": "^8.5.3",
-    "tailwindcss": "^3.4.17",
-    "typescript": "^5.5.2"
+    "tailwindcss": "^4.1.7",
+    "typescript": "^5.8.3"
   }
 }

package.json

@@ -47,34 +47,37 @@
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
+    "@types/entities": "^2.0.2",
     "@types/node": "^22.15.21",
-    "@types/react": "^18.3.22",
-    "@types/react-dom": "^18.3.7",
-    "@typescript-eslint/eslint-plugin": "^7.13.1",
-    "@typescript-eslint/parser": "^7.13.1",
+    "@types/react": "^19.1.5",
+    "@types/react-dom": "^19.1.5",
+    "@typescript-eslint/eslint-plugin": "^8.32.1",
+    "@typescript-eslint/parser": "^8.32.1",
+    "ansi-regex": "^6.1.0",
     "cz-conventional-changelog": "^3.3.0",
     "dts-cli": "^2.0.5",
-    "eslint": "^8.57.1",
+    "eslint": "^9.27.0",
     "eslint-config-prettier": "^10.1.5",
-    "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-prettier": "^5.4.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
+    "jest": "^29.7.0",
     "lint-staged": "^16.0.0",
     "prettier": "^3.5.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "ts-jest": "^29.3.4",
-    "typedoc": "^0.26.1",
-    "typescript": "^5.5.2"
+    "typedoc": "^0.28.4",
+    "typedoc-plugin-markdown": "^4.6.3",
+    "typescript": "^5.8.3"
   },
   "engines": {
     "node": ">=12"
   },
   "peerDependencies": {
-    "react": "^16.x || ^17.x || ^18.x"
+    "react": "^16.x || ^17.x || ^18.x || ^19.x"
   },
   "commitlint": {
     "extends": [
@@ -92,9 +95,9 @@
   },
   "resolutions": {
     "prettier": "^3.5.3",
-    "@types/react-dom": "^18.3.7",
-    "@types/react": "^18.3.22",
-    "@typescript-eslint/eslint-plugin": "^7.13.1",
+    "@types/react": "^19.1.5",
+    "@types/react-dom": "^19.1.5",
+    "@typescript-eslint/eslint-plugin": "^8.32.1",
     "@typescript-eslint/parser": "^7.13.1",
     "cz-conventional-changelog": "^3.3.0",
     "eslint-config-prettier": "^10.1.5",
@@ -105,10 +108,10 @@
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint": "^8.57.1",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.1.0",
     "ansi-regex": "^5.0.1",
     "minimist": "^1.2.8",
-    "react": "^18.3.1",
+    "react": "^19.1.0",
     "@sapphire/ts-config@^4.0.1": "patch:@sapphire/ts-config@npm%3A4.0.0#./.yarn/patches/@sapphire-ts-config-npm-4.0.0-cfd20d4fc5.patch",
     "@types/testing-library__jest-dom@^5.14.8": "patch:@types/testing-library__jest-dom@npm%3A5.14.7#./.yarn/patches/@types-testing-library__jest-dom-npm-5.14.7-9c1df8c5da.patch",
     "@types/testing-library__jest-dom@^5.9.1": "patch:@types/testing-library__jest-dom@npm%3A5.14.7#./.yarn/patches/@types-testing-library__jest-dom-npm-5.14.7-9c1df8c5da.patch"

src/IfAsync.tsx

@@ -1,4 +1,5 @@
-import React, { Fragment, useEffect, useMemo, useRef, useState, type PropsWithChildren, type ReactElement } from 'react';
+import * as React from 'react';
+import { Fragment, useEffect, useMemo, useRef, useState, type PropsWithChildren, type ReactElement } from 'react';
 import { Else } from './Else';
 import { Fallback } from './Fallback';
 import { Then } from './Then';
@@ -69,12 +70,13 @@ export function IfAsync<T = any>({ promise, keepAlive = false, children }: Props
 
     // Inject caught error
     let elseElement = hasElse;
-    if (typeof hasElse.props.children === 'function') {
+    const hasElseProps = hasElse.props as { children: any };
+    if (typeof hasElseProps.children === 'function') {
       elseElement = {
         ...hasElse,
         props: {
-          ...hasElse.props,
-          children: () => hasElse.props.children(returnValue, history.current, cancellablePromise.promise)
+          ...hasElseProps,
+          children: () => hasElseProps.children(returnValue, history.current, cancellablePromise.promise)
         }
       };
     }
@@ -87,13 +89,13 @@ export function IfAsync<T = any>({ promise, keepAlive = false, children }: Props
 
   // Inject promise return value
   let thenElement = hasThen;
-
-  if (typeof hasThen.props.children === 'function') {
+  const hasThenProps = hasThen.props as { children: any };
+  if (typeof hasThenProps.children === 'function') {
     thenElement = {
       ...hasThen,
       props: {
-        ...hasThen.props,
-        children: () => hasThen.props.children(returnValue, history.current, cancellablePromise.promise)
+        ...hasThenProps,
+        children: () => hasThenProps.children(returnValue, history.current, cancellablePromise.promise)
       }
     };
   }

src/Switch.tsx

@@ -1,4 +1,5 @@
-import React, { type ReactElement } from 'react';
+import * as React from 'react';
+import { type ReactElement } from 'react';
 import { Case } from './Case';
 import { Default } from './Default';
 import { getConditionResult } from './getConditionResults';
@@ -33,9 +34,8 @@ export const Switch: FCWithImplicitChildren = ({ children }) => {
     }
 
     if (!matchingCase && child.type === Case) {
-      const { condition } = child.props;
-
-      const conditionResult = getConditionResult(condition);
+      const childProps = child.props as any;
+      const conditionResult = getConditionResult(childProps.condition);
 
       if (conditionResult) {
         matchingCase = child;

src/isThenable.ts

@@ -7,7 +7,7 @@
  * Full license: https://github.com/sapphiredev/utilities/blob/main/LICENSE.md
  */
 
-/* eslint-disable @typescript-eslint/ban-types */
+/* eslint-disable @typescript-eslint/no-unsafe-function-type */
 
 interface Thenable {
   then: Function;

src/types.ts

@@ -1,4 +1,4 @@
-import type { FunctionComponent, PropsWithChildren, ReactNode } from 'react';
+import type { FunctionComponent, JSX, PropsWithChildren, ReactNode } from 'react';
 
 /**
  * Type for a value that can properly be parsed by `Boolean(...)`
@@ -59,7 +59,6 @@ export type FCWithImplicitChildren<P = NonNullObject> = FunctionComponentWithImp
 
 export type FunctionComponentWithImplicitChildren<P = NonNullObject> = FunctionComponent<CustomPropsWithChildren<P>>;
 
-// eslint-disable-next-line @typescript-eslint/ban-types
 export type NonNullObject = {} & object;
 
 export type CustomPropsWithChildren<P> = P & { children?: ReactNode | undefined | ((...args: unknown[]) => JSX.Element) };

src/utils.ts

@@ -34,9 +34,13 @@ export const createCancellablePromise = <T>(promise: ExtendablePromise<T>): Canc
   const wrappedPromise: ExtendablePromise<T> = new Promise(async (res, rej) => {
     try {
       const d = await promise;
-      return !isCancelled.value && res(d);
+      if (!isCancelled.value) {
+        res(d);
+      }
     } catch (error) {
-      !isCancelled.value && rej(error);
+      if (!isCancelled.value) {
+        rej(error);
+      }
     }
   });
 

test/If.test.tsx

@@ -216,9 +216,7 @@ describe('<If /> component', () => {
         render(
           <If condition={extendedPromise}>
             <Then>
-              {(data: any, history: any, promise: any) => {
-                data;
-                history; // 'skip declared but value never read' error
+              {(_data: any, _history: any, promise: any) => {
                 return <span data-testid="thenChild">{promise.testValue}</span>;
               }}
             </Then>
@@ -397,9 +395,7 @@ describe('<If /> component', () => {
         render(
           <If condition={extendedPromise}>
             <Else>
-              {(data: any, history: any, promise: any) => {
-                data;
-                history; // 'skip declared but value never read' error
+              {(_data: any, _history: any, promise: any) => {
                 return <span data-testid="elseChild">{promise.testValue}</span>;
               }}
             </Else>

tsconfig.typedoc.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./src/tsconfig.json",
+  "compilerOptions": {
+    "moduleResolution": "nodenext",
+    "module": "NodeNext",
+    "verbatimModuleSyntax": false
+  }
+}

typedoc.json

@@ -5,13 +5,14 @@
   "hideGenerator": true,
   "lightHighlightTheme": "github-light",
   "darkHighlightTheme": "github-dark",
-  "markedOptions": {
+  "markdownItOptions": {
     "gfm": true,
     "mangle": false,
     "smartypants": true
   },
   "name": "react-if",
   "out": "./docs/",
   "readme": "./README.md",
-  "tsconfig": "./src/tsconfig.json"
+  "tsconfig": "./tsconfig.typedoc.json",
+  "plugin": ["typedoc-plugin-markdown"]
 }