@htmlplus/element 0.7.1 → 0.7.3

package/client/decorators/element.js

@@ -1,6 +1,6 @@
 import { camelCase, paramCase } from 'change-case';
 import * as CONSTANTS from '../../constants/index.js';
-import { call, fromAttribute, getConfig, getMembers, getTag, isServer, request } from '../utils/index.js';
+import { call, fromAttribute, getConfig, getMembers, getNamespace, getTag, isServer, request } from '../utils/index.js';
 export function Element() {
     return function (constructor) {
         if (isServer())
@@ -44,7 +44,7 @@ export function Element() {
             connectedCallback() {
                 const instance = this[CONSTANTS.API_INSTANCE];
                 // TODO: experimental for global config
-                Object.assign(instance, getConfig('component', getTag(instance), 'property'));
+                Object.assign(instance, getConfig(getNamespace(instance), 'component', getTag(instance), 'property'));
                 const connect = () => {
                     instance[CONSTANTS.API_CONNECTED] = true;
                     call(instance, CONSTANTS.LIFECYCLE_CONNECTED);

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 { host, isServer, on, off } 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 { host, isServer, on, off } 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?: {
@@ -7,6 +10,5 @@ interface Options {
         };
     };
 }
-export declare const getConfig: (...parameters: string[]) => any;
-export declare const setConfig: (config: Options, override?: boolean) => void;
-export {};
+export declare const getConfig: (namespace: string, ...parameters: string[]) => any;
+export declare const setConfig: (namespace: string, config: Config, override?: boolean) => void;

package/client/utils/config.js

@@ -1,11 +1,11 @@
-import { typeOf } from './typeOf.js';
+import { merge } from './merge.js';
 let defaults = {
     component: {}
 };
-export const getConfig = (...parameters) => {
+export const getConfig = (namespace, ...parameters) => {
     if (typeof window == 'undefined')
         return;
-    let config = window['HTMLPLUS'];
+    let config = window[namespace];
     for (const parameter of parameters) {
         if (!config)
             break;
@@ -13,27 +13,8 @@ export const getConfig = (...parameters) => {
     }
     return config;
 };
-export const setConfig = (config, override) => {
+export const setConfig = (namespace, config, override) => {
     if (typeof window == 'undefined')
         return;
-    window['HTMLPLUS'] = merge({}, defaults, override ? {} : window['HTMLPLUS'], config);
-};
-const merge = (target, ...sources) => {
-    for (const source of sources) {
-        if (!source)
-            continue;
-        if (typeOf(source) != 'object') {
-            target = source;
-            continue;
-        }
-        for (const key of Object.keys(source)) {
-            if (target[key] instanceof Object && source[key] instanceof Object && target[key] !== source[key]) {
-                target[key] = merge(target[key], source[key]);
-            }
-            else {
-                target[key] = source[key];
-            }
-        }
-    }
-    return target;
+    window[namespace] = merge({}, defaults, override ? {} : window[namespace], config);
 };

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/getNamespace.d.ts

@@ -0,0 +1,2 @@
+import { PlusElement } from '../../types';
+export declare const getNamespace: (instance: PlusElement) => string;

package/client/utils/getNamespace.js

@@ -0,0 +1,4 @@
+import { getTag } from './getTag.js';
+export const getNamespace = (instance) => {
+    return getTag(instance).split('-')[0].toUpperCase();
+};

package/client/utils/index.d.ts

@@ -1,22 +1,33 @@
 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';
 export * from './getMembers.js';
+export * from './getNamespace.js';
 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,22 +1,33 @@
 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';
 export * from './getMembers.js';
+export * from './getNamespace.js';
 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/merge.d.ts

@@ -0,0 +1 @@
+export declare const merge: (target: any, ...sources: any[]) => any;

package/client/utils/merge.js

@@ -0,0 +1,20 @@
+import { typeOf } from './typeOf.js';
+export const merge = (target, ...sources) => {
+    for (const source of sources) {
+        if (!source)
+            continue;
+        if (typeOf(source) != 'object') {
+            target = source;
+            continue;
+        }
+        for (const key of Object.keys(source)) {
+            if (target[key] instanceof Object && source[key] instanceof Object && target[key] !== source[key]) {
+                target[key] = merge(target[key], source[key]);
+            }
+            else {
+                target[key] = source[key];
+            }
+        }
+    }
+    return target;
+};

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;
+};