diff --git a/package-lock.json b/package-lock.json index f6a6749..fc8e4a5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31,6 +31,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", @@ -4215,6 +4216,13 @@ "dev": true, "license": "MIT" }, + "node_modules/@types/tween-functions": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@types/tween-functions/-/tween-functions-1.2.2.tgz", + "integrity": "sha512-R8MG9rSHoQOZ1kN0hl3ZmFMXrqvRL/594e0yF5iEfbgUOkYB418biyjlvqeCQTiyFcezj9o7n/b3ErhvpC+jZQ==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/uuid": { "version": "9.0.8", "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.8.tgz", diff --git a/package.json b/package.json index b0633bf..c1f7eb7 100644 --- a/package.json +++ b/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", diff --git a/rollup.config.ts b/rollup.config.ts index 7f8eadd..52c3c8f 100644 --- a/rollup.config.ts +++ b/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 diff --git a/tsconfig.json b/tsconfig.json index 0773172..faf7872 100644 --- a/tsconfig.json +++ b/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/**/*"] } diff --git a/types/tween-functions.d.ts b/types/tween-functions.d.ts deleted file mode 100644 index 0308f5a..0000000 --- a/types/tween-functions.d.ts +++ /dev/null @@ -1,189 +0,0 @@ -export function easeInBack( - currentTime: number, - currentValue: number, - targetValue: number, - duration: number, - s: any, -): number -export function easeInBounce( - currentTime: number, - currentValue: number, - targetValue: number, - duration: number, -): number -export function easeInCirc( - currentTime: number, - currentValue: number, - targetValue: number, - duration: number, -): number -export function easeInCubic( - currentTime: number, - currentValue: number, - targetValue: number, - duration: number, -): number -export function easeInElastic( - currentTime: number, - currentValue: number, - targetValue: number, - duration: number, -): number -export function easeInExpo( - currentTime: number, - currentValue: number, - targetValue: number, - duration: number, -): number -export function easeInOutBack( - currentTime: number, - currentValue: number, - targetValue: number, - duration: number, - s: any, -): number -export function easeInOutBounce( - currentTime: number, - currentValue: number, - targetValue: number, - duration: number, -): number -export function easeInOutCirc( - currentTime: number, - currentValue: number, - targetValue: number, - duration: number, -): number -export function easeInOutCubic( - currentTime: number, - currentValue: number, - targetValue: number, - duration: number, -): number -export function easeInOutElastic( - currentTime: number, - currentValue: number, - targetValue: number, - duration: number, -): number -export function easeInOutExpo( - currentTime: number, - currentValue: number, - targetValue: number, - duration: number, -): number -export function easeInOutQuad( - currentTime: number, - currentValue: number, - targetValue: number, - duration: number, -): number -export function easeInOutQuart( - currentTime: number, - currentValue: number, - targetValue: number, - duration: number, -): number -export function easeInOutQuint( - currentTime: number, - currentValue: number, - targetValue: number, - duration: number, -): number -export function easeInOutSine( - currentTime: number, - currentValue: number, - targetValue: number, - duration: number, -): number -export function easeInQuad( - currentTime: number, - currentValue: number, - targetValue: number, - duration: number, -): number -export function easeInQuart( - currentTime: number, - currentValue: number, - targetValue: number, - duration: number, -): number -export function easeInQuint( - currentTime: number, - currentValue: number, - targetValue: number, - duration: number, -): number -export function easeInSine( - currentTime: number, - currentValue: number, - targetValue: number, - duration: number, -): number -export function easeOutBack( - currentTime: number, - currentValue: number, - targetValue: number, - duration: number, - s: any, -): number -export function easeOutBounce( - currentTime: number, - currentValue: number, - targetValue: number, - duration: number, -): number -export function easeOutCirc( - currentTime: number, - currentValue: number, - targetValue: number, - duration: number, -): number -export function easeOutCubic( - currentTime: number, - currentValue: number, - targetValue: number, - duration: number, -): number -export function easeOutElastic( - currentTime: number, - currentValue: number, - targetValue: number, - duration: number, -): number -export function easeOutExpo( - currentTime: number, - currentValue: number, - targetValue: number, - duration: number, -): number -export function easeOutQuad( - currentTime: number, - currentValue: number, - targetValue: number, - duration: number, -): number -export function easeOutQuart( - currentTime: number, - currentValue: number, - targetValue: number, - duration: number, -): number -export function easeOutQuint( - currentTime: number, - currentValue: number, - targetValue: number, - duration: number, -): number -export function easeOutSine( - currentTime: number, - currentValue: number, - targetValue: number, - duration: number, -): number -export function linear( - currentTime: number, - currentValue: number, - targetValue: number, - duration: number, -): number