diff --git a/.gitignore b/.gitignore index 4444b65..0d16a83 100644 --- a/.gitignore +++ b/.gitignore @@ -8,3 +8,4 @@ demo/examples /playwright-report/ /blob-report/ /playwright/.cache/ +.DS_Store diff --git a/CHANGELOG.md b/CHANGELOG.md index 130384a..53817f4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,15 @@ we have switched from rollup to esbuild and only export CJS and ESM versions. This means that the UMD build is no longer exported. +# [3.9.0](https://github.com/cchanxzy/react-currency-input-field/compare/v3.8.1...v3.9.0) (2024-11-12) + + +### Features + +* export `IntlConfig` props ([#374](https://github.com/cchanxzy/react-currency-input-field/issues/374)) ([308d961](https://github.com/cchanxzy/react-currency-input-field/commit/308d96118db667a5cd4d9a312bccf9061a49063c)) + +## [3.8.1](https://github.com/cchanxzy/react-currency-input-field/compare/v3.8.0...v3.8.1) (2024-11-10) + # [3.8.0](https://github.com/cchanxzy/react-currency-input-field/compare/v3.7.1...v3.8.0) (2024-02-22) diff --git a/README.md b/README.md index 20263f4..efa4087 100644 --- a/README.md +++ b/README.md @@ -26,6 +26,8 @@ - [Reasoning](#reasoning) - [Issues](#issues) - [Contributing](#contributing) + - [Support this Project](#support-this-project) + - [v4.0.0-alpha Announcement](#v400-alpha-announcement) ## Features @@ -284,4 +286,30 @@ Feel free to raise an issue on Github if you find a bug or have a feature reques ## Contributing -If you want to contribute to this repository, please refer to the [contributing doc](https://github.com/cchanxzy/react-currency-input-field/blob/main/docs/CONTRIBUTING.md). +If you would like to contribute to this repository, please refer to the [contributing doc](https://github.com/cchanxzy/react-currency-input-field/blob/main/docs/CONTRIBUTING.md). + +## Support this Project + +If you'd like to support this project, please refer to the [support doc](https://github.com/cchanxzy/react-currency-input-field/blob/main/docs/SUPPORT.md). + +## v4.0.0-alpha Announcement + +I'm excited to announce the release of **[v4.0.0-alpha.1](https://www.npmjs.com/package/react-currency-input-field/v/4.0.0-alpha.1)**. + +This marks the beginning of development for version 4.0.0, and the first improvement is a significant reduction in bundle size, going from ~26KB to ~7KB. + +For more information, please refer to the [announcement post](https://github.com/cchanxzy/react-currency-input-field/blob/main/docs/v4.0.0-alpha-annoucement.md). + +If you would like to try out the alpha version, you can install it using the following command: + +```bash +npm install react-currency-input-field@alpha + +yarn add react-currency-input-field@alpha + +pnpm add react-currency-input-field@alpha +``` + +Please note that this version is still in development and may contain bugs or incomplete features. + +**Use it at your own risk!** diff --git a/docs/SUPPORT.md b/docs/SUPPORT.md new file mode 100644 index 0000000..40a3fb5 --- /dev/null +++ b/docs/SUPPORT.md @@ -0,0 +1,41 @@ +# Support React Currency Input Field + +## A Personal Note from the Maintainer + +Hi, I’m Chun, the sole maintainer of **React Currency Input Field**. I started this project as a junior/mid-level developer, and it’s been an exciting journey to see it grow and be used by so many people. + +Over time, as both the project and I have matured, my professional and personal responsibilities have increased. Balancing a full-time development job with maintaining this project has become challenging, especially when it comes to finding both the time and the mental energy. + +These days, my schedule rarely allows me to contribute as extensively as I once did. When I do find free time, I’m often drawn to exploring and building new projects — something I’m sure many developers can relate to. + +That said, I remain committed to keeping this project available under the MIT license. It’s a utility component that may seem small, but it provides significant functionality, saving countless hours for developers who’d otherwise have to build it from scratch. + +## Why Support This Project? + +This project sits in what I call **Goldilocks territory** — it’s popular enough to be widely used and relied upon, with an average of **800k downloads per month**, but not quite recognized enough to attract regular contributors or sponsorships. + +Despite its popularity, maintaining the project falls solely on my shoulders. I’ve worked hard to ensure it remains **efficient, lightweight, and reliable**, but sustaining this effort alone has its challenges. In nearly **six** years, I’ve received only **one** sponsorship contribution. + +Another misconception about open-source work is that, while maintaining this project has significantly improved my skills, it doesn’t always translate into career benefits. Interviewers rarely bring it up, and I still go through the same technical screenings as any other candidate. Open-source work is a labor of love, often undervalued despite its impact. + +If this package has saved you or your team time and effort, consider supporting it as a way to show appreciation for the time and dedication that went into its development. + +## How You Can Help + +### 1. Financial Contributions + +Financial support allows me to prioritize maintaining this project despite my limited availability. You can contribute through [GitHub Sponsors](https://github.com/sponsors/cchanxzy). + +### 2. Contribute + +Help keep the project thriving by contributing code, fixing bugs, or improving documentation. + +See the [Contributing Guide](https://github.com/cchanxzy/react-currency-input-field/blob/main/docs/CONTRIBUTING.md) for more information. + +### 3. Spread the Word + +Share the project with your colleagues or within your community. The more people who use and know about it, the more likely it will attract contributors and support. + +## Thank You! + +Your support, in any form, means a lot. Whether through sponsorship, contributions, or simply using and sharing the project, I appreciate your help in making **React Currency Input Field** better for the entire community. diff --git a/docs/assets/2024-11-10-compare-Gzipped-size-chart.png b/docs/assets/2024-11-10-compare-Gzipped-size-chart.png new file mode 100644 index 0000000..cf8851e Binary files /dev/null and b/docs/assets/2024-11-10-compare-Gzipped-size-chart.png differ diff --git a/docs/assets/2024-11-10-compare-stat-size-chart.png b/docs/assets/2024-11-10-compare-stat-size-chart.png new file mode 100644 index 0000000..c84d0da Binary files /dev/null and b/docs/assets/2024-11-10-compare-stat-size-chart.png differ diff --git a/docs/assets/2024-11-10-treemap-after.png b/docs/assets/2024-11-10-treemap-after.png new file mode 100644 index 0000000..01253f2 Binary files /dev/null and b/docs/assets/2024-11-10-treemap-after.png differ diff --git a/docs/assets/2024-11-10-treemap-before.png b/docs/assets/2024-11-10-treemap-before.png new file mode 100644 index 0000000..3a4fef0 Binary files /dev/null and b/docs/assets/2024-11-10-treemap-before.png differ diff --git a/docs/v4.0.0-alpha-annoucement.md b/docs/v4.0.0-alpha-annoucement.md new file mode 100644 index 0000000..1b08ab4 --- /dev/null +++ b/docs/v4.0.0-alpha-annoucement.md @@ -0,0 +1,135 @@ +# Announcing React Currency Input Field v4.0.0-alpha 🎉 + +I'm excited to announce the release of **v4.0.0-alpha.1** for [react-currency-input-field](https://www.npmjs.com/package/react-currency-input-field)! This marks the beginning of development for version 4.0.0, and I'd like to share some of the significant updates included in this alpha version. + +- [Announcing React Currency Input Field v4.0.0-alpha 🎉](#announcing-react-currency-input-field-v400-alpha-) + - [Why v4?](#why-v4) + - [What's New So Far?](#whats-new-so-far) + - [1. Build Process Overhaul](#1-build-process-overhaul) + - [2. Development Tools Update](#2-development-tools-update) + - [Benefits of the New Build Process](#benefits-of-the-new-build-process) + - [Benchmarks](#benchmarks) + - [Better Treemap visibility](#better-treemap-visibility) + - [Alpha Release: What to Expect](#alpha-release-what-to-expect) + - [When Will v4 Be Stable?](#when-will-v4-be-stable) + - [How to Install](#how-to-install) + - [Feedback Welcome](#feedback-welcome) + - [Support the Project](#support-the-project) + +## Why v4? + +Version 3.0.0 of this package was released four years ago, marking a significant milestone in its development. Since then, we've seen many minor updates that have maintained the stability and reliability of the package. + +This stability has been both a strength and a limitation. On the one hand, users have enjoyed a dependable tool. On the other hand, the landscape of React and JavaScript has evolved during this time, with new patterns, tools, and performance optimizations becoming the norm. + +It's time for this package to evolve as well. The goal is to modernize and optimize it to meet the demands of today's development environment, ensuring it remains efficient, lightweight, and aligned with current best practices. + +## What's New So Far? + +### 1. Build Process Overhaul + +- **Switched from Rollup to esbuild** + This component is now built and compiled using esbuild, leading to a much simpler and more efficient build process. + +- **Dropped UMD Build** + To reduce complexity, the UMD build is no longer exported. The package now only exports **CJS** and **ESM** builds. + +- **Minified Build** + The new build is now minified, resulting in smaller file sizes and faster load times. See the [benchmark](#benchmarks) for comparison. + +- **Improved Treeshaking** + The new build supports better treeshaking, allowing unused code to be excluded from your bundles. This results in optimized performance and smaller final builds for your projects. + +- **[Enhanced Visibility with Treemaps](#better-treemap-visibility)** + Since the new build is not bundled, you'll now have the ability to analyze the treemap for the package's functions, giving you better insight into what’s included in your bundle. + +### 2. Development Tools Update + +- **Moved from Yarn to pnpm** + Development dependencies are now managed with pnpm, providing better performance and disk space savings. + +## Benefits of the New Build Process + +One of the most exciting outcomes of this change is a **dramatic reduction in bundle size**: + +- Previous size: **~26KB** +- New size: **~7KB** + +That's roughly a **70% reduction**! 🚀 + +This improvement translates to quicker load times and lower memory usage for your projects. + +### Benchmarks + +The following benchmarks highlight the reduction in bundle size. + +Bundle size comparison between a Vite project and a Next.js project using bundler analyzers: + +![Bundle Size Reduction 1](./assets/2024-11-10-compare-stat-size-chart.png) + +Comparing the Gzipped sizes: +![Bundle Size Reduction 2](./assets/2024-11-10-compare-Gzipped-size-chart.png) + +### Better Treemap visibility + +As you can see below, you are now able to analyze the treemap for the package's functions, giving you better insight into what’s included in your bundle. + +Before, you could only see the top level package in the treemap: +![Treemap 1 before](./assets/2024-11-10-treemap-before.png) + +Now, you can see the individual functions in the treemap: +![Treemap 2](./assets/2024-11-10-treemap-after.png) + +## Alpha Release: What to Expect + +As this is an alpha version, there might be changes to the package structure and API before the stable release. + +I'm taking this opportunity to: + +- Review the current API: Does it still make sense? Can it be improved or simplified? +- Gather feedback from the community. +- Ensure the package meets modern best practices. + +I want to ensure any necessary breaking changes are made in this release to avoid frequent major version updates, as that’s never fun for anyone. + +## When Will v4 Be Stable? + +Honestly? **I’m not sure yet**. It will depend entirely on how much time I can spare inbetween work, life and social commitments. Rest assured, I’ll keep you updated as things progress. + +## How to Install + +If you would like to try out the alpha version, you can install it using the following command: + +```bash +npm install react-currency-input-field@alpha + +yarn add react-currency-input-field@alpha + +pnpm add react-currency-input-field@alpha +``` + +Please note that this version is still in development and may contain bugs or incomplete features. + +**Use it at your own risk!** + +## Feedback Welcome + +Your input is welcomed. If you encounter any issues or have suggestions, feel free to open an issue on [GitHub](https://github.com/cchanxzy/react-currency-input-field/issues). Let's make this package even better together! + +Thank you for your support! 🙌 + +## Support the Project + +If you’ve found **react-currency-input-field** valuable, consider supporting its ongoing development through [GitHub Sponsors](https://github.com/sponsors/cchanxzy). + +I started this project in 2017 as a junior-to-mid level developer, and it’s been incredible to see it grow and be used by so many. Over the years, both the project and I have matured, but with increased responsibilities in my professional and personal life, maintaining the same level of commitment has become a challenge. + +While the project remains MIT licensed and freely available, your support can help ensure its continued maintenance and improvement. Whether through contributions or sponsorships, your help is greatly appreciated! + +Please refer to the [support doc](https://github.com/cchanxzy/react-currency-input-field/blob/main/docs/SUPPORT.md) for more information. + +--- + +**Chun** +_Maintainer_ +_Date: 2024-11-10_ diff --git a/package.json b/package.json index bafe0bd..6a0b8a5 100644 --- a/package.json +++ b/package.json @@ -14,8 +14,8 @@ "require": "./dist/cjs/index.js" } }, - "main": "dist/index.cjs.js", - "module": "dist/index.esm.js", + "main": "./dist/cjs/index.js", + "module": "./dist/esm/index.js", "types": "dist/index.d.ts", "homepage": "https://github.com/cchanxzy/react-currency-input-field", "scripts": { diff --git a/src/index.ts b/src/index.ts index 0a63e09..bb25a17 100644 --- a/src/index.ts +++ b/src/index.ts @@ -3,6 +3,7 @@ import CurrencyInput from './components/CurrencyInput'; export type { CurrencyInputProps, CurrencyInputOnChangeValues, + IntlConfig, } from './components/CurrencyInputProps'; export { CurrencyInput } from './components/CurrencyInput';