@htmlplus/element 0.4.3 → 0.4.5

package/compiler/plugins/{external.d.ts → assets.d.ts}

@@ -1,9 +1,9 @@
 import { Context } from '../../types/index.js';
-export declare type ExternalOptions = {
-    source?: (context: Context) => string;
+export declare type AssetsOptions = {
     destination: (context: Context) => string;
+    source?: (context: Context) => string;
 };
-export declare const external: (options: ExternalOptions) => {
+export declare const assets: (options: AssetsOptions) => {
     name: string;
     next: (context: Context) => void;
 };

package/compiler/plugins/assets.js

@@ -0,0 +1,26 @@
+import fs from 'fs-extra';
+import path from 'path';
+const defaults = {
+    destination(context) {
+        return `assets/${context.fileName}`;
+    },
+    source(context) {
+        return path.join(context.directoryPath, 'assets');
+    }
+};
+export const assets = (options) => {
+    const name = 'assets';
+    options = Object.assign({}, defaults, options);
+    const next = (context) => {
+        var _a, _b;
+        const destination = (_a = options.destination) === null || _a === void 0 ? void 0 : _a.call(options, context);
+        const source = (_b = options.source) === null || _b === void 0 ? void 0 : _b.call(options, context);
+        if (!source)
+            return;
+        if (!fs.existsSync(source))
+            return;
+        fs.copySync(source, destination);
+        context.assets = source;
+    };
+    return { name, next };
+};

package/compiler/plugins/customElement.js

@@ -1,6 +1,7 @@
 import t from '@babel/types';
+import { pascalCase } from 'change-case';
 import * as CONSTANTS from '../../constants/index.js';
-import { print, visitor } from '../utils/index.js';
+import { addDependency, print, visitor } from '../utils/index.js';
 const defaults = {
     typings: true
 };
@@ -10,26 +11,43 @@ export const customElement = (options) => {
     options = Object.assign({}, defaults, options);
     const next = (context) => {
         const ast = t.cloneNode(context.fileAST, true);
+        // attach style mapper for 'style' attribute
+        visitor(ast, {
+            JSXAttribute(path) {
+                const { name, value } = path.node;
+                if (name.name != 'style')
+                    return;
+                if (!value)
+                    return;
+                if (value.type != 'JSXExpressionContainer')
+                    return;
+                const local = addDependency(ast, CONSTANTS.PACKAGE_NAME, CONSTANTS.UTILS_STYLE_MAP);
+                path.replaceWith(t.jsxAttribute(t.jsxIdentifier('style'), t.jsxExpressionContainer(t.callExpression(t.identifier(local), [value.expression]))));
+                path.skip();
+            }
+        });
         // TODO
         visitor(ast, {
             ClassDeclaration(path) {
-                if (path.node.id.name != context.className)
+                const { body, id } = path.node;
+                if (id.name != context.className)
                     return;
-                path.node.body.body.unshift(t.classProperty(t.identifier('uhtml')));
+                body.body.unshift(t.classProperty(t.identifier('uhtml')));
             }
         });
-        // replace className
+        // replace 'className' attribute to 'class'
         visitor(ast, {
             JSXAttribute(path) {
-                if (path.node.name.name != 'className')
+                const { name, value } = path.node;
+                if (name.name != 'className')
                     return;
                 const hasClass = path.parentPath.node.attributes.some((attribute) => attribute.name.name == 'class');
                 if (hasClass)
                     return path.remove();
-                path.replaceWith(t.jsxAttribute(t.jsxIdentifier('class'), path.node.value));
+                path.replaceWith(t.jsxAttribute(t.jsxIdentifier('class'), value));
             }
         });
-        // jsx to uhtml syntax
+        // TODO: convert 'jsx' to 'uhtml' syntax
         visitor(ast, {
             JSXAttribute: {
                 exit(path) {
@@ -80,9 +98,10 @@ export const customElement = (options) => {
         // attach members
         visitor(ast, {
             ClassDeclaration(path) {
-                if (path.node.id.name != context.className)
+                const { body, id } = path.node;
+                if (id.name != context.className)
                     return;
-                path.node.body.body.unshift(t.classProperty(t.identifier(CONSTANTS.STATIC_MEMBERS), t.objectExpression([
+                body.body.unshift(t.classProperty(t.identifier(CONSTANTS.STATIC_MEMBERS), t.objectExpression([
                     ...context.classProperties.map((property) => {
                         var _a, _b;
                         const type = (_b = (_a = property.typeAnnotation) === null || _a === void 0 ? void 0 : _a.typeAnnotation) === null || _b === void 0 ? void 0 : _b.type;
@@ -116,13 +135,33 @@ export const customElement = (options) => {
         if (options === null || options === void 0 ? void 0 : options.typings) {
             visitor(ast, {
                 Program(path) {
-                    path.node.body.push(Object.assign(t.tsModuleDeclaration(t.identifier('global'), t.tsModuleBlock([
+                    const { body } = 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
+                            });
+                        })
+                    ]))));
+                    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,37 +174,30 @@ 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
-                            });
-                        })
-                    ]))));
                 }
             });
         }
+        // TODO
         context.script = print(ast);
     };
-    return {
-        name,
-        next
-    };
+    return { name, next };
 };

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}`;
     },
@@ -12,8 +15,8 @@ const defaults = {
 };
 export const customElementReact = (options) => {
     const name = 'customElementReact';
+    options = Object.assign({}, defaults, options);
     const finish = (global) => {
-        options = Object.assign(Object.assign({}, defaults), options);
         // TODO
         const globalNew = {
             contexts: global.contexts.reduce((previous, current) => (Object.assign(Object.assign({}, previous), { [current.filePath]: current })), {}),
@@ -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));
@@ -122,8 +126,5 @@ export const customElementReact = (options) => {
             renderTemplate(patterns, options.destination, config)(globalNew);
         }
     };
-    return {
-        name,
-        finish
-    };
+    return { name, finish };
 };

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/document.d.ts

@@ -1,10 +1,8 @@
-import { Context } from '../../types/index.js';
+import { Global } from '../../types/index.js';
 export interface DocumentOptions {
     destination: string;
 }
 export declare const document: (options: DocumentOptions) => {
     name: string;
-    start: (global: any) => void;
-    next: (context: Context, global: any) => void;
-    finish: (global: any) => void;
+    finish: (global: Global) => void;
 };