@htmlplus/element 0.3.1 → 0.4.0

package/compiler/plugins/parse.d.ts

@@ -0,0 +1,5 @@
+import { Context } from '../../types/index.js';
+export declare const parse: () => {
+    name: string;
+    next: (context: Context) => void;
+};

package/compiler/plugins/parse.js

@@ -0,0 +1,16 @@
+import { parse as parser } from '@babel/parser';
+export const parse = () => {
+    const name = 'parse';
+    const next = (context) => {
+        if (!!context.fileAST)
+            return;
+        context.fileAST = parser(context.fileContent, {
+            allowImportExportEverywhere: true,
+            plugins: ['jsx', 'typescript', 'decorators-legacy']
+        });
+    };
+    return {
+        name,
+        next
+    };
+};

package/compiler/plugins/read.d.ts

@@ -0,0 +1,5 @@
+import { Context } from '../../types/index.js';
+export declare const read: () => {
+    name: string;
+    next: (context: Context) => void;
+};

package/compiler/plugins/read.js

@@ -0,0 +1,13 @@
+import fs from 'fs';
+export const read = () => {
+    const name = 'read';
+    const next = (context) => {
+        if (!!context.fileContent)
+            return;
+        context.fileContent = fs.readFileSync(context.filePath, 'utf8');
+    };
+    return {
+        name,
+        next
+    };
+};

package/compiler/plugins/style.d.ts

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

package/compiler/plugins/style.js

@@ -0,0 +1,36 @@
+import t from '@babel/types';
+import fs from 'fs';
+import path from 'path';
+import * as CONSTANTS from '../../constants/index.js';
+const defaults = {
+    extensions: ['scss', 'css'],
+    directory(context) {
+        return context.directoryPath;
+    },
+    filename(context) {
+        return context.fileName;
+    }
+};
+export const style = (options) => {
+    const name = 'style';
+    options = Object.assign(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))
+                continue;
+            context.stylePath = stylePath;
+            break;
+        }
+        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
+    };
+};

package/compiler/plugins/validate.d.ts

@@ -0,0 +1,5 @@
+import { Context } from '../../types/index.js';
+export declare const validate: () => {
+    name: string;
+    next: (context: Context) => void;
+};

package/compiler/plugins/validate.js

@@ -0,0 +1,40 @@
+import * as CONSTANTS from '../../constants/index.js';
+import { hasDecorator, visitor } from '../utils/index.js';
+export const validate = () => {
+    const name = 'validate';
+    const next = (context) => {
+        let hasValidImport;
+        visitor(context.fileAST, {
+            ImportDeclaration(path) {
+                var _a;
+                if (((_a = path.node.source) === null || _a === void 0 ? void 0 : _a.value) !== CONSTANTS.PACKAGE_NAME)
+                    return;
+                for (const specifier of path.node.specifiers) {
+                    if (specifier.imported.name !== CONSTANTS.DECORATOR_ELEMENT)
+                        continue;
+                    hasValidImport = true;
+                    path.stop();
+                }
+            }
+        });
+        let hasValidExport;
+        visitor(context.fileAST, {
+            ExportNamedDeclaration(path) {
+                if (hasValidExport) {
+                    hasValidExport = false;
+                    return path.stop();
+                }
+                if (path.node.declaration.type !== 'ClassDeclaration')
+                    return;
+                if (!hasDecorator(path.node.declaration, CONSTANTS.DECORATOR_ELEMENT))
+                    return;
+                hasValidExport = true;
+            }
+        });
+        context.isInvalid = !hasValidImport || !hasValidExport;
+    };
+    return {
+        name,
+        next
+    };
+};

package/compiler/plugins/vscode.d.ts

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

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

package/compiler/utils/__dirname.d.ts

@@ -0,0 +1 @@
+export declare const __dirname: (url: string | URL) => string;

package/compiler/utils/__dirname.js

@@ -0,0 +1,5 @@
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+export const __dirname = (url) => {
+    return dirname(fileURLToPath(url));
+};

package/compiler/utils/getInitializer.d.ts

@@ -0,0 +1,2 @@
+import { Expression } from '@babel/types';
+export declare const getInitializer: (node: Expression) => any;

package/compiler/utils/getInitializer.js

@@ -0,0 +1,10 @@
+// TODO: return type
+export const getInitializer = (node) => {
+    if (!node)
+        return node;
+    const value = node;
+    if (!value)
+        return;
+    const extra = value.extra || {};
+    return extra.raw || value['value'];
+};

package/compiler/utils/getType.d.ts

@@ -0,0 +1,2 @@
+import { File } from '@babel/types';
+export declare const getType: (file: File, node: any, options: any) => any;

package/compiler/utils/getType.js

@@ -0,0 +1,69 @@
+import { parse } from '@babel/parser';
+import fs from 'fs';
+import { dirname, resolve } from 'path';
+import { visitor } from './visitor.js';
+// TODO: return type
+export const getType = (file, node, options) => {
+    if (!node)
+        return node;
+    if (node.type != 'TSTypeReference')
+        return node;
+    const { directory } = options;
+    let result;
+    visitor(file, {
+        ClassDeclaration(path) {
+            if (path.node.id.name != node.typeName.name)
+                return;
+            result = path.node;
+            path.stop();
+        },
+        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;
+                }
+                try {
+                    const filePath = resolve(directory, path.node.source.value + '.ts');
+                    path.$ast =
+                        path.$ast ||
+                            parse(fs.readFileSync(filePath, 'utf8'), {
+                                allowImportExportEverywhere: true,
+                                plugins: ['typescript'],
+                                ranges: false
+                            });
+                    result = getType(path.$ast, node, {
+                        directory: dirname(filePath)
+                    });
+                }
+                catch (_a) { }
+                path.stop();
+                break;
+            }
+        },
+        TSInterfaceDeclaration(path) {
+            if (path.node.id.name != node.typeName.name)
+                return;
+            result = path.node;
+            path.stop();
+        },
+        TSTypeAliasDeclaration(path) {
+            if (path.node.id.name != node.typeName.name)
+                return;
+            result = path.node;
+            path.stop();
+        }
+    });
+    return result || node;
+};

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

@@ -0,0 +1 @@
+export declare const hasDecorator: (node: any, name: string) => boolean;

package/compiler/utils/hasDecorator.js

@@ -0,0 +1,5 @@
+export const hasDecorator = (node, name) => {
+    if (!node.decorators)
+        return false;
+    return !!node.decorators.some((decorator) => { var _a; return ((_a = decorator.expression.callee) === null || _a === void 0 ? void 0 : _a.name) == name; });
+};

package/compiler/utils/index.d.ts

@@ -0,0 +1,11 @@
+export * from './__dirname.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 './renderTemplate.js';
+export * from './tags.js';
+export * from './visitor.js';

package/compiler/utils/index.js

@@ -0,0 +1,11 @@
+export * from './__dirname.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 './renderTemplate.js';
+export * from './tags.js';
+export * from './visitor.js';

package/compiler/utils/isDirectoryEmpty.d.ts

@@ -0,0 +1 @@
+export declare const isDirectoryEmpty: (directory: string) => boolean;

package/compiler/utils/isDirectoryEmpty.js

@@ -0,0 +1,10 @@
+import fs from 'fs';
+export const isDirectoryEmpty = (directory) => {
+    try {
+        const files = fs.readdirSync(directory);
+        return !files.length;
+    }
+    catch (_a) {
+        return true;
+    }
+};

package/compiler/utils/print.d.ts

@@ -0,0 +1,2 @@
+import { Node } from '@babel/types';
+export declare const print: (ast: Node) => string;

package/compiler/utils/print.js

@@ -0,0 +1,5 @@
+import generator from '@babel/generator';
+// TODO: add options
+export const print = (ast) => {
+    return (generator.default || generator)(ast, { decoratorsBeforeExport: true }).code;
+};

package/compiler/utils/printType.d.ts

@@ -0,0 +1 @@
+export declare const printType: (ast: any) => any;

package/compiler/utils/printType.js

@@ -0,0 +1,69 @@
+import { print } from './print.js';
+// TODO
+// args types
+// return type
+// components\grid-item\grid-item.types.ts
+// components\portal\portal.tsx
+export const printType = (ast) => {
+    if (!ast)
+        return ast;
+    let result = {};
+    switch (ast.type) {
+        case 'BooleanLiteral':
+        case 'NumericLiteral':
+        case 'StringLiteral': {
+            result.key = ast.value;
+            result.type = ast.type.replace('Literal', '').toLowerCase();
+            break;
+        }
+        case 'TSBooleanKeyword':
+        case 'TSNumberKeyword':
+        case 'TSStringKeyword': {
+            const type = ast.type.replace('TS', '').replace('Keyword', '').toLowerCase();
+            result.key = type;
+            result.type = type;
+            break;
+        }
+        case 'TSAnyKeyword': {
+            result.type = 'any';
+            break;
+        }
+        case 'TSArrayType': {
+            const type = print(ast.elementType) + '[]';
+            result.key = type;
+            result.type = type;
+            break;
+        }
+        case 'TSInterfaceDeclaration': {
+            result.type = ast.id.name;
+            result.members = ast.body.body.map((body) => printType(body));
+            break;
+        }
+        case 'TSLiteralType': {
+            result = printType(ast.literal);
+            break;
+        }
+        case 'TSPropertySignature': {
+            const { typeAnnotation } = ast;
+            result.key = ast.key.name;
+            if (typeAnnotation && typeAnnotation.typeAnnotation)
+                result.type = printType(ast.typeAnnotation.typeAnnotation).type;
+            break;
+        }
+        case 'TSTypeAliasDeclaration': {
+            result = printType(ast.typeAnnotation);
+            break;
+        }
+        case 'TSTypeReference': {
+            result.key = ast.typeName.name;
+            result.type = ast.typeName.name;
+            break;
+        }
+        case 'TSUnionType': {
+            result.type = print(ast);
+            result.members = ast.types.map((type) => printType(type));
+            break;
+        }
+    }
+    return result;
+};

package/compiler/utils/renderTemplate.d.ts

@@ -0,0 +1 @@
+export declare const renderTemplate: (source: string | Array<string>, destination: string, options?: any) => (context: any) => void;

package/compiler/utils/renderTemplate.js

@@ -0,0 +1,25 @@
+import glob from 'fast-glob';
+import fs from 'fs';
+import handlebars from 'handlebars';
+import path from 'path';
+export const renderTemplate = (source, destination, options) => (context) => {
+    const files = glob.sync(source, options);
+    for (const file of files) {
+        const from = path.resolve((options === null || options === void 0 ? void 0 : options.cwd) || '', file);
+        const to = path.join(destination, path
+            .normalize(file)
+            .split(path.sep)
+            .slice(1)
+            .map((section) => handlebars.compile(section)(context))
+            .join(path.sep)
+            .replace('_.', '.')
+            .replace('.hbs', ''));
+        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.writeFileSync(to, template, 'utf8');
+    }
+};

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/compiler/utils/visitor.d.ts

@@ -0,0 +1,2 @@
+import { Node } from '@babel/types';
+export declare const visitor: (ast: Node, options: any) => void;

package/compiler/utils/visitor.js

@@ -0,0 +1,5 @@
+import traverse from '@babel/traverse';
+// TODO: options type
+export const visitor = (ast, options) => {
+    (traverse.default || traverse)(ast, options);
+};

package/constants/index.d.ts

@@ -0,0 +1,22 @@
+export declare const PACKAGE_NAME = "@htmlplus/element";
+export declare const API_HOST = "$host$";
+export declare const API_READY = "$ready$";
+export declare const DECORATOR_ELEMENT = "Element";
+export declare const DECORATOR_EVENT = "Event";
+export declare const DECORATOR_PROPERTY = "Property";
+export declare const DECORATOR_STATE = "State";
+export declare const DECORATOR_METHOD = "Method";
+export declare const LIFECYCLE_ADOPTED = "adoptedCallback";
+export declare const LIFECYCLE_CONNECTED = "connectedCallback";
+export declare const LIFECYCLE_DISCONNECTED = "disconnectedCallback";
+export declare const LIFECYCLE_LOADED = "loadedCallback";
+export declare const LIFECYCLE_UPDATE = "updateCallback";
+export declare const LIFECYCLE_UPDATED = "updatedCallback";
+export declare const METHOD_RENDER = "render";
+export declare const STATIC_MEMBERS = "members";
+export declare const STATIC_STYLES = "styles";
+export declare const TYPE_BOOLEAN = "boolean";
+export declare const TYPE_DATE = "date";
+export declare const TYPE_FUNCTION = "function";
+export declare const TYPE_STRING = "string";
+export declare const TYPE_NUMBER = "number";