@kizmann/pico-js 1.0.13 → 2.0.0

package/src/utils/Cookie.js

@@ -0,0 +1,184 @@
+import { For, Arr, Now, Mix } from "#src/index.esm.js";
+
+export const COOKIE_REGEX = {
+    entry: /(?<=^|;)\s*(?<key>.*?)\s*=\s*(?<value>[^;$]+)/g
+};
+
+export class PicoCookie
+{
+    static $cookie = null;
+
+    /**
+     * Read raw document.cookie
+     *
+     * @example Cookie.global() // => "a=b; c=d"
+     *
+     * @returns {string} Cookie string
+     */
+    static global()
+    {
+        if ( globalThis.document == null ) {
+            return '';
+        }
+
+        return globalThis.document.cookie || '';
+    }
+
+    /**
+     * Parse cookies into object
+     *
+     * @example Cookie.parse() // => {a:"b"}
+     * @example Cookie.parse(true) // force parse
+     *
+     * @param {boolean} [fresh] Force refresh
+     * @returns {Record<string, any>} Cookie map
+     */
+    static parse(fresh = false)
+    {
+        if ( !fresh && this.$cookie ) {
+            return this.$cookie;
+        }
+
+        this.$cookie = {};
+
+        let matches = this.global().matchAll(...[
+            COOKIE_REGEX.entry
+        ]);
+
+        if ( matches == null ) {
+            return this.$cookie;
+        }
+
+        let fn = (value) => {
+            return value.replaceAll('{:}', ';');
+        }
+
+        Arr.each(Array.from(matches), ({ groups }) => {
+            this.$cookie[groups.key] = fn(groups.value);
+        });
+
+        return this.$cookie;
+    }
+
+    /**
+     * Get cookie value by key
+     *
+     * @example Cookie.get("foo") // => "bar"
+     * @example Cookie.get("x", null, "bool") // => true
+     *
+     * @param {string} key Cookie key
+     * @param {any} [fallback] Fallback value
+     * @param {string} [decode] Decode mode
+     * @returns {any} Cookie value
+     */
+    static get(key, fallback = null, decode = 'string')
+    {
+        if ( !this.$cookie ) {
+            this.parse();
+        }
+
+        if ( this.$cookie[key] == null ) {
+            return fallback;
+        }
+
+        if ( /^bool(ean)?$/.test(decode) ) {
+            return Mix.bool(this.$cookie[key]);
+        }
+
+        if ( /^num(ber)?$/.test(decode) ) {
+            return Mix.bool(this.$cookie[key]);
+        }
+
+        if ( /^int(eger)?$/.test(decode) ) {
+            return Mix.bool(this.$cookie[key]);
+        }
+
+        if ( /^obj(ext)?$/.test(decode) ) {
+            return For.parseOptions(this.$cookie[key]);
+        }
+
+        return Mix.str(this.$cookie[key]);
+    }
+
+    /**
+     * Set cookie value with options
+     *
+     * @example Cookie.set("a", "b") // => Cookie
+     * @example Cookie.set("a", {x:1}) // => Cookie
+     *
+     * @param {string} key Cookie key
+     * @param {any} value Cookie value
+     * @param {any} [expire] Expire date spec
+     * @param {any} [options] Cookie options
+     * @returns {typeof PicoCookie} Cookie class
+     */
+    static set(key, value, expire = null, options = {})
+    {
+        if ( !this.$cookie ) {
+            this.parse();
+        }
+
+        if ( !(expire instanceof Now) ) {
+            expire = Now.make(expire || '+7 days');
+        }
+
+        options = {
+            expires: expire.toUTC(), path: '/', ...options
+        };
+
+        if ( Mix.isRef(value) ) {
+            value = For.castOptions(value, false);
+        }
+
+        if ( value != null ) {
+            this.$cookie[key] = value;
+        }
+
+        let plain = key + '=' + value.replaceAll(...[
+            ';', '{:}'
+        ]);
+
+        Arr.each(options, (value, key) => {
+            plain += `;${key}=${value}`;
+        });
+
+        globalThis.document.cookie = plain;
+
+        return this;
+    }
+
+    /**
+     * Remove cookie by key
+     *
+     * @example Cookie.forget("a") // => Cookie
+     *
+     * @param {string} key Cookie key
+     * @param {any} [options] Cookie options
+     * @returns {typeof PicoCookie} Cookie class
+     */
+    static forget(key, options = {})
+    {
+        let expires = 'Thu, 01 Jan 1970 00:00:01 GMT';
+
+        options = {
+            expires, path: '/', ...options
+        };
+
+        if ( this.$cookie[key] ) {
+            delete this.$cookie[key];
+        }
+
+        let plain = `${key}=null`;
+
+        Arr.each(options, (value, key) => {
+            plain += `;${key}=${value}`;
+        });
+
+        globalThis.document.cookie = plain;
+
+        return this;
+    }
+
+}
+
+export default PicoCookie;

package/src/utils/Data.js

@@ -0,0 +1,200 @@
+import { Arr, Num, Event, Mix, Obj } from "#src/index.esm.js";
+
+export class PicoData
+{
+    /**
+     * In-memory data store
+     *
+     * @type {Record<string, any>}
+     */
+    static $data = {};
+
+    /**
+     * Check if store key exists
+     *
+     * @example Data.has(["x"]) // => true|false
+     *
+     * @param {any} input Store key input
+     * @returns {boolean} True if exists
+     */
+    static has(input)
+    {
+        return Obj.has(this.$data, ...[
+            Arr.first(input)
+        ]);
+    }
+
+    /**
+     * Set store key and fire event
+     *
+     * @example Data.set(["x"], 1)
+     * @example Data.set(["x"], {a:1})
+     *
+     * @param {any} input Store key input
+     * @param {any} value Value to set
+     * @returns {void} No return value
+     */
+    static set(input, value)
+    {
+        let [stored, key] = [
+            null, Arr.first(input)
+        ];
+
+        if ( Obj.has(this.$data, key) ) {
+            stored = Obj.get(this.$data, key);
+        }
+
+        if ( Mix.isEqual(stored, value) ) {
+            return;
+        }
+
+        Obj.set(...[
+            this.$data, key, value
+        ]);
+
+        Event.fire('store:' + key, value, key);
+    }
+
+    /**
+     * Remove store key
+     *
+     * @example Data.unset(["x"])
+     *
+     * @param {any} input Store key input
+     * @returns {void} No return value
+     */
+    static unset(input)
+    {
+        Obj.unset(this.$data, [
+            ...Arr.first(input)
+        ]);
+    }
+
+    /**
+     * Get stored value (cloned)
+     *
+     * @example Data.get(["x"], null) // => value
+     * @example Data.get(["x"], 1, true) // set+get
+     *
+     * @param {any} input Store key input
+     * @param {any} [fallback] Fallback value
+     * @param {boolean} [forceSet] Set if missing
+     * @returns {any} Stored value
+     */
+    static get(input, fallback = null, forceSet = false)
+    {
+        let key = Arr.first(input);
+
+        if ( !Obj.has(this.$data, key) && !forceSet ) {
+            return fallback;
+        }
+
+        if ( Obj.has(this.$data, key) && forceSet ) {
+            Obj.set(this.$data, key, fallback);
+        }
+
+        let value = Obj.get(this.$data, key, fallback);
+
+        if ( !Mix.isObj(value) ) {
+            return value;
+        }
+
+        return Obj.clone(value);
+    }
+
+    /**
+     * Find item by id in array store
+     *
+     * @example Data.find(["list"], {id:1})
+     *
+     * @param {any} input Store key input
+     * @param {any} value Search value
+     * @param {any} [fallback] Fallback value
+     * @returns {any} Found item
+     */
+    static find(input, value, fallback = null)
+    {
+        let key = Arr.first(input);
+
+        if ( Obj.has(this.$data, key) === false ) {
+            return fallback;
+        }
+
+        if ( Obj.has(value, 'id') === false ) {
+            return fallback;
+        }
+
+        let index = Arr.findIndex(this.get(key), {
+            id: value.id
+        });
+
+        if ( index === - 1 ) {
+            return fallback;
+        }
+
+        return this.get(key + '.' + index);
+    }
+
+    /**
+     * Replace item by id in array store
+     *
+     * @example Data.replace(["list"], {id:1})
+     *
+     * @param {any} input Store key input
+     * @param {any} value Item to replace
+     * @returns {void} No return value
+     */
+    static replace(input, value)
+    {
+        let key = Arr.first(input);
+
+        if ( Obj.has(this.$data, key) === false ) {
+            return;
+        }
+
+        if ( Obj.has(value, 'id') === false ) {
+            return;
+        }
+
+        let index = Arr.findIndex(this.get(key), {
+            id: Num.int(value.id)
+        });
+
+        if ( index === - 1 ) {
+            return;
+        }
+
+        this.set(key + '.' + index, value);
+    }
+
+    /**
+     * Add items to array store
+     *
+     * @example Data.add(["list"], 1, 2)
+     *
+     * @param {any} input Store key input
+     * @param {...any} args Items to add
+     * @returns {void} No return value
+     */
+    static add(input, ...args)
+    {
+        this.set(input, Arr.concat(this.get(input, []), args));
+    }
+
+    /**
+     * Remove items from array store
+     *
+     * @example Data.remove(["list"], 1)
+     *
+     * @param {any} input Store key input
+     * @param {...any} args Items to remove
+     * @returns {void} No return value
+     */
+    static remove(input, ...args)
+    {
+        this.set(input, Arr.diff(this.get(input, []), args));
+    }
+
+}
+
+export default PicoData;

package/src/utils/Dom.js

@@ -0,0 +1,208 @@
+import { Arr, Mix, Dom } from "#src/index.esm.js";
+import { PicoDomFinderPlugin } from "#src/dom/DomFinder.js";
+import { PicoDomFormPlugin } from "#src/dom/DomForm.js";
+import { PicoDomEventPlugin } from "#src/dom/DomEvent.js";
+import { PicoDomBuilderPlugin } from "#src/dom/DomBuilder.js";
+import { PicoDomGlobalPlugin } from "#src/dom/DomGlobal.js";
+import { PicoDomRectanglePlugin } from "#src/dom/DomRectangle.js";
+import { PicoDomAttributePlugin } from "#src/dom/DomAttribute.js";
+import { PicoDomInviewPlugin } from "#src/dom/DomInview.js";
+import { PicoDomMetaPlugin } from "#src/dom/DomMeta.js";
+import { PicoDomObserverPlugin } from "#src/dom/DomObserver.js";
+
+export const PicoDomPlugins = [
+    PicoDomFinderPlugin,
+    PicoDomGlobalPlugin,
+    PicoDomFormPlugin,
+    PicoDomEventPlugin,
+    PicoDomBuilderPlugin,
+    PicoDomRectanglePlugin,
+    PicoDomAttributePlugin,
+    PicoDomInviewPlugin,
+    PicoDomMetaPlugin,
+    PicoDomObserverPlugin,
+];
+
+/**
+ * @class PicoDom
+ *
+ * @typedef {import('#src/dom/DomFinder.js').PicoDomFinderInstance} PicoDomFinderInstance
+ * @typedef {import('#src/dom/DomGlobal.js').PicoDomGlobalStatic} PicoDomGlobalStatic
+ * @typedef {import('#src/dom/DomGlobal.js').PicoDomGlobalInstance} PicoDomGlobalInstance
+ * @typedef {import('#src/dom/DomEvent.js').PicoDomEventStatic} PicoDomEventStatic
+ * @typedef {import('#src/dom/DomEvent.js').PicoDomEventInstance} PicoDomEventInstance
+ * @typedef {import('#src/dom/DomBuilder.js').PicoDomBuilderStatic} PicoDomBuilderStatic
+ * @typedef {import('#src/dom/DomBuilder.js').PicoDomBuilderInstance} PicoDomBuilderInstance
+ * @typedef {import('#src/dom/DomRectangle.js').PicoDomRectangleStatic} PicoDomRectangleStatic
+ * @typedef {import('#src/dom/DomRectangle.js').PicoDomRectangleInstance} PicoDomRectangleInstance
+ * @typedef {import('#src/dom/DomAttribute.js').PicoDomAttributeStatic} PicoDomAttributeStatic
+ * @typedef {import('#src/dom/DomAttribute.js').PicoDomAttributeInstance} PicoDomAttributeInstance
+ * @typedef {import('#src/dom/DomInview.js').PicoDomInviewStatic} PicoDomInviewStatic
+ * @typedef {import('#src/dom/DomInview.js').PicoDomInviewInstance} PicoDomInviewInstance
+ * @typedef {import('#src/dom/DomMeta.js').PicoDomMetaStatic} PicoDomMetaStatic
+ * @typedef {import('#src/dom/DomMeta.js').PicoDomMetaInstance} PicoDomMetaInstance
+ * @typedef {import('#src/dom/DomObserver.js').PicoDomObserverStatic} PicoDomObserverStatic
+ * @typedef {import('#src/dom/DomObserver.js').PicoDomObserverInstance} PicoDomObserverInstance
+ *
+ * @mixes PicoDomFinderStatic
+ * @mixes PicoDomGlobalStatic
+ * @mixes PicoDomFormStatic
+ * @mixes PicoDomEventStatic
+ * @mixes PicoDomBuilderStatic
+ * @mixes PicoDomRectangleStatic
+ * @mixes PicoDomAttributeStatic
+ * @mixes PicoDomInviewStatic
+ * @mixes PicoDomMetaStatic
+ * @mixes PicoDomObserverStatic
+ *
+ * @extends PicoDomFinderInstance
+ * @extends PicoDomGlobalInstance
+ * @extends PicoDomFormInstance
+ * @extends PicoDomEventInstance
+ * @extends PicoDomBuilderInstance
+ * @extends PicoDomRectangleInstance
+ * @extends PicoDomAttributeInstance
+ * @extends PicoDomInviewInstance
+ * @extends PicoDomMetaInstance
+ * @extends PicoDomObserverInstance
+ */
+export class PicoDom {
+
+    /**
+     * Init hooks for constructor
+     *
+     * @type {Array<function>}
+     */
+    static init = [];
+
+    /**
+     * First selected element
+     *
+     * @type {HTMLElement}
+     */
+    el = null;
+
+    /**
+     * All selected elements
+     *
+     * @type {Array<HTMLElement>}
+     */
+    els = [];
+
+    /**
+     * Create Dom wrapper from input
+     *
+     * @example new Dom("body").get(0) // => HTMLElement
+     *
+     * @param {any} el Element or selector
+     * @param {...any} args Plugin args
+     */
+    constructor(el, ...args)
+    {
+        Arr.each(Dom.init, (fn) => {
+            el = fn.call(this, el, ...args);
+        });
+
+        if ( el instanceof Dom ) {
+            el = el.el;
+        }
+
+        if ( ! Mix.isArr(el) ) {
+            el = [el];
+        }
+
+        (this.el = el[0], this.els = el);
+    }
+
+    /**
+     * Create new Dom wrapper
+     *
+     * @example Dom.find("body") // => Dom
+     *
+     * @param {any} el Element or selector
+     * @param {...any} args Plugin args
+     * @returns {PicoDom} Dom wrapper
+     */
+    static find(el, ...args)
+    {
+        return new Dom(el, ...args);
+    }
+
+    /**
+     * Extend Dom with a plugin
+     *
+     * @example Dom.extend(fn)
+     *
+     * @param {function} plugin Plugin function
+     * @returns {void} No return value
+     */
+    static extend(plugin)
+    {
+        plugin.call({}, this);
+    }
+
+    /**
+     * Get window or empty object
+     *
+     * @example Dom.win().innerWidth // => number|undefined
+     *
+     * @returns {any} Window or {}
+     */
+    static win()
+    {
+        if ( globalThis.window == null ) {
+            return {};
+        }
+
+        return window;
+    }
+
+    /**
+     * Get document or empty object
+     *
+     * @example Dom.doc().body // => HTMLElement|undefined
+     *
+     * @returns {any} Document or {}
+     */
+    static doc()
+    {
+        if ( globalThis.document == null ) {
+            return {};
+        }
+
+        return document;
+    }
+
+    /**
+     * Get document.body or empty
+     *
+     * @example Dom.body().nodeType // => 1|undefined
+     *
+     * @returns {any} Body or {}
+     */
+    static body()
+    {
+        if ( ! this.doc().body ) {
+            return {};
+        }
+
+        return this.doc().body;
+    }
+
+}
+
+/**
+ * @returns {typeof PicoDom}
+ */
+export function PicoDomBuilder() {
+
+    let cls = PicoDom;
+
+    for ( const plugin of PicoDomPlugins ) {
+        cls = plugin.call(cls, cls);
+    }
+
+    return cls;
+}
+
+export default PicoDomBuilder;