@htmlplus/element 0.3.0 → 0.3.1

package/dist/compiler/plugins/extract.js

@@ -1,70 +0,0 @@
-import * as t from '@babel/types';
-import { pascalCase, paramCase } from 'change-case';
-import path from 'path';
-import * as CONSTANTS from '../../constants/index.js';
-import { hasDecorator, visitor } from '../utils/index.js';
-export const extract = (options) => {
-    const name = 'extract';
-    const next = (context) => {
-        var _a, _b;
-        visitor(context.fileAST, {
-            ClassDeclaration: {
-                exit(path) {
-                    var _a, _b;
-                    context.class = path.node;
-                    context.classMembers = ((_b = (_a = context.class) === null || _a === void 0 ? void 0 : _a.body) === null || _b === void 0 ? void 0 : _b.body) || [];
-                    path.skip();
-                }
-            },
-            Decorator(path) {
-                var _a;
-                const name = (_a = path.node.expression.callee) === null || _a === void 0 ? void 0 : _a.name;
-                // TODO
-                if (CONSTANTS.DECORATOR_ELEMENT == name) {
-                    const [argument] = path.node.expression.arguments;
-                    if (argument) {
-                        context.componentTag = argument === null || argument === void 0 ? void 0 : argument.value;
-                        return;
-                    }
-                    context.componentTag = paramCase(path.parent.id.name);
-                    if (options === null || options === void 0 ? void 0 : options.prefix)
-                        context.componentTag = options.prefix + '-' + context.componentTag;
-                    path.replaceWith(t.decorator(t.callExpression(t.identifier(name), [
-                        t.stringLiteral(context.componentTag),
-                        ...path.node.expression.arguments.slice(1)
-                    ])));
-                    return;
-                }
-            }
-        });
-        context.directoryPath = path.dirname(context.filePath);
-        context.directoryName = path.basename(context.directoryPath);
-        context.fileExtension = path.extname(context.filePath);
-        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.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.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));
-        context.classStates = (context.classMembers || []).filter((member) => hasDecorator(member, CONSTANTS.DECORATOR_STATE));
-        context.classHasMount = (context.classMembers || []).some((member) => member['key'].name == CONSTANTS.LIFECYCLE_CONNECTED);
-        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
-    };
-};

package/dist/compiler/plugins/index.d.ts

@@ -1,7 +0,0 @@
-export * from './customElementReact/index.js';
-export * from './customElement.js';
-export * from './extract.js';
-export * from './parse.js';
-export * from './read.js';
-export * from './style.js';
-export * from './validate.js';

package/dist/compiler/plugins/index.js

@@ -1,7 +0,0 @@
-export * from './customElementReact/index.js';
-export * from './customElement.js';
-export * from './extract.js';
-export * from './parse.js';
-export * from './read.js';
-export * from './style.js';
-export * from './validate.js';

package/dist/compiler/plugins/parse.d.ts

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

package/dist/compiler/plugins/parse.js

@@ -1,16 +0,0 @@
-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/dist/compiler/plugins/read.d.ts

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

package/dist/compiler/plugins/read.js

@@ -1,13 +0,0 @@
-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/dist/compiler/plugins/style.d.ts

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

package/dist/compiler/plugins/style.js

@@ -1,42 +0,0 @@
-import t from '@babel/types';
-import fs from 'fs';
-import path from 'path';
-import core from 'sass';
-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;
-        const { css, loadedUrls } = core.compile(context.stylePath, Object.assign(Object.assign({}, (options.sass || {})), { style: 'compressed' }));
-        context.styleParsed = css.toString();
-        // TODO loadedUrls;
-        context.styleDependencies = [];
-        if (!context.styleParsed)
-            return;
-        context.class.body.body.unshift(t.classProperty(t.identifier(CONSTANTS.STATIC_STYLES), t.stringLiteral(context.styleParsed), undefined, null, undefined, true));
-    };
-    return {
-        name,
-        next
-    };
-};

package/dist/compiler/plugins/validate.d.ts

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

package/dist/compiler/plugins/validate.js

@@ -1,40 +0,0 @@
-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/dist/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/dist/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
-    };
-};

package/dist/compiler/utils/__dirname.d.ts

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

package/dist/compiler/utils/__dirname.js

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

package/dist/compiler/utils/get-initializer.d.ts

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

package/dist/compiler/utils/get-initializer.js

@@ -1,10 +0,0 @@
-// 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/dist/compiler/utils/get-tags.d.ts

@@ -1,6 +0,0 @@
-import { Node } from '@babel/types';
-export interface Tag {
-    key?: string;
-    value?: string;
-}
-export declare const getTags: (node?: Node | undefined) => Array<Tag>;

package/dist/compiler/utils/get-tags.js

@@ -1,34 +0,0 @@
-export const getTags = (node) => {
-    if (!node)
-        return [];
-    const tags = [];
-    const lines = [];
-    const comments = (node.leadingComments || [])
-        .map((comment) => comment.value)
-        .join('\r\n')
-        .split('\r\n');
-    for (const comment of comments) {
-        let line = comment.trimLeft();
-        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 });
-    }
-    return tags;
-};

package/dist/compiler/utils/get-type.d.ts

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

package/dist/compiler/utils/get-type.js

@@ -1,69 +0,0 @@
-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/dist/compiler/utils/has-decorator.d.ts

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

package/dist/compiler/utils/has-decorator.js

@@ -1,5 +0,0 @@
-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/dist/compiler/utils/index.d.ts

@@ -1,10 +0,0 @@
-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 './print.js';
-export * from './render-template.js';
-export * from './visitor.js';

package/dist/compiler/utils/index.js

@@ -1,10 +0,0 @@
-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 './print.js';
-export * from './render-template.js';
-export * from './visitor.js';

package/dist/compiler/utils/is-directory-empty.d.ts

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

package/dist/compiler/utils/is-directory-empty.js

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

package/dist/compiler/utils/print-type.d.ts

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

package/dist/compiler/utils/print-type.js

@@ -1,69 +0,0 @@
-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/dist/compiler/utils/print.d.ts

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

package/dist/compiler/utils/print.js

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

package/dist/compiler/utils/render-template.d.ts

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

package/dist/compiler/utils/render-template.js

@@ -1,25 +0,0 @@
-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/dist/compiler/utils/visitor.d.ts

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

package/dist/compiler/utils/visitor.js

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