@htmlplus/element 0.8.4 → 0.8.6

package/client/decorators/event.js

@@ -12,11 +12,11 @@ export function Event(options = {}) {
                     let name = options.name || String(propertyKey);
                     switch (framework) {
                         case 'qwik':
+                        case 'solid':
                             name = pascalCase(name).toLowerCase();
                             break;
                         case 'preact':
                         case 'react':
-                        case 'solid':
                             name = pascalCase(name);
                             break;
                         default:

package/compiler/plugins/customElement.js

@@ -2,7 +2,7 @@ import template from '@babel/template';
 import t from '@babel/types';
 import { camelCase, kebabCase, pascalCase } from 'change-case';
 import * as CONSTANTS from '../../constants/index.js';
-import { addDependency, getType, print, toEventTypeAnnotation, toPropertySignature, visitor } from '../utils/index.js';
+import { addDependency, getType, print, visitor } from '../utils/index.js';
 export const CUSTOM_ELEMENT_OPTIONS = {
     prefix: undefined,
     typings: true
@@ -276,61 +276,82 @@ export const customElement = (options) => {
         if (options === null || options === void 0 ? void 0 : options.typings) {
             visitor(ast, {
                 Program(path) {
-                    const jsx = [
-                        ...context.classProperties.map((property) => {
-                            return toPropertySignature(property);
-                        }),
-                        ...context.classEvents.map((event) => {
-                            return toPropertySignature(event, {
-                                optional: true,
-                                keyTransformer: (key) => camelCase('on-' + key),
-                                typeAnnotationTransformer: toEventTypeAnnotation
-                            });
-                        })
-                    ];
-                    const attributeJSX = [
-                        ...context.classProperties.map((property) => {
-                            return toPropertySignature(property, {
-                                keyTransformer: (key) => kebabCase(key)
-                            });
-                        }),
-                        ...context.classEvents.map((event) => {
-                            return toPropertySignature(event, {
-                                optional: true,
-                                keyTransformer: (key) => camelCase('on-' + key),
-                                typeAnnotationTransformer: toEventTypeAnnotation
-                            });
-                        })
-                    ];
-                    const globalInterface = context.classProperties.map((property) => {
-                        return toPropertySignature(property);
+                    const attributes = context.classProperties.map((property) => {
+                        const key = property.key;
+                        const typeAnnotation = property.typeAnnotation;
+                        return Object.assign(t.tSPropertySignature(t.stringLiteral(kebabCase(key.name)), typeAnnotation), {
+                            optional: property.optional,
+                            leadingComments: t.cloneNode(property, true).leadingComments
+                        });
+                    });
+                    const events = context.classEvents.map((event) => {
+                        var _a;
+                        const key = event.key;
+                        const typeAnnotation = event.typeAnnotation;
+                        return Object.assign(t.tSPropertySignature(t.identifier(camelCase('on-' + key.name)), t.tsTypeAnnotation(t.tsFunctionType(undefined, [
+                            Object.assign({}, t.identifier('event'), {
+                                typeAnnotation: t.tsTypeAnnotation(t.tsTypeReference(t.identifier('CustomEvent'), (_a = typeAnnotation === null || typeAnnotation === void 0 ? void 0 : typeAnnotation['typeAnnotation']) === null || _a === void 0 ? void 0 : _a.typeParameters))
+                            })
+                        ], t.tsTypeAnnotation(t.tsVoidKeyword())))), {
+                            optional: true,
+                            leadingComments: t.cloneNode(event, true).leadingComments
+                        });
+                    });
+                    const methods = context.classMethods.map((method) => {
+                        return Object.assign(t.tsMethodSignature(method.key, undefined, method.params, // TODO
+                        method.returnType // TODO
+                        ), {
+                            leadingComments: t.cloneNode(method, true).leadingComments
+                        });
+                    });
+                    const properties = context.classProperties.map((property) => {
+                        const key = property.key;
+                        const typeAnnotation = property.typeAnnotation;
+                        return Object.assign(t.tSPropertySignature(t.identifier(key.name), typeAnnotation), {
+                            optional: property.optional,
+                            leadingComments: t.cloneNode(property, true).leadingComments
+                        });
                     });
                     const ast = template.default.ast(`
-              export interface ${context.className}JSX {
-                ${jsx.map(print).join('')}
+              export interface ${context.className}Attributes {
+                ${attributes.map(print).join('')}
               }
-              export interface ${context.className}AttributeJSX {
-                ${attributeJSX.map(print).join('')}
+
+              export interface ${context.className}Events {
+                ${events.map(print).join('')}
               }
+
+              export interface ${context.className}Methods {
+                ${methods.map(print).join('')}
+              }
+
+              export interface ${context.className}Properties {
+                ${properties.map(print).join('')}
+              }
+
+              export interface ${context.className}JSX extends ${context.className}Events, ${context.className}Properties { }
+    
               declare global {
-                interface ${componentInterfaceName} extends HTMLElement {
-                  ${globalInterface.map(print).join('')}
-                }
+                interface ${componentInterfaceName} extends HTMLElement, ${context.className}Methods, ${context.className}Properties { }
+
                 var ${componentInterfaceName}: {
                   prototype: ${componentInterfaceName};
                   new (): ${componentInterfaceName};
                 };
+
                 interface HTMLElementTagNameMap {
                   "${tag}": ${componentInterfaceName};
                 }
+                
                 namespace JSX {
                   interface IntrinsicElements {
-                    "${tag}": ${context.className}AttributeJSX & {
+                    "${tag}": ${context.className}Events & ${context.className}Attributes & {
                       [key: string]: any;
                     };
                   }
                 }
               }
+
               export type ${context.className}Element = globalThis.${componentInterfaceName}
             `, {
                         plugins: ['typescript'],

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

@@ -163,10 +163,10 @@ const setEvent = (element: Element, name: string, handler: EventHandlerType) =>
 
   const previous = events[name];
 
-  previous && element.removeEventListener(kebabCase(name), previous);
+  previous && element.removeEventListener(pascalCase(name), previous);
 
   element.addEventListener(
-    kebabCase(name),
+    pascalCase(name),
     (events[name] = function callback(event: Event) {
       handler && handler.call(this, event);
     })
@@ -248,7 +248,7 @@ export const proxy = <ElementType, PropType>(
       Object.keys(events).forEach((name) => {
         const handler = events[name];
 
-        (this.element as any).removeEventListener(kebabCase(name), handler);
+        (this.element as any).removeEventListener(pascalCase(name), handler);
       });
 
       delete (this.element as any)['$events'];

package/compiler/utils/index.d.ts

@@ -10,6 +10,4 @@ export * from './print.js';
 export * from './removeUnusedImport.js';
 export * from './renderTemplate.js';
 export * from './tags.js';
-export * from './toEventTypeAnnotation.js';
-export * from './toPropertySignature.js';
 export * from './visitor.js';

package/compiler/utils/index.js

@@ -10,6 +10,4 @@ export * from './print.js';
 export * from './removeUnusedImport.js';
 export * from './renderTemplate.js';
 export * from './tags.js';
-export * from './toEventTypeAnnotation.js';
-export * from './toPropertySignature.js';
 export * from './visitor.js';

package/package.json

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

package/compiler/utils/toEventTypeAnnotation.d.ts

@@ -1,2 +0,0 @@
-import t from '@babel/types';
-export declare const toEventTypeAnnotation: (typeAnnotation: t.Noop | t.TSTypeAnnotation | t.TypeAnnotation | null | undefined) => t.TSTypeAnnotation;

package/compiler/utils/toEventTypeAnnotation.js

@@ -1,9 +0,0 @@
-import t from '@babel/types';
-export const toEventTypeAnnotation = (typeAnnotation) => {
-    var _a;
-    return t.tsTypeAnnotation(t.tsFunctionType(undefined, [
-        Object.assign({}, t.identifier('event'), {
-            typeAnnotation: t.tsTypeAnnotation(t.tsTypeReference(t.identifier('CustomEvent'), (_a = typeAnnotation === null || typeAnnotation === void 0 ? void 0 : typeAnnotation['typeAnnotation']) === null || _a === void 0 ? void 0 : _a.typeParameters))
-        })
-    ], t.tsTypeAnnotation(t.tsVoidKeyword())));
-};

package/compiler/utils/toPropertySignature.d.ts

@@ -1,7 +0,0 @@
-import t from '@babel/types';
-export interface IToPropertySignatureOptions {
-    optional?: boolean;
-    keyTransformer?: (key: string) => string;
-    typeAnnotationTransformer?: (typeAnnotation: t.Noop | t.TSTypeAnnotation | t.TypeAnnotation | null | undefined) => t.TSTypeAnnotation | null | undefined;
-}
-export declare const toPropertySignature: (property: t.ClassProperty, options?: IToPropertySignatureOptions) => t.TSPropertySignature;

package/compiler/utils/toPropertySignature.js

@@ -1,10 +0,0 @@
-import t from '@babel/types';
-export const toPropertySignature = (property, options) => {
-    var _a, _b, _c;
-    const key = property.key;
-    const typeAnnotation = property.typeAnnotation;
-    return Object.assign(t.tSPropertySignature(t.stringLiteral(((_a = options === null || options === void 0 ? void 0 : options.keyTransformer) === null || _a === void 0 ? void 0 : _a.call(options, key.name)) || key.name), ((_b = options === null || options === void 0 ? void 0 : options.typeAnnotationTransformer) === null || _b === void 0 ? void 0 : _b.call(options, typeAnnotation)) || typeAnnotation), {
-        optional: (_c = options === null || options === void 0 ? void 0 : options.optional) !== null && _c !== void 0 ? _c : property.optional,
-        leadingComments: t.cloneNode(property, true).leadingComments
-    });
-};