@number-flow/react 0.5.5 → 0.5.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{NumberFlow-client-CHWbu7lx.mjs → NumberFlow-client-48rw3j0J.mjs} +2 -4
- package/dist/{NumberFlow-client-CMnZwURp.js → NumberFlow-client-8ThZK4QG.js} +9 -8
- package/dist/index.d.mts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +6 -6
- package/dist/index.mjs +2 -2
- package/package.json +2 -2
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import { define,
|
|
3
|
+
import NumberFlowLite, { define, formatToData, renderInnerHTML } from 'number-flow/lite';
|
|
4
4
|
import { BROWSER } from 'esm-env';
|
|
5
5
|
|
|
6
6
|
const REACT_MAJOR = parseInt(React.version.match(/^(\d+)\./)?.[1]);
|
|
@@ -44,7 +44,7 @@ class NumberFlowImpl extends React.Component {
|
|
|
44
44
|
// Data needs to be set in render still:
|
|
45
45
|
updateProperties(prevProps) {
|
|
46
46
|
if (!this.el) return;
|
|
47
|
-
this.el.
|
|
47
|
+
this.el.batched = !this.props.isolate;
|
|
48
48
|
const [nonData] = splitProps(this.props);
|
|
49
49
|
Object.entries(nonData).forEach(([k, v])=>{
|
|
50
50
|
// @ts-ignore
|
|
@@ -92,9 +92,7 @@ class NumberFlowImpl extends React.Component {
|
|
|
92
92
|
"data-will-change": willChange ? '' : undefined,
|
|
93
93
|
// Have to rename this:
|
|
94
94
|
class: className,
|
|
95
|
-
"aria-label": data.valueAsString,
|
|
96
95
|
...rest,
|
|
97
|
-
role: "img",
|
|
98
96
|
dangerouslySetInnerHTML: {
|
|
99
97
|
__html: BROWSER ? '' : renderInnerHTML(data)
|
|
100
98
|
},
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
var React = require('react');
|
|
3
|
-
var
|
|
3
|
+
var NumberFlowLite = require('number-flow/lite');
|
|
4
4
|
var esmEnv = require('esm-env');
|
|
5
5
|
|
|
6
|
+
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
7
|
+
|
|
6
8
|
function _interopNamespace(e) {
|
|
7
9
|
if (e && e.__esModule) return e;
|
|
8
10
|
var n = Object.create(null);
|
|
@@ -22,6 +24,7 @@ function _interopNamespace(e) {
|
|
|
22
24
|
}
|
|
23
25
|
|
|
24
26
|
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
27
|
+
var NumberFlowLite__default = /*#__PURE__*/_interopDefault(NumberFlowLite);
|
|
25
28
|
|
|
26
29
|
const REACT_MAJOR = parseInt(React__namespace.version.match(/^(\d+)\./)?.[1]);
|
|
27
30
|
const isReact19 = REACT_MAJOR >= 19;
|
|
@@ -30,13 +33,13 @@ const OBSERVED_ATTRIBUTES = [
|
|
|
30
33
|
'data',
|
|
31
34
|
'digits'
|
|
32
35
|
];
|
|
33
|
-
class NumberFlowElement extends
|
|
36
|
+
class NumberFlowElement extends NumberFlowLite__default.default {
|
|
34
37
|
attributeChangedCallback(attr, _oldValue, newValue) {
|
|
35
38
|
this[attr] = JSON.parse(newValue);
|
|
36
39
|
}
|
|
37
40
|
}
|
|
38
41
|
NumberFlowElement.observedAttributes = isReact19 ? [] : OBSERVED_ATTRIBUTES;
|
|
39
|
-
|
|
42
|
+
NumberFlowLite.define('number-flow-react', NumberFlowElement);
|
|
40
43
|
// You're supposed to cache these between uses:
|
|
41
44
|
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString
|
|
42
45
|
// Serialize to strings b/c React:
|
|
@@ -64,7 +67,7 @@ class NumberFlowImpl extends React__namespace.Component {
|
|
|
64
67
|
// Data needs to be set in render still:
|
|
65
68
|
updateProperties(prevProps) {
|
|
66
69
|
if (!this.el) return;
|
|
67
|
-
this.el.
|
|
70
|
+
this.el.batched = !this.props.isolate;
|
|
68
71
|
const [nonData] = splitProps(this.props);
|
|
69
72
|
Object.entries(nonData).forEach(([k, v])=>{
|
|
70
73
|
// @ts-ignore
|
|
@@ -112,11 +115,9 @@ class NumberFlowImpl extends React__namespace.Component {
|
|
|
112
115
|
"data-will-change": willChange ? '' : undefined,
|
|
113
116
|
// Have to rename this:
|
|
114
117
|
class: className,
|
|
115
|
-
"aria-label": data.valueAsString,
|
|
116
118
|
...rest,
|
|
117
|
-
role: "img",
|
|
118
119
|
dangerouslySetInnerHTML: {
|
|
119
|
-
__html: esmEnv.BROWSER ? '' :
|
|
120
|
+
__html: esmEnv.BROWSER ? '' : NumberFlowLite.renderInnerHTML(data)
|
|
120
121
|
},
|
|
121
122
|
suppressHydrationWarning: true,
|
|
122
123
|
digits: serialize(digits),
|
|
@@ -142,7 +143,7 @@ const NumberFlow = /*#__PURE__*/ React__namespace.forwardRef(function NumberFlow
|
|
|
142
143
|
]);
|
|
143
144
|
const data = React__namespace.useMemo(()=>{
|
|
144
145
|
const formatter = formatters[`${localesString}:${formatString}`] ??= new Intl.NumberFormat(locales, format);
|
|
145
|
-
return
|
|
146
|
+
return NumberFlowLite.formatToData(value, formatter, prefix, suffix);
|
|
146
147
|
}, [
|
|
147
148
|
value,
|
|
148
149
|
localesString,
|
package/dist/index.d.mts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export * from 'number-flow/plugins';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import
|
|
4
|
-
export { Format, NumberPartType, Trend, Value } from 'number-flow';
|
|
3
|
+
import NumberFlowLite, { Value, Format, Props } from 'number-flow/lite';
|
|
4
|
+
export { Format, NumberPartType, Trend, Value } from 'number-flow/lite';
|
|
5
5
|
|
|
6
6
|
declare const OBSERVED_ATTRIBUTES: readonly ["data", "digits"];
|
|
7
7
|
type ObservedAttribute = (typeof OBSERVED_ATTRIBUTES)[number];
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export * from 'number-flow/plugins';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import
|
|
4
|
-
export { Format, NumberPartType, Trend, Value } from 'number-flow';
|
|
3
|
+
import NumberFlowLite, { Value, Format, Props } from 'number-flow/lite';
|
|
4
|
+
export { Format, NumberPartType, Trend, Value } from 'number-flow/lite';
|
|
5
5
|
|
|
6
6
|
declare const OBSERVED_ATTRIBUTES: readonly ["data", "digits"];
|
|
7
7
|
type ObservedAttribute = (typeof OBSERVED_ATTRIBUTES)[number];
|
package/dist/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
|
-
var
|
|
4
|
+
var NumberFlowLite = require('number-flow/lite');
|
|
5
5
|
var plugins = require('number-flow/plugins');
|
|
6
|
-
var NumberFlowClient = require('./NumberFlow-client-
|
|
6
|
+
var NumberFlowClient = require('./NumberFlow-client-8ThZK4QG.js');
|
|
7
7
|
|
|
8
8
|
function _interopNamespace(e) {
|
|
9
9
|
if (e && e.__esModule) return e;
|
|
@@ -25,11 +25,11 @@ function _interopNamespace(e) {
|
|
|
25
25
|
|
|
26
26
|
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
27
27
|
|
|
28
|
-
const useIsSupported = ()=>React__namespace.useSyncExternalStore(()=>()=>{}, ()=>
|
|
28
|
+
const useIsSupported = ()=>React__namespace.useSyncExternalStore(()=>()=>{}, ()=>NumberFlowLite.canAnimate, ()=>false);
|
|
29
29
|
const usePrefersReducedMotion = ()=>React__namespace.useSyncExternalStore((cb)=>{
|
|
30
|
-
|
|
31
|
-
return ()=>
|
|
32
|
-
}, ()=>
|
|
30
|
+
NumberFlowLite.prefersReducedMotion?.addEventListener('change', cb);
|
|
31
|
+
return ()=>NumberFlowLite.prefersReducedMotion?.removeEventListener('change', cb);
|
|
32
|
+
}, ()=>NumberFlowLite.prefersReducedMotion.matches, ()=>false);
|
|
33
33
|
function useCanAnimate({ respectMotionPreference = true } = {}) {
|
|
34
34
|
const isSupported = useIsSupported();
|
|
35
35
|
const reducedMotion = usePrefersReducedMotion();
|
package/dist/index.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { canAnimate, prefersReducedMotion } from 'number-flow';
|
|
2
|
+
import { canAnimate, prefersReducedMotion } from 'number-flow/lite';
|
|
3
3
|
export * from 'number-flow/plugins';
|
|
4
|
-
export { a as NumberFlowElement, b as NumberFlowGroup, N as default } from './NumberFlow-client-
|
|
4
|
+
export { a as NumberFlowElement, b as NumberFlowGroup, N as default } from './NumberFlow-client-48rw3j0J.mjs';
|
|
5
5
|
|
|
6
6
|
const useIsSupported = ()=>React.useSyncExternalStore(()=>()=>{}, ()=>canAnimate, ()=>false);
|
|
7
7
|
const usePrefersReducedMotion = ()=>React.useSyncExternalStore((cb)=>{
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"publishConfig": {
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
|
-
"version": "0.5.
|
|
6
|
+
"version": "0.5.7",
|
|
7
7
|
"author": {
|
|
8
8
|
"name": "Maxwell Barvian",
|
|
9
9
|
"email": "max@barvian.me",
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
},
|
|
50
50
|
"dependencies": {
|
|
51
51
|
"esm-env": "^1.1.4",
|
|
52
|
-
"number-flow": "0.5.
|
|
52
|
+
"number-flow": "0.5.5"
|
|
53
53
|
},
|
|
54
54
|
"devDependencies": {
|
|
55
55
|
"@playwright/test": "^1.48.0",
|