@number-flow/svelte 0.1.3 → 0.1.5

package/dist/NumberFlow.svelte

@@ -1,7 +1,10 @@
 <script context="module">import { NumberFlowLite, define } from "number-flow";
 export class NumberFlowElement extends NumberFlowLite {
-  set parts(parts) {
-    super.parts = parts;
+  set __svelte_manual(manual) {
+    this.manual = manual;
+  }
+  set data(data) {
+    super.data = data;
   }
 }
 Object.keys(NumberFlowElement.defaultProps).forEach((key) => {
@@ -18,11 +21,15 @@ define("number-flow-svelte", NumberFlowElement);
 
 <script>import {
   render as renderFlow,
-  partitionParts
+  formatToData
 } from "number-flow";
+import { writable } from "svelte/store";
+import { getGroupContext } from "./group.js";
 export let locales = void 0;
 export let format = void 0;
 export let value;
+export let prefix = void 0;
+export let suffix = void 0;
 export let willChange = false;
 export let transformTiming = NumberFlowElement.defaultProps.transformTiming;
 export let spinTiming = NumberFlowElement.defaultProps.spinTiming;
@@ -32,8 +39,12 @@ export let respectMotionPreference = NumberFlowElement.defaultProps.respectMotio
 export let trend = NumberFlowElement.defaultProps.trend;
 export let continuous = NumberFlowElement.defaultProps.continuous;
 export let el = void 0;
+const elStore = writable(el);
+$: $elStore = el;
 $: formatter = new Intl.NumberFormat(locales, format);
-$: parts = partitionParts(value, formatter);
+$: data = formatToData(value, formatter, prefix, suffix);
+const group = getGroupContext();
+group?.register?.(elStore);
 </script>
 
 <number-flow-svelte
@@ -42,6 +53,7 @@ $: parts = partitionParts(value, formatter);
 	data-will-change={willChange ? '' : undefined}
 	on:animationsstart
 	on:animationsfinish
+	__svelte_manual={Boolean(group)}
 	__svelte_transformTiming={transformTiming}
 	__svelte_spinTiming={spinTiming}
 	__svelte_opacityTiming={opacityTiming}
@@ -49,7 +61,7 @@ $: parts = partitionParts(value, formatter);
 	__svelte_respectMotionPreference={respectMotionPreference}
 	__svelte_trend={trend}
 	__svelte_continuous={continuous}
-	{parts}
+	{data}
 >
-	{@html renderFlow({ formatted: parts.formatted, willChange })}
+	{@html renderFlow({ valueAsString: data.valueAsString, willChange })}
 </number-flow-svelte>

package/dist/NumberFlow.svelte.d.ts

@@ -1,7 +1,8 @@
 import { SvelteComponent } from "svelte";
-import { NumberFlowLite, type PartitionedParts } from 'number-flow';
+import { NumberFlowLite, type Data } from 'number-flow';
 export declare class NumberFlowElement extends NumberFlowLite {
-    set parts(parts: PartitionedParts | undefined);
+    set __svelte_manual(manual: boolean);
+    set data(data: Data | undefined);
 }
 import { type Value, type Format, type Props as NumberFlowProps } from 'number-flow';
 import type { HTMLAttributes } from 'svelte/elements';
@@ -11,6 +12,8 @@ declare const __propDef: {
         locales?: Intl.LocalesArgument;
         format?: Format;
         value: Value;
+        prefix?: string;
+        suffix?: string;
         willChange?: boolean;
     };
     slots: {};

package/dist/NumberFlowGroup.svelte

@@ -0,0 +1,30 @@
+<script>import { get } from "svelte/store";
+import { beforeUpdate, onDestroy, tick } from "svelte";
+import { setGroupContext } from "./group.js";
+const flows = /* @__PURE__ */ new Set();
+let updating = false;
+const registerWithGroup = (el) => {
+  flows.add(el);
+  beforeUpdate(async () => {
+    if (updating) return;
+    updating = true;
+    flows.forEach(async (flow) => {
+      {
+        const f = get(flow);
+        if (!f || !f.created) return;
+        f.willUpdate();
+      }
+      await tick();
+      get(flow)?.didUpdate();
+    });
+    await tick();
+    updating = false;
+  });
+  onDestroy(() => {
+    flows.delete(el);
+  });
+};
+setGroupContext({ register: registerWithGroup });
+</script>
+
+<slot />

package/dist/NumberFlowGroup.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type NumberFlowGroupProps = typeof __propDef.props;
+export type NumberFlowGroupEvents = typeof __propDef.events;
+export type NumberFlowGroupSlots = typeof __propDef.slots;
+export default class NumberFlowGroup extends SvelteComponent<NumberFlowGroupProps, NumberFlowGroupEvents, NumberFlowGroupSlots> {
+}
+export {};

package/dist/group.d.ts

@@ -0,0 +1,8 @@
+import type { NumberFlowLite } from 'number-flow';
+import type { Readable } from 'svelte/store';
+export type RegisterWithGroup = (el: Readable<NumberFlowLite | undefined>) => void;
+export type GroupContext = {
+    register: RegisterWithGroup;
+};
+export declare function setGroupContext(ctx: GroupContext): void;
+export declare function getGroupContext(): GroupContext | undefined;

package/dist/group.js

@@ -0,0 +1,8 @@
+import { getContext, setContext } from 'svelte';
+let groupKey = Symbol('group');
+export function setGroupContext(ctx) {
+    setContext(groupKey, ctx);
+}
+export function getGroupContext() {
+    return getContext(groupKey);
+}

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export type { Value, Format, Trend } from 'number-flow';
+export { default as NumberFlowGroup } from './NumberFlowGroup.svelte';
 export { default, NumberFlowElement } from './NumberFlow.svelte';
 export declare const getCanAnimate: ({ respectMotionPreference }?: {
     respectMotionPreference?: boolean | undefined;

package/dist/index.js

@@ -1,6 +1,7 @@
 import { canAnimate as _canAnimate, prefersReducedMotion as _prefersReducedMotion } from 'number-flow';
 import { onMount } from 'svelte';
 import { derived, readable } from 'svelte/store';
+export { default as NumberFlowGroup } from './NumberFlowGroup.svelte';
 export { default, NumberFlowElement } from './NumberFlow.svelte';
 const canAnimate = readable(_canAnimate, (set) => {
     onMount(() => {

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "A component to transition and format numbers.",
   "license": "MIT",
   "homepage": "https://number-flow.barvian.me/svelte",
@@ -41,7 +41,7 @@
     }
   },
   "dependencies": {
-    "number-flow": "0.3.6"
+    "number-flow": "0.3.8"
   },
   "peerDependencies": {
     "svelte": "^4 || ^5"
@@ -62,6 +62,7 @@
   },
   "scripts": {
     "dev": "vite dev",
+    "build:watch": "svelte-package --watch",
     "build": "svelte-kit sync && svelte-package && publint",
     "build:site": "vite build && pnpm build",
     "preview": "vite preview",