build: avoid using jsx-runtime

Author: GerkinDev

rollup.config.prod.js

@@ -14,15 +14,16 @@ const input = ['src/index.tsx']
 const name = 'ReactTooltip'
 
 const external = [
-  ...Object.keys({ ...(pkg.peerDependencies ?? {}), ...(pkg.dependencies ?? {}) }),
-  'react/jsx-runtime',
+  ...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',
@@ -39,19 +40,22 @@ const buildFormats = [
   },
 ]
 
-// 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,
@@ -64,61 +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, globals }) => ({
-  file,
-  format,
-  plugins: [...plugins, filesize()],
-  globals,
-}))
-
 // this step is just to build the minified css and es modules javascript
-const minifiedOutputData = buildFormats.map(({ file, format, globals }) => ({
-  file: file.replace('.js', '.min.js').replace('.cjs', '.min.cjs').replace('.mjs', '.min.mjs'),
-  format,
-  plugins: [...pluginsForCSSMinification, terser(), filesize()],
-  globals,
+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, globals }) => ({
+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, useState } from 'react'
+import React, { useEffect, 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'

tsconfig.json

@@ -19,12 +19,12 @@
       "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": "react",                          /* 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. */