[add] Reaction decorator

[optimize] simplify Props Delegation of Async Box
[fix] some detail bugs

Author: TechQuery

package.json

@@ -1,6 +1,6 @@
 {
     "name": "web-cell",
-    "version": "3.0.0-alpha.2",
+    "version": "3.0.0-beta.0",
     "description": "Web Components engine based on VDOM, JSX, MobX & TypeScript",
     "keywords": [
         "web",
@@ -28,6 +28,7 @@
     "dependencies": {
         "@swc/helpers": "^0.3.3",
         "mobx": ">=4.0.0 <6.0.0",
+        "regenerator-runtime": "^0.13.9",
         "snabbdom": "^3.3.1",
         "web-utility": "^3.4.2"
     },

source/Async.tsx

@@ -1,12 +1,13 @@
-import { observable, reaction } from 'mobx';
+import { observable } from 'mobx';
 
 import { ComponentTag, WebCellProps, FunctionComponent } from './utility';
 import { WebCellClass, WebCell } from './WebCell';
-import { component, observer } from './decorator';
+import { component, observer, reaction } from './decorator';
 import { createCell } from './renderer';
 
 export interface AsyncBoxProps extends WebCellProps {
     loader: () => Promise<ComponentTag>;
+    delegatedProps?: WebCellProps;
 }
 
 @component({
@@ -20,40 +21,28 @@ export class AsyncBox extends WebCell<AsyncBoxProps>() {
     @observable
     component?: ComponentTag;
 
-    get delegatedProps() {
-        return Object.fromEntries(
-            Object.entries(Object.getOwnPropertyDescriptors(this))
-                .map(([key, { value }]) => value != null && [key, value])
-                .filter(Boolean)
-        );
-    }
+    @observable
+    delegatedProps?: AsyncBoxProps['delegatedProps'];
+
     connectedCallback() {
-        if (this.load instanceof Function) this.load();
+        super.connectedCallback();
 
-        this.disposers.push(reaction(() => this.loader, this.load));
+        this.load();
     }
 
-    protected load = async () => {
+    @reaction((element: AsyncBox) => element.loader)
+    protected async load() {
         this.component = undefined;
         this.component = await this.loader();
 
         this.emit('load', this.component);
-    };
+    }
 
     render() {
-        const {
-            component: Tag,
-            props: { defaultSlot, ...props },
-            delegatedProps
-        } = this;
+        const { component: Tag, props, delegatedProps } = this;
+        const { defaultSlot, ...data } = { ...props, ...delegatedProps };
 
-        return (
-            Tag && (
-                <Tag {...delegatedProps} {...props}>
-                    {defaultSlot}
-                </Tag>
-            )
-        );
+        return Tag && <Tag {...data}>{defaultSlot}</Tag>;
     }
 }
 
@@ -67,6 +56,9 @@ export function lazy<
     T extends () => Promise<{ default: FunctionComponent | WebCellClass }>
 >(loader: T) {
     return (props: GetAsyncProps<T>) => (
-        <AsyncBox {...props} loader={async () => (await loader()).default} />
+        <AsyncBox
+            delegatedProps={props}
+            loader={async () => (await loader()).default}
+        />
     );
 }

source/WebCell.tsx

@@ -11,8 +11,12 @@ import {
 import { IReactionDisposer, observable } from 'mobx';
 
 import { WebCellProps, getMobxData } from './utility';
-import { ComponentMeta, DOMEventDelegater } from './decorator';
-import { createCell, render } from './renderer';
+import {
+    ComponentMeta,
+    DOMEventDelegater,
+    ReactionDelegater
+} from './decorator';
+import { Fragment, createCell, render } from './renderer';
 
 export interface WebCellComponent<P extends WebCellProps = WebCellProps>
     extends CustomElement {
@@ -40,6 +44,7 @@ export interface WebCellClass<P extends WebCellProps = WebCellProps>
         Partial<ComponentMeta>,
         Constructor<WebCellComponent<P>> {
     eventDelegaters?: DOMEventDelegater[];
+    reactions?: ReactionDelegater[];
 }
 
 export function WebCell<P extends WebCellProps = WebCellProps>(
@@ -51,6 +56,7 @@ export function WebCell<P extends WebCellProps = WebCellProps>(
         static mode?: ComponentMeta['mode'];
         static delegatesFocus?: ComponentMeta['delegatesFocus'];
         static eventDelegaters: DOMEventDelegater[] = [];
+        static reactions: ReactionDelegater[] = [];
 
         readonly internals?: ElementInternals;
         readonly root: DocumentFragment | HTMLElement;
@@ -113,11 +119,7 @@ export function WebCell<P extends WebCellProps = WebCellProps>(
         }
 
         update() {
-            const tree = this.render();
-
-            if (!tree) return;
-
-            render(tree, this.root);
+            render(this.render() ?? <></>, this.root);
 
             this.updatedCallback?.();
         }
@@ -129,6 +131,8 @@ export function WebCell<P extends WebCellProps = WebCellProps>(
                 this.root.removeEventListener(type, this[method]);
 
             for (const disposer of this.disposers) disposer();
+
+            this.disposers.length = 0;
         }
 
         syncPropAttr(name: string) {

source/WebField.ts

@@ -1,12 +1,12 @@
-import { observable, reaction } from 'mobx';
+import { observable } from 'mobx';
 import {
     Constructor,
     CustomFormElement,
     CustomFormElementClass
 } from 'web-utility';
 
 import { WebCell, WebCellComponent } from './WebCell';
-import { attribute } from './decorator';
+import { attribute, reaction } from './decorator';
 import { WebCellProps } from './utility';
 
 export type WebFieldProps<T extends HTMLElement = HTMLInputElement> =
@@ -27,13 +27,9 @@ export function WebField<
     class WebField extends WebCell<P>() implements WebFieldComponent<P> {
         static formAssociated = true;
 
-        connectedCallback() {
-            this.disposers.push(
-                reaction(
-                    () => this.value,
-                    value => this.internals.setFormValue(value)
-                )
-            );
+        @reaction((element: WebFieldComponent<P>) => element.value)
+        protected setValue(value: string) {
+            this.internals.setFormValue(value);
         }
 
         formDisabledCallback(disabled: boolean) {

source/decorator.ts

@@ -1,13 +1,14 @@
 import {
     toCamelCase,
+    toHyphenCase,
     parseJSON,
     isHTMLElementClass,
     DelegateEventHandler
 } from 'web-utility';
-import { autorun } from 'mobx';
+import { IReactionPublic, reaction as watch, autorun } from 'mobx';
 
 import { FunctionComponent } from './utility/vDOM';
-import { WebCellClass, ComponentClass } from './WebCell';
+import { WebCellComponent, WebCellClass, ComponentClass } from './WebCell';
 import { VNode } from 'snabbdom';
 import { patch } from './renderer';
 
@@ -49,16 +50,22 @@ function wrapClass<T extends ComponentClass>(Component: T) {
     // @ts-ignore
     return class ObserverTrait extends Component {
         connectedCallback() {
-            const { observedAttributes = [] } = this
+            const { observedAttributes = [], reactions } = this
                 .constructor as WebCellClass;
 
-            this.disposers = [
+            this.disposers.push(
                 autorun(() => this.update()),
 
                 ...observedAttributes.map(name =>
                     autorun(() => this.syncPropAttr(name))
+                ),
+                ...reactions.map(({ methodKey, expression }) =>
+                    watch(
+                        r => expression(this, r),
+                        (this[methodKey] as ReactionHandler).bind(this)
+                    )
                 )
-            ];
+            );
             super.connectedCallback?.();
         }
 
@@ -92,7 +99,33 @@ export function attribute<T extends InstanceType<WebCellClass>>(
             get: () => observedAttributes
         });
     }
-    observedAttributes.push(key);
+    observedAttributes.push(toHyphenCase(key));
+}
+
+type ReactionHandler<I = any, O = any> = (
+    data?: I,
+    reaction?: IReactionPublic
+) => O;
+
+export interface ReactionDelegater {
+    methodKey: string;
+    expression: ReactionHandler;
+}
+
+export function reaction<C extends WebCellComponent, V>(
+    expression: ReactionHandler<C, V>
+) {
+    return (
+        { constructor }: C,
+        key: string,
+        meta: TypedPropertyDescriptor<ReactionHandler<V>>
+    ) => {
+        (constructor as WebCellClass).reactions.push({
+            methodKey: key,
+            expression
+        });
+        return meta;
+    };
 }
 
 export interface DOMEventDelegater {

source/index.ts

@@ -20,3 +20,4 @@ export * from './renderer';
 export * from './decorator';
 export * from './WebCell';
 export * from './WebField';
+export * from './Async';

source/renderer.ts

@@ -82,7 +82,7 @@ function splitProps(tagName: string, raw: VDOMData) {
         if (key === 'is') data.is = raw[key];
         else if (key === 'ref')
             (data.hook ||= {}).insert = ({ elm }) =>
-                raw[key](elm as HTMLElement);
+                raw[key]?.(elm as HTMLElement);
         else if (key === 'className')
             data.class = Object.fromEntries(
                 raw[key]

test/MobX.spec.tsx

@@ -1,7 +1,8 @@
 import 'element-internals-polyfill';
+import { sleep } from 'web-utility';
 import { observable } from 'mobx';
 
-import { component, observer } from '../source/decorator';
+import { component, observer, reaction } from '../source/decorator';
 import { WebCell } from '../source/WebCell';
 import { createCell, render } from '../source/renderer';
 
@@ -48,4 +49,35 @@ describe('Observer decorator', () => {
             '2'
         );
     });
+
+    it('should register a Reaction with MobX', async () => {
+        const handler = jest.fn();
+
+        @component({
+            tagName: 'reaction-cell'
+        })
+        @observer
+        class ReactionCell extends WebCell() {
+            @observable
+            test = '';
+
+            @reaction((element: ReactionCell) => element.test)
+            handleReaction(value: string) {
+                handler(value);
+            }
+        }
+        render(<ReactionCell />);
+
+        const tag = document.querySelector<ReactionCell>('reaction-cell');
+        tag.test = 'a';
+
+        await sleep();
+
+        expect(handler).toBeCalledTimes(1);
+        expect(handler).toBeCalledWith('a');
+
+        document.body.innerHTML = '';
+
+        expect(tag.disposers).toHaveLength(0);
+    });
 });