Merge branch 'develop'

package.json

@@ -2,8 +2,21 @@
   "name": "react-confetti",
   "version": "6.2.1",
   "description": "React component to draw confetti for your party.",
-  "main": "dist/index.js",
-  "type": "commonjs",
+  "main": "dist/react-confetti.cjs",
+  "module": "dist/react-confetti.mjs",
+  "types": "dist/react-confetti.d.cts",
+  "exports": {
+    "import": {
+      "types": "./dist/react-confetti.d.mts",
+      "default": "./dist/react-confetti.mjs"
+    },
+    "require": {
+      "types": "./dist/react-confetti.d.cts",
+      "default": "./dist/react-confetti.cjs"
+    },
+    "browser": "./dist/react-confetti.iife.js",
+    "default": "./dist/react-confetti.umd.js"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/alampros/react-confetti.git"
@@ -59,6 +72,7 @@
     "@storybook/react-vite": "^8.4.7",
     "@storybook/test": "^8.4.7",
     "@types/react": "^19.0.2",
+    "@types/tween-functions": "^1.2.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-fps-stats": "^0.3.1",

rollup.config.ts

@@ -1,29 +1,62 @@
-import { babel } from '@rollup/plugin-babel'
-import commonjs from '@rollup/plugin-commonjs'
-import typescript from '@rollup/plugin-typescript'
+import pluginTs from '@rollup/plugin-typescript'
 import { RollupOptions } from 'rollup'
+import dts from 'rollup-plugin-dts'
 
-const config: RollupOptions = {
-  input: 'src/index.ts',
-  output: {
-    dir: 'dist',
-    format: 'module',
-    sourcemap: true,
-    exports: 'default',
-  },
-  external: ['react', 'react-dom', 'tween-functions'],
-  plugins: [
-    commonjs(),
-    babel({
-      babelHelpers: 'bundled',
-      presets: ['@babel/env', '@babel/preset-react'],
-      extensions: ['.ts', '.tsx'],
-      exclude: ['src/stories/**/*'],
-    }),
-    typescript({
-      exclude: ['src/stories/**/*', 'rollup.config.ts'],
-    }),
-  ],
+const input = 'src/index.ts'
+const external = ['react', 'react-dom', 'react/jsx-runtime']
+const globals = {
+  react: 'React',
+  'react-dom': 'ReactDOM',
+  'react/jsx-runtime': 'jsxRuntime',
 }
 
+const config: RollupOptions[] = [
+  {
+    input,
+    output: [
+      {
+        file: 'dist/react-confetti.cjs',
+        format: 'cjs',
+        globals,
+        sourcemap: true,
+      },
+      {
+        file: 'dist/react-confetti.mjs',
+        format: 'es',
+        globals,
+        sourcemap: true,
+      },
+      {
+        name: 'ReactConfetti',
+        file: 'dist/react-confetti.iife.js',
+        format: 'iife',
+        globals,
+        sourcemap: true,
+      },
+      {
+        name: 'ReactConfetti',
+        file: 'dist/react-confetti.umd.js',
+        format: 'umd',
+        globals,
+        sourcemap: true,
+      },
+    ],
+    external,
+    plugins: [
+      pluginTs({
+        exclude: ['src/stories/**/*', 'rollup.config.ts'],
+      }),
+    ],
+  },
+  {
+    input,
+    output: [
+      { format: 'cjs', file: 'dist/react-confetti.d.cts' },
+      { format: 'es', file: 'dist/react-confetti.d.mts' },
+    ],
+    external,
+    plugins: [dts()],
+  },
+]
+
 export default config

tsconfig.json

@@ -1,17 +1,60 @@
 {
   "compilerOptions": {
-    "baseUrl": ".",
-    "paths": { "*": ["types/*"] },
-    "target": "esnext",
-    "module": "esnext",
-    "moduleResolution": "node",
-    "declaration": true,
-    "outDir": "dist",
-    "jsx": "preserve",
-    "noEmitOnError": true,
-    // "emitDeclarationOnly": true,
+    // To ensure that our code is compatible with "slightly old" browsers,
+    // we target an older version of ECMAScript (ES2020 in this case).
+    // See https://www.typescriptlang.org/tsconfig#target
+    "target": "es2020",
+
+    // We load these 3 libraries in the global scope so TypeScript knows
+    // about the DOM and ES2020 features.
+    // See https://www.typescriptlang.org/tsconfig#lib
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+
+    // To have compatibility with ES modules, we can use the values:
+    // - ES2015: Very basic support for ES modules
+    // - ES2020: Supports dynamic imports and import.meta
+    // - ES2022: Supports top-level await
+    // See https://www.typescriptlang.org/tsconfig#module
+    "module": "ES2020",
+
+    // The 'bundler' resolution strategy is similar to the 'node16' and
+    // 'nodenext' strategies (in that it supports package.json "exports" and
+    // "imports" fields), but it allows us to not have to specify the file
+    // extension when importing files (which is nice, because we'll be bundling
+    // everything anyway, so the extensions are not relevant).
+    // See https://www.typescriptlang.org/tsconfig#moduleResolution
+    "moduleResolution": "Bundler",
+
+    // This tells TypeScript to use the `react-jsx` factory function when
+    // transpiling JSX syntax.
+    "jsx": "react-jsx",
+
+    // Our code will be placed in the ./src directory
+    "baseUrl": "./src",
+
+    // We'll use Rollup to emit code, instead of tsc.
+    "noEmit": true,
+
+    // Most bundlers have limitations when dealing with features such as
+    // `const enum` (which can affect code generation across different files).
+    // Because of this, it is a good idea to ensure that every module is
+    // compilable on its own, without relying on other modules.
+    // See https://www.typescriptlang.org/tsconfig#isolatedModules
+    "isolatedModules": true,
+
+    // I'm surprised that this option is still not enabled by default, because
+    // it's basically a bug fix for a mistake they made in their past
+    // assumptions on how ES modules work.
+    // See https://www.typescriptlang.org/tsconfig#esModuleInterop
+    "esModuleInterop": true,
+
+    // Feel free to not use these options if you don't want to, but my
+    // suggestion is to always use it, so you can catch more errors at compile
+    // time.
     "strict": true,
-    "esModuleInterop": true
+    "checkJs": true
   },
-  "include": ["src", "rollup.config.ts"]
+  // In a real project, we might need to add some more directories to the
+  // "exclude" array, but for this example we'll keep it simple.
+  "exclude": ["dist/**/*", "node_modules/**/*"]
 }