@htmlplus/element 0.4.5 → 0.4.8

package/bundlers/index.d.ts

@@ -0,0 +1,2 @@
+export * from './rollup.js';
+export * from './vite.js';

package/bundlers/index.js

@@ -0,0 +1,2 @@
+export * from './rollup.js';
+export * from './vite.js';

package/bundlers/rollup.d.ts

@@ -0,0 +1,7 @@
+import { Plugin } from '../types';
+export declare const rollup: (...plugins: Array<Plugin>) => {
+    name: string;
+    buildStart(): Promise<void>;
+    load(id: any): Promise<string | undefined>;
+    buildEnd(): Promise<void>;
+};

package/bundlers/rollup.js

@@ -0,0 +1,21 @@
+import compiler from '../compiler/index.js';
+export const rollup = (...plugins) => {
+    const { start, next, finish } = compiler(...plugins);
+    return {
+        name: 'htmlplus',
+        async buildStart() {
+            await start();
+        },
+        async load(id) {
+            if (!id.endsWith('.tsx'))
+                return;
+            const { isInvalid, script } = await next(id);
+            if (isInvalid)
+                return;
+            return script;
+        },
+        async buildEnd() {
+            await finish();
+        }
+    };
+};

package/bundlers/vite.d.ts

@@ -0,0 +1,7 @@
+import { Plugin } from '../types';
+export declare const vite: (...plugins: Array<Plugin>) => {
+    name: string;
+    buildStart(): Promise<void>;
+    load(id: any): Promise<string | undefined>;
+    buildEnd(): Promise<void>;
+};

package/bundlers/vite.js

@@ -0,0 +1,25 @@
+import path from 'path';
+import compiler from '../compiler/index.js';
+export const vite = (...plugins) => {
+    const { start, next, finish } = compiler(...plugins);
+    return {
+        name: 'htmlplus',
+        async buildStart() {
+            await start();
+        },
+        async load(id) {
+            if (!id.endsWith('.tsx'))
+                return;
+            let { isInvalid, script, stylePath } = await next(id);
+            if (isInvalid)
+                return;
+            if (script && stylePath) {
+                script = script.replace(path.basename(stylePath), `${path.basename(stylePath)}?inline`);
+            }
+            return script;
+        },
+        async buildEnd() {
+            await finish();
+        }
+    };
+};

package/client/decorators/attributes.d.ts

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

package/client/decorators/attributes.js

@@ -1,13 +1,13 @@
 import * as CONSTANTS from '../../constants/index.js';
-import { appendToMethod, host, sync } from '../utils/index.js';
+import { appendToMethod, host, syncAttributes } from '../utils/index.js';
 export function Attributes() {
     return function (target, propertyKey) {
-        const updates = new Map();
+        const symbol = Symbol();
         appendToMethod(target, CONSTANTS.LIFECYCLE_CONNECTED, function () {
-            updates.set(this, sync(host(this)));
+            this[symbol] = syncAttributes(host(this));
         });
         appendToMethod(target, CONSTANTS.LIFECYCLE_UPDATED, function () {
-            updates.get(this)(this[propertyKey]);
+            this[symbol](this[propertyKey]);
         });
     };
 }

package/client/decorators/element.d.ts

@@ -1,2 +1,2 @@
-import { PlusElement } from '../../types/index.js';
+import { PlusElement } from '../../types';
 export declare function Element(tag?: string): (constructor: PlusElement) => void;

package/client/decorators/element.js

@@ -1,58 +1,50 @@
 import { camelCase, paramCase } from 'change-case';
 import * as CONSTANTS from '../../constants/index.js';
 import { call, getMembersKey, getMemberType, isServer, parseValue, request } from '../utils/index.js';
-import * as uhtml from '../vendor/uhtml.js';
 export function Element(tag) {
     return function (constructor) {
         if (isServer())
             return;
         if (customElements.get(tag))
             return;
-        const instances = new Map();
         class Plus extends HTMLElement {
             constructor() {
                 super();
                 this.attachShadow({ mode: 'open' });
                 // TODO
-                const instance = new constructor();
-                instances.set(this, instance);
-                instance[CONSTANTS.API_HOST] = () => this;
-                instance['uhtml'] = uhtml;
-                instance[CONSTANTS.API_STATUS] = 'initialize';
+                this[CONSTANTS.API_INSTANCE] = new constructor();
+                this[CONSTANTS.API_INSTANCE][CONSTANTS.API_HOST] = () => this;
+                this[CONSTANTS.API_INSTANCE][CONSTANTS.API_STATUS] = 'initialize';
             }
+            // TODO: ignore functions
             static get observedAttributes() {
-                // TODO: ignore functions
                 return getMembersKey(constructor).map((key) => paramCase(key));
             }
             adoptedCallback() {
-                const instance = instances.get(this);
-                call(instance, CONSTANTS.LIFECYCLE_ADOPTED);
+                call(this[CONSTANTS.API_INSTANCE], CONSTANTS.LIFECYCLE_ADOPTED);
             }
             // TODO
             attributeChangedCallback(name, prev, next) {
-                const instance = instances.get(this);
                 const key = camelCase(name);
-                const type = getMemberType(instance, key);
+                const type = getMemberType(this[CONSTANTS.API_INSTANCE], key);
                 const parsed = parseValue(next, type);
-                instance[key] = parsed;
+                this[CONSTANTS.API_INSTANCE][key] = parsed;
             }
             connectedCallback() {
-                const instance = instances.get(this);
-                instance[CONSTANTS.API_STATUS] = 'connected';
-                call(instance, CONSTANTS.LIFECYCLE_CONNECTED);
-                request(instance)
+                this[CONSTANTS.API_INSTANCE][CONSTANTS.API_STATUS] = 'connected';
+                call(this[CONSTANTS.API_INSTANCE], CONSTANTS.LIFECYCLE_CONNECTED);
+                request(this[CONSTANTS.API_INSTANCE])
                     .then(() => {
-                    instance[CONSTANTS.API_STATUS] = 'loaded';
-                    call(instance, CONSTANTS.LIFECYCLE_LOADED);
+                    this[CONSTANTS.API_INSTANCE][CONSTANTS.API_STATUS] = 'loaded';
+                    call(this[CONSTANTS.API_INSTANCE], CONSTANTS.LIFECYCLE_LOADED);
                 })
                     .catch((error) => {
                     throw error;
                 });
             }
             disconnectedCallback() {
-                const instance = instances.get(this);
-                instance[CONSTANTS.API_STATUS] = 'disconnected';
-                call(instance, CONSTANTS.LIFECYCLE_DISCONNECTED);
+                this[CONSTANTS.API_INSTANCE][CONSTANTS.API_STATUS] = 'disconnected';
+                call(this[CONSTANTS.API_INSTANCE], CONSTANTS.LIFECYCLE_DISCONNECTED);
             }
         }
         customElements.define(tag, Plus);

package/client/decorators/event.d.ts

@@ -1,4 +1,4 @@
-import { PlusElement } from '../../types/index.js';
+import { PlusElement } from '../../types';
 export declare type EventEmitter<T = any> = (data?: T) => CustomEvent<T>;
 export interface EventOptions {
     /**

package/client/decorators/listen.d.ts

@@ -1,4 +1,4 @@
-import { PlusElement } from '../../types/index.js';
+import { PlusElement } from '../../types';
 export interface ListenOptions {
     target?: 'host' | 'body' | 'document' | 'window';
     once?: boolean;

package/client/decorators/method.d.ts

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

package/client/decorators/property.d.ts

@@ -1,4 +1,4 @@
-import { PlusElement } from '../../types/index.js';
+import { PlusElement } from '../../types';
 export interface PropertyOptions {
     /**
      * Whether property value is reflected back to the associated attribute. default is `false`.

package/client/decorators/property.js

@@ -5,16 +5,16 @@ export function Property(options) {
     return function (target, propertyKey) {
         const name = String(propertyKey);
         const attribute = paramCase(name);
+        const symbol = Symbol();
         const type = getMemberType(target, name);
-        const values = new Map();
         function get() {
-            return values.get(this);
+            return this[symbol];
         }
         function set(input) {
-            const value = values.get(this);
+            const value = this[symbol];
             if (input === value)
                 return;
-            values.set(this, input);
+            this[symbol] = input;
             const isReady = this[CONSTANTS.API_STATUS] == 'initialize';
             request(this, { [name]: [input, value] }).then(() => {
                 const element = host(this);

package/client/decorators/state.d.ts

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

package/client/decorators/state.js

@@ -2,15 +2,15 @@ import { defineProperty, request } from '../utils/index.js';
 export function State() {
     return function (target, propertyKey) {
         const name = String(propertyKey);
-        const values = new Map();
+        const symbol = Symbol();
         function get() {
-            return values.get(this);
+            return this[symbol];
         }
         function set(input) {
-            const value = values.get(this);
+            const value = this[symbol];
             if (input === value)
                 return;
-            values.set(this, input);
+            this[symbol] = input;
             request(this, { [name]: [input, value] })
                 .then(() => undefined)
                 .catch((error) => {

package/client/decorators/watch.d.ts

@@ -1,4 +1,4 @@
-import { PlusElement } from '../../types/index.js';
+import { PlusElement } from '../../types';
 /**
  * Monitors properties and states to catch changes.
  * The decorated method will be invoked after any

package/client/helpers/direction.d.ts

@@ -1,3 +1,3 @@
-import { PlusElement } from '../../types/index.js';
+import { PlusElement } from '../../types';
 export declare type Direction = 'ltr' | 'rtl';
 export declare const direction: (target: PlusElement) => Direction;

package/client/helpers/isRTL.d.ts

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

package/client/helpers/slots.d.ts

@@ -1,4 +1,4 @@
-import { PlusElement } from '../../types/index.js';
+import { PlusElement } from '../../types';
 declare type Slots = {
     [key: string]: boolean;
 };

package/client/utils/getMemberType.d.ts

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

package/client/utils/getMemberType.js

@@ -1,5 +1,5 @@
 import * as CONSTANTS from '../../constants/index.js';
 export const getMemberType = (target, key) => {
-    var _a;
-    return (_a = (target.constructor[CONSTANTS.STATIC_MEMBERS] || target[CONSTANTS.STATIC_MEMBERS] || {})[key]) === null || _a === void 0 ? void 0 : _a[0];
+    var _a, _b;
+    return (_b = (_a = (target.constructor[CONSTANTS.STATIC_MEMBERS] || target[CONSTANTS.STATIC_MEMBERS])) === null || _a === void 0 ? void 0 : _a[key]) === null || _b === void 0 ? void 0 : _b[CONSTANTS.STATIC_MEMBERS_TYPE];
 };

package/client/utils/getMembersKey.d.ts

@@ -1,2 +1,2 @@
-import { PlusElement } from '../../types/index.js';
+import { PlusElement } from '../../types';
 export declare const getMembersKey: (target: PlusElement) => string[];

package/client/utils/getStyles.d.ts

@@ -1,2 +1,2 @@
-import { PlusElement } from '../../types/index.js';
+import { PlusElement } from '../../types';
 export declare const getStyles: (target: PlusElement) => string | undefined;

package/client/utils/host.d.ts

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

package/client/utils/index.d.ts

@@ -13,7 +13,7 @@ export * from './off.js';
 export * from './on.js';
 export * from './parseValue.js';
 export * from './request.js';
-export * from './sync.js';
+export * from './syncAttributes.js';
 export * from './task.js';
 export * from './toBoolean.js';
 export * from './toEvent.js';

package/client/utils/index.js

@@ -13,7 +13,7 @@ export * from './off.js';
 export * from './on.js';
 export * from './parseValue.js';
 export * from './request.js';
-export * from './sync.js';
+export * from './syncAttributes.js';
 export * from './task.js';
 export * from './toBoolean.js';
 export * from './toEvent.js';

package/client/utils/request.d.ts

@@ -1,4 +1,4 @@
-import { PlusElement } from '../../types/index.js';
+import { PlusElement } from '../../types';
 export declare const request: (target: PlusElement, state?: {
     [key: string]: [any, any];
 } | undefined) => Promise<boolean>;

package/client/utils/request.js

@@ -1,7 +1,7 @@
 import * as CONSTANTS from '../../constants/index.js';
-import { call } from '../utils/call';
-import { task } from '../utils/task';
-import { html, render } from '../vendor/uhtml.js';
+import { call } from '../utils/call.js';
+import { task } from '../utils/task.js';
+import { html, render } from '../vendors/uhtml.js';
 import { getStyles } from './getStyles.js';
 import { host } from './host.js';
 const targets = new Map();

package/client/utils/syncAttributes.d.ts

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

package/client/utils/{sync.js → syncAttributes.js}

@@ -3,7 +3,7 @@ import { off } from './off.js';
 import { on } from './on.js';
 import { toEvent } from './toEvent.js';
 import { updateAttribute } from './updateAttribute.js';
-export const sync = (node) => {
+export const syncAttributes = (node) => {
     let prev = {};
     return (next = {}) => {
         const prevClass = (prev.class || '').split(' ');

package/client/{vendor → vendors}/uhtml.d.ts

@@ -1,3 +1,10 @@
+declare namespace _default {
+    export { Hole };
+    export { html };
+    export { render };
+    export { svg };
+}
+export default _default;
 /**
  * Holds all details wrappers needed to render the content further on.
  * @constructor

package/client/{vendor → vendors}/uhtml.js

@@ -698,3 +698,4 @@ const render = (where, what) => {
 const html = tag('html');
 const svg = tag('svg');
 export { Hole, html, render, svg };
+export default { Hole, html, render, svg };

package/compiler/compiler.d.ts

@@ -1,4 +1,4 @@
-import { Context, Plugin } from '../types/index.js';
+import { Context, Plugin } from '../types';
 declare const _default: (...plugins: Array<Plugin>) => {
     start: () => Promise<void>;
     next: (filePath: string) => Promise<Context>;

package/compiler/plugins/assets.d.ts

@@ -1,4 +1,4 @@
-import { Context } from '../../types/index.js';
+import { Context } from '../../types';
 export declare type AssetsOptions = {
     destination: (context: Context) => string;
     source?: (context: Context) => string;

package/compiler/plugins/copy.d.ts

@@ -0,0 +1,13 @@
+export interface CopyOptions {
+    at?: 'finish' | 'start';
+    destination: string;
+    source: string;
+    transformer?: (parameters: {
+        content: string;
+    }) => string;
+}
+export declare const copy: (options: CopyOptions) => {
+    name: string;
+    start: () => void;
+    finish: () => void;
+};

package/compiler/plugins/copy.js

@@ -0,0 +1,26 @@
+import fs from 'fs-extra';
+import path from 'path';
+const defaults = {
+    at: 'finish',
+};
+export const copy = (options) => {
+    const name = 'copy';
+    options = Object.assign({}, defaults, options);
+    const copy = (caller) => {
+        if (options.at != caller)
+            return;
+        let content;
+        content = fs.readFileSync(options.source, 'utf8');
+        if (options.transformer)
+            content = options.transformer({ content });
+        fs.ensureDirSync(path.dirname(options.destination));
+        fs.writeFileSync(options.destination, content, 'utf8');
+    };
+    const start = () => {
+        copy('start');
+    };
+    const finish = () => {
+        copy('finish');
+    };
+    return { name, start, finish };
+};

package/compiler/plugins/customElement.d.ts

@@ -1,4 +1,4 @@
-import { Context } from '../../types/index.js';
+import { Context } from '../../types';
 export interface CustomElementOptions {
     typings?: boolean;
 }

package/compiler/plugins/customElement.js

@@ -21,20 +21,15 @@ export const customElement = (options) => {
                     return;
                 if (value.type != 'JSXExpressionContainer')
                     return;
-                const local = addDependency(ast, CONSTANTS.PACKAGE_NAME, CONSTANTS.UTILS_STYLE_MAP);
+                const { local } = addDependency(path, CONSTANTS.PACKAGE_NAME, CONSTANTS.UTILS_STYLE_MAP, CONSTANTS.UTILS_STYLE_MAP);
+                // TODO: remove 'local!'
                 path.replaceWith(t.jsxAttribute(t.jsxIdentifier('style'), t.jsxExpressionContainer(t.callExpression(t.identifier(local), [value.expression]))));
                 path.skip();
             }
         });
         // TODO
-        visitor(ast, {
-            ClassDeclaration(path) {
-                const { body, id } = path.node;
-                if (id.name != context.className)
-                    return;
-                body.body.unshift(t.classProperty(t.identifier('uhtml')));
-            }
-        });
+        const { node } = addDependency(ast, CONSTANTS.VENDOR_UHTML, 'uhtml');
+        t.addComment(node, 'leading', CONSTANTS.COMMENT_AUTO_ADDED_DEPENDENCY, true);
         // replace 'className' attribute to 'class'
         visitor(ast, {
             JSXAttribute(path) {
@@ -67,17 +62,15 @@ export const customElement = (options) => {
                 exit(path) {
                     if (path.parent.type == 'JSXElement' || path.parent.type == 'JSXFragment') {
                         path.replaceWith(t.identifier(print(path.node)));
-                        return;
                     }
                     else {
-                        path.replaceWith(t.memberExpression(t.memberExpression(t.thisExpression(), t.identifier('uhtml')), t.identifier(`html\`${print(path.node)}\``)));
-                        return;
+                        path.replaceWith(t.memberExpression(t.identifier('uhtml'), t.identifier(`html\`${print(path.node)}\``)));
                     }
                 }
             },
             JSXFragment: {
                 exit(path) {
-                    path.replaceWith(t.memberExpression(t.memberExpression(t.thisExpression(), t.identifier('uhtml')), t.identifier(['html`', ...path.node.children.map((child) => print(child)), '`'].join(''))));
+                    path.replaceWith(t.memberExpression(t.identifier('uhtml'), t.identifier(['html`', ...path.node.children.map((child) => print(child)), '`'].join(''))));
                 }
             },
             JSXExpressionContainer: {
@@ -101,34 +94,34 @@ export const customElement = (options) => {
                 const { body, id } = path.node;
                 if (id.name != context.className)
                     return;
-                body.body.unshift(t.classProperty(t.identifier(CONSTANTS.STATIC_MEMBERS), t.objectExpression([
+                const node = t.classProperty(t.identifier(CONSTANTS.STATIC_MEMBERS), t.objectExpression([
                     ...context.classProperties.map((property) => {
-                        var _a, _b;
-                        const type = (_b = (_a = property.typeAnnotation) === null || _a === void 0 ? void 0 : _a.typeAnnotation) === null || _b === void 0 ? void 0 : _b.type;
-                        const elements = [];
-                        switch (type) {
-                            case 'TSBooleanKeyword':
-                                elements.push(t.stringLiteral(CONSTANTS.TYPE_BOOLEAN));
-                                break;
-                            case 'TSStringKeyword':
-                                elements.push(t.stringLiteral(CONSTANTS.TYPE_STRING));
-                                break;
-                            case 'TSNumberKeyword':
-                                elements.push(t.stringLiteral(CONSTANTS.TYPE_NUMBER));
-                                break;
-                            default:
-                                elements.push(t.nullLiteral());
-                                break;
+                        const properties = [];
+                        if (property.value) {
+                            properties.push(t.objectProperty(t.identifier(CONSTANTS.STATIC_MEMBERS_INITIALIZER), property.value));
+                        }
+                        const type = (() => {
+                            var _a, _b;
+                            switch ((_b = (_a = property.typeAnnotation) === null || _a === void 0 ? void 0 : _a.typeAnnotation) === null || _b === void 0 ? void 0 : _b.type) {
+                                case 'TSBooleanKeyword':
+                                    return t.stringLiteral(CONSTANTS.TYPE_BOOLEAN);
+                                case 'TSStringKeyword':
+                                    return t.stringLiteral(CONSTANTS.TYPE_STRING);
+                                case 'TSNumberKeyword':
+                                    return t.stringLiteral(CONSTANTS.TYPE_NUMBER);
+                            }
+                        })();
+                        if (type) {
+                            properties.push(t.objectProperty(t.identifier(CONSTANTS.STATIC_MEMBERS_TYPE), type));
                         }
-                        if (property.value)
-                            elements.push(property.value);
-                        return t.objectProperty(t.identifier(property.key['name']), t.arrayExpression(elements));
+                        return t.objectProperty(t.identifier(property.key['name']), t.objectExpression(properties));
                     }),
-                    ...context.classMethods.map((method) => {
-                        const elements = [t.stringLiteral(CONSTANTS.TYPE_FUNCTION)];
-                        return t.objectProperty(t.identifier(method.key['name']), t.arrayExpression(elements));
-                    })
-                ]), undefined, undefined, undefined, true));
+                    ...context.classMethods.map((method) => t.objectProperty(t.identifier(method.key['name']), t.objectExpression([
+                        t.objectProperty(t.identifier(CONSTANTS.STATIC_MEMBERS_TYPE), t.stringLiteral(CONSTANTS.TYPE_FUNCTION))
+                    ])))
+                ]), undefined, undefined, undefined, true);
+                t.addComment(node, 'leading', CONSTANTS.COMMENT_AUTO_ADDED_PROPERTY, true);
+                body.body.unshift(node);
             }
         });
         // attach typings

package/compiler/plugins/customElementReact/customElementReact.d.ts

@@ -1,4 +1,4 @@
-import { Global } from '../../../types/index.js';
+import { Global } from '../../../types';
 export interface CustomElementReactOptions {
     compact?: boolean;
     destination: string;

package/compiler/plugins/document.d.ts

@@ -1,4 +1,4 @@
-import { Global } from '../../types/index.js';
+import { Global } from '../../types';
 export interface DocumentOptions {
     destination: string;
 }