@knotx/core 0.4.1 → 0.4.2

package/dist/index.cjs

@@ -8,6 +8,43 @@ const core = require('@knotx/core');
 const utils = require('@knotx/utils');
 const data = require('@knotx/data');
 
+var __defProp$5 = Object.defineProperty;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$4 = (obj, key, value) => __defNormalProp$5(obj, typeof key !== "symbol" ? key + "" : key, value);
+class DOMElement {
+  constructor(dom) {
+    this.dom = dom;
+    __publicField$4(this, "classList");
+    __publicField$4(this, "attribute");
+    this.classList = dom.classList;
+    this.attribute = {
+      get: (name) => dom.getAttribute(name),
+      set: (name, value) => dom.setAttribute(name, value),
+      remove: (name) => dom.removeAttribute(name)
+    };
+  }
+  getRect() {
+    return this.dom.getBoundingClientRect();
+  }
+  query(selector) {
+    const element = this.dom.querySelector(selector);
+    return element ? DOMElement.fromDOM(element) : null;
+  }
+  queryAll(selector) {
+    const elements = this.dom.querySelectorAll(selector);
+    return Array.from(elements).map((element) => DOMElement.fromDOM(element));
+  }
+  addEventListener(...args) {
+    this.dom.addEventListener(...args);
+  }
+  removeEventListener(...args) {
+    this.dom.removeEventListener(...args);
+  }
+  static fromDOM(dom) {
+    return new DOMElement(dom);
+  }
+}
+
 var __defProp$4 = Object.defineProperty;
 var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField$3 = (obj, key, value) => __defNormalProp$4(obj, key + "" , value);
@@ -442,7 +479,7 @@ const _BasePlugin = class _BasePlugin {
     Reflect.set(this, utils.getSymbol("engine"), new rxjs.BehaviorSubject(null));
   }
   get pluginId() {
-    return `${this.name}:${this._instanceId}`;
+    return `${this.name.toLowerCase()}-${this._instanceId}`;
   }
   onDestroy() {
     this.subscriptions.forEach((subscription) => {
@@ -544,6 +581,7 @@ function use(hook, context) {
 
 exports.Layer = definition.Layer;
 exports.BasePlugin = BasePlugin;
+exports.DOMElement = DOMElement;
 exports.Engine = Engine;
 exports.InteractionManager = InteractionManager;
 exports.InteractionPriority = InteractionPriority;

package/dist/index.d.cts

@@ -6,6 +6,74 @@ export * from '@knotx/data';
 export * from '@knotx/utils';
 import 'jsonschema';
 
+interface ElementClassList {
+    toString: () => string;
+    /**
+     * Adds all arguments passed, except those already present.
+     *
+     * Throws a "SyntaxError" DOMException if one of the arguments is the empty string.
+     *
+     * Throws an "InvalidCharacterError" DOMException if one of the arguments contains any ASCII whitespace.
+     *
+     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMTokenList/add)
+     */
+    add: (...tokens: string[]) => void;
+    /**
+     * Returns true if token is present, and false otherwise.
+     *
+     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMTokenList/contains)
+     */
+    contains: (token: string) => boolean;
+    /**
+     * Removes arguments passed, if they are present.
+     *
+     * Throws a "SyntaxError" DOMException if one of the arguments is the empty string.
+     *
+     * Throws an "InvalidCharacterError" DOMException if one of the arguments contains any ASCII whitespace.
+     *
+     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMTokenList/remove)
+     */
+    remove: (...tokens: string[]) => void;
+}
+interface ElementAttribute {
+    get: (name: string) => string | null;
+    set: (name: string, value: string) => void;
+    remove: (name: string) => void;
+}
+interface ElementRect {
+    height: number;
+    width: number;
+    x: number;
+    y: number;
+}
+interface EventListenerDefinition<E = any> {
+    (type: string, listener: ((evt: E) => void) | EventListenerObject<E>, options?: boolean | AddEventListenerOptions): void;
+}
+interface EventListenerObject<E> {
+    handleEvent: (evt: E) => void;
+}
+interface Element {
+    classList: ElementClassList;
+    attribute: ElementAttribute;
+    getRect: () => ElementRect;
+    addEventListener: EventListenerDefinition;
+    removeEventListener: EventListenerDefinition;
+    query: (selector: string) => Element | null;
+    queryAll: (selector: string) => Element[];
+}
+declare class DOMElement implements Element {
+    readonly dom: HTMLElement;
+    classList: ElementClassList;
+    attribute: ElementAttribute;
+    constructor(dom: HTMLElement);
+    getRect(): DOMRect;
+    query(selector: string): Element | null;
+    queryAll(selector: string): Element[];
+    addEventListener(...args: Parameters<EventListenerDefinition>): void;
+    removeEventListener(...args: Parameters<EventListenerDefinition>): void;
+    static fromDOM(dom: HTMLElement): DOMElement;
+}
+
 declare function getLayerRenders<TRenderType extends RenderType = RenderType>(plugin: IPlugin): LayerComponent<TRenderType>[];
 
 /**
@@ -69,4 +137,4 @@ declare function use<T, TContext>(hook: () => {
     __contextValue__: TContext;
 }, context: TContext): T;
 
-export { Engine, Runtime, getLayerRenders, use };
+export { DOMElement, type Element, type ElementAttribute, type ElementClassList, type ElementRect, Engine, type EventListenerDefinition, Runtime, getLayerRenders, use };

package/dist/index.d.mts

@@ -6,6 +6,74 @@ export * from '@knotx/data';
 export * from '@knotx/utils';
 import 'jsonschema';
 
+interface ElementClassList {
+    toString: () => string;
+    /**
+     * Adds all arguments passed, except those already present.
+     *
+     * Throws a "SyntaxError" DOMException if one of the arguments is the empty string.
+     *
+     * Throws an "InvalidCharacterError" DOMException if one of the arguments contains any ASCII whitespace.
+     *
+     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMTokenList/add)
+     */
+    add: (...tokens: string[]) => void;
+    /**
+     * Returns true if token is present, and false otherwise.
+     *
+     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMTokenList/contains)
+     */
+    contains: (token: string) => boolean;
+    /**
+     * Removes arguments passed, if they are present.
+     *
+     * Throws a "SyntaxError" DOMException if one of the arguments is the empty string.
+     *
+     * Throws an "InvalidCharacterError" DOMException if one of the arguments contains any ASCII whitespace.
+     *
+     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMTokenList/remove)
+     */
+    remove: (...tokens: string[]) => void;
+}
+interface ElementAttribute {
+    get: (name: string) => string | null;
+    set: (name: string, value: string) => void;
+    remove: (name: string) => void;
+}
+interface ElementRect {
+    height: number;
+    width: number;
+    x: number;
+    y: number;
+}
+interface EventListenerDefinition<E = any> {
+    (type: string, listener: ((evt: E) => void) | EventListenerObject<E>, options?: boolean | AddEventListenerOptions): void;
+}
+interface EventListenerObject<E> {
+    handleEvent: (evt: E) => void;
+}
+interface Element {
+    classList: ElementClassList;
+    attribute: ElementAttribute;
+    getRect: () => ElementRect;
+    addEventListener: EventListenerDefinition;
+    removeEventListener: EventListenerDefinition;
+    query: (selector: string) => Element | null;
+    queryAll: (selector: string) => Element[];
+}
+declare class DOMElement implements Element {
+    readonly dom: HTMLElement;
+    classList: ElementClassList;
+    attribute: ElementAttribute;
+    constructor(dom: HTMLElement);
+    getRect(): DOMRect;
+    query(selector: string): Element | null;
+    queryAll(selector: string): Element[];
+    addEventListener(...args: Parameters<EventListenerDefinition>): void;
+    removeEventListener(...args: Parameters<EventListenerDefinition>): void;
+    static fromDOM(dom: HTMLElement): DOMElement;
+}
+
 declare function getLayerRenders<TRenderType extends RenderType = RenderType>(plugin: IPlugin): LayerComponent<TRenderType>[];
 
 /**
@@ -69,4 +137,4 @@ declare function use<T, TContext>(hook: () => {
     __contextValue__: TContext;
 }, context: TContext): T;
 
-export { Engine, Runtime, getLayerRenders, use };
+export { DOMElement, type Element, type ElementAttribute, type ElementClassList, type ElementRect, Engine, type EventListenerDefinition, Runtime, getLayerRenders, use };

package/dist/index.d.ts

@@ -6,6 +6,74 @@ export * from '@knotx/data';
 export * from '@knotx/utils';
 import 'jsonschema';
 
+interface ElementClassList {
+    toString: () => string;
+    /**
+     * Adds all arguments passed, except those already present.
+     *
+     * Throws a "SyntaxError" DOMException if one of the arguments is the empty string.
+     *
+     * Throws an "InvalidCharacterError" DOMException if one of the arguments contains any ASCII whitespace.
+     *
+     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMTokenList/add)
+     */
+    add: (...tokens: string[]) => void;
+    /**
+     * Returns true if token is present, and false otherwise.
+     *
+     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMTokenList/contains)
+     */
+    contains: (token: string) => boolean;
+    /**
+     * Removes arguments passed, if they are present.
+     *
+     * Throws a "SyntaxError" DOMException if one of the arguments is the empty string.
+     *
+     * Throws an "InvalidCharacterError" DOMException if one of the arguments contains any ASCII whitespace.
+     *
+     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMTokenList/remove)
+     */
+    remove: (...tokens: string[]) => void;
+}
+interface ElementAttribute {
+    get: (name: string) => string | null;
+    set: (name: string, value: string) => void;
+    remove: (name: string) => void;
+}
+interface ElementRect {
+    height: number;
+    width: number;
+    x: number;
+    y: number;
+}
+interface EventListenerDefinition<E = any> {
+    (type: string, listener: ((evt: E) => void) | EventListenerObject<E>, options?: boolean | AddEventListenerOptions): void;
+}
+interface EventListenerObject<E> {
+    handleEvent: (evt: E) => void;
+}
+interface Element {
+    classList: ElementClassList;
+    attribute: ElementAttribute;
+    getRect: () => ElementRect;
+    addEventListener: EventListenerDefinition;
+    removeEventListener: EventListenerDefinition;
+    query: (selector: string) => Element | null;
+    queryAll: (selector: string) => Element[];
+}
+declare class DOMElement implements Element {
+    readonly dom: HTMLElement;
+    classList: ElementClassList;
+    attribute: ElementAttribute;
+    constructor(dom: HTMLElement);
+    getRect(): DOMRect;
+    query(selector: string): Element | null;
+    queryAll(selector: string): Element[];
+    addEventListener(...args: Parameters<EventListenerDefinition>): void;
+    removeEventListener(...args: Parameters<EventListenerDefinition>): void;
+    static fromDOM(dom: HTMLElement): DOMElement;
+}
+
 declare function getLayerRenders<TRenderType extends RenderType = RenderType>(plugin: IPlugin): LayerComponent<TRenderType>[];
 
 /**
@@ -69,4 +137,4 @@ declare function use<T, TContext>(hook: () => {
     __contextValue__: TContext;
 }, context: TContext): T;
 
-export { Engine, Runtime, getLayerRenders, use };
+export { DOMElement, type Element, type ElementAttribute, type ElementClassList, type ElementRect, Engine, type EventListenerDefinition, Runtime, getLayerRenders, use };

package/dist/index.js

@@ -8,6 +8,43 @@ export * from '@knotx/utils';
 import { DataManager } from '@knotx/data';
 export * from '@knotx/data';
 
+var __defProp$5 = Object.defineProperty;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$4 = (obj, key, value) => __defNormalProp$5(obj, typeof key !== "symbol" ? key + "" : key, value);
+class DOMElement {
+  constructor(dom) {
+    this.dom = dom;
+    __publicField$4(this, "classList");
+    __publicField$4(this, "attribute");
+    this.classList = dom.classList;
+    this.attribute = {
+      get: (name) => dom.getAttribute(name),
+      set: (name, value) => dom.setAttribute(name, value),
+      remove: (name) => dom.removeAttribute(name)
+    };
+  }
+  getRect() {
+    return this.dom.getBoundingClientRect();
+  }
+  query(selector) {
+    const element = this.dom.querySelector(selector);
+    return element ? DOMElement.fromDOM(element) : null;
+  }
+  queryAll(selector) {
+    const elements = this.dom.querySelectorAll(selector);
+    return Array.from(elements).map((element) => DOMElement.fromDOM(element));
+  }
+  addEventListener(...args) {
+    this.dom.addEventListener(...args);
+  }
+  removeEventListener(...args) {
+    this.dom.removeEventListener(...args);
+  }
+  static fromDOM(dom) {
+    return new DOMElement(dom);
+  }
+}
+
 var __defProp$4 = Object.defineProperty;
 var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField$3 = (obj, key, value) => __defNormalProp$4(obj, key + "" , value);
@@ -442,7 +479,7 @@ const _BasePlugin = class _BasePlugin {
     Reflect.set(this, getSymbol("engine"), new BehaviorSubject(null));
   }
   get pluginId() {
-    return `${this.name}:${this._instanceId}`;
+    return `${this.name.toLowerCase()}-${this._instanceId}`;
   }
   onDestroy() {
     this.subscriptions.forEach((subscription) => {
@@ -542,4 +579,4 @@ function use(hook, context) {
   return Runtime.getInstance().runInContext("render", hook, context);
 }
 
-export { BasePlugin, Engine, InteractionManager, InteractionPriority, Runtime, getLayerRenders, use };
+export { BasePlugin, DOMElement, Engine, InteractionManager, InteractionPriority, Runtime, getLayerRenders, use };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knotx/core",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Core for Knotx",
   "author": "boenfu",
   "license": "MIT",
@@ -46,14 +46,14 @@
     "jsonschema": "^1.5.0",
     "lodash-es": "^4.17.21",
     "rxjs": "^7.8.1",
-    "@knotx/data": "0.4.1",
-    "@knotx/utils": "0.4.1"
+    "@knotx/data": "0.4.2",
+    "@knotx/utils": "0.4.2"
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.12",
-    "@knotx/build-config": "0.4.1",
-    "@knotx/eslint-config": "0.4.1",
-    "@knotx/typescript-config": "0.4.1"
+    "@knotx/build-config": "0.4.2",
+    "@knotx/eslint-config": "0.4.2",
+    "@knotx/typescript-config": "0.4.2"
   },
   "scripts": {
     "build": "unbuild",