@slidy/media - use generic for better DX

Valexr · Aug 19, 2022 · 36ecdd8 · 36ecdd8 · Valexr · Aug 19, 2022
1 parent 41fcbce
commit 36ecdd8
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 14 deletions.
diff --git a/assets/package.json b/assets/package.json
@@ -5,6 +5,7 @@
     "main": "index.js",
     "devDependencies": {
         "@slidy/animation": "workspace:*",
+        "@slidy/media": "workspace:*",
         "svelte": "^3.49.0"
     },
     "keywords": [],

diff --git a/packages/media/src/media.ts b/packages/media/src/media.ts
@@ -1,8 +1,8 @@
 import type { Options, Queries } from './types';
 
-export function media({ queries, getter, cookie }: Partial<Options>) {
-    const subscribers: Set<(matches: Queries) => void> = new Set();
-    const matches: Queries = {};
+export function media<T extends string>({ queries, getter, cookie }: Partial<Options<T>>) {
+    const subscribers: Set<(matches: Queries<T>) => void> = new Set();
+    const matches = {} as Queries<T>;
 
     if (typeof window === 'object') {
         for (const query in queries) {
@@ -13,22 +13,22 @@ export function media({ queries, getter, cookie }: Partial<Options>) {
     }
 
     function set(media: MediaQueryList | MediaQueryListEvent, query: string) {
-        matches[query] = media.matches;
+        matches[query as keyof Queries<T>] = media.matches;
         update(matches);
         getter && getter(matches);
         cookie && (document.cookie = `media=${JSON.stringify(matches)}`);
     }
 
-    function update(matches: Queries) {
+    function update(matches: Queries<T>) {
         subscribers.forEach((fn) => fn(matches));
     }
 
-    function subscribe(fn: (matches: Queries) => void) {
+    function subscribe(fn: (matches: Queries<T>) => void) {
         fn(matches);
         subscribers.add(fn);
         return () => unsubscribe(fn);
     }
-    const unsubscribe = (fn: (matches: Queries) => void): boolean => subscribers.delete(fn);
+    const unsubscribe = (fn: (matches: Queries<T>) => void): boolean => subscribers.delete(fn);
 
     return { matches, subscribe };
 }
diff --git a/packages/media/src/types.ts b/packages/media/src/types.ts
@@ -1,12 +1,10 @@
-type Queries = {
-    [key: string]: boolean | string | undefined;
-};
+type Queries<T extends string> = Record<T, string | boolean | undefined>;
 
-type Getter = (matches: Queries) => void;
+type Getter<T extends string> = (matches: Queries<T>) => void;
 
-interface Options {
-    queries: Queries;
-    getter: Getter;
+interface Options<T extends string> {
+    queries: Queries<T>;
+    getter: Getter<T>;
     cookie: boolean;
 }