@number-flow/react 0.3.5 → 0.4.1

package/dist/index.d.mts

@@ -2,10 +2,10 @@ import * as React from 'react';
 import { NumberFlowLite, Value, Format, Props } from 'number-flow';
 export { Format, NumberPartType, Trend, Value } from 'number-flow';
 
-declare const OBSERVED_ATTRIBUTES: readonly ["data"];
+declare const OBSERVED_ATTRIBUTES: readonly ["data", "digits"];
 type ObservedAttribute = (typeof OBSERVED_ATTRIBUTES)[number];
 declare class NumberFlowElement extends NumberFlowLite {
-    static observedAttributes: readonly ["data"] | never[];
+    static observedAttributes: readonly ["data", "digits"] | never[];
     attributeChangedCallback(attr: ObservedAttribute, _oldValue: string, newValue: string): void;
 }
 type BaseProps = React.HTMLAttributes<NumberFlowElement> & Partial<Props> & {
@@ -34,8 +34,11 @@ declare const NumberFlow: React.ForwardRefExoticComponent<React.HTMLAttributes<N
     suffix?: string;
 } & React.RefAttributes<NumberFlowElement>>;
 
+declare function NumberFlowGroup({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
 declare function useCanAnimate({ respectMotionPreference }?: {
     respectMotionPreference?: boolean | undefined;
 }): boolean;
 
-export { NumberFlowElement, type NumberFlowProps, NumberFlow as default, useCanAnimate };
+export { NumberFlowElement, NumberFlowGroup, type NumberFlowProps, NumberFlow as default, useCanAnimate };

package/dist/index.d.ts

@@ -2,10 +2,10 @@ import * as React from 'react';
 import { NumberFlowLite, Value, Format, Props } from 'number-flow';
 export { Format, NumberPartType, Trend, Value } from 'number-flow';
 
-declare const OBSERVED_ATTRIBUTES: readonly ["data"];
+declare const OBSERVED_ATTRIBUTES: readonly ["data", "digits"];
 type ObservedAttribute = (typeof OBSERVED_ATTRIBUTES)[number];
 declare class NumberFlowElement extends NumberFlowLite {
-    static observedAttributes: readonly ["data"] | never[];
+    static observedAttributes: readonly ["data", "digits"] | never[];
     attributeChangedCallback(attr: ObservedAttribute, _oldValue: string, newValue: string): void;
 }
 type BaseProps = React.HTMLAttributes<NumberFlowElement> & Partial<Props> & {
@@ -34,8 +34,11 @@ declare const NumberFlow: React.ForwardRefExoticComponent<React.HTMLAttributes<N
     suffix?: string;
 } & React.RefAttributes<NumberFlowElement>>;
 
+declare function NumberFlowGroup({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
 declare function useCanAnimate({ respectMotionPreference }?: {
     respectMotionPreference?: boolean | undefined;
 }): boolean;
 
-export { NumberFlowElement, type NumberFlowProps, NumberFlow as default, useCanAnimate };
+export { NumberFlowElement, NumberFlowGroup, type NumberFlowProps, NumberFlow as default, useCanAnimate };

package/dist/index.js

@@ -6,9 +6,6 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -30,15 +27,12 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 
 // src/index.tsx
 var src_exports = {};
 __export(src_exports, {
   NumberFlowElement: () => NumberFlowElement,
+  NumberFlowGroup: () => NumberFlowGroup,
   default: () => src_default,
   useCanAnimate: () => useCanAnimate
 });
@@ -48,7 +42,7 @@ var import_number_flow = require("number-flow");
 var import_esm_env = require("esm-env");
 var REACT_MAJOR = parseInt(React.version.match(/^(\d+)\./)?.[1]);
 var isReact19 = REACT_MAJOR >= 19;
-var OBSERVED_ATTRIBUTES = ["data"];
+var OBSERVED_ATTRIBUTES = ["data", "digits"];
 var NumberFlowElement = class extends import_number_flow.NumberFlowLite {
   attributeChangedCallback(attr, _oldValue, newValue) {
     this[attr] = JSON.parse(newValue);
@@ -57,7 +51,7 @@ var NumberFlowElement = class extends import_number_flow.NumberFlowLite {
 NumberFlowElement.observedAttributes = isReact19 ? [] : OBSERVED_ATTRIBUTES;
 (0, import_number_flow.define)("number-flow-react", NumberFlowElement);
 var formatters = {};
-var serializeData = isReact19 ? (p) => p : JSON.stringify;
+var serialize = isReact19 ? (p) => p : JSON.stringify;
 function splitProps(props) {
   const {
     transformTiming,
@@ -82,54 +76,56 @@ function splitProps(props) {
     rest
   ];
 }
-var _el;
 var NumberFlowImpl = class extends React.Component {
   constructor(props) {
     super(props);
-    __privateAdd(this, _el);
     this.handleRef = this.handleRef.bind(this);
   }
   // 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;
+  updateProperties(prevProps) {
+    if (!this.el) return;
+    this.el.manual = !this.props.isolate;
     const [nonData] = splitProps(this.props);
-    Object.assign(
-      __privateGet(this, _el),
-      Object.fromEntries(Object.entries(nonData).filter(([_, v]) => v != null))
-    );
+    Object.entries(nonData).forEach(([k, v]) => {
+      this.el[k] = v ?? NumberFlowElement.defaultProps[k];
+    });
     if (prevProps?.onAnimationsStart)
-      __privateGet(this, _el).removeEventListener("animationsstart", prevProps.onAnimationsStart);
+      this.el.removeEventListener("animationsstart", prevProps.onAnimationsStart);
     if (this.props.onAnimationsStart)
-      __privateGet(this, _el).addEventListener("animationsstart", this.props.onAnimationsStart);
+      this.el.addEventListener("animationsstart", this.props.onAnimationsStart);
     if (prevProps?.onAnimationsFinish)
-      __privateGet(this, _el).removeEventListener(
-        "animationsfinish",
-        prevProps.onAnimationsFinish
-      );
+      this.el.removeEventListener("animationsfinish", prevProps.onAnimationsFinish);
     if (this.props.onAnimationsFinish)
-      __privateGet(this, _el).addEventListener("animationsfinish", this.props.onAnimationsFinish);
+      this.el.addEventListener("animationsfinish", this.props.onAnimationsFinish);
   }
   componentDidMount() {
-    this.updateNonDataProps();
-    if (isReact19 && __privateGet(this, _el)) {
-      __privateGet(this, _el).data = this.props.data;
+    this.updateProperties();
+    if (isReact19 && this.el) {
+      this.el.digits = this.props.digits;
+      this.el.data = this.props.data;
     }
   }
   getSnapshotBeforeUpdate(prevProps) {
-    this.updateNonDataProps(prevProps);
-    if (this.props.isolate || this.props.animated === false || prevProps.data === this.props.data)
-      return false;
-    __privateGet(this, _el)?.willUpdate();
-    return true;
+    this.updateProperties(prevProps);
+    if (prevProps.data !== this.props.data) {
+      if (this.props.group) {
+        this.props.group.willUpdate();
+        return () => this.props.group?.didUpdate();
+      }
+      if (!this.props.isolate) {
+        this.el?.willUpdate();
+        return () => this.el?.didUpdate();
+      }
+    }
+    return null;
   }
-  componentDidUpdate(_, __, snapshot) {
-    if (snapshot) __privateGet(this, _el)?.didUpdate();
+  componentDidUpdate(_, __, didUpdate) {
+    didUpdate?.();
   }
   handleRef(el) {
     if (this.props.innerRef) this.props.innerRef.current = el;
-    __privateSet(this, _el, el);
+    this.el = el;
   }
   render() {
     const [
@@ -140,6 +136,7 @@ var NumberFlowImpl = class extends React.Component {
         data,
         willChange,
         isolate,
+        digits,
         onAnimationsStart,
         onAnimationsFinish,
         ...rest
@@ -158,16 +155,18 @@ var NumberFlowImpl = class extends React.Component {
           role: "img",
           dangerouslySetInnerHTML: { __html: import_esm_env.BROWSER ? "" : (0, import_number_flow.renderInnerHTML)(data) },
           suppressHydrationWarning: true,
-          data: serializeData(data)
+          digits: serialize(digits),
+          data: serialize(data)
         }
       )
     );
   }
 };
-_el = new WeakMap();
 var NumberFlow = React.forwardRef(function NumberFlow2({ value, locales, format, prefix, suffix, ...props }, _ref) {
   React.useImperativeHandle(_ref, () => ref.current, []);
   const ref = React.useRef();
+  const group = React.useContext(NumberFlowGroupContext);
+  group?.useRegister(ref);
   const localesString = React.useMemo(() => locales ? JSON.stringify(locales) : "", [locales]);
   const formatString = React.useMemo(() => format ? JSON.stringify(format) : "", [format]);
   const data = React.useMemo(() => {
@@ -177,11 +176,50 @@ var NumberFlow = React.forwardRef(function NumberFlow2({ value, locales, format,
     );
     return (0, import_number_flow.formatToData)(value, formatter, prefix, suffix);
   }, [value, localesString, formatString, prefix, suffix]);
-  return /* @__PURE__ */ React.createElement(NumberFlowImpl, { ...props, data, innerRef: ref });
+  return /* @__PURE__ */ React.createElement(NumberFlowImpl, { ...props, group, data, innerRef: ref });
 });
 var src_default = NumberFlow;
+var NumberFlowGroupContext = React.createContext(void 0);
+function NumberFlowGroup({ children }) {
+  const flows = React.useRef(/* @__PURE__ */ new Set());
+  const updating = React.useRef(false);
+  const pending = React.useRef(/* @__PURE__ */ new WeakMap());
+  const value = React.useMemo(
+    () => ({
+      useRegister(ref) {
+        React.useEffect(() => {
+          flows.current.add(ref);
+          return () => {
+            flows.current.delete(ref);
+          };
+        }, []);
+      },
+      willUpdate() {
+        if (updating.current) return;
+        updating.current = true;
+        flows.current.forEach((ref) => {
+          const f = ref.current;
+          if (!f || !f.created) return;
+          f.willUpdate();
+          pending.current.set(f, true);
+        });
+      },
+      didUpdate() {
+        flows.current.forEach((ref) => {
+          const f = ref.current;
+          if (!f || !pending.current.get(f)) return;
+          f.didUpdate();
+          pending.current.delete(f);
+        });
+        updating.current = false;
+      }
+    }),
+    []
+  );
+  return /* @__PURE__ */ React.createElement(NumberFlowGroupContext.Provider, { value }, children);
+}
 function useCanAnimate({ respectMotionPreference = true } = {}) {
-  const [canAnimate, setCanAnimate] = React.useState(import_number_flow.canAnimate);
+  const [canAnimate, setCanAnimate] = React.useState(false);
   const [reducedMotion, setReducedMotion] = React.useState(false);
   React.useEffect(() => {
     setCanAnimate(import_number_flow.canAnimate);
@@ -202,5 +240,6 @@ function useCanAnimate({ respectMotionPreference = true } = {}) {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   NumberFlowElement,
+  NumberFlowGroup,
   useCanAnimate
 });

package/dist/index.mjs

@@ -1,11 +1,4 @@
 "use client";
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 
 // src/index.tsx
 import * as React from "react";
@@ -20,7 +13,7 @@ import {
 import { BROWSER } from "esm-env";
 var REACT_MAJOR = parseInt(React.version.match(/^(\d+)\./)?.[1]);
 var isReact19 = REACT_MAJOR >= 19;
-var OBSERVED_ATTRIBUTES = ["data"];
+var OBSERVED_ATTRIBUTES = ["data", "digits"];
 var NumberFlowElement = class extends NumberFlowLite {
   attributeChangedCallback(attr, _oldValue, newValue) {
     this[attr] = JSON.parse(newValue);
@@ -29,7 +22,7 @@ var NumberFlowElement = class extends NumberFlowLite {
 NumberFlowElement.observedAttributes = isReact19 ? [] : OBSERVED_ATTRIBUTES;
 define("number-flow-react", NumberFlowElement);
 var formatters = {};
-var serializeData = isReact19 ? (p) => p : JSON.stringify;
+var serialize = isReact19 ? (p) => p : JSON.stringify;
 function splitProps(props) {
   const {
     transformTiming,
@@ -54,54 +47,56 @@ function splitProps(props) {
     rest
   ];
 }
-var _el;
 var NumberFlowImpl = class extends React.Component {
   constructor(props) {
     super(props);
-    __privateAdd(this, _el);
     this.handleRef = this.handleRef.bind(this);
   }
   // 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;
+  updateProperties(prevProps) {
+    if (!this.el) return;
+    this.el.manual = !this.props.isolate;
     const [nonData] = splitProps(this.props);
-    Object.assign(
-      __privateGet(this, _el),
-      Object.fromEntries(Object.entries(nonData).filter(([_, v]) => v != null))
-    );
+    Object.entries(nonData).forEach(([k, v]) => {
+      this.el[k] = v ?? NumberFlowElement.defaultProps[k];
+    });
     if (prevProps?.onAnimationsStart)
-      __privateGet(this, _el).removeEventListener("animationsstart", prevProps.onAnimationsStart);
+      this.el.removeEventListener("animationsstart", prevProps.onAnimationsStart);
     if (this.props.onAnimationsStart)
-      __privateGet(this, _el).addEventListener("animationsstart", this.props.onAnimationsStart);
+      this.el.addEventListener("animationsstart", this.props.onAnimationsStart);
     if (prevProps?.onAnimationsFinish)
-      __privateGet(this, _el).removeEventListener(
-        "animationsfinish",
-        prevProps.onAnimationsFinish
-      );
+      this.el.removeEventListener("animationsfinish", prevProps.onAnimationsFinish);
     if (this.props.onAnimationsFinish)
-      __privateGet(this, _el).addEventListener("animationsfinish", this.props.onAnimationsFinish);
+      this.el.addEventListener("animationsfinish", this.props.onAnimationsFinish);
   }
   componentDidMount() {
-    this.updateNonDataProps();
-    if (isReact19 && __privateGet(this, _el)) {
-      __privateGet(this, _el).data = this.props.data;
+    this.updateProperties();
+    if (isReact19 && this.el) {
+      this.el.digits = this.props.digits;
+      this.el.data = this.props.data;
     }
   }
   getSnapshotBeforeUpdate(prevProps) {
-    this.updateNonDataProps(prevProps);
-    if (this.props.isolate || this.props.animated === false || prevProps.data === this.props.data)
-      return false;
-    __privateGet(this, _el)?.willUpdate();
-    return true;
+    this.updateProperties(prevProps);
+    if (prevProps.data !== this.props.data) {
+      if (this.props.group) {
+        this.props.group.willUpdate();
+        return () => this.props.group?.didUpdate();
+      }
+      if (!this.props.isolate) {
+        this.el?.willUpdate();
+        return () => this.el?.didUpdate();
+      }
+    }
+    return null;
   }
-  componentDidUpdate(_, __, snapshot) {
-    if (snapshot) __privateGet(this, _el)?.didUpdate();
+  componentDidUpdate(_, __, didUpdate) {
+    didUpdate?.();
   }
   handleRef(el) {
     if (this.props.innerRef) this.props.innerRef.current = el;
-    __privateSet(this, _el, el);
+    this.el = el;
   }
   render() {
     const [
@@ -112,6 +107,7 @@ var NumberFlowImpl = class extends React.Component {
         data,
         willChange,
         isolate,
+        digits,
         onAnimationsStart,
         onAnimationsFinish,
         ...rest
@@ -130,16 +126,18 @@ var NumberFlowImpl = class extends React.Component {
           role: "img",
           dangerouslySetInnerHTML: { __html: BROWSER ? "" : renderInnerHTML(data) },
           suppressHydrationWarning: true,
-          data: serializeData(data)
+          digits: serialize(digits),
+          data: serialize(data)
         }
       )
     );
   }
 };
-_el = new WeakMap();
 var NumberFlow = React.forwardRef(function NumberFlow2({ value, locales, format, prefix, suffix, ...props }, _ref) {
   React.useImperativeHandle(_ref, () => ref.current, []);
   const ref = React.useRef();
+  const group = React.useContext(NumberFlowGroupContext);
+  group?.useRegister(ref);
   const localesString = React.useMemo(() => locales ? JSON.stringify(locales) : "", [locales]);
   const formatString = React.useMemo(() => format ? JSON.stringify(format) : "", [format]);
   const data = React.useMemo(() => {
@@ -149,11 +147,50 @@ var NumberFlow = React.forwardRef(function NumberFlow2({ value, locales, format,
     );
     return formatToData(value, formatter, prefix, suffix);
   }, [value, localesString, formatString, prefix, suffix]);
-  return /* @__PURE__ */ React.createElement(NumberFlowImpl, { ...props, data, innerRef: ref });
+  return /* @__PURE__ */ React.createElement(NumberFlowImpl, { ...props, group, data, innerRef: ref });
 });
 var src_default = NumberFlow;
+var NumberFlowGroupContext = React.createContext(void 0);
+function NumberFlowGroup({ children }) {
+  const flows = React.useRef(/* @__PURE__ */ new Set());
+  const updating = React.useRef(false);
+  const pending = React.useRef(/* @__PURE__ */ new WeakMap());
+  const value = React.useMemo(
+    () => ({
+      useRegister(ref) {
+        React.useEffect(() => {
+          flows.current.add(ref);
+          return () => {
+            flows.current.delete(ref);
+          };
+        }, []);
+      },
+      willUpdate() {
+        if (updating.current) return;
+        updating.current = true;
+        flows.current.forEach((ref) => {
+          const f = ref.current;
+          if (!f || !f.created) return;
+          f.willUpdate();
+          pending.current.set(f, true);
+        });
+      },
+      didUpdate() {
+        flows.current.forEach((ref) => {
+          const f = ref.current;
+          if (!f || !pending.current.get(f)) return;
+          f.didUpdate();
+          pending.current.delete(f);
+        });
+        updating.current = false;
+      }
+    }),
+    []
+  );
+  return /* @__PURE__ */ React.createElement(NumberFlowGroupContext.Provider, { value }, children);
+}
 function useCanAnimate({ respectMotionPreference = true } = {}) {
-  const [canAnimate, setCanAnimate] = React.useState(_canAnimate);
+  const [canAnimate, setCanAnimate] = React.useState(false);
   const [reducedMotion, setReducedMotion] = React.useState(false);
   React.useEffect(() => {
     setCanAnimate(_canAnimate);
@@ -173,6 +210,7 @@ function useCanAnimate({ respectMotionPreference = true } = {}) {
 }
 export {
   NumberFlowElement,
+  NumberFlowGroup,
   src_default as default,
   useCanAnimate
 };

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.3.5",
+  "version": "0.4.1",
   "author": {
     "name": "Maxwell Barvian",
     "email": "max@barvian.me",
@@ -49,7 +49,7 @@
   },
   "dependencies": {
     "esm-env": "^1.1.4",
-    "number-flow": "0.3.10"
+    "number-flow": "0.4.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.48.0",