build: install missing dep, fix ts config, make dependencies external

Author: GerkinDev

package.json

@@ -46,6 +46,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,24 +7,27 @@ 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 ?? {}), ...(pkg.dependencies ?? {}) }),
+  'react/jsx-runtime'
+];
 
 const buildFormats = [
   {
     file: 'dist/react-tooltip.umd.js',
     format: 'umd',
+    globals: {
+      react: 'React',
+      'react-dom': 'ReactDOM',
+      classnames: 'classNames',
+      'prop-types': 'PropTypes',
+    },
   },
   {
     file: 'dist/react-tooltip.cjs.js',
@@ -88,22 +91,24 @@ const pluginsForCSSMinification = [
   ...pluginsAfterPostCSS,
 ]
 
-const defaultOutputData = buildFormats.map(({ file, format }) => ({
+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 }) => ({
+const minifiedOutputData = buildFormats.map(({ file, format, globals }) => ({
   file: file.replace('.js', '.min.js'),
   format,
   plugins: [...pluginsForCSSMinification, terser(), filesize()],
+  globals,
 }))
 
 const outputData = [...defaultOutputData, ...minifiedOutputData]
 
-const config = outputData.map(({ file, format, plugins: specificPLugins }) => ({
+const config = outputData.map(({ file, format, plugins: specificPLugins, globals }) => ({
   input,
   output: {
     file,
@@ -115,4 +120,6 @@ const config = outputData.map(({ file, format, plugins: specificPLugins }) => ({
   plugins: specificPLugins,
 }))
 
+console.log(config)
+
 export default config

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. */,
     // "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. */