danholibraryjs 1.5.0 → 1.8.0

package/src/Classes/store.ts

@@ -0,0 +1,95 @@
+import { Arrayable } from "../Types";
+import { EventEmitter } from "./Events";
+
+export type Reducer<State, Types extends Record<string, any[]>, Action extends keyof Types> = (state: State, ...args: Types[Action]) => State
+
+/**
+ * EventEmitter, but it stores state and handles state change with reducers
+ * 
+ * @Initialization Actions & initial state must be defined in type parameters. InitialState must be provided in constructor, whereas reducer is optional.
+ * The ActionType must have properties as strings and values as arrays.
+ * 
+ * @HandlingActions Reducers can be added through constructor or using Store.on('action', reducer) or Store.once('action', reducer).
+ * Every state change must return the next state, apart from 'stateChange', which returns void/any
+ * Emit/Dispatch an action using Store.dispatch('action', ...args), ...args being the parameters from the ActionType. 
+ * Store.emit should NOT be used, as it doesn't update the Store's state.
+ * 
+ * Reducer functions can be removed using Store.off('action', reducer);
+ * 
+ * @borrows EventEmitter
+ * @borrows Arrayable
+ * 
+ * @example ```ts
+ * import { Store } from 'danholibraryjs';
+ * 
+ * type Todo = {
+ *    id: string,
+ *    text: string,
+ *    completed: boolean
+ * }
+ * 
+ * type TodoActions = {
+ *    create: [text: string],
+ *    update: [id: string, text: string],
+ *    toggleComplete: [id: string, force?: boolean],
+ *    delete: [id: string],
+ * }
+ * 
+ * const store = new Store<Array<Todo>, TodoActions>(new Array<Todo>(), new Map([
+ *    create: (state, text) => {
+ *       return [...state, { 
+ *          id: Math.random().toString(), 
+ *          text, 
+ *          completed: false 
+ *      }];
+ *    },
+ *   toggleComplete: (state, id, force) => {
+ *      const todo = state.find(todo => todo.id === id);
+ *      if (!todo) return state;
+ * 
+ *      return state.map(todo => (
+ *          todo.id === id ? { 
+ *              ...todo, 
+ *              completed: force === undefined ? !todo.completed : force 
+ *          } : todo
+ *      ));
+ *   }
+ * ]));
+ * 
+ * store.on('delete', (state, id) => {
+ *     return state.filter(todo => todo.id !== id);
+ * });
+ * 
+ * store.on('stateChange', (prevState, currentState) => console.log('State change', prevState, currentState));
+ * 
+ * store.dispatch('create', 'Make store!');
+ * 
+ * ```
+ */
+export class Store<
+    State extends object,
+    ActionTypes extends Record<string, any[]>,
+    Actions extends 
+    { [Action in keyof ActionTypes]: Array<Reducer<State, ActionTypes, Action>> } = 
+    { [Action in keyof ActionTypes]: Array<Reducer<State, ActionTypes, Action>> }
+> extends EventEmitter<Record<keyof Actions, ActionTypes[keyof ActionTypes]> & Record<'stateChange', [previous: State, current: State]>> {
+    constructor(state: State, actions: { [Action in keyof ActionTypes]?: Arrayable<Reducer<State, ActionTypes, Action>> } = {}) {
+        super(new Map(...Object.entries(actions).map(([action, reducers]) => [action, reducers as any])));
+
+        this._state = state;
+    }
+
+    private _state: State;
+    public get state(): State {
+        return this._state;
+    }
+
+    public dispatch<Action extends keyof ActionTypes>(action: Action, ...args: ActionTypes[Action]): State {
+        const previous = { ...this._state };
+        this._state = super.emit<State, Action>(action, ...args as any).reduce((state, returned) => ({ ...state, ...returned }), this.state);
+
+        super.emit<void, 'stateChange'>('stateChange', ...[previous, this.state] as any);
+        return this.state;
+    }
+}
+export default Store;

package/src/Extensions/Array.ts

@@ -0,0 +1,57 @@
+export {};
+
+type UpdateFinder<T> = (item: T, index: number, self: Array<T>) => boolean
+
+declare global {
+    interface Array<T> {
+        /**
+         * Pushes items to array and returns self with new items
+         * @param items Items to add to array
+         */
+        add(...items: Array<T>): this
+        /**
+         * Update an item in array
+         * @param old The old value or index to update
+         * @param updated Updated value
+         */
+        update(old: T | number | UpdateFinder<T>, updated: T): T
+        /**
+         * Removes item from array and returns self without item
+         * @param item Item or index to remove
+         */
+        remove(item: T | number): this
+        /**
+         * Returns a random element from array
+         */
+        random(): T
+        /**
+         * Returns item matching index. If negative number, subtracts number from length
+         * @param i Index of item
+         */
+        index(i: number): T
+    }
+}
+
+Array.prototype.add = function<T>(this: Array<T>, ...items: Array<T>) {
+    this.push(...items);
+    return this;
+}
+Array.prototype.update = function<T>(this: Array<T>, old: T | number | UpdateFinder<T>, updated: T) {
+    const item = typeof old === 'number' ? this[old] : typeof old === 'function' ? this.find(old as UpdateFinder<T>) : old;
+    if (!item) throw new Error('Old was not found in array!');
+
+    const index = this.indexOf(item);
+    return this[index] = updated;
+}
+Array.prototype.remove = function<T>(this: Array<T>, value: T | number): Array<T> {
+    const index = typeof value === 'number' ? value : this.indexOf(value);
+    if (index > -1) this.splice(index, 1);
+    return this;
+}
+Array.prototype.random = function<T>(this: Array<T>): T {
+    const randomIndex = Math.round(Math.random() * this.length);
+    return this[randomIndex];
+}
+Array.prototype.index = function<T>(this: Array<T>, i: number): T {
+    return this[i < 0 ? this.length + i : i];
+}

package/src/Extensions/Map.ts

@@ -0,0 +1,73 @@
+export {}
+
+declare global {
+    interface Map<K, V> {
+        /**
+         * Converts into Array<[Key, Value]>
+         */
+        array(): Array<[K, V]>
+        /**
+         * Maps values into new types of generics
+         * @param callback Callbacking function to map values
+         */
+        map<EK, EV>(callback: (value: V, key: K, index: number, self: this) => [EK, EV]): Map<EK, EV>
+        /**
+         * Returns array of "accepted" values. Criteria defined in callback param
+         * @param callback Callbacking function to filter away unwanted values
+         */
+        filter(callback: (value: V, key: K, index: number, self: this) => boolean): Map<K, V>
+        /**
+         * Returns array of keys
+         */
+        keyArr(): Array<K>
+        /**
+         * Returns array of values
+         */
+        valueArr(): Array<V>
+        /**
+         * Returns first [key, value] match to callback param. Returns undefined if nothing found
+         * @param callback Callbacking function to find KeyValuePair
+         */
+        find(callback: (value: V, key: K, index: number, self: this) => boolean): [K, V] | undefined
+        /**
+         * Whether or not map includes a  value. Returns true if it does, false if not ¯\_(ツ)_/¯ 
+         * @param value Value that may be includded in map
+         * @param fromIndex Start looking for value from specific index+. Default: 0
+         */
+        includes(value: V, fromIndex?: number): boolean
+    }
+}
+
+Map.prototype.array = function<K, V>(this: Map<K, V>): Array<[K, V]> {
+    let result = new Array<[K, V]>();
+    for (const kvp of this) {
+        result.push(kvp);
+    }
+    return result;
+}
+Map.prototype.map = function<K, V, EK, EV>(this: Map<K, V>, callback: (value: V, key: K, index: number, map: Map<K, V>) => [EK, EV]): Map<EK, EV> {
+    return this.array()
+        .map(([k, v], i) => callback(v, k, i, this))
+        .reduce((map, [key, value]) => 
+            map.set(key, value), 
+        new Map<EK, EV>())
+}
+Map.prototype.filter = function<K, V>(this: Map<K, V>, callback: (value: V, key: K, index: number, map: Map<K, V>) => boolean): Map<K, V> {
+    return this.array()
+        .filter(([k, v], i) => callback(v, k, i, this))
+        .reduce((map, [key, value]) => 
+            map.set(key, value), 
+        new Map<K, V>())
+}
+Map.prototype.keyArr = function<K, V>(this: Map<K, V>): Array<K> {
+    return this.array().map(([k]) => k);
+}
+Map.prototype.valueArr = function<K, V>(this: Map<K, V>): Array<V> {
+    return this.array().map(([_, v]) => v);
+}
+Map.prototype.find = function<K, V>(this: Map<K, V>, callback: (value: V, key: K, index: number, map: Map<K, V>) => boolean) {
+    return this.array().find(([k, v], i) => callback(v, k, i, this));
+}
+Map.prototype.includes = function<K, V>(this: Map<K, V>, item: V, fromIndex?: number) {
+    return this.valueArr().includes(item, fromIndex);
+}

package/src/Extensions/Object.ts

@@ -0,0 +1,25 @@
+import { ValueOf } from "../Types";
+
+export {};
+
+declare global {
+    interface ObjectConstructor {
+        /**
+         * Destructures object into array of [property, value]
+         * @param from Object to destruct
+         */
+        array<From = {}>(from: From): Array<[keyof From, ValueOf<From>]>
+        /**
+         * Destructures object into array of property keys
+         * @param from Object to destruct
+         */
+        keysOf<From = {}>(from: From): Array<keyof From>
+    }
+}
+
+Object.keysOf = function<From = {}>(this: object, from: From): Array<keyof From> {
+    return Object.keys(from) as Array<keyof From>;
+}
+Object.array = function<From = {}>(this: object, from: From): Array<[keyof From, ValueOf<From>]> {
+    return Object.keysOf(from).map(prop => [prop, from[prop]]) as Array<[keyof From, ValueOf<From>]>;
+}

package/src/Extensions/String.ts

@@ -0,0 +1,43 @@
+import IReplacement from "../Interfaces/IReplacement";
+export {}
+
+declare global {
+    interface String {
+        /**
+         * Uppercases first letter of string
+         */
+        toPascalCase(): string
+        /**
+         * Replaces "replacer" (default: ' ') with "replacement" (default: '_')
+         * @param replaceOptions This is practically your stereotypical String.replace, if you really want it to be
+         */
+        toSnakeCase(replaceOptions?: IReplacement): string
+        /**
+         * Replaces "replacer" (default: ' ') with "replacement" (default: '-')
+         * @param replaceOptions This is practically your stereotypical String.replace, if you really want it to be
+         */
+        toKebabCase(replaceOptions?: IReplacement): string,
+        /**
+         * String.substring but accepting negative numbers to cut from length
+         * @param start Start of string. 0 indexed, if negative number, subtracts number from length
+         * @param end End of string. 0 indexed, if negative number, substracts number from length
+         */
+        clip(start: number, end?: number): string
+    }
+}
+
+String.prototype.toPascalCase = function(this: string) {
+    return this.substring(0, 1).toUpperCase() + this.substring(1);
+}
+function spaceReplacer(self: string, replacer: string | RegExp, replacement: string) {
+    return self.replace(new RegExp(`${typeof replacer == 'string' ? replacer : replacer.source}+`), replacement);
+}
+String.prototype.toSnakeCase = function(this: string, replaceOptions: IReplacement) {
+    return spaceReplacer(this, replaceOptions.replacer || ' ', replaceOptions.replacement || '_')
+}
+String.prototype.toKebabCase = function(this: string, replaceOptions: IReplacement) {
+    return spaceReplacer(this, replaceOptions.replacer || ' ', replaceOptions.replacement || '-');
+}
+String.prototype.clip = function(this: string, start: number, end?: number) {
+    return this.substring(start < 0 ? this.length - start : start, end && end < 0 ? this.length + end : end);
+}

package/src/Extensions/index.ts

@@ -0,0 +1,83 @@
+import ElementOptions from "../Interfaces/ElementOptions";
+import { EventHandler, IElement } from "../Types";
+export * from './Array';
+export * from './Map';
+export * from './Object';
+export * from './String';
+
+declare global {
+    interface BooleanConstructor {
+        /**
+         * Parses string to boolean. Will only return true if value === "true" otherwise false
+         */
+        parseBoolean(value: string): boolean
+    }
+
+    interface Document {
+        /**
+         * Creates an element like Document#createElement, however with construction options to assign values in construction instead of after construction.
+         * @param tagName HTMLElement tag name
+         * @param options Construction options, instead of assigning values after construction
+         */
+        createProperElement<K extends keyof HTMLElementTagNameMap>(tagName: K, options?: ElementOptions, ...children: Array<IElement>): HTMLElementTagNameMap[K]
+        createFromHtml<K extends keyof HTMLElementTagNameMap>(html: string, parentTag?: K): HTMLElementTagNameMap[K]
+    }
+    interface HTMLCollection {
+        /**
+         * Converts HTMLCollection to Element[]
+         */
+        array(): Element[]
+    }
+}
+
+Boolean.parseBoolean = function(value: string) {
+    return value === "true";
+};
+
+try {
+    Document.prototype.createProperElement = function<K extends keyof HTMLElementTagNameMap>(this: Document, tagName: K, options?: ElementOptions, ...children: Array<IElement>): HTMLElementTagNameMap[K] {
+        let baseElement = document.createElement(tagName);
+        if (!options) return baseElement;
+
+        const { id, class: className, dataset, ...rest } = options;
+        if (id) baseElement.id = id;
+        if (className) {
+            const classNames = Array.isArray(className) ? className : [className];
+            classNames.forEach(className => baseElement.classList.add(className));
+        }
+        children ?? options.children;
+        if (children) {
+            const childrenElements = Array.isArray(children) ? children : [children];
+            childrenElements.forEach(child => baseElement.append(child));
+        }
+        if (dataset) Object.entries(dataset).forEach(([key, value]) => baseElement.dataset[key] = value);
+        
+        for (const optionKey in rest) {
+            const optionValue = rest[optionKey as keyof typeof rest] as EventHandler | object;
+            if (optionValue === undefined) continue;
+
+            if (typeof optionValue === 'function') {
+                baseElement.addEventListener(optionKey.substring(2), rest[optionKey as keyof typeof rest] as EventListener);
+            } else {
+                baseElement.setAttribute(optionKey, optionValue.toString());
+            }
+        }
+
+        return baseElement;
+    }
+    Document.prototype.createFromHtml = function<K extends keyof HTMLElementTagNameMap>(this: Document, html: string, parentTag?: K): HTMLElementTagNameMap[K] {
+        return new DOMParser().parseFromString(html, 'text/html').body.firstChild as HTMLElementTagNameMap[K];
+    }
+
+    HTMLCollection.prototype.array = function(this: HTMLCollection) {
+        let result = new Array<Element>();
+
+        for (let i = 0; i < this.length; i++) {
+            const item = this.item(i);
+            if (item !== null) result.push(item);
+        }
+        return result;
+    }
+} catch {
+    // Used in node.js
+}

package/src/Functions/GetCSSProperty.ts

@@ -0,0 +1,27 @@
+type CSSReturnTypes = {
+    string: string,
+    number: number
+}
+
+/**
+ * Gets the value of "property" in type "type" from query "query"
+ * Basically, you can get your --color-primary from :root
+ * 
+ * @param property Name of the property to get
+ * @param type Type of the property to parse
+ * @param query Query to get the element that has the property
+ * @returns Property value converted to type
+*/
+export function GetCSSProperty<Type extends keyof CSSReturnTypes>(property: string, type: Type, query = ":root"): CSSReturnTypes[Type] {
+    const rootEl = document.querySelector(query);
+    if (!rootEl) throw new Error(`${query} does not exist!`);
+
+    const rootStyles = getComputedStyle(rootEl);
+    const cssProp = rootStyles.getPropertyValue(property);
+    if (type === 'string') return cssProp as CSSReturnTypes[Type];
+
+    const numberValue = parseInt(cssProp);
+    if (isNaN(numberValue)) throw new Error(`${property} is not a number!: ${cssProp}`);
+    return numberValue as CSSReturnTypes[Type];
+}
+

package/src/Functions/HTMLEvent.ts

@@ -1,3 +1,9 @@
+/**
+ * Create HTMLEvent object from function
+ * @param name Name of the event
+ * @param handler Handler for the event
+ * @returns Parameters as object
+ */
 export function HTMLEvent<
     Event extends keyof HTMLElementEventMap,
     ReturnType extends any

package/src/Functions/SetNavigationSelected.ts

@@ -7,6 +7,7 @@
  */
  export function SetNavigationSelected(query: string, ...currentPageClasses: string[]) {
     const header = document.querySelector(query);
+    if (!header) throw { message: `Couldn't find header from query, ${query}` }
     const children = header.children.array().filter(c => c.tagName === 'a') as HTMLAnchorElement[];
     const currentPage = document.location.href;
 

package/src/Functions/index.ts

@@ -1,3 +1,4 @@
 export * from './CopyToClipboard';
+export * from './GetCSSProperty';
 export * from './SetNavigationSelected';
-export * from './HTMLEvent'
+export * from './HTMLEvent';

package/src/Interfaces/ElementOptions.ts

@@ -1,17 +1,21 @@
-import HTMLEvent from '../Functions/HTMLEvent'
-import IElement from "../Types/IElement";
+import { Arrayable, IElement } from "../Types"
+
+type Events = Record<
+    `on${Capitalize<keyof HTMLElementEventMap>}`,
+    (event: Event) => void
+>
 
 /**
  * Construction options when creating an HTML element using:
- * @see Document.createProperElement */
-export interface ElementOptions {
-    /**css classes to give the element*/
-    classes?: string[],
-    /**attributes to give the element*/
-    attributes?: [string, string][],
-    /**Children of the element*/
-    children?: IElement | IElement[],
-    /**Events for the element to listen to*/
-    events?: Array<{ name: string, handler: (e: Event) => any }>
-}
-export default ElementOptions
+ * @see Document.createProperElement 
+ * @borwwos IElement
+ * @borrows Arrayable
+ */
+export type ElementOptions = Partial<
+    Events & Record<string, any> & {
+    id: string,
+    class: Arrayable<string>;
+    children: Arrayable<IElement>;
+    dataset: Record<string, string>
+}>
+export default ElementOptions;

package/src/Interfaces/IReplacement.ts

@@ -1,4 +1,4 @@
-import StringRegex from "../Types/StringRegex";
+import { StringRegex } from "../Types";
 
 /**
  * Replacement tool for 

package/src/Interfaces/index.ts

@@ -1,3 +1,2 @@
 export * from './ElementOptions';
-export * from './IReplacement';
-export * from './BaseEventInterface';
+export * from './IReplacement';

package/src/Types/BetterTypes.ts

@@ -0,0 +1,10 @@
+/**
+ * Construct a type with the properties of Type except for those in type Properties.
+ */
+export type BetterOmit<Type, Properties extends keyof Type> = Omit<Type, Properties>;
+/**
+ * Extract from From those types that are assignable to Properties
+ */
+export type BetterExtract<From, Properties extends From> = Extract<From, Properties>;
+
+export type PartialExcept<From, Properties extends keyof From> = Partial<From> & Required<Pick<From, Properties>>

package/src/Types/Date.ts

@@ -0,0 +1,7 @@
+export type LongMonth = 'Janurary' | 'February' | 'March' | 'April' | 'May' | 'June' | 'July' | 'August' | 'September' | 'October' | 'November' | 'December';
+export type ShortMonth = 'Jan' | 'Feb' | 'Mar' | 'Apr' | 'May' | 'Jun' | 'Jul' | 'Aug' | 'Sep' | 'Oct' | 'Nov' | 'Dec';
+export type Month = LongMonth | ShortMonth;
+
+export type ShortDay = 'Mon' | 'Tue' | 'Wed' | 'Thu' | 'Fri' | 'Sat' | 'Sun';
+export type LongDay = `${'Mon' | 'Tues' | 'Wednes' | 'Thurs' | 'Fri' | 'Satur' | 'Sun'}day`;
+export type Day = ShortDay | LongDay;

package/src/Types/Events.ts

@@ -0,0 +1,15 @@
+/**
+ * Default eventhandler mapper. Object with properties that are arrays
+ */
+ export type BaseEvent<Keys extends string, Types extends Array<any>> = Record<Keys, Types>;
+
+ /**
+  * Eventhandler type for:
+  * @see EventCollection
+  * @borrows BaseEvent
+  */
+ export type EventHandler<
+     Events extends BaseEvent<string, Array<any>> = BaseEvent<string, Array<any>>,
+     Event extends keyof Events = keyof Events,
+     ReturnType = any
+ > = (...args: Events[Event]) => ReturnType;

package/src/Types/PropertiesWith.ts

@@ -0,0 +1,14 @@
+/**
+ * Filters all properties from From that has the return type of Type
+ */
+export type PropertiesWith<Type, From> = {
+    [Key in keyof From as From[Key] extends Type ? Key : never]: From[Key]
+}
+export default PropertiesWith;
+
+/**
+ * Fitlers all properties from From that don't have the return type of Type
+ */
+export type PropertiesWithout<Type, From> = {
+    [Key in keyof From as From[Key] extends Type ? never : Key]: From[Key]
+}

package/src/Types/TransformTypes.ts

@@ -0,0 +1,18 @@
+/**
+ * Converts Start types to Switch types in From type
+ */
+export type TransformType<From, Start, Switch> = {
+    [Key in keyof From]: From[Key] extends Start ? Switch : From[Key]
+}
+
+/**
+ * Returns object with properties matching BaseType with types of NewType
+ */
+export type TransformTypes<From, BaseType, NewType> = Record<keyof { 
+    [Key in keyof From as From[Key] extends BaseType ? Key : never]: Key 
+}, NewType>
+
+//Returns From with properties switched from BaseType to NewType
+// export type TransformTypes<From, BaseType, NewType> = TransformType<From, BaseType[keyof BaseType], NewType>;
+
+export default TransformTypes;

package/src/Types/index.ts

@@ -1,3 +1,36 @@
-export * from './EventHandler';
-export * from './IElement';
-export * from './StringRegex';
+export * from './BetterTypes';
+export * from './Date';
+export * from './Events';
+export * from './TransformTypes';
+export * from './PropertiesWith';
+
+/**
+ * Item is single or multiple
+ */
+export type Arrayable<T> = T | Array<T>;
+
+/**
+ * Used for HTMLElement.append in ElementOptions, Document.createProperElement.
+ * IElement accepts HTML Elements or HTMl-like strings.
+ * 
+ * @see HTMLElement.append
+ * @see Document.createProperElement
+ */
+export type IElement = HTMLElement | string;
+
+/**
+ * Return types of T
+ */
+export type ValueOf<T> = T[keyof T];
+
+/**
+ * Type's properties are ReturnType
+ */
+export type AllPropsAre<ReturnType> = {
+    [key: string]: ReturnType
+}
+
+/**
+ * string or RegExp.. pretty self-explanatory
+ */
+export type StringRegex = string | RegExp;

package/src/index.ts

@@ -1,6 +1,5 @@
-export { EventCollection, EventEmitter, Event } from './Classes';
-export { CopyToClipboard, SetNavigationSelected, HTMLEvent } from './Functions';
-export { ElementOptions, IReplacement } from './Interfaces';
-export { EventHandler, IElement, StringRegex } from './Types';
-
-export * as Extensions from './Extensions';
+export * from './Classes';
+export * from './Extensions';
+export * from './Functions';
+export * from './Interfaces';
+export * from './Types';