[optimize] add Generic Types for MobX adapter

[add] WebCellFunction type

Author: TechQuery

MobX/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mobx-web-cell",
-    "version": "0.3.1",
+    "version": "0.3.2",
     "license": "LGPL-3.0",
     "author": "shiy2008@gmail.com",
     "description": "MobX adaptor for WebCell v2",
@@ -12,6 +12,7 @@
         "TypeScript",
         "decorator"
     ],
+    "homepage": "https://github.com/EasyWebApp/WebCell/tree/v2/MobX",
     "source": "source/index.ts",
     "types": "dist/index.d.ts",
     "main": "dist/index.umd.js",
@@ -22,16 +23,16 @@
         "prepublishOnly": "npm test  &&  rm -rf .rts2_cache_* dist/  &&  npm run build"
     },
     "dependencies": {
-        "mobx": "^5.15.4",
-        "web-cell": "^2.1.0"
+        "mobx": "^5.15.6",
+        "web-cell": "^2.2.0"
     },
     "devDependencies": {
-        "@types/jest": "^26.0.3",
-        "@webcomponents/webcomponentsjs": "^2.4.3",
-        "jest": "^26.1.0",
-        "microbundle": "^0.12.2",
-        "ts-jest": "^26.1.1",
-        "typescript": "^3.9.5"
+        "@types/jest": "^26.0.10",
+        "@webcomponents/webcomponentsjs": "^2.4.4",
+        "jest": "^26.4.2",
+        "microbundle": "^0.12.3",
+        "ts-jest": "^26.3.0",
+        "typescript": "^4.0.2"
     },
     "jest": {
         "preset": "ts-jest"

MobX/source/index.ts

@@ -1,10 +1,12 @@
 import { WebCellProps, WebCellClass, VNode, patch } from 'web-cell';
 import { autorun } from 'mobx';
 
-export type FunctionComponent = (props?: WebCellProps) => VNode;
+export type FunctionComponent<P extends WebCellProps = WebCellProps> = (
+    props?: P
+) => VNode;
 
-function wrapFunction(func: FunctionComponent) {
-    return function (props?: WebCellProps) {
+function wrapFunction<P>(func: FunctionComponent<P>) {
+    return function (props?: P) {
         var vTree: VNode;
 
         autorun(
@@ -14,17 +16,19 @@ function wrapFunction(func: FunctionComponent) {
     };
 }
 
-function wrapClass(Class: WebCellClass) {
+function wrapClass<P, S>(Class: WebCellClass<P, S>) {
     const { update } = Class.prototype;
 
     Class.prototype.update = function () {
         autorun(() => update.call(this));
     };
 }
 
-export function observer(Class: FunctionComponent | WebCellClass): any {
+export function observer<P, S>(
+    Class: FunctionComponent<P> | WebCellClass<P, S>
+): any {
     if (Object.getPrototypeOf(Class) === Function.prototype)
-        return wrapFunction(Class as FunctionComponent);
+        return wrapFunction(Class as FunctionComponent<P>);
 
-    wrapClass(Class as WebCellClass);
+    wrapClass(Class as WebCellClass<P, S>);
 }

source/WebCell.tsx

@@ -9,6 +9,10 @@ import {
 import { ComponentMeta, watch, DOMEventDelegater } from './decorator';
 import { VNodeChildElement, VNode, createCell, render } from './renderer';
 
+export type WebCellFunction<P extends WebCellProps = WebCellProps> = (
+    props?: P
+) => WebCellElement;
+
 export interface WebCellComponent<P extends WebCellProps = WebCellProps, S = {}>
     extends HTMLElement {
     /**