@htmlplus/element 0.4.7 → 0.4.8

package/client/decorators/attributes.js

@@ -1,13 +1,13 @@
 import * as CONSTANTS from '../../constants/index.js';
-import { appendToMethod, host, sync } from '../utils/index.js';
+import { appendToMethod, host, syncAttributes } from '../utils/index.js';
 export function Attributes() {
     return function (target, propertyKey) {
-        const updates = new Map();
+        const symbol = Symbol();
         appendToMethod(target, CONSTANTS.LIFECYCLE_CONNECTED, function () {
-            updates.set(this, sync(host(this)));
+            this[symbol] = syncAttributes(host(this));
         });
         appendToMethod(target, CONSTANTS.LIFECYCLE_UPDATED, function () {
-            updates.get(this)(this[propertyKey]);
+            this[symbol](this[propertyKey]);
         });
     };
 }

package/client/decorators/element.js

@@ -1,58 +1,50 @@
 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 * as uhtml from '../vendor/uhtml.js';
 export function Element(tag) {
     return function (constructor) {
         if (isServer())
             return;
         if (customElements.get(tag))
             return;
-        const instances = new Map();
         class Plus extends HTMLElement {
             constructor() {
                 super();
                 this.attachShadow({ mode: 'open' });
                 // TODO
-                const instance = new constructor();
-                instances.set(this, instance);
-                instance[CONSTANTS.API_HOST] = () => this;
-                instance['uhtml'] = uhtml;
-                instance[CONSTANTS.API_STATUS] = 'initialize';
+                this[CONSTANTS.API_INSTANCE] = new constructor();
+                this[CONSTANTS.API_INSTANCE][CONSTANTS.API_HOST] = () => this;
+                this[CONSTANTS.API_INSTANCE][CONSTANTS.API_STATUS] = 'initialize';
             }
+            // TODO: ignore functions
             static get observedAttributes() {
-                // TODO: ignore functions
                 return getMembersKey(constructor).map((key) => paramCase(key));
             }
             adoptedCallback() {
-                const instance = instances.get(this);
-                call(instance, CONSTANTS.LIFECYCLE_ADOPTED);
+                call(this[CONSTANTS.API_INSTANCE], CONSTANTS.LIFECYCLE_ADOPTED);
             }
             // TODO
             attributeChangedCallback(name, prev, next) {
-                const instance = instances.get(this);
                 const key = camelCase(name);
-                const type = getMemberType(instance, key);
+                const type = getMemberType(this[CONSTANTS.API_INSTANCE], key);
                 const parsed = parseValue(next, type);
-                instance[key] = parsed;
+                this[CONSTANTS.API_INSTANCE][key] = parsed;
             }
             connectedCallback() {
-                const instance = instances.get(this);
-                instance[CONSTANTS.API_STATUS] = 'connected';
-                call(instance, CONSTANTS.LIFECYCLE_CONNECTED);
-                request(instance)
+                this[CONSTANTS.API_INSTANCE][CONSTANTS.API_STATUS] = 'connected';
+                call(this[CONSTANTS.API_INSTANCE], CONSTANTS.LIFECYCLE_CONNECTED);
+                request(this[CONSTANTS.API_INSTANCE])
                     .then(() => {
-                    instance[CONSTANTS.API_STATUS] = 'loaded';
-                    call(instance, CONSTANTS.LIFECYCLE_LOADED);
+                    this[CONSTANTS.API_INSTANCE][CONSTANTS.API_STATUS] = 'loaded';
+                    call(this[CONSTANTS.API_INSTANCE], CONSTANTS.LIFECYCLE_LOADED);
                 })
                     .catch((error) => {
                     throw error;
                 });
             }
             disconnectedCallback() {
-                const instance = instances.get(this);
-                instance[CONSTANTS.API_STATUS] = 'disconnected';
-                call(instance, CONSTANTS.LIFECYCLE_DISCONNECTED);
+                this[CONSTANTS.API_INSTANCE][CONSTANTS.API_STATUS] = 'disconnected';
+                call(this[CONSTANTS.API_INSTANCE], CONSTANTS.LIFECYCLE_DISCONNECTED);
             }
         }
         customElements.define(tag, Plus);

package/client/decorators/property.js

@@ -5,16 +5,16 @@ export function Property(options) {
     return function (target, propertyKey) {
         const name = String(propertyKey);
         const attribute = paramCase(name);
+        const symbol = Symbol();
         const type = getMemberType(target, name);
-        const values = new Map();
         function get() {
-            return values.get(this);
+            return this[symbol];
         }
         function set(input) {
-            const value = values.get(this);
+            const value = this[symbol];
             if (input === value)
                 return;
-            values.set(this, input);
+            this[symbol] = input;
             const isReady = this[CONSTANTS.API_STATUS] == 'initialize';
             request(this, { [name]: [input, value] }).then(() => {
                 const element = host(this);

package/client/decorators/state.js

@@ -2,15 +2,15 @@ import { defineProperty, request } from '../utils/index.js';
 export function State() {
     return function (target, propertyKey) {
         const name = String(propertyKey);
-        const values = new Map();
+        const symbol = Symbol();
         function get() {
-            return values.get(this);
+            return this[symbol];
         }
         function set(input) {
-            const value = values.get(this);
+            const value = this[symbol];
             if (input === value)
                 return;
-            values.set(this, input);
+            this[symbol] = input;
             request(this, { [name]: [input, value] })
                 .then(() => undefined)
                 .catch((error) => {

package/client/utils/getMemberType.js

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

@@ -13,7 +13,7 @@ export * from './off.js';
 export * from './on.js';
 export * from './parseValue.js';
 export * from './request.js';
-export * from './sync.js';
+export * from './syncAttributes.js';
 export * from './task.js';
 export * from './toBoolean.js';
 export * from './toEvent.js';

package/client/utils/index.js

@@ -13,7 +13,7 @@ export * from './off.js';
 export * from './on.js';
 export * from './parseValue.js';
 export * from './request.js';
-export * from './sync.js';
+export * from './syncAttributes.js';
 export * from './task.js';
 export * from './toBoolean.js';
 export * from './toEvent.js';

package/client/utils/request.js

@@ -1,7 +1,7 @@
 import * as CONSTANTS from '../../constants/index.js';
 import { call } from '../utils/call.js';
 import { task } from '../utils/task.js';
-import { html, render } from '../vendor/uhtml.js';
+import { html, render } from '../vendors/uhtml.js';
 import { getStyles } from './getStyles.js';
 import { host } from './host.js';
 const targets = new Map();

package/client/utils/syncAttributes.d.ts

@@ -0,0 +1 @@
+export declare const syncAttributes: (node: HTMLElement) => (next?: any) => void;

package/client/utils/{sync.js → syncAttributes.js}

@@ -3,7 +3,7 @@ import { off } from './off.js';
 import { on } from './on.js';
 import { toEvent } from './toEvent.js';
 import { updateAttribute } from './updateAttribute.js';
-export const sync = (node) => {
+export const syncAttributes = (node) => {
     let prev = {};
     return (next = {}) => {
         const prevClass = (prev.class || '').split(' ');

package/client/{vendor → vendors}/uhtml.d.ts

@@ -1,3 +1,10 @@
+declare namespace _default {
+    export { Hole };
+    export { html };
+    export { render };
+    export { svg };
+}
+export default _default;
 /**
  * Holds all details wrappers needed to render the content further on.
  * @constructor

package/client/{vendor → vendors}/uhtml.js

@@ -698,3 +698,4 @@ const render = (where, what) => {
 const html = tag('html');
 const svg = tag('svg');
 export { Hole, html, render, svg };
+export default { Hole, html, render, svg };

package/compiler/plugins/copy.d.ts

@@ -0,0 +1,13 @@
+export interface CopyOptions {
+    at?: 'finish' | 'start';
+    destination: string;
+    source: string;
+    transformer?: (parameters: {
+        content: string;
+    }) => string;
+}
+export declare const copy: (options: CopyOptions) => {
+    name: string;
+    start: () => void;
+    finish: () => void;
+};

package/compiler/plugins/copy.js

@@ -0,0 +1,26 @@
+import fs from 'fs-extra';
+import path from 'path';
+const defaults = {
+    at: 'finish',
+};
+export const copy = (options) => {
+    const name = 'copy';
+    options = Object.assign({}, defaults, options);
+    const copy = (caller) => {
+        if (options.at != caller)
+            return;
+        let content;
+        content = fs.readFileSync(options.source, 'utf8');
+        if (options.transformer)
+            content = options.transformer({ content });
+        fs.ensureDirSync(path.dirname(options.destination));
+        fs.writeFileSync(options.destination, content, 'utf8');
+    };
+    const start = () => {
+        copy('start');
+    };
+    const finish = () => {
+        copy('finish');
+    };
+    return { name, start, finish };
+};

package/compiler/plugins/customElement.js

@@ -21,20 +21,15 @@ 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.UTILS_STYLE_MAP, CONSTANTS.UTILS_STYLE_MAP);
+                // TODO: remove 'local!'
                 path.replaceWith(t.jsxAttribute(t.jsxIdentifier('style'), t.jsxExpressionContainer(t.callExpression(t.identifier(local), [value.expression]))));
                 path.skip();
             }
         });
         // TODO
-        visitor(ast, {
-            ClassDeclaration(path) {
-                const { body, id } = path.node;
-                if (id.name != context.className)
-                    return;
-                body.body.unshift(t.classProperty(t.identifier('uhtml')));
-            }
-        });
+        const { node } = addDependency(ast, CONSTANTS.VENDOR_UHTML, 'uhtml');
+        t.addComment(node, 'leading', CONSTANTS.COMMENT_AUTO_ADDED_DEPENDENCY, true);
         // replace 'className' attribute to 'class'
         visitor(ast, {
             JSXAttribute(path) {
@@ -67,17 +62,15 @@ export const customElement = (options) => {
                 exit(path) {
                     if (path.parent.type == 'JSXElement' || path.parent.type == 'JSXFragment') {
                         path.replaceWith(t.identifier(print(path.node)));
-                        return;
                     }
                     else {
-                        path.replaceWith(t.memberExpression(t.memberExpression(t.thisExpression(), t.identifier('uhtml')), t.identifier(`html\`${print(path.node)}\``)));
-                        return;
+                        path.replaceWith(t.memberExpression(t.identifier('uhtml'), t.identifier(`html\`${print(path.node)}\``)));
                     }
                 }
             },
             JSXFragment: {
                 exit(path) {
-                    path.replaceWith(t.memberExpression(t.memberExpression(t.thisExpression(), t.identifier('uhtml')), t.identifier(['html`', ...path.node.children.map((child) => print(child)), '`'].join(''))));
+                    path.replaceWith(t.memberExpression(t.identifier('uhtml'), t.identifier(['html`', ...path.node.children.map((child) => print(child)), '`'].join(''))));
                 }
             },
             JSXExpressionContainer: {
@@ -101,34 +94,34 @@ export const customElement = (options) => {
                 const { body, id } = path.node;
                 if (id.name != context.className)
                     return;
-                body.body.unshift(t.classProperty(t.identifier(CONSTANTS.STATIC_MEMBERS), t.objectExpression([
+                const node = t.classProperty(t.identifier(CONSTANTS.STATIC_MEMBERS), t.objectExpression([
                     ...context.classProperties.map((property) => {
-                        var _a, _b;
-                        const type = (_b = (_a = property.typeAnnotation) === null || _a === void 0 ? void 0 : _a.typeAnnotation) === null || _b === void 0 ? void 0 : _b.type;
-                        const elements = [];
-                        switch (type) {
-                            case 'TSBooleanKeyword':
-                                elements.push(t.stringLiteral(CONSTANTS.TYPE_BOOLEAN));
-                                break;
-                            case 'TSStringKeyword':
-                                elements.push(t.stringLiteral(CONSTANTS.TYPE_STRING));
-                                break;
-                            case 'TSNumberKeyword':
-                                elements.push(t.stringLiteral(CONSTANTS.TYPE_NUMBER));
-                                break;
-                            default:
-                                elements.push(t.nullLiteral());
-                                break;
+                        const properties = [];
+                        if (property.value) {
+                            properties.push(t.objectProperty(t.identifier(CONSTANTS.STATIC_MEMBERS_INITIALIZER), property.value));
+                        }
+                        const type = (() => {
+                            var _a, _b;
+                            switch ((_b = (_a = property.typeAnnotation) === null || _a === void 0 ? void 0 : _a.typeAnnotation) === null || _b === void 0 ? void 0 : _b.type) {
+                                case 'TSBooleanKeyword':
+                                    return t.stringLiteral(CONSTANTS.TYPE_BOOLEAN);
+                                case 'TSStringKeyword':
+                                    return t.stringLiteral(CONSTANTS.TYPE_STRING);
+                                case 'TSNumberKeyword':
+                                    return t.stringLiteral(CONSTANTS.TYPE_NUMBER);
+                            }
+                        })();
+                        if (type) {
+                            properties.push(t.objectProperty(t.identifier(CONSTANTS.STATIC_MEMBERS_TYPE), type));
                         }
-                        if (property.value)
-                            elements.push(property.value);
-                        return t.objectProperty(t.identifier(property.key['name']), t.arrayExpression(elements));
+                        return t.objectProperty(t.identifier(property.key['name']), t.objectExpression(properties));
                     }),
-                    ...context.classMethods.map((method) => {
-                        const elements = [t.stringLiteral(CONSTANTS.TYPE_FUNCTION)];
-                        return t.objectProperty(t.identifier(method.key['name']), t.arrayExpression(elements));
-                    })
-                ]), undefined, undefined, undefined, true));
+                    ...context.classMethods.map((method) => t.objectProperty(t.identifier(method.key['name']), t.objectExpression([
+                        t.objectProperty(t.identifier(CONSTANTS.STATIC_MEMBERS_TYPE), t.stringLiteral(CONSTANTS.TYPE_FUNCTION))
+                    ])))
+                ]), undefined, undefined, undefined, true);
+                t.addComment(node, 'leading', CONSTANTS.COMMENT_AUTO_ADDED_PROPERTY, true);
+                body.body.unshift(node);
             }
         });
         // attach typings

package/compiler/plugins/document.js

@@ -13,9 +13,10 @@ export const document = (options) => {
             components: []
         };
         for (const context of global.contexts) {
+            const deprecated = hasTag(context.class, 'deprecated');
             const events = context.classEvents.map((event) => {
                 var _a, _b, _c;
-                const isCancelable = (() => {
+                const cancelable = (() => {
                     if (!event.decorators)
                         return false;
                     try {
@@ -36,27 +37,28 @@ export const document = (options) => {
                     catch (_a) { }
                     return false;
                 })();
+                const deprecated = hasTag(event, 'deprecated');
                 const description = (_a = getTags(event).find((tag) => !tag.key)) === null || _a === void 0 ? void 0 : _a.value;
                 const detail = print((_b = event.typeAnnotation) === null || _b === void 0 ? void 0 : _b['typeAnnotation']);
                 const detailReference = getTypeReference(context.fileAST, (_c = event.typeAnnotation) === null || _c === void 0 ? void 0 : _c['typeAnnotation'].typeParameters.params[0]);
-                const isExperimental = hasTag(event, 'experimental');
-                const isModel = hasTag(event, 'model');
+                const experimental = hasTag(event, 'experimental');
+                const model = hasTag(event, 'model');
                 const name = event.key['name'];
                 const tags = getTags(event);
                 return {
+                    cancelable,
+                    deprecated,
                     description,
                     detail,
                     detailReference,
-                    isCancelable,
-                    isExperimental,
-                    isModel,
+                    experimental,
+                    model,
                     name,
                     tags
                 };
             });
+            const experimental = hasTag(context.class, 'experimental');
             const group = (_a = getTag(context.class, 'group')) === null || _a === void 0 ? void 0 : _a.value;
-            const isDeprecated = hasTag(context.class, 'deprecated');
-            const isExperimental = hasTag(context.class, 'experimental');
             const lastModified = glob
                 .sync(path.join(context.directoryPath, '**/*.*'))
                 .map((file) => fs.statSync(file).mtime)
@@ -64,14 +66,11 @@ export const document = (options) => {
                 .pop();
             const methods = context.classMethods.map((method) => {
                 var _a, _b, _c;
+                const async = method.async;
                 const description = (_a = getTags(method).find((tag) => !tag.key)) === null || _a === void 0 ? void 0 : _a.value;
-                const isAsync = method.async;
-                const isDeprecated = hasTag(method, 'deprecated');
-                const isExperimental = hasTag(method, 'experimental');
+                const deprecated = hasTag(method, 'deprecated');
+                const experimental = hasTag(method, 'experimental');
                 const name = method.key['name'];
-                const returns = print((_b = method.returnType) === null || _b === void 0 ? void 0 : _b['typeAnnotation']) || 'void';
-                const returnsReference = getTypeReference(context.fileAST, (_c = method.returnType) === null || _c === void 0 ? void 0 : _c['typeAnnotation']);
-                const tags = getTags(method);
                 // TODO
                 const parameters = method.params.map((param) => {
                     var _a, _b, _c;
@@ -79,12 +78,15 @@ export const document = (options) => {
                         description: (_a = getTags(method, 'param')
                             .map((tag) => parseTag(tag, ' '))
                             .find((tag) => tag.name == param['name'])) === null || _a === void 0 ? void 0 : _a.description,
-                        isOptional: !!param['optional'],
+                        required: !param['optional'],
                         name: param['name'],
                         type: print((_b = param === null || param === void 0 ? void 0 : param['typeAnnotation']) === null || _b === void 0 ? void 0 : _b.typeAnnotation) || undefined,
                         typeReference: getTypeReference(context.fileAST, (_c = param === null || param === void 0 ? void 0 : param['typeAnnotation']) === null || _c === void 0 ? void 0 : _c.typeAnnotation)
                     });
                 });
+                const returns = print((_b = method.returnType) === null || _b === void 0 ? void 0 : _b['typeAnnotation']) || 'void';
+                const returnsReference = getTypeReference(context.fileAST, (_c = method.returnType) === null || _c === void 0 ? void 0 : _c['typeAnnotation']);
+                const tags = getTags(method);
                 const signature = [
                     method.key['name'],
                     '(',
@@ -93,7 +95,7 @@ export const document = (options) => {
                         var _a;
                         let string = '';
                         string += parameter.name;
-                        string += parameter.isOptional ? '?' : '';
+                        string += parameter.required ? '' : '?';
                         string += parameter.type ? ': ' : '';
                         string += (_a = parameter.type) !== null && _a !== void 0 ? _a : '';
                         return string;
@@ -104,15 +106,15 @@ export const document = (options) => {
                     returns
                 ].join('');
                 return {
+                    async,
                     description,
-                    isAsync,
-                    isDeprecated,
-                    isExperimental,
+                    deprecated,
+                    experimental,
                     name,
+                    parameters,
                     returns,
                     returnsReference,
                     tags,
-                    parameters,
                     signature
                 };
             });
@@ -120,9 +122,15 @@ export const document = (options) => {
             const properties = context.classProperties.map((property) => {
                 var _a, _b, _c;
                 const attribute = paramCase(property.key['name']);
+                const deprecated = hasTag(property, 'deprecated');
                 const description = (_a = getTags(property).find((tag) => !tag.key)) === null || _a === void 0 ? void 0 : _a.value;
+                const experimental = hasTag(property, 'experimental');
+                // TODO
+                const initializer = getInitializer(property.value);
+                const model = hasTag(property, 'model');
+                const name = property.key['name'];
                 // TODO
-                const hasReflect = (() => {
+                const reflects = (() => {
                     if (!property.decorators)
                         return false;
                     try {
@@ -143,26 +151,20 @@ export const document = (options) => {
                     catch (_a) { }
                     return false;
                 })();
-                // TODO
-                const initializer = getInitializer(property.value);
-                const isDeprecated = hasTag(property, 'deprecated');
-                const isExperimental = hasTag(property, 'experimental');
-                const isModel = hasTag(property, 'model');
-                const isRequired = !property.optional;
-                const name = property.key['name'];
+                const required = !property.optional;
                 const tags = getTags(property);
                 const type = print((_b = property.typeAnnotation) === null || _b === void 0 ? void 0 : _b['typeAnnotation']);
                 const typeReference = getTypeReference(context.fileAST, (_c = property.typeAnnotation) === null || _c === void 0 ? void 0 : _c['typeAnnotation']);
                 return {
                     attribute,
+                    deprecated,
                     description,
-                    hasReflect,
+                    experimental,
                     initializer,
-                    isDeprecated,
-                    isExperimental,
-                    isModel,
-                    isRequired,
+                    model,
                     name,
+                    reflects,
+                    required,
                     tags,
                     type,
                     typeReference
@@ -222,8 +224,8 @@ export const document = (options) => {
                 // source
                 events,
                 group,
-                isDeprecated,
-                isExperimental,
+                deprecated,
+                experimental,
                 key: context.componentKey,
                 lastModified,
                 methods,

package/compiler/plugins/index.d.ts

@@ -1,12 +1,11 @@
 export * from './assets.js';
+export * from './copy.js';
 export * from './customElementReact/index.js';
 export * from './customElement.js';
 export * from './document.js';
 export * from './extract.js';
-export * from './finish.js';
 export * from './parse.js';
 export * from './read.js';
-export * from './start.js';
 export * from './style.js';
 export * from './validate.js';
 export * from './webTypes.js';

package/compiler/plugins/index.js

@@ -1,12 +1,11 @@
 export * from './assets.js';
+export * from './copy.js';
 export * from './customElementReact/index.js';
 export * from './customElement.js';
 export * from './document.js';
 export * from './extract.js';
-export * from './finish.js';
 export * from './parse.js';
 export * from './read.js';
-export * from './start.js';
 export * from './style.js';
 export * from './validate.js';
 export * from './webTypes.js';

package/compiler/plugins/style.d.ts

@@ -1,6 +1,6 @@
 import { Context } from '../../types';
 export declare type StyleOptions = {
-    references?: (context: Context) => string[];
+    references?: (context: Context) => string | string[];
 };
 export declare const style: (options: StyleOptions) => {
     name: string;

package/compiler/plugins/style.js

@@ -18,16 +18,20 @@ export const style = (options) => {
     const name = 'style';
     options = Object.assign({}, defaults, options);
     const next = (context) => {
-        const references = options.references(context);
+        const references = [options.references(context)].flat();
         for (const reference of references) {
             if (!fs.existsSync(reference))
                 continue;
             context.stylePath = reference;
+            break;
         }
         if (!context.stylePath)
             return;
-        const local = addDependency(context.fileAST, context.stylePath, 'AUTO_IMPORT_STYLE');
+        const { local, node } = addDependency(context.fileAST, context.stylePath, CONSTANTS.AUTO_IMPORT_STYLE);
+        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);
+        t.addComment(property, 'leading', CONSTANTS.COMMENT_AUTO_ADDED_PROPERTY, true);
         context.class.body.body.unshift(property);
     };
     return { name, next };

package/compiler/plugins/webTypes.d.ts

@@ -3,7 +3,7 @@ export interface WebTypesOptions {
     destination: string;
     packageName: string;
     packageVersion: string;
-    docUrl: () => string;
+    reference?: (componentTag: string) => string;
 }
 export declare const webTypes: (options: WebTypesOptions) => {
     name: string;

package/compiler/plugins/webTypes.js

@@ -1,12 +1,13 @@
-import { camelCase, paramCase } from 'change-case';
+import { paramCase } from 'change-case';
 import fs from 'fs-extra';
 import path from 'path';
-import { getTags, print } from '../utils/index.js';
+import { getInitializer, getTags, hasTag, parseTag, print } from '../utils/index.js';
 const defaults = {};
 export const webTypes = (options) => {
     const name = 'webTypes';
     options = Object.assign({}, defaults, options);
     const finish = (global) => {
+        var _a, _b, _c, _d, _e;
         const json = {
             '$schema': 'http://json.schemastore.org/web-types',
             'name': options.packageName,
@@ -19,58 +20,81 @@ export const webTypes = (options) => {
             },
             'contributions': {
                 html: {
-                    elements: global.contexts
-                        .sort((a, b) => ((a.componentTag || '') > (b.componentTag || '') ? 1 : -1))
-                        .map((context) => {
-                        var _a, _b;
-                        return ({
-                            'name': context.componentTag,
-                            'description': '',
-                            'doc-url': options.docUrl(),
-                            'js': {
-                                properties: [
-                                    ...(context.classProperties || []).map((property) => {
-                                        var _a, _b;
-                                        return ({
-                                            name: camelCase(property.key['name']),
-                                            description: (_a = getTags(property).find((tag) => !tag.key)) === null || _a === void 0 ? void 0 : _a.value,
-                                            value: {
-                                                type: print((_b = property.typeAnnotation) === null || _b === void 0 ? void 0 : _b['typeAnnotation'])
-                                            }
-                                        });
-                                    }),
-                                    ...(context.classMethods || []).map((method) => {
-                                        var _a;
-                                        return ({
-                                            name: camelCase(method.key['name']),
-                                            description: (_a = getTags(method).find((tag) => !tag.key)) === null || _a === void 0 ? void 0 : _a.value,
-                                            value: {}
-                                        });
-                                    })
-                                ],
-                                events: (_a = context.classEvents) === null || _a === void 0 ? void 0 : _a.map((event) => {
-                                    var _a;
-                                    return ({
-                                        name: paramCase(event.key['name']),
-                                        description: (_a = getTags(event).find((tag) => !tag.key)) === null || _a === void 0 ? void 0 : _a.value
-                                    });
-                                })
-                            },
-                            'attributes': (_b = context.classProperties) === null || _b === void 0 ? void 0 : _b.map((property) => {
-                                var _a, _b;
-                                return ({
-                                    name: paramCase(property.key['name']),
-                                    description: (_a = getTags(property).find((tag) => !tag.key)) === null || _a === void 0 ? void 0 : _a.value,
-                                    value: {
-                                        type: print((_b = property.typeAnnotation) === null || _b === void 0 ? void 0 : _b['typeAnnotation'])
-                                    }
-                                });
-                            })
-                        });
-                    })
+                    elements: []
                 }
             }
         };
+        const extract = (member) => {
+            var _a;
+            return ({
+                name: member.key['name'],
+                description: (_a = getTags(member).find((tag) => !tag.key)) === null || _a === void 0 ? void 0 : _a.value,
+                deprecated: hasTag(member, 'deprecated'),
+                experimental: hasTag(member, 'experimental')
+            });
+        };
+        for (const context of global.contexts) {
+            const attributes = (_a = context.classProperties) === null || _a === void 0 ? void 0 : _a.map((property) => {
+                var _a;
+                return Object.assign({}, extract(property), {
+                    name: paramCase(property.key['name']),
+                    value: {
+                        // kind: TODO
+                        /**
+                         * For Example
+                         * 01) type: "''"
+                         * 02) type: "null"
+                         * 03) type: "undefined"
+                         * 04) type: "boolean"
+                         * 05) type: "string"
+                         * 06) type: "number"
+                         * 07) type: "boolean | string | number"
+                         * 08) type: "string[]"
+                         * 09) type: "1 | 2 | 3"
+                         * 10) type: "'Value-1' | 'Value-2'"
+                         */
+                        type: print((_a = property.typeAnnotation) === null || _a === void 0 ? void 0 : _a['typeAnnotation'])
+                        // required: TODO
+                        // default: TODO
+                    },
+                    default: getInitializer(property.value)
+                });
+            });
+            const events = (_b = context.classEvents) === null || _b === void 0 ? void 0 : _b.map((event) => Object.assign({}, extract(event), {
+                name: paramCase(event.key['name']) // TODO
+                // 'value': TODO
+            }));
+            const methods = (_c = context.classMethods) === null || _c === void 0 ? void 0 : _c.map((method) => Object.assign({}, extract(method), {
+            // 'value': TODO
+            }));
+            const properties = (_d = context.classProperties) === null || _d === void 0 ? void 0 : _d.map((property) => Object.assign({}, extract(property), {
+                // 'value': TODO
+                default: getInitializer(property.value)
+            }));
+            const slots = getTags(context.class, 'slot').map((tag) => {
+                const { description, name } = parseTag(tag);
+                return {
+                    'name': name,
+                    'description': description,
+                    'doc-url': undefined,
+                    'deprecated': false,
+                    'experimental': false
+                };
+            });
+            json.contributions.html.elements.push({
+                'name': context.componentTag,
+                'description': 'TODO',
+                'doc-url': (_e = options.reference) === null || _e === void 0 ? void 0 : _e.call(options, context.componentTag),
+                'deprecated': hasTag(context.class, 'deprecated'),
+                'experimental': hasTag(context.class, 'experimental'),
+                'js': {
+                    events,
+                    properties: [].concat(properties, methods)
+                },
+                attributes,
+                slots
+            });
+        }
         const dirname = path.dirname(options.destination);
         fs.ensureDirSync(dirname);
         fs.writeJSONSync(options.destination, json, { encoding: 'utf8', spaces: 2 });

package/compiler/utils/addDependency.d.ts

@@ -1,4 +1,9 @@
-import { File } from '@babel/types';
-export declare function addDependency(path: File | any, source: string): void;
-export declare function addDependency(path: File | any, source: string, local: string): string;
-export declare function addDependency(path: File | any, source: string, local: string, imported: string): string;
+import { File, ImportDeclaration } from '@babel/types';
+interface AddDependencyReturns {
+    local?: string;
+    node: ImportDeclaration;
+}
+export declare function addDependency(path: File | any, source: string): AddDependencyReturns;
+export declare function addDependency(path: File | any, source: string, local: string): AddDependencyReturns;
+export declare function addDependency(path: File | any, source: string, local: string, imported: string): AddDependencyReturns;
+export {};

package/compiler/utils/addDependency.js

@@ -17,7 +17,9 @@ export function addDependency(path, source, local, imported) {
         }
     });
     if (isNormal && declaration)
-        return;
+        return {
+            node: declaration
+        };
     let specifier = declaration === null || declaration === void 0 ? void 0 : declaration.specifiers.find((specifier) => {
         var _a;
         if (isDefault) {
@@ -28,7 +30,10 @@ export function addDependency(path, source, local, imported) {
         }
     });
     if (specifier)
-        return specifier.local.name;
+        return {
+            local: specifier.local.name,
+            node: declaration
+        };
     if (isDefault) {
         specifier = t.importDefaultSpecifier(t.identifier(local));
     }
@@ -44,8 +49,12 @@ export function addDependency(path, source, local, imported) {
         }
     }
     else {
+        declaration = t.importDeclaration(specifier ? [specifier] : [], t.stringLiteral(source));
         // TODO
-        (file.program || file).body.unshift(t.importDeclaration(specifier ? [specifier] : [], t.stringLiteral(source)));
+        (file.program || file).body.unshift(declaration);
     }
-    return local;
+    return {
+        local,
+        node: declaration
+    };
 }

package/compiler/utils/getInitializer.d.ts

@@ -1,2 +1,2 @@
 import { Expression } from '@babel/types';
-export declare const getInitializer: (node: Expression) => any;
+export declare const getInitializer: (node: Expression) => string | undefined;

package/compiler/utils/getInitializer.js

@@ -1,10 +1,4 @@
-// TODO: return type
 export const getInitializer = (node) => {
-    if (!node)
-        return node;
-    const value = node;
-    if (!value)
-        return;
-    const extra = value.extra || {};
-    return extra.raw || value['value'];
+    var _a;
+    return ((_a = node === null || node === void 0 ? void 0 : node.extra) === null || _a === void 0 ? void 0 : _a.raw) || (node === null || node === void 0 ? void 0 : node['value']);
 };

package/constants/index.d.ts

@@ -1,6 +1,7 @@
 export declare const PACKAGE_NAME = "@htmlplus/element";
-export declare const API_HOST = "$host$";
-export declare const API_STATUS = "$status$";
+export declare const API_HOST: unique symbol;
+export declare const API_INSTANCE: unique symbol;
+export declare const API_STATUS: unique symbol;
 export declare const DECORATOR_ELEMENT = "Element";
 export declare const DECORATOR_EVENT = "Event";
 export declare const DECORATOR_PROPERTY = "Property";
@@ -14,6 +15,8 @@ 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_INITIALIZER = "default";
+export declare const STATIC_MEMBERS_TYPE = "type";
 export declare const STATIC_STYLES = "styles";
 export declare const TYPE_BOOLEAN = "boolean";
 export declare const TYPE_DATE = "date";
@@ -21,3 +24,7 @@ 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";

package/constants/index.js

@@ -1,8 +1,9 @@
 export const PACKAGE_NAME = '@htmlplus/element';
 // apis
-export const API_HOST = '$host$';
+export const API_HOST = Symbol();
+export const API_INSTANCE = Symbol();
 // TODO
-export const API_STATUS = '$status$';
+export const API_STATUS = Symbol();
 // decorators
 export const DECORATOR_ELEMENT = 'Element';
 export const DECORATOR_EVENT = 'Event';
@@ -20,6 +21,8 @@ export const LIFECYCLE_UPDATED = 'updatedCallback';
 export const METHOD_RENDER = 'render';
 // statics
 export const STATIC_MEMBERS = 'members';
+export const STATIC_MEMBERS_INITIALIZER = 'default';
+export const STATIC_MEMBERS_TYPE = 'type';
 export const STATIC_STYLES = 'styles';
 // types
 export const TYPE_BOOLEAN = 'boolean';
@@ -29,3 +32,8 @@ 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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@htmlplus/element",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "license": "MIT",
   "author": "Masood Abdolian <m.abdolian@gmail.com>",
   "description": "Compiler of HTMLPlus",

package/client/utils/sync.d.ts

@@ -1 +0,0 @@
-export declare const sync: (node: HTMLElement) => (next?: any) => void;

package/compiler/plugins/finish.d.ts

@@ -1,4 +0,0 @@
-export declare const finish: (callback: () => void) => {
-    name: string;
-    finish: () => void;
-};

package/compiler/plugins/finish.js

@@ -1,7 +0,0 @@
-export const finish = (callback) => {
-    const name = 'finish';
-    const finish = () => {
-        callback();
-    };
-    return { name, finish };
-};

package/compiler/plugins/start.d.ts

@@ -1,4 +0,0 @@
-export declare const start: (callback: () => void) => {
-    name: string;
-    start: () => void;
-};

package/compiler/plugins/start.js

@@ -1,7 +0,0 @@
-export const start = (callback) => {
-    const name = 'start';
-    const start = () => {
-        callback();
-    };
-    return { name, start };
-};