@htmlplus/element 0.4.8 → 0.5.0

package/compiler/plugins/customElement.js

@@ -3,6 +3,7 @@ import { pascalCase } from 'change-case';
 import * as CONSTANTS from '../../constants/index.js';
 import { addDependency, print, visitor } from '../utils/index.js';
 const defaults = {
+    // prefix: undefined,
     typings: true
 };
 // TODO: support {variable && jsxElement}
@@ -96,6 +97,7 @@ export const customElement = (options) => {
                     return;
                 const node = t.classProperty(t.identifier(CONSTANTS.STATIC_MEMBERS), t.objectExpression([
                     ...context.classProperties.map((property) => {
+                        var _a, _b, _c, _d, _e, _f;
                         const properties = [];
                         if (property.value) {
                             properties.push(t.objectProperty(t.identifier(CONSTANTS.STATIC_MEMBERS_INITIALIZER), property.value));
@@ -114,6 +116,12 @@ export const customElement = (options) => {
                         if (type) {
                             properties.push(t.objectProperty(t.identifier(CONSTANTS.STATIC_MEMBERS_TYPE), type));
                         }
+                        // TODO
+                        // prettier-ignore
+                        (_f = (_e = (_d = (_c = (_b = (_a = property === null || property === void 0 ? void 0 : property.decorators) === null || _a === void 0 ? void 0 : _a.find((decorator) => {
+                            var _a, _b;
+                            return ((_b = (_a = decorator.expression) === null || _a === void 0 ? void 0 : _a['callee']) === null || _b === void 0 ? void 0 : _b.name) == CONSTANTS.DECORATOR_PROPERTY;
+                        })) === null || _b === void 0 ? void 0 : _b.expression) === null || _c === void 0 ? void 0 : _c['arguments']) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.properties) === null || _f === void 0 ? void 0 : _f.forEach((property) => properties.push(property));
                         return t.objectProperty(t.identifier(property.key['name']), t.objectExpression(properties));
                     }),
                     ...context.classMethods.map((method) => t.objectProperty(t.identifier(method.key['name']), t.objectExpression([
@@ -131,7 +139,7 @@ export const customElement = (options) => {
                     const { body } = path.node;
                     body.push(t.exportNamedDeclaration(t.tsInterfaceDeclaration(
                     // TODO
-                    t.identifier(context.componentClassName + 'JSX'), null, [], t.tsInterfaceBody([
+                    t.identifier(context.className + 'JSX'), null, [], t.tsInterfaceBody([
                         ...context.classProperties.map((property) => Object.assign(t.tSPropertySignature(property.key, property.typeAnnotation), {
                             optional: property.optional,
                             leadingComments: t.cloneNode(property, true).leadingComments
@@ -171,7 +179,7 @@ export const customElement = (options) => {
                         t.tSModuleDeclaration(t.identifier('JSX'), t.tSModuleBlock([
                             t.tSInterfaceDeclaration(t.identifier('IntrinsicElements'), undefined, undefined, t.tSInterfaceBody([
                                 t.tSPropertySignature(t.stringLiteral(context.componentTag), t.tSTypeAnnotation(t.tSIntersectionType([
-                                    t.tSTypeReference(t.identifier(context.componentClassName + 'JSX')),
+                                    t.tSTypeReference(t.identifier(context.className + 'JSX')),
                                     t.tSTypeLiteral([
                                         t.tSIndexSignature([
                                             Object.assign({}, t.identifier('key'), {

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

@@ -1,10 +1,16 @@
-import { Global } from '../../../types';
+import { Context, Global } from '../../../types';
 export interface CustomElementReactOptions {
     compact?: boolean;
     destination: string;
     eventName?: (eventName: string) => string;
-    importerComponent?: (context: any) => string;
-    importerComponentType?: (context: any) => string;
+    importerComponent: (context: Context) => {
+        source: string;
+    };
+    importerComponentType: (context: Context) => {
+        source: string;
+        imported: string;
+        local: string;
+    };
 }
 export declare const customElementReact: (options: CustomElementReactOptions) => {
     name: string;

package/compiler/plugins/customElementReact/customElementReact.js

@@ -1,18 +1,6 @@
 import { pascalCase } from 'change-case';
 import { __dirname, isDirectoryEmpty, renderTemplate } from '../../utils/index.js';
-const defaults = {
-    compact: false,
-    destination: '',
-    eventName(eventName) {
-        return eventName;
-    },
-    importerComponent(context) {
-        return `YOUR_CORE_PACKAGE_NAME#${context.componentClassName}`;
-    },
-    importerComponentType(context) {
-        return `YOUR_CORE_PACKAGE_NAME#JSX.${context.componentClassName}`;
-    }
-};
+const defaults = {};
 export const customElementReact = (options) => {
     const name = 'customElementReact';
     options = Object.assign({}, defaults, options);
@@ -25,28 +13,19 @@ export const customElementReact = (options) => {
         const config = { cwd: __dirname(import.meta.url) };
         const isEmpty = isDirectoryEmpty(options.destination);
         const skip = [];
-        const getKey = (component) => component.componentClassName;
+        const getKey = (component) => component.className;
         for (const key in globalNew.contexts) {
             const context = globalNew.contexts[key];
-            const parse = (input) => {
-                const [source, key] = input.split('#');
-                const [root, ...sub] = key.split('.');
-                const variable = ['Type', ...sub].join('.');
-                return {
-                    source,
-                    variable,
-                    root
-                };
-            };
             const classEvents = context.classEvents.map((classEvent) => {
+                var _a, _b;
                 const from = 'on' + pascalCase(classEvent.key.name);
-                const to = options.eventName(from);
+                const to = (_b = (_a = options.eventName) === null || _a === void 0 ? void 0 : _a.call(options, from)) !== null && _b !== void 0 ? _b : from;
                 return Object.assign(Object.assign({}, classEvent), { from,
                     to });
             });
             const fileName = context.fileName;
-            const importerComponent = parse(options.importerComponent(context));
-            const importerComponentType = parse(options.importerComponentType(context));
+            const importerComponent = options.importerComponent(context);
+            const importerComponentType = options.importerComponentType(context);
             const state = Object.assign(Object.assign({}, context), { classEvents,
                 fileName,
                 importerComponent,
@@ -77,26 +56,14 @@ export const customElementReact = (options) => {
                     .reverse()
                     .map((component, index) => {
                     const componentClassNameInCategory = getKey(component).replace(group.key, '');
-                    const parse = (input) => {
-                        const [source, key] = input.split('#');
-                        const [root, ...sub] = key.split('.');
-                        const local = root + (index + 1);
-                        const variable = [local, ...sub].join('.');
-                        return {
-                            source,
-                            variable,
-                            root,
-                            local
-                        };
-                    };
-                    const importerComponent = parse(options.importerComponent(component));
-                    const importerComponentType = parse(options.importerComponentType(component));
+                    const importerComponent = options.importerComponent(component);
+                    const importerComponentType = options.importerComponentType(component);
                     return Object.assign(Object.assign({}, component), { componentClassNameInCategory,
                         importerComponent,
                         importerComponentType });
                 })
                     // TODO: experimental
-                    .sort((a, b) => (b.componentClassName < a.componentClassName ? 0 : -1));
+                    .sort((a, b) => (getKey(b) < getKey(a) ? 0 : -1));
                 return {
                     all,
                     filterd: all.slice(1),

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

@@ -3,13 +3,16 @@
  **************************************************/
  
 {{#each all}}
-import { {{componentClassNamePrune}} } from './{{fileName}}';
+import { {{className}} } from './{{fileName}}';
 {{/each}}
 
-const All = Object.assign({{root.componentClassNamePrune}}, {
-  {{#each filterd}}
-  {{componentClassNameInCategory}}: {{componentClassNamePrune}},
-  {{/each}}
-});
+const All = Object.assign(
+  {{root.className}},
+  {
+    {{#each filterd}}
+    {{componentClassNameInCategory}}: {{className}},
+    {{/each}}
+  }
+);
 
-export { All as {{root.componentClassNamePrune}} }
+export { All as {{root.className}} }

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

@@ -5,17 +5,17 @@
 import { proxy } from '../proxy';
 
 import '{{importerComponent.source}}';
-import type { {{importerComponentType.root}} as Type } from '{{importerComponentType.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] }
 
-type Renamed = Rename<{{importerComponentType.variable}}, { 
+type Renamed = Rename<{{importerComponentType.local}}, { 
   {{#each classEvents}}
   {{from}}: '{{to}}',
   {{/each}}
 }>
 
-export const {{componentClassNamePrune}} = proxy<{{componentInterfaceName}}, Renamed>(
+export const {{className}} = proxy<{{componentInterfaceName}}, Renamed>(
   '{{componentTag}}', 
   [{{#each classProperties}}'{{key.name}}', {{/each}}], 
   [{{#each classEvents}}'{{key.name}}', {{/each}}],

package/compiler/plugins/document.d.ts

@@ -1,6 +1,7 @@
-import { Global } from '../../types';
+import { Context, Global } from '../../types';
 export interface DocumentOptions {
     destination: string;
+    transformer?: (context: Context, element: any) => any;
 }
 export declare const document: (options: DocumentOptions) => {
     name: string;

package/compiler/plugins/document.js

@@ -8,12 +8,13 @@ export const document = (options) => {
     const name = 'document';
     options = Object.assign({}, defaults, options);
     const finish = (global) => {
-        var _a;
+        var _a, _b, _c;
         const json = {
             components: []
         };
         for (const context of global.contexts) {
             const deprecated = hasTag(context.class, 'deprecated');
+            const description = (_a = getTags(context.class).find((tag) => !tag.key)) === null || _a === void 0 ? void 0 : _a.value;
             const events = context.classEvents.map((event) => {
                 var _a, _b, _c;
                 const cancelable = (() => {
@@ -58,7 +59,7 @@ export const document = (options) => {
                 };
             });
             const experimental = hasTag(context.class, 'experimental');
-            const group = (_a = getTag(context.class, 'group')) === null || _a === void 0 ? void 0 : _a.value;
+            const group = (_b = getTag(context.class, 'group')) === null || _b === void 0 ? void 0 : _b.value;
             const lastModified = glob
                 .sync(path.join(context.directoryPath, '**/*.*'))
                 .map((file) => fs.statSync(file).mtime)
@@ -170,26 +171,6 @@ export const document = (options) => {
                     typeReference
                 };
             });
-            const readme = (() => {
-                try {
-                    const source = path.join(context.directoryPath, `${context.fileName}.md`);
-                    return fs.readFileSync(source, 'utf8');
-                }
-                catch (_a) { }
-            })();
-            const readmeDescription = (() => {
-                const content = readme || '';
-                if (!content.startsWith('# '))
-                    return '';
-                const sections = content.split('\n');
-                for (let i = 1; i < sections.length; i++) {
-                    const section = sections[i].trim();
-                    if (!section)
-                        continue;
-                    return section;
-                }
-                return '';
-            })();
             const slots = getTags(context.class, 'slot').map((tag) => parseTag(tag));
             // TODO
             const styles = (() => {
@@ -214,31 +195,27 @@ export const document = (options) => {
                     };
                 });
             })();
-            const tag = context.componentTag;
             const tags = getTags(context.class);
             const title = capitalCase(context.componentKey);
-            json.components.push({
-                // TODO
-                // main
-                // development
-                // source
+            const component = {
                 events,
                 group,
                 deprecated,
+                description,
                 experimental,
                 key: context.componentKey,
                 lastModified,
                 methods,
                 parts,
                 properties,
-                readme,
-                readmeDescription,
+                readmeContent: context.readmeContent,
                 slots,
                 styles,
-                tag,
                 tags,
                 title
-            });
+            };
+            const transformed = ((_c = options.transformer) === null || _c === void 0 ? void 0 : _c.call(options, context, component)) || component;
+            json.components.push(transformed);
         }
         json.components = json.components.sort((a, b) => (a.title > b.title ? 1 : -1));
         const dirname = path.dirname(options.destination);

package/compiler/plugins/extract.js

@@ -56,11 +56,9 @@ export const extract = (options) => {
         context.fileExtension = path.extname(context.filePath);
         context.fileName = path.basename(context.filePath, context.fileExtension);
         context.className = (_b = (_a = context.class) === null || _a === void 0 ? void 0 : _a.id) === null || _b === void 0 ? void 0 : _b.name;
+        context.componentKey = paramCase(context.className);
         // TODO
-        context.componentClassName = pascalCase(context.componentTag);
-        context.componentClassNamePrune = pascalCase(context.componentTag.split('-').slice(1).join('-'));
-        context.componentInterfaceName = `HTML${context.componentClassName}Element`;
-        context.componentKey = paramCase(context.componentClassNamePrune);
+        context.componentInterfaceName = `HTML${pascalCase(context.componentTag)}Element`;
         context.classEvents = (context.classMembers || []).filter((member) => hasDecorator(member, CONSTANTS.DECORATOR_EVENT));
         context.classMethods = (context.classMembers || []).filter((member) => hasDecorator(member, CONSTANTS.DECORATOR_METHOD));
         context.classProperties = (context.classMembers || []).filter((member) => hasDecorator(member, CONSTANTS.DECORATOR_PROPERTY));

package/compiler/plugins/index.d.ts

@@ -6,6 +6,7 @@ export * from './document.js';
 export * from './extract.js';
 export * from './parse.js';
 export * from './read.js';
+export * from './readme.js';
 export * from './style.js';
 export * from './validate.js';
 export * from './webTypes.js';

package/compiler/plugins/index.js

@@ -6,6 +6,7 @@ export * from './document.js';
 export * from './extract.js';
 export * from './parse.js';
 export * from './read.js';
+export * from './readme.js';
 export * from './style.js';
 export * from './validate.js';
 export * from './webTypes.js';

package/compiler/plugins/parse.d.ts

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

package/compiler/plugins/parse.js

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

package/compiler/plugins/readme.d.ts

@@ -0,0 +1,8 @@
+import { Context, Global } from '../../types';
+export declare type ReadmeOptions = {
+    source?: (context: Context) => string;
+};
+export declare const readme: (options: ReadmeOptions) => {
+    name: string;
+    finish: (global: Global) => void;
+};

package/compiler/plugins/readme.js

@@ -0,0 +1,23 @@
+import fs from 'fs-extra';
+import path from 'path';
+const defaults = {
+    source(context) {
+        return path.join(context.directoryPath, `${context.fileName}.md`);
+    }
+};
+export const readme = (options) => {
+    const name = 'readme';
+    options = Object.assign({}, defaults, options);
+    const finish = (global) => {
+        var _a;
+        for (const context of global.contexts) {
+            context.readmePath = (_a = options.source) === null || _a === void 0 ? void 0 : _a.call(options, context);
+            if (!context.readmePath)
+                continue;
+            if (!fs.existsSync(context.readmePath))
+                continue;
+            context.readmeContent = fs.readFileSync(context.readmePath, 'utf8');
+        }
+    };
+    return { name, finish };
+};

package/compiler/plugins/style.d.ts

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

package/compiler/plugins/style.js

@@ -4,7 +4,7 @@ import path from 'path';
 import * as CONSTANTS from '../../constants/index.js';
 import { addDependency } from '../utils/index.js';
 const defaults = {
-    references(context) {
+    source(context) {
         return [
             path.join(context.directoryPath, `${context.fileName}.css`),
             path.join(context.directoryPath, `${context.fileName}.less`),
@@ -18,11 +18,14 @@ export const style = (options) => {
     const name = 'style';
     options = Object.assign({}, defaults, options);
     const next = (context) => {
-        const references = [options.references(context)].flat();
-        for (const reference of references) {
-            if (!fs.existsSync(reference))
+        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();
+        for (const source of sources) {
+            if (!source)
                 continue;
-            context.stylePath = reference;
+            if (!fs.existsSync(source))
+                continue;
+            context.stylePath = source;
             break;
         }
         if (!context.stylePath)

package/compiler/plugins/webTypes.d.ts

@@ -1,9 +1,10 @@
-import { Global } from '../../types';
+import { Context, Global } from '../../types';
 export interface WebTypesOptions {
     destination: string;
     packageName: string;
     packageVersion: string;
-    reference?: (componentTag: string) => string;
+    reference?: (context: Context) => string;
+    transformer?: (context: Context, component: any) => any;
 }
 export declare const webTypes: (options: WebTypesOptions) => {
     name: string;

package/compiler/plugins/webTypes.js

@@ -7,7 +7,7 @@ export const webTypes = (options) => {
     const name = 'webTypes';
     options = Object.assign({}, defaults, options);
     const finish = (global) => {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f, _g;
         const json = {
             '$schema': 'http://json.schemastore.org/web-types',
             'name': options.packageName,
@@ -24,7 +24,7 @@ export const webTypes = (options) => {
                 }
             }
         };
-        const extract = (member) => {
+        const common = (member) => {
             var _a;
             return ({
                 name: member.key['name'],
@@ -36,7 +36,7 @@ export const webTypes = (options) => {
         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), {
+                return Object.assign(common(property), {
                     name: paramCase(property.key['name']),
                     value: {
                         // kind: TODO
@@ -60,31 +60,29 @@ export const webTypes = (options) => {
                     default: getInitializer(property.value)
                 });
             });
-            const events = (_b = context.classEvents) === null || _b === void 0 ? void 0 : _b.map((event) => Object.assign({}, extract(event), {
+            const description = (_b = getTags(context.class).find((tag) => !tag.key)) === null || _b === void 0 ? void 0 : _b.value;
+            const events = (_c = context.classEvents) === null || _c === void 0 ? void 0 : _c.map((event) => Object.assign(common(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), {
+            const methods = (_d = context.classMethods) === null || _d === void 0 ? void 0 : _d.map((method) => Object.assign(common(method), {
             // 'value': TODO
             }));
-            const properties = (_d = context.classProperties) === null || _d === void 0 ? void 0 : _d.map((property) => Object.assign({}, extract(property), {
+            const properties = (_e = context.classProperties) === null || _e === void 0 ? void 0 : _e.map((property) => Object.assign(common(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
+                    name,
+                    description
                 };
             });
-            json.contributions.html.elements.push({
+            const component = {
                 'name': context.componentTag,
-                'description': 'TODO',
-                'doc-url': (_e = options.reference) === null || _e === void 0 ? void 0 : _e.call(options, context.componentTag),
+                'description': description,
+                'doc-url': (_f = options.reference) === null || _f === void 0 ? void 0 : _f.call(options, context),
                 'deprecated': hasTag(context.class, 'deprecated'),
                 'experimental': hasTag(context.class, 'experimental'),
                 'js': {
@@ -93,7 +91,9 @@ export const webTypes = (options) => {
                 },
                 attributes,
                 slots
-            });
+            };
+            const transformed = ((_g = options.transformer) === null || _g === void 0 ? void 0 : _g.call(options, context, component)) || component;
+            json.contributions.html.elements.push(transformed);
         }
         const dirname = path.dirname(options.destination);
         fs.ensureDirSync(dirname);

package/compiler/utils/tags.js

@@ -2,39 +2,28 @@ export const getTag = (node, key) => {
     return getTags(node, key).pop();
 };
 export const getTags = (node, filter) => {
-    var _a;
-    let tags = (_a = node['tags']) !== null && _a !== void 0 ? _a : [];
-    if (!node['tags']) {
-        const lines = [];
-        const comments = (node.leadingComments || [])
-            .slice(-1)
-            .map((comment) => comment.value)
-            .join('\r\n')
-            .split('\r\n');
-        for (const comment of comments) {
-            let line = comment.trimStart();
-            if (line.startsWith('*'))
-                line = line.slice(1);
-            if (!line)
-                continue;
-            const isTag = line.trim().startsWith('@');
-            if (isTag || !lines.length)
-                lines.push(line);
-            else
-                lines[lines.length - 1] += line;
+    var _a, _b, _c, _d;
+    const tags = [];
+    const lines = (_d = (_c = (_b = (_a = node.leadingComments) === null || _a === void 0 ? void 0 : _a.map((comment) => {
+        const { type, value } = comment;
+        if (type == 'CommentLine')
+            return value;
+        return value.replace(/\r\n/g, '\n').split('\n');
+    })) === null || _b === void 0 ? void 0 : _b.flat()) === null || _c === void 0 ? void 0 : _c.filter((line) => line.trim().replace(/\*/g, ''))) === null || _d === void 0 ? void 0 : _d.map((line) => line.replace(/^( +)?(\*+)?( +)?/, ''));
+    for (const line of lines || []) {
+        const has = !!tags.length;
+        const isTag = line.startsWith('@');
+        if (isTag) {
+            const [key, ...values] = line.split(' ');
+            tags.push({
+                key: key.slice(1).trim(),
+                value: values.join(' ').trimStart()
+            });
+            continue;
         }
-        for (const line of lines) {
-            let value = line.trim();
-            if (!value.startsWith('@')) {
-                tags.push({ value });
-                continue;
-            }
-            const sections = value.split(' ');
-            const key = sections[0].slice(1);
-            value = sections.slice(1).join(' ').trim();
-            tags.push({ key, value });
-        }
-        node['tags'] = tags;
+        if (!has)
+            tags.push({ key: '', value: '' });
+        tags[tags.length - 1].value += line;
     }
     return tags.filter((tag) => !filter || filter === tag.key);
 };

package/constants/index.d.ts

@@ -1,7 +1,12 @@
 export declare const PACKAGE_NAME = "@htmlplus/element";
 export declare const API_HOST: unique symbol;
 export declare const API_INSTANCE: unique symbol;
-export declare const API_STATUS: 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_REQUEST: unique symbol;
+export declare const API_STACKS: unique symbol;
 export declare const DECORATOR_ELEMENT = "Element";
 export declare const DECORATOR_EVENT = "Event";
 export declare const DECORATOR_PROPERTY = "Property";
@@ -18,11 +23,11 @@ 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";
-export declare const TYPE_FUNCTION = "function";
-export declare const TYPE_STRING = "string";
-export declare const TYPE_NUMBER = "number";
+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";