@htmlplus/element 2.12.0 → 2.13.0

package/transformer/plugins/document.js

@@ -1,206 +0,0 @@
-import { capitalCase, kebabCase } from 'change-case';
-import fs from 'fs-extra';
-import { glob } from 'glob';
-import path from 'path';
-import * as CONSTANTS from '../../constants/index.js';
-import { extractAttribute, extractFromComment, getInitializer, getTypeReference, print } from '../utils/index.js';
-export const DOCUMENT_OPTIONS = {
-    destination: path.join('dist', 'document.json')
-};
-export const document = (options) => {
-    const name = 'document';
-    options = Object.assign({}, DOCUMENT_OPTIONS, options);
-    const write = (global) => {
-        const json = {
-            elements: []
-        };
-        for (const context of global.contexts) {
-            const events = context.classEvents.map((event) => {
-                const cancelable = (() => {
-                    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 { }
-                    return false;
-                })();
-                const detail = print(event.typeAnnotation?.['typeAnnotation']);
-                const detailReference = getTypeReference(context.fileAST, event.typeAnnotation?.['typeAnnotation'].typeParameters.params[0]);
-                const name = event.key['name'];
-                return Object.assign({
-                    cancelable,
-                    detail,
-                    detailReference,
-                    name
-                }, extractFromComment(event));
-            });
-            const lastModified = glob
-                .sync('**/*.*', { cwd: context.directoryPath })
-                .map((file) => fs.statSync(path.join(context.directoryPath, file)).mtime)
-                .sort((a, b) => (a > b ? 1 : -1))
-                .pop();
-            const methods = context.classMethods.map((method) => {
-                const async = method.async;
-                const name = method.key['name'];
-                const comments = extractFromComment(method);
-                // TODO
-                const parameters = method.params.map((param) => ({
-                    description: comments.params?.find((item) => item.name == param['name'])?.description,
-                    required: !param['optional'],
-                    name: param['name'],
-                    type: print(param?.['typeAnnotation']?.typeAnnotation) || undefined,
-                    typeReference: getTypeReference(context.fileAST, param?.['typeAnnotation']?.typeAnnotation)
-                }));
-                // TODO
-                delete comments.params;
-                const returns = print(method.returnType?.['typeAnnotation']) || 'void';
-                const returnsReference = getTypeReference(context.fileAST, method.returnType?.['typeAnnotation']);
-                const signature = [
-                    method.key['name'],
-                    '(',
-                    parameters
-                        .map((parameter) => {
-                        let string = '';
-                        string += parameter.name;
-                        string += parameter.required ? '' : '?';
-                        string += parameter.type ? ': ' : '';
-                        string += parameter.type ?? '';
-                        return string;
-                    })
-                        .join(', '),
-                    ')',
-                    ' => ',
-                    returns
-                ].join('');
-                return Object.assign({
-                    async,
-                    name,
-                    parameters,
-                    returns,
-                    returnsReference,
-                    signature
-                }, comments, 
-                // TODO
-                {
-                    returns
-                }, 
-                // TODO
-                returns != 'void' &&
-                    comments.returns && {
-                    tags: [
-                        {
-                            key: 'returns',
-                            value: `${comments.returns}`
-                        }
-                    ]
-                });
-            });
-            const properties = context.classProperties.map((property) => {
-                const attribute = extractAttribute(property) || kebabCase(property.key['name']);
-                // TODO
-                const initializer = getInitializer(property.value);
-                const name = property.key['name'];
-                const readonly = property['kind'] == 'get';
-                // TODO
-                const reflects = (() => {
-                    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 { }
-                    return false;
-                })();
-                const required = 'optional' in property && !property.optional;
-                // TODO
-                const type = property['returnType']
-                    ? print(property['returnType']?.['typeAnnotation'])
-                    : print(property.typeAnnotation?.['typeAnnotation']);
-                const typeReference = getTypeReference(context.fileAST, property.typeAnnotation?.['typeAnnotation']);
-                return Object.assign({
-                    attribute,
-                    initializer,
-                    name,
-                    readonly,
-                    reflects,
-                    required,
-                    type,
-                    typeReference
-                }, extractFromComment(property));
-            });
-            // TODO
-            const styles = (() => {
-                if (!context.styleContent)
-                    return [];
-                return context.styleContent
-                    .split(CONSTANTS.DECORATOR_CSS_VARIABLE)
-                    .slice(1)
-                    .map((section) => {
-                    const [first, second] = section.split(/\n/);
-                    const description = first.replace('*/', '').trim();
-                    const name = second.split(':')[0].trim();
-                    const initializerDefault = second.split(':').slice(1).join(':').replace(';', '').trim();
-                    // TODO
-                    const initializerTransformed = context.styleContentTransformed
-                        ?.split(name)
-                        ?.at(1)
-                        ?.split(':')
-                        ?.filter((section) => !!section)
-                        ?.at(0)
-                        ?.split(/;|}/)
-                        ?.at(0)
-                        ?.trim();
-                    const initializer = initializerTransformed || initializerDefault;
-                    return {
-                        description,
-                        initializer,
-                        name
-                    };
-                });
-            })();
-            const title = capitalCase(context.elementKey);
-            const element = Object.assign({
-                events,
-                key: context.elementKey,
-                lastModified,
-                methods,
-                properties,
-                readmeContent: context.readmeContent,
-                styles,
-                title
-            }, extractFromComment(context.class));
-            const transformed = options.transformer?.(context, element) || element;
-            json.elements.push(transformed);
-        }
-        json.elements = json.elements.sort((a, b) => (a.title > b.title ? 1 : -1));
-        const dirname = path.dirname(options.destination);
-        fs.ensureDirSync(dirname);
-        fs.writeJSONSync(options.destination, json, { encoding: 'utf8', spaces: 2 });
-    };
-    return { name, write };
-};

package/transformer/plugins/extract.d.ts

@@ -1,2 +0,0 @@
-import { TransformerPlugin } from '../transformer.types.js';
-export declare const extract: () => TransformerPlugin;

package/transformer/plugins/extract.js

@@ -1,22 +0,0 @@
-import t from '@babel/types';
-import { kebabCase } from 'change-case';
-import * as CONSTANTS from '../../constants/index.js';
-import { hasDecorator } from '../utils/index.js';
-export const extract = () => {
-    const name = 'extract';
-    const run = (context) => {
-        const { declaration, leadingComments } = context.fileAST?.program.body.find((child) => {
-            return t.isExportNamedDeclaration(child);
-        });
-        context.class = declaration;
-        context.class.leadingComments = leadingComments; // TODO
-        context.classMembers = context.class?.body?.body || [];
-        context.className = context.class?.id?.name;
-        context.elementKey = kebabCase(context.className || '');
-        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));
-    };
-    return { name, run };
-};

package/transformer/plugins/index.d.ts

@@ -1,12 +0,0 @@
-export * from './assets.js';
-export * from './copy.js';
-export * from './customElement.js';
-export * from './document.js';
-export * from './extract.js';
-export * from './parse.js';
-export * from './read.js';
-export * from './readme.js';
-export * from './style.js';
-export * from './validate.js';
-export * from './visualStudioCode.js';
-export * from './webTypes.js';

package/transformer/plugins/index.js

@@ -1,12 +0,0 @@
-export * from './assets.js';
-export * from './copy.js';
-export * from './customElement.js';
-export * from './document.js';
-export * from './extract.js';
-export * from './parse.js';
-export * from './read.js';
-export * from './readme.js';
-export * from './style.js';
-export * from './validate.js';
-export * from './visualStudioCode.js';
-export * from './webTypes.js';

package/transformer/plugins/parse.d.ts

@@ -1,6 +0,0 @@
-import { ParserOptions } from '@babel/parser';
-import { TransformerPlugin } from '../transformer.types.js';
-export declare const PARSE_OPTIONS: Partial<ParseOptions>;
-export interface ParseOptions extends ParserOptions {
-}
-export declare const parse: (options?: ParseOptions) => TransformerPlugin;

package/transformer/plugins/parse.js

@@ -1,13 +0,0 @@
-import { parse as parser } from '@babel/parser';
-export const PARSE_OPTIONS = {
-    sourceType: 'module',
-    plugins: [['decorators', { decoratorsBeforeExport: true }], 'jsx', 'typescript']
-};
-export const parse = (options) => {
-    const name = 'parse';
-    options = Object.assign({}, PARSE_OPTIONS, options);
-    const run = (context) => {
-        context.fileAST = parser(context.fileContent, options);
-    };
-    return { name, run };
-};

package/transformer/plugins/read.d.ts

@@ -1,7 +0,0 @@
-import { TransformerPlugin } from '../transformer.types.js';
-export declare const READ_OPTIONS: Partial<ReadOptions>;
-export interface ReadOptions {
-    encoding: 'utf8' | 'ascii' | 'utf-8' | 'utf16le' | 'utf-16le' | 'ucs2' | 'ucs-2' | 'base64' | 'base64url' | 'latin1' | 'binary' | 'hex';
-    flag?: string | undefined;
-}
-export declare const read: (options?: ReadOptions) => TransformerPlugin;

package/transformer/plugins/read.js

@@ -1,19 +0,0 @@
-import fs from 'fs-extra';
-import path from 'path';
-export const READ_OPTIONS = {
-    encoding: 'utf8'
-};
-export const read = (options) => {
-    const name = 'read';
-    options = Object.assign({}, READ_OPTIONS, options);
-    const run = (context) => {
-        if (!context.filePath)
-            return;
-        context.fileContent = fs.readFileSync(context.filePath, options);
-        context.fileExtension = path.extname(context.filePath);
-        context.fileName = path.basename(context.filePath, context.fileExtension);
-        context.directoryPath = path.dirname(context.filePath);
-        context.directoryName = path.basename(context.directoryPath);
-    };
-    return { name, run };
-};

package/transformer/plugins/readme.d.ts

@@ -1,6 +0,0 @@
-import { TransformerPlugin, TransformerPluginContext } from '../transformer.types.js';
-export declare const README_OPTIONS: Partial<ReadmeOptions>;
-export interface ReadmeOptions {
-    source?: (context: TransformerPluginContext) => string;
-}
-export declare const readme: (options?: ReadmeOptions) => TransformerPlugin;

package/transformer/plugins/readme.js

@@ -1,24 +0,0 @@
-import fs from 'fs-extra';
-import path from 'path';
-export const README_OPTIONS = {
-    source(context) {
-        return path.join(context.directoryPath, `${context.fileName}.md`);
-    }
-};
-export const readme = (options) => {
-    const name = 'readme';
-    options = Object.assign({}, README_OPTIONS, options);
-    const finish = (global) => {
-        for (const context of global.contexts) {
-            context.readmePath = options.source(context);
-            if (!context.readmePath)
-                continue;
-            if (!fs.existsSync(context.readmePath))
-                continue;
-            context.readmeContent = fs.readFileSync(context.readmePath, 'utf8');
-            context.readmeExtension = path.extname(context.readmePath);
-            context.readmeName = path.basename(context.readmePath, context.readmeExtension);
-        }
-    };
-    return { name, finish };
-};

package/transformer/plugins/style.d.ts

@@ -1,6 +0,0 @@
-import { TransformerPlugin, TransformerPluginContext } from '../transformer.types.js';
-export declare const STYLE_OPTIONS: Partial<StyleOptions>;
-export interface StyleOptions {
-    source?: (context: TransformerPluginContext) => string | string[];
-}
-export declare const style: (options?: StyleOptions) => TransformerPlugin;

package/transformer/plugins/style.js

@@ -1,42 +0,0 @@
-import t from '@babel/types';
-import fs from 'fs-extra';
-import path from 'path';
-import * as CONSTANTS from '../../constants/index.js';
-import { addDependency } from '../utils/index.js';
-export const STYLE_OPTIONS = {
-    source(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({}, STYLE_OPTIONS, options);
-    const run = (context) => {
-        const sources = [options.source(context)].flat();
-        for (const source of sources) {
-            if (!source)
-                continue;
-            if (!fs.existsSync(source))
-                continue;
-            context.stylePath = source;
-            break;
-        }
-        if (!context.stylePath)
-            return;
-        context.styleContent = fs.readFileSync(context.stylePath, 'utf8');
-        context.styleExtension = path.extname(context.stylePath);
-        context.styleName = path.basename(context.stylePath, context.styleExtension);
-        const { local } = addDependency(context.fileAST, context.stylePath, CONSTANTS.STYLE_IMPORTED, undefined, true);
-        // TODO: remove 'local!'
-        const property = t.classProperty(t.identifier(CONSTANTS.STATIC_STYLE), t.identifier(local), undefined, null, undefined, true);
-        t.addComment(property, 'leading', CONSTANTS.COMMENT_AUTO_ADDED, true);
-        context.class.body.body.unshift(property);
-    };
-    return { name, run };
-};

package/transformer/plugins/validate.d.ts

@@ -1,2 +0,0 @@
-import { TransformerPlugin } from '../transformer.types.js';
-export declare const validate: () => TransformerPlugin;

package/transformer/plugins/validate.js

@@ -1,40 +0,0 @@
-import t from '@babel/types';
-import * as CONSTANTS from '../../constants/index.js';
-import { visitor } from '../utils/index.js';
-export const validate = () => {
-    const name = 'validate';
-    const run = (context) => {
-        context.skipped = true;
-        visitor(context.fileAST, {
-            ImportDeclaration(path) {
-                if (path.node.source?.value !== CONSTANTS.PACKAGE_NAME)
-                    return;
-                for (const specifier of path.node.specifiers) {
-                    if (specifier.imported.name !== CONSTANTS.DECORATOR_ELEMENT)
-                        continue;
-                    const binding = path.scope.getBinding(specifier.imported.name);
-                    if (binding.references == 0)
-                        break;
-                    const referencePaths = binding.referencePaths.filter((referencePath) => {
-                        if (t.isCallExpression(referencePath.parent) &&
-                            t.isDecorator(referencePath.parentPath.parent) &&
-                            t.isClassDeclaration(referencePath.parentPath.parentPath.parent) &&
-                            t.isExportNamedDeclaration(referencePath.parentPath.parentPath.parentPath.parent))
-                            return true;
-                    });
-                    if (referencePaths.length > 1) {
-                        throw new Error('In each file, only one custom element can be defined. \n' +
-                            'If more than one @Element() decorator is used in the file, it will result in an error.\n');
-                    }
-                    context.skipped = false;
-                    if (referencePaths.length == 1)
-                        break;
-                    throw new Error('It appears that the class annotated with the @Element() decorator is not being exported correctly.');
-                }
-                path.stop();
-            }
-        });
-        context.skipped;
-    };
-    return { name, run };
-};

package/transformer/plugins/visualStudioCode.d.ts

@@ -1,8 +0,0 @@
-import { TransformerPlugin, TransformerPluginContext } from '../transformer.types.js';
-export declare const VISUAL_STUDIO_CODE_OPTIONS: Partial<VisualStudioCodeOptions>;
-export interface VisualStudioCodeOptions {
-    destination?: string;
-    reference?: (context: TransformerPluginContext) => string;
-    transformer?: (context: TransformerPluginContext, element: any) => any;
-}
-export declare const visualStudioCode: (options?: VisualStudioCodeOptions) => TransformerPlugin;

package/transformer/plugins/visualStudioCode.js

@@ -1,73 +0,0 @@
-import { kebabCase } from 'change-case';
-import fs from 'fs-extra';
-import path from 'path';
-import { extractAttribute, extractFromComment, getType, print } from '../utils/index.js';
-export const VISUAL_STUDIO_CODE_OPTIONS = {
-    destination: path.join('dist', 'visual-studio-code.json')
-};
-export const visualStudioCode = (options) => {
-    const name = 'visualStudioCode';
-    options = Object.assign({}, VISUAL_STUDIO_CODE_OPTIONS, options);
-    const finish = (global) => {
-        const contexts = global.contexts.sort((a, b) => {
-            return a.elementKey.toUpperCase() > b.elementKey.toUpperCase() ? +1 : -1;
-        });
-        const json = {
-            $schema: 'TODO',
-            version: 1.1,
-            tags: []
-        };
-        for (const context of contexts) {
-            const tag = Object.assign({
-                name: context.elementKey,
-                attributes: [],
-                references: [
-                    {
-                        name: 'Source code',
-                        url: options.reference?.(context)
-                    }
-                ]
-            }, extractFromComment(context.class, ['description']));
-            for (const property of context.classProperties || []) {
-                const attribute = Object.assign({
-                    name: extractAttribute(property) || kebabCase(property.key['name']),
-                    values: []
-                }, extractFromComment(property, ['description']));
-                const type = print(getType(context.directoryPath, context.fileAST, property.typeAnnotation?.['typeAnnotation']));
-                const sections = type.split('|');
-                for (const section of sections) {
-                    const trimmed = section.trim();
-                    if (!trimmed)
-                        continue;
-                    const isBoolean = /bool|boolean|Boolean/.test(trimmed);
-                    const isNumber = !isNaN(trimmed);
-                    const isString = /^("|'|`)/.test(trimmed);
-                    if (isBoolean) {
-                        attribute.values.push({
-                            name: 'false'
-                        }, {
-                            name: 'true'
-                        });
-                    }
-                    else if (isNumber) {
-                        attribute.values.push({
-                            name: trimmed
-                        });
-                    }
-                    else if (isString) {
-                        attribute.values.push({
-                            name: trimmed.slice(1, -1)
-                        });
-                    }
-                }
-                tag.attributes.push(attribute);
-            }
-            const transformed = options.transformer?.(context, tag) || tag;
-            json.tags.push(transformed);
-        }
-        const dirname = path.dirname(options.destination);
-        fs.ensureDirSync(dirname);
-        fs.writeJSONSync(options.destination, json, { encoding: 'utf8', spaces: 2 });
-    };
-    return { name, finish };
-};

package/transformer/plugins/webTypes.d.ts

@@ -1,10 +0,0 @@
-import { TransformerPlugin, TransformerPluginContext } from '../transformer.types.js';
-export declare const WEB_TYPES_OPTIONS: Partial<WebTypesOptions>;
-export interface WebTypesOptions {
-    destination?: string;
-    packageName?: string;
-    packageVersion?: string;
-    reference?: (context: TransformerPluginContext) => string;
-    transformer?: (context: TransformerPluginContext, element: any) => any;
-}
-export declare const webTypes: (options?: WebTypesOptions) => TransformerPlugin;

package/transformer/plugins/webTypes.js

@@ -1,74 +0,0 @@
-import { kebabCase } from 'change-case';
-import fs from 'fs-extra';
-import path from 'path';
-import { extractAttribute, extractFromComment, getInitializer, getType, print } from '../utils/index.js';
-export const WEB_TYPES_OPTIONS = {
-    destination: path.join('dist', 'web-types.json'),
-    packageName: '',
-    packageVersion: ''
-};
-export const webTypes = (options) => {
-    const name = 'webTypes';
-    options = Object.assign({}, WEB_TYPES_OPTIONS, options);
-    const finish = (global) => {
-        const contexts = global.contexts.sort((a, b) => {
-            return a.elementKey.toUpperCase() > b.elementKey.toUpperCase() ? +1 : -1;
-        });
-        const json = {
-            '$schema': 'http://json.schemastore.org/web-types',
-            'name': options.packageName,
-            'version': options.packageVersion,
-            'description-markup': 'markdown',
-            'framework-config': {
-                'enable-when': {
-                    'node-packages': [options.packageName]
-                }
-            },
-            'contributions': {
-                html: {
-                    elements: []
-                }
-            }
-        };
-        for (const context of contexts) {
-            const attributes = context.classProperties?.map((property) => Object.assign({
-                name: extractAttribute(property) || kebabCase(property.key['name']),
-                value: {
-                    // kind: TODO
-                    type: print(getType(context.directoryPath, context.fileAST, property.typeAnnotation?.['typeAnnotation']))
-                    // required: TODO
-                    // default: TODO
-                },
-                default: getInitializer(property.value)
-            }, extractFromComment(property, ['description', 'deprecated', 'experimental'])));
-            const events = context.classEvents?.map((event) => Object.assign({
-                name: kebabCase(event.key['name']) // TODO
-                // 'value': TODO
-            }, extractFromComment(event, ['description', 'deprecated', 'experimental'])));
-            const methods = context.classMethods?.map((method) => Object.assign({
-                name: method.key['name']
-                // 'value': TODO
-            }, extractFromComment(method, ['description', 'deprecated', 'experimental'])));
-            const properties = context.classProperties?.map((property) => Object.assign({
-                name: property.key['name'],
-                // 'value': TODO
-                default: getInitializer(property.value)
-            }, extractFromComment(property, ['description', 'deprecated', 'experimental'])));
-            const element = Object.assign({
-                'name': context.elementKey,
-                'doc-url': options.reference?.(context),
-                'js': {
-                    events,
-                    properties: [].concat(properties, methods)
-                },
-                attributes
-            }, extractFromComment(context.class, ['description', 'deprecated', 'experimental', 'slots']));
-            const transformed = options.transformer?.(context, element) || element;
-            json.contributions.html.elements.push(transformed);
-        }
-        const dirname = path.dirname(options.destination);
-        fs.ensureDirSync(dirname);
-        fs.writeJSONSync(options.destination, json, { encoding: 'utf8', spaces: 2 });
-    };
-    return { name, finish };
-};

package/transformer/transformer.d.ts

@@ -1,8 +0,0 @@
-import { TransformerPlugin, TransformerPluginContext, TransformerPluginGlobal } from './transformer.types.js';
-export declare const transformer: (...plugins: TransformerPlugin[]) => {
-    global: TransformerPluginGlobal;
-    start: () => Promise<void>;
-    run: (filePath: string) => Promise<TransformerPluginContext>;
-    finish: () => Promise<void>;
-    write: () => Promise<void>;
-};