fix: Bug fixes on ssr.

Author: Blankeos

src/index.tsx

@@ -4,66 +4,65 @@ import {
   SlottedTag,
   slottedStyles,
   partitionParts,
-  type PartitionedParts,
   NumberFlowLite,
   prefersReducedMotion,
   canAnimate as _canAnimate,
-} from 'number-flow'
-import { JSX } from 'solid-js/jsx-runtime'
-import { createMemo, onMount, splitProps } from 'solid-js'
-import { Dynamic } from 'solid-js/web'
-export type { Value, Format, Trend } from 'number-flow'
+} from 'number-flow';
+import { JSX } from 'solid-js/jsx-runtime';
+import { createEffect, createMemo, createSignal, onMount, splitProps } from 'solid-js';
+import { Dynamic } from 'solid-js/web';
+export type { Value, Format, Trend } from 'number-flow';
 
 // Can't wait to not have to do this in React 19:
-const OBSERVED_ATTRIBUTES = ['parts'] as const
-type ObservedAttribute = (typeof OBSERVED_ATTRIBUTES)[number]
+const OBSERVED_ATTRIBUTES = ['parts'] as const;
+type ObservedAttribute = (typeof OBSERVED_ATTRIBUTES)[number];
 export class NumberFlowElement extends NumberFlowLite {
-  static observedAttributes = OBSERVED_ATTRIBUTES
+  static observedAttributes = OBSERVED_ATTRIBUTES;
   attributeChangedCallback(attr: ObservedAttribute, _oldValue: string, newValue: string) {
-    this[attr] = JSON.parse(newValue)
+    this[attr] = JSON.parse(newValue);
   }
 }
 
 export type NumberFlowProps = JSX.HTMLAttributes<NumberFlowElement> & {
-  value: Value
-  locales?: Intl.LocalesArgument
-  format?: Format
-  isolate?: boolean
-  animated?: boolean
-  respectMotionPreference?: boolean
-  willChange?: boolean
+  value: Value;
+  locales?: Intl.LocalesArgument;
+  format?: Format;
+  isolate?: boolean;
+  animated?: boolean;
+  respectMotionPreference?: boolean;
+  willChange?: boolean;
   // animateDependencies?: React.DependencyList
-  onAnimationsStart?: () => void
-  onAnimationsFinish?: () => void
-  trend?: (typeof NumberFlowElement)['prototype']['trend']
-  opacityTiming?: (typeof NumberFlowElement)['prototype']['opacityTiming']
-  transformTiming?: (typeof NumberFlowElement)['prototype']['transformTiming']
-  spinTiming?: (typeof NumberFlowElement)['prototype']['spinTiming']
-}
+  onAnimationsStart?: () => void;
+  onAnimationsFinish?: () => void;
+  trend?: (typeof NumberFlowElement)['prototype']['trend'];
+  opacityTiming?: (typeof NumberFlowElement)['prototype']['opacityTiming'];
+  transformTiming?: (typeof NumberFlowElement)['prototype']['transformTiming'];
+  spinTiming?: (typeof NumberFlowElement)['prototype']['spinTiming'];
+};
 
 // 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: Record<string, Intl.NumberFormat> = {}
+const formatters: Record<string, Intl.NumberFormat> = {};
 
 export default function NumberFlow(props: NumberFlowProps) {
   onMount(() => {
-    NumberFlowElement.define()
-  })
+    NumberFlowElement.define();
+  });
 
   const localesString = createMemo(
     () => (props.locales ? JSON.stringify(props.locales) : ''),
     [props.locales],
-  )
-  const formatString = createMemo(() => (props.format ? JSON.stringify(props.format) : ''))
+  );
+  const formatString = createMemo(() => (props.format ? JSON.stringify(props.format) : ''));
   const parts = createMemo(() => {
     const formatter = (formatters[`${localesString}:${formatString}`] ??= new Intl.NumberFormat(
       props.locales,
       props.format,
-    ))
+    ));
 
-    return partitionParts(props.value, formatter)
-  })
+    return partitionParts(props.value, formatter);
+  });
 
   const [_used, others] = splitProps(props, [
     // For Root
@@ -80,13 +79,24 @@ export default function NumberFlow(props: NumberFlowProps) {
     'opacityTiming',
     'transformTiming',
     'spinTiming',
-  ])
+  ]);
+
+  onMount(() => {
+    // This is a workaround until this gets fixed: https://github.com/solidjs/solid/issues/2339
+    const el = props.ref as unknown as HTMLElement;
+    const _parts = el.getAttribute('attr:parts');
+    if (_parts) {
+      el.removeAttribute('attr:parts');
+      el.setAttribute('parts', _parts);
+    }
+  });
 
   return (
     <Dynamic
+      ref={props.ref}
       component={'number-flow'}
-      //   https://docs.solidjs.com/reference/jsx-attributes/attr
       class={props.class}
+      //   https://docs.solidjs.com/reference/jsx-attributes/attr
       attr:data-will-change={props.willChange ? '' : undefined}
       {...others}
       attr:parts={JSON.stringify(parts())}
@@ -95,5 +105,36 @@ export default function NumberFlow(props: NumberFlowProps) {
         {parts().formatted}
       </Dynamic>
     </Dynamic>
-  )
+  );
+}
+
+// SSR-safe canAnimate
+/** Unfinished and untested. */
+export function useCanAnimate(
+  props: { respectMotionPreference: boolean } = { respectMotionPreference: true },
+) {
+  const [canAnimate, setCanAnimate] = createSignal(_canAnimate);
+  const [reducedMotion, setReducedMotion] = createSignal(false);
+
+  // Handle SSR:
+  onMount(() => {
+    setCanAnimate(_canAnimate);
+    setReducedMotion(prefersReducedMotion?.matches ?? false);
+  });
+
+  // Listen for reduced motion changes if needed:
+  createEffect(() => {
+    if (!props.respectMotionPreference) return;
+    const onChange = ({ matches }: MediaQueryListEvent) => {
+      setReducedMotion(matches);
+    };
+    prefersReducedMotion?.addEventListener('change', onChange);
+    return () => {
+      prefersReducedMotion?.removeEventListener('change', onChange);
+    };
+  });
+
+  return createMemo<boolean>(() => {
+    return canAnimate() && (!props.respectMotionPreference || !reducedMotion);
+  });
 }