@number-flow/react - npm Package Compare versions

Comparing version 0.3.2 to 0.3.3

dist/index.d.ts

 import * as React from 'react';
 import { NumberFlowLite, Value, Format, Props } from 'number-flow';
-export { Format, Trend, Value } from 'number-flow';
+export { Format, NumberPartType, Trend, Value } from 'number-flow';
 
-declare const OBSERVED_ATTRIBUTES: readonly ["parts"];
+declare const OBSERVED_ATTRIBUTES: readonly ["data"];
 type ObservedAttribute = (typeof OBSERVED_ATTRIBUTES)[number];
 declare class NumberFlowElement extends NumberFlowLite {
-    static observedAttributes: readonly ["parts"] | never[];
+    static observedAttributes: readonly ["data"] | never[];
     attributeChangedCallback(attr: ObservedAttribute, _oldValue: string, newValue: string): void;
@@ -21,2 +21,4 @@ }
     format?: Format;
+    prefix?: string;
+    suffix?: string;
 };
@@ -32,2 +34,4 @@ declare const NumberFlow: React.ForwardRefExoticComponent<React.HTMLAttributes<NumberFlowElement> & Partial<Props> & {
     format?: Format;
+    prefix?: string;
+    suffix?: string;
 } & React.RefAttributes<NumberFlowElement>>;
@@ -34,0 +38,0 @@

dist/index.js

@@ -50,3 +50,3 @@ "use strict";
 var isReact19 = REACT_MAJOR >= 19;
-var OBSERVED_ATTRIBUTES = ["parts"];
+var OBSERVED_ATTRIBUTES = ["data"];
 var NumberFlowElement = class extends import_number_flow.NumberFlowLite {
@@ -60,3 +60,3 @@ attributeChangedCallback(attr, _oldValue, newValue) {
 var formatters = {};
-var serializeParts = isReact19 ? (p) => p : JSON.stringify;
+var serializeData = isReact19 ? (p) => p : JSON.stringify;
 function splitProps(props) {
@@ -93,11 +93,11 @@ const {
   }
-  // Update the non-`parts` props to avoid JSON serialization
-  // Parts needs to be set in render still:
-  updateNonPartsProps(prevProps) {
+  // Update the non-`data` props to avoid JSON serialization
+  // Data needs to be set in render still:
+  updateNonDataProps(prevProps) {
     if (!__privateGet(this, _el)) return;
     __privateGet(this, _el).manual = !this.props.isolate;
-    const [nonParts] = splitProps(this.props);
+    const [nonData] = splitProps(this.props);
     Object.assign(
       __privateGet(this, _el),
-      Object.fromEntries(Object.entries(nonParts).filter(([_, v]) => v != null))
+      Object.fromEntries(Object.entries(nonData).filter(([_, v]) => v != null))
     );
@@ -117,10 +117,10 @@ if (prevProps?.onAnimationsStart)
   componentDidMount() {
-    this.updateNonPartsProps();
+    this.updateNonDataProps();
     if (isReact19 && __privateGet(this, _el)) {
-      __privateGet(this, _el).parts = this.props.parts;
+      __privateGet(this, _el).data = this.props.data;
     }
   }
   getSnapshotBeforeUpdate(prevProps) {
-    this.updateNonPartsProps(prevProps);
-    if (this.props.isolate || this.props.animated === false || prevProps.parts === this.props.parts)
+    this.updateNonDataProps(prevProps);
+    if (this.props.isolate || this.props.animated === false || prevProps.data === this.props.data)
       return false;
@@ -138,3 +138,3 @@ __privateGet(this, _el)?.willUpdate();
   render() {
-    const [_, { innerRef, className, parts, willChange, isolate, ...rest }] = splitProps(this.props);
+    const [_, { innerRef, className, data, willChange, isolate, ...rest }] = splitProps(this.props);
     return (
@@ -149,4 +149,6 @@ // @ts-expect-error missing types
           ...rest,
-          dangerouslySetInnerHTML: { __html: (0, import_number_flow.render)({ formatted: parts.formatted, willChange }) },
-          parts: serializeParts(parts)
+          dangerouslySetInnerHTML: {
+            __html: (0, import_number_flow.render)({ valueAsString: data.valueAsString, willChange })
+          },
+          data: serializeData(data)
         }
@@ -158,3 +160,3 @@ )
 _el = new WeakMap();
-var NumberFlow = React.forwardRef(function NumberFlow2({ value, locales, format, ...props }, _ref) {
+var NumberFlow = React.forwardRef(function NumberFlow2({ value, locales, format, prefix, suffix, ...props }, _ref) {
   React.useImperativeHandle(_ref, () => ref.current, []);
@@ -164,3 +166,3 @@ const ref = React.useRef();
   const formatString = React.useMemo(() => format ? JSON.stringify(format) : "", [format]);
-  const parts = React.useMemo(() => {
+  const data = React.useMemo(() => {
     const formatter = formatters[`${localesString}:${formatString}`] ??= new Intl.NumberFormat(
@@ -170,5 +172,5 @@ locales,
     );
-    return (0, import_number_flow.partitionParts)(value, formatter);
-  }, [value, localesString, formatString]);
-  return /* @__PURE__ */ React.createElement(NumberFlowImpl, { ...props, parts, innerRef: ref });
+    return (0, import_number_flow.formatToData)(value, formatter, prefix, suffix);
+  }, [value, localesString, formatString, prefix, suffix]);
+  return /* @__PURE__ */ React.createElement(NumberFlowImpl, { ...props, data, innerRef: ref });
 });
@@ -175,0 +177,0 @@ var src_default = NumberFlow;

package.json

@@ -6,3 +6,3 @@ {
   },
-  "version": "0.3.2",
+  "version": "0.3.3",
   "author": {
@@ -52,3 +52,3 @@ "name": "Maxwell Barvian",
   "dependencies": {
-    "number-flow": "0.3.7"
+    "number-flow": "0.3.8"
   },
@@ -55,0 +55,0 @@ "devDependencies": {

No alert changes

Improved metrics

Total package byte prevSize

19904

1.56%

Lines of code

392

2.08%

Dependency changes

• + Added

  number-flow@0.3.8
  (transitive)

• - Removed

  number-flow@0.3.7
  (transitive)

• Updated

  number-flow@0.3.8