@htmlplus/element 0.4.3 → 0.4.4

package/compiler/plugins/customElement.js

@@ -1,4 +1,5 @@
 import t from '@babel/types';
+import { pascalCase } from 'change-case';
 import * as CONSTANTS from '../../constants/index.js';
 import { print, visitor } from '../utils/index.js';
 const defaults = {
@@ -116,13 +117,32 @@ export const customElement = (options) => {
         if (options === null || options === void 0 ? void 0 : options.typings) {
             visitor(ast, {
                 Program(path) {
+                    path.node.body.push(t.exportNamedDeclaration(t.tsInterfaceDeclaration(
+                    // TODO
+                    t.identifier(context.componentClassName + '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
+                        })),
+                        ...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())))), {
+                                optional: true,
+                                leadingComments: t.cloneNode(event, true).leadingComments
+                            });
+                        })
+                    ]))));
                     path.node.body.push(Object.assign(t.tsModuleDeclaration(t.identifier('global'), t.tsModuleBlock([
                         t.tsInterfaceDeclaration(t.identifier(context.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: property.leadingComments
+                                leadingComments: t.cloneNode(property, true).leadingComments
                             }))
                         ])),
                         t.variableDeclaration('var', [
@@ -135,30 +155,25 @@ export const customElement = (options) => {
                         ]),
                         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.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.tSTypeLiteral([
+                                        t.tSIndexSignature([
+                                            Object.assign({}, t.identifier('key'), {
+                                                typeAnnotation: t.tSTypeAnnotation(t.tSStringKeyword())
+                                            })
+                                        ], t.tSTypeAnnotation(t.tSAnyKeyword()))
+                                    ])
+                                ])))
+                            ]))
                         ]))
                     ])), {
                         declare: true,
                         global: true
                     }));
-                    path.node.body.push(t.exportNamedDeclaration(t.tsInterfaceDeclaration(
-                    // TODO
-                    t.identifier(context.componentClassName + 'JSX'), null, [], t.tsInterfaceBody([
-                        ...context.classProperties.map((property) => Object.assign(t.tSPropertySignature(property.key, property.typeAnnotation), {
-                            optional: property.optional,
-                            leadingComments: property.leadingComments
-                        })),
-                        ...context.classEvents.map((event) => {
-                            var _a, _b;
-                            return Object.assign(t.tSPropertySignature(event.key, 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())))), {
-                                optional: true,
-                                leadingComments: event.leadingComments
-                            });
-                        })
-                    ]))));
                 }
             });
         }

package/compiler/plugins/customElementReact/customElementReact.js

@@ -1,8 +1,11 @@
+import { pascalCase } from 'change-case';
 import { __dirname, isDirectoryEmpty, renderTemplate } from '../../utils/index.js';
 const defaults = {
     compact: false,
     destination: '',
-    eventName: undefined,
+    eventName(eventName) {
+        return eventName;
+    },
     importerComponent(context) {
         return `YOUR_CORE_PACKAGE_NAME#${context.componentClassName}`;
     },
@@ -36,9 +39,10 @@ export const customElementReact = (options) => {
                 };
             };
             const classEvents = context.classEvents.map((classEvent) => {
-                var _a;
-                const name = ((_a = options.eventName) === null || _a === void 0 ? void 0 : _a.call(options, classEvent.key.name)) || classEvent.key.name;
-                return Object.assign(Object.assign({}, classEvent), { converted: 'on' + name.charAt(0).toUpperCase() + name.slice(1) });
+                const from = 'on' + pascalCase(classEvent.key.name);
+                const to = options.eventName(from);
+                return Object.assign(Object.assign({}, classEvent), { from,
+                    to });
             });
             const fileName = context.fileName;
             const importerComponent = parse(options.importerComponent(context));

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

@@ -11,7 +11,7 @@ type Rename<T, R extends { [K in keyof R]: K extends keyof T ? PropertyKey : "Er
 
 type Renamed = Rename<{{importerComponentType.variable}}, { 
   {{#each classEvents}}
-  {{key.name}}: '{{converted}}',
+  {{from}}: '{{to}}',
   {{/each}}
 }>
 

package/compiler/plugins/index.d.ts

@@ -7,3 +7,4 @@ export * from './parse.js';
 export * from './read.js';
 export * from './style.js';
 export * from './validate.js';
+export * from './webTypes.js';

package/compiler/plugins/index.js

@@ -7,3 +7,4 @@ export * from './parse.js';
 export * from './read.js';
 export * from './style.js';
 export * from './validate.js';
+export * from './webTypes.js';

package/compiler/plugins/webTypes.d.ts

@@ -0,0 +1,11 @@
+import { Global } from '../../types/index.js';
+export interface WebTypesOptions {
+    destination: string;
+    docUrl: () => string;
+    packageName: string;
+    packageVersion: string;
+}
+export declare const webTypes: (options: WebTypesOptions) => {
+    name: string;
+    finish: (global: Global) => void;
+};

package/compiler/plugins/webTypes.js

@@ -0,0 +1,82 @@
+import { camelCase, paramCase } from 'change-case';
+import fs from 'fs';
+import path from 'path';
+import { getTags, print } from '../utils/index.js';
+export const webTypes = (options) => {
+    const name = 'webTypes';
+    const finish = (global) => {
+        const json = {
+            '$schema': 'http://json.schemastore.org/web-types',
+            'name': options.packageName,
+            'version': options.packageVersion,
+            'description-markup': 'markdown',
+            'framework-config': {
+                'enable-when': {
+                    'node-packages': [options.packageName]
+                }
+            },
+            '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'])
+                                    }
+                                });
+                            })
+                        });
+                    })
+                }
+            }
+        };
+        const dirname = path.dirname(options.destination);
+        if (!fs.existsSync(dirname))
+            fs.mkdirSync(dirname, { recursive: true });
+        const raw = JSON.stringify(json, null, 2);
+        fs.writeFileSync(options.destination, raw, 'utf8');
+    };
+    return {
+        name,
+        finish
+    };
+};

package/package.json

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