@htmlplus/element 0.4.2 → 0.4.3

package/client/decorators/element.js

@@ -1,56 +1,60 @@
 import { camelCase, paramCase } from 'change-case';
 import * as CONSTANTS from '../../constants/index.js';
-import { call, getMembers, isServer, parseValue, request } from '../utils/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;
-        const members = getMembers(constructor);
+        if (customElements.get(tag))
+            return;
+        const instances = new Map();
         class Plus extends HTMLElement {
             constructor() {
                 super();
                 this.attachShadow({ mode: 'open' });
                 // TODO
-                this.plus = new constructor();
-                this.plus[CONSTANTS.API_HOST] = () => this;
-                this.plus['uhtml'] = uhtml;
-                this.plus[CONSTANTS.API_STATUS] = 'initialize';
+                const instance = new constructor();
+                instances.set(this, instance);
+                instance[CONSTANTS.API_HOST] = () => this;
+                instance['uhtml'] = uhtml;
+                instance[CONSTANTS.API_STATUS] = 'initialize';
             }
             static get observedAttributes() {
-                return Object.keys(members)
-                    .filter((key) => members[key][0] != CONSTANTS.TYPE_FUNCTION)
-                    .map((key) => paramCase(key));
+                // TODO: ignore functions
+                return getMembersKey(constructor).map((key) => paramCase(key));
             }
             adoptedCallback() {
-                call(this.plus, CONSTANTS.LIFECYCLE_ADOPTED);
+                const instance = instances.get(this);
+                call(instance, CONSTANTS.LIFECYCLE_ADOPTED);
             }
             // TODO
             attributeChangedCallback(name, prev, next) {
+                const instance = instances.get(this);
                 const key = camelCase(name);
-                const [type] = members[key];
+                const type = getMemberType(instance, key);
                 const parsed = parseValue(next, type);
-                this.plus[key] = parsed;
+                instance[key] = parsed;
             }
             connectedCallback() {
-                this.plus[CONSTANTS.API_STATUS] = 'connected';
-                call(this.plus, CONSTANTS.LIFECYCLE_CONNECTED);
-                request(this.plus)
+                const instance = instances.get(this);
+                instance[CONSTANTS.API_STATUS] = 'connected';
+                call(instance, CONSTANTS.LIFECYCLE_CONNECTED);
+                request(instance)
                     .then(() => {
-                    this.plus[CONSTANTS.API_STATUS] = 'loaded';
-                    call(this.plus, CONSTANTS.LIFECYCLE_LOADED);
+                    instance[CONSTANTS.API_STATUS] = 'loaded';
+                    call(instance, CONSTANTS.LIFECYCLE_LOADED);
                 })
                     .catch((error) => {
                     throw error;
                 });
             }
             disconnectedCallback() {
-                this.plus[CONSTANTS.API_STATUS] = 'disconnected';
-                call(this.plus, CONSTANTS.LIFECYCLE_DISCONNECTED);
+                const instance = instances.get(this);
+                instance[CONSTANTS.API_STATUS] = 'disconnected';
+                call(instance, CONSTANTS.LIFECYCLE_DISCONNECTED);
             }
         }
-        if (customElements.get(tag))
-            return;
         customElements.define(tag, Plus);
     };
 }

package/client/decorators/event.js

@@ -1,15 +1,25 @@
-import { paramCase } from 'change-case';
-import { defineProperty, dispatch, host } from '../utils/index.js';
+import { paramCase, pascalCase } from 'change-case';
+import { defineProperty, getFramework, host } from '../utils/index.js';
 export function Event(options = {}) {
     return function (target, propertyKey) {
         defineProperty(target, propertyKey, {
             get() {
                 return (detail) => {
                     var _a;
+                    const element = host(this);
+                    const framework = getFramework(element);
                     (_a = options.bubbles) !== null && _a !== void 0 ? _a : (options.bubbles = false);
-                    const name = paramCase(options.name || String(propertyKey));
+                    let name = options.name || String(propertyKey);
+                    switch (framework) {
+                        case 'react':
+                            name = pascalCase(name);
+                            break;
+                        default:
+                            name = paramCase(name);
+                            break;
+                    }
                     const event = new CustomEvent(name, Object.assign(Object.assign({}, options), { detail }));
-                    dispatch(host(this), event);
+                    element.dispatchEvent(event);
                     return event;
                 };
             }

package/client/decorators/property.js

@@ -1,11 +1,11 @@
 import { paramCase } from 'change-case';
 import * as CONSTANTS from '../../constants/index.js';
-import { defineProperty, getMembers, host, parseValue, request, updateAttribute, appendToMethod } from '../utils/index.js';
+import { defineProperty, getMemberType, host, parseValue, request, updateAttribute, appendToMethod } from '../utils/index.js';
 export function Property(options) {
     return function (target, propertyKey) {
         const name = String(propertyKey);
         const attribute = paramCase(name);
-        const type = getMembers(target)[name][0];
+        const type = getMemberType(target, name);
         const values = new Map();
         function get() {
             return values.get(this);

package/client/utils/appendToMethod.d.ts

@@ -1,2 +1 @@
-import { PlusElement } from '../../types/index.js';
-export declare const appendToMethod: (target: PlusElement, propertyKey: PropertyKey, handler: (this: any, args: Array<any>) => void) => void;
+export declare const appendToMethod: (target: any, propertyKey: PropertyKey, handler: (this: any, args: Array<any>) => void) => void;

package/client/utils/call.d.ts

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

package/client/utils/config.d.ts

@@ -1,10 +1,5 @@
 interface Options {
-    event?: OptionsEvent;
 }
-interface OptionsEvent {
-    dispatch?: (target: OptionsEventTarget, event: Event) => boolean;
-}
-declare type OptionsEventTarget = Window | Document | Element;
 export declare const getConfig: () => Options;
 export declare const setConfig: (config: Options) => void;
 export {};

package/client/utils/config.js

@@ -1,4 +1,3 @@
-// TODO
 let options = {};
 export const getConfig = () => {
     return options;

package/client/utils/getFramework.d.ts

@@ -0,0 +1 @@
+export declare const getFramework: (target: HTMLElement) => string | undefined;

package/client/utils/getFramework.js

@@ -0,0 +1,12 @@
+export const getFramework = (target) => {
+    const keys = Object.keys(target);
+    const has = (key) => keys.some((key) => key.startsWith(key));
+    if (has('__zone_symbol__'))
+        return 'angular';
+    if (has('__react'))
+        return 'react';
+    if (has('__svelte'))
+        return 'svelte';
+    if (has('__vnode'))
+        return 'vue';
+};

package/client/utils/getMemberType.d.ts

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

package/client/utils/getMemberType.js

@@ -0,0 +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];
+};

package/client/utils/getMembersKey.d.ts

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

package/client/utils/getMembersKey.js

@@ -0,0 +1,4 @@
+import * as CONSTANTS from '../../constants/index.js';
+export const getMembersKey = (target) => {
+    return Object.keys(target.constructor[CONSTANTS.STATIC_MEMBERS] || target[CONSTANTS.STATIC_MEMBERS] || {});
+};

package/client/utils/index.d.ts

@@ -2,12 +2,15 @@ export * from './appendToMethod.js';
 export * from './call.js';
 export * from './config.js';
 export * from './defineProperty.js';
-export * from './event.js';
-export * from './getMembers.js';
+export * from './getFramework.js';
+export * from './getMembersKey.js';
+export * from './getMemberType.js';
 export * from './getStyles.js';
 export * from './host.js';
 export * from './isEvent.js';
 export * from './isServer.js';
+export * from './off.js';
+export * from './on.js';
 export * from './parseValue.js';
 export * from './request.js';
 export * from './sync.js';

package/client/utils/index.js

@@ -2,12 +2,15 @@ export * from './appendToMethod.js';
 export * from './call.js';
 export * from './config.js';
 export * from './defineProperty.js';
-export * from './event.js';
-export * from './getMembers.js';
+export * from './getFramework.js';
+export * from './getMembersKey.js';
+export * from './getMemberType.js';
 export * from './getStyles.js';
 export * from './host.js';
 export * from './isEvent.js';
 export * from './isServer.js';
+export * from './off.js';
+export * from './on.js';
 export * from './parseValue.js';
 export * from './request.js';
 export * from './sync.js';

package/client/utils/off.d.ts

@@ -0,0 +1 @@
+export declare const off: (target: Window | Document | Element, type: string, handler: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions) => void;

package/client/utils/off.js

@@ -0,0 +1,3 @@
+export const off = (target, type, handler, options) => {
+    target.removeEventListener(type, handler, options);
+};

package/client/utils/on.d.ts

@@ -0,0 +1 @@
+export declare const on: (target: Window | Document | Element, type: string, handler: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void;

package/client/utils/on.js

@@ -0,0 +1,3 @@
+export const on = (target, type, handler, options) => {
+    target.addEventListener(type, handler, options);
+};

package/client/utils/request.js

@@ -11,10 +11,12 @@ export const request = (target, state) => {
         return run(state);
     run = task({
         canStart: (states, state) => {
-            return /* hasChange */ true;
+            // TODO: hasChange
+            return true;
         },
         canRun: (states) => {
-            return /* shouldUpdate */ true;
+            // TODO: shouldUpdate
+            return true;
         },
         run: (states) => {
             call(target, CONSTANTS.LIFECYCLE_UPDATE, states);

package/client/utils/sync.js

@@ -1,5 +1,6 @@
-import { on, off } from './event.js';
 import { isEvent } from './isEvent.js';
+import { off } from './off.js';
+import { on } from './on.js';
 import { toEvent } from './toEvent.js';
 import { updateAttribute } from './updateAttribute.js';
 export const sync = (node) => {

package/client/utils/task.js

@@ -1,5 +1,5 @@
 export const task = (options) => {
-    let states, isPending, updatePromise;
+    let isPending, states, updatePromise;
     const run = (state) => {
         const newStates = Object.assign({}, states, state);
         if (options.canStart && !options.canStart(newStates, state))

package/compiler/plugins/customElement.js

@@ -4,6 +4,7 @@ import { print, visitor } from '../utils/index.js';
 const defaults = {
     typings: true
 };
+// TODO: support {variable && jsxElement}
 export const customElement = (options) => {
     const name = 'customElement';
     options = Object.assign({}, defaults, options);
@@ -17,6 +18,17 @@ export const customElement = (options) => {
                 path.node.body.body.unshift(t.classProperty(t.identifier('uhtml')));
             }
         });
+        // replace className
+        visitor(ast, {
+            JSXAttribute(path) {
+                if (path.node.name.name != 'className')
+                    return;
+                const hasClass = path.parentPath.node.attributes.some((attribute) => attribute.name.name == 'class');
+                if (hasClass)
+                    return path.remove();
+                path.replaceWith(t.jsxAttribute(t.jsxIdentifier('class'), path.node.value));
+            }
+        });
         // jsx to uhtml syntax
         visitor(ast, {
             JSXAttribute: {
@@ -105,7 +117,9 @@ export const customElement = (options) => {
             visitor(ast, {
                 Program(path) {
                     path.node.body.push(Object.assign(t.tsModuleDeclaration(t.identifier('global'), t.tsModuleBlock([
-                        t.tsInterfaceDeclaration(t.identifier(context.componentInterfaceName), null, [], t.tsInterfaceBody([
+                        t.tsInterfaceDeclaration(t.identifier(context.componentInterfaceName), null, [
+                            t.tSExpressionWithTypeArguments(t.identifier('HTMLElement')) // TODO
+                        ], t.tsInterfaceBody([
                             ...context.classProperties.map((property) => Object.assign(t.tSPropertySignature(property.key, property.typeAnnotation), {
                                 optional: property.optional,
                                 leadingComments: property.leadingComments

package/compiler/plugins/customElementReact/templates/src/components/{{fileName}}.compact.ts.hbs

@@ -1,6 +1,3 @@
-/* eslint-disable */
-/* tslint:disable */
-
 /**************************************************
  * THIS FILE IS AUTO-GENERATED, DO NOT EDIT MANUALY
  **************************************************/

package/compiler/plugins/customElementReact/templates/src/components/{{fileName}}.ts.hbs

@@ -1,13 +1,9 @@
-/* eslint-disable */
-/* tslint:disable */
-
 /**************************************************
  * THIS FILE IS AUTO-GENERATED, DO NOT EDIT MANUALY
  **************************************************/
 
 import { proxy } from '../proxy';
 
-{{!-- import { {{importerComponent.root}} as Component } from '{{importerComponent.source}}'; --}}
 import '{{importerComponent.source}}';
 import type { {{importerComponentType.root}} as Type } from '{{importerComponentType.source}}';
 

package/compiler/plugins/customElementReact/templates/src/proxy.ts.hbs

@@ -159,13 +159,13 @@ const setEvent = (element: Element, name: string, handler: EventHandlerType) =>
 
   const previous = events[name];
 
-  previous && element.removeEventListener(name, previous);
+  previous && element.removeEventListener(paramCase(name), previous);
 
   function callback(event: Event) {
     handler && handler.call(this, event);
   }
 
-  element.addEventListener(name, (events[name] = callback));
+  element.addEventListener(paramCase(name), (events[name] = callback));
 };
 
 const setProps = <ElementType>(element: ElementType, props: PropsType<ElementType>, extra: ExtraType) => {
@@ -243,7 +243,7 @@ export const proxy = <ElementType, PropType>(
       Object.keys(events).forEach((name) => {
         const handler = events[name];
 
-        (this.element as any).removeEventListener(name, handler);
+        (this.element as any).removeEventListener(paramCase(name), handler);
       });
 
       delete this.element['$events'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@htmlplus/element",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "license": "MIT",
   "author": "Masood Abdolian <m.abdolian@gmail.com>",
   "description": "Compiler of HTMLPlus",

package/client/utils/event.d.ts

@@ -1,5 +0,0 @@
-declare type Target = Window | Document | Element;
-export declare const dispatch: (target: Target, event: Event) => boolean;
-export declare const on: (target: Target, type: string, handler: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void;
-export declare const off: (target: Target, type: string, handler: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions) => void;
-export {};

package/client/utils/event.js

@@ -1,11 +0,0 @@
-import { getConfig } from './config.js';
-export const dispatch = (target, event) => {
-    var _a, _b;
-    return ((_b = (_a = getConfig().event) === null || _a === void 0 ? void 0 : _a.dispatch) === null || _b === void 0 ? void 0 : _b.call(_a, target, event)) || target.dispatchEvent(event);
-};
-export const on = (target, type, handler, options) => {
-    target.addEventListener(type, handler, options);
-};
-export const off = (target, type, handler, options) => {
-    target.removeEventListener(type, handler, options);
-};

package/client/utils/getMembers.d.ts

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

package/client/utils/getMembers.js

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