@htmlplus/element 0.7.2 → 0.7.4

package/compiler/plugins/customElement.js

@@ -36,7 +36,7 @@ export const customElement = (options) => {
                     return;
                 if (value.type != 'JSXExpressionContainer')
                     return;
-                const { local } = addDependency(path, CONSTANTS.PACKAGE_NAME, CONSTANTS.UTIL_STYLE_MAPPER, CONSTANTS.UTIL_STYLE_MAPPER);
+                const { local } = addDependency(path, CONSTANTS.UTILS_PATH, CONSTANTS.UTILS_STYLES_LOCAL, CONSTANTS.UTILS_STYLES_IMPORTED);
                 // TODO: remove 'local!'
                 path.replaceWith(t.jsxAttribute(t.jsxIdentifier('style'), t.jsxExpressionContainer(t.callExpression(t.identifier(local), [value.expression]))));
                 path.skip();
@@ -48,66 +48,130 @@ export const customElement = (options) => {
                 const { name, value } = path.node;
                 if (name.name != 'className')
                     return;
-                const hasClass = path.parentPath.node.attributes.some((attribute) => attribute.name.name == 'class');
+                const hasClass = path.parentPath.node.attributes.some((attribute) => { var _a; return ((_a = attribute.name) === null || _a === void 0 ? void 0 : _a.name) == 'class'; });
                 if (hasClass)
                     return path.remove();
                 path.replaceWith(t.jsxAttribute(t.jsxIdentifier('class'), value));
             }
         });
-        // replaces 'tabIndex' attribute with 'tabindex'
+        // TODO
         visitor(ast, {
             JSXAttribute(path) {
                 const { name, value } = path.node;
-                if (name.name != 'tabIndex')
+                const key = ['tabIndex', 'viewBox'];
+                if (!key.includes(name.name))
                     return;
-                path.replaceWith(t.jsxAttribute(t.jsxIdentifier('tabindex'), value));
+                path.replaceWith(t.jsxAttribute(t.jsxIdentifier(name.name.toLowerCase()), value));
             }
         });
         // converts 'jsx' to 'uhtml' syntax
         visitor(ast, {
-            JSXAttribute: {
-                exit(path) {
-                    var _a;
-                    if (((_a = path.node.value) === null || _a === void 0 ? void 0 : _a.type) == 'JSXExpressionContainer') {
-                        const node = path.node;
-                        path.replaceWith(t.jsxIdentifier(print(node).replace('={', '=${')));
-                        path.skip();
-                        return;
-                    }
-                }
-            },
-            JSXElement: {
-                exit(path) {
-                    if (path.parent.type == 'JSXElement' || path.parent.type == 'JSXFragment') {
-                        path.replaceWith(t.identifier(print(path.node)));
-                    }
-                    else {
-                        path.replaceWith(t.memberExpression(t.identifier('uhtml'), t.identifier(`html\`${print(path.node)}\``)));
+            enter(path) {
+                const { type } = path.node;
+                if (!['JSXElement', 'JSXFragment'].includes(type))
+                    return;
+                const TODO = (node, attributes) => {
+                    const { local } = addDependency(path, CONSTANTS.UTILS_PATH, CONSTANTS.UTILS_ATTRIBUTES_LOCAL, CONSTANTS.UTILS_ATTRIBUTES_IMPORTED);
+                    return t.callExpression(t.identifier(local), [
+                        node,
+                        t.arrayExpression(attributes.map((attribute) => {
+                            var _a;
+                            switch (attribute.type) {
+                                case 'JSXSpreadAttribute':
+                                    return attribute.argument;
+                                default:
+                                    return t.objectExpression([
+                                        t.objectProperty(t.stringLiteral(attribute.name.name), ((_a = attribute.value) === null || _a === void 0 ? void 0 : _a.type) == 'JSXExpressionContainer'
+                                            ? attribute.value.expression
+                                            : attribute.value || t.booleanLiteral(true))
+                                    ]);
+                            }
+                        }))
+                    ]);
+                };
+                const render = (node) => {
+                    switch (node.type) {
+                        case 'JSXElement':
+                            const attributes = node.openingElement.attributes;
+                            const isHost = node.openingElement.name.name == 'host';
+                            // TODO
+                            if (isHost) {
+                                const children = node.children.map(render).flat();
+                                if (!attributes.length)
+                                    return children;
+                                const { local } = addDependency(path, CONSTANTS.UTILS_PATH, CONSTANTS.UTILS_HOST_LOCAL, CONSTANTS.UTILS_HOST_IMPORTED);
+                                const host = t.callExpression(t.identifier(local), [t.thisExpression()]);
+                                return [TODO(host, attributes), ...children];
+                            }
+                            const name = node.openingElement.name.name;
+                            const children = node.children.map(render).flat();
+                            const parts = [];
+                            parts.push('<', name);
+                            const hasSpreadAttribute = attributes.some((attribute) => attribute.type == 'JSXSpreadAttribute');
+                            if (hasSpreadAttribute) {
+                                parts.push(' ', TODO(t.identifier('TODO'), attributes));
+                            }
+                            else {
+                                for (const attribute of attributes) {
+                                    switch (attribute.type) {
+                                        case 'JSXAttribute':
+                                            parts.push(' ', attribute.name.name);
+                                            if (!attribute.value)
+                                                continue;
+                                            parts.push('=');
+                                            switch (attribute.value.type) {
+                                                case 'JSXExpressionContainer':
+                                                    parts.push(attribute.value.expression);
+                                                    break;
+                                                default:
+                                                    parts.push(attribute.value.extra.raw);
+                                                    break;
+                                            }
+                                            break;
+                                        default:
+                                            parts.push(' ', attribute);
+                                            break;
+                                    }
+                                }
+                            }
+                            parts.push(node.closingElement ? '>' : ' />');
+                            parts.push(...children);
+                            if (node.closingElement) {
+                                parts.push('<', '/', name, '>');
+                            }
+                            return parts;
+                        case 'JSXFragment':
+                            return node.children.map(render).flat();
+                        case 'JSXText':
+                            return [node.extra.raw];
+                        case 'JSXExpressionContainer':
+                            if (node.expression.type == 'JSXEmptyExpression')
+                                return [];
+                            return [node.expression];
                     }
-                }
-            },
-            JSXFragment: {
-                exit(path) {
-                    path.replaceWith(t.memberExpression(t.identifier('uhtml'), t.identifier(['html`', ...path.node.children.map((child) => print(child)), '`'].join(''))));
-                }
-            },
-            JSXExpressionContainer: {
-                exit(path) {
-                    if (path.parent.type == 'JSXElement' || path.parent.type == 'JSXFragment') {
-                        path.replaceWith(t.identifier('$' + print(path.node)));
-                        return;
+                };
+                const transform = (parts) => {
+                    const quasis = [];
+                    const expressions = [];
+                    let i = 0;
+                    while (i < parts.length + 1) {
+                        let quasi = '';
+                        while (typeof parts[i] == 'string') {
+                            quasi += parts[i].replace(/[\\`]/g, (s) => `\\${s}`);
+                            i += 1;
+                        }
+                        quasis.push(t.templateElement({ raw: quasi }));
+                        if (parts[i] != null)
+                            expressions.push(parts[i]);
+                        i += 1;
                     }
-                }
-            },
-            JSXSpreadAttribute: {
-                enter(path) {
+                    const template = t.templateLiteral(quasis, expressions);
                     // TODO
-                    path.replaceWith(t.jsxAttribute(t.jsxIdentifier('.dataset'), t.jsxExpressionContainer(path.node.argument)));
-                }
-            },
-            Program(path) {
-                const { node } = addDependency(path, CONSTANTS.VENDOR_UHTML_PATH, 'uhtml');
-                t.addComment(node, 'leading', CONSTANTS.COMMENT_AUTO_ADDED_DEPENDENCY, true);
+                    // if (!expressions.length) return template;
+                    const { local } = addDependency(path, CONSTANTS.UTILS_PATH, CONSTANTS.UTILS_HTML_LOCAL, CONSTANTS.UTILS_HTML_IMPORTED);
+                    return t.taggedTemplateExpression(t.identifier(local), template);
+                };
+                path.replaceWith(transform(render(path.node)));
             }
         });
         // adds type to properties

package/compiler/plugins/style.js

@@ -30,8 +30,7 @@ export const style = (options) => {
         }
         if (!context.stylePath)
             return;
-        const { local, node } = addDependency(context.fileAST, context.stylePath, CONSTANTS.STYLE_IMPORTED);
-        t.addComment(node, 'leading', CONSTANTS.COMMENT_AUTO_ADDED_DEPENDENCY, true);
+        const { local } = addDependency(context.fileAST, context.stylePath, CONSTANTS.STYLE_IMPORTED);
         // TODO: remove 'local!'
         const property = t.classProperty(t.identifier(CONSTANTS.STATIC_STYLES), t.identifier(local), undefined, null, undefined, true);
         t.addComment(property, 'leading', CONSTANTS.COMMENT_AUTO_ADDED_PROPERTY, true);

package/compiler/utils/addDependency.js

@@ -1,4 +1,5 @@
 import t from '@babel/types';
+import * as CONSTANTS from '../../constants/index.js';
 import { visitor } from './visitor.js';
 export function addDependency(path, source, local, imported) {
     const isDefault = local && !imported;
@@ -52,6 +53,8 @@ export function addDependency(path, source, local, imported) {
         declaration = t.importDeclaration(specifier ? [specifier] : [], t.stringLiteral(source));
         // TODO
         (file.program || file).body.unshift(declaration);
+        // TODO
+        t.addComment(declaration, 'leading', CONSTANTS.COMMENT_AUTO_ADDED_DEPENDENCY, true);
     }
     return {
         local,

package/constants/index.d.ts

@@ -1,5 +1,4 @@
 export declare const PACKAGE_NAME = "@htmlplus/element";
-export declare const API_ATTRIBUTES_SYNCER: unique symbol;
 export declare const API_CONNECTED: unique symbol;
 export declare const API_HOST: unique symbol;
 export declare const API_INSTANCE: unique symbol;
@@ -38,5 +37,12 @@ export declare const TYPE_NUMBER = 64;
 export declare const TYPE_OBJECT = 128;
 export declare const TYPE_STRING = 256;
 export declare const TYPE_UNDEFINED = 512;
-export declare const UTIL_STYLE_MAPPER = "styles";
-export declare const VENDOR_UHTML_PATH = "@htmlplus/element/client/vendors/uhtml.js";
+export declare const UTILS_ATTRIBUTES_IMPORTED = "attributes";
+export declare const UTILS_ATTRIBUTES_LOCAL = "UTILS_ATTRIBUTES";
+export declare const UTILS_HOST_IMPORTED = "host";
+export declare const UTILS_HOST_LOCAL = "UTILS_HOST";
+export declare const UTILS_HTML_IMPORTED = "html";
+export declare const UTILS_HTML_LOCAL = "UTILS_HTML";
+export declare const UTILS_STYLES_IMPORTED = "styles";
+export declare const UTILS_STYLES_LOCAL = "UTILS_STYLES";
+export declare const UTILS_PATH = "@htmlplus/element/client/utils/index.js";

package/constants/index.js

@@ -1,6 +1,5 @@
 export const PACKAGE_NAME = '@htmlplus/element';
 // apis
-export const API_ATTRIBUTES_SYNCER = Symbol();
 export const API_CONNECTED = Symbol();
 export const API_HOST = Symbol();
 export const API_INSTANCE = Symbol();
@@ -47,6 +46,12 @@ export const TYPE_OBJECT = 128;
 export const TYPE_STRING = 256;
 export const TYPE_UNDEFINED = 512;
 // utils
-export const UTIL_STYLE_MAPPER = 'styles';
-// vendors
-export const VENDOR_UHTML_PATH = '@htmlplus/element/client/vendors/uhtml.js';
+export const UTILS_ATTRIBUTES_IMPORTED = 'attributes';
+export const UTILS_ATTRIBUTES_LOCAL = 'UTILS_ATTRIBUTES';
+export const UTILS_HOST_IMPORTED = 'host';
+export const UTILS_HOST_LOCAL = 'UTILS_HOST';
+export const UTILS_HTML_IMPORTED = 'html';
+export const UTILS_HTML_LOCAL = 'UTILS_HTML';
+export const UTILS_STYLES_IMPORTED = 'styles';
+export const UTILS_STYLES_LOCAL = 'UTILS_STYLES';
+export const UTILS_PATH = '@htmlplus/element/client/utils/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@htmlplus/element",
-  "version": "0.7.2",
+  "version": "0.7.4",
   "license": "MIT",
   "sideEffects": false,
   "author": "Masood Abdolian <m.abdolian@gmail.com>",

package/client/decorators/attributes.d.ts

@@ -1,2 +0,0 @@
-import { PlusElement } from '../../types';
-export declare function Attributes(): (target: PlusElement, propertyKey: PropertyKey) => void;

package/client/decorators/attributes.js

@@ -1,12 +0,0 @@
-import * as CONSTANTS from '../../constants/index.js';
-import { appendToMethod, host, syncAttributes } from '../utils/index.js';
-export function Attributes() {
-    return function (target, propertyKey) {
-        appendToMethod(target, CONSTANTS.LIFECYCLE_CONNECTED, function () {
-            this[CONSTANTS.API_ATTRIBUTES_SYNCER] = syncAttributes(host(this));
-        });
-        appendToMethod(target, CONSTANTS.LIFECYCLE_UPDATED, function () {
-            this[CONSTANTS.API_ATTRIBUTES_SYNCER](this[propertyKey]);
-        });
-    };
-}

package/client/helpers/query.d.ts

@@ -1,3 +0,0 @@
-export declare function query<K extends keyof HTMLElementTagNameMap>(target: any, selectors: K): HTMLElementTagNameMap[K] | null;
-export declare function query<K extends keyof SVGElementTagNameMap>(target: any, selectors: K): SVGElementTagNameMap[K] | null;
-export declare function query<E extends Element = Element>(target: any, selectors: string): E | null;

package/client/helpers/query.js

@@ -1,5 +0,0 @@
-import { shadowRoot } from '../utils/index.js';
-export function query(target, selectors) {
-    var _a;
-    return (_a = shadowRoot(target)) === null || _a === void 0 ? void 0 : _a.querySelector(selectors);
-}

package/client/helpers/queryAll.d.ts

@@ -1,3 +0,0 @@
-export declare function queryAll<K extends keyof HTMLElementTagNameMap>(target: any, selectors: K): NodeListOf<HTMLElementTagNameMap[K]>;
-export declare function queryAll<K extends keyof SVGElementTagNameMap>(target: any, selectors: K): NodeListOf<SVGElementTagNameMap[K]>;
-export declare function queryAll<E extends Element = Element>(target: any, selectors: string): NodeListOf<E>;

package/client/helpers/queryAll.js

@@ -1,5 +0,0 @@
-import { shadowRoot } from '../utils/index.js';
-export function queryAll(target, selectors) {
-    var _a;
-    return (_a = shadowRoot(target)) === null || _a === void 0 ? void 0 : _a.querySelectorAll(selectors);
-}

package/client/utils/syncAttributes.d.ts

@@ -1 +0,0 @@
-export declare const syncAttributes: (node: HTMLElement) => (next?: any) => void;

package/client/utils/syncAttributes.js

@@ -1,31 +0,0 @@
-import { off, on } from './event.js';
-import { isEvent } from './isEvent.js';
-import { toEvent } from './toEvent.js';
-import { updateAttribute } from './updateAttribute.js';
-export const syncAttributes = (node) => {
-    let prev = {};
-    return (next = {}) => {
-        const prevClass = (prev.class || '').split(' ');
-        const nextClass = (next.class || '').split(' ');
-        const newClass = node.className
-            .split(' ')
-            .filter((key) => !prevClass.includes(key) && !nextClass.includes(key))
-            .concat(nextClass)
-            .filter((key) => key)
-            .join(' ');
-        updateAttribute(node, 'class', newClass || undefined);
-        if (prev.style || next.style)
-            node.setAttribute('style', next.style || '');
-        for (const key in prev)
-            isEvent(key) && off(node, toEvent(key), prev[key]);
-        for (const key in next) {
-            if (['class', 'style'].includes(key))
-                continue;
-            if (isEvent(key))
-                on(node, toEvent(key), next[key]);
-            else
-                updateAttribute(node, key, next[key]);
-        }
-        prev = Object.assign({}, next);
-    };
-};