@number-flow/react 0.2.4 → 0.2.6

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.
Files changed (5) hide show
  1. package/dist/index.d.mts +10 -20
  2. package/dist/index.d.ts +10 -20
  3. package/dist/index.js +35 -29
  4. package/dist/index.mjs +36 -31
  5. package/package.json +4 -3
package/dist/index.d.mts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import { NumberFlowLite, Value, Format } from 'number-flow';
2
+ import { NumberFlowLite, Value, Format, Props } from 'number-flow';
3
3
  export { Format, Trend, Value } from 'number-flow';
4
4
 
5
5
  declare const OBSERVED_ATTRIBUTES: readonly ["parts"];
@@ -8,37 +8,27 @@ declare class NumberFlowElement extends NumberFlowLite {
8
8
  static observedAttributes: readonly ["parts"];
9
9
  attributeChangedCallback(attr: ObservedAttribute, _oldValue: string, newValue: string): void;
10
10
  }
11
- type NumberFlowProps = React.HTMLAttributes<NumberFlowElement> & {
12
- value: Value;
13
- locales?: Intl.LocalesArgument;
14
- format?: Format;
11
+ type NonPartsProps = Omit<Props, 'manual'>;
12
+ type BaseProps = React.HTMLAttributes<NumberFlowElement> & Partial<NonPartsProps> & {
15
13
  isolate?: boolean;
16
- animated?: boolean;
17
- respectMotionPreference?: boolean;
18
14
  willChange?: boolean;
19
15
  onAnimationsStart?: () => void;
20
16
  onAnimationsFinish?: () => void;
21
- trend?: (typeof NumberFlowElement)['prototype']['trend'];
22
- continuous?: (typeof NumberFlowElement)['prototype']['continuous'];
23
- opacityTiming?: (typeof NumberFlowElement)['prototype']['opacityTiming'];
24
- transformTiming?: (typeof NumberFlowElement)['prototype']['transformTiming'];
25
- spinTiming?: (typeof NumberFlowElement)['prototype']['spinTiming'];
26
17
  };
27
- declare const NumberFlow: React.ForwardRefExoticComponent<React.HTMLAttributes<NumberFlowElement> & {
18
+ type NumberFlowProps = BaseProps & {
28
19
  value: Value;
29
20
  locales?: Intl.LocalesArgument;
30
21
  format?: Format;
22
+ };
23
+ declare const NumberFlow: React.ForwardRefExoticComponent<React.HTMLAttributes<NumberFlowElement> & Partial<NonPartsProps> & {
31
24
  isolate?: boolean;
32
- animated?: boolean;
33
- respectMotionPreference?: boolean;
34
25
  willChange?: boolean;
35
26
  onAnimationsStart?: () => void;
36
27
  onAnimationsFinish?: () => void;
37
- trend?: (typeof NumberFlowElement)["prototype"]["trend"];
38
- continuous?: (typeof NumberFlowElement)["prototype"]["continuous"];
39
- opacityTiming?: (typeof NumberFlowElement)["prototype"]["opacityTiming"];
40
- transformTiming?: (typeof NumberFlowElement)["prototype"]["transformTiming"];
41
- spinTiming?: (typeof NumberFlowElement)["prototype"]["spinTiming"];
28
+ } & {
29
+ value: Value;
30
+ locales?: Intl.LocalesArgument;
31
+ format?: Format;
42
32
  } & React.RefAttributes<NumberFlowElement>>;
43
33
 
44
34
  declare function useCanAnimate({ respectMotionPreference }?: {
package/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import { NumberFlowLite, Value, Format } from 'number-flow';
2
+ import { NumberFlowLite, Value, Format, Props } from 'number-flow';
3
3
  export { Format, Trend, Value } from 'number-flow';
4
4
 
5
5
  declare const OBSERVED_ATTRIBUTES: readonly ["parts"];
@@ -8,37 +8,27 @@ declare class NumberFlowElement extends NumberFlowLite {
8
8
  static observedAttributes: readonly ["parts"];
9
9
  attributeChangedCallback(attr: ObservedAttribute, _oldValue: string, newValue: string): void;
10
10
  }
11
- type NumberFlowProps = React.HTMLAttributes<NumberFlowElement> & {
12
- value: Value;
13
- locales?: Intl.LocalesArgument;
14
- format?: Format;
11
+ type NonPartsProps = Omit<Props, 'manual'>;
12
+ type BaseProps = React.HTMLAttributes<NumberFlowElement> & Partial<NonPartsProps> & {
15
13
  isolate?: boolean;
16
- animated?: boolean;
17
- respectMotionPreference?: boolean;
18
14
  willChange?: boolean;
19
15
  onAnimationsStart?: () => void;
20
16
  onAnimationsFinish?: () => void;
21
- trend?: (typeof NumberFlowElement)['prototype']['trend'];
22
- continuous?: (typeof NumberFlowElement)['prototype']['continuous'];
23
- opacityTiming?: (typeof NumberFlowElement)['prototype']['opacityTiming'];
24
- transformTiming?: (typeof NumberFlowElement)['prototype']['transformTiming'];
25
- spinTiming?: (typeof NumberFlowElement)['prototype']['spinTiming'];
26
17
  };
27
- declare const NumberFlow: React.ForwardRefExoticComponent<React.HTMLAttributes<NumberFlowElement> & {
18
+ type NumberFlowProps = BaseProps & {
28
19
  value: Value;
29
20
  locales?: Intl.LocalesArgument;
30
21
  format?: Format;
22
+ };
23
+ declare const NumberFlow: React.ForwardRefExoticComponent<React.HTMLAttributes<NumberFlowElement> & Partial<NonPartsProps> & {
31
24
  isolate?: boolean;
32
- animated?: boolean;
33
- respectMotionPreference?: boolean;
34
25
  willChange?: boolean;
35
26
  onAnimationsStart?: () => void;
36
27
  onAnimationsFinish?: () => void;
37
- trend?: (typeof NumberFlowElement)["prototype"]["trend"];
38
- continuous?: (typeof NumberFlowElement)["prototype"]["continuous"];
39
- opacityTiming?: (typeof NumberFlowElement)["prototype"]["opacityTiming"];
40
- transformTiming?: (typeof NumberFlowElement)["prototype"]["transformTiming"];
41
- spinTiming?: (typeof NumberFlowElement)["prototype"]["spinTiming"];
28
+ } & {
29
+ value: Value;
30
+ locales?: Intl.LocalesArgument;
31
+ format?: Format;
42
32
  } & React.RefAttributes<NumberFlowElement>>;
43
33
 
44
34
  declare function useCanAnimate({ respectMotionPreference }?: {
package/dist/index.js CHANGED
@@ -56,6 +56,30 @@ NumberFlowElement.observedAttributes = OBSERVED_ATTRIBUTES;
56
56
  NumberFlowElement.define();
57
57
  var formatters = {};
58
58
  var serializeParts = isReact19 ? (p) => p : JSON.stringify;
59
+ function splitProps(props) {
60
+ const {
61
+ transformTiming,
62
+ spinTiming,
63
+ opacityTiming,
64
+ animated,
65
+ respectMotionPreference,
66
+ trend,
67
+ continuous,
68
+ ...rest
69
+ } = props;
70
+ return [
71
+ {
72
+ transformTiming,
73
+ spinTiming,
74
+ opacityTiming,
75
+ animated,
76
+ respectMotionPreference,
77
+ trend,
78
+ continuous
79
+ },
80
+ rest
81
+ ];
82
+ }
59
83
  var _el;
60
84
  var NumberFlowImpl = class extends React.Component {
61
85
  constructor(props) {
@@ -63,19 +87,16 @@ var NumberFlowImpl = class extends React.Component {
63
87
  __privateAdd(this, _el);
64
88
  this.handleRef = this.handleRef.bind(this);
65
89
  }
66
- // Update the non-parts props to avoid JSON serialization
90
+ // Update the non-`parts` props to avoid JSON serialization
67
91
  // Parts needs to be set in render still:
68
92
  updateNonPartsProps(prevProps) {
69
93
  if (!__privateGet(this, _el)) return;
70
94
  __privateGet(this, _el).manual = !this.props.isolate;
71
- if (this.props.animated != null) __privateGet(this, _el).animated = this.props.animated;
72
- if (this.props.respectMotionPreference != null)
73
- __privateGet(this, _el).respectMotionPreference = this.props.respectMotionPreference;
74
- if (this.props.trend != null) __privateGet(this, _el).trend = this.props.trend;
75
- if (this.props.continuous != null) __privateGet(this, _el).continuous = this.props.continuous;
76
- if (this.props.opacityTiming) __privateGet(this, _el).opacityTiming = this.props.opacityTiming;
77
- if (this.props.transformTiming) __privateGet(this, _el).transformTiming = this.props.transformTiming;
78
- if (this.props.spinTiming) __privateGet(this, _el).spinTiming = this.props.spinTiming;
95
+ const [nonParts] = splitProps(this.props);
96
+ Object.assign(
97
+ __privateGet(this, _el),
98
+ Object.fromEntries(Object.entries(nonParts).filter(([_, v]) => v != null))
99
+ );
79
100
  if (prevProps?.onAnimationsStart)
80
101
  __privateGet(this, _el).removeEventListener("animationsstart", prevProps.onAnimationsStart);
81
102
  if (this.props.onAnimationsStart)
@@ -93,8 +114,8 @@ var NumberFlowImpl = class extends React.Component {
93
114
  }
94
115
  getSnapshotBeforeUpdate(prevProps) {
95
116
  this.updateNonPartsProps(prevProps);
96
- if (this.props.isolate) return false;
97
- if (prevProps.parts === this.props.parts) return false;
117
+ if (this.props.isolate || this.props.animated === false || prevProps.parts === this.props.parts)
118
+ return false;
98
119
  __privateGet(this, _el)?.willUpdate();
99
120
  return true;
100
121
  }
@@ -106,22 +127,7 @@ var NumberFlowImpl = class extends React.Component {
106
127
  __privateSet(this, _el, el);
107
128
  }
108
129
  render() {
109
- const {
110
- innerRef,
111
- className,
112
- parts,
113
- willChange,
114
- // These are set in updateNonPartsProps, so ignore them here:
115
- animated,
116
- respectMotionPreference,
117
- isolate,
118
- trend,
119
- continuous,
120
- opacityTiming,
121
- transformTiming,
122
- spinTiming,
123
- ...rest
124
- } = this.props;
130
+ const [_, { innerRef, className, parts, willChange, isolate, ...rest }] = splitProps(this.props);
125
131
  return (
126
132
  // @ts-expect-error missing types
127
133
  /* @__PURE__ */ React.createElement(
@@ -131,9 +137,9 @@ var NumberFlowImpl = class extends React.Component {
131
137
  "data-will-change": willChange ? "" : void 0,
132
138
  class: className,
133
139
  ...rest,
140
+ dangerouslySetInnerHTML: { __html: (0, import_number_flow.render)({ formatted: parts.formatted, willChange }) },
134
141
  parts: serializeParts(parts)
135
- },
136
- /* @__PURE__ */ React.createElement(import_number_flow.SlottedTag, { style: (0, import_number_flow.slottedStyles)({ willChange }) }, parts.formatted)
142
+ }
137
143
  )
138
144
  );
139
145
  }
package/dist/index.mjs CHANGED
@@ -10,8 +10,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
10
10
  // src/index.tsx
11
11
  import * as React from "react";
12
12
  import {
13
- SlottedTag,
14
- slottedStyles,
13
+ render,
15
14
  partitionParts,
16
15
  NumberFlowLite,
17
16
  prefersReducedMotion,
@@ -28,6 +27,30 @@ NumberFlowElement.observedAttributes = OBSERVED_ATTRIBUTES;
28
27
  NumberFlowElement.define();
29
28
  var formatters = {};
30
29
  var serializeParts = isReact19 ? (p) => p : JSON.stringify;
30
+ function splitProps(props) {
31
+ const {
32
+ transformTiming,
33
+ spinTiming,
34
+ opacityTiming,
35
+ animated,
36
+ respectMotionPreference,
37
+ trend,
38
+ continuous,
39
+ ...rest
40
+ } = props;
41
+ return [
42
+ {
43
+ transformTiming,
44
+ spinTiming,
45
+ opacityTiming,
46
+ animated,
47
+ respectMotionPreference,
48
+ trend,
49
+ continuous
50
+ },
51
+ rest
52
+ ];
53
+ }
31
54
  var _el;
32
55
  var NumberFlowImpl = class extends React.Component {
33
56
  constructor(props) {
@@ -35,19 +58,16 @@ var NumberFlowImpl = class extends React.Component {
35
58
  __privateAdd(this, _el);
36
59
  this.handleRef = this.handleRef.bind(this);
37
60
  }
38
- // Update the non-parts props to avoid JSON serialization
61
+ // Update the non-`parts` props to avoid JSON serialization
39
62
  // Parts needs to be set in render still:
40
63
  updateNonPartsProps(prevProps) {
41
64
  if (!__privateGet(this, _el)) return;
42
65
  __privateGet(this, _el).manual = !this.props.isolate;
43
- if (this.props.animated != null) __privateGet(this, _el).animated = this.props.animated;
44
- if (this.props.respectMotionPreference != null)
45
- __privateGet(this, _el).respectMotionPreference = this.props.respectMotionPreference;
46
- if (this.props.trend != null) __privateGet(this, _el).trend = this.props.trend;
47
- if (this.props.continuous != null) __privateGet(this, _el).continuous = this.props.continuous;
48
- if (this.props.opacityTiming) __privateGet(this, _el).opacityTiming = this.props.opacityTiming;
49
- if (this.props.transformTiming) __privateGet(this, _el).transformTiming = this.props.transformTiming;
50
- if (this.props.spinTiming) __privateGet(this, _el).spinTiming = this.props.spinTiming;
66
+ const [nonParts] = splitProps(this.props);
67
+ Object.assign(
68
+ __privateGet(this, _el),
69
+ Object.fromEntries(Object.entries(nonParts).filter(([_, v]) => v != null))
70
+ );
51
71
  if (prevProps?.onAnimationsStart)
52
72
  __privateGet(this, _el).removeEventListener("animationsstart", prevProps.onAnimationsStart);
53
73
  if (this.props.onAnimationsStart)
@@ -65,8 +85,8 @@ var NumberFlowImpl = class extends React.Component {
65
85
  }
66
86
  getSnapshotBeforeUpdate(prevProps) {
67
87
  this.updateNonPartsProps(prevProps);
68
- if (this.props.isolate) return false;
69
- if (prevProps.parts === this.props.parts) return false;
88
+ if (this.props.isolate || this.props.animated === false || prevProps.parts === this.props.parts)
89
+ return false;
70
90
  __privateGet(this, _el)?.willUpdate();
71
91
  return true;
72
92
  }
@@ -78,22 +98,7 @@ var NumberFlowImpl = class extends React.Component {
78
98
  __privateSet(this, _el, el);
79
99
  }
80
100
  render() {
81
- const {
82
- innerRef,
83
- className,
84
- parts,
85
- willChange,
86
- // These are set in updateNonPartsProps, so ignore them here:
87
- animated,
88
- respectMotionPreference,
89
- isolate,
90
- trend,
91
- continuous,
92
- opacityTiming,
93
- transformTiming,
94
- spinTiming,
95
- ...rest
96
- } = this.props;
101
+ const [_, { innerRef, className, parts, willChange, isolate, ...rest }] = splitProps(this.props);
97
102
  return (
98
103
  // @ts-expect-error missing types
99
104
  /* @__PURE__ */ React.createElement(
@@ -103,9 +108,9 @@ var NumberFlowImpl = class extends React.Component {
103
108
  "data-will-change": willChange ? "" : void 0,
104
109
  class: className,
105
110
  ...rest,
111
+ dangerouslySetInnerHTML: { __html: render({ formatted: parts.formatted, willChange }) },
106
112
  parts: serializeParts(parts)
107
- },
108
- /* @__PURE__ */ React.createElement(SlottedTag, { style: slottedStyles({ willChange }) }, parts.formatted)
113
+ }
109
114
  )
110
115
  );
111
116
  }
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "publishConfig": {
4
4
  "access": "public"
5
5
  },
6
- "version": "0.2.4",
6
+ "version": "0.2.6",
7
7
  "author": {
8
8
  "name": "Maxwell Barvian",
9
9
  "email": "max@barvian.me",
@@ -48,10 +48,11 @@
48
48
  }
49
49
  },
50
50
  "dependencies": {
51
- "esm-env": "^1.0.0",
52
- "number-flow": "0.3.3"
51
+ "number-flow": "0.3.4"
53
52
  },
54
53
  "devDependencies": {
54
+ "@playwright/test": "^1.48.0",
55
+ "@types/node": "^22.7.9",
55
56
  "@types/react": "^18.3.3",
56
57
  "@types/react-dom": "^18.3.0",
57
58
  "react": "^18.3.1",