@htmlplus/element 0.3.3 → 0.4.0

package/compiler/plugins/document.js

@@ -0,0 +1,254 @@
+import { capitalCase, paramCase } from 'change-case';
+import fs from 'fs';
+import glob from 'glob';
+import path from 'path';
+import { getInitializer, getTag, getTags, getTypeReference, hasTag, parseTag, print } from '../utils/index.js';
+export const document = (options) => {
+    const name = 'document';
+    const start = (global) => {
+        global.document = {
+            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;
+                            }
+                        }
+                    }
+                }
+                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) => {
+                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 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) { }
+        })();
+        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
+                };
+            });
+        })();
+        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) => {
+        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
+    };
+};

package/compiler/plugins/external.d.ts

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

package/compiler/plugins/external.js

@@ -0,0 +1,25 @@
+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/extract.js

@@ -43,18 +43,10 @@ export const extract = (options) => {
         context.fileName = path.basename(context.filePath, context.fileExtension);
         context.className = (_b = (_a = context.class) === null || _a === void 0 ? void 0 : _a.id) === null || _b === void 0 ? void 0 : _b.name;
         // TODO
-        // context.componentKey = paramCase(context.className);
-        context.componentClassName = pascalCase(context.componentTag.split('-').slice(1).join('-'));
+        context.componentClassName = pascalCase(context.componentTag);
+        context.componentClassNamePrune = pascalCase(context.componentTag.split('-').slice(1).join('-'));
         context.componentInterfaceName = `HTML${context.componentClassName}Element`;
-        // TODO
-        // const componentClassName           = "DialogBody";              [OK]
-        // const componentInterfaceName       = "HTMLDialogBodyElement";   [OK]
-        // const componentTag                 = "plus-dialog-body";        [OK]
-        // const componentClassNameInCategory = "Body";                    [RAW]
-        // const componentKey                 = "dialog-body-1";           [RAW]
-        // const fileName                     = "dialogBodyNew";           [OK]
-        // const className                    = "DialogBody1";             [OK]
-        // const category                     = "Dialog";                  [RAW]
+        context.componentKey = paramCase(context.componentClassNamePrune);
         context.classEvents = (context.classMembers || []).filter((member) => hasDecorator(member, CONSTANTS.DECORATOR_EVENT));
         context.classMethods = (context.classMembers || []).filter((member) => hasDecorator(member, CONSTANTS.DECORATOR_METHOD));
         context.classProperties = (context.classMembers || []).filter((member) => hasDecorator(member, CONSTANTS.DECORATOR_PROPERTY));

package/compiler/plugins/index.d.ts

@@ -1,5 +1,7 @@
 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,5 +1,7 @@
 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/style.js

@@ -26,7 +26,7 @@ export const style = (options) => {
         }
         if (!context.stylePath)
             return;
-        context.fileAST.program.body.unshift(t.importDeclaration([t.importDefaultSpecifier(t.identifier('AUTO_IMPORT_STYLE'))], t.stringLiteral(context.stylePath + '?inline')));
+        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 {

package/compiler/utils/getTypeReference.d.ts

@@ -0,0 +1,2 @@
+import { File, Node } from '@babel/types';
+export declare const getTypeReference: (file: File, node: Node) => string | undefined;

package/compiler/utils/getTypeReference.js

@@ -0,0 +1,33 @@
+import { visitor } from './visitor.js';
+export const getTypeReference = (file, node) => {
+    if (!node)
+        return;
+    if (node.type != 'TSTypeReference')
+        return;
+    let result;
+    visitor(file, {
+        ImportDeclaration(path) {
+            for (const specifier of path.node.specifiers) {
+                const alias = specifier.local.name;
+                if (alias != node.typeName['name'])
+                    continue;
+                let key;
+                switch (specifier.type) {
+                    case 'ImportNamespaceSpecifier':
+                        key = '*';
+                        break;
+                    case 'ImportDefaultSpecifier':
+                        key = 'default';
+                        break;
+                    case 'ImportSpecifier':
+                        key = specifier.imported.name;
+                        break;
+                }
+                result = path.node.source.value;
+                path.stop();
+                break;
+            }
+        }
+    });
+    return result;
+};

package/compiler/utils/index.d.ts

@@ -1,10 +1,11 @@
 export * from './__dirname.js';
-export * from './get-initializer.js';
-export * from './get-tags.js';
-export * from './get-type.js';
-export * from './has-decorator.js';
-export * from './is-directory-empty.js';
-export * from './print-type.js';
+export * from './getInitializer.js';
+export * from './getType.js';
+export * from './getTypeReference.js';
+export * from './hasDecorator.js';
+export * from './isDirectoryEmpty.js';
+export * from './printType.js';
 export * from './print.js';
-export * from './render-template.js';
+export * from './renderTemplate.js';
+export * from './tags.js';
 export * from './visitor.js';

package/compiler/utils/index.js

@@ -1,10 +1,11 @@
 export * from './__dirname.js';
-export * from './get-initializer.js';
-export * from './get-tags.js';
-export * from './get-type.js';
-export * from './has-decorator.js';
-export * from './is-directory-empty.js';
-export * from './print-type.js';
+export * from './getInitializer.js';
+export * from './getType.js';
+export * from './getTypeReference.js';
+export * from './hasDecorator.js';
+export * from './isDirectoryEmpty.js';
+export * from './printType.js';
 export * from './print.js';
-export * from './render-template.js';
+export * from './renderTemplate.js';
+export * from './tags.js';
 export * from './visitor.js';

package/compiler/utils/tags.d.ts

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

package/compiler/utils/tags.js

@@ -0,0 +1,53 @@
+export const getTag = (node, key) => {
+    return getTags(node, key).pop();
+};
+export const getTags = (node, filter) => {
+    var _a;
+    let tags = (_a = node['tags']) !== null && _a !== void 0 ? _a : [];
+    if (!node['tags']) {
+        const lines = [];
+        const comments = (node.leadingComments || [])
+            .slice(-1)
+            .map((comment) => comment.value)
+            .join('\r\n')
+            .split('\r\n');
+        for (const comment of comments) {
+            let line = comment.trimStart();
+            if (line.startsWith('*'))
+                line = line.slice(1);
+            if (!line)
+                continue;
+            const isTag = line.trim().startsWith('@');
+            if (isTag || !lines.length)
+                lines.push(line);
+            else
+                lines[lines.length - 1] += line;
+        }
+        for (const line of lines) {
+            let value = line.trim();
+            if (!value.startsWith('@')) {
+                tags.push({ value });
+                continue;
+            }
+            const sections = value.split(' ');
+            const key = sections[0].slice(1);
+            value = sections.slice(1).join(' ').trim();
+            tags.push({ key, value });
+        }
+        node['tags'] = tags;
+    }
+    return tags.filter((tag) => !filter || filter === tag.key);
+};
+export const hasTag = (node, name) => {
+    return getTags(node).some((tag) => tag.key === name);
+};
+export const parseTag = (tag, spliter = '-') => {
+    var _a, _b;
+    const sections = ((_a = tag.value) === null || _a === void 0 ? void 0 : _a.split(spliter)) || [];
+    const name = (_b = sections[0]) === null || _b === void 0 ? void 0 : _b.trim();
+    const description = sections.slice(1).join(spliter).trim();
+    return {
+        name,
+        description
+    };
+};

package/constants/index.d.ts

@@ -1,7 +1,6 @@
 export declare const PACKAGE_NAME = "@htmlplus/element";
 export declare const API_HOST = "$host$";
 export declare const API_READY = "$ready$";
-export declare const API_SETUP = "$setup$";
 export declare const DECORATOR_ELEMENT = "Element";
 export declare const DECORATOR_EVENT = "Event";
 export declare const DECORATOR_PROPERTY = "Property";

package/constants/index.js

@@ -2,7 +2,6 @@ export const PACKAGE_NAME = '@htmlplus/element';
 // apis
 export const API_HOST = '$host$';
 export const API_READY = '$ready$';
-export const API_SETUP = '$setup$';
 // decorators
 export const DECORATOR_ELEMENT = 'Element';
 export const DECORATOR_EVENT = 'Event';

package/package.json

@@ -1,22 +1,12 @@
 {
   "name": "@htmlplus/element",
-  "version": "0.3.3",
+  "version": "0.4.0",
   "license": "MIT",
   "author": "Masood Abdolian <m.abdolian@gmail.com>",
   "description": "Compiler of HTMLPlus",
   "type": "module",
-  "main": "./client/index.js",
-  "types": "./client/index.d.ts",
-  "scripts": {
-    "prebuild": "npm run clean",
-    "build": "tsc",
-    "build:watch": "tsc -w",
-    "postbuild": "node scripts/build.post.js",
-    "clean": "rimraf dist",
-    "format": "prettier --write .",
-    "dev:start": "node src/dev/scripts/start.js",
-    "dev:build": "node src/dev/scripts/build.js"
-  },
+  "main": "client/index.js",
+  "types": "client/index.d.ts",
   "files": [
     "client",
     "compiler",
@@ -26,6 +16,9 @@
     "package.json",
     "README.md"
   ],
+  "publishConfig": {
+    "directory": "dist"
+  },
   "engines": {
     "node": ">= 12.7.0"
   },
@@ -46,17 +39,21 @@
     "@types/node": "^16.11.11",
     "change-case": "^4.1.2",
     "fast-glob": "^3.2.11",
+    "fs-extra": "^10.1.0",
     "handlebars": "^4.7.7",
+    "listr2": "^4.0.5",
     "log-update": "^5.0.0",
-    "ts-node": "^10.4.0",
+    "ora": "^6.1.0",
     "typescript": "^4.5.2",
-    "uhtml": "^2.7.6"
+    "uhtml": "^3.0.1"
   },
   "devDependencies": {
     "@trivago/prettier-plugin-sort-imports": "^3.1.1",
-    "cpy": "^9.0.0",
+    "cpy": "^9.0.1",
+    "nodemon": "^2.0.16",
     "prettier": "^2.5.0",
     "rimraf": "^3.0.2",
+    "ts-node": "^10.7.0",
     "vite": "^2.7.10"
   }
-}
+}

package/types/context.d.ts

@@ -4,7 +4,13 @@ export interface Context {
     dependenciesUnresolved?: Array<string>;
     isInvalid?: boolean;
     script?: string;
+    outputs?: Array<{
+        name: string;
+        options?: any;
+        output?: any;
+    }>;
     componentClassName?: string;
+    componentClassNamePrune?: string;
     componentInterfaceName?: string;
     componentKey?: string;
     componentTag?: string;

package/types/index.d.ts

@@ -1,4 +1,4 @@
 export * from './context.js';
 export * from './global.js';
 export * from './plugin.js';
-export * from './plus-element.js';
+export * from './plusElement.js';

package/types/index.js

@@ -1,4 +1,4 @@
 export * from './context.js';
 export * from './global.js';
 export * from './plugin.js';
-export * from './plus-element.js';
+export * from './plusElement.js';

package/types/plugin.d.ts

@@ -3,7 +3,8 @@ import { Global } from './global';
 export declare type Return<T> = void | T | Promise<T>;
 export declare type Plugin = {
     name: string;
-    start?: (global: Global) => Return<Global>;
-    next?: (context: Context, global: Global) => Return<Context>;
-    finish?: (global: Global) => Return<Global>;
+    options?: any;
+    start?: (global: Global) => Return<void>;
+    next?: (context: Context, global: Global) => Return<any>;
+    finish?: (global: Global) => Return<void>;
 };

package/client/utils/is-ready.d.ts

@@ -1,2 +0,0 @@
-import { PlusElement } from '../../types/index.js';
-export declare const isReady: (target: PlusElement) => boolean;

package/client/utils/is-ready.js

@@ -1,4 +0,0 @@
-import * as CONSTANTS from '../../constants/index.js';
-export const isReady = (target) => {
-    return target[CONSTANTS.API_READY];
-};