@htmlplus/element 0.7.0 → 0.7.2

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/property.js

@@ -13,8 +13,8 @@ export function Property(options) {
             if (next === previous)
                 return;
             this[symbol] = next;
-            request(this, name, previous, (skip) => {
-                if (!(options === null || options === void 0 ? void 0 : options.reflect) || skip)
+            request(this, name, previous, (skipped) => {
+                if (!(options === null || options === void 0 ? void 0 : options.reflect) || skipped)
                     return;
                 target[CONSTANTS.API_LOCKED] = true;
                 updateAttribute(host(this), name, next);

package/client/helpers/index.d.ts

@@ -6,4 +6,4 @@ 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 { getConfig, host, isServer, on, off, setConfig } from '../utils/index.js';

package/client/helpers/index.js

@@ -6,4 +6,4 @@ 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 { getConfig, host, isServer, on, off, setConfig } from '../utils/index.js';

package/client/utils/config.d.ts

@@ -7,6 +7,6 @@ interface Options {
         };
     };
 }
-export declare const getConfig: (...parameters: string[]) => any;
-export declare const setConfig: (config: Options, override?: boolean) => void;
+export declare const getConfig: (namespace: string, ...parameters: string[]) => any;
+export declare const setConfig: (namespace: string, config: Options, override?: boolean) => void;
 export {};

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/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

@@ -7,11 +7,13 @@ 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 './isServer.js';
+export * from './merge.js';
 export * from './request.js';
 export * from './shadowRoot.js';
 export * from './syncAttributes.js';

package/client/utils/index.js

@@ -7,11 +7,13 @@ 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 './isServer.js';
+export * from './merge.js';
 export * from './request.js';
 export * from './shadowRoot.js';
 export * from './syncAttributes.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/utils/request.d.ts

@@ -6,4 +6,4 @@ import { PlusElement } from '../../types';
  * @param previous The previous value of Property/State.
  * @param callback Invoked when the rendering phase is completed.
  */
-export declare const request: (target: PlusElement, name?: string, previous?: any, callback?: Function) => void;
+export declare const request: (target: PlusElement, name?: string, previous?: any, callback?: ((skipped: boolean) => void) | undefined) => void;

package/compiler/plugins/customElement.js

@@ -54,6 +54,15 @@ export const customElement = (options) => {
                 path.replaceWith(t.jsxAttribute(t.jsxIdentifier('class'), value));
             }
         });
+        // replaces 'tabIndex' attribute with 'tabindex'
+        visitor(ast, {
+            JSXAttribute(path) {
+                const { name, value } = path.node;
+                if (name.name != 'tabIndex')
+                    return;
+                path.replaceWith(t.jsxAttribute(t.jsxIdentifier('tabindex'), value));
+            }
+        });
         // converts 'jsx' to 'uhtml' syntax
         visitor(ast, {
             JSXAttribute: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@htmlplus/element",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "license": "MIT",
   "sideEffects": false,
   "author": "Masood Abdolian <m.abdolian@gmail.com>",