@number-flow/react 0.5.3 → 0.5.4

package/dist/index.js

@@ -1,259 +1,50 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+Object.defineProperty(exports, '__esModule', { value: true });
 
-// src/index.tsx
-var index_exports = {};
-__export(index_exports, {
-  NumberFlowElement: () => NumberFlowElement,
-  NumberFlowGroup: () => NumberFlowGroup,
-  default: () => NumberFlow_default,
-  useCanAnimate: () => useCanAnimate,
-  useIsSupported: () => useIsSupported,
-  usePrefersReducedMotion: () => usePrefersReducedMotion
-});
-module.exports = __toCommonJS(index_exports);
-var React2 = __toESM(require("react"));
-var import_number_flow2 = require("number-flow");
-__reExport(index_exports, require("number-flow/plugins"), module.exports);
+var React = require('react');
+var numberFlow = require('number-flow');
+var plugins = require('number-flow/plugins');
+var NumberFlowClient = require('./NumberFlow-client-CMnZwURp.js');
 
-// src/NumberFlow.tsx
-var React = __toESM(require("react"));
-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", "digits"];
-var NumberFlowElement = class extends import_number_flow.NumberFlowLite {
-  attributeChangedCallback(attr, _oldValue, newValue) {
-    this[attr] = JSON.parse(newValue);
-  }
-};
-NumberFlowElement.observedAttributes = isReact19 ? [] : OBSERVED_ATTRIBUTES;
-(0, import_number_flow.define)("number-flow-react", NumberFlowElement);
-var formatters = {};
-var 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
-  ];
-}
-var NumberFlowImpl = class extends React.Component {
-  constructor(props) {
-    super(props);
-    this.handleRef = this.handleRef.bind(this);
-  }
-  // 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]) => {
-      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) {
-      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 ? "" : void 0,
-          class: className,
-          "aria-label": data.valueAsString,
-          ...rest,
-          role: "img",
-          dangerouslySetInnerHTML: { __html: import_esm_env.BROWSER ? "" : (0, import_number_flow.renderInnerHTML)(data) },
-          suppressHydrationWarning: true,
-          digits: serialize(digits),
-          data: serialize(data)
-        }
-      )
-    );
-  }
-};
-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(() => {
-    const formatter = formatters[`${localesString}:${formatString}`] ??= new Intl.NumberFormat(
-      locales,
-      format
-    );
-    return (0, import_number_flow.formatToData)(value, formatter, prefix, suffix);
-  }, [value, localesString, formatString, prefix, suffix]);
-  return /* @__PURE__ */ React.createElement(NumberFlowImpl, { ...props, group, data, innerRef: ref });
-});
-var NumberFlow_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 _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;
 }
 
-// src/index.tsx
-var useIsSupported = () => React2.useSyncExternalStore(
-  () => () => {
-  },
-  // this value doesn't change, but it's useful to specify a different SSR value:
-  () => import_number_flow2.canAnimate,
-  () => false
-);
-var usePrefersReducedMotion = () => React2.useSyncExternalStore(
-  (cb) => {
-    import_number_flow2.prefersReducedMotion?.addEventListener("change", cb);
-    return () => import_number_flow2.prefersReducedMotion?.removeEventListener("change", cb);
-  },
-  () => import_number_flow2.prefersReducedMotion.matches,
-  () => false
-);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+const useIsSupported = ()=>React__namespace.useSyncExternalStore(()=>()=>{}, ()=>numberFlow.canAnimate, ()=>false);
+const usePrefersReducedMotion = ()=>React__namespace.useSyncExternalStore((cb)=>{
+        numberFlow.prefersReducedMotion?.addEventListener('change', cb);
+        return ()=>numberFlow.prefersReducedMotion?.removeEventListener('change', cb);
+    }, ()=>numberFlow.prefersReducedMotion.matches, ()=>false);
 function useCanAnimate({ respectMotionPreference = true } = {}) {
-  const isSupported = useIsSupported();
-  const reducedMotion = usePrefersReducedMotion();
-  return isSupported && (!respectMotionPreference || !reducedMotion);
+    const isSupported = useIsSupported();
+    const reducedMotion = usePrefersReducedMotion();
+    return isSupported && (!respectMotionPreference || !reducedMotion);
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  NumberFlowElement,
-  NumberFlowGroup,
-  useCanAnimate,
-  useIsSupported,
-  usePrefersReducedMotion,
-  ...require("number-flow/plugins")
+
+exports.NumberFlowElement = NumberFlowClient.NumberFlowElement;
+exports.NumberFlowGroup = NumberFlowClient.NumberFlowGroup;
+exports.default = NumberFlowClient.NumberFlow;
+exports.useCanAnimate = useCanAnimate;
+exports.useIsSupported = useIsSupported;
+exports.usePrefersReducedMotion = usePrefersReducedMotion;
+Object.keys(plugins).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return plugins[k]; }
+	});
 });

package/dist/index.mjs

@@ -1,41 +1,17 @@
-import {
-  NumberFlowElement,
-  NumberFlowGroup,
-  NumberFlow_default
-} from "./chunk-44AMDIF5.mjs";
+import * as React from 'react';
+import { canAnimate, prefersReducedMotion } from 'number-flow';
+export * from 'number-flow/plugins';
+export { a as NumberFlowElement, b as NumberFlowGroup, N as default } from './NumberFlow-client-CHWbu7lx.mjs';
 
-// src/index.tsx
-import * as React from "react";
-import {
-  prefersReducedMotion as _prefersReducedMotion,
-  canAnimate as _canAnimate
-} from "number-flow";
-export * from "number-flow/plugins";
-var useIsSupported = () => React.useSyncExternalStore(
-  () => () => {
-  },
-  // this value doesn't change, but it's useful to specify a different SSR value:
-  () => _canAnimate,
-  () => false
-);
-var usePrefersReducedMotion = () => React.useSyncExternalStore(
-  (cb) => {
-    _prefersReducedMotion?.addEventListener("change", cb);
-    return () => _prefersReducedMotion?.removeEventListener("change", cb);
-  },
-  () => _prefersReducedMotion.matches,
-  () => false
-);
+const useIsSupported = ()=>React.useSyncExternalStore(()=>()=>{}, ()=>canAnimate, ()=>false);
+const usePrefersReducedMotion = ()=>React.useSyncExternalStore((cb)=>{
+        prefersReducedMotion?.addEventListener('change', cb);
+        return ()=>prefersReducedMotion?.removeEventListener('change', cb);
+    }, ()=>prefersReducedMotion.matches, ()=>false);
 function useCanAnimate({ respectMotionPreference = true } = {}) {
-  const isSupported = useIsSupported();
-  const reducedMotion = usePrefersReducedMotion();
-  return isSupported && (!respectMotionPreference || !reducedMotion);
+    const isSupported = useIsSupported();
+    const reducedMotion = usePrefersReducedMotion();
+    return isSupported && (!respectMotionPreference || !reducedMotion);
 }
-export {
-  NumberFlowElement,
-  NumberFlowGroup,
-  NumberFlow_default as default,
-  useCanAnimate,
-  useIsSupported,
-  usePrefersReducedMotion
-};
+
+export { useCanAnimate, useIsSupported, usePrefersReducedMotion };

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.5.3",
+  "version": "0.5.4",
   "author": {
     "name": "Maxwell Barvian",
     "email": "max@barvian.me",
@@ -56,17 +56,17 @@
     "@types/node": "^22.7.9",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "bunchee": "^6.3.1",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "tsup": "^8.3.5"
+    "react-dom": "^18.3.1"
   },
   "peerDependencies": {
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19"
   },
   "scripts": {
-    "build": "tsup --tsconfig tsconfig.build.json",
-    "dev": "tsup --watch",
+    "build": "bunchee --tsconfig tsconfig.build.json",
+    "dev": "bunchee --watch",
     "test": "pnpm -r --workspace-concurrency 1 --filter=\"./test/apps/*\" test"
   }
 }

package/dist/NumberFlow.d.mts

@@ -1,40 +0,0 @@
-import * as React from 'react';
-import { NumberFlowLite, Value, Format, Props } from 'number-flow';
-
-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;
-
-export { NumberFlowElement, NumberFlowGroup, type NumberFlowProps, NumberFlow as default };

package/dist/NumberFlow.d.ts

@@ -1,40 +0,0 @@
-import * as React from 'react';
-import { NumberFlowLite, Value, Format, Props } from 'number-flow';
-
-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;
-
-export { NumberFlowElement, NumberFlowGroup, type NumberFlowProps, NumberFlow as default };