@ouroboros/browser 0.4.0 → 0.4.1

package/README.md

@@ -72,7 +72,7 @@ or
 import { network } from '@ouroboros/browser';
 ```
 
-default (network)
+default (Subscribe)
 
 ## pageVisibility
 
@@ -88,7 +88,7 @@ or
 import { pageVisibility } from '@ouroboros/browser';
 ```
 
-default (pageVisibility)
+default (Subscribe)
 
 ## safeLocalStorage
 
@@ -120,4 +120,4 @@ or
 import { size } from '@ouroboros/browser';
 ```
 
-xs, sm, md, lg, xl, compare(), get(), greaterThan(), lessThan()
+size (Subscribe), compare(), greaterThan(), lessThan()

package/index.d.ts

@@ -4,4 +4,4 @@ export { default as hash } from './hash';
 export { default as network } from './network';
 export { default as pageVisibility } from './pageVisibility';
 export { default as safeLocalStorage } from './safeLocalStorage';
-export { default as size } from './size';
+export { default as size, compare, greaterThan, lessThan } from './size';

package/index.js

@@ -4,4 +4,4 @@ export { default as hash } from './hash';
 export { default as network } from './network';
 export { default as pageVisibility } from './pageVisibility';
 export { default as safeLocalStorage } from './safeLocalStorage';
-export { default as size } from './size';
+export { default as size, compare, greaterThan, lessThan } from './size';

package/index.ts

@@ -4,4 +4,4 @@ export { default as hash } from './hash';
 export { default as network } from './network';
 export { default as pageVisibility } from './pageVisibility';
 export { default as safeLocalStorage } from './safeLocalStorage';
-export { default as size } from './size';
+export { default as size, compare, greaterThan, lessThan } from './size';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ouroboros/browser",
-	"version": "0.4.0",
+	"version": "0.4.1",
 	"description": "Package to handle common browser functionality.",
 	"main": "index.js",
 	"types": "index.d.ts",
@@ -22,7 +22,8 @@
 		"hash",
 		"local storage",
 		"network",
-		"page visibility"
+		"page visibility",
+		"browser size"
 	],
 	"author": "Chris Nasr <chris@ouroboroscoding.com>",
 	"license": "MIT",

package/size.d.ts

@@ -7,13 +7,101 @@
  * @copyright Ouroboros Coding Inc.
  * @created 2024-09-19
  */
-export declare const xs = "xs";
-export declare const sm = "sm";
-export declare const md = "md";
-export declare const lg = "lg";
-export declare const xl = "xl";
-export type SIZE = typeof xs | typeof sm | typeof md | typeof lg | typeof xl;
+import Subscribe, { SubscribeCallback, SubscribeReturn } from '@ouroboros/subscribe';
+export type SIZE = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export declare const SIZES: Record<SIZE, number>;
+/**
+ * Size
+ *
+ * Extends the Subscribe class to be created once and exported
+ *
+ * @name Size
+ * @extends Subscribe
+ */
+declare class Size extends Subscribe {
+    _callback: () => void;
+    /**
+     * Constructor
+     *
+     * Creates a new instance and returns it
+     *
+     * @name Size
+     * @access private
+     * @returns Size
+     */
+    constructor();
+    /**
+     * Compare
+     *
+     * Calls the module's `compare` method with the current size and the
+     * `against` param.
+     *
+     * @name compare
+     * @access public
+     * @param against The size to compare the current size against
+     * @returns number
+     */
+    compare(against: SIZE): number;
+    /**
+     * Get
+     *
+     * Returns the current size. Overrides the built in Subscribe.get to make
+     * sure we always have the latest, even if no one has ever subscribed
+     *
+     * @name get
+     * @access public
+     * @returns string
+     */
+    get(): SIZE;
+    /**
+     * Greater Than
+     *
+     * Calls the module's `greaterThan` method with the current size and the
+     * `against` param.
+     *
+     * @name greaterThan
+     * @access public
+     * @param against The size to compare the current size against
+     * @returns number
+     */
+    greaterThan(against: SIZE): boolean;
+    /**
+     * Less Than
+     *
+     * Calls the module's `lessThan` method with the current size and the
+     * `against` param.
+     *
+     * @name lessThan
+     * @access public
+     * @param against The size to compare the current size against
+     * @returns number
+     */
+    lessThan(against: SIZE): boolean;
+    /**
+     * Subscribe
+     *
+     * Overrides parent subscribe to handle adding the window event
+     *
+     * @name subscribe
+     * @access public
+     * @param callback The function to call when the state changes
+     * @returns object
+     */
+    subscribe(callback: SubscribeCallback): SubscribeReturn;
+    /**
+     * Unsubscribe
+     *
+     * Overrides parent unsubscribe to handle removing the window event
+     *
+     * @name unsubscribe
+     * @access public
+     * @param callback The callback to remove from the list
+     * @returns boolean
+     */
+    unsubscribe(callback: SubscribeCallback): boolean;
+}
+declare const size: Size;
+export default size;
 /**
  * Compare
  *
@@ -22,10 +110,11 @@ export declare const SIZES: Record<SIZE, number>;
  *
  * @name compare
  * @access public
- * @param against The size to compare the current size against
+ * @param a The size to compare against `b`
+ * @param b The size to compare against `a`
  * @returns -1 || 0 || 1
  */
-export declare function compare(against: SIZE): 0 | 1 | -1;
+export declare function compare(a: SIZE, b: SIZE): 0 | 1 | -1;
 /**
  * Greater Than
  *
@@ -33,10 +122,11 @@ export declare function compare(against: SIZE): 0 | 1 | -1;
  *
  * @name greaterThan
  * @access public
- * @param against The size to compare the current size against
+ * @param a The size to compare as greater than `b`
+ * @param b The size to compare against `a`
  * @returns boolean
  */
-export declare function greaterThan(against: SIZE): boolean;
+export declare function greaterThan(a: SIZE, b: SIZE): boolean;
 /**
  * Less Than
  *
@@ -44,29 +134,8 @@ export declare function greaterThan(against: SIZE): boolean;
  *
  * @name greaterThan
  * @access public
- * @param against The size to compare the current size against
+ * @param a The size to compare as less than `b`
+ * @param b The size to compare against `a`
  * @returns boolean
  */
-export declare function lessThan(against: SIZE): boolean;
-/**
- * Get
- *
- * Returns the current width type based on the current client width
- *
- * @name get
- * @access public
- * @returns The current width
- */
-export declare function get(): SIZE;
-declare const width: {
-    xs: string;
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    compare: typeof compare;
-    greaterThan: typeof greaterThan;
-    lessThan: typeof lessThan;
-    get: typeof get;
-};
-export default width;
+export declare function lessThan(a: SIZE, b: SIZE): boolean;

package/size.js

@@ -7,52 +7,168 @@
  * @copyright Ouroboros Coding Inc.
  * @created 2024-09-19
  */
-// Constants
-export const xs = 'xs';
-export const sm = 'sm';
-export const md = 'md';
-export const lg = 'lg';
-export const xl = 'xl';
+// Ouroboros modules
+import Subscribe from '@ouroboros/subscribe';
 // The minimum pixels necessary for each size type
 export const SIZES = {
-    [xs]: 0, [sm]: 600, [md]: 900,
-    [lg]: 1200, [xl]: 1536
+    xs: 0, sm: 600, md: 900, lg: 1200, xl: 1536
 };
-// The current size
-let _current = null;
 /**
- * Init
+ * Calculate
  *
- * Called internally to setup the module
+ * Uses the current client width to calculate the string representation
  *
- * @name _init
+ * @name calculate
  * @access private
+ * @returns string
  */
-function _init() {
-    // Const private function to calculate size from client width
-    const _calculate = () => {
-        if (document.documentElement.clientWidth < 600) {
-            return xs;
-        }
-        if (document.documentElement.clientWidth < 900) {
-            return sm;
+function calculate() {
+    if (document.documentElement.clientWidth < 600) {
+        return 'xs';
+    }
+    if (document.documentElement.clientWidth < 900) {
+        return 'sm';
+    }
+    if (document.documentElement.clientWidth < 1200) {
+        return 'md';
+    }
+    if (document.documentElement.clientWidth < 1536) {
+        return 'lg';
+    }
+    return 'xl';
+}
+/**
+ * Size
+ *
+ * Extends the Subscribe class to be created once and exported
+ *
+ * @name Size
+ * @extends Subscribe
+ */
+class Size extends Subscribe {
+    // The window event callback
+    _callback;
+    /**
+     * Constructor
+     *
+     * Creates a new instance and returns it
+     *
+     * @name Size
+     * @access private
+     * @returns Size
+     */
+    constructor() {
+        // Get the current values and init the instance with them
+        super(calculate());
+        // Store the subscription callback
+        this._callback = () => {
+            this.set(calculate());
+        };
+    }
+    /**
+     * Compare
+     *
+     * Calls the module's `compare` method with the current size and the
+     * `against` param.
+     *
+     * @name compare
+     * @access public
+     * @param against The size to compare the current size against
+     * @returns number
+     */
+    compare(against) {
+        return compare(this.subscribeData, against);
+    }
+    /**
+     * Get
+     *
+     * Returns the current size. Overrides the built in Subscribe.get to make
+     * sure we always have the latest, even if no one has ever subscribed
+     *
+     * @name get
+     * @access public
+     * @returns string
+     */
+    get() {
+        const s = calculate();
+        if (s !== this.subscribeData) {
+            this.set(s);
         }
-        if (document.documentElement.clientWidth < 1200) {
-            return md;
+        return s;
+    }
+    /**
+     * Greater Than
+     *
+     * Calls the module's `greaterThan` method with the current size and the
+     * `against` param.
+     *
+     * @name greaterThan
+     * @access public
+     * @param against The size to compare the current size against
+     * @returns number
+     */
+    greaterThan(against) {
+        return greaterThan(this.subscribeData, against);
+    }
+    /**
+     * Less Than
+     *
+     * Calls the module's `lessThan` method with the current size and the
+     * `against` param.
+     *
+     * @name lessThan
+     * @access public
+     * @param against The size to compare the current size against
+     * @returns number
+     */
+    lessThan(against) {
+        return lessThan(this.subscribeData, against);
+    }
+    /**
+     * Subscribe
+     *
+     * Overrides parent subscribe to handle adding the window event
+     *
+     * @name subscribe
+     * @access public
+     * @param callback The function to call when the state changes
+     * @returns object
+     */
+    subscribe(callback) {
+        // If we have no current subscribers
+        if (this.subscribeCallbacks.length === 0) {
+            // Add the event listener
+            window.addEventListener('resize', this._callback);
         }
-        if (document.documentElement.clientWidth < 1536) {
-            return lg;
+        // Call the parent subscribe and return
+        return super.subscribe(callback);
+    }
+    /**
+     * Unsubscribe
+     *
+     * Overrides parent unsubscribe to handle removing the window event
+     *
+     * @name unsubscribe
+     * @access public
+     * @param callback The callback to remove from the list
+     * @returns boolean
+     */
+    unsubscribe(callback) {
+        // Call the parent unsubscribe
+        const bRet = super.unsubscribe(callback);
+        // If it was successful and we have no more callbacks
+        if (bRet && this.subscribeCallbacks.length === 0) {
+            // Remove the event listener
+            window.removeEventListener('resize', this._callback);
         }
-        return xl;
-    };
-    // If we don't have the size
-    if (_current === null) {
-        _current = _calculate();
-        window.addEventListener('resize', () => {
-            _current = _calculate();
-        });
+        // Return
+        return bRet;
     }
 }
+// Create an instance of the class
+const size = new Size();
+// Default export
+export default size;
 /**
  * Compare
  *
@@ -61,18 +177,16 @@ function _init() {
  *
  * @name compare
  * @access public
- * @param against The size to compare the current size against
+ * @param a The size to compare against `b`
+ * @param b The size to compare against `a`
  * @returns -1 || 0 || 1
  */
-export function compare(against) {
-    // Init if necessary
-    if (_current === null)
-        _init();
+export function compare(a, b) {
     // If the current size is the same as the passed value
-    if (_current === against)
+    if (a === b)
         return 0;
     // Else, if the current value is less than the passed value
-    if (SIZES[_current] < SIZES[against])
+    if (SIZES[a] < SIZES[b])
         return -1;
     // Else, the current value is more than the passed value
     return 1;
@@ -84,15 +198,13 @@ export function compare(against) {
  *
  * @name greaterThan
  * @access public
- * @param against The size to compare the current size against
+ * @param a The size to compare as greater than `b`
+ * @param b The size to compare against `a`
  * @returns boolean
  */
-export function greaterThan(against) {
-    // Init if necessary
-    if (_current === null)
-        _init();
+export function greaterThan(a, b) {
     // If the current value is greater than the passed value
-    return SIZES[_current] > SIZES[against];
+    return SIZES[a] > SIZES[b];
 }
 /**
  * Less Than
@@ -101,32 +213,11 @@ export function greaterThan(against) {
  *
  * @name greaterThan
  * @access public
- * @param against The size to compare the current size against
+ * @param a The size to compare as less than `b`
+ * @param b The size to compare against `a`
  * @returns boolean
  */
-export function lessThan(against) {
-    // Init if necessary
-    if (_current === null)
-        _init();
-    // If the current value is less than the passed value
-    return SIZES[_current] < SIZES[against];
-}
-/**
- * Get
- *
- * Returns the current width type based on the current client width
- *
- * @name get
- * @access public
- * @returns The current width
- */
-export function get() {
-    // Init if necessary
-    if (_current === null)
-        _init();
-    // Return the current size
-    return _current;
+export function lessThan(a, b) {
+    // If the `a` minimum value is less than the `b` minimum value
+    return SIZES[a] < SIZES[b];
 }
-// Default export
-const width = { xs, sm, md, lg, xl, compare, greaterThan, lessThan, get };
-export default width;

package/size.ts

@@ -8,53 +8,188 @@
  * @created 2024-09-19
  */
 
-// Constants
-export const xs = 'xs';
-export const sm = 'sm';
-export const md = 'md';
-export const lg = 'lg';
-export const xl = 'xl';
+// Ouroboros modules
+import Subscribe, {
+	SubscribeCallback,
+	SubscribeReturn
+} from '@ouroboros/subscribe';
 
 // Types
-export type SIZE = typeof xs | typeof sm | typeof md | typeof lg | typeof xl;
+export type SIZE = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
 // The minimum pixels necessary for each size type
 export const SIZES: Record<SIZE, number> = {
-	[xs]: 0,	[sm]: 600,	[md]: 900,
-	[lg]: 1200,	[xl]: 1536
+	xs: 0, sm: 600, md: 900, lg: 1200, xl: 1536
 }
 
-// The current size
-let _current: SIZE | null = null;
-
 /**
- * Init
+ * Calculate
  *
- * Called internally to setup the module
+ * Uses the current client width to calculate the string representation
  *
- * @name _init
+ * @name calculate
  * @access private
+ * @returns string
  */
-function _init(): void {
-
-	// Const private function to calculate size from client width
-	const _calculate = () => {
-		if(document.documentElement.clientWidth < 600) { return xs }
-		if(document.documentElement.clientWidth < 900) { return sm }
-		if(document.documentElement.clientWidth < 1200) { return md }
-		if(document.documentElement.clientWidth < 1536) { return lg }
-		return xl;
+function calculate(): SIZE {
+	if(document.documentElement.clientWidth < 600) { return 'xs' }
+	if(document.documentElement.clientWidth < 900) { return 'sm' }
+	if(document.documentElement.clientWidth < 1200) { return 'md' }
+	if(document.documentElement.clientWidth < 1536) { return 'lg' }
+	return 'xl';
+}
+
+/**
+ * Size
+ *
+ * Extends the Subscribe class to be created once and exported
+ *
+ * @name Size
+ * @extends Subscribe
+ */
+class Size extends Subscribe {
+
+	// The window event callback
+	_callback: () => void;
+
+	/**
+	 * Constructor
+	 *
+	 * Creates a new instance and returns it
+	 *
+	 * @name Size
+	 * @access private
+	 * @returns Size
+	 */
+	constructor() {
+
+		// Get the current values and init the instance with them
+		super(calculate());
+
+		// Store the subscription callback
+		this._callback = () => {
+			this.set(calculate());
+		}
+	}
+
+	/**
+	 * Compare
+	 *
+	 * Calls the module's `compare` method with the current size and the
+	 * `against` param.
+	 *
+	 * @name compare
+	 * @access public
+	 * @param against The size to compare the current size against
+	 * @returns number
+	 */
+	compare(against: SIZE): number {
+		return compare(this.subscribeData, against);
+	}
+
+	/**
+	 * Get
+	 *
+	 * Returns the current size. Overrides the built in Subscribe.get to make
+	 * sure we always have the latest, even if no one has ever subscribed
+	 *
+	 * @name get
+	 * @access public
+	 * @returns string
+	 */
+	get() {
+		const s = calculate();
+		if(s !== this.subscribeData) {
+			this.set(s);
+		}
+		return s;
+	}
+
+	/**
+	 * Greater Than
+	 *
+	 * Calls the module's `greaterThan` method with the current size and the
+	 * `against` param.
+	 *
+	 * @name greaterThan
+	 * @access public
+	 * @param against The size to compare the current size against
+	 * @returns number
+	 */
+	greaterThan(against: SIZE): boolean {
+		return greaterThan(this.subscribeData, against);
+	}
+
+	/**
+	 * Less Than
+	 *
+	 * Calls the module's `lessThan` method with the current size and the
+	 * `against` param.
+	 *
+	 * @name lessThan
+	 * @access public
+	 * @param against The size to compare the current size against
+	 * @returns number
+	 */
+	lessThan(against: SIZE): boolean {
+		return lessThan(this.subscribeData, against);
+	}
+
+	/**
+	 * Subscribe
+	 *
+	 * Overrides parent subscribe to handle adding the window event
+	 *
+	 * @name subscribe
+	 * @access public
+	 * @param callback The function to call when the state changes
+	 * @returns object
+	 */
+	subscribe(callback: SubscribeCallback): SubscribeReturn {
+
+		// If we have no current subscribers
+		if(this.subscribeCallbacks.length === 0) {
+
+			// Add the event listener
+			window.addEventListener('resize', this._callback);
+		}
+
+		// Call the parent subscribe and return
+		return super.subscribe(callback);
 	}
 
-	// If we don't have the size
-	if(_current === null) {
-		_current = _calculate();
-		window.addEventListener('resize', () => {
-			_current = _calculate();
-		});
+	/**
+	 * Unsubscribe
+	 *
+	 * Overrides parent unsubscribe to handle removing the window event
+	 *
+	 * @name unsubscribe
+	 * @access public
+	 * @param callback The callback to remove from the list
+	 * @returns boolean
+	 */
+	unsubscribe(callback: SubscribeCallback): boolean {
+
+		// Call the parent unsubscribe
+		const bRet = super.unsubscribe(callback);
+
+		// If it was successful and we have no more callbacks
+		if(bRet && this.subscribeCallbacks.length === 0) {
+
+			// Remove the event listener
+			window.removeEventListener('resize', this._callback);
+		}
+
+		// Return
+		return bRet;
 	}
 }
 
+// Create an instance of the class
+const size = new Size();
+// Default export
+export default size;
+
 /**
  * Compare
  *
@@ -63,19 +198,17 @@ function _init(): void {
  *
  * @name compare
  * @access public
- * @param against The size to compare the current size against
+ * @param a The size to compare against `b`
+ * @param b The size to compare against `a`
  * @returns -1 || 0 || 1
  */
-export function compare(against: SIZE) {
-
-	// Init if necessary
-	if(_current === null) _init();
+export function compare(a: SIZE, b: SIZE) {
 
 	// If the current size is the same as the passed value
-	if(_current === against) return 0;
+	if(a === b) return 0;
 
 	// Else, if the current value is less than the passed value
-	if(SIZES[_current as SIZE] < SIZES[against]) return -1;
+	if(SIZES[a] < SIZES[b]) return -1;
 
 	// Else, the current value is more than the passed value
 	return 1;
@@ -88,16 +221,14 @@ export function compare(against: SIZE) {
  *
  * @name greaterThan
  * @access public
- * @param against The size to compare the current size against
+ * @param a The size to compare as greater than `b`
+ * @param b The size to compare against `a`
  * @returns boolean
  */
-export function greaterThan(against: SIZE): boolean {
-
-	// Init if necessary
-	if(_current === null) _init();
+export function greaterThan(a: SIZE, b: SIZE): boolean {
 
 	// If the current value is greater than the passed value
-	return SIZES[_current as SIZE] > SIZES[against];
+	return SIZES[a] > SIZES[b];
 }
 
 /**
@@ -107,36 +238,12 @@ export function greaterThan(against: SIZE): boolean {
  *
  * @name greaterThan
  * @access public
- * @param against The size to compare the current size against
+ * @param a The size to compare as less than `b`
+ * @param b The size to compare against `a`
  * @returns boolean
  */
-export function lessThan(against: SIZE): boolean {
-
-	// Init if necessary
-	if(_current === null) _init();
+export function lessThan(a: SIZE, b: SIZE): boolean {
 
-	// If the current value is less than the passed value
-	return SIZES[_current as SIZE] < SIZES[against];
-}
-
-/**
- * Get
- *
- * Returns the current width type based on the current client width
- *
- * @name get
- * @access public
- * @returns The current width
- */
-export function get(): SIZE {
-
-	// Init if necessary
-	if(_current === null) _init();
-
-	// Return the current size
-	return _current as SIZE;
-}
-
-// Default export
-const width = { xs, sm, md, lg, xl, compare, greaterThan, lessThan, get };
-export default width;
+	// If the `a` minimum value is less than the `b` minimum value
+	return SIZES[a] < SIZES[b];
+}