@rhtml/custom-attributes 0.0.110 → 0.0.113

package/dist/index.js

@@ -1,213 +1,19 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CustomAttributeRegistry = exports.Attribute = exports.CustomAttribute = exports.Modifier = exports.Input = void 0;
-const noop = function () {
-    /*  */
-};
-const observe = (target, memberName) => {
-    const prototype = target.constructor.prototype;
-    const OnInit = prototype.OnInit || noop;
-    const OnDestroy = prototype.OnInit || noop;
-    const OnUpdateAttribute = prototype.OnUpdateAttribute || noop;
-    let observer;
-    prototype.OnInit = function () {
-        var _a;
-        const element = (_a = this.element) !== null && _a !== void 0 ? _a : this;
-        if (observer) {
-            observer.disconnect();
-        }
-        observer = new MutationObserver(() => OnUpdateAttribute.call(this, memberName, element.getAttribute(memberName)));
-        observer.observe(element, {
-            attributeFilter: [memberName],
-            attributes: true
-        });
-        return OnInit.call(this);
-    };
-    prototype.OnDestroy = function () {
-        observer.disconnect();
-        return OnDestroy.call(this);
-    };
-};
-/**
- * Decorator @Input
- * Used to get attribute from element
- */
-exports.Input = (options) => (target, memberName) => {
-    Object.defineProperty(target, memberName, {
-        get: function () {
-            var _a;
-            const element = (_a = this.element) !== null && _a !== void 0 ? _a : this;
-            return element.getAttribute(memberName.toLowerCase());
-        }
-    });
-    if (options === null || options === void 0 ? void 0 : options.observe) {
-        observe(target, memberName);
-    }
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
 };
-/**
- * Decorator @Modifier
- * Accepts parameter options with selector and registry
- */
-exports.Modifier = (options) => {
-    return (target) => {
-        target['options'] = options;
-    };
-};
-/* Someone may like to use CustomAttribute instead of Modifier */
-exports.CustomAttribute = exports.Modifier;
-class Attribute {
-    setStyles(keys) {
-        return (div) => {
-            for (const [key, value] of Object.entries(keys)) {
-                div['style'][key] = value;
-            }
-        };
-    }
-    OnInit() {
-        /* */
-    }
-    OnDestroy() {
-        /* */
-    }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    OnUpdate(_oldValue, _newValue) {
-        /* */
-    }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    OnUpdateAttribute(_name, _value) {
-        /* */
-    }
-}
-exports.Attribute = Attribute;
-class CustomAttributeRegistry {
-    constructor(parent) {
-        this.parent = parent;
-        this._attrMap = new Map();
-        this._elementMap = new WeakMap();
-        if (!parent) {
-            throw new Error('Must be given a parent element');
-        }
-        this.observe();
-    }
-    define(attrName, Constructor) {
-        this._attrMap.set(attrName.toLowerCase(), Constructor);
-        this.upgradeAttribute(attrName);
-    }
-    get(element, attrName) {
-        const map = this._elementMap.get(element);
-        if (!map)
-            return;
-        return map.get(attrName.toLowerCase());
-    }
-    getConstructor(attrName) {
-        return this._attrMap.get(attrName.toLowerCase());
-    }
-    observe() {
-        var _a, _b;
-        this.observer = new MutationObserver(mutations => {
-            for (const mutation of mutations) {
-                if (mutation.type === 'attributes') {
-                    const attr = this.getConstructor(mutation.attributeName);
-                    if (attr) {
-                        this.found(mutation.attributeName, mutation.target, mutation.oldValue);
-                    }
-                }
-                else {
-                    for (const node of mutation.removedNodes) {
-                        this.downgrade(node);
-                    }
-                    for (const node of mutation.addedNodes) {
-                        this.upgradeElement(node);
-                    }
-                }
-            }
-        });
-        this.observer.observe((_b = (_a = this.parent) === null || _a === void 0 ? void 0 : _a['shadowRoot']) !== null && _b !== void 0 ? _b : this.parent, {
-            childList: true,
-            subtree: true,
-            attributes: true,
-            attributeOldValue: true
-        });
-    }
-    unsubscribe() {
-        var _a;
-        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
-    }
-    upgradeAttribute(attrName, doc) {
-        const parent = doc || this.parent;
-        const matches = parent.querySelectorAll('[' + attrName + ']');
-        for (const match of [...matches]) {
-            this.found(attrName, match);
-        }
-    }
-    upgradeElement(element) {
-        if (element.nodeType !== 1) {
-            return;
-        }
-        for (const attr of element.attributes) {
-            if (this.getConstructor(attr.name)) {
-                this.found(attr.name, element);
-            }
-        }
-        for (const [attr] of this._attrMap) {
-            this.upgradeAttribute(attr, element);
-        }
-    }
-    downgrade(element) {
-        const map = this._elementMap.get(element);
-        if (!map) {
-            return;
-        }
-        for (const [, instance] of map) {
-            if (instance.OnDestroy) {
-                instance.OnDestroy();
-            }
-        }
-        this._elementMap.delete(element);
-    }
-    found(attributeName, el, oldVal) {
-        var _a, _b;
-        let map = this._elementMap.get(el);
-        if (!map) {
-            map = new Map();
-            this._elementMap.set(el, map);
-        }
-        const modifier = map.get(attributeName);
-        const attribute = el.getAttribute(attributeName);
-        if (!modifier) {
-            const Modifier = this.getConstructor(attributeName);
-            const modifier = new Modifier();
-            if ((_b = (_a = Modifier.options) === null || _a === void 0 ? void 0 : _a.observedAttributes) === null || _b === void 0 ? void 0 : _b.length) {
-                for (const observedAttribute of Modifier.options.observedAttributes) {
-                    observe(modifier, observedAttribute);
-                }
-            }
-            map.set(attributeName, modifier);
-            modifier.element = el;
-            modifier.selector = attributeName;
-            modifier.value = attribute || modifier.value;
-            modifier.parent = this.parent;
-            if (modifier.OnInit) {
-                modifier.OnInit();
-            }
-            return;
-        }
-        if (attribute == null && !!modifier.value) {
-            modifier.value = attribute;
-            if (modifier.OnDestroy) {
-                modifier.OnDestroy();
-            }
-            map.delete(attributeName);
-            return;
-        }
-        if (attribute !== modifier.value) {
-            modifier.value = attribute;
-            if (modifier.OnUpdate) {
-                modifier.OnUpdate(oldVal, attribute);
-            }
-            return;
-        }
-    }
-}
-exports.CustomAttributeRegistry = CustomAttributeRegistry;
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./attribute"), exports);
+__exportStar(require("./custom-registry"), exports);
+__exportStar(require("./decorators"), exports);
+__exportStar(require("./helpers"), exports);
+__exportStar(require("./media-attribute"), exports);
+__exportStar(require("./types"), exports);
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,8CAA4B;AAC5B,oDAAkC;AAClC,+CAA6B;AAC7B,4CAA0B;AAC1B,oDAAkC;AAClC,0CAAwB"}

package/dist/media-attribute.d.ts

@@ -0,0 +1,27 @@
+import { Attribute } from './attribute';
+/**
+ * Media query Attribute
+ * for performance reasons it is key value pair
+ */
+export declare const MediaMatchers: Map<string, string>;
+declare type MediaEvent = MediaQueryList | MediaQueryListEvent;
+export declare type EnterMediaQueryAttributes = [MediaEvent, Attr];
+export declare type ExitMediaQueryAttributes = [MediaEvent, string];
+export interface OnUpdateMediaQuery {
+    OnEnterMediaQuery(tuple: [MediaEvent, Attr]): void;
+    OnExitMediaQuery(tuple: [MediaEvent, string]): void;
+}
+export declare const Breakpoints: string[];
+export declare const createFiltersFromSelector: (selector: string) => string[];
+export declare abstract class MediaQueryAttribute<T> extends Attribute<T> implements OnUpdateMediaQuery {
+    prevValue: string;
+    originalValue: string;
+    private matchers;
+    private cachedAttributes;
+    listener: (event: MediaQueryList | MediaQueryListEvent) => void;
+    OnInit(): void;
+    OnDestroy(): void;
+    abstract OnEnterMediaQuery(tuple: [MediaEvent, Attr]): void;
+    abstract OnExitMediaQuery(tuple: [MediaEvent, string]): void;
+}
+export {};

package/dist/media-attribute.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MediaQueryAttribute = exports.createFiltersFromSelector = exports.Breakpoints = exports.MediaMatchers = void 0;
+const attribute_1 = require("./attribute");
+/**
+ * Media query Attribute
+ * for performance reasons it is key value pair
+ */
+exports.MediaMatchers = new Map([
+    ['screen and (max-width: 599px)', 'xs'],
+    ['screen and (min-width: 600px) and (max-width: 959px)', 'sm'],
+    ['screen and (min-width: 960px) and (max-width: 1279px)', 'md'],
+    ['screen and (min-width: 1280px) and (max-width: 1919px)', 'lg'],
+    ['screen and (min-width: 1920px) and (max-width: 5000px)', 'xl'],
+    ['screen and (max-width: 959px)', 'lt-md'],
+    ['screen and (max-width: 1279px)', 'lt-lg'],
+    ['screen and (max-width: 1919px)', 'lt-xl'],
+    ['screen and (min-width: 600px)', 'gt-xs'],
+    ['screen and (min-width: 960px)', 'gt-sm'],
+    ['screen and (min-width: 1280px)', 'gt-md'],
+    ['screen and (min-width: 1920px)', 'gt-lg']
+]);
+exports.Breakpoints = [...exports.MediaMatchers.values()];
+exports.createFiltersFromSelector = (selector) => [
+    ...exports.Breakpoints.map(breakpoint => `${selector}.${breakpoint}`),
+    selector
+];
+class MediaQueryAttribute extends attribute_1.Attribute {
+    constructor() {
+        super(...arguments);
+        this.matchers = new Map();
+        this.cachedAttributes = new Map();
+        this.listener = (event) => {
+            const key = `${this.selector.toLowerCase()}.${exports.MediaMatchers.get(event.media)}`;
+            const attribute = this.cachedAttributes.get(key);
+            if (event.matches && attribute) {
+                return this.OnEnterMediaQuery([event, attribute]);
+            }
+            return this.OnExitMediaQuery([event, key]);
+        };
+    }
+    OnInit() {
+        if (this.OnEnterMediaQuery || this.OnExitMediaQuery) {
+            this.originalValue = this.value;
+            for (const query of exports.MediaMatchers.keys()) {
+                const matcher = window.matchMedia(query);
+                const attr = Object.values(this.element.attributes).find(v => v.name ===
+                    `${this.selector.toLowerCase()}.${exports.MediaMatchers.get(query)}`);
+                if (attr) {
+                    this.cachedAttributes.set(attr.name, attr);
+                    matcher.addEventListener('change', this.listener);
+                }
+                if (attr && matcher.matches) {
+                    this.listener(matcher);
+                }
+                this.matchers.set(matcher, matcher);
+            }
+        }
+    }
+    OnDestroy() {
+        for (const matcher of this.matchers.values()) {
+            matcher.removeEventListener('change', this.listener);
+        }
+        this.cachedAttributes.clear();
+        this.matchers.clear();
+    }
+}
+exports.MediaQueryAttribute = MediaQueryAttribute;
+//# sourceMappingURL=media-attribute.js.map

package/dist/media-attribute.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-attribute.js","sourceRoot":"","sources":["../src/media-attribute.ts"],"names":[],"mappings":"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"}

package/dist/types.d.ts

@@ -0,0 +1,30 @@
+import { CustomAttributeRegistry } from './custom-registry';
+export declare type C<T> = new (...args: never[]) => T;
+export interface Constructor<T> extends C<T> {
+    options: ModifierOptions;
+}
+export interface ModifierOptions {
+    /**
+     * Main selector of the attribute
+     */
+    selector: string;
+    /**
+     * Define custom attribute registry
+     */
+    registry?(this: HTMLElement): CustomAttributeRegistry;
+    /**
+     * Specify attributes to be listened
+     */
+    observedAttributes?: string[];
+    /**
+     * Define MutationObserver to listen for parent element changes
+     * Defining property will attach observer to this.element
+     *  */
+    observe?: MutationObserverInit;
+}
+export interface InputOptions {
+    /**
+     * If enabled will trigger OnUpdate method on the Attribute
+     * */
+    observe: true;
+}

package/dist/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rhtml/custom-attributes",
-  "version": "0.0.110",
+  "version": "0.0.113",
   "description": "Custom Attribute Registry",
   "scripts": {
     "start": "npx parcel ./examples/index.html --out-dir build/examples",

package/src/attribute.ts

@@ -0,0 +1,35 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { ModifierOptions } from './types';
+
+/*  */
+export abstract class Attribute<T = {}> {
+  public static options: ModifierOptions;
+  public element?: HTMLElement;
+  public value?: string;
+  public selector?: string;
+  public parent?: HTMLElement;
+  public observer?: MutationObserver;
+  setStyles(keys: T) {
+    return (div: HTMLElement | Element | HTMLDivElement) => {
+      for (const [key, value] of Object.entries(keys)) {
+        div['style'][key] = value;
+      }
+    };
+  }
+  OnInit(): void {
+    /* */
+  }
+  OnDestroy(): void {
+    /* */
+  }
+  OnUpdate(_oldValue: string, _newValue: string) {
+    /* */
+  }
+  OnUpdateAttribute(_name: string, _value: string) {
+    /* */
+  }
+
+  OnChange(_records: MutationRecord[]): void {
+    /* */
+  }
+}

package/src/custom-registry.ts

@@ -0,0 +1,171 @@
+import { Attribute } from './attribute';
+import { observe } from './helpers';
+import { Constructor } from './types';
+
+export class CustomAttributeRegistry {
+  private _attrMap: Map<string, Constructor<Attribute>> = new Map();
+  private _elementMap: Map<HTMLElement, Map<string, Attribute>> = new Map();
+  private observer: MutationObserver;
+
+  constructor(private parent: HTMLElement) {
+    if (!parent) {
+      throw new Error('Must be given a parent element');
+    }
+    this.observe();
+  }
+
+  define(attrName: string, Constructor: Constructor<Attribute>) {
+    this._attrMap.set(attrName.toLowerCase(), Constructor);
+    this.upgradeAttribute(attrName);
+  }
+
+  get(element: HTMLElement, attrName: string) {
+    const map = this._elementMap.get(element);
+    if (!map) return;
+    return map.get(attrName.toLowerCase());
+  }
+
+  private getConstructor(attrName: string) {
+    return this._attrMap.get(attrName.toLowerCase());
+  }
+
+  private observe() {
+    this.observer = new MutationObserver(mutations => {
+      for (const mutation of mutations) {
+        if (mutation.type === 'attributes') {
+          const attr = this.getConstructor(mutation.attributeName);
+          if (attr) {
+            this.found(
+              mutation.attributeName,
+              mutation.target as never,
+              mutation.oldValue
+            );
+          }
+        } else {
+          for (const node of mutation.removedNodes) {
+            this.downgrade(node as never);
+          }
+          for (const node of mutation.addedNodes) {
+            this.upgradeElement(node as never);
+          }
+        }
+      }
+    });
+    this.observer.observe(this.parent?.['shadowRoot'] ?? this.parent, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeOldValue: true
+    });
+  }
+
+  unsubscribe() {
+    this.observer?.disconnect();
+    const values = [...this._elementMap.values()];
+    for (const elModifiers of values) {
+      const modifiers = [...elModifiers.values()];
+      for (const modifier of modifiers) {
+        modifier.OnDestroy();
+        if (modifier.observer) {
+          modifier.observer.disconnect();
+        }
+      }
+      elModifiers.clear();
+    }
+    this._elementMap.clear();
+  }
+
+  private upgradeAttribute(attrName: string, doc?: HTMLElement) {
+    const parent = doc || this.parent;
+
+    const matches = parent.querySelectorAll('[' + attrName + ']');
+
+    for (const match of [...matches]) {
+      this.found(attrName, match as never);
+    }
+  }
+
+  private upgradeElement(element: HTMLElement) {
+    if (element.nodeType !== 1) {
+      return;
+    }
+    for (const attr of element.attributes) {
+      if (this.getConstructor(attr.name)) {
+        this.found(attr.name, element);
+      }
+    }
+    for (const [attr] of this._attrMap) {
+      this.upgradeAttribute(attr, element);
+    }
+  }
+
+  private downgrade(element: HTMLElement) {
+    const map = this._elementMap.get(element);
+    if (!map) {
+      return;
+    }
+    for (const [, instance] of map) {
+      if (instance.OnDestroy) {
+        instance.OnDestroy();
+      }
+    }
+    this._elementMap.delete(element);
+  }
+
+  private found(attributeName: string, el: HTMLElement, oldVal?: string) {
+    let map = this._elementMap.get(el);
+    if (!map) {
+      map = new Map();
+      this._elementMap.set(el, map);
+    }
+
+    let modifier = map.get(attributeName);
+    const attribute = el.getAttribute(attributeName);
+
+    if (!modifier) {
+      const Modifier = this.getConstructor(attributeName);
+      modifier = new Modifier();
+      if (Modifier.options?.observedAttributes?.length) {
+        for (const observedAttribute of Modifier.options.observedAttributes) {
+          observe(modifier, observedAttribute);
+        }
+      }
+      modifier.element = el;
+      modifier.selector = attributeName;
+
+      modifier.value = attribute || modifier.value;
+      modifier.parent = this.parent;
+
+      if (modifier.OnInit) {
+        modifier.OnInit();
+      }
+      if (Modifier.options.observe) {
+        modifier.observer = new MutationObserver(records =>
+          modifier.OnChange(records)
+        );
+        modifier.observer.observe(modifier.element, Modifier.options.observe);
+      }
+      map.set(attributeName, modifier);
+      return;
+    }
+
+    if (attribute == null && !!modifier.value) {
+      modifier.value = attribute;
+      if (modifier.OnDestroy) {
+        modifier.OnDestroy();
+      }
+      if (modifier.observer) {
+        modifier.observer.disconnect();
+      }
+      map.delete(attributeName);
+      return;
+    }
+    if (attribute !== modifier.value) {
+      modifier.value = attribute;
+      if (modifier.OnUpdate) {
+        modifier.OnUpdate(oldVal, attribute);
+      }
+      return;
+    }
+  }
+}

package/src/decorators/index.ts

@@ -0,0 +1,58 @@
+import { noop, observe } from '../helpers';
+import { InputOptions, ModifierOptions } from '../types';
+
+/**
+ * Decorator @Input
+ * Used to get attribute from element
+ */
+export const Input = (options?: InputOptions) => (
+  target,
+  memberName: string
+) => {
+  const OnInit = target.OnInit || noop;
+  Object.defineProperty(target, 'OnInit', {
+    value() {
+      let originalValue = this[memberName];
+
+      const element = this.element ?? this;
+      Object.defineProperty(this, memberName, {
+        get: function() {
+          originalValue = element.getAttribute(memberName.toLowerCase());
+          return originalValue;
+        },
+        set(value) {
+          element.setAttribute(memberName.toLowerCase(), value);
+          originalValue = value;
+        },
+        configurable: true
+      });
+      return OnInit.call(this);
+    },
+    configurable: true
+  });
+
+  if (options?.observe) {
+    observe(target, memberName);
+  }
+};
+
+/**
+ * Decorator @Modifier
+ * Accepts parameter options with selector and registry
+ */
+export const Modifier = (options: ModifierOptions) => {
+  return (target: Function) => {
+    target['options'] = options;
+  };
+};
+
+/**
+ * Decorator @CustomAttribute
+ * Accepts parameter options with selector and registry
+ */
+export const CustomAttribute = Modifier;
+/**
+ * Decorator @Directive
+ * Accepts parameter options with selector and registry
+ */
+export const Directive = Modifier;