@htmlplus/element 0.7.8 → 0.8.0

package/client/decorators/element.js

@@ -1,6 +1,6 @@
 import { camelCase, paramCase } from 'change-case';
 import * as CONSTANTS from '../../constants/index.js';
-import { call, fromAttribute, getConfig, getMembers, getNamespace, getTag, isServer, request } from '../utils/index.js';
+import { call, getConfig, getMembers, getNamespace, getTag, isServer, request, toProperty } from '../utils/index.js';
 export function Element() {
     return function (constructor) {
         if (isServer())
@@ -38,7 +38,7 @@ export function Element() {
                     return;
                 const name = camelCase(attribute);
                 const type = (_a = members[name]) === null || _a === void 0 ? void 0 : _a.type;
-                const value = fromAttribute(next, type);
+                const value = toProperty(next, type);
                 if (instance[name] === value)
                     return;
                 instance[name] = value;

package/client/decorators/property.js

@@ -1,5 +1,5 @@
 import * as CONSTANTS from '../../constants/index.js';
-import { addMember, appendToMethod, defineProperty, host, request, updateAttribute } from '../utils/index.js';
+import { addMember, appendToMethod, defineProperty, host, request, toProperty, updateAttribute } from '../utils/index.js';
 export function Property(options) {
     return function (target, propertyKey) {
         const name = String(propertyKey);
@@ -32,7 +32,7 @@ export function Property(options) {
                 return this[propertyKey];
             };
             const set = (input) => {
-                this[propertyKey] = input;
+                this[propertyKey] = toProperty(input, options === null || options === void 0 ? void 0 : options.type);
             };
             // TODO: configurable
             defineProperty(element, propertyKey, { get, set, configurable: true });

package/client/utils/index.d.ts

@@ -7,7 +7,6 @@ export * from './config.js';
 export * from './defineProperty.js';
 export * from './direction.js';
 export * from './event.js';
-export * from './fromAttribute.js';
 export * from './getFramework.js';
 export * from './getMembers.js';
 export * from './getNamespace.js';
@@ -25,6 +24,7 @@ export * from './styles.js';
 export * from './task.js';
 export * from './toBoolean.js';
 export * from './toEvent.js';
+export * from './toProperty.js';
 export * from './toUnit.js';
 export * from './typeOf.js';
 export * from './uhtml.js';

package/client/utils/index.js

@@ -7,7 +7,6 @@ export * from './config.js';
 export * from './defineProperty.js';
 export * from './direction.js';
 export * from './event.js';
-export * from './fromAttribute.js';
 export * from './getFramework.js';
 export * from './getMembers.js';
 export * from './getNamespace.js';
@@ -25,6 +24,7 @@ export * from './styles.js';
 export * from './task.js';
 export * from './toBoolean.js';
 export * from './toEvent.js';
+export * from './toProperty.js';
 export * from './toUnit.js';
 export * from './typeOf.js';
 export * from './uhtml.js';

package/client/utils/toProperty.d.ts

@@ -0,0 +1 @@
+export declare const toProperty: (input: any, type: number | undefined) => any;

package/client/utils/{fromAttribute.js → toProperty.js}

@@ -1,6 +1,8 @@
 import * as CONSTANTS from '../../constants/index.js';
 import { typeOf } from './typeOf.js';
-export const fromAttribute = (input, type) => {
+export const toProperty = (input, type) => {
+    if (type === undefined)
+        return input;
     const string = `${input}`;
     if (CONSTANTS.TYPE_BOOLEAN & type) {
         if (string === '')

package/compiler/plugins/customElement.js

@@ -1,7 +1,8 @@
+import template from '@babel/template';
 import t from '@babel/types';
-import { pascalCase } from 'change-case';
+import { camelCase, paramCase, pascalCase } from 'change-case';
 import * as CONSTANTS from '../../constants/index.js';
-import { addDependency, getType, print, visitor } from '../utils/index.js';
+import { addDependency, getType, print, toEventTypeAnnotation, toPropertySignature, visitor } from '../utils/index.js';
 export const CUSTOM_ELEMENT_OPTIONS = {
     prefix: undefined,
     typings: true
@@ -165,11 +166,11 @@ export const customElement = (options) => {
                             expressions.push(parts[i]);
                         i += 1;
                     }
-                    const template = t.templateLiteral(quasis, expressions);
+                    const templateLiteral = t.templateLiteral(quasis, expressions);
                     // TODO
                     // if (!expressions.length) return template;
                     const { local } = addDependency(path, CONSTANTS.UTILS_PATH, CONSTANTS.UTILS_HTML_LOCAL, CONSTANTS.UTILS_HTML_IMPORTED, true);
-                    return t.taggedTemplateExpression(t.identifier(local), template);
+                    return t.taggedTemplateExpression(t.identifier(local), templateLiteral);
                 };
                 path.replaceWith(transform(render(path.node)));
             }
@@ -275,65 +276,66 @@ export const customElement = (options) => {
         if (options === null || options === void 0 ? void 0 : options.typings) {
             visitor(ast, {
                 Program(path) {
-                    const { body } = path.node;
-                    body.push(t.exportNamedDeclaration(t.tsInterfaceDeclaration(
-                    // TODO
-                    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
-                        })),
+                    const jsx = [
+                        ...context.classProperties.map((property) => {
+                            return toPropertySignature(property);
+                        }),
+                        ...context.classProperties.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) => paramCase(key)
+                            });
+                        }),
                         ...context.classEvents.map((event) => {
-                            var _a, _b;
-                            return Object.assign(t.tSPropertySignature(t.identifier('on' + pascalCase(event.key['name'])), t.tsTypeAnnotation(t.tsFunctionType(undefined, [
-                                Object.assign({}, t.identifier('event'), {
-                                    typeAnnotation: t.tsTypeAnnotation(t.tsTypeReference(t.identifier('CustomEvent'), (_b = (_a = event.typeAnnotation) === null || _a === void 0 ? void 0 : _a['typeAnnotation']) === null || _b === void 0 ? void 0 : _b.typeParameters))
-                                })
-                            ], t.tsTypeAnnotation(t.tsVoidKeyword())))), {
+                            return toPropertySignature(event, {
                                 optional: true,
-                                leadingComments: t.cloneNode(event, true).leadingComments
+                                keyTransformer: (key) => 'on' + paramCase(key),
+                                typeAnnotationTransformer: toEventTypeAnnotation
                             });
                         })
-                    ]))));
-                    body.push(Object.assign(t.tsModuleDeclaration(t.identifier('global'), t.tsModuleBlock([
-                        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), {
-                                optional: property.optional,
-                                leadingComments: t.cloneNode(property, true).leadingComments
-                            }))
-                        ])),
-                        t.variableDeclaration('var', [
-                            t.variableDeclarator(Object.assign(t.identifier(componentInterfaceName), {
-                                typeAnnotation: t.tSTypeAnnotation(t.tSTypeLiteral([
-                                    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(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(tag), t.tSTypeAnnotation(t.tSIntersectionType([
-                                    t.tSTypeReference(t.identifier(context.className + 'JSX')),
-                                    t.tSTypeLiteral([
-                                        t.tSIndexSignature([
-                                            Object.assign({}, t.identifier('key'), {
-                                                typeAnnotation: t.tSTypeAnnotation(t.tSStringKeyword())
-                                            })
-                                        ], t.tSTypeAnnotation(t.tSAnyKeyword()))
-                                    ])
-                                ])))
-                            ]))
-                        ]))
-                    ])), {
-                        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))))));
+                    ];
+                    const globalInterface = context.classProperties.map((property) => {
+                        return toPropertySignature(property);
+                    });
+                    const ast = template.default.ast(`
+              export interface ${context.className}JSX {
+                ${jsx.map(print).join('')}
+              }
+              export interface ${context.className}AttributeJSX {
+                ${attributeJSX.map(print).join('')}
+              }
+              declare global {
+                interface ${componentInterfaceName} extends HTMLElement {
+                  ${globalInterface.map(print).join('')}
+                }
+                var ${componentInterfaceName}: {
+                  prototype: ${componentInterfaceName};
+                  new (): ${componentInterfaceName};
+                };
+                interface HTMLElementTagNameMap {
+                  "${tag}": ${componentInterfaceName};
+                }
+                namespace JSX {
+                  interface IntrinsicElements {
+                    "${tag}": ${context.className}AttributeJSX & {
+                      [key: string]: any;
+                    };
+                  }
+                }
+              }
+              export type ${context.className}Element = globalThis.${componentInterfaceName}
+            `, {
+                        plugins: ['typescript']
+                    });
+                    path.node.body.push(...ast);
                 }
             });
         }

package/compiler/plugins/extract.js

@@ -1,4 +1,4 @@
-import * as t from '@babel/types';
+import t from '@babel/types';
 import { paramCase } from 'change-case';
 import path from 'path';
 import * as CONSTANTS from '../../constants/index.js';

package/compiler/utils/addDependency.d.ts

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

package/compiler/utils/getInitializer.d.ts

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

package/compiler/utils/getType.d.ts

@@ -1,2 +1,2 @@
-import { File, Node } from '@babel/types';
-export declare const getType: (directory: string, file: File, node: Node) => Node;
+import t from '@babel/types';
+export declare const getType: (directory: string, file: t.File, node: t.Node) => t.Node;

package/compiler/utils/index.d.ts

@@ -10,4 +10,6 @@ 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,4 +10,6 @@ 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/tags.d.ts

@@ -1,4 +1,4 @@
-import { Node } from '@babel/types';
+import t from '@babel/types';
 export interface Tag {
     key?: string;
     value?: string;
@@ -7,7 +7,7 @@ export interface TagParsed {
     name?: string;
     description?: string;
 }
-export declare const getTag: (node: Node, key?: string) => Tag | undefined;
-export declare const getTags: (node: Node, filter?: string) => Array<Tag>;
-export declare const hasTag: (node: Node, name: string) => Boolean;
+export declare const getTag: (node: t.Node, key?: string) => Tag | undefined;
+export declare const getTags: (node: t.Node, filter?: string) => Array<Tag>;
+export declare const hasTag: (node: t.Node, name: string) => Boolean;
 export declare const parseTag: (tag: Tag, spliter?: string) => TagParsed;

package/compiler/utils/toEventTypeAnnotation.d.ts

@@ -0,0 +1,2 @@
+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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,10 @@
+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
+    });
+};

package/constants/index.d.ts

@@ -38,7 +38,6 @@ export declare const TYPE_NUMBER: number;
 export declare const TYPE_OBJECT: number;
 export declare const TYPE_STRING: number;
 export declare const TYPE_UNDEFINED: number;
-export declare const TYPE_UNIT: number;
 export declare const UTILS_ATTRIBUTES_IMPORTED = "attributes";
 export declare const UTILS_ATTRIBUTES_LOCAL = "UTILS_ATTRIBUTES";
 export declare const UTILS_HOST_IMPORTED = "host";

package/constants/index.js

@@ -46,7 +46,6 @@ export const TYPE_NUMBER = 2 ** 6;
 export const TYPE_OBJECT = 2 ** 7;
 export const TYPE_STRING = 2 ** 8;
 export const TYPE_UNDEFINED = 2 ** 9;
-export const TYPE_UNIT = 2 ** 10; // TODO
 // utils
 export const UTILS_ATTRIBUTES_IMPORTED = 'attributes';
 export const UTILS_ATTRIBUTES_LOCAL = 'UTILS_ATTRIBUTES';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@htmlplus/element",
-  "version": "0.7.8",
+  "version": "0.8.0",
   "license": "MIT",
   "sideEffects": false,
   "author": "Masood Abdolian <m.abdolian@gmail.com>",
@@ -34,6 +34,7 @@
   "dependencies": {
     "@babel/generator": "^7.20.4",
     "@babel/parser": "^7.20.3",
+    "@babel/template": "^7.22.15",
     "@babel/traverse": "^7.20.1",
     "@babel/types": "^7.20.2",
     "@types/node": "^18.11.9",
@@ -47,7 +48,6 @@
   "devDependencies": {
     "@trivago/prettier-plugin-sort-imports": "^4.0.0",
     "cpy": "^9.0.1",
-    "nodemon": "^2.0.20",
     "prettier": "^2.8.0",
     "rimraf": "^3.0.2",
     "ts-node": "^10.9.1",

package/client/utils/fromAttribute.d.ts

@@ -1 +0,0 @@
-export declare const fromAttribute: (input: any, type: any) => any;