Merge pull request #984 from GerkinDev/chore/dependencies-external

build: rollup port of #977

Author: danielbarion

.github/workflows/bundlesize.yaml

@@ -14,7 +14,7 @@ jobs:
         run: yarn install
 
       - name: Build ReactTooltip component package
-        run: yarn build
+        run: yarn build-rollup
 
       - name: Bundlesize
         run: yarn run bundlesize

bundlesize.config.json

@@ -1,15 +1,15 @@
 {
   "files": [
     {
-      "path": "./dist/react-tooltip.cjs.min.js",
+      "path": "./dist/react-tooltip.min.cjs",
       "maxSize": "10 kB"
     },
     {
-      "path": "./dist/react-tooltip.esm.min.js",
+      "path": "./dist/react-tooltip.min.mjs",
       "maxSize": "10 kB"
     },
     {
-      "path": "./dist/react-tooltip.iife.min.js",
+      "path": "./dist/react-tooltip.umd.min.js",
       "maxSize": "10 kB"
     }
   ]

jest.config.ts

@@ -133,7 +133,7 @@ export default {
   // setupFiles: [],
 
   // A list of paths to modules that run some code to configure or set up the testing framework before each test
-  // setupFilesAfterEnv: [],
+  setupFilesAfterEnv: ['./src/test/jest-setup.js'],
 
   // The number of seconds after which a test is considered as slow and reported as such in the results.
   // slowTestThreshold: 5,

package.json

@@ -16,10 +16,8 @@
     "esbuild": "esbuild",
     "test": "jest",
     "postbuild": "npm run types && npm run bundlesize",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build-rollup"
   },
-  "main": "dist/react-tooltip.cjs.min.js",
-  "module": "dist/react-tooltip.esm.min.js",
   "types": "dist/react-tooltip.d.ts",
   "license": "MIT",
   "private": false,
@@ -34,6 +32,17 @@
   "bugs": {
     "url": "https://github.com/ReactTooltip/react-tooltip/issues"
   },
+  "exports": {
+    ".": {
+      "types": "./dist/react-tooltip.d.ts",
+      "require": "./dist/react-tooltip.min.cjs",
+      "import": "./dist/react-tooltip.min.mjs",
+      "default": "./dist/react-tooltip.min.cjs"
+    },
+    "./dist/react-tooltip.css": "./dist/react-tooltip.min.css",
+    "./dist/react-tooltip.d.ts": "./dist/react-tooltip.d.ts",
+    "./package.json": "./package.json"
+  },
   "homepage": "https://github.com/ReactTooltip/react-tooltip#readme",
   "devDependencies": {
     "@rollup/plugin-commonjs": "22.0.2",
@@ -46,6 +55,7 @@
     "@types/css": "^0.0.33",
     "@types/css-modules": "^1.0.2",
     "@types/jest": "29.4.0",
+    "@types/node": "^18.15.3",
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
     "@types/react-test-renderer": "^18.0.0",

rollup.config.prod.js

@@ -7,48 +7,55 @@ import { nodeResolve } from '@rollup/plugin-node-resolve'
 import ts from '@rollup/plugin-typescript'
 import { terser } from 'rollup-plugin-terser'
 import typescript from 'typescript'
+import * as pkg from './package.json'
 
 const input = ['src/index.tsx']
 
 const name = 'ReactTooltip'
 
-const external = ['react', 'react-dom', 'prop-types']
-
-const globals = {
-  react: 'React',
-  'react-dom': 'ReactDOM',
-  classnames: 'classNames',
-  'prop-types': 'PropTypes',
-}
+const external = [
+  ...Object.keys(pkg.peerDependencies ?? {}),
+  ...Object.keys(pkg.dependencies ?? {}),
+]
 
 const buildFormats = [
   {
     file: 'dist/react-tooltip.umd.js',
     format: 'umd',
+    globals: {
+      '@floating-ui/dom': 'FloatingUIDOM',
+      react: 'React',
+      'react-dom': 'ReactDOM',
+      classnames: 'classNames',
+      'prop-types': 'PropTypes',
+    },
   },
   {
-    file: 'dist/react-tooltip.cjs.js',
+    file: 'dist/react-tooltip.cjs',
     format: 'cjs',
   },
   {
-    file: 'dist/react-tooltip.esm.js',
+    file: 'dist/react-tooltip.mjs',
     format: 'es',
   },
 ]
 
-// splitted to be reusable by minified css build and unminified css
-const pluginsBeforePostCSS = [
+const sharedPlugins = [
   progress(),
   replace({
     preventAssignment: true,
     values: {
       'process.env.NODE_ENV': JSON.stringify('development'),
     },
   }),
-]
-
-// splitted to be reusable by minified css build and unminified css
-const pluginsAfterPostCSS = [
+  postcss({
+    extract: 'react-tooltip.min.css', // this will generate a specific file and override on multiples build, but the css will be the same
+    autoModules: true,
+    include: '**/*.css',
+    extensions: ['.css'],
+    plugins: [],
+    minimize: true,
+  }),
   nodeResolve(),
   ts({
     typescript,
@@ -61,58 +68,24 @@ const pluginsAfterPostCSS = [
     include: 'node_modules/**',
   }),
 ]
-
-const plugins = [
-  ...pluginsBeforePostCSS,
-  postcss({
-    // extract: true, // this will generate a css file based on output file name
-    extract: 'react-tooltip.css', // this will generate a specific file and override on multiples build, but the css will be the same
-    autoModules: true,
-    include: '**/*.css',
-    extensions: ['.css'],
-    plugins: [],
-  }),
-  ...pluginsAfterPostCSS,
-]
-
-const pluginsForCSSMinification = [
-  ...pluginsBeforePostCSS,
-  postcss({
-    extract: 'react-tooltip.min.css', // this will generate a specific file and override on multiples build, but the css will be the same
-    autoModules: true,
-    include: '**/*.css',
-    extensions: ['.css'],
-    plugins: [],
-    minimize: true,
-  }),
-  ...pluginsAfterPostCSS,
-]
-
-const defaultOutputData = buildFormats.map(({ file, format }) => ({
-  file,
-  format,
-  plugins: [...plugins, filesize()],
-}))
-
 // this step is just to build the minified css and es modules javascript
-const minifiedOutputData = buildFormats.map(({ file, format }) => ({
-  file: file.replace('.js', '.min.js'),
-  format,
-  plugins: [...pluginsForCSSMinification, terser(), filesize()],
+const minifiedBuildFormats = buildFormats.map(({ file, ...rest }) => ({
+  file: file.replace(/(\.[cm]?js)$/, '.min$1'),
+  ...rest,
+  plugins: [terser(), filesize()],
 }))
 
-const outputData = [...defaultOutputData, ...minifiedOutputData]
+const allBuildFormats = [...buildFormats, ...minifiedBuildFormats]
 
-const config = outputData.map(({ file, format, plugins: specificPLugins }) => ({
+const config = {
   input,
-  output: {
-    file,
-    format,
+  output: allBuildFormats.map((buildFormat) => ({
     name,
-    globals,
-  },
+    ...buildFormat,
+    sourcemap: true,
+  })),
   external,
-  plugins: specificPLugins,
-}))
+  plugins: sharedPlugins,
+}
 
 export default config

src/App.tsx

@@ -2,7 +2,7 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import { TooltipController as Tooltip } from 'components/TooltipController'
 import { IPosition } from 'components/Tooltip/TooltipTypes.d'
-import { useState } from 'react'
+import React, { useState } from 'react'
 import { inline, offset } from '@floating-ui/dom'
 import styles from './styles.module.css'
 

src/components/Tooltip/Tooltip.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef } from 'react'
+import React, { useEffect, useState, useRef } from 'react'
 import classNames from 'classnames'
 import debounce from 'utils/debounce'
 import { useTooltip } from 'components/TooltipProvider'

src/components/TooltipContent/TooltipContent.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable react/no-danger */
+import React from 'react'
 import type { ITooltipContent } from './TooltipContentTypes'
 
 const TooltipContent = ({ content }: ITooltipContent) => {

src/components/TooltipController/TooltipController.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { Tooltip } from 'components/Tooltip'
 import type {
   EventsType,

src/components/TooltipProvider/TooltipWrapper.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react'
+import React, { useEffect, useRef } from 'react'
 import classNames from 'classnames'
 import { useTooltip } from './TooltipProvider'
 import type { ITooltipWrapper } from './TooltipProviderTypes'