@number-flow/svelte 0.1.2 → 0.1.4

package/dist/NumberFlow.svelte

@@ -1,5 +1,8 @@
 <script context="module">import { NumberFlowLite, define } from "number-flow";
 export class NumberFlowElement extends NumberFlowLite {
+  set __svelte_manual(manual) {
+    this.manual = manual;
+  }
   set parts(parts) {
     super.parts = parts;
   }
@@ -20,6 +23,8 @@ define("number-flow-svelte", NumberFlowElement);
   render as renderFlow,
   partitionParts
 } 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;
@@ -32,8 +37,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);
+const group = getGroupContext();
+group?.register?.(elStore);
 </script>
 
 <number-flow-svelte
@@ -42,6 +51,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}

package/dist/NumberFlow.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponent } from "svelte";
 import { NumberFlowLite, type PartitionedParts } from 'number-flow';
 export declare class NumberFlowElement extends NumberFlowLite {
+    set __svelte_manual(manual: boolean);
     set parts(parts: PartitionedParts | undefined);
 }
 import { type Value, type Format, type Props as NumberFlowProps } from 'number-flow';

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.2",
+  "version": "0.1.4",
   "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.5"
+    "number-flow": "0.3.7"
   },
   "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",