🐛 fix: Typescript forwardref return type in progress

CHANGELOG.md

@@ -1,7 +1,8 @@
 # [v3.3.2](https://github.com/MoIzadloo/ultimate-react-multilevel-menu/compare/v3.3.1...v3.3.2) (2023-09-19)
 
 ## 🐛 Bug Fixes
-- [`697d438`](https://github.com/MoIzadloo/ultimate-react-multilevel-menu/commit/697d438)  fix: typescript hreflang problem
+
+- [`697d438`](https://github.com/MoIzadloo/ultimate-react-multilevel-menu/commit/697d438) fix: typescript hreflang problem
 
 # [v3.3.1](https://github.com/MoIzadloo/ultimate-react-multilevel-menu/compare/v3.3.0...v3.3.1) (2023-09-17)
 

package.json

@@ -19,10 +19,12 @@
     "type": "git",
     "url": "git+https://github.com/MoIzadloo/ultimate-react-multilevel-menu.git"
   },
-  "main": "dist/index.js",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
   "files": [
-    "./dist"
+    "dist"
   ],
+  "types": "dist/index.d.ts",
   "scripts": {
     "format": "prettier --write \"**/*.{cjs,mjs,html,js,json,md,ts}\"",
     "start": "npm run styleguide:serve",
@@ -31,54 +33,58 @@
     "postinstall": "husky install",
     "prepublishOnly": "pinst --disable",
     "postpublish": "pinst --enable",
-    "build": "rollup -c ./rollup.config.js",
+    "build": "rollup -c",
     "test": "jest",
     "styleguide:build": "styleguidist build",
     "styleguide:serve": "styleguidist server"
   },
   "dependencies": {
+    "@rollup/plugin-commonjs": "^25.0.4",
+    "@rollup/plugin-typescript": "^11.1.3",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "classnames": "^2.3.1",
     "commitlint": "^17.7.1",
     "commitlint-config-gitmoji": "^2.3.1",
     "husky": "^8.0.3",
+    "jest-environment-jsdom": "^29.7.0",
     "pinst": "^3.0.0",
     "prettier": "^3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "rollup-plugin-dts": "^6.0.2",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
     "semantic-release-gitmoji": "^1.6.4",
     "webpack": "^5.88.2"
   },
   "devDependencies": {
     "@axe-core/react": "^4.4.3",
-    "@rollup/plugin-node-resolve": "^13.3.0",
-    "@rollup/plugin-typescript": "^8.3.0",
-    "@testing-library/jest-dom": "^5.14.1",
+    "@rollup/plugin-node-resolve": "^15.2.1",
+    "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^14.0.0",
-    "@types/jest": "^27.0.2",
-    "@types/node": "^16.11.1",
+    "@types/jest": "^29.5.5",
+    "@types/node": "^20.6.3",
     "@types/react": "^18.0.14",
-    "@types/react-dom": "^17.0.9",
-    "babel-loader": "^8.2.5",
+    "@types/react-dom": "^18.2.7",
+    "babel-loader": "^9.1.3",
     "css-loader": "^6.4.0",
-    "jest": "^27.4.3",
+    "jest": "^29.7.0",
     "jest-transform-stub": "^2.0.0",
     "less": "^4.1.2",
     "less-loader": "^11.0.0",
-    "node-polyfill-webpack-plugin": "^1.1.4",
+    "node-polyfill-webpack-plugin": "^2.0.1",
     "postcss": "^8.3.9",
-    "react-styleguidist": "^11.1.7",
-    "rimraf": "^3.0.2",
-    "rollup": "^2.77.3",
+    "react-styleguidist": "^13.1.1",
+    "rimraf": "^5.0.1",
+    "rollup": "^3.29.2",
     "rollup-plugin-postcss": "^4.0.1",
     "rollup-plugin-terser": "^7.0.2",
     "style-loader": "^3.3.1",
-    "ts-jest": "^27.0.7",
+    "ts-jest": "^29.1.1",
     "ts-loader": "^9.3.1",
-    "ts-standard": "^11.0.0",
-    "tsconfig-paths-webpack-plugin": "^3.5.1",
-    "typescript": "^4.7.4"
+    "ts-standard": "^12.0.2",
+    "tsconfig-paths-webpack-plugin": "^4.1.0",
+    "typescript": "^5.2.2"
   },
   "ts-standard": {
     "ignore": [

rollup.config.mjs

@@ -0,0 +1,50 @@
+import resolve from '@rollup/plugin-node-resolve'
+import commonjs from '@rollup/plugin-commonjs'
+import typescript from '@rollup/plugin-typescript'
+import { terser } from 'rollup-plugin-terser'
+import external from 'rollup-plugin-peer-deps-external'
+import postcss from 'rollup-plugin-postcss'
+import dts from 'rollup-plugin-dts'
+import { readFileSync } from 'fs'
+const packageJson = JSON.parse(readFileSync('./package.json'))
+
+export default [
+  {
+    input: 'src/index.ts',
+    output: [
+      {
+        file: packageJson.main,
+        format: 'cjs',
+        sourcemap: true,
+        name: 'react-ts-lib'
+      },
+      {
+        file: packageJson.module,
+        format: 'esm',
+        sourcemap: true
+      }
+    ],
+    plugins: [
+      external(),
+      resolve(),
+      commonjs(),
+      typescript({ tsconfig: './tsconfig.json' }),
+      postcss({
+        extract: true,
+        minimize: true,
+        modules: false,
+        sourceMap: true,
+        use: {
+          less: { javascriptEnabled: true }
+        }
+      }),
+      terser()
+    ]
+  },
+  {
+    input: 'dist/esm/types/index.d.ts',
+    output: [{ file: 'dist/index.d.ts', format: 'esm' }],
+    external: [/\.less$/],
+    plugins: [dts()]
+  }
+]

src/lib/helper.d.ts → src/lib/helper.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react'
+import React from 'react'
 
 export type Omit<T, U> = Pick<T, Exclude<keyof T, keyof U>>
 export type ReplaceProps<Inner extends React.ElementType, P> = Omit<
@@ -13,6 +13,6 @@ export type PrefixRefForwardingComponent<
   TInitial extends React.ElementType,
   P = unknown
 > = <As extends React.ElementType = TInitial>(
-    props: React.PropsWithChildren<ReplaceProps<As, AsProp<As> & P>>,
-    context?: any
-  ) => ReactNode
+  props: React.PropsWithChildren<ReplaceProps<As, AsProp<As> & P>>,
+  context?: any
+) => any

src/lib/navbar/items/items.props.ts

@@ -4,7 +4,7 @@ import { AsProp } from '../../helper'
 interface ItemsProps
   extends AsProp,
   Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'title'> {
-  title?: React.ReactNode
+  title?: React.ReactElement
 }
 
 export default ItemsProps

styleguide.config.js

@@ -65,12 +65,8 @@ module.exports = {
     ],
     devtool: 'source-map',
     devServer: {
-      contentBase: '/',
-      publicPath: '/',
       port: 8080,
-      inline: true,
-      hot: true,
-      watchContentBase: true
+      hot: true
     }
   }
 }

tsconfig.json

@@ -11,6 +11,7 @@
     // "checkJs": true,                             /* Report errors in .js files. */
     "jsx": "react" /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */,
     "declaration": true /* Generates corresponding '.d.ts' file. */,
+    "declarationDir": "types",
     "declarationMap": true /* Generates a sourcemap for each corresponding '.d.ts' file. */,
     "sourceMap": true /* Generates corresponding '.map' file. */,
     // "outFile": "./",                             /* Concatenate and emit output to single file. */