@number-flow/react 0.2.0 → 0.2.1

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Maxwell Barvian
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,10 +1,11 @@
+[![NumberFlow for React](https://number-flow.barvian.me/preview.webp)](https://number-flow.barvian.me)
+
 # Number Flow for React
 
 A React component to transition & format numbers.
 
-[![NumberFlow for React](https://number-flow.barvian.me/preview.webp)](https://number-flow.barvian.me)
-
 [![NPM Version](https://img.shields.io/npm/v/@number-flow/react.svg)](https://npmjs.com/package/@number-flow/react)
+[![Bundle size](https://badgen.net/bundlephobia/minzip/@number-flow/react@latest)](https://bundlephobia.com/package/@number-flow/react@latest)
 [![Follow @mbarvian](https://img.shields.io/twitter/follow/mbarvian.svg?style=social&label=Follow)](https://x.com/mbarvian)
 
 ---

package/dist/index.js

@@ -45,6 +45,7 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 var React = __toESM(require("react"));
 var import_number_flow = require("number-flow");
+var isReact19 = React.version.startsWith("19.");
 var OBSERVED_ATTRIBUTES = ["parts"];
 var NumberFlowElement = class extends import_number_flow.NumberFlowLite {
   attributeChangedCallback(attr, _oldValue, newValue) {
@@ -54,6 +55,7 @@ var NumberFlowElement = class extends import_number_flow.NumberFlowLite {
 NumberFlowElement.observedAttributes = OBSERVED_ATTRIBUTES;
 NumberFlowElement.define();
 var formatters = {};
+var serializeParts = isReact19 ? (p) => p : JSON.stringify;
 var _el;
 var NumberFlowImpl = class extends React.Component {
   constructor(props) {
@@ -83,15 +85,20 @@ var NumberFlowImpl = class extends React.Component {
       __privateGet(this, _el).addEventListener("animationsfinish", this.props.onAnimationsFinish);
   }
   componentDidMount() {
+    if (isReact19 && __privateGet(this, _el)) {
+      __privateGet(this, _el).parts = this.props.parts;
+    }
     this.updateNonPartsProps();
   }
   getSnapshotBeforeUpdate(prevProps) {
     this.updateNonPartsProps(prevProps);
-    if (!this.props.isolate && prevProps.parts !== this.props.parts) __privateGet(this, _el)?.willUpdate();
-    return null;
+    if (this.props.isolate) return false;
+    if (prevProps.parts === this.props.parts) return false;
+    __privateGet(this, _el)?.willUpdate();
+    return true;
   }
-  componentDidUpdate(prevProps) {
-    if (!this.props.isolate && prevProps.parts !== this.props.parts) __privateGet(this, _el)?.didUpdate();
+  componentDidUpdate(_, __, snapshot) {
+    if (snapshot) __privateGet(this, _el)?.didUpdate();
   }
   handleRef(el) {
     if (this.props.innerRef) this.props.innerRef.current = el;
@@ -122,7 +129,7 @@ var NumberFlowImpl = class extends React.Component {
           "data-will-change": willChange ? "" : void 0,
           class: className,
           ...rest,
-          parts: JSON.stringify(parts)
+          parts: serializeParts(parts)
         },
         /* @__PURE__ */ React.createElement(import_number_flow.SlottedTag, { style: (0, import_number_flow.slottedStyles)({ willChange }) }, parts.formatted)
       )

package/dist/index.mjs

@@ -17,6 +17,7 @@ import {
   prefersReducedMotion,
   canAnimate as _canAnimate
 } from "number-flow";
+var isReact19 = React.version.startsWith("19.");
 var OBSERVED_ATTRIBUTES = ["parts"];
 var NumberFlowElement = class extends NumberFlowLite {
   attributeChangedCallback(attr, _oldValue, newValue) {
@@ -26,6 +27,7 @@ var NumberFlowElement = class extends NumberFlowLite {
 NumberFlowElement.observedAttributes = OBSERVED_ATTRIBUTES;
 NumberFlowElement.define();
 var formatters = {};
+var serializeParts = isReact19 ? (p) => p : JSON.stringify;
 var _el;
 var NumberFlowImpl = class extends React.Component {
   constructor(props) {
@@ -55,15 +57,20 @@ var NumberFlowImpl = class extends React.Component {
       __privateGet(this, _el).addEventListener("animationsfinish", this.props.onAnimationsFinish);
   }
   componentDidMount() {
+    if (isReact19 && __privateGet(this, _el)) {
+      __privateGet(this, _el).parts = this.props.parts;
+    }
     this.updateNonPartsProps();
   }
   getSnapshotBeforeUpdate(prevProps) {
     this.updateNonPartsProps(prevProps);
-    if (!this.props.isolate && prevProps.parts !== this.props.parts) __privateGet(this, _el)?.willUpdate();
-    return null;
+    if (this.props.isolate) return false;
+    if (prevProps.parts === this.props.parts) return false;
+    __privateGet(this, _el)?.willUpdate();
+    return true;
   }
-  componentDidUpdate(prevProps) {
-    if (!this.props.isolate && prevProps.parts !== this.props.parts) __privateGet(this, _el)?.didUpdate();
+  componentDidUpdate(_, __, snapshot) {
+    if (snapshot) __privateGet(this, _el)?.didUpdate();
   }
   handleRef(el) {
     if (this.props.innerRef) this.props.innerRef.current = el;
@@ -94,7 +101,7 @@ var NumberFlowImpl = class extends React.Component {
           "data-will-change": willChange ? "" : void 0,
           class: className,
           ...rest,
-          parts: JSON.stringify(parts)
+          parts: serializeParts(parts)
         },
         /* @__PURE__ */ React.createElement(SlottedTag, { style: slottedStyles({ willChange }) }, parts.formatted)
       )

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.2.0",
+  "version": "0.2.1",
   "author": {
     "name": "Maxwell Barvian",
     "email": "max@barvian.me",
@@ -59,14 +59,12 @@
     "tsup": "^8.2.4"
   },
   "peerDependencies": {
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^18 || ^19.0.0-rc-915b914b3a-20240515",
+    "react-dom": "^18"
   },
   "scripts": {
     "build": "tsup --tsconfig tsconfig.build.json",
     "dev": "tsup --watch",
-    "test": "pnpm -r --workspace-concurrency 1 --filter=\"./test\" test"
+    "test": "pnpm -r --workspace-concurrency 1 --filter=\"./test/apps/*\" test"
   }
 }