fix typings

Author: panoply

index.d.ts

@@ -1,68 +1,140 @@
-export interface ViewportFunctions {
-  /**
-   * A method that runs when the viewport is first entered (triggered only once).
-   */
-   oninit?(): void
-   /**
-    * A method to fire when you enter the viewport.
+interface ViewportFunctions {
+    /**
+     * A method that runs when the viewport is first entered (triggered only once).
+     */
+    oninit?(): void;
+    /**
+     * A method to fire when you enter the viewport.
+     */
+    onenter?(): void;
+    /**
+     * A method to fire when you leave the viewport.
+     */
+    onexit?(): void;
+    /**
+     * A method to fire upon screen resize
+     */
+    onresize?(screenX?: number): void;
+}
+interface ViewportOptions extends ViewportFunctions {
+    /**
+     * An ID reference for the viewport. This will be used in queries
+     */
+    id: string;
+    /**
+     * The media query to match
+     *
+     * @example
+     *
+     * '(min-width: 768px)'
+     */
+    query: string;
+}
+interface ViewportScreen {
+    /**
+     * Whether or not viewport is active
+     */
+    active: boolean;
+    /**
+     * The ID reference for the viewport
+     */
+    id: string;
+    /**
+     * The media query being matches
+     */
+    query: string;
+    /**
+     * Match media instances
+     */
+    test: MediaQueryList;
+    /**
+     * A `Set` List of methods that will be triggered upon initializing within the viewport
+     */
+    oninit: Set<() => void>;
+    /**
+    * A `Set` List of methods that will be triggered when entering the viewport
     */
-   onenter?(): void
-   /**
-    * A method to fire when you leave the viewport.
+    onenter: Set<() => void>;
+    /**
+    * A `Set` List of methods that will be triggered when existing the viewport
     */
-   onexit?(): void
-   /**
-    * A method to fire upon screen resize
+    onexit: Set<() => void>;
+    /**
+    * A `Set` List of methods that will be triggered when resizing the screen.
     */
-   onresize?(screenX?: number): void
+    onresize: Set<(screenX?: number) => void>;
 }
+/**
+ * The Viewports store
+ *
+ * Holds a reference to all states
+ */
+declare const viewports: Map<string, ReturnType<typeof create>>;
+/**
+ * Create
+ *
+ * Create viewport states
+ */
+declare function create(opts: ViewportOptions): {
+    onenter: () => void;
+    onexit: () => void;
+    onresize: (x: number) => void;
+    destroy: () => void;
+    readonly screen: ViewportScreen;
+};
+/**
+ * Create Screens
+ *
+ * Define a set of viewports to match against. You can
+ * optionally include methods or use `add` to set methods
+ * at a later time.
+ */
+declare const screens: (options: ViewportOptions | ViewportOptions[]) => void;
+/**
+ * Get Viewport
+ *
+ * Returns a viewport instance by its `id` else `false`
+ */
+declare const get: (id: string) => false | {
+    onenter: () => void;
+    onexit: () => void;
+    onresize: (x: number) => void;
+    destroy: () => void;
+    readonly screen: ViewportScreen;
+};
+/**
+ * Add Methods
+ *
+ * Add methods to be invoked in when the viewport is matched.
+ */
+declare const add: (id: string, actions: ViewportFunctions) => void;
+/**
+ * List Screens
+ *
+ * Returns a list of viewport screens from the store. Optionally
+ * provide a `string[]` list of ids.
+ */
+declare const list: (ids?: string[]) => ViewportScreen[];
+/**
+ * Check State
+ *
+ * Returns a `boolean` value informing on whether the provided
+ * viewport id is active or not. When no `id` parameter is passed
+ * a list of viewport screens which are active will be returned.
+ */
+declare const active: (id?: string) => boolean | ViewportScreen | ViewportScreen[];
+/**
+ * Remove viewport query
+ *
+ * Removes and destroys the viewport screen and store with
+ * the matching `id` provided.
+ */
+declare const remove: (id: string) => void;
+/**
+ * Destroy
+ *
+ * Removes all instances and tears down the listeners.
+ */
+declare const destroy: () => void;
 
-export interface ViewportOptions extends ViewportFunctions {
-  /**
-   * An ID reference for the viewport. This will be used in queries
-   */
-  id: string;
-  /**
-   * The media query to match
-   *
-   * @example
-   *
-   * '(min-width: 768px)'
-   */
-  query: string;
-}
-
-export interface ViewportScreen {
-  /**
-   * Whether or not viewport is active
-   */
-  active: boolean;
-  /**
-   * The ID reference for the viewport
-   */
-  id: string
-  /**
-   * The media query being matches
-   */
-  query: string;
-  /**
-   * Match media instances
-   */
-  test: MediaQueryList;
-  /**
-   * A `Set` List of methods that will be triggered upon initializing within the viewport
-   */
-  oninit: Set<() => void>;
-  /**
-  * A `Set` List of methods that will be triggered when entering the viewport
-  */
-  onenter: Set<() => void>;
-  /**
-  * A `Set` List of methods that will be triggered when existing the viewport
-  */
-  onexit: Set<() => void>;
-  /**
-  * A `Set` List of methods that will be triggered when resizing the screen.
-  */
-  onresize: Set<(screenX?: number) => void>;
-}
+export { active, add, destroy, get, list, remove, screens, viewports };

index.js

@@ -1,7 +1,7 @@
 {
   "name": "@panoply/viewports",
   "description": "A tiny (900 bytes gzipped) media query utility for programmatic control of screen viewports.",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "homepage": "https://github.com/panoply/viewports",
   "author": {
     "name": "Nikolas Savvidis",
@@ -53,11 +53,20 @@
     }
   },
   "scripts": {
-    "dev": "esbuild src/index.ts --outfile=index.js --format=esm --bundle --watch",
-    "build": "pnpm run esm",
-    "esm": "esbuild src/index.ts --outfile=index.js --format=esm --bundle --mangle-props=^[$] --minify",
+    "dev": "tsup --watch",
+    "build": "tsup --minify --dts",
     "gzs": "gzip-size index.js --include-original"
   },
+  "tsup": {
+    "entry": [
+      "./src/index.ts"
+    ],
+    "clean": false,
+    "outDir": ".",
+    "format": [
+      "esm"
+    ]
+  },
   "browserslist": [
     "defaults",
     "Chrome >= 78",
@@ -75,10 +84,10 @@
     "@sissel/eslint-config": "^1.1.0",
     "@sissel/prettier-config": "^1.1.0",
     "browserslist": "^4.21.4",
-    "esbuild": "^0.15.12",
     "eslint": "^8.26.0",
     "gzip-size-cli": "^5.1.0",
     "prettier": "^2.7.1",
+    "tsup": "^6.3.0",
     "typescript": "^4.8.4"
   }
 }