npm - @htmlplus/element - Versions diffs - 0.5.0 → 0.5.2 - Mend

@htmlplus/element 0.5.0 → 0.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (56) hide show

package/README.md +21 -22
package/bundlers/rollup.js +1 -1
package/bundlers/vite.js +1 -1
package/client/decorators/element.js +6 -5
package/client/decorators/listen.d.ts +13 -3
package/client/decorators/listen.js +15 -5
package/client/decorators/property.js +13 -3
package/client/decorators/watch.d.ts +5 -5
package/client/decorators/watch.js +10 -8
package/client/utils/config.d.ts +9 -2
package/client/utils/config.js +28 -4
package/client/utils/getMembers.d.ts +8 -0
package/client/utils/getMembers.js +5 -0
package/client/utils/getTag.d.ts +2 -0
package/client/utils/getTag.js +5 -0
package/client/utils/index.d.ts +2 -2
package/client/utils/index.js +2 -2
package/client/utils/request.js +2 -2
package/client/vendors/uhtml.js +1 -2
package/compiler/compiler.d.ts +1 -2
package/compiler/compiler.js +1 -1
package/compiler/index.d.ts +1 -1
package/compiler/index.js +1 -1
package/compiler/plugins/assets.d.ts +1 -0
package/compiler/plugins/assets.js +2 -2
package/compiler/plugins/copy.d.ts +1 -0
package/compiler/plugins/copy.js +2 -2
package/compiler/plugins/customElement.d.ts +1 -0
package/compiler/plugins/customElement.js +23 -11
package/compiler/plugins/customElementReact/customElementReact.d.ts +1 -0
package/compiler/plugins/customElementReact/customElementReact.js +2 -2
package/compiler/plugins/customElementReact/templates/src/components/{{fileName}}.ts.hbs +10 -9
package/compiler/plugins/customElementReact/templates/src/proxy.ts.hbs +29 -38
package/compiler/plugins/document.d.ts +1 -0
package/compiler/plugins/document.js +2 -2
package/compiler/plugins/extract.d.ts +1 -0
package/compiler/plugins/extract.js +2 -2
package/compiler/plugins/parse.d.ts +1 -0
package/compiler/plugins/parse.js +2 -2
package/compiler/plugins/read.d.ts +7 -1
package/compiler/plugins/read.js +6 -2
package/compiler/plugins/readme.d.ts +1 -0
package/compiler/plugins/readme.js +2 -2
package/compiler/plugins/style.d.ts +1 -0
package/compiler/plugins/style.js +3 -3
package/compiler/plugins/visualStudioCode.d.ts +1 -0
package/compiler/plugins/visualStudioCode.js +2 -2
package/compiler/plugins/webTypes.d.ts +1 -0
package/compiler/plugins/webTypes.js +2 -2
package/constants/index.d.ts +12 -11
package/constants/index.js +15 -12
package/package.json +21 -16
package/client/utils/getMemberType.d.ts +0 -2
package/client/utils/getMemberType.js +0 -5
package/client/utils/getMembersKey.d.ts +0 -2
package/client/utils/getMembersKey.js +0 -4

package/README.md CHANGED Viewed

@@ -1,16 +1,6 @@
 # Create Custom HTML Element
-[![Version](https://img.shields.io/npm/v/@htmlplus/element.svg)](https://www.npmjs.com/package/@htmlplus/element)
-[![GitHub forks](https://img.shields.io/github/forks/htmlplus/element)](https://github.com/htmlplus/element/network/members)
-[![GitHub stars](https://img.shields.io/github/stars/htmlplus/element)](https://github.com/htmlplus/element/stargazers)
-[![GitHub license](https://img.shields.io/github/license/htmlplus/element)](https://github.com/htmlplus/core/blob/main/LICENSE)
-[![Linkedin](https://img.shields.io/badge/Follow%20us-white?logo=linkedIn&color=0077B5&logoColor=white)](https://www.linkedin.com/company/htmlplus)
-[![code coverage](https://img.shields.io/coveralls//htmlplus/element/.svg?style=flat-square)](https://coveralls.io/r/htmlplus/element/)
-[![install size](https://packagephobia.now.sh/badge?p=element)](https://packagephobia.now.sh/result?p=element)
-Element is powerful library for building scalable, reusable design system for any technology.
-It is one of the fastest and most testable libraries for building web components on the web.
-Completely compatible for Typescript and tsx.
+A powerful library for building scalable, reusable, fast, tastable and lightweight design system for any web technologies. Powerd by [Web Component](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements).
 ## Table of content
@@ -47,7 +37,7 @@ pnpm create @htmlplus/element
 cd htmlplus-project
 ```
-To start your Element project, run:
+To start the project, run:
 ```bash
 # with npm
@@ -69,7 +59,7 @@ Element is based on classes, so all components are based on `decorator`.
 The decorator converts the next component code based on it's properties during the build.
 ```tsx
-// my-element/my-element.tsx
+// my-element.tsx
 import { Element } from '@htmlplus/element';
@@ -92,7 +82,7 @@ The result of this component after build is provide `my-element` web component.
 The element automatically adds a same name style file to this component. Create `my-element.scss` file for style.
 ```scss
-// my-element/my-element.scss
+// my-element.scss
 :host {
   display: block;
@@ -103,10 +93,10 @@ The element automatically adds a same name style file to this component. Create
 ## Development Environment
-For run any of the component, you must write element name tag into the `public/index.html`
+For run any of the component, you must write element name tag into the `index.html`
 ```html
-<!-- public/index.html -->
+<!-- index.html -->
 <body>
   <my-element></my-element>
@@ -289,16 +279,25 @@ export class MyButton {
 </details>
 <details>
-  <summary>Watch</summary>
+<summary>Watch</summary>
-`@Watch` take the name of the `@Property` and `@State` variable to monitor as a parameter. Any time the value of that property changes the function decorated by `@Watch` will be invoked with the `key`, `newValue` and `oldValue` as parameters. This is called first out of the lifecycle callbacks after a property changes.
+Monitors `@Property` and `@State` to catch changes.
+The decorated method will be invoked after any
+changes with the `key`, `newValue`, and `oldValue` as parameters.
+If the arguments aren't defined, all of the `@Property` and `@State` are considered.
-- **name**: `String` property name
+Parameters:
+- **keys**: Collection of `@Property` and `@State` names.
+  - **type**: string | string[]
+  - **default**: undefined
+- **immediate**: Triggers the callback immediately after initialization.
+  - **type**: boolean
+  - **default**: undefined
 ```tsx
 import { Element, Property, Watch } from '@htmlplus/element';
 @Element()
 export class MyElement {
@@ -931,7 +930,7 @@ TODO
 TODO
 ```js
-import compiler from '@htmlplus/element/compiler';
+import { compiler } from '@htmlplus/element/compiler';
 const { start, next, finish } = compiler(...plugins);
 ```
@@ -941,7 +940,7 @@ const { start, next, finish } = compiler(...plugins);
 TODO
 ```js
-import compiler from '@htmlplus/element/compiler/index.js';
+import { compiler } from '@htmlplus/element/compiler/index.js';
 import { customElement, extract, parse, read, style, validate } from '@htmlplus/element/compiler/index.js';
 const { start, next, finish } = compiler(

package/bundlers/rollup.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import compiler from '../compiler/index.js';
+import { compiler } from '../compiler/index.js';
 export const rollup = (...plugins) => {
     const { start, next, finish } = compiler(...plugins);
     return {

package/bundlers/vite.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import path from 'path';
-import compiler from '../compiler/index.js';
+import { compiler } from '../compiler/index.js';
 export const vite = (...plugins) => {
     const { start, next, finish } = compiler(...plugins);
     return {

package/client/decorators/element.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { camelCase, paramCase } from 'change-case';
 import * as CONSTANTS from '../../constants/index.js';
-import { call, getMembersKey, getMemberType, isServer, parseValue, request } from '../utils/index.js';
+import { call, getMembers, isServer, parseValue, request } from '../utils/index.js';
 export function Element(tag) {
     return function (constructor) {
         if (isServer())
@@ -16,17 +16,18 @@ export function Element(tag) {
             }
             // TODO: ignore functions
             static get observedAttributes() {
-                return getMembersKey(constructor).map((key) => paramCase(key));
+                return Object.keys(getMembers(constructor)).map((key) => paramCase(key));
             }
             adoptedCallback() {
                 call(this[CONSTANTS.API_INSTANCE], CONSTANTS.LIFECYCLE_ADOPTED);
             }
             attributeChangedCallback(attribute, prev, next) {
+                var _a;
                 const instance = this[CONSTANTS.API_INSTANCE];
-                if (instance[CONSTANTS.API_IS_DISABLED_ATTRIBUTE_CHANGED_CALLBACK])
+                if (instance[CONSTANTS.API_LOCKED])
                     return;
                 const name = camelCase(attribute);
-                const type = getMemberType(instance, name);
+                const type = (_a = getMembers(instance)[name]) === null || _a === void 0 ? void 0 : _a.type;
                 const value = parseValue(next, type);
                 if (instance[name] === value)
                     return;
@@ -34,7 +35,7 @@ export function Element(tag) {
             }
             connectedCallback() {
                 const instance = this[CONSTANTS.API_INSTANCE];
-                instance[CONSTANTS.API_IS_CONNECTED] = true;
+                instance[CONSTANTS.API_CONNECTED] = true;
                 call(instance, CONSTANTS.LIFECYCLE_CONNECTED);
                 request(instance, undefined, undefined, () => {
                     call(instance, CONSTANTS.LIFECYCLE_LOADED);

package/client/decorators/listen.d.ts CHANGED Viewed

@@ -1,12 +1,22 @@
 import { PlusElement } from '../../types';
 export interface ListenOptions {
-    target?: 'host' | 'body' | 'document' | 'window';
+    capture?: boolean;
     once?: boolean;
     passive?: boolean;
     signal?: AbortSignal;
-    capture?: boolean;
+    target?: 'host' | 'body' | 'document' | 'window';
 }
-export declare function Listen(name: string, options?: ListenOptions): (target: PlusElement, propertyKey: PropertyKey, descriptor: PropertyDescriptor) => {
+/**
+ * The default options.
+ */
+export declare const ListenOptionsDefault: ListenOptions;
+/**
+ * Will be called whenever the specified event is delivered to the target.
+ * [More](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener).
+ * @param type TODO
+ * @param options TODO
+ */
+export declare function Listen(type: string, options?: ListenOptions): (target: PlusElement, propertyKey: PropertyKey, descriptor: PropertyDescriptor) => {
     configurable: boolean;
     get(): any;
 };

package/client/decorators/listen.js CHANGED Viewed

@@ -1,13 +1,23 @@
 import * as CONSTANTS from '../../constants/index.js';
 import { appendToMethod, host, on, off } from '../utils/index.js';
 import { Bind } from './bind.js';
-const defaults = {
+/**
+ * The default options.
+ */
+export const ListenOptionsDefault = {
     target: 'host'
 };
-export function Listen(name, options = defaults) {
+/**
+ * Will be called whenever the specified event is delivered to the target.
+ * [More](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener).
+ * @param type TODO
+ * @param options TODO
+ */
+export function Listen(type, options) {
     return function (target, propertyKey, descriptor) {
+        options = Object.assign({}, ListenOptionsDefault, options);
         const element = (instance) => {
-            switch (options.target) {
+            switch (options === null || options === void 0 ? void 0 : options.target) {
                 case 'body':
                     return window.document.body;
                 case 'document':
@@ -21,10 +31,10 @@ export function Listen(name, options = defaults) {
             }
         };
         appendToMethod(target, CONSTANTS.LIFECYCLE_CONNECTED, function () {
-            on(element(this), name, this[propertyKey], options);
+            on(element(this), type, this[propertyKey], options);
         });
         appendToMethod(target, CONSTANTS.LIFECYCLE_DISCONNECTED, function () {
-            off(element(this), name, this[propertyKey], options);
+            off(element(this), type, this[propertyKey], options);
         });
         return Bind()(target, propertyKey, descriptor);
     };

package/client/decorators/property.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as CONSTANTS from '../../constants/index.js';
-import { defineProperty, host, request, appendToMethod, updateAttribute } from '../utils/index.js';
+import { defineProperty, host, request, appendToMethod, updateAttribute, getConfig, getMembers, getTag } from '../utils/index.js';
 export function Property(options) {
     return function (target, propertyKey) {
         const name = String(propertyKey);
@@ -15,14 +15,24 @@ export function Property(options) {
             request(this, name, previous, (skip) => {
                 if (!(options === null || options === void 0 ? void 0 : options.reflect) || skip)
                     return;
-                target[CONSTANTS.API_IS_DISABLED_ATTRIBUTE_CHANGED_CALLBACK] = true;
+                target[CONSTANTS.API_LOCKED] = true;
                 updateAttribute(host(this), name, next);
-                target[CONSTANTS.API_IS_DISABLED_ATTRIBUTE_CHANGED_CALLBACK] = false;
+                target[CONSTANTS.API_LOCKED] = false;
             });
         }
         defineProperty(target, propertyKey, { get, set });
         appendToMethod(target, CONSTANTS.LIFECYCLE_CONNECTED, function () {
+            var _a;
             const element = host(this);
+            // TODO: experimental for global config
+            if (((_a = getMembers(this)[name]) === null || _a === void 0 ? void 0 : _a.default) === this[name]) {
+                const config = getConfig('component', getTag(target), 'property', name);
+                if (typeof config != 'undefined')
+                    this[name] = config;
+            }
+            // TODO: experimental for isolated options
+            if (element === this)
+                return;
             const get = () => {
                 return this[propertyKey];
             };

package/client/decorators/watch.d.ts CHANGED Viewed

@@ -1,10 +1,10 @@
 import { PlusElement } from '../../types';
 /**
- * Monitors properties and states to catch changes.
+ * Monitors `@Property` and `@State` to catch changes.
  * The decorated method will be invoked after any
- * changes with the key, newValue, and oldValue as parameters.
- * If the arguments aren't defined, all of the properties and states are considered.
- * @param keys Collection of Property/State names.
+ * changes with the `key`, `newValue`, and `oldValue` as parameters.
+ * If the arguments aren't defined, all of the `@Property` and `@State` are considered.
+ * @param keys Collection of `@Property` and `@State` names.
  * @param immediate Triggers the callback immediately after initialization.
  */
-export declare function Watch(keys?: Array<string>, immediate?: boolean): (target: PlusElement, propertyKey: PropertyKey) => void;
+export declare function Watch(keys?: string | string[], immediate?: boolean): (target: PlusElement, propertyKey: PropertyKey) => void;

package/client/decorators/watch.js CHANGED Viewed

@@ -1,24 +1,26 @@
 import * as CONSTANTS from '../../constants/index.js';
 import { appendToMethod } from '../utils/index.js';
 /**
- * Monitors properties and states to catch changes.
+ * Monitors `@Property` and `@State` to catch changes.
  * The decorated method will be invoked after any
- * changes with the key, newValue, and oldValue as parameters.
- * If the arguments aren't defined, all of the properties and states are considered.
- * @param keys Collection of Property/State names.
+ * changes with the `key`, `newValue`, and `oldValue` as parameters.
+ * If the arguments aren't defined, all of the `@Property` and `@State` are considered.
+ * @param keys Collection of `@Property` and `@State` names.
  * @param immediate Triggers the callback immediately after initialization.
  */
 export function Watch(keys, immediate) {
     return function (target, propertyKey) {
+        // Gets all keys
+        const all = [keys].flat().filter((key) => key);
         // Registers a lifecycle to detect changes.
         appendToMethod(target, CONSTANTS.LIFECYCLE_UPDATED, function (states) {
             // Skips the logic if 'immediate' wasn't passed.
-            if (!immediate && !this[CONSTANTS.API_IS_LOADED])
+            if (!immediate && !this[CONSTANTS.API_LOADED])
                 return;
-            // Loops the keys
+            // Loops the keys.
             states.forEach((prev, key) => {
-                // TODO
-                if ((keys === null || keys === void 0 ? void 0 : keys.length) && !keys.includes(key))
+                // Skips the current key.
+                if (all.length && !all.includes(key))
                     return;
                 // Invokes the method with parameters.
                 this[propertyKey](this[key], prev, key);

package/client/utils/config.d.ts CHANGED Viewed

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

package/client/utils/config.js CHANGED Viewed

@@ -1,7 +1,31 @@
+let defaults = {
+    component: {}
+};
 let options = {};
-export const getConfig = () => {
-    return options;
+export const getConfig = (...parameters) => {
+    let config = options;
+    for (const parameter of parameters) {
+        if (!config)
+            break;
+        config = config[parameter];
+    }
+    return config;
+};
+export const setConfig = (config, override) => {
+    options = override ? merge({}, defaults, config) : merge({}, defaults, options, config);
 };
-export const setConfig = (config) => {
-    options = config || {};
+const merge = (target, ...sources) => {
+    for (const source of sources) {
+        if (!source)
+            continue;
+        for (const key of Object.keys(source)) {
+            if (source[key] instanceof Object) {
+                target[key] = merge(target[key] || {}, source[key]);
+            }
+            else {
+                target[key] = source[key];
+            }
+        }
+    }
+    return target;
 };

package/client/utils/getMembers.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import * as CONSTANTS from '../../constants/index.js';
+import { PlusElement } from '../../types';
+export declare const getMembers: (target: PlusElement) => {
+    [member: string]: {
+        default?: any;
+        type?: any;
+    };
+};

package/client/utils/getMembers.js ADDED Viewed

@@ -0,0 +1,5 @@
+import * as CONSTANTS from '../../constants/index.js';
+// TODO
+export const getMembers = (target) => {
+    return target.constructor[CONSTANTS.STATIC_MEMBERS] || target[CONSTANTS.STATIC_MEMBERS] || {};
+};

package/client/utils/getTag.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { PlusElement } from '../../types';
2	+ export declare const getTag: (target: PlusElement) => string \| undefined;

package/client/utils/getTag.js ADDED Viewed

@@ -0,0 +1,5 @@
+import * as CONSTANTS from '../../constants/index.js';
+export const getTag = (target) => {
+    var _a;
+    return (_a = target.constructor[CONSTANTS.STATIC_TAG]) !== null && _a !== void 0 ? _a : target[CONSTANTS.STATIC_TAG];
+};

package/client/utils/index.d.ts CHANGED Viewed

@@ -3,9 +3,9 @@ export * from './call.js';
 export * from './config.js';
 export * from './defineProperty.js';
 export * from './getFramework.js';
-export * from './getMembersKey.js';
-export * from './getMemberType.js';
+export * from './getMembers.js';
 export * from './getStyles.js';
+export * from './getTag.js';
 export * from './host.js';
 export * from './isEvent.js';
 export * from './isServer.js';

package/client/utils/index.js CHANGED Viewed

@@ -3,9 +3,9 @@ export * from './call.js';
 export * from './config.js';
 export * from './defineProperty.js';
 export * from './getFramework.js';
-export * from './getMembersKey.js';
-export * from './getMemberType.js';
+export * from './getMembers.js';
 export * from './getStyles.js';
+export * from './getTag.js';
 export * from './host.js';
 export * from './isEvent.js';
 export * from './isServer.js';

package/client/utils/request.js CHANGED Viewed

@@ -25,7 +25,7 @@ export const request = (target, name, previous, callback) => {
     target[_b = CONSTANTS.API_REQUEST] || (target[_b] = task({
         run: () => {
             // Skips the rendering phase if DOM isn't ready.
-            if (!target[CONSTANTS.API_IS_CONNECTED])
+            if (!target[CONSTANTS.API_CONNECTED])
                 return;
             // Calculates the states to pass into lifecycles' callbacks.
             const states = new Map(Array.from(stacks)
@@ -56,7 +56,7 @@ export const request = (target, name, previous, callback) => {
             // Calls the lifecycle's callback after the rendering phase.
             call(target, CONSTANTS.LIFECYCLE_UPDATED, states);
             // TODO: releated to the @Watch decorator.
-            target[CONSTANTS.API_IS_LOADED] = true;
+            target[CONSTANTS.API_LOADED] = true;
             // Clears stacks.
             stacks.clear();
         }

package/client/vendors/uhtml.js CHANGED Viewed

@@ -319,8 +319,7 @@ var udomdiff = (parentNode, a, b, get, before) => {
 };
 const { isArray, prototype } = Array;
 const { indexOf } = prototype;
-const document = typeof window == 'undefined' ? {} : window.document;
-const { createDocumentFragment, createElement, createElementNS, createTextNode, createTreeWalker, importNode } = new Proxy(document, {
+const { createDocumentFragment, createElement, createElementNS, createTextNode, createTreeWalker, importNode } = new Proxy(typeof window == 'undefined' ? {} : window.document, {
     get: (target, method) => (target[method] || function () { }).bind(target)
 });
 const createHTML = (html) => {

package/compiler/compiler.d.ts CHANGED Viewed

@@ -1,7 +1,6 @@
 import { Context, Plugin } from '../types';
-declare const _default: (...plugins: Array<Plugin>) => {
+export declare const compiler: (...plugins: Array<Plugin>) => {
     start: () => Promise<void>;
     next: (filePath: string) => Promise<Context>;
     finish: () => Promise<void>;
 };
-export default _default;

package/compiler/compiler.js CHANGED Viewed

@@ -7,7 +7,7 @@ const log = (message, persist) => {
     var _a, _b;
     (_b = (_a = logger.start(`${new Date().toLocaleTimeString()} [HTMLPLUS] ${message}`))[persist ? 'succeed' : '']) === null || _b === void 0 ? void 0 : _b.call(_a);
 };
-export default (...plugins) => {
+export const compiler = (...plugins) => {
     let global = {
         contexts: []
     };

package/compiler/index.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
-export { default as default } from './compiler.js';
+export * from './compiler.js';
 export * from './plugins/index.js';

package/compiler/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-export { default as default } from './compiler.js';
+export * from './compiler.js';
 export * from './plugins/index.js';

package/compiler/plugins/assets.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import { Context } from '../../types';
+export declare const ASSETS_OPTIONS: Partial<AssetsOptions>;
 export declare type AssetsOptions = {
     once?: boolean;
     destination: (context: Context) => string;

package/compiler/plugins/assets.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import fs from 'fs-extra';
 import path from 'path';
-const defaults = {
+export const ASSETS_OPTIONS = {
     once: true,
     destination(context) {
         return `assets/${context.fileName}`;
@@ -11,7 +11,7 @@ const defaults = {
 };
 export const assets = (options) => {
     const name = 'assets';
-    options = Object.assign({}, defaults, options);
+    options = Object.assign({}, ASSETS_OPTIONS, options);
     const sources = new Set();
     const next = (context) => {
         var _a, _b;

package/compiler/plugins/copy.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+export declare const COPY_OPTIONS: Partial<CopyOptions>;
 export interface CopyOptions {
     at?: 'start' | 'next' | 'finish';
     destination: string;

package/compiler/plugins/copy.js CHANGED Viewed

@@ -1,11 +1,11 @@
 import fs from 'fs-extra';
 import path from 'path';
-const defaults = {
+export const COPY_OPTIONS = {
     at: 'start'
 };
 export const copy = (options) => {
     const name = 'copy';
-    options = Object.assign({}, defaults, options);
+    options = Object.assign({}, COPY_OPTIONS, options);
     const copy = (caller) => {
         if (options.at != caller)
             return;

package/compiler/plugins/customElement.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import { Context } from '../../types';
+export declare const CUSTOM_ELEMENT_OPTIONS: Partial<CustomElementOptions>;
 export interface CustomElementOptions {
     typings?: boolean;
 }

package/compiler/plugins/customElement.js CHANGED Viewed

@@ -2,17 +2,28 @@ import t from '@babel/types';
 import { pascalCase } from 'change-case';
 import * as CONSTANTS from '../../constants/index.js';
 import { addDependency, print, visitor } from '../utils/index.js';
-const defaults = {
+export const CUSTOM_ELEMENT_OPTIONS = {
     // prefix: undefined,
     typings: true
 };
 // TODO: support {variable && jsxElement}
 export const customElement = (options) => {
     const name = 'customElement';
-    options = Object.assign({}, defaults, options);
+    options = Object.assign({}, CUSTOM_ELEMENT_OPTIONS, options);
     const next = (context) => {
         const ast = t.cloneNode(context.fileAST, true);
-        // attach style mapper for 'style' attribute
+        // attaches name
+        visitor(ast, {
+            ClassDeclaration(path) {
+                const { body, id } = path.node;
+                if (id.name != context.className)
+                    return;
+                const node = t.classProperty(t.identifier(CONSTANTS.STATIC_TAG), t.stringLiteral(context.componentTag), undefined, undefined, undefined, true);
+                t.addComment(node, 'leading', CONSTANTS.COMMENT_AUTO_ADDED_PROPERTY, true);
+                body.body.unshift(node);
+            }
+        });
+        // attaches style mapper for 'style' attribute
         visitor(ast, {
             JSXAttribute(path) {
                 const { name, value } = path.node;
@@ -22,16 +33,13 @@ export const customElement = (options) => {
                     return;
                 if (value.type != 'JSXExpressionContainer')
                     return;
-                const { local } = addDependency(path, CONSTANTS.PACKAGE_NAME, CONSTANTS.UTILS_STYLE_MAP, CONSTANTS.UTILS_STYLE_MAP);
+                const { local } = addDependency(path, CONSTANTS.PACKAGE_NAME, CONSTANTS.UTIL_STYLE_MAPPER, CONSTANTS.UTIL_STYLE_MAPPER);
                 // TODO: remove 'local!'
                 path.replaceWith(t.jsxAttribute(t.jsxIdentifier('style'), t.jsxExpressionContainer(t.callExpression(t.identifier(local), [value.expression]))));
                 path.skip();
             }
         });
-        // TODO
-        const { node } = addDependency(ast, CONSTANTS.VENDOR_UHTML, 'uhtml');
-        t.addComment(node, 'leading', CONSTANTS.COMMENT_AUTO_ADDED_DEPENDENCY, true);
-        // replace 'className' attribute to 'class'
+        // replaces 'className' attribute with 'class'
         visitor(ast, {
             JSXAttribute(path) {
                 const { name, value } = path.node;
@@ -43,7 +51,7 @@ export const customElement = (options) => {
                 path.replaceWith(t.jsxAttribute(t.jsxIdentifier('class'), value));
             }
         });
-        // TODO: convert 'jsx' to 'uhtml' syntax
+        // converts 'jsx' to 'uhtml' syntax
         visitor(ast, {
             JSXAttribute: {
                 exit(path) {
@@ -87,9 +95,13 @@ export const customElement = (options) => {
                     // TODO
                     path.replaceWith(t.jsxAttribute(t.jsxIdentifier('.dataset'), t.jsxExpressionContainer(path.node.argument)));
                 }
+            },
+            Program(path) {
+                const { node } = addDependency(path, CONSTANTS.VENDOR_UHTML_PATH, 'uhtml');
+                t.addComment(node, 'leading', CONSTANTS.COMMENT_AUTO_ADDED_DEPENDENCY, true);
             }
         });
-        // attach members
+        // attaches members
         visitor(ast, {
             ClassDeclaration(path) {
                 const { body, id } = path.node;
@@ -132,7 +144,7 @@ export const customElement = (options) => {
                 body.body.unshift(node);
             }
         });
-        // attach typings
+        // attaches typings
         if (options === null || options === void 0 ? void 0 : options.typings) {
             visitor(ast, {
                 Program(path) {

package/compiler/plugins/customElementReact/customElementReact.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import { Context, Global } from '../../../types';
+export declare const CUSTOM_ELEMENT_REACT_OPTIONS: Partial<CustomElementReactOptions>;
 export interface CustomElementReactOptions {
     compact?: boolean;
     destination: string;

package/compiler/plugins/customElementReact/customElementReact.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import { pascalCase } from 'change-case';
 import { __dirname, isDirectoryEmpty, renderTemplate } from '../../utils/index.js';
-const defaults = {};
+export const CUSTOM_ELEMENT_REACT_OPTIONS = {};
 export const customElementReact = (options) => {
     const name = 'customElementReact';
-    options = Object.assign({}, defaults, options);
+    options = Object.assign({}, CUSTOM_ELEMENT_REACT_OPTIONS, options);
     const finish = (global) => {
         // TODO
         const globalNew = {

package/compiler/plugins/customElementReact/templates/src/components/{{fileName}}.ts.hbs CHANGED Viewed

@@ -1,19 +1,20 @@
 /**************************************************
  * THIS FILE IS AUTO-GENERATED, DO NOT EDIT MANUALY
  **************************************************/
-import { proxy } from '../proxy';
 import '{{importerComponent.source}}';
 import type { {{importerComponentType.imported}} as {{importerComponentType.local}} } from '{{importerComponentType.source}}';
-type Rename<T, R extends { [K in keyof R]: K extends keyof T ? PropertyKey : "Error: key not in T" }> = { [P in keyof T as P extends keyof R ? R[P] : P]: T[P] }
+import { proxy } from '../proxy';
+import type { Rename } from '../proxy';
-type Renamed = Rename<{{importerComponentType.local}}, {
-  {{#each classEvents}}
-  {{from}}: '{{to}}',
-  {{/each}}
-}>
+type Renamed = Rename<
+  {{importerComponentType.local}},
+  {
+    {{#each classEvents}}
+    {{from}}: '{{to}}';
+    {{/each}}
+  }
+>;
 export const {{className}} = proxy<{{componentInterfaceName}}, Renamed>(
   '{{componentTag}}',

package/compiler/plugins/customElementReact/templates/src/proxy.ts.hbs CHANGED Viewed

@@ -1,10 +1,14 @@
 /**************************************************
  * THIS FILE IS AUTO-GENERATED, DO NOT EDIT MANUALY
  **************************************************/
-import { camelCase, paramCase, pascalCase } from 'change-case';
 import React from 'react';
+import { camelCase, paramCase, pascalCase } from 'change-case';
+export type Rename<T, R extends { [K in keyof R]: K extends keyof T ? PropertyKey : 'Error: key not in T' }> = {
+  [P in keyof T as P extends keyof R ? R[P] : P]: T[P];
+};
 type EventHandlerType = (event: Event) => any;
 type FinalPropsType<ElementType> = Omit<PropsType<ElementType>, 'forwardedRef'>;
@@ -90,22 +94,22 @@ const getProps = <ElementType>(ref: React.Ref<ElementType>, props: PropsType<Ele
   Object.keys(props).forEach((name) => {
     if (name === 'children' || name === 'className' || name === 'forwardedRef' || name === 'ref') return;
-    const value = props[name];
+    const value = (props as any)[name];
     if (isEvent(name)) {
       if (typeof document === 'undefined') return;
-      const event = getCustomEvent(name, extra.events);
+      const event = getCustomEvent(name, extra.events || []);
       if (event) return;
-      result[name] = value;
-    } else if (extra.props.includes(name)) {
+      (result as any)[name] = value;
+    } else if (extra.props?.includes(name)) {
       if (!isPrimitive(value)) return;
-      result[paramCase(name)] = value;
+      (result as any)[paramCase(name)] = value;
     } else {
-      result[name] = value;
+      (result as any)[name] = value;
     }
   });
@@ -129,7 +133,7 @@ const setClass = <ElementType>(element: ElementType, props: PropsType<ElementTyp
   const current = arrayToMap((element as any).classList);
-  const prev: string = element['$class'];
+  const prev: string = (element as any)['$class'];
   const next: string = props.className || (props as any).class;
   const prevClass = arrayToMap(prev ? prev.split(' ') : []);
@@ -151,21 +155,22 @@ const setClass = <ElementType>(element: ElementType, props: PropsType<ElementTyp
   (element as any).className = className;
-  element['$class'] = className;
+  (element as any)['$class'] = className;
 };
 const setEvent = (element: Element, name: string, handler: EventHandlerType) => {
-  const events = element['$events'] || (element['$events'] = {});
+  const events = (element as any)['$events'] || ((element as any)['$events'] = {});
   const previous = events[name];
   previous && element.removeEventListener(paramCase(name), previous);
-  function callback(event: Event) {
-    handler && handler.call(this, event);
-  }
-  element.addEventListener(paramCase(name), (events[name] = callback));
+  element.addEventListener(
+    paramCase(name),
+    (events[name] = function callback(event: Event) {
+      handler && handler.call(this, event);
+    })
+  );
 };
 const setProps = <ElementType>(element: ElementType, props: PropsType<ElementType>, extra: ExtraType) => {
@@ -184,24 +189,24 @@ const setProps = <ElementType>(element: ElementType, props: PropsType<ElementTyp
     )
       return;
-    const value = props[name];
+    const value = (props as any)[name];
     if (isEvent(name)) {
       if (typeof document === 'undefined') return;
-      const event = getCustomEvent(name, extra.events);
+      const event = getCustomEvent(name, extra.events || []);
       if (!event) return;
       setEvent(element, event, value);
-    } else if (extra.props.includes(name)) {
+    } else if (extra.props?.includes(name)) {
       if (isPrimitive(value)) {
         element.setAttribute(paramCase(name), value);
       } else {
-        element[name] = value;
+        (element as any)[name] = value;
       }
     } else {
-      element[name] = value;
+      (element as any)[name] = value;
     }
   });
 };
@@ -238,7 +243,7 @@ export const proxy = <ElementType, PropType>(
     componentWillUnmount() {
       if (!this.element) return;
-      const events = this.element['$events'] || {};
+      const events = (this.element as any)['$events'] || {};
       Object.keys(events).forEach((name) => {
         const handler = events[name];
@@ -246,7 +251,7 @@ export const proxy = <ElementType, PropType>(
         (this.element as any).removeEventListener(paramCase(name), handler);
       });
-      delete this.element['$events'];
+      delete (this.element as any)['$events'];
     }
     render() {
@@ -258,21 +263,7 @@ export const proxy = <ElementType, PropType>(
     }
   };
-  // TODO
-  // const ReactComponentNew = (props: InternalPropsType<ElementType>) => {
-  //   const { children } = props;
-  //   const ref = useRef(null);
-  //   const newProps: FinalPropsType<ElementType> = getProps(ref, props, events);
-  //   useEffect(() => setProps(ref.current, props, events));
-  //   return React.createElement(tagName, newProps, children);
-  // }
-  ReactComponent['displayName'] = pascalCase(tagName);
+  (ReactComponent as any)['displayName'] = pascalCase(tagName);
   return forwardRef<ElementType, PropType>(ReactComponent);
 };

package/compiler/plugins/document.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import { Context, Global } from '../../types';
+export declare const DOCUMENT_OPTIONS: Partial<DocumentOptions>;
 export interface DocumentOptions {
     destination: string;
     transformer?: (context: Context, element: any) => any;

package/compiler/plugins/document.js CHANGED Viewed

@@ -3,10 +3,10 @@ import fs from 'fs-extra';
 import glob from 'glob';
 import path from 'path';
 import { getInitializer, getTag, getTags, getTypeReference, hasTag, parseTag, print } from '../utils/index.js';
-const defaults = {};
+export const DOCUMENT_OPTIONS = {};
 export const document = (options) => {
     const name = 'document';
-    options = Object.assign({}, defaults, options);
+    options = Object.assign({}, DOCUMENT_OPTIONS, options);
     const finish = (global) => {
         var _a, _b, _c;
         const json = {

package/compiler/plugins/extract.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import { Context } from '../../types';
+export declare const EXTRACT_OPTIONS: Partial<ExtractOptions>;
 export interface ExtractOptions {
     prefix?: string;
 }

package/compiler/plugins/extract.js CHANGED Viewed

@@ -3,10 +3,10 @@ import { pascalCase, paramCase } from 'change-case';
 import path from 'path';
 import * as CONSTANTS from '../../constants/index.js';
 import { hasDecorator, visitor } from '../utils/index.js';
-const defaults = {};
+export const EXTRACT_OPTIONS = {};
 export const extract = (options) => {
     const name = 'extract';
-    options = Object.assign({}, defaults, options);
+    options = Object.assign({}, EXTRACT_OPTIONS, options);
     const next = (context) => {
         var _a, _b;
         visitor(context.fileAST, {

package/compiler/plugins/parse.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import { ParserOptions } from '@babel/parser';
 import { Context } from '../../types';
+export declare const PARSE_OPTIONS: Partial<ParseOptions>;
 export declare type ParseOptions = ParserOptions;
 export declare const parse: (options?: ParseOptions) => {
     name: string;

package/compiler/plugins/parse.js CHANGED Viewed

@@ -1,11 +1,11 @@
 import { parse as parser } from '@babel/parser';
-const defaults = {
+export const PARSE_OPTIONS = {
     allowImportExportEverywhere: true,
     plugins: ['jsx', 'typescript', 'decorators-legacy']
 };
 export const parse = (options) => {
     const name = 'parse';
-    options = Object.assign({}, defaults, options);
+    options = Object.assign({}, PARSE_OPTIONS, options);
     const next = (context) => {
         var _a;
         context.fileAST = (_a = context.fileAST) !== null && _a !== void 0 ? _a : parser(context.fileContent, options);

package/compiler/plugins/read.d.ts CHANGED Viewed

@@ -1,5 +1,11 @@
+/// <reference types="node" />
 import { Context } from '../../types';
-export declare const read: () => {
+export declare const READ_OPTIONS: Partial<ReadOptions>;
+export declare type ReadOptions = {
+    encoding: BufferEncoding;
+    flag?: string | undefined;
+};
+export declare const read: (options?: ReadOptions) => {
     name: string;
     next: (context: Context) => void;
 };

package/compiler/plugins/read.js CHANGED Viewed

@@ -1,9 +1,13 @@
 import fs from 'fs-extra';
-export const read = () => {
+export const READ_OPTIONS = {
+    encoding: 'utf8'
+};
+export const read = (options) => {
     const name = 'read';
+    options = Object.assign({}, READ_OPTIONS, options);
     const next = (context) => {
         var _a;
-        context.fileContent = (_a = context.fileContent) !== null && _a !== void 0 ? _a : fs.readFileSync(context.filePath, 'utf8');
+        context.fileContent = (_a = context.fileContent) !== null && _a !== void 0 ? _a : fs.readFileSync(context.filePath, options);
     };
     return { name, next };
 };

package/compiler/plugins/readme.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import { Context, Global } from '../../types';
+export declare const README_OPTIONS: Partial<ReadmeOptions>;
 export declare type ReadmeOptions = {
     source?: (context: Context) => string;
 };

package/compiler/plugins/readme.js CHANGED Viewed

@@ -1,13 +1,13 @@
 import fs from 'fs-extra';
 import path from 'path';
-const defaults = {
+export const README_OPTIONS = {
     source(context) {
         return path.join(context.directoryPath, `${context.fileName}.md`);
     }
 };
 export const readme = (options) => {
     const name = 'readme';
-    options = Object.assign({}, defaults, options);
+    options = Object.assign({}, README_OPTIONS, options);
     const finish = (global) => {
         var _a;
         for (const context of global.contexts) {

package/compiler/plugins/style.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import { Context } from '../../types';
+export declare const STYLE_OPTIONS: Partial<StyleOptions>;
 export declare type StyleOptions = {
     source?: (context: Context) => string | string[];
 };

package/compiler/plugins/style.js CHANGED Viewed

@@ -3,7 +3,7 @@ import fs from 'fs-extra';
 import path from 'path';
 import * as CONSTANTS from '../../constants/index.js';
 import { addDependency } from '../utils/index.js';
-const defaults = {
+export const STYLE_OPTIONS = {
     source(context) {
         return [
             path.join(context.directoryPath, `${context.fileName}.css`),
@@ -16,7 +16,7 @@ const defaults = {
 };
 export const style = (options) => {
     const name = 'style';
-    options = Object.assign({}, defaults, options);
+    options = Object.assign({}, STYLE_OPTIONS, options);
     const next = (context) => {
         var _a;
         const sources = [(_a = options === null || options === void 0 ? void 0 : options.source) === null || _a === void 0 ? void 0 : _a.call(options, context)].flat();
@@ -30,7 +30,7 @@ export const style = (options) => {
         }
         if (!context.stylePath)
             return;
-        const { local, node } = addDependency(context.fileAST, context.stylePath, CONSTANTS.AUTO_IMPORT_STYLE);
+        const { local, node } = addDependency(context.fileAST, context.stylePath, CONSTANTS.STYLE_IMPORTED);
         t.addComment(node, 'leading', CONSTANTS.COMMENT_AUTO_ADDED_DEPENDENCY, true);
         // TODO: remove 'local!'
         const property = t.classProperty(t.identifier(CONSTANTS.STATIC_STYLES), t.identifier(local), undefined, null, undefined, true);

package/compiler/plugins/visualStudioCode.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import { Global } from '../../types';
+export declare const VISUAL_STUDIO_CODE_OPTIONS: Partial<VisualStudioCodeOptions>;
 export interface VisualStudioCodeOptions {
     destination: string;
 }

package/compiler/plugins/visualStudioCode.js CHANGED Viewed

@@ -1,7 +1,7 @@
-const defaults = {};
+export const VISUAL_STUDIO_CODE_OPTIONS = {};
 export const visualStudioCode = (options) => {
     const name = 'visualStudioCode';
-    options = Object.assign({}, defaults, options);
+    options = Object.assign({}, VISUAL_STUDIO_CODE_OPTIONS, options);
     const finish = (global) => {
         // TODO
         // {

package/compiler/plugins/webTypes.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import { Context, Global } from '../../types';
+export declare const WEB_TYPES_OPTIONS: Partial<WebTypesOptions>;
 export interface WebTypesOptions {
     destination: string;
     packageName: string;

package/compiler/plugins/webTypes.js CHANGED Viewed

@@ -2,10 +2,10 @@ import { paramCase } from 'change-case';
 import fs from 'fs-extra';
 import path from 'path';
 import { getInitializer, getTags, hasTag, parseTag, print } from '../utils/index.js';
-const defaults = {};
+export const WEB_TYPES_OPTIONS = {};
 export const webTypes = (options) => {
     const name = 'webTypes';
-    options = Object.assign({}, defaults, options);
+    options = Object.assign({}, WEB_TYPES_OPTIONS, options);
     const finish = (global) => {
         var _a, _b, _c, _d, _e, _f, _g;
         const json = {

package/constants/index.d.ts CHANGED Viewed

@@ -1,12 +1,14 @@
 export declare const PACKAGE_NAME = "@htmlplus/element";
+export declare const API_ATTRIBUTES_SYNCER: unique symbol;
+export declare const API_CONNECTED: unique symbol;
 export declare const API_HOST: unique symbol;
 export declare const API_INSTANCE: unique symbol;
-export declare const API_IS_CONNECTED: unique symbol;
-export declare const API_IS_DISABLED_ATTRIBUTE_CHANGED_CALLBACK: unique symbol;
-export declare const API_IS_LOADED: unique symbol;
-export declare const API_ATTRIBUTES_SYNCER: unique symbol;
+export declare const API_LOADED: unique symbol;
+export declare const API_LOCKED: unique symbol;
 export declare const API_REQUEST: unique symbol;
 export declare const API_STACKS: unique symbol;
+export declare const COMMENT_AUTO_ADDED_DEPENDENCY = " THIS DEPENDENCY IS AUTO-ADDED, DO NOT EDIT MANUALY";
+export declare const COMMENT_AUTO_ADDED_PROPERTY = " THIS PROPERTY IS AUTO-ADDED, DO NOT EDIT MANUALY";
 export declare const DECORATOR_ELEMENT = "Element";
 export declare const DECORATOR_EVENT = "Event";
 export declare const DECORATOR_PROPERTY = "Property";
@@ -19,17 +21,16 @@ export declare const LIFECYCLE_LOADED = "loadedCallback";
 export declare const LIFECYCLE_UPDATE = "updateCallback";
 export declare const LIFECYCLE_UPDATED = "updatedCallback";
 export declare const METHOD_RENDER = "render";
-export declare const STATIC_MEMBERS = "members";
+export declare const STATIC_MEMBERS = "MEMBERS";
 export declare const STATIC_MEMBERS_INITIALIZER = "default";
 export declare const STATIC_MEMBERS_TYPE = "type";
-export declare const STATIC_STYLES = "styles";
+export declare const STATIC_STYLES = "STYLES";
+export declare const STATIC_TAG = "TAG";
+export declare const STYLE_IMPORTED = "STYLE_IMPORTED";
 export declare const TYPE_BOOLEAN = "Boolean";
 export declare const TYPE_DATE = "Date";
 export declare const TYPE_FUNCTION = "Function";
 export declare const TYPE_STRING = "String";
 export declare const TYPE_NUMBER = "Number";
-export declare const UTILS_STYLE_MAP = "styles";
-export declare const VENDOR_UHTML = "@htmlplus/element/client/vendors/uhtml.js";
-export declare const AUTO_IMPORT_STYLE = "AUTO_IMPORT_STYLE";
-export declare const COMMENT_AUTO_ADDED_DEPENDENCY = " THIS DEPENDENCY IS AUTO-ADDED, DO NOT EDIT MANUALY";
-export declare const COMMENT_AUTO_ADDED_PROPERTY = " THIS PROPERTY IS AUTO-ADDED, DO NOT EDIT MANUALY";
+export declare const UTIL_STYLE_MAPPER = "styles";
+export declare const VENDOR_UHTML_PATH = "@htmlplus/element/client/vendors/uhtml.js";

package/constants/index.js CHANGED Viewed

@@ -1,13 +1,16 @@
 export const PACKAGE_NAME = '@htmlplus/element';
 // apis
+export const API_ATTRIBUTES_SYNCER = Symbol();
+export const API_CONNECTED = Symbol();
 export const API_HOST = Symbol();
 export const API_INSTANCE = Symbol();
-export const API_IS_CONNECTED = Symbol();
-export const API_IS_DISABLED_ATTRIBUTE_CHANGED_CALLBACK = Symbol();
-export const API_IS_LOADED = Symbol();
-export const API_ATTRIBUTES_SYNCER = Symbol();
+export const API_LOADED = Symbol();
+export const API_LOCKED = Symbol();
 export const API_REQUEST = Symbol();
 export const API_STACKS = Symbol();
+// comments
+export const COMMENT_AUTO_ADDED_DEPENDENCY = ' THIS DEPENDENCY IS AUTO-ADDED, DO NOT EDIT MANUALY';
+export const COMMENT_AUTO_ADDED_PROPERTY = ' THIS PROPERTY IS AUTO-ADDED, DO NOT EDIT MANUALY';
 // decorators
 export const DECORATOR_ELEMENT = 'Element';
 export const DECORATOR_EVENT = 'Event';
@@ -24,10 +27,13 @@ export const LIFECYCLE_UPDATED = 'updatedCallback';
 // methods
 export const METHOD_RENDER = 'render';
 // statics
-export const STATIC_MEMBERS = 'members';
+export const STATIC_MEMBERS = 'MEMBERS';
 export const STATIC_MEMBERS_INITIALIZER = 'default';
 export const STATIC_MEMBERS_TYPE = 'type';
-export const STATIC_STYLES = 'styles';
+export const STATIC_STYLES = 'STYLES';
+export const STATIC_TAG = 'TAG';
+// style
+export const STYLE_IMPORTED = 'STYLE_IMPORTED';
 // types
 export const TYPE_BOOLEAN = 'Boolean';
 export const TYPE_DATE = 'Date';
@@ -35,9 +41,6 @@ export const TYPE_FUNCTION = 'Function';
 export const TYPE_STRING = 'String';
 export const TYPE_NUMBER = 'Number';
 // utils
-export const UTILS_STYLE_MAP = 'styles';
-// TODO
-export const VENDOR_UHTML = '@htmlplus/element/client/vendors/uhtml.js';
-export const AUTO_IMPORT_STYLE = 'AUTO_IMPORT_STYLE';
-export const COMMENT_AUTO_ADDED_DEPENDENCY = ' THIS DEPENDENCY IS AUTO-ADDED, DO NOT EDIT MANUALY';
-export const COMMENT_AUTO_ADDED_PROPERTY = ' THIS PROPERTY IS AUTO-ADDED, DO NOT EDIT MANUALY';
+export const UTIL_STYLE_MAPPER = 'styles';
+// vendors
+export const VENDOR_UHTML_PATH = '@htmlplus/element/client/vendors/uhtml.js';

package/package.json CHANGED Viewed

@@ -1,9 +1,9 @@
 {
   "name": "@htmlplus/element",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "license": "MIT",
   "author": "Masood Abdolian <m.abdolian@gmail.com>",
-  "description": "Compiler of HTMLPlus",
+  "description": "A powerful library for building scalable, reusable, fast, tastable and lightweight design system for any web technologies. Powerd by Web Component.",
   "type": "module",
   "main": "client/index.js",
   "types": "client/index.d.ts",
@@ -16,35 +16,40 @@
   "engines": {
     "node": ">= 12.7.0"
   },
-  "keywords": [],
+  "keywords": [
+    "components",
+    "custom elements",
+    "design systems",
+    "web components"
+  ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/htmlplus/htmlplus.git"
+    "url": "git+https://github.com/htmlplus/element.git"
   },
   "bugs": {
-    "url": "https://github.com/htmlplus/htmlplus/issues"
+    "url": "https://github.com/htmlplus/element/issues"
   },
-  "homepage": "https://github.com/htmlplus/htmlplus#readme",
+  "homepage": "https://github.com/htmlplus/element#readme",
   "dependencies": {
-    "@babel/generator": "^7.18.9",
-    "@babel/parser": "^7.18.9",
-    "@babel/traverse": "^7.18.9",
-    "@babel/types": "^7.18.9",
-    "@types/node": "^18.6.3",
+    "@babel/generator": "^7.20.3",
+    "@babel/parser": "^7.20.3",
+    "@babel/traverse": "^7.20.1",
+    "@babel/types": "^7.20.2",
+    "@types/node": "^18.11.9",
     "change-case": "^4.1.2",
-    "fast-glob": "^3.2.11",
+    "fast-glob": "^3.2.12",
     "fs-extra": "^10.1.0",
     "handlebars": "^4.7.7",
     "ora": "^6.1.2",
-    "typescript": "^4.7.4"
+    "typescript": "^4.8.4"
   },
   "devDependencies": {
-    "@trivago/prettier-plugin-sort-imports": "^3.3.0",
+    "@trivago/prettier-plugin-sort-imports": "^3.4.0",
     "cpy": "^9.0.1",
-    "nodemon": "^2.0.19",
+    "nodemon": "^2.0.20",
     "prettier": "^2.7.1",
     "rimraf": "^3.0.2",
     "ts-node": "^10.9.1",
-    "vite": "^3.0.4"
+    "vite": "^3.2.3"
   }
 }

package/client/utils/getMemberType.d.ts DELETED Viewed

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

package/client/utils/getMemberType.js DELETED Viewed

@@ -1,5 +0,0 @@
-import * as CONSTANTS from '../../constants/index.js';
-export const getMemberType = (target, key) => {
-    var _a, _b;
-    return (_b = (_a = (target.constructor[CONSTANTS.STATIC_MEMBERS] || target[CONSTANTS.STATIC_MEMBERS])) === null || _a === void 0 ? void 0 : _a[key]) === null || _b === void 0 ? void 0 : _b[CONSTANTS.STATIC_MEMBERS_TYPE];
-};

package/client/utils/getMembersKey.d.ts DELETED Viewed

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

package/client/utils/getMembersKey.js DELETED Viewed

@@ -1,4 +0,0 @@
-import * as CONSTANTS from '../../constants/index.js';
-export const getMembersKey = (target) => {
-    return Object.keys(target.constructor[CONSTANTS.STATIC_MEMBERS] || target[CONSTANTS.STATIC_MEMBERS] || {});
-};