@htmlplus/element 0.1.9 → 0.3.1

package/README.md

@@ -258,6 +258,36 @@ export class MyCounter {
 
 </details>
 
+<details>
+  <summary>Attributes</summary>
+
+TODO
+
+```tsx
+import { Attributes, Element } from '@htmlplus/element';
+
+@Element('my-button')
+export class MyButton {
+
+  @Attributes()
+  get attributes() {
+    return {
+      role: 'button'
+    }
+  }
+
+  render() {
+    return <button><slot /></button>
+  }
+}
+```
+
+```html
+<my-button role="button"></my-button>
+```
+
+</details>
+
 <details>
   <summary>Watch</summary>
 
@@ -912,15 +942,15 @@ TODO
 
 ```js
 import compiler from '@htmlplus/element/compiler';
-import { read, parse, extract, attach, uhtml, print } from '@htmlplus/element/compiler';
+import { customElement, extract, parse, read, style, validate } from '@htmlplus/element/compiler';
 
 const { start, next, finish } = compiler(
   read(),
   parse(),
+  validate(),
   extract(),
-  attach(),
-  uhtml(),
-  print(),
+  style(),
+  customElement(),
 );
 
 await start();

package/package.json

@@ -1,10 +1,12 @@
 {
   "name": "@htmlplus/element",
-  "version": "0.1.9",
+  "version": "0.3.1",
   "license": "MIT",
   "author": "Masood Abdolian <m.abdolian@gmail.com>",
   "description": "Compiler of HTMLPlus",
   "type": "module",
+  "main": "./client/index.js",
+  "types": "./client/index.d.ts",
   "scripts": {
     "prebuild": "npm run clean",
     "build": "tsc",
@@ -12,53 +14,15 @@
     "postbuild": "node scripts/build.post.js",
     "clean": "rimraf dist",
     "format": "prettier --write .",
-    "dev:start": "node src/dev/start.js",
-    "dev:build": "node src/dev/build.js"
-  },
-  "exports": {
-    ".": {
-      "default": "./dist/client/index.js"
-    },
-    "./compiler": {
-      "default": "./dist/compiler/index.js"
-    },
-    "./decorators": {
-      "default": "./dist/client/decorators/index.js"
-    },
-    "./helpers": {
-      "default": "./dist/client/helpers/index.js"
-    },
-    "./runtime": {
-      "default": "./dist/runtime/index.js"
-    },
-    "./services": {
-      "default": "./dist/client/services/index.js"
-    }
-  },
-  "typesVersions": {
-    "*": {
-      "*": [
-        "./dist/client/index.d.ts"
-      ],
-      "compiler": [
-        "./dist/compiler/index.d.ts"
-      ],
-      "decorators": [
-        "./dist/client/decorators/index.d.ts"
-      ],
-      "helpers": [
-        "./dist/client/helpers/index.d.ts"
-      ],
-      "runtime": [
-        "./dist/runtime/index.d.ts"
-      ],
-      "services": [
-        "./dist/client/services/index.d.ts"
-      ]
-    }
+    "dev:start": "node src/dev/scripts/start.js",
+    "dev:build": "node src/dev/scripts/build.js"
   },
   "files": [
-    "dist",
+    "client",
+    "compiler",
+    "constants",
+    "runtime",
+    "types",
     "package.json",
     "README.md"
   ],
@@ -84,7 +48,6 @@
     "fast-glob": "^3.2.11",
     "handlebars": "^4.7.7",
     "log-update": "^5.0.0",
-    "sass": "^1.43.4",
     "ts-node": "^10.4.0",
     "typescript": "^4.5.2",
     "uhtml": "^2.7.6"

package/dist/client/decorators/attributes.d.ts

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

package/dist/client/decorators/attributes.js

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

package/dist/client/decorators/bind.d.ts

@@ -1,4 +0,0 @@
-export declare function Bind(): (target: Object, propertyKey: PropertyKey, descriptor: PropertyDescriptor) => {
-    configurable: boolean;
-    get(): any;
-};

package/dist/client/decorators/bind.js

@@ -1,17 +0,0 @@
-import { defineProperty } from '../utils/index.js';
-export function Bind() {
-    return function (target, propertyKey, descriptor) {
-        return {
-            configurable: true,
-            get() {
-                const value = descriptor === null || descriptor === void 0 ? void 0 : descriptor.value.bind(this);
-                defineProperty(this, propertyKey, {
-                    value,
-                    configurable: true,
-                    writable: true
-                });
-                return value;
-            }
-        };
-    };
-}

package/dist/client/decorators/element.d.ts

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

package/dist/client/decorators/element.js

@@ -1,49 +0,0 @@
-import { camelCase, paramCase } from 'change-case';
-import * as CONSTANTS from '../../configs/constants.js';
-import { call, getMembers, isServer, parseValue, request } from '../utils/index.js';
-export function Element(tag) {
-    return function (constructor) {
-        if (isServer())
-            return;
-        const members = getMembers(constructor);
-        class Plus extends HTMLElement {
-            constructor() {
-                var _a;
-                super();
-                this.plus = new constructor();
-                this.plus[CONSTANTS.API_HOST] = () => this;
-                (_a = this.plus[CONSTANTS.API_SETUP]) === null || _a === void 0 ? void 0 : _a.forEach((setup) => setup.call(this.plus));
-                this.attachShadow({ mode: 'open' });
-            }
-            static get observedAttributes() {
-                return Object.keys(members)
-                    .filter((key) => members[key][0] != CONSTANTS.TYPE_FUNCTION)
-                    .map((key) => paramCase(key));
-            }
-            adoptedCallback() {
-                call(this.plus, CONSTANTS.LIFECYCLE_ADOPTED);
-            }
-            attributeChangedCallback(name, prev, next) {
-                const key = camelCase(name);
-                const [type] = members[key];
-                const parsed = parseValue(next, type);
-                this.plus[key] = parsed;
-            }
-            connectedCallback() {
-                this.plus[CONSTANTS.API_READY] = true;
-                call(this.plus, CONSTANTS.LIFECYCLE_CONNECTED);
-                request(this.plus)
-                    .then(() => {
-                    call(this.plus, CONSTANTS.LIFECYCLE_LOADED);
-                })
-                    .catch((error) => {
-                    throw error;
-                });
-            }
-            disconnectedCallback() {
-                call(this.plus, CONSTANTS.LIFECYCLE_DISCONNECTED);
-            }
-        }
-        customElements.define(tag, Plus);
-    };
-}

package/dist/client/decorators/event.d.ts

@@ -1,21 +0,0 @@
-import { PlusElement } from '../../types/index.js';
-export declare type EventEmitter<T = any> = (data?: T) => CustomEvent<T>;
-export interface EventOptions {
-    /**
-     * A string custom event name to override the default.
-     */
-    name?: string;
-    /**
-     * A Boolean indicating whether the event bubbles up through the DOM or not. default is `false`.
-     */
-    bubbles?: boolean;
-    /**
-     * A Boolean indicating whether the event is cancelable. default is `false`.
-     */
-    cancelable?: boolean;
-    /**
-     * A Boolean value indicating whether or not the event can bubble across the boundary between the shadow DOM and the regular DOM. The default is false.
-     */
-    composed?: boolean;
-}
-export declare function Event<T = any>(options?: EventOptions): (target: PlusElement, propertyKey: PropertyKey) => void;

package/dist/client/decorators/event.js

@@ -1,18 +0,0 @@
-import { defineProperty, host } from '../utils/index.js';
-// TODO: add global hook
-export function Event(options = {}) {
-    return function (target, propertyKey) {
-        defineProperty(target, propertyKey, {
-            get() {
-                return (detail) => {
-                    var _a;
-                    (_a = options.bubbles) !== null && _a !== void 0 ? _a : (options.bubbles = false);
-                    const name = options.name || String(propertyKey);
-                    const event = new CustomEvent(name, Object.assign(Object.assign({}, options), { detail }));
-                    host(this).dispatchEvent(event);
-                    return event;
-                };
-            }
-        });
-    };
-}

package/dist/client/decorators/index.d.ts

@@ -1,9 +0,0 @@
-export * from './attributes.js';
-export * from './bind.js';
-export * from './element.js';
-export * from './event.js';
-export * from './listen.js';
-export * from './method.js';
-export * from './property.js';
-export * from './state.js';
-export * from './watch.js';

package/dist/client/decorators/index.js

@@ -1,9 +0,0 @@
-export * from './attributes.js';
-export * from './bind.js';
-export * from './element.js';
-export * from './event.js';
-export * from './listen.js';
-export * from './method.js';
-export * from './property.js';
-export * from './state.js';
-export * from './watch.js';

package/dist/client/decorators/listen.d.ts

@@ -1,12 +0,0 @@
-import { PlusElement } from '../../types/index.js';
-export interface ListenOptions {
-    target?: 'host' | 'body' | 'document' | 'window';
-    once?: boolean;
-    passive?: boolean;
-    signal?: AbortSignal;
-    capture?: boolean;
-}
-export declare function Listen(name: string, options?: ListenOptions): (target: PlusElement, propertyKey: PropertyKey, descriptor: PropertyDescriptor) => {
-    configurable: boolean;
-    get(): any;
-};

package/dist/client/decorators/listen.js

@@ -1,30 +0,0 @@
-import * as CONSTANTS from '../../configs/constants.js';
-import { appendToMethod, host, on, off } from '../utils/index.js';
-import { Bind } from './bind.js';
-const defaults = {
-    target: 'host'
-};
-export function Listen(name, options = defaults) {
-    return function (target, propertyKey, descriptor) {
-        // TODO: types
-        const element = (instance) => {
-            switch (options.target) {
-                case 'body':
-                    return window.document.body;
-                case 'document':
-                    return window.document;
-                case 'window':
-                    return window;
-                case 'host':
-                    return host(instance);
-            }
-        };
-        appendToMethod(target, CONSTANTS.LIFECYCLE_CONNECTED, function () {
-            on(element(this), name, this[propertyKey], options);
-        });
-        appendToMethod(target, CONSTANTS.LIFECYCLE_DISCONNECTED, function () {
-            off(element(this), name, this[propertyKey], options);
-        });
-        return Bind()(target, propertyKey, descriptor);
-    };
-}

package/dist/client/decorators/method.d.ts

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

package/dist/client/decorators/method.js

@@ -1,12 +0,0 @@
-import { defineProperty, host, onReady } from '../utils/index.js';
-export function Method() {
-    return function (target, propertyKey) {
-        onReady(target, function () {
-            defineProperty(host(this), propertyKey, {
-                get: () => {
-                    return this[propertyKey].bind(this);
-                }
-            });
-        });
-    };
-}

package/dist/client/decorators/property.d.ts

@@ -1,12 +0,0 @@
-import { PlusElement } from '../../types/index.js';
-export interface PropertyOptions {
-    /**
-     * TODO
-     */
-    attribute?: boolean | string;
-    /**
-     * Whether property value is reflected back to the associated attribute. default is `false`.
-     */
-    reflect?: boolean;
-}
-export declare function Property(options?: PropertyOptions): (target: PlusElement, propertyKey: PropertyKey) => void;

package/dist/client/decorators/property.js

@@ -1,51 +0,0 @@
-import { defineProperty, getMembers, host, isReady, parseValue, request, updateAttribute, onReady } from '../utils/index.js';
-export function Property(options) {
-    return function (target, propertyKey) {
-        const values = new Map();
-        defineProperty(target, propertyKey, {
-            get() {
-                return values.get(this);
-            },
-            set(input) {
-                const value = values.get(this);
-                if (value === input)
-                    return;
-                values.set(this, input);
-                // TODO
-                const ready = isReady(this);
-                request(this, { [propertyKey]: [input, value] })
-                    .then((renderd) => {
-                    const name = String(propertyKey);
-                    const element = host(this);
-                    const hasAttribute = element.hasAttribute(name);
-                    // TODO
-                    if ((options === null || options === void 0 ? void 0 : options.reflect) && !hasAttribute && !renderd && !ready)
-                        updateAttribute(element, name, input);
-                    if (!renderd)
-                        return;
-                    if (!(options === null || options === void 0 ? void 0 : options.reflect))
-                        return;
-                    const raw = element.getAttribute(name);
-                    const [type] = getMembers(target)[propertyKey];
-                    const parsed = parseValue(raw, type);
-                    if (parsed === input)
-                        return;
-                    updateAttribute(element, name, input);
-                })
-                    .catch((error) => {
-                    throw error;
-                });
-            }
-        });
-        onReady(target, function () {
-            defineProperty(host(this), propertyKey, {
-                get: () => {
-                    return this[propertyKey];
-                },
-                set: (value) => {
-                    this[propertyKey] = value;
-                }
-            });
-        });
-    };
-}

package/dist/client/decorators/state.d.ts

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

package/dist/client/decorators/state.js

@@ -1,32 +0,0 @@
-import { defineProperty, host, onReady, request } from '../utils/index.js';
-export function State() {
-    return function (target, propertyKey) {
-        const values = new Map();
-        defineProperty(target, propertyKey, {
-            get() {
-                return values.get(this);
-            },
-            set(input) {
-                const value = values.get(this);
-                if (value === input)
-                    return;
-                values.set(this, input);
-                request(this, { [propertyKey]: [input, value] })
-                    .then(() => { })
-                    .catch((error) => {
-                    throw error;
-                });
-            }
-        });
-        onReady(target, function () {
-            defineProperty(host(this), propertyKey, {
-                get: () => {
-                    return this[propertyKey];
-                },
-                set: (value) => {
-                    this[propertyKey] = value;
-                }
-            });
-        });
-    };
-}

package/dist/client/decorators/watch.d.ts

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

package/dist/client/decorators/watch.js

@@ -1,17 +0,0 @@
-import * as CONSTANTS from '../../configs/constants.js';
-import { appendToMethod } from '../utils/index.js';
-// TODO: support * key
-export function Watch(...keys) {
-    return function (target, propertyKey) {
-        if (!keys.length)
-            return;
-        appendToMethod(target, CONSTANTS.LIFECYCLE_UPDATED, function (args) {
-            const [states] = args;
-            for (const key of keys) {
-                if (states === null || states === void 0 ? void 0 : states[key]) {
-                    this[propertyKey](...states[key], key);
-                }
-            }
-        });
-    };
-}

package/dist/client/helpers/classes.d.ts

@@ -1 +0,0 @@
-export declare const classes: (input: any, smart?: boolean | undefined) => string;

package/dist/client/helpers/classes.js

@@ -1,62 +0,0 @@
-import { paramCase } from 'change-case';
-import { typeOf } from '../utils/index.js';
-export const classes = (input, smart) => {
-    const result = [];
-    switch (typeOf(input)) {
-        case 'array': {
-            input.forEach((item) => {
-                const value = classes(item, smart);
-                if (!value)
-                    return;
-                result.push(value);
-            });
-            break;
-        }
-        case 'object': {
-            const keys = Object.keys(input);
-            for (const key of keys) {
-                const value = input[key];
-                const name = paramCase(key);
-                const type = typeOf(value);
-                if (!smart) {
-                    if (!value)
-                        continue;
-                    result.push(name);
-                    continue;
-                }
-                switch (type) {
-                    case 'boolean': {
-                        if (!value)
-                            continue;
-                        result.push(`${name}`);
-                        break;
-                    }
-                    case 'number': {
-                        result.push(`${name}-${value}`);
-                        break;
-                    }
-                    case 'string': {
-                        switch (value) {
-                            case '':
-                            case 'true':
-                                result.push(`${name}`);
-                                break;
-                            case 'false':
-                                break;
-                            default:
-                                result.push(`${name}-${value}`);
-                                break;
-                        }
-                        break;
-                    }
-                }
-            }
-            break;
-        }
-        case 'string': {
-            result.push(input);
-            break;
-        }
-    }
-    return result.join(' ');
-};

package/dist/client/helpers/direction.d.ts

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

package/dist/client/helpers/direction.js

@@ -1,4 +0,0 @@
-import { host } from '../utils/index.js';
-export const direction = (target) => {
-    return getComputedStyle(host(target)).getPropertyValue('direction').toLowerCase();
-};

package/dist/client/helpers/index.d.ts

@@ -1,9 +0,0 @@
-export * from './classes.js';
-export * from './direction.js';
-export * from './is-rtl.js';
-export * from './query.js';
-export * from './query-all.js';
-export * from './slots.js';
-export * from './styles.js';
-export * from './to-unit.js';
-export { host, isServer, on, off } from '../utils/index.js';

package/dist/client/helpers/index.js

@@ -1,9 +0,0 @@
-export * from './classes.js';
-export * from './direction.js';
-export * from './is-rtl.js';
-export * from './query.js';
-export * from './query-all.js';
-export * from './slots.js';
-export * from './styles.js';
-export * from './to-unit.js';
-export { host, isServer, on, off } from '../utils/index.js';

package/dist/client/helpers/is-rtl.d.ts

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

package/dist/client/helpers/is-rtl.js

@@ -1,2 +0,0 @@
-import { direction } from './direction.js';
-export const isRTL = (target) => direction(target) == 'rtl';

package/dist/client/helpers/query-all.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/dist/client/helpers/query-all.js

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

package/dist/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/dist/client/helpers/query.js

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

package/dist/client/helpers/slots.d.ts

@@ -1,6 +0,0 @@
-import { PlusElement } from '../../types/index.js';
-declare type Slots = {
-    [key: string]: boolean;
-};
-export declare const slots: (target: PlusElement) => Slots;
-export {};

package/dist/client/helpers/slots.js

@@ -1,15 +0,0 @@
-import { defineProperty } from '../utils/index.js';
-import { queryAll } from './query-all.js';
-export const slots = (target) => {
-    var _a;
-    const result = {};
-    (_a = queryAll(target, 'slot')) === null || _a === void 0 ? void 0 : _a.forEach((slot) => {
-        const name = slot.name || 'default';
-        defineProperty(result, name, {
-            get() {
-                return !!slot.assignedNodes().filter((node) => { var _a; return node.nodeName != '#text' || ((_a = node.nodeValue) === null || _a === void 0 ? void 0 : _a.trim()); }).length;
-            }
-        });
-    });
-    return result;
-};

package/dist/client/helpers/styles.d.ts

@@ -1 +0,0 @@
-export declare const styles: (input: any) => string;