@htmlplus/element 0.3.3 → 0.4.2

package/types/context.d.ts

@@ -1,10 +1,17 @@
 import { ClassBody, ClassDeclaration, ClassMethod, ClassProperty, File } from '@babel/types';
 export interface Context {
+    customElementNames?: Array<string>;
     dependencies?: Array<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];
-};

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

@@ -1,2 +0,0 @@
-import { PlusElement } from '../../types/index.js';
-export declare function onReady(target: PlusElement, callback: (this: any) => void): void;

package/client/utils/on-ready.js

@@ -1,6 +0,0 @@
-import * as CONSTANTS from '../../constants/index.js';
-export function onReady(target, callback) {
-    var _a;
-    var _b;
-    ((_a = target[_b = CONSTANTS.API_SETUP]) !== null && _a !== void 0 ? _a : (target[_b] = [])).push(callback);
-}

package/client/utils/render.d.ts

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

package/client/utils/render.js

@@ -1,19 +0,0 @@
-import { html, render as renderer } from 'uhtml';
-import * as CONSTANTS from '../../constants/index.js';
-import { call } from './call.js';
-import { getStyles } from './get-styles.js';
-import { host } from './host.js';
-export const render = (target) => {
-    const element = host(target);
-    renderer(element.shadowRoot, () => {
-        const markup = call(target, CONSTANTS.METHOD_RENDER);
-        const styles = getStyles(target);
-        if (!styles && !markup)
-            return html ``;
-        if (!styles)
-            return markup;
-        if (!markup)
-            return html `<style>${styles}</style>`;
-        return html `<style>${styles}</style>${markup}`;
-    });
-};

package/compiler/plugins/componentDependencyResolver.d.ts

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

package/compiler/plugins/componentDependencyResolver.js

@@ -1,40 +0,0 @@
-import { visitor } from '../utils/index.js';
-export const componentDependencyResolver = () => {
-    const name = 'componentDependencyResolver';
-    const next = (context, global) => {
-        var _a, _b, _c, _d;
-        if (!context.dependenciesUnresolved) {
-            visitor(context.fileAST, {
-                JSXOpeningElement(path) {
-                    var _a, _b, _c;
-                    const name = path.node.name.name;
-                    if (!name.includes('-'))
-                        return;
-                    const find = (_a = context.dependenciesUnresolved) === null || _a === void 0 ? void 0 : _a.includes(name);
-                    if (find)
-                        return;
-                    (_b = context.dependenciesUnresolved) !== null && _b !== void 0 ? _b : (context.dependenciesUnresolved = []);
-                    (_c = context.dependenciesUnresolved) === null || _c === void 0 ? void 0 : _c.push(name);
-                }
-            });
-        }
-        for (const current of global.contexts) {
-            if (!((_a = current.dependenciesUnresolved) === null || _a === void 0 ? void 0 : _a.length))
-                continue;
-            const dependencies = global.contexts.filter((context) => { var _a; return (_a = current.dependenciesUnresolved) === null || _a === void 0 ? void 0 : _a.includes(context.componentTag); });
-            for (const dependency of dependencies) {
-                if ((_b = current.dependencies) === null || _b === void 0 ? void 0 : _b.some((item) => item.componentTag == dependency.componentTag))
-                    continue;
-                (_c = current.dependencies) !== null && _c !== void 0 ? _c : (current.dependencies = []);
-                current.dependencies.push(dependency);
-                current.dependenciesUnresolved = (_d = current.dependenciesUnresolved) === null || _d === void 0 ? void 0 : _d.filter((current) => current != dependency.componentTag);
-                // TODO
-                // current.fileAST!.program.body.unshift(t.importDeclaration([], t.stringLiteral(dependency.filePath!)));
-            }
-        }
-    };
-    return {
-        name,
-        next
-    };
-};

package/compiler/plugins/docs.js

@@ -1,320 +0,0 @@
-import { capitalCase, paramCase } from 'change-case';
-import fs from 'fs';
-// import glob from 'glob';
-import path from 'path';
-import { getInitializer, getTags, getType, printType } from '../utils/index.js';
-export const docs = (options) => {
-    const name = 'docs';
-    const start = (global) => {
-        global.docs = {
-            prefix: options.prefix,
-            components: []
-        };
-    };
-    const next = (context, global) => {
-        var _a;
-        const tags = getTags(context.class);
-        const development = tags.some((tag) => tag.key == 'development');
-        const experimental = tags.some((tag) => tag.key == 'experimental');
-        const externals = fs.existsSync(path.resolve(context.directoryPath || '', 'externals'));
-        const examples = (() => {
-            const items = [];
-            const source = path.join(context.directoryPath || '', 'examples');
-            if (!fs.existsSync(source))
-                return items;
-            return fs
-                .readdirSync(source)
-                .filter((file) => file.endsWith('.md'))
-                .map((file) => {
-                const item = {};
-                const regex = /```\w+\s\[\w+(:\w+)?\]\s[\S\s]*?```/g;
-                const filePath = path.join(source, file);
-                const content = fs.readFileSync(filePath, 'utf8');
-                item.key = path.basename(filePath).replace('.md', '');
-                item.title = capitalCase(item.key);
-                item.readme = content.replace(regex, '').trim();
-                item.codes = (content.match(regex) || []).map((section) => {
-                    try {
-                        const lines = section.split('\n');
-                        const key = ((lines[0].match(/\[\w+(:\w+)?\]/) || []).shift() || '').replace('[', '').replace(']', '');
-                        const type = ((lines[0].match(/```\w+/) || []).pop() || '').replace('```', '');
-                        const value = lines.slice(1, -1).join('\n');
-                        return {
-                            key,
-                            type,
-                            value
-                        };
-                    }
-                    catch (_a) { }
-                });
-                return item;
-            });
-        })();
-        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 tags = getTags(property);
-            const name = property.key['name'];
-            const attribute = paramCase(name);
-            // TODO
-            const initializer = getInitializer(property.value);
-            // TODO
-            const reflect = (() => {
-                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;
-            })();
-            const required = !property.optional;
-            // TODO
-            const { type, members } = (() => {
-                const ast = getType(context.fileAST, (property.typeAnnotation || {})['typeAnnotation'], {
-                    directory: context.directoryPath
-                });
-                return printType(ast);
-            })();
-            const experimental = tags.some((tag) => tag.key == 'experimental');
-            const description = (_a = tags.find((tag) => !tag.key)) === null || _a === void 0 ? void 0 : _a.value;
-            const model = tags.some((tag) => tag.key == 'model');
-            return {
-                name,
-                attribute,
-                initializer,
-                reflect,
-                required,
-                type,
-                experimental,
-                description,
-                members,
-                model
-            };
-        });
-        const parts = tags
-            .filter((tag) => tag.key == 'part')
-            .map((tag) => {
-            var _a;
-            const sections = ((_a = tag.value) === null || _a === void 0 ? void 0 : _a.split('-')) || [];
-            const name = sections[0].trim();
-            const description = sections.slice(1).join('-').trim();
-            return {
-                name,
-                description
-            };
-        });
-        const methods = (context.classMethods || []).map((method) => {
-            var _a;
-            const tags = getTags(method);
-            const name = method.key['name'];
-            const experimental = tags.some((tag) => tag.key == 'experimental');
-            // TODO
-            // const params = printType(getType(
-            //     context.ast,
-            //     method.params,
-            //     {
-            //         directory: context.directory,
-            //     }
-            // ));
-            // console.log(111, params)
-            // TODO: returnType
-            const type = (() => {
-                try {
-                    return printType(getType(context.fileAST, (method.returnType || {})['typeAnnotation'], {
-                        directory: context.directoryPath
-                    }));
-                }
-                catch (_a) { }
-            })();
-            // TODO
-            const signature = `${method.key['name']}(${''}) => ${type}`;
-            const description = (_a = tags.find((tag) => !tag.key)) === null || _a === void 0 ? void 0 : _a.value;
-            // TODO
-            const parameters = [
-            // {
-            //     "name": "offsetX",
-            //     "description": "Moving size (px) in the `horizontal` direction. Use `null` to ignore this."
-            // },
-            // {
-            //     "name": "offsetY",
-            //     "description": "Moving size (px) in the `vertical` direction. Use `null` to ignore this."
-            // }
-            ];
-            return {
-                name,
-                experimental,
-                type,
-                signature,
-                description,
-                parameters
-            };
-        });
-        const slots = tags
-            .filter((tag) => tag.key == 'slot')
-            .map((tag) => {
-            var _a;
-            const sections = ((_a = tag.value) === null || _a === void 0 ? void 0 : _a.split('-')) || [];
-            const name = sections[0].trim();
-            const description = sections.slice(1).join('-').trim();
-            return {
-                name,
-                description
-            };
-        });
-        const events = (context.classEvents || []).map((event) => {
-            var _a;
-            const tags = getTags(event);
-            const name = event.key['name'];
-            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 (_a) { }
-                return false;
-            })();
-            // TODO
-            const detail = (() => {
-                try {
-                    return printType(getType(context.fileAST, (event.typeAnnotation || {})['typeAnnotation'].typeParameters.params[0], {
-                        directory: context.directoryPath
-                    }));
-                }
-                catch (_a) { }
-            })();
-            const experimental = tags.some((tag) => tag.key == 'experimental');
-            const description = (_a = tags.find((tag) => !tag.key)) === null || _a === void 0 ? void 0 : _a.value;
-            const model = tags.some((tag) => tag.key == 'model');
-            return {
-                name,
-                cancelable,
-                detail,
-                experimental,
-                description,
-                model
-            };
-        });
-        const styles = (() => {
-            const styles = [];
-            try {
-                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();
-                    styles.push({
-                        name,
-                        initializer,
-                        description
-                    });
-                });
-            }
-            catch (_a) { }
-            return styles;
-        })();
-        // TODO
-        const lastModified = 0;
-        // glob
-        //     .sync(path.join(context.directory, '**/*.*'))
-        //     .reduce((result, file) => {
-        //         const state = fs.statSync(file);
-        //         return result > state.mtime ? result : state.mtime
-        //     }, 0);
-        const group = ((_a = tags.find((tag) => tag.key == 'group')) === null || _a === void 0 ? void 0 : _a.value) || null;
-        const main = (group && context.componentKey == group) || !group;
-        // TODO
-        // context.types = (() => {
-        //     return [];
-        // })();
-        global.docs.components.push({
-            key: context.componentKey,
-            tag: context.componentTag,
-            title: capitalCase(context.componentKey || ''),
-            main,
-            group,
-            development,
-            experimental,
-            // TODO
-            deprecated: false,
-            externals,
-            lastModified,
-            // TODO
-            tags: [],
-            // TODO
-            source: context.componentKey,
-            description,
-            readme,
-            properties,
-            slots,
-            events,
-            styles,
-            parts,
-            methods,
-            examples
-        });
-    };
-    const finish = (global) => {
-        global.docs.components = global.docs.components.sort((a, b) => (a.key > b.key ? 1 : -1));
-        // TODO
-        // fs.ensureDirSync(path.dirname(options.dist));
-        // TODO
-        // fs.writeJSONSync(options.dist, global.docs, { replacer: null, spaces: 2 });
-    };
-    return {
-        name,
-        start,
-        next,
-        finish
-    };
-};

package/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/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/runtime/index.d.ts

@@ -1 +0,0 @@
-export declare const html: (template: any, ...values: any[]) => any;

package/runtime/index.js

@@ -1,4 +0,0 @@
-import { html as core } from 'uhtml';
-export const html = (template, ...values) => {
-    return core(template, ...values);
-};