build: rollup port of #977

.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'

src/index-dev-react-18.tsx

@@ -1,4 +1,4 @@
-import { StrictMode, version } from 'react'
+import React, { StrictMode, version } from 'react'
 // eslint-disable-next-line import/no-unresolved
 import { createRoot } from 'react-dom/client' // this is we are now using react < 18
 import './tokens.css'

src/test/jest-setup.js

@@ -0,0 +1,4 @@
+import React from 'react'
+// whatever else you need in here
+
+global.React = React

tsconfig.json

@@ -16,14 +16,15 @@
  "target": "es2018" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
  "lib": [
  "es2018",
- "DOM"
+ "DOM",
+ "DOM.iterable"
  ] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
- "jsx": "react-jsx" /* Specify what JSX code is generated. */,
+ "jsx": "react"  /* Specify what JSX code is generated. */,
  // "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */
  // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */
  // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
  // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
- // "jsxImportSource": "",  /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
+ // "jsxImportSource": "react", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
  // "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
  // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */
  // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */