feat: Made compatible with 0.5.3 number-flow.

Author: Blankeos

dev/components/demos/base-demo.tsx

@@ -3,7 +3,6 @@ import {
   children,
   ComponentProps,
   createSignal,
-  createUniqueId,
   FlowProps,
   JSX,
   mergeProps,
@@ -66,14 +65,16 @@ function Demo(props: FlowProps<Props>) {
   const [knowsToClick, setKnowsToClick] = createSignal(false);
   const [active, setActive] = createSignal(_props.defaultValue);
 
-  const id = createUniqueId();
-
   function handleClick() {
+    if (!_props.onClick) return;
+
     setKnowsToClick(true);
     _props?.onClick?.();
   }
 
   const handleMouseDown: JSX.EventHandler<HTMLElement, MouseEvent> = (event) => {
+    if (!_props.onClick) return;
+
     // Prevent selection of text:
     // https://stackoverflow.com/a/43321596
     if (event.detail > 1) {
@@ -109,7 +110,7 @@ function Demo(props: FlowProps<Props>) {
                 style={{ 'border-radius': '999' }}
                 // layout
                 // layoutId={`${id}active`}
-              ></div>
+              />
             </Show>
             Preview
           </Tabs.Trigger>
@@ -127,7 +128,7 @@ function Demo(props: FlowProps<Props>) {
                 style={{ 'border-radius': '999' }}
                 // layout
                 // layoutId={`${id}active`}
-              ></div>
+              />
             </Show>
             Code
           </Tabs.Trigger>
@@ -147,8 +148,8 @@ function Demo(props: FlowProps<Props>) {
 
         <div
           class={clsx(_props.minHeight, 'flex flex-col items-center justify-center p-5 pb-6')}
-          onClick={_props?.onClick && handleClick}
-          onMouseDown={_props?.onClick && handleMouseDown}
+          onClick={handleClick}
+          onMouseDown={handleMouseDown}
         >
           {_props.children}
           {_props?.onClick && (

dev/components/demos/continuous.tsx

@@ -1,32 +1,33 @@
 import Demo, { DemoSwitch, type DemoProps } from 'dev/components/demos/base-demo';
 
 import { useCycle } from 'dev/hooks/use-cycle';
+import { continuous } from 'number-flow';
 import { createSignal } from 'solid-js';
 import NumberFlow from 'src';
 
 const NUMBERS = [120, 140];
 
 export default function ContinuousDemo(props: Omit<DemoProps, 'children' | 'code'>) {
   const [value, cycleValue] = useCycle(NUMBERS);
-  const [continuous, setContinuous] = createSignal(false);
+  const [isContinuous, setContinuous] = createSignal(false);
 
   return (
     <>
       <Demo
         {...props}
         title={
-          <DemoSwitch checked={continuous()} onChange={setContinuous}>
+          <DemoSwitch checked={isContinuous()} onChange={setContinuous}>
             <code class="font-semibold">continuous</code>
           </DemoSwitch>
         }
         onClick={cycleValue}
       >
         <div class="~text-xl/4xl flex items-center gap-4">
           <NumberFlow
-            continuous={continuous()}
             style={{ '--number-flow-char-height': '0.85em' }}
             value={value()}
             class="text-4xl font-semibold"
+            plugins={isContinuous() ? [continuous] : undefined}
           />
         </div>
       </Demo>

dev/icons/github.tsx

@@ -1,4 +1,4 @@
-import { FlowProps, JSX, VoidProps } from 'solid-js';
+import { JSX, VoidProps } from 'solid-js';
 
 export function IconGithub(props: VoidProps<JSX.HTMLAttributes<SVGSVGElement>>) {
   return (

dev/icons/shuffle.tsx

@@ -8,7 +8,7 @@ export function IconShuffle(props: VoidProps<JSX.HTMLAttributes<SVGSVGElement>>)
         clip-rule="evenodd"
         d="M2.72876 6.42462C3.40596 4.15488 5.51032 2.5 8.00002 2.5C10.0902 2.5 11.9092 3.66566 12.8405 5.38592L13.1975 6.04548L14.5166 5.33138L14.1596 4.67183C12.9767 2.48677 10.6625 1 8.00002 1C5.05453 1 2.53485 2.81872 1.50122 5.39447V3.75V3H0.0012207V3.75V7.17462C0.0012207 7.58883 0.337007 7.92462 0.751221 7.92462H4.17584H4.92584V6.42462H4.17584H2.72876ZM13.2713 9.57538H11.8243H11.0743V8.07538H11.8243H15.2489C15.6631 8.07538 15.9989 8.41117 15.9989 8.82538V12.25V13H14.4989V12.25V10.6053C13.4653 13.1812 10.9456 15 8.00002 15C5.35065 15 3.04619 13.5279 1.85809 11.3605L1.49757 10.7029L2.8129 9.98181L3.17342 10.6395C4.10882 12.3458 5.92017 13.5 8.00002 13.5C10.4897 13.5 12.5941 11.8451 13.2713 9.57538Z"
         fill="currentColor"
-      ></path>
+      />
     </svg>
   );
 }

dev/pages/test/+Page.tsx

@@ -1,30 +1,59 @@
+import { continuous } from 'number-flow';
 import { createSignal, onMount } from 'solid-js';
+// import { NumberFlow } from 'src/NumberFlow';
 import NumberFlow from 'src';
 
 export default function Page() {
+  const [toggle, setToggle] = createSignal(false);
   const [value1, setValue1] = createSignal(123);
   const [value2, setValue2] = createSignal(0);
   const [value3, setValue3] = createSignal(123);
   const [value4, setValue4] = createSignal(0);
+  const [value5, setValue5] = createSignal(0);
+
+  function triggerChange(useAlternateValues: boolean = false) {
+    const defaultValues = {
+      value1: 500,
+      value2: 1.42,
+      value3: 500,
+      value4: 1_500_540,
+      value5: 88,
+    };
+
+    const alternateValues = {
+      value1: 100,
+      value2: 1203,
+      value3: 7298,
+      value4: 12.1,
+      value5: 50,
+    };
+
+    const values = useAlternateValues ? alternateValues : defaultValues;
 
-  onMount(() => {
     setTimeout(() => {
-      setValue1(500);
+      setValue1(values.value1);
     }, 500);
     setTimeout(() => {
-      setValue2(1.42);
+      setValue2(values.value2);
     }, 800);
     setTimeout(() => {
-      setValue3(7298);
+      setValue3(values.value3);
     }, 1000);
     setTimeout(() => {
-      setValue4(1_500_540);
+      setValue4(values.value4);
     }, 1500);
+    setTimeout(() => {
+      setValue5(values.value5);
+    }, 1500);
+  }
+
+  onMount(() => {
+    triggerChange();
   });
 
   return (
     <div class="flex min-h-screen flex-col items-center justify-center gap-y-3 bg-zinc-950 text-white">
-      <NumberFlow value={value1()} locales="en-US" />
+      <NumberFlow value={value1()} locales="en-US" plugins={[continuous]} willChange />
       <NumberFlow
         value={value2()}
         locales="en-US"
@@ -40,8 +69,24 @@ export default function Page() {
           style: 'currency',
           currency: 'USD',
         }}
+        prefix=""
+      />
+      <NumberFlow
+        value={value5()}
+        format={{ style: 'currency', currency: 'USD', trailingZeroDisplay: 'stripIfInteger' }}
+        suffix="/mo"
       />
-      <a href="/">Back /</a>
+
+      <button
+        onClick={() => {
+          setToggle(!toggle());
+          triggerChange(toggle());
+        }}
+      >
+        Change
+      </button>
+
+      <a href="/">Back to Home</a>
     </div>
   );
 }

dev/pages/test/+config.ts

@@ -0,0 +1,7 @@
+import type { Config } from 'vike/types';
+
+// Default config (can be overridden by pages)
+export default {
+  ssr: false,
+  // ssr: true,
+} satisfies Config;