🔔 [Announcement from the creator]: Deprecated and New Start

[nosir]

Hi everyone,

As you may have noticed, this repo has not been updated for a while.

Firstly, I'd extend my apologies for the lack of updates and improvements. There have been personal circumstances that have impacted my ability to maintain this, that I don't wish to talk about that too much. The other challenges have been stemming from the project itself.

The code was originally written using a JavaScript pattern that is almost 15 years old, and the design has so many inherent flaws. Specifically, the implementation wrapped all the DOM manipulation together in the repo with all the formatting functions. This has been a significant obstacle and has resulted in numerous issues while trying to maintain the library.

E.g. Integrating this with other libraries like ReactJS, Angular, Vue, Ember, and keep updating with all the new releases has been extremely hard, and I'm sure this is not the right path for this lib.
Fixing the cursor moving issue has been another problematic area due to the input field being constantly modified in the lifecycle, causing the cursor fixing logic to be scattered everywhere, every time someone touches one piece, submitted a PR, it breaks another part.

Given these challenges, I felt it increasingly counterproductive to continue working on the old version and patching it with more and more temporary fixes.

TLDR; So what's happening now for this library?

I've started a new zen version of cleave, and have migrated most part of the library to it: cleave-zen
There are some key changes:

• The entire codebase has been rewritten with TypeScript and ES6, bringing it up to date with modern Front-End practices.
• No more DOM input field value manipulation. The new lib only exposes the formatting function, simplifying its usage and reducing potential issues.
• The library is now more versatile and can be used with Node.js, browsers, React, Angular, and more. Really, it's just the formatting method you can call from anywhere in your codebase.
• A separate function for Cursor Tracker has been created to accept input reference, but only to address the typical cursor moving around issues.
• A new example repo: cleave-zen-examples has all the usages examples to help user to user this with any environment

It's already published to NPM if you're keen to play around with it, the basic usage for credit card formatting as in ReactJS TypeScript project will be something like this:

Looking ahead, I plan to:

• Review still related PRs and issues in the old cleave.js repo and implement it within the new library.
• I have not included phone formatting in cleave-zen as it is heavily dependent on the Google lib phone library. And the entire formatting way of that doesn't use the same function as the other types are using, and I am considering creating a separate library to handle this specific function.
• A todo list has been created in the new lib

I can't promise anything, sadly promises are often easier made than kept in life, so again I truly appreciate your understanding, and hope to keep delivering a more versatile version of the lib with cleave-zen.

Best
Max