[fix] observer(FC) updating (fix EasyWebApp/DOM-Renderer#4)

Author: TechQuery

.github/workflows/main.yml

@@ -24,7 +24,7 @@ jobs:
               run: pnpm i --frozen-lockfile
 
             - name: Build & Publish
-              run: npm publish --access public provenance
+              run: npm publish --access public --provenance
               env:
                   NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "web-cell",
-    "version": "3.0.0",
+    "version": "3.0.1",
     "description": "Web Components engine based on VDOM, JSX, MobX & TypeScript",
     "keywords": [
         "web",
@@ -27,7 +27,7 @@
     "types": "dist/index.d.ts",
     "dependencies": {
         "@swc/helpers": "^0.5.13",
-        "dom-renderer": "^2.4.1",
+        "dom-renderer": "^2.4.4",
         "mobx": ">=6.11",
         "regenerator-runtime": "^0.14.1",
         "web-utility": "^4.4.2"

pnpm-lock.yaml

@@ -23,21 +23,23 @@ export type FunctionComponent<P extends DataObject = {}> = (props: P) => VNode;
 export type FC<P extends DataObject = {}> = FunctionComponent<P>;
 
 function wrapFunction<P>(func: FC<P>) {
-    return (props: P) => {
-        const tree = func(props),
-            renderer = new DOMRenderer();
+    const renderer = new DOMRenderer();
 
-        const disposer = autorun(() => {
-            const newTree = func(props);
+    return (props: P) => {
+        const tree = func(props);
+        let disposer: IReactionDisposer | undefined;
 
-            if (tree.node) Object.assign(tree, renderer.patch(tree, newTree));
-        });
         const { ref } = tree;
 
         tree.ref = node => {
-            if (node) tree.node = node;
-            else disposer();
+            disposer?.();
+
+            if (node)
+                disposer = autorun(() => {
+                    const newTree = func(props);
 
+                    renderer.patch(VNode.fromDOM(node), newTree);
+                });
             ref?.(node);
         };
         return tree;