svelte-analog-clock 0.2.0 → 0.5.0

package/README.md

@@ -5,7 +5,7 @@ An analog clock for your Svelte 5 app. Svelte port of [React-Clock](https://gith
 ## Installation
 
 ```sh
-npm install svelte-analog-clock
+npm install svelte-analog-clock svelte-date-utils
 ```
 
 Requires Svelte 5 or later.
@@ -15,11 +15,17 @@ Requires Svelte 5 or later.
 ```svelte
 <script lang="ts">
   import Clock from 'svelte-analog-clock';
+  import { AdapterDate } from 'svelte-date-utils';
+  import { provideDateAdapter } from 'svelte-date-utils';
+
+  provideDateAdapter(new AdapterDate());
 </script>
 
 <Clock value={new Date()} />
 ```
 
+Install `svelte-date-utils` alongside the clock. Its adapter is required and comes from Svelte context. Call `provideDateAdapter(adapter)` in this component or an ancestor before rendering `Clock`; without it, the clock throws an error. The adapter determines the date object type accepted by `value`. `AdapterDate` uses native `Date`; date-fns, Luxon and `@internationalized/date` adapters are exported from `svelte-date-utils/date-fns`, `svelte-date-utils/luxon` and `svelte-date-utils/internationalized`.
+
 Styles are imported automatically. Elements use BEM class names starting with `svelte-clock`.
 
 ## Props

package/dist/Clock.svelte

@@ -1,9 +1,11 @@
-<script lang="ts">
+<script lang="ts" generics="T">
   import './Clock.css';
+  import { untrack } from 'svelte';
+  import { getDateAdapter } from 'svelte-date-utils';
 
   import type { ClassValue } from 'svelte/elements';
 
-  type ClockProps = {
+  type ClockProps<T> = {
     /**
      * Class name(s) that will be added along with `"svelte-clock"` to the main `<time>` element.
      */
@@ -144,7 +146,7 @@
      * @example new Date()
      * @example '22:15:00'
      */
-    value?: Date | string | null;
+    value?: T | string | null;
   };
 
   let {
@@ -172,25 +174,27 @@
     size = 150,
     useMillisecondPrecision = false,
     value,
-  }: ClockProps = $props();
+  }: ClockProps<T> = $props();
+
+  const adapter = getDateAdapter<T>('Clock');
 
   const hourMarks = Array.from({ length: 12 }, (_, index) => index);
   const minuteMarks = Array.from({ length: 60 }, (_, index) => index).filter(
     (index) => index % 5 !== 0,
   );
 
-  let now = $state(new Date());
+  let now = $state(untrack(() => adapter.date()));
 
   $effect(() => {
     if (value !== undefined) {
       return;
     }
 
-    now = new Date();
+    now = adapter.date();
 
     if (useMillisecondPrecision) {
       let frame = requestAnimationFrame(function tick() {
-        now = new Date();
+        now = adapter.date();
         frame = requestAnimationFrame(tick);
       });
 
@@ -198,33 +202,28 @@
     }
 
     const interval = setInterval(() => {
-      now = new Date();
+      now = adapter.date();
     }, 1000);
 
     return () => clearInterval(interval);
   });
 
-  function parseTime(input: Date | string): Date | null {
-    if (input instanceof Date) {
-      return Number.isNaN(input.getTime()) ? null : input;
-    }
-
+  function parseTime(input: T | string): T | null {
+    if (typeof input !== 'string') return adapter.isValid(input) ? input : null;
     // Time-only strings, e.g. "22:15" or "22:15:30"
     const match = /^(\d{1,2}):(\d{2})(?::(\d{2})(?:\.(\d+))?)?$/.exec(input);
 
     if (match) {
-      const date = new Date();
-      date.setHours(
-        Number(match[1]),
-        Number(match[2]),
-        Number(match[3] ?? 0),
-        Number((match[4] ?? '0').padEnd(3, '0').slice(0, 3)),
-      );
+      let date = adapter.date();
+      date = adapter.setHours(date, Number(match[1]));
+      date = adapter.setMinutes(date, Number(match[2]));
+      date = adapter.setSeconds(date, Number(match[3] ?? 0));
+      date = adapter.setMilliseconds(date, Number((match[4] ?? '0').padEnd(3, '0').slice(0, 3)));
       return date;
     }
 
-    const date = new Date(input);
-    return Number.isNaN(date.getTime()) ? null : date;
+    const date = adapter.date(input);
+    return adapter.isValid(date) ? date : null;
   }
 
   const date = $derived(value === undefined ? now : value === null ? null : parseTime(value));
@@ -234,10 +233,10 @@
       return null;
     }
 
-    const hours = date.getHours() % 12;
-    const minutes = date.getMinutes();
-    const seconds = date.getSeconds();
-    const milliseconds = useMillisecondPrecision ? date.getMilliseconds() : 0;
+    const hours = adapter.getHours(date) % 12;
+    const minutes = adapter.getMinutes(date);
+    const seconds = adapter.getSeconds(date);
+    const milliseconds = useMillisecondPrecision ? adapter.getMilliseconds(date) : 0;
 
     return {
       hour: hours * 30 + minutes * 0.5 + seconds / 120,
@@ -246,7 +245,7 @@
     };
   });
 
-  const datetime = $derived(date ? date.toISOString() : undefined);
+  const datetime = $derived(date ? adapter.toJsDate(date).toISOString() : undefined);
 </script>
 
 {#snippet hand(

package/dist/Clock.svelte.d.ts

@@ -1,6 +1,6 @@
 import './Clock.css';
 import type { ClassValue } from 'svelte/elements';
-type ClockProps = {
+type ClockProps<T> = {
     /**
      * Class name(s) that will be added along with `"svelte-clock"` to the main `<time>` element.
      */
@@ -141,8 +141,29 @@ type ClockProps = {
      * @example new Date()
      * @example '22:15:00'
      */
-    value?: Date | string | null;
+    value?: T | string | null;
 };
-declare const Clock: import("svelte").Component<ClockProps, {}, "">;
-type Clock = ReturnType<typeof Clock>;
+declare function $$render<T>(): {
+    props: ClockProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Clock: $$IsomorphicComponent;
+type Clock<T> = InstanceType<typeof Clock<T>>;
 export default Clock;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-analog-clock",
-  "version": "0.2.0",
+  "version": "0.5.0",
   "description": "An analog clock for your Svelte app.",
   "keywords": [
     "analog-clock",

package/src/Clock.svelte

@@ -1,9 +1,11 @@
-<script lang="ts">
+<script lang="ts" generics="T">
   import './Clock.css';
+  import { untrack } from 'svelte';
+  import { getDateAdapter } from 'svelte-date-utils';
 
   import type { ClassValue } from 'svelte/elements';
 
-  type ClockProps = {
+  type ClockProps<T> = {
     /**
      * Class name(s) that will be added along with `"svelte-clock"` to the main `<time>` element.
      */
@@ -144,7 +146,7 @@
      * @example new Date()
      * @example '22:15:00'
      */
-    value?: Date | string | null;
+    value?: T | string | null;
   };
 
   let {
@@ -172,25 +174,27 @@
     size = 150,
     useMillisecondPrecision = false,
     value,
-  }: ClockProps = $props();
+  }: ClockProps<T> = $props();
+
+  const adapter = getDateAdapter<T>('Clock');
 
   const hourMarks = Array.from({ length: 12 }, (_, index) => index);
   const minuteMarks = Array.from({ length: 60 }, (_, index) => index).filter(
     (index) => index % 5 !== 0,
   );
 
-  let now = $state(new Date());
+  let now = $state(untrack(() => adapter.date()));
 
   $effect(() => {
     if (value !== undefined) {
       return;
     }
 
-    now = new Date();
+    now = adapter.date();
 
     if (useMillisecondPrecision) {
       let frame = requestAnimationFrame(function tick() {
-        now = new Date();
+        now = adapter.date();
         frame = requestAnimationFrame(tick);
       });
 
@@ -198,33 +202,28 @@
     }
 
     const interval = setInterval(() => {
-      now = new Date();
+      now = adapter.date();
     }, 1000);
 
     return () => clearInterval(interval);
   });
 
-  function parseTime(input: Date | string): Date | null {
-    if (input instanceof Date) {
-      return Number.isNaN(input.getTime()) ? null : input;
-    }
-
+  function parseTime(input: T | string): T | null {
+    if (typeof input !== 'string') return adapter.isValid(input) ? input : null;
     // Time-only strings, e.g. "22:15" or "22:15:30"
     const match = /^(\d{1,2}):(\d{2})(?::(\d{2})(?:\.(\d+))?)?$/.exec(input);
 
     if (match) {
-      const date = new Date();
-      date.setHours(
-        Number(match[1]),
-        Number(match[2]),
-        Number(match[3] ?? 0),
-        Number((match[4] ?? '0').padEnd(3, '0').slice(0, 3)),
-      );
+      let date = adapter.date();
+      date = adapter.setHours(date, Number(match[1]));
+      date = adapter.setMinutes(date, Number(match[2]));
+      date = adapter.setSeconds(date, Number(match[3] ?? 0));
+      date = adapter.setMilliseconds(date, Number((match[4] ?? '0').padEnd(3, '0').slice(0, 3)));
       return date;
     }
 
-    const date = new Date(input);
-    return Number.isNaN(date.getTime()) ? null : date;
+    const date = adapter.date(input);
+    return adapter.isValid(date) ? date : null;
   }
 
   const date = $derived(value === undefined ? now : value === null ? null : parseTime(value));
@@ -234,10 +233,10 @@
       return null;
     }
 
-    const hours = date.getHours() % 12;
-    const minutes = date.getMinutes();
-    const seconds = date.getSeconds();
-    const milliseconds = useMillisecondPrecision ? date.getMilliseconds() : 0;
+    const hours = adapter.getHours(date) % 12;
+    const minutes = adapter.getMinutes(date);
+    const seconds = adapter.getSeconds(date);
+    const milliseconds = useMillisecondPrecision ? adapter.getMilliseconds(date) : 0;
 
     return {
       hour: hours * 30 + minutes * 0.5 + seconds / 120,
@@ -246,7 +245,7 @@
     };
   });
 
-  const datetime = $derived(date ? date.toISOString() : undefined);
+  const datetime = $derived(date ? adapter.toJsDate(date).toISOString() : undefined);
 </script>
 
 {#snippet hand(