@htmlplus/element 0.4.4 → 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,7 +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
 };
@@ -11,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) {
@@ -81,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;
@@ -117,7 +135,8 @@ 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(
+                    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), {
@@ -136,7 +155,7 @@ export const customElement = (options) => {
                             });
                         })
                     ]))));
-                    path.node.body.push(Object.assign(t.tsModuleDeclaration(t.identifier('global'), t.tsModuleBlock([
+                    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([
@@ -177,10 +196,8 @@ export const customElement = (options) => {
                 }
             });
         }
+        // TODO
         context.script = print(ast);
     };
-    return {
-        name,
-        next
-    };
+    return { name, next };
 };

package/compiler/plugins/customElementReact/customElementReact.js

@@ -15,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 })), {}),
@@ -126,8 +126,5 @@ export const customElementReact = (options) => {
             renderTemplate(patterns, options.destination, config)(globalNew);
         }
     };
-    return {
-        name,
-        finish
-    };
+    return { name, finish };
 };

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;
 };

package/compiler/plugins/document.js

@@ -1,254 +1,247 @@
 import { capitalCase, paramCase } from 'change-case';
-import fs from 'fs';
+import fs from 'fs-extra';
 import glob from 'glob';
 import path from 'path';
 import { getInitializer, getTag, getTags, getTypeReference, hasTag, parseTag, print } from '../utils/index.js';
+const defaults = {};
 export const document = (options) => {
     const name = 'document';
-    const start = (global) => {
-        global.document = {
+    options = Object.assign({}, defaults, options);
+    const finish = (global) => {
+        var _a;
+        const json = {
             components: []
         };
-    };
-    const next = (context, global) => {
-        var _a;
-        const events = context.classEvents.map((event) => {
-            var _a, _b, _c;
-            const isCancelable = (() => {
-                if (!event.decorators)
-                    return false;
-                try {
-                    for (const decorator of event.decorators) {
-                        for (const argument of decorator.expression['arguments']) {
-                            for (const property of argument.properties) {
-                                if (property.key.name != 'cancelable')
-                                    continue;
-                                if (property.value.type != 'BooleanLiteral')
-                                    continue;
-                                if (!property.value.value)
-                                    continue;
-                                return true;
+        for (const context of global.contexts) {
+            const events = context.classEvents.map((event) => {
+                var _a, _b, _c;
+                const isCancelable = (() => {
+                    if (!event.decorators)
+                        return false;
+                    try {
+                        for (const decorator of event.decorators) {
+                            for (const argument of decorator.expression['arguments']) {
+                                for (const property of argument.properties) {
+                                    if (property.key.name != 'cancelable')
+                                        continue;
+                                    if (property.value.type != 'BooleanLiteral')
+                                        continue;
+                                    if (!property.value.value)
+                                        continue;
+                                    return true;
+                                }
                             }
                         }
                     }
-                }
-                catch (_a) { }
-                return false;
-            })();
-            const description = (_a = getTags(event).find((tag) => !tag.key)) === null || _a === void 0 ? void 0 : _a.value;
-            const detail = print((_b = event.typeAnnotation) === null || _b === void 0 ? void 0 : _b['typeAnnotation']);
-            const detailReference = getTypeReference(context.fileAST, (_c = event.typeAnnotation) === null || _c === void 0 ? void 0 : _c['typeAnnotation'].typeParameters.params[0]);
-            const isExperimental = hasTag(event, 'experimental');
-            const isModel = hasTag(event, 'model');
-            const name = event.key['name'];
-            const tags = getTags(event);
-            return {
-                description,
-                detail,
-                detailReference,
-                isCancelable,
-                isExperimental,
-                isModel,
-                name,
-                tags
-            };
-        });
-        const group = (_a = getTag(context.class, 'group')) === null || _a === void 0 ? void 0 : _a.value;
-        const isDeprecated = hasTag(context.class, 'deprecated');
-        const isExperimental = hasTag(context.class, 'experimental');
-        const lastModified = glob
-            .sync(path.join(context.directoryPath, '**/*.*'))
-            .map((file) => fs.statSync(file).mtime)
-            .sort((a, b) => (a > b ? 1 : -1))
-            .pop();
-        const methods = context.classMethods.map((method) => {
-            var _a, _b, _c;
-            const description = (_a = getTags(method).find((tag) => !tag.key)) === null || _a === void 0 ? void 0 : _a.value;
-            const isAsync = method.async;
-            const isDeprecated = hasTag(method, 'deprecated');
-            const isExperimental = hasTag(method, 'experimental');
-            const name = method.key['name'];
-            const returns = print((_b = method.returnType) === null || _b === void 0 ? void 0 : _b['typeAnnotation']) || 'void';
-            const returnsReference = getTypeReference(context.fileAST, (_c = method.returnType) === null || _c === void 0 ? void 0 : _c['typeAnnotation']);
-            const tags = getTags(method);
-            // TODO
-            const parameters = method.params.map((param) => {
+                    catch (_a) { }
+                    return false;
+                })();
+                const description = (_a = getTags(event).find((tag) => !tag.key)) === null || _a === void 0 ? void 0 : _a.value;
+                const detail = print((_b = event.typeAnnotation) === null || _b === void 0 ? void 0 : _b['typeAnnotation']);
+                const detailReference = getTypeReference(context.fileAST, (_c = event.typeAnnotation) === null || _c === void 0 ? void 0 : _c['typeAnnotation'].typeParameters.params[0]);
+                const isExperimental = hasTag(event, 'experimental');
+                const isModel = hasTag(event, 'model');
+                const name = event.key['name'];
+                const tags = getTags(event);
+                return {
+                    description,
+                    detail,
+                    detailReference,
+                    isCancelable,
+                    isExperimental,
+                    isModel,
+                    name,
+                    tags
+                };
+            });
+            const group = (_a = getTag(context.class, 'group')) === null || _a === void 0 ? void 0 : _a.value;
+            const isDeprecated = hasTag(context.class, 'deprecated');
+            const isExperimental = hasTag(context.class, 'experimental');
+            const lastModified = glob
+                .sync(path.join(context.directoryPath, '**/*.*'))
+                .map((file) => fs.statSync(file).mtime)
+                .sort((a, b) => (a > b ? 1 : -1))
+                .pop();
+            const methods = context.classMethods.map((method) => {
                 var _a, _b, _c;
-                return ({
-                    description: (_a = getTags(method, 'param')
-                        .map((tag) => parseTag(tag, ' '))
-                        .find((tag) => tag.name == param['name'])) === null || _a === void 0 ? void 0 : _a.description,
-                    isOptional: !!param['optional'],
-                    name: param['name'],
-                    type: print((_b = param === null || param === void 0 ? void 0 : param['typeAnnotation']) === null || _b === void 0 ? void 0 : _b.typeAnnotation) || undefined,
-                    typeReference: getTypeReference(context.fileAST, (_c = param === null || param === void 0 ? void 0 : param['typeAnnotation']) === null || _c === void 0 ? void 0 : _c.typeAnnotation)
+                const description = (_a = getTags(method).find((tag) => !tag.key)) === null || _a === void 0 ? void 0 : _a.value;
+                const isAsync = method.async;
+                const isDeprecated = hasTag(method, 'deprecated');
+                const isExperimental = hasTag(method, 'experimental');
+                const name = method.key['name'];
+                const returns = print((_b = method.returnType) === null || _b === void 0 ? void 0 : _b['typeAnnotation']) || 'void';
+                const returnsReference = getTypeReference(context.fileAST, (_c = method.returnType) === null || _c === void 0 ? void 0 : _c['typeAnnotation']);
+                const tags = getTags(method);
+                // TODO
+                const parameters = method.params.map((param) => {
+                    var _a, _b, _c;
+                    return ({
+                        description: (_a = getTags(method, 'param')
+                            .map((tag) => parseTag(tag, ' '))
+                            .find((tag) => tag.name == param['name'])) === null || _a === void 0 ? void 0 : _a.description,
+                        isOptional: !!param['optional'],
+                        name: param['name'],
+                        type: print((_b = param === null || param === void 0 ? void 0 : param['typeAnnotation']) === null || _b === void 0 ? void 0 : _b.typeAnnotation) || undefined,
+                        typeReference: getTypeReference(context.fileAST, (_c = param === null || param === void 0 ? void 0 : param['typeAnnotation']) === null || _c === void 0 ? void 0 : _c.typeAnnotation)
+                    });
                 });
+                const signature = [
+                    method.key['name'],
+                    '(',
+                    parameters
+                        .map((parameter) => {
+                        var _a;
+                        let string = '';
+                        string += parameter.name;
+                        string += parameter.isOptional ? '?' : '';
+                        string += parameter.type ? ': ' : '';
+                        string += (_a = parameter.type) !== null && _a !== void 0 ? _a : '';
+                        return string;
+                    })
+                        .join(', '),
+                    ')',
+                    ' => ',
+                    returns
+                ].join('');
+                return {
+                    description,
+                    isAsync,
+                    isDeprecated,
+                    isExperimental,
+                    name,
+                    returns,
+                    returnsReference,
+                    tags,
+                    parameters,
+                    signature
+                };
             });
-            const signature = [
-                method.key['name'],
-                '(',
-                parameters
-                    .map((parameter) => {
-                    var _a;
-                    let string = '';
-                    string += parameter.name;
-                    string += parameter.isOptional ? '?' : '';
-                    string += parameter.type ? ': ' : '';
-                    string += (_a = parameter.type) !== null && _a !== void 0 ? _a : '';
-                    return string;
-                })
-                    .join(', '),
-                ')',
-                ' => ',
-                returns
-            ].join('');
-            return {
-                description,
-                isAsync,
-                isDeprecated,
-                isExperimental,
-                name,
-                returns,
-                returnsReference,
-                tags,
-                parameters,
-                signature
-            };
-        });
-        const parts = getTags(context.class, 'part').map((tag) => parseTag(tag));
-        const properties = context.classProperties.map((property) => {
-            var _a, _b, _c;
-            const attribute = paramCase(property.key['name']);
-            const description = (_a = getTags(property).find((tag) => !tag.key)) === null || _a === void 0 ? void 0 : _a.value;
-            // TODO
-            const hasReflect = (() => {
-                if (!property.decorators)
-                    return false;
-                try {
-                    for (const decorator of property.decorators) {
-                        for (const argument of decorator.expression['arguments']) {
-                            for (const property of argument.properties) {
-                                if (property.key.name != 'reflect')
-                                    continue;
-                                if (property.value.type != 'BooleanLiteral')
-                                    continue;
-                                if (!property.value.value)
-                                    continue;
-                                return true;
+            const parts = getTags(context.class, 'part').map((tag) => parseTag(tag));
+            const properties = context.classProperties.map((property) => {
+                var _a, _b, _c;
+                const attribute = paramCase(property.key['name']);
+                const description = (_a = getTags(property).find((tag) => !tag.key)) === null || _a === void 0 ? void 0 : _a.value;
+                // TODO
+                const hasReflect = (() => {
+                    if (!property.decorators)
+                        return false;
+                    try {
+                        for (const decorator of property.decorators) {
+                            for (const argument of decorator.expression['arguments']) {
+                                for (const property of argument.properties) {
+                                    if (property.key.name != 'reflect')
+                                        continue;
+                                    if (property.value.type != 'BooleanLiteral')
+                                        continue;
+                                    if (!property.value.value)
+                                        continue;
+                                    return true;
+                                }
                             }
                         }
                     }
+                    catch (_a) { }
+                    return false;
+                })();
+                // TODO
+                const initializer = getInitializer(property.value);
+                const isDeprecated = hasTag(property, 'deprecated');
+                const isExperimental = hasTag(property, 'experimental');
+                const isModel = hasTag(property, 'model');
+                const isRequired = !property.optional;
+                const name = property.key['name'];
+                const tags = getTags(property);
+                const type = print((_b = property.typeAnnotation) === null || _b === void 0 ? void 0 : _b['typeAnnotation']);
+                const typeReference = getTypeReference(context.fileAST, (_c = property.typeAnnotation) === null || _c === void 0 ? void 0 : _c['typeAnnotation']);
+                return {
+                    attribute,
+                    description,
+                    hasReflect,
+                    initializer,
+                    isDeprecated,
+                    isExperimental,
+                    isModel,
+                    isRequired,
+                    name,
+                    tags,
+                    type,
+                    typeReference
+                };
+            });
+            const readme = (() => {
+                try {
+                    const source = path.join(context.directoryPath, `${context.fileName}.md`);
+                    return fs.readFileSync(source, 'utf8');
                 }
                 catch (_a) { }
-                return false;
             })();
+            const readmeDescription = (() => {
+                const content = readme || '';
+                if (!content.startsWith('# '))
+                    return '';
+                const sections = content.split('\n');
+                for (let i = 1; i < sections.length; i++) {
+                    const section = sections[i].trim();
+                    if (!section)
+                        continue;
+                    return section;
+                }
+                return '';
+            })();
+            const slots = getTags(context.class, 'slot').map((tag) => parseTag(tag));
             // TODO
-            const initializer = getInitializer(property.value);
-            const isDeprecated = hasTag(property, 'deprecated');
-            const isExperimental = hasTag(property, 'experimental');
-            const isModel = hasTag(property, 'model');
-            const isRequired = !property.optional;
-            const name = property.key['name'];
-            const tags = getTags(property);
-            const type = print((_b = property.typeAnnotation) === null || _b === void 0 ? void 0 : _b['typeAnnotation']);
-            const typeReference = getTypeReference(context.fileAST, (_c = property.typeAnnotation) === null || _c === void 0 ? void 0 : _c['typeAnnotation']);
-            return {
-                attribute,
-                description,
-                hasReflect,
-                initializer,
+            const styles = (() => {
+                if (!context.stylePath)
+                    return [];
+                return fs
+                    .readFileSync(context.stylePath, 'utf8')
+                    .split('@prop')
+                    .slice(1)
+                    .map((section) => {
+                    var _a;
+                    let [description, name] = section.split(/\n/);
+                    name = name.split(':').slice(0, -1).join(':').trim();
+                    description = description.trim();
+                    let [initializer] = ((_a = context.styleParsed) === null || _a === void 0 ? void 0 : _a.split(name).slice(1, 2)) || [];
+                    if (initializer)
+                        initializer = initializer.split(/;|}/)[0].replace(':', '').trim();
+                    return {
+                        description,
+                        initializer,
+                        name
+                    };
+                });
+            })();
+            const tag = context.componentTag;
+            const tags = getTags(context.class);
+            const title = capitalCase(context.componentKey);
+            json.components.push({
+                // TODO
+                // main
+                // development
+                // source
+                events,
+                group,
                 isDeprecated,
                 isExperimental,
-                isModel,
-                isRequired,
-                name,
+                key: context.componentKey,
+                lastModified,
+                methods,
+                parts,
+                properties,
+                readme,
+                readmeDescription,
+                slots,
+                styles,
+                tag,
                 tags,
-                type,
-                typeReference
-            };
-        });
-        const readme = (() => {
-            try {
-                const source = path.join(context.directoryPath, `${context.fileName}.md`);
-                return fs.readFileSync(source, 'utf8');
-            }
-            catch (_a) { }
-        })();
-        const readmeDescription = (() => {
-            const content = readme || '';
-            if (!content.startsWith('# '))
-                return '';
-            const sections = content.split('\n');
-            for (let i = 1; i < sections.length; i++) {
-                const section = sections[i].trim();
-                if (!section)
-                    continue;
-                return section;
-            }
-            return '';
-        })();
-        const slots = getTags(context.class, 'slot').map((tag) => parseTag(tag));
-        // TODO
-        const styles = (() => {
-            if (!context.stylePath)
-                return [];
-            return fs
-                .readFileSync(context.stylePath, 'utf8')
-                .split('@prop')
-                .slice(1)
-                .map((section) => {
-                var _a;
-                let [description, name] = section.split(/\n/);
-                name = name.split(':').slice(0, -1).join(':').trim();
-                description = description.trim();
-                let [initializer] = ((_a = context.styleParsed) === null || _a === void 0 ? void 0 : _a.split(name).slice(1, 2)) || [];
-                if (initializer)
-                    initializer = initializer.split(/;|}/)[0].replace(':', '').trim();
-                return {
-                    description,
-                    initializer,
-                    name
-                };
+                title
             });
-        })();
-        const tag = context.componentTag;
-        const tags = getTags(context.class);
-        const title = capitalCase(context.componentKey);
-        global.document.components.push({
-            // TODO
-            // main
-            // development
-            // source
-            events,
-            group,
-            isDeprecated,
-            isExperimental,
-            key: context.componentKey,
-            lastModified,
-            methods,
-            parts,
-            properties,
-            readme,
-            readmeDescription,
-            slots,
-            styles,
-            tag,
-            tags,
-            title
-        });
-    };
-    const finish = (global) => {
+        }
+        json.components = json.components.sort((a, b) => (a.title > b.title ? 1 : -1));
         const dirname = path.dirname(options.destination);
-        global.document.components = global.document.components.sort((a, b) => (a.title > b.title ? 1 : -1));
-        if (!fs.existsSync(dirname))
-            fs.mkdirSync(dirname, { recursive: true });
-        JSON.stringify(global.document, null, 2);
-        fs.writeFileSync(options.destination, JSON.stringify(global.document, null, 2), 'utf8');
-    };
-    return {
-        name,
-        start,
-        next,
-        finish
+        fs.ensureDirSync(dirname);
+        fs.writeJSONSync(options.destination, json, { encoding: 'utf8', spaces: 2 });
     };
+    return { name, finish };
 };

package/compiler/plugins/extract.js

@@ -3,8 +3,10 @@ import { pascalCase, paramCase } from 'change-case';
 import path from 'path';
 import * as CONSTANTS from '../../constants/index.js';
 import { hasDecorator, visitor } from '../utils/index.js';
+const defaults = {};
 export const extract = (options) => {
     const name = 'extract';
+    options = Object.assign({}, defaults, options);
     const next = (context) => {
         var _a, _b;
         visitor(context.fileAST, {
@@ -44,8 +46,10 @@ export const extract = (options) => {
                     return;
                 (_a = context.customElementNames) !== null && _a !== void 0 ? _a : (context.customElementNames = []);
                 context.customElementNames.push(name);
-                context.customElementNames = context.customElementNames.filter((item, index, items) => items.indexOf(item) === index).sort();
-            },
+                context.customElementNames = context.customElementNames
+                    .filter((item, index, items) => items.indexOf(item) === index)
+                    .sort();
+            }
         });
         context.directoryPath = path.dirname(context.filePath);
         context.directoryName = path.basename(context.directoryPath);
@@ -65,8 +69,5 @@ export const extract = (options) => {
         context.classHasUnmount = (context.classMembers || []).some((member) => member['key'].name == CONSTANTS.LIFECYCLE_DISCONNECTED);
         context.classRender = (context.classMembers || []).find((member) => member['key'].name == CONSTANTS.METHOD_RENDER);
     };
-    return {
-        name,
-        next
-    };
+    return { name, next };
 };

package/compiler/plugins/index.d.ts

@@ -1,7 +1,7 @@
+export * from './assets.js';
 export * from './customElementReact/index.js';
 export * from './customElement.js';
 export * from './document.js';
-export * from './external.js';
 export * from './extract.js';
 export * from './parse.js';
 export * from './read.js';

package/compiler/plugins/index.js

@@ -1,7 +1,7 @@
+export * from './assets.js';
 export * from './customElementReact/index.js';
 export * from './customElement.js';
 export * from './document.js';
-export * from './external.js';
 export * from './extract.js';
 export * from './parse.js';
 export * from './read.js';

package/compiler/plugins/parse.js

@@ -9,8 +9,5 @@ export const parse = () => {
             plugins: ['jsx', 'typescript', 'decorators-legacy']
         });
     };
-    return {
-        name,
-        next
-    };
+    return { name, next };
 };

package/compiler/plugins/read.js

@@ -1,13 +1,9 @@
-import fs from 'fs';
+import fs from 'fs-extra';
 export const read = () => {
     const name = 'read';
     const next = (context) => {
-        if (!!context.fileContent)
-            return;
-        context.fileContent = fs.readFileSync(context.filePath, 'utf8');
-    };
-    return {
-        name,
-        next
+        var _a;
+        context.fileContent = (_a = context.fileContent) !== null && _a !== void 0 ? _a : fs.readFileSync(context.filePath, 'utf8');
     };
+    return { name, next };
 };

package/compiler/plugins/style.d.ts

@@ -1,8 +1,6 @@
 import { Context } from '../../types/index.js';
 export declare type StyleOptions = {
-    extensions?: Array<string>;
-    directory?: (context: Context) => string;
-    filename?: (context: Context) => string;
+    references?: (context: Context) => string[];
 };
 export declare const style: (options: StyleOptions) => {
     name: string;

package/compiler/plugins/style.js

@@ -1,36 +1,34 @@
 import t from '@babel/types';
-import fs from 'fs';
+import fs from 'fs-extra';
 import path from 'path';
 import * as CONSTANTS from '../../constants/index.js';
+import { addDependency } from '../utils/index.js';
 const defaults = {
-    extensions: ['scss', 'css'],
-    directory(context) {
-        return context.directoryPath;
-    },
-    filename(context) {
-        return context.fileName;
+    references(context) {
+        return [
+            path.join(context.directoryPath, `${context.fileName}.css`),
+            path.join(context.directoryPath, `${context.fileName}.less`),
+            path.join(context.directoryPath, `${context.fileName}.sass`),
+            path.join(context.directoryPath, `${context.fileName}.scss`),
+            path.join(context.directoryPath, `${context.fileName}.styl`)
+        ];
     }
 };
 export const style = (options) => {
     const name = 'style';
-    options = Object.assign(Object.assign({}, defaults), options);
+    options = Object.assign({}, defaults, options);
     const next = (context) => {
-        const filename = options.filename(context);
-        const directory = options.directory(context);
-        for (let extension of options.extensions) {
-            const stylePath = path.join(directory, `${filename}.${extension}`);
-            if (!fs.existsSync(stylePath))
+        const references = options.references(context);
+        for (const reference of references) {
+            if (!fs.existsSync(reference))
                 continue;
-            context.stylePath = stylePath;
-            break;
+            context.stylePath = reference;
         }
         if (!context.stylePath)
             return;
-        context.fileAST.program.body.unshift(t.importDeclaration([t.importDefaultSpecifier(t.identifier('AUTO_IMPORT_STYLE'))], t.stringLiteral(context.stylePath)));
-        context.class.body.body.unshift(t.classProperty(t.identifier(CONSTANTS.STATIC_STYLES), t.identifier('AUTO_IMPORT_STYLE'), undefined, null, undefined, true));
-    };
-    return {
-        name,
-        next
+        const local = addDependency(context.fileAST, context.stylePath, 'AUTO_IMPORT_STYLE', undefined, true);
+        const property = t.classProperty(t.identifier(CONSTANTS.STATIC_STYLES), t.identifier(local), undefined, null, undefined, true);
+        context.class.body.body.unshift(property);
     };
+    return { name, next };
 };

package/compiler/plugins/validate.js

@@ -33,8 +33,5 @@ export const validate = () => {
         });
         context.isInvalid = !hasValidImport || !hasValidExport;
     };
-    return {
-        name,
-        next
-    };
+    return { name, next };
 };

package/compiler/plugins/visualStudioCode.d.ts

@@ -0,0 +1,8 @@
+import { Global } from '../../types/index.js';
+export interface VisualStudioCodeOptions {
+    destination: string;
+}
+export declare const visualStudioCode: (options: VisualStudioCodeOptions) => {
+    name: string;
+    finish: (global: Global) => void;
+};

package/compiler/plugins/visualStudioCode.js

@@ -0,0 +1,28 @@
+const defaults = {};
+export const visualStudioCode = (options) => {
+    const name = 'visualStudioCode';
+    options = Object.assign({}, defaults, options);
+    const finish = (global) => {
+        // TODO
+        // {
+        //   version: 1.1,
+        //   tags: [
+        //     {
+        //       name: context.componentKey,
+        //       description: {
+        //         kind: 'markdown',
+        //         value: description
+        //       },
+        //       attributes: properties,
+        //       references: [
+        //         {
+        //           name: 'Source code',
+        //           url: `https://github.com/htmlplus/core/tree/main/src/components/${context.directoryName}/${context.fileName}.tsx`
+        //         }
+        //       ]
+        //     }
+        //   ]
+        // };
+    };
+    return { name, finish };
+};

package/compiler/plugins/webTypes.d.ts

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

package/compiler/plugins/webTypes.js

@@ -1,9 +1,11 @@
 import { camelCase, paramCase } from 'change-case';
-import fs from 'fs';
+import fs from 'fs-extra';
 import path from 'path';
 import { getTags, print } from '../utils/index.js';
+const defaults = {};
 export const webTypes = (options) => {
     const name = 'webTypes';
+    options = Object.assign({}, defaults, options);
     const finish = (global) => {
         const json = {
             '$schema': 'http://json.schemastore.org/web-types',
@@ -70,13 +72,8 @@ export const webTypes = (options) => {
             }
         };
         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
+        fs.ensureDirSync(dirname);
+        fs.writeJSONSync(options.destination, json, { encoding: 'utf8', spaces: 2 });
     };
+    return { name, finish };
 };

package/compiler/utils/addDependency.d.ts

@@ -0,0 +1,2 @@
+import { File } from '@babel/types';
+export declare const addDependency: (file: File, source: string, imported: string, local?: string, isDefault?: boolean) => string;

package/compiler/utils/addDependency.js

@@ -0,0 +1,41 @@
+import t from '@babel/types';
+import { visitor } from './visitor.js';
+export const addDependency = (file, source, imported, local, isDefault) => {
+    let node;
+    visitor(file, {
+        ImportDeclaration(path) {
+            if (path.node.source.value != source)
+                return;
+            node = path.node;
+        }
+    });
+    let specifier = node === null || node === void 0 ? void 0 : node.specifiers.find((specifier) => {
+        var _a;
+        if (isDefault) {
+            return specifier.type == 'ImportDefaultSpecifier';
+        }
+        else {
+            return ((_a = specifier.imported) === null || _a === void 0 ? void 0 : _a.name) == imported;
+        }
+    });
+    if (specifier)
+        return specifier.local.name;
+    if (isDefault) {
+        specifier = t.importDefaultSpecifier(t.identifier(imported));
+    }
+    else {
+        specifier = t.importSpecifier(t.identifier(local !== null && local !== void 0 ? local : imported), t.identifier(imported));
+    }
+    if (node) {
+        if (isDefault) {
+            node.specifiers.unshift(specifier);
+        }
+        else {
+            node.specifiers.push(specifier);
+        }
+    }
+    else {
+        file.program.body.unshift(t.importDeclaration([specifier], t.stringLiteral(source)));
+    }
+    return isDefault ? imported : local !== null && local !== void 0 ? local : imported;
+};

package/compiler/utils/getType.js

@@ -1,5 +1,5 @@
 import { parse } from '@babel/parser';
-import fs from 'fs';
+import fs from 'fs-extra';
 import { dirname, resolve } from 'path';
 import { visitor } from './visitor.js';
 // TODO: return type

package/compiler/utils/index.d.ts

@@ -1,4 +1,5 @@
 export * from './__dirname.js';
+export * from './addDependency.js';
 export * from './getInitializer.js';
 export * from './getType.js';
 export * from './getTypeReference.js';

package/compiler/utils/index.js

@@ -1,4 +1,5 @@
 export * from './__dirname.js';
+export * from './addDependency.js';
 export * from './getInitializer.js';
 export * from './getType.js';
 export * from './getTypeReference.js';

package/compiler/utils/isDirectoryEmpty.js

@@ -1,4 +1,4 @@
-import fs from 'fs';
+import fs from 'fs-extra';
 export const isDirectoryEmpty = (directory) => {
     try {
         const files = fs.readdirSync(directory);

package/compiler/utils/renderTemplate.js

@@ -1,5 +1,5 @@
 import glob from 'fast-glob';
-import fs from 'fs';
+import fs from 'fs-extra';
 import handlebars from 'handlebars';
 import path from 'path';
 export const renderTemplate = (source, destination, options) => (context) => {
@@ -17,9 +17,7 @@ export const renderTemplate = (source, destination, options) => (context) => {
         const directory = path.dirname(to);
         const raw = fs.readFileSync(from, 'utf8');
         const template = handlebars.compile(raw)(context);
-        if (!fs.existsSync(directory)) {
-            fs.mkdirSync(directory, { recursive: true });
-        }
+        fs.ensureDirSync(directory);
         fs.writeFileSync(to, template, 'utf8');
     }
 };

package/constants/index.d.ts

@@ -20,3 +20,4 @@ export declare const TYPE_DATE = "date";
 export declare const TYPE_FUNCTION = "function";
 export declare const TYPE_STRING = "string";
 export declare const TYPE_NUMBER = "number";
+export declare const UTILS_STYLE_MAP = "styles";

package/constants/index.js

@@ -27,3 +27,5 @@ export const TYPE_DATE = 'date';
 export const TYPE_FUNCTION = 'function';
 export const TYPE_STRING = 'string';
 export const TYPE_NUMBER = 'number';
+// utils
+export const UTILS_STYLE_MAP = 'styles';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@htmlplus/element",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "license": "MIT",
   "author": "Masood Abdolian <m.abdolian@gmail.com>",
   "description": "Compiler of HTMLPlus",
@@ -41,7 +41,6 @@
     "fast-glob": "^3.2.11",
     "fs-extra": "^10.1.0",
     "handlebars": "^4.7.7",
-    "listr2": "^5.0.1",
     "ora": "^6.1.2",
     "typescript": "^4.7.4"
   },

package/types/context.d.ts

@@ -1,5 +1,6 @@
 import { ClassBody, ClassDeclaration, ClassMethod, ClassProperty, File } from '@babel/types';
 export interface Context {
+    assets?: string;
     customElementNames?: Array<string>;
     dependencies?: Array<Context>;
     dependenciesUnresolved?: Array<string>;

package/compiler/plugins/external.js

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

package/compiler/plugins/vscode.d.ts

@@ -1,11 +0,0 @@
-import { Context } from '../../types/index.js';
-export interface VscodeOptions {
-    dist: string;
-    prefix: string;
-}
-export declare const vscode: (options: VscodeOptions) => {
-    name: string;
-    start: (global: any) => void;
-    next: (context: Context, global: any) => void;
-    finish: (global: any) => void;
-};

package/compiler/plugins/vscode.js

@@ -1,83 +0,0 @@
-import { paramCase } from 'change-case';
-import fs from 'fs';
-import path from 'path';
-import { getTags, getType, printType } from '../utils/index.js';
-export const vscode = (options) => {
-    const name = 'vscode';
-    const start = (global) => {
-        global.vscode = {
-            version: 1.1,
-            tags: []
-        };
-    };
-    const next = (context, global) => {
-        const readme = (() => {
-            try {
-                const source = path.resolve(context.directoryPath || '', `${context.fileName}.md`);
-                return fs.readFileSync(source, 'utf8');
-            }
-            catch (_a) { }
-        })();
-        const description = (() => {
-            const content = readme || '';
-            if (!content.startsWith('# '))
-                return '';
-            const sections = content.split('\n');
-            for (let i = 1; i < sections.length; i++) {
-                const section = sections[i].trim();
-                if (!section)
-                    continue;
-                return section;
-            }
-            return '';
-        })();
-        const properties = (context.classProperties || []).map((property) => {
-            var _a;
-            const name = paramCase(property.key['name']);
-            const description = (_a = getTags(property).find((tag) => !tag.key)) === null || _a === void 0 ? void 0 : _a.value;
-            const attribute = {
-                name,
-                description
-            };
-            // TODO
-            let { members = [] } = (() => {
-                const ast = getType(context.fileAST, (property.typeAnnotation || {})['typeAnnotation'], {
-                    directory: context.directoryPath
-                });
-                return printType(ast);
-            })();
-            // TODO
-            members = members.filter((member) => member.key !== member.type).map((member) => ({ name: member.key }));
-            if (members.length)
-                attribute.values = members;
-            return attribute;
-        });
-        global.vscode.tags.push({
-            name: context.componentKey,
-            description: {
-                kind: 'markdown',
-                value: description
-            },
-            attributes: properties,
-            references: [
-                {
-                    name: 'Source code',
-                    url: `https://github.com/htmlplus/core/tree/main/src/components/${context.directoryName}/${context.fileName}.tsx`
-                }
-            ]
-        });
-    };
-    const finish = (global) => {
-        global.vscode.tags = global.vscode.tags.sort((a, b) => (a.name > b.name ? 1 : -1));
-        // TODO
-        // fs.ensureDirSync(path.dirname(options.dist));
-        // TODO
-        // fs.writeJSONSync(options.dist, global.vscode, { replacer: null, spaces: 2 });
-    };
-    return {
-        name,
-        start,
-        next,
-        finish
-    };
-};