@htmlplus/element 0.7.2 → 0.7.3

package/client/decorators/index.d.ts

@@ -1,4 +1,3 @@
-export * from './attributes.js';
 export * from './bind.js';
 export * from './element.js';
 export * from './event.js';

package/client/decorators/index.js

@@ -1,4 +1,3 @@
-export * from './attributes.js';
 export * from './bind.js';
 export * from './element.js';
 export * from './event.js';

package/client/helpers/index.d.ts

@@ -1,9 +1 @@
-export * from './classes.js';
-export * from './direction.js';
-export * from './isRTL.js';
-export * from './query.js';
-export * from './queryAll.js';
-export * from './slots.js';
-export * from './styles.js';
-export * from './toUnit.js';
-export { getConfig, host, isServer, on, off, setConfig } from '../utils/index.js';
+export { classes, direction, getConfig, host, isRTL, isServer, on, off, query, queryAll, slots, styles, toUnit, setConfig } from '../utils/index.js';

package/client/helpers/index.js

@@ -1,9 +1 @@
-export * from './classes.js';
-export * from './direction.js';
-export * from './isRTL.js';
-export * from './query.js';
-export * from './queryAll.js';
-export * from './slots.js';
-export * from './styles.js';
-export * from './toUnit.js';
-export { getConfig, host, isServer, on, off, setConfig } from '../utils/index.js';
+export { classes, direction, getConfig, host, isRTL, isServer, on, off, query, queryAll, slots, styles, toUnit, setConfig } from '../utils/index.js';

package/client/utils/attributes.d.ts

@@ -0,0 +1 @@
+export declare const attributes: (element: HTMLElement, attributes: any[]) => void;

package/client/utils/attributes.js

@@ -0,0 +1,31 @@
+import { off, on } from './event.js';
+import { isEvent } from './isEvent.js';
+import { toEvent } from './toEvent.js';
+import { updateAttribute } from './updateAttribute.js';
+const symbol = Symbol();
+export const attributes = (element, attributes) => {
+    const prev = element[symbol] || {};
+    const next = Object.assign({}, ...attributes);
+    const prevClass = (prev.class || '').split(' ');
+    const nextClass = (next.class || '').split(' ');
+    const newClass = element.className
+        .split(' ')
+        .filter((key) => !prevClass.includes(key) && !nextClass.includes(key))
+        .concat(nextClass)
+        .filter((key) => key)
+        .join(' ');
+    updateAttribute(element, 'class', newClass || undefined);
+    if (prev.style || next.style)
+        element.setAttribute('style', next.style || '');
+    for (const key in prev)
+        isEvent(key) && off(element, toEvent(key), prev[key]);
+    for (const key in next) {
+        if (['class', 'style'].includes(key))
+            continue;
+        if (isEvent(key))
+            on(element, toEvent(key), next[key]);
+        else
+            updateAttribute(element, key, next[key]);
+    }
+    element[symbol] = Object.assign({}, next);
+};

package/client/{helpers → utils}/classes.js

@@ -1,5 +1,5 @@
 import { paramCase } from 'change-case';
-import { typeOf } from '../utils/index.js';
+import { typeOf } from './typeOf.js';
 export const classes = (input, smart) => {
     const result = [];
     switch (typeOf(input)) {

package/client/utils/config.d.ts

@@ -1,4 +1,7 @@
-interface Options {
+export interface Config {
+    asset?: {
+        [key: string]: any;
+    };
     component?: {
         [key: string]: {
             property?: {
@@ -8,5 +11,4 @@ interface Options {
     };
 }
 export declare const getConfig: (namespace: string, ...parameters: string[]) => any;
-export declare const setConfig: (namespace: string, config: Options, override?: boolean) => void;
-export {};
+export declare const setConfig: (namespace: string, config: Config, override?: boolean) => void;

package/client/{helpers → utils}/direction.js

@@ -1,4 +1,4 @@
-import { host } from '../utils/index.js';
+import { host } from './host.js';
 export const direction = (target) => {
     return getComputedStyle(host(target)).getPropertyValue('direction').toLowerCase();
 };

package/client/utils/index.d.ts

@@ -1,8 +1,11 @@
 export * from './addMember.js';
 export * from './appendToMethod.js';
+export * from './attributes.js';
 export * from './call.js';
+export * from './classes.js';
 export * from './config.js';
 export * from './defineProperty.js';
+export * from './direction.js';
 export * from './event.js';
 export * from './fromAttribute.js';
 export * from './getFramework.js';
@@ -12,13 +15,19 @@ export * from './getStyles.js';
 export * from './getTag.js';
 export * from './host.js';
 export * from './isEvent.js';
+export * from './isRTL.js';
 export * from './isServer.js';
 export * from './merge.js';
+export * from './query.js';
+export * from './queryAll.js';
 export * from './request.js';
 export * from './shadowRoot.js';
-export * from './syncAttributes.js';
+export * from './slots.js';
+export * from './styles.js';
 export * from './task.js';
 export * from './toBoolean.js';
 export * from './toEvent.js';
+export * from './toUnit.js';
 export * from './typeOf.js';
+export * from './uhtml.js';
 export * from './updateAttribute.js';

package/client/utils/index.js

@@ -1,8 +1,11 @@
 export * from './addMember.js';
 export * from './appendToMethod.js';
+export * from './attributes.js';
 export * from './call.js';
+export * from './classes.js';
 export * from './config.js';
 export * from './defineProperty.js';
+export * from './direction.js';
 export * from './event.js';
 export * from './fromAttribute.js';
 export * from './getFramework.js';
@@ -12,13 +15,19 @@ export * from './getStyles.js';
 export * from './getTag.js';
 export * from './host.js';
 export * from './isEvent.js';
+export * from './isRTL.js';
 export * from './isServer.js';
 export * from './merge.js';
+export * from './query.js';
+export * from './queryAll.js';
 export * from './request.js';
 export * from './shadowRoot.js';
-export * from './syncAttributes.js';
+export * from './slots.js';
+export * from './styles.js';
 export * from './task.js';
 export * from './toBoolean.js';
 export * from './toEvent.js';
+export * from './toUnit.js';
 export * from './typeOf.js';
+export * from './uhtml.js';
 export * from './updateAttribute.js';

package/client/{helpers → utils}/query.js

@@ -1,4 +1,4 @@
-import { shadowRoot } from '../utils/index.js';
+import { shadowRoot } from './shadowRoot.js';
 export function query(target, selectors) {
     var _a;
     return (_a = shadowRoot(target)) === null || _a === void 0 ? void 0 : _a.querySelector(selectors);

package/client/{helpers → utils}/queryAll.js

@@ -1,4 +1,4 @@
-import { shadowRoot } from '../utils/index.js';
+import { shadowRoot } from './shadowRoot.js';
 export function queryAll(target, selectors) {
     var _a;
     return (_a = shadowRoot(target)) === null || _a === void 0 ? void 0 : _a.querySelectorAll(selectors);

package/client/utils/request.js

@@ -1,9 +1,9 @@
 import * as CONSTANTS from '../../constants/index.js';
-import { call } from '../utils/call.js';
-import { task } from '../utils/task.js';
-import { html, render } from '../vendors/uhtml.js';
+import { call } from './call.js';
 import { getStyles } from './getStyles.js';
 import { shadowRoot } from './shadowRoot.js';
+import { task } from './task.js';
+import { html, render } from './uhtml.js';
 /**
  * Updates the DOM with a scheduled task.
  * @param target The component instance.

package/client/{helpers → utils}/slots.js

@@ -1,4 +1,4 @@
-import { host } from '../utils/index.js';
+import { host } from './host.js';
 export const slots = (target) => {
     var _a;
     const slots = {};

package/client/{helpers → utils}/styles.js

@@ -1,5 +1,5 @@
 import { paramCase } from 'change-case';
-import { typeOf } from '../utils/index.js';
+import { typeOf } from './typeOf.js';
 export const styles = (input) => {
     switch (typeOf(input)) {
         case 'array':

package/client/utils/uhtml.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Holds all details wrappers needed to render the content further on.
+ * @constructor
+ * @param {string} type The hole type, either `html` or `svg`.
+ * @param {string[]} template The template literals used to the define the content.
+ * @param {Array} values Zero, one, or more interpolated values to render.
+ */
+export class Hole {
+    constructor(type: any, template: any, values: any);
+    type: any;
+    template: any;
+    values: any;
+}
+export const html: ((template: any, ...values: any[]) => Hole) & {
+    for(ref: any, id: any): any;
+    node: (template: any, ...values: any[]) => any;
+};
+export function render(where: any, what: any): any;
+export const svg: ((template: any, ...values: any[]) => Hole) & {
+    for(ref: any, id: any): any;
+    node: (template: any, ...values: any[]) => any;
+};