@htmlplus/element 0.6.9 → 0.7.1

package/client/decorators/element.d.ts

@@ -1,2 +1,2 @@
 import { PlusElement } from '../../types';
-export declare function Element(tag?: string): (constructor: PlusElement) => void;
+export declare function Element(): (constructor: PlusElement) => void;

package/client/decorators/element.js

@@ -1,10 +1,11 @@
 import { camelCase, paramCase } from 'change-case';
 import * as CONSTANTS from '../../constants/index.js';
 import { call, fromAttribute, getConfig, getMembers, getTag, isServer, request } from '../utils/index.js';
-export function Element(tag) {
+export function Element() {
     return function (constructor) {
         if (isServer())
             return;
+        const tag = getTag(constructor);
         if (customElements.get(tag))
             return;
         const members = getMembers(constructor);

package/client/decorators/property.js

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

package/client/utils/request.d.ts

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

package/compiler/plugins/customElement.d.ts

@@ -1,6 +1,7 @@
 import { Plugin } from '../../types';
 export declare const CUSTOM_ELEMENT_OPTIONS: Partial<CustomElementOptions>;
 export interface CustomElementOptions {
+    prefix?: string;
     typings?: boolean;
 }
 export declare const customElement: (options?: CustomElementOptions) => Plugin;

package/compiler/plugins/customElement.js

@@ -3,7 +3,7 @@ import { pascalCase } from 'change-case';
 import * as CONSTANTS from '../../constants/index.js';
 import { addDependency, getType, print, visitor } from '../utils/index.js';
 export const CUSTOM_ELEMENT_OPTIONS = {
-    // prefix: undefined,
+    prefix: undefined,
     typings: true
 };
 // TODO: support {variable && jsxElement}
@@ -12,13 +12,16 @@ export const customElement = (options) => {
     options = Object.assign({}, CUSTOM_ELEMENT_OPTIONS, options);
     const run = (context) => {
         const ast = t.cloneNode(context.fileAST, true);
+        // TODO
+        const tag = ((options === null || options === void 0 ? void 0 : options.prefix) || '') + context.componentKey;
+        const componentInterfaceName = `HTML${pascalCase(tag)}Element`;
         // 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);
+                const node = t.classProperty(t.identifier(CONSTANTS.STATIC_TAG), t.stringLiteral(tag), undefined, undefined, undefined, true);
                 t.addComment(node, 'leading', CONSTANTS.COMMENT_AUTO_ADDED_PROPERTY, true);
                 body.body.unshift(node);
             }
@@ -51,6 +54,15 @@ export const customElement = (options) => {
                 path.replaceWith(t.jsxAttribute(t.jsxIdentifier('class'), value));
             }
         });
+        // replaces 'tabIndex' attribute with 'tabindex'
+        visitor(ast, {
+            JSXAttribute(path) {
+                const { name, value } = path.node;
+                if (name.name != 'tabIndex')
+                    return;
+                path.replaceWith(t.jsxAttribute(t.jsxIdentifier('tabindex'), value));
+            }
+        });
         // converts 'jsx' to 'uhtml' syntax
         visitor(ast, {
             JSXAttribute: {
@@ -220,7 +232,7 @@ export const customElement = (options) => {
                         })
                     ]))));
                     body.push(Object.assign(t.tsModuleDeclaration(t.identifier('global'), t.tsModuleBlock([
-                        t.tsInterfaceDeclaration(t.identifier(context.componentInterfaceName), null, [
+                        t.tsInterfaceDeclaration(t.identifier(componentInterfaceName), null, [
                             t.tSExpressionWithTypeArguments(t.identifier('HTMLElement')) // TODO
                         ], t.tsInterfaceBody([
                             ...context.classProperties.map((property) => Object.assign(t.tSPropertySignature(property.key, property.typeAnnotation), {
@@ -229,19 +241,19 @@ export const customElement = (options) => {
                             }))
                         ])),
                         t.variableDeclaration('var', [
-                            t.variableDeclarator(Object.assign(t.identifier(context.componentInterfaceName), {
+                            t.variableDeclarator(Object.assign(t.identifier(componentInterfaceName), {
                                 typeAnnotation: t.tSTypeAnnotation(t.tSTypeLiteral([
-                                    t.tSPropertySignature(t.identifier('prototype'), t.tsTypeAnnotation(t.tSTypeReference(t.identifier(context.componentInterfaceName)))),
-                                    t.tSConstructSignatureDeclaration(null, [], t.tSTypeAnnotation(t.tSTypeReference(t.identifier(context.componentInterfaceName))))
+                                    t.tSPropertySignature(t.identifier('prototype'), t.tsTypeAnnotation(t.tSTypeReference(t.identifier(componentInterfaceName)))),
+                                    t.tSConstructSignatureDeclaration(null, [], t.tSTypeAnnotation(t.tSTypeReference(t.identifier(componentInterfaceName))))
                                 ]))
                             }))
                         ]),
                         t.tsInterfaceDeclaration(t.identifier('HTMLElementTagNameMap'), null, [], t.tsInterfaceBody([
-                            t.tSPropertySignature(t.stringLiteral(context.componentTag), t.tSTypeAnnotation(t.tSIntersectionType([t.tSTypeReference(t.identifier(context.componentInterfaceName))])))
+                            t.tSPropertySignature(t.stringLiteral(tag), t.tSTypeAnnotation(t.tSIntersectionType([t.tSTypeReference(t.identifier(componentInterfaceName))])))
                         ])),
                         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.tSPropertySignature(t.stringLiteral(tag), t.tSTypeAnnotation(t.tSIntersectionType([
                                     t.tSTypeReference(t.identifier(context.className + 'JSX')),
                                     t.tSTypeLiteral([
                                         t.tSIndexSignature([
@@ -257,6 +269,7 @@ export const customElement = (options) => {
                         declare: true,
                         global: true
                     }));
+                    body.push(t.exportNamedDeclaration(t.tsTypeAliasDeclaration(t.identifier(`${context.className}Element`), undefined, t.tsTypeReference(t.tsQualifiedName(t.identifier('globalThis'), t.identifier(componentInterfaceName))))));
                 }
             });
         }

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

@@ -1,8 +1,8 @@
 /**************************************************
  * THIS FILE IS AUTO-GENERATED, DO NOT EDIT MANUALY
  **************************************************/
-import '{{importerComponent.source}}';
-import type { {{importerComponentType.imported}} as {{importerComponentType.local}} } from '{{importerComponentType.source}}';
+import { {{className}} as {{className}}Core } from '{{importerComponent.source}}';
+import type { {{className}}Element, {{importerComponentType.imported}} as {{importerComponentType.local}} } from '{{importerComponentType.source}}';
 
 import { proxy } from '../proxy';
 import type { Rename } from '../proxy';
@@ -16,8 +16,8 @@ type Renamed = Rename<
   }
 >;
 
-export const {{className}} = proxy<{{componentInterfaceName}}, Renamed>(
-  '{{componentTag}}', 
+export const {{className}} = proxy<{{className}}Element, Renamed>(
+  {{className}}Core.TAG, 
   [{{#each classProperties}}'{{key.name}}', {{/each}}], 
   [{{#each classEvents}}'{{key.name}}', {{/each}}],
 );

package/compiler/plugins/extract.d.ts

@@ -1,6 +1,2 @@
 import { Plugin } from '../../types';
-export declare const EXTRACT_OPTIONS: Partial<ExtractOptions>;
-export interface ExtractOptions {
-    prefix?: string;
-}
-export declare const extract: (options?: ExtractOptions) => Plugin;
+export declare const extract: () => Plugin;

package/compiler/plugins/extract.js

@@ -1,12 +1,10 @@
 import * as t from '@babel/types';
-import { pascalCase, paramCase } from 'change-case';
+import { paramCase } from 'change-case';
 import path from 'path';
 import * as CONSTANTS from '../../constants/index.js';
 import { hasDecorator, visitor } from '../utils/index.js';
-export const EXTRACT_OPTIONS = {};
-export const extract = (options) => {
+export const extract = () => {
     const name = 'extract';
-    options = Object.assign({}, EXTRACT_OPTIONS, options);
     const run = (context) => {
         var _a, _b;
         visitor(context.fileAST, {
@@ -22,26 +20,6 @@ export const extract = (options) => {
                     path.skip();
                 }
             },
-            Decorator(path) {
-                var _a;
-                const name = (_a = path.node.expression.callee) === null || _a === void 0 ? void 0 : _a.name;
-                // TODO
-                if (CONSTANTS.DECORATOR_ELEMENT == name) {
-                    const [argument] = path.node.expression.arguments;
-                    if (argument) {
-                        context.componentTag = argument === null || argument === void 0 ? void 0 : argument.value;
-                        return;
-                    }
-                    context.componentTag = paramCase(path.parent.id.name);
-                    if (options === null || options === void 0 ? void 0 : options.prefix)
-                        context.componentTag = options.prefix + '-' + context.componentTag;
-                    path.replaceWith(t.decorator(t.callExpression(t.identifier(name), [
-                        t.stringLiteral(context.componentTag),
-                        ...path.node.expression.arguments.slice(1)
-                    ])));
-                    return;
-                }
-            },
             JSXElement(path) {
                 var _a;
                 const { openingElement } = path.node;
@@ -61,8 +39,6 @@ export const extract = (options) => {
         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.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/visualStudioCode.js

@@ -9,7 +9,7 @@ export const visualStudioCode = (options) => {
     const finish = (global) => {
         var _a, _b, _c, _d, _e;
         const contexts = global.contexts.sort((a, b) => {
-            return a.componentTag.toUpperCase() > b.componentTag.toUpperCase() ? +1 : -1;
+            return a.componentKey.toUpperCase() > b.componentKey.toUpperCase() ? +1 : -1;
         });
         const json = {
             $schema: 'TODO',
@@ -19,7 +19,7 @@ export const visualStudioCode = (options) => {
         for (const context of contexts) {
             const description = (_a = getTags(context.class).find((tag) => !tag.key)) === null || _a === void 0 ? void 0 : _a.value;
             const tag = {
-                name: context.componentTag,
+                name: context.componentKey,
                 description: description,
                 attributes: [],
                 references: [

package/compiler/plugins/webTypes.js

@@ -9,7 +9,7 @@ export const webTypes = (options) => {
     const finish = (global) => {
         var _a, _b, _c, _d, _e, _f, _g;
         const contexts = global.contexts.sort((a, b) => {
-            return a.componentTag.toUpperCase() > b.componentTag.toUpperCase() ? +1 : -1;
+            return a.componentKey.toUpperCase() > b.componentKey.toUpperCase() ? +1 : -1;
         });
         const json = {
             '$schema': 'http://json.schemastore.org/web-types',
@@ -70,7 +70,7 @@ export const webTypes = (options) => {
                 };
             });
             const component = {
-                'name': context.componentTag,
+                'name': context.componentKey,
                 'description': description,
                 'doc-url': (_f = options.reference) === null || _f === void 0 ? void 0 : _f.call(options, context),
                 'deprecated': hasTag(context.class, 'deprecated'),

package/package.json

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

package/types/context.d.ts

@@ -14,9 +14,7 @@ export interface Context {
     classProperties?: Array<ClassProperty>;
     classRender?: ClassMethod;
     classStates?: Array<ClassProperty>;
-    componentInterfaceName?: string;
     componentKey?: string;
-    componentTag?: string;
     directoryName?: string;
     directoryPath?: string;
     fileAST?: File;