wip fix jsx prop

app/srv/ws/sync/actions/comp_new.ts

@@ -13,6 +13,7 @@ import { loadComponent } from "../editor/load-component";
 import { parseJs } from "../editor/parser/parse-js";
 import { docs } from "../entity/docs";
 import { SyncConnection } from "../type";
+import { createId } from "@paralleldrive/cuid2";
 
 export const comp_new: SAction["comp"]["new"] = async function (
   this: SyncConnection,
@@ -33,6 +34,8 @@ export const comp_new: SAction["comp"]["new"] = async function (
           props: {},
         } as FNComponent
       );
+      mitem.set("id", createId());
+      mitem.set("originalId", item_id);
       mitem.set("component", map);
       mitem.set("childs", new Y.Array());
     }

app/web/src/nova/ed/logic/tree/build.tsx

@@ -1,4 +1,5 @@
 import { IItem, MItem } from "../../../../utils/types/item";
+import { FMCompDef, FNCompDef } from "../../../../utils/types/meta-fn";
 import { genMeta } from "../../../vi/meta/meta";
 import { IMeta, PG, active } from "../ed-global";
 import { pushTreeNode } from "./build/push-tree";
@@ -51,22 +52,56 @@ export const treeRebuild = async (p: PG, arg?: { note?: string }) => {
                     }
                   } else {
                     const parent = meta[m.parent.id];
-
                     if (parent.mitem) {
                       parent.mitem.get("childs")?.forEach((child) => {
                         if (child.get("id") === m.item.id) {
                           m.mitem = child;
+
+                          if (m.item.component?.props) {
+                            for (const [prop_name, v] of Object.entries(
+                              m.item.component.props
+                            )) {
+                              const mprop = m.mitem
+                                ?.get("component")
+                                ?.get("props")
+                                ?.get(prop_name);
+                              if (v.content && mprop) {
+                                const pmeta = meta[v.content.id];
+                                if (pmeta) {
+                                  pmeta.mitem = mprop.get("content");
+                                }
+                              }
+                            }
+                          }
                         }
                       });
                     }
                   }
                 }
+
+                if (m.jsx_prop && m.parent?.instance_id) {
+                  const parent = meta[m.parent?.instance_id];
+                  if (parent) {
+                    const prop = parent.item.component?.props[m.jsx_prop.name];
+                    if (prop) {
+                      prop.content = m.item;
+                    }
+                  }
+                }
               }
             },
           },
         },
         { item }
       );
+
+      if (transact.list.length > 0) {
+        p.page.doc?.transact(() => {
+          for (const fn of transact.list) {
+            fn();
+          }
+        });
+      }
     }
   }
 
@@ -101,3 +136,34 @@ export const treeRebuild = async (p: PG, arg?: { note?: string }) => {
     }
   }
 };
+
+const transact = {
+  list: [] as (() => void)[],
+  propContentFromItem: (
+    meta: IMeta,
+    mitem: MItem,
+    name: string,
+    prop: FNCompDef
+  ) => {
+    transact.list.push(() => {
+      const mprops = mitem?.get("component")?.get("props");
+
+      if (mprops) {
+        const map = new Y.Map();
+        syncronize(map, prop);
+        mprops.set(name, map as any);
+        console.log(mprops.get(name));
+        const mcontent = mprops.get(name)?.get("content");
+        console.log(mcontent);
+      }
+    });
+  },
+  jsxContentFromItem(meta: IMeta, content: IItem, mprop: FMCompDef) {
+    transact.list.push(() => {
+      const map = new Y.Map();
+      syncronize(map, content);
+      mprop.set("content", map as any);
+      meta.mitem = mprop.get("content");
+    });
+  },
+};

app/web/src/nova/ed/logic/tree/build/push-tree.tsx

@@ -38,13 +38,24 @@ export const pushTreeNode = (
         text: meta.item.name,
         data: meta,
       });
-    } else if (meta.jsx_prop) {
+    } else {
-      tree.push({
+      if (meta.jsx_prop) {
-        id: meta.item.id,
+        tree.push({
-        parent: meta.parent?.instance_id || "root",
+          id: meta.item.id,
-        text: meta.item.name,
+          parent: meta.parent?.instance_id || "root",
-        data: meta,
+          text: meta.item.name,
-      });
+          data: meta,
+        });
+      } else {
+        if (meta.parent.id !== meta.parent.instance_id) {
+          tree.push({
+            id: meta.item.id,
+            parent: meta.parent?.id || "root",
+            text: meta.item.name,
+            data: meta,
+          });
+        }
+      }
     }
   }
 };

app/web/src/nova/ed/panel/header/mid/add-text.tsx

@@ -43,6 +43,7 @@ export const EdAddText = () => {
         let mitem = meta.mitem as MContent;
         if (mitem) {
           const item = meta.item as IContent;
+
           if (
             item.type === "text" ||
             (item.type === "item" && item.component?.id)
@@ -99,6 +100,7 @@ export const EdAddText = () => {
               }
 
               active.item_id = map.get("id") || "";
+
               p.render();
               focus();
             }

app/web/src/nova/ed/panel/side/prop-master/prop-form.tsx

@@ -50,12 +50,12 @@ export const EdPropPopoverForm: FC<{
               )}
               onClick={() => {
                 if (e.type === "content-element") {
-                  mmeta.doc?.transact(() => {
+                  mprop.doc?.transact(() => {
                     mmeta.set("type", e.type as any);
                     if (!mprop.get("content")) {
                       const json = {
                         id: createId(),
-                        name: `jsx-content`,
+                        name: name,
                         type: "item",
                         dim: { w: "full", h: "full" },
                         childs: [],

app/web/src/nova/ed/panel/tree/node/render.tsx

@@ -40,7 +40,10 @@ export const nodeRender: NodeRender<IMeta> = (node, prm) => {
           const props = meta.scope.def?.props;
           if (props) {
             const prop = props[prop_name];
-            if (prop && prop.visible === true) {
+            if (
+              prop &&
+              (prop.visible === true || !prop.hasOwnProperty("visible"))
+            ) {
               hide = false;
             }
           }

app/web/src/nova/vi/meta/comp.tsx

@@ -22,6 +22,7 @@ export const genComp = (p: GenMetaP, arg: GenMetaArg) => {
       let instances: IMeta["instances"] = undefined;
 
       const parent_instance = getParentInstance(p, arg, item.id);
+
       instance = parent_instance || {};
       instances = !parent_instance ? { [item.id]: instance } : undefined;
 
@@ -68,30 +69,29 @@ export const genComp = (p: GenMetaP, arg: GenMetaArg) => {
         pcomp,
         each(name, prop) {
           const comp_id = item.component?.id;
-          if (
-            prop.meta?.type === "content-element" &&
-            prop.content &&
-            comp_id
-          ) {
-            walkChild(prop.content, instance);
 
-            genMeta(
+          if (prop.meta?.type === "content-element" && comp_id) {
-              { ...p, smeta },
+            if (prop.content) {
-              {
+              walkChild(prop.content, instance);
-                item: prop.content,
+
-                is_root: false,
+              genMeta(
-                jsx_prop: {
+                { ...p, smeta },
-                  is_root: true,
+                {
-                  comp_id,
+                  item: prop.content,
-                  name,
+                  is_root: false,
-                },
+                  jsx_prop: {
-                parent: {
+                    is_root: true,
-                  item: meta.item,
+                    comp_id,
-                  instance_id: item.id,
+                    name,
-                  comp: pcomp.comp,
+                  },
-                },
+                  parent: {
-              }
+                    item: meta.item,
-            );
+                    instance_id: item.id,
+                    comp: pcomp.comp,
+                  },
+                }
+              );
+            }
           }
         },
       });

app/web/src/nova/vi/meta/comp/instantiate.tsx

@@ -22,6 +22,11 @@ export const instantiate = (arg: {
       if (item.component.props[k]) {
         newitem.component.props[k] = item.component.props[k];
       }
+
+      const content = newitem.component.props[k].content;
+      if (content) {
+        walkChild(content, ids);
+      }
     }
   }
 
@@ -32,6 +37,7 @@ export const instantiate = (arg: {
   for (const [k, v] of Object.entries(newitem)) {
     (item as any)[k] = v;
   }
+
 };
 
 export const walkChild = (

app/web/src/nova/vi/meta/comp/walk-prop.tsx

@@ -1,3 +1,4 @@
+import { deepClone } from "web-utils";
 import { IItem } from "../../../../utils/types/item";
 import { FNCompDef } from "../../../../utils/types/meta-fn";
 
@@ -7,12 +8,13 @@ export const walkProp = (arg: {
   each: (name: string, prop: FNCompDef) => void;
 }) => {
   for (const [k, v] of Object.entries(arg.pcomp.comp.component?.props || {})) {
+    let prop = deepClone(v);
     const props = arg.item.component?.props;
-    let prop = props?.[k];
+    if (props && props[k]) {
-    if (props) {
+      prop.value = props[k].value;
-      if (!props[k]) {
+      prop.valueBuilt = props[k].valueBuilt;
-        props[k] = v;
+      if (props[k].content) {
-        prop = v;
+        prop.content = props[k].content;
       }
     }