@number-flow/react 0.5.3 → 0.5.5

package/dist/NumberFlow-client-CHWbu7lx.mjs

@@ -0,0 +1,179 @@
+'use client';
+import * as React from 'react';
+import { define, NumberFlowLite, formatToData, renderInnerHTML } from 'number-flow';
+import { BROWSER } from 'esm-env';
+
+const REACT_MAJOR = parseInt(React.version.match(/^(\d+)\./)?.[1]);
+const isReact19 = REACT_MAJOR >= 19;
+// Can't wait to not have to do this in React 19:
+const OBSERVED_ATTRIBUTES = [
+    'data',
+    'digits'
+];
+class NumberFlowElement extends NumberFlowLite {
+    attributeChangedCallback(attr, _oldValue, newValue) {
+        this[attr] = JSON.parse(newValue);
+    }
+}
+NumberFlowElement.observedAttributes = isReact19 ? [] : OBSERVED_ATTRIBUTES;
+define('number-flow-react', NumberFlowElement);
+// You're supposed to cache these between uses:
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString
+// Serialize to strings b/c React:
+const formatters = {};
+// Tiny workaround to support React 19 until it's released:
+const serialize = isReact19 ? (p)=>p : JSON.stringify;
+function splitProps(props) {
+    const { transformTiming, spinTiming, opacityTiming, animated, respectMotionPreference, trend, plugins, ...rest } = props;
+    return [
+        {
+            transformTiming,
+            spinTiming,
+            opacityTiming,
+            animated,
+            respectMotionPreference,
+            trend,
+            plugins
+        },
+        rest
+    ];
+}
+// We need a class component to use getSnapshotBeforeUpdate:
+class NumberFlowImpl extends React.Component {
+    // Update the non-`data` props to avoid JSON serialization
+    // Data needs to be set in render still:
+    updateProperties(prevProps) {
+        if (!this.el) return;
+        this.el.manual = !this.props.isolate;
+        const [nonData] = splitProps(this.props);
+        Object.entries(nonData).forEach(([k, v])=>{
+            // @ts-ignore
+            this.el[k] = v ?? NumberFlowElement.defaultProps[k];
+        });
+        if (prevProps?.onAnimationsStart) this.el.removeEventListener('animationsstart', prevProps.onAnimationsStart);
+        if (this.props.onAnimationsStart) this.el.addEventListener('animationsstart', this.props.onAnimationsStart);
+        if (prevProps?.onAnimationsFinish) this.el.removeEventListener('animationsfinish', prevProps.onAnimationsFinish);
+        if (this.props.onAnimationsFinish) this.el.addEventListener('animationsfinish', this.props.onAnimationsFinish);
+    }
+    componentDidMount() {
+        this.updateProperties();
+        if (isReact19 && this.el) {
+            // React 19 needs this because the attributeChangedCallback isn't called:
+            this.el.digits = this.props.digits;
+            this.el.data = this.props.data;
+        }
+    }
+    getSnapshotBeforeUpdate(prevProps) {
+        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(_, __, didUpdate) {
+        didUpdate?.();
+    }
+    handleRef(el) {
+        if (this.props.innerRef) this.props.innerRef.current = el;
+        this.el = el;
+    }
+    render() {
+        const [_, { innerRef, className, data, willChange, isolate, group, digits, onAnimationsStart, onAnimationsFinish, ...rest }] = splitProps(this.props);
+        return(// @ts-expect-error missing types
+        /*#__PURE__*/ React.createElement("number-flow-react", {
+            ref: this.handleRef,
+            "data-will-change": willChange ? '' : undefined,
+            // Have to rename this:
+            class: className,
+            "aria-label": data.valueAsString,
+            ...rest,
+            role: "img",
+            dangerouslySetInnerHTML: {
+                __html: BROWSER ? '' : renderInnerHTML(data)
+            },
+            suppressHydrationWarning: true,
+            digits: serialize(digits),
+            // Make sure data is set last, everything else is updated:
+            data: serialize(data)
+        }));
+    }
+    constructor(props){
+        super(props);
+        this.handleRef = this.handleRef.bind(this);
+    }
+}
+const NumberFlow = /*#__PURE__*/ React.forwardRef(function NumberFlow({ 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(()=>{
+        const formatter = formatters[`${localesString}:${formatString}`] ??= new Intl.NumberFormat(locales, format);
+        return formatToData(value, formatter, prefix, suffix);
+    }, [
+        value,
+        localesString,
+        formatString,
+        prefix,
+        suffix
+    ]);
+    return /*#__PURE__*/ React.createElement(NumberFlowImpl, {
+        ...props,
+        group: group,
+        data: data,
+        innerRef: ref
+    });
+});
+const NumberFlowGroupContext = /*#__PURE__*/ React.createContext(undefined);
+function NumberFlowGroup({ children }) {
+    const flows = React.useRef(new Set());
+    const updating = React.useRef(false);
+    const pending = React.useRef(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: value
+    }, children);
+}
+
+export { NumberFlow as N, NumberFlowElement as a, NumberFlowGroup as b };

package/dist/NumberFlow-client-CMnZwURp.js

@@ -0,0 +1,201 @@
+'use client';
+var React = require('react');
+var numberFlow = require('number-flow');
+var esmEnv = require('esm-env');
+
+function _interopNamespace(e) {
+	if (e && e.__esModule) return e;
+	var n = Object.create(null);
+	if (e) {
+		Object.keys(e).forEach(function (k) {
+			if (k !== 'default') {
+				var d = Object.getOwnPropertyDescriptor(e, k);
+				Object.defineProperty(n, k, d.get ? d : {
+					enumerable: true,
+					get: function () { return e[k]; }
+				});
+			}
+		});
+	}
+	n.default = e;
+	return n;
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+const REACT_MAJOR = parseInt(React__namespace.version.match(/^(\d+)\./)?.[1]);
+const isReact19 = REACT_MAJOR >= 19;
+// Can't wait to not have to do this in React 19:
+const OBSERVED_ATTRIBUTES = [
+    'data',
+    'digits'
+];
+class NumberFlowElement extends numberFlow.NumberFlowLite {
+    attributeChangedCallback(attr, _oldValue, newValue) {
+        this[attr] = JSON.parse(newValue);
+    }
+}
+NumberFlowElement.observedAttributes = isReact19 ? [] : OBSERVED_ATTRIBUTES;
+numberFlow.define('number-flow-react', NumberFlowElement);
+// You're supposed to cache these between uses:
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString
+// Serialize to strings b/c React:
+const formatters = {};
+// Tiny workaround to support React 19 until it's released:
+const serialize = isReact19 ? (p)=>p : JSON.stringify;
+function splitProps(props) {
+    const { transformTiming, spinTiming, opacityTiming, animated, respectMotionPreference, trend, plugins, ...rest } = props;
+    return [
+        {
+            transformTiming,
+            spinTiming,
+            opacityTiming,
+            animated,
+            respectMotionPreference,
+            trend,
+            plugins
+        },
+        rest
+    ];
+}
+// We need a class component to use getSnapshotBeforeUpdate:
+class NumberFlowImpl extends React__namespace.Component {
+    // Update the non-`data` props to avoid JSON serialization
+    // Data needs to be set in render still:
+    updateProperties(prevProps) {
+        if (!this.el) return;
+        this.el.manual = !this.props.isolate;
+        const [nonData] = splitProps(this.props);
+        Object.entries(nonData).forEach(([k, v])=>{
+            // @ts-ignore
+            this.el[k] = v ?? NumberFlowElement.defaultProps[k];
+        });
+        if (prevProps?.onAnimationsStart) this.el.removeEventListener('animationsstart', prevProps.onAnimationsStart);
+        if (this.props.onAnimationsStart) this.el.addEventListener('animationsstart', this.props.onAnimationsStart);
+        if (prevProps?.onAnimationsFinish) this.el.removeEventListener('animationsfinish', prevProps.onAnimationsFinish);
+        if (this.props.onAnimationsFinish) this.el.addEventListener('animationsfinish', this.props.onAnimationsFinish);
+    }
+    componentDidMount() {
+        this.updateProperties();
+        if (isReact19 && this.el) {
+            // React 19 needs this because the attributeChangedCallback isn't called:
+            this.el.digits = this.props.digits;
+            this.el.data = this.props.data;
+        }
+    }
+    getSnapshotBeforeUpdate(prevProps) {
+        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(_, __, didUpdate) {
+        didUpdate?.();
+    }
+    handleRef(el) {
+        if (this.props.innerRef) this.props.innerRef.current = el;
+        this.el = el;
+    }
+    render() {
+        const [_, { innerRef, className, data, willChange, isolate, group, digits, onAnimationsStart, onAnimationsFinish, ...rest }] = splitProps(this.props);
+        return(// @ts-expect-error missing types
+        /*#__PURE__*/ React__namespace.createElement("number-flow-react", {
+            ref: this.handleRef,
+            "data-will-change": willChange ? '' : undefined,
+            // Have to rename this:
+            class: className,
+            "aria-label": data.valueAsString,
+            ...rest,
+            role: "img",
+            dangerouslySetInnerHTML: {
+                __html: esmEnv.BROWSER ? '' : numberFlow.renderInnerHTML(data)
+            },
+            suppressHydrationWarning: true,
+            digits: serialize(digits),
+            // Make sure data is set last, everything else is updated:
+            data: serialize(data)
+        }));
+    }
+    constructor(props){
+        super(props);
+        this.handleRef = this.handleRef.bind(this);
+    }
+}
+const NumberFlow = /*#__PURE__*/ React__namespace.forwardRef(function NumberFlow({ value, locales, format, prefix, suffix, ...props }, _ref) {
+    React__namespace.useImperativeHandle(_ref, ()=>ref.current, []);
+    const ref = React__namespace.useRef();
+    const group = React__namespace.useContext(NumberFlowGroupContext);
+    group?.useRegister(ref);
+    const localesString = React__namespace.useMemo(()=>locales ? JSON.stringify(locales) : '', [
+        locales
+    ]);
+    const formatString = React__namespace.useMemo(()=>format ? JSON.stringify(format) : '', [
+        format
+    ]);
+    const data = React__namespace.useMemo(()=>{
+        const formatter = formatters[`${localesString}:${formatString}`] ??= new Intl.NumberFormat(locales, format);
+        return numberFlow.formatToData(value, formatter, prefix, suffix);
+    }, [
+        value,
+        localesString,
+        formatString,
+        prefix,
+        suffix
+    ]);
+    return /*#__PURE__*/ React__namespace.createElement(NumberFlowImpl, {
+        ...props,
+        group: group,
+        data: data,
+        innerRef: ref
+    });
+});
+const NumberFlowGroupContext = /*#__PURE__*/ React__namespace.createContext(undefined);
+function NumberFlowGroup({ children }) {
+    const flows = React__namespace.useRef(new Set());
+    const updating = React__namespace.useRef(false);
+    const pending = React__namespace.useRef(new WeakMap());
+    const value = React__namespace.useMemo(()=>({
+            useRegister (ref) {
+                React__namespace.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__namespace.createElement(NumberFlowGroupContext.Provider, {
+        value: value
+    }, children);
+}
+
+exports.NumberFlow = NumberFlow;
+exports.NumberFlowElement = NumberFlowElement;
+exports.NumberFlowGroup = NumberFlowGroup;

package/dist/index.d.mts

@@ -1,7 +1,43 @@
 export * from 'number-flow/plugins';
-export { NumberFlowElement, NumberFlowGroup, NumberFlowProps, default } from './NumberFlow.mjs';
+import * as React from 'react';
+import { NumberFlowLite, Value, Format, Props } from 'number-flow';
 export { Format, NumberPartType, Trend, Value } from 'number-flow';
-import 'react';
+
+declare const OBSERVED_ATTRIBUTES: readonly ["data", "digits"];
+type ObservedAttribute = (typeof OBSERVED_ATTRIBUTES)[number];
+declare class NumberFlowElement extends NumberFlowLite {
+    static observedAttributes: readonly ["data", "digits"] | never[];
+    attributeChangedCallback(attr: ObservedAttribute, _oldValue: string, newValue: string): void;
+}
+type BaseProps = React.HTMLAttributes<NumberFlowElement> & Partial<Props> & {
+    isolate?: boolean;
+    willChange?: boolean;
+    onAnimationsStart?: (e: CustomEvent<undefined>) => void;
+    onAnimationsFinish?: (e: CustomEvent<undefined>) => void;
+};
+type NumberFlowProps = BaseProps & {
+    value: Value;
+    locales?: Intl.LocalesArgument;
+    format?: Format;
+    prefix?: string;
+    suffix?: string;
+};
+declare const NumberFlow: React.ForwardRefExoticComponent<React.HTMLAttributes<NumberFlowElement> & Partial<Props> & {
+    isolate?: boolean;
+    willChange?: boolean;
+    onAnimationsStart?: (e: CustomEvent<undefined>) => void;
+    onAnimationsFinish?: (e: CustomEvent<undefined>) => void;
+} & {
+    value: Value;
+    locales?: Intl.LocalesArgument;
+    format?: Format;
+    prefix?: string;
+    suffix?: string;
+} & React.RefAttributes<NumberFlowElement>>;
+
+declare function NumberFlowGroup({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
 
 declare const useIsSupported: () => boolean;
 declare const usePrefersReducedMotion: () => boolean;
@@ -9,4 +45,4 @@ declare function useCanAnimate({ respectMotionPreference }?: {
     respectMotionPreference?: boolean | undefined;
 }): boolean;
 
-export { useCanAnimate, useIsSupported, usePrefersReducedMotion };
+export { NumberFlowElement, NumberFlowGroup, type NumberFlowProps, NumberFlow as default, useCanAnimate, useIsSupported, usePrefersReducedMotion };

package/dist/index.d.ts

@@ -1,7 +1,43 @@
 export * from 'number-flow/plugins';
-export { NumberFlowElement, NumberFlowGroup, NumberFlowProps, default } from './NumberFlow.js';
+import * as React from 'react';
+import { NumberFlowLite, Value, Format, Props } from 'number-flow';
 export { Format, NumberPartType, Trend, Value } from 'number-flow';
-import 'react';
+
+declare const OBSERVED_ATTRIBUTES: readonly ["data", "digits"];
+type ObservedAttribute = (typeof OBSERVED_ATTRIBUTES)[number];
+declare class NumberFlowElement extends NumberFlowLite {
+    static observedAttributes: readonly ["data", "digits"] | never[];
+    attributeChangedCallback(attr: ObservedAttribute, _oldValue: string, newValue: string): void;
+}
+type BaseProps = React.HTMLAttributes<NumberFlowElement> & Partial<Props> & {
+    isolate?: boolean;
+    willChange?: boolean;
+    onAnimationsStart?: (e: CustomEvent<undefined>) => void;
+    onAnimationsFinish?: (e: CustomEvent<undefined>) => void;
+};
+type NumberFlowProps = BaseProps & {
+    value: Value;
+    locales?: Intl.LocalesArgument;
+    format?: Format;
+    prefix?: string;
+    suffix?: string;
+};
+declare const NumberFlow: React.ForwardRefExoticComponent<React.HTMLAttributes<NumberFlowElement> & Partial<Props> & {
+    isolate?: boolean;
+    willChange?: boolean;
+    onAnimationsStart?: (e: CustomEvent<undefined>) => void;
+    onAnimationsFinish?: (e: CustomEvent<undefined>) => void;
+} & {
+    value: Value;
+    locales?: Intl.LocalesArgument;
+    format?: Format;
+    prefix?: string;
+    suffix?: string;
+} & React.RefAttributes<NumberFlowElement>>;
+
+declare function NumberFlowGroup({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
 
 declare const useIsSupported: () => boolean;
 declare const usePrefersReducedMotion: () => boolean;
@@ -9,4 +45,4 @@ declare function useCanAnimate({ respectMotionPreference }?: {
     respectMotionPreference?: boolean | undefined;
 }): boolean;
 
-export { useCanAnimate, useIsSupported, usePrefersReducedMotion };
+export { NumberFlowElement, NumberFlowGroup, type NumberFlowProps, NumberFlow as default, useCanAnimate, useIsSupported, usePrefersReducedMotion };