wip fix

app/web/src/nova/ed/logic/comp/load.tsx

@@ -8,6 +8,8 @@ import { IMeta, PG } from "../ed-global";
 import { treeRebuild } from "../tree/build";
 import { pushTreeNode } from "../tree/build/push-tree";
 import { isTextEditing } from "../active/is-editing";
+import { assignMitem } from "../tree/assign-mitem";
+import { createId } from "@paralleldrive/cuid2";
 
 export const loadcomp = {
   timeout: 0 as any,
@@ -43,13 +45,11 @@ export const loadCompSnapshot = async (
   comp_id: string,
   snapshot: Uint8Array
 ) => {
-  if (p.comp.list[comp_id] && p.comp.list[comp_id].doc) {
-    return;
-  }
   const doc = new Y.Doc() as DComp;
   Y.applyUpdate(doc as any, decompress(snapshot));
   const mitem = doc.getMap("map").get("root");
   if (mitem) {
+    p.comp.loaded[comp_id] = mitem.toJSON() as IItem;
     if (typeof p.comp.list[comp_id]?.on_update === "function") {
       doc.off("update", p.comp.list[comp_id].on_update);
     }
@@ -159,30 +159,20 @@ export const updateComponentMeta = async (
         visit(m) {
           pushTreeNode(p, m, meta, tree);
 
-          if (m.parent) {
-            if (m.parent.id === "root") {
-              if (m.item.id === item.id) {
-                m.mitem = mitem;
-              }
-            } else {
-              const parent = meta[m.parent.id];
-              if (parent && parent.mitem) {
-                parent.mitem.get("childs")?.forEach((child) => {
-                  const cid = child.get("id");
-                  if (cid) {
-                    if (
-                      cid === m.item.id ||
-                      (m.instances &&
-                        m.instances[cid] &&
-                        m.instances[cid][m.item.id])
-                    ) {
-                      m.mitem = child;
-                    }
-                  }
-                });
-              }
-            }
-          }
+          assignMitem({
+            m,
+            root: item,
+            mitem,
+            meta,
+            new_prop_jsx(meta, mprops, prop_name, prop_val) {
+              transact.list.push(() => {
+                const map = new Y.Map();
+                if (prop_val.content) prop_val.content.id = createId();
+                syncronize(map, prop_val);
+                mprops.set(prop_name, map as any);
+              });
+            },
+          });
         },
       },
       note: "load-comp-scan-meta",
@@ -190,7 +180,19 @@ export const updateComponentMeta = async (
     { item, ignore_first_component: true }
   );
 
+  if (transact.list.length > 0) {
+    p.page.doc?.transact(() => {
+      for (const fn of transact.list) {
+        fn();
+      }
+    });
+  }
+
   p.comp.loaded[comp_id] = item;
 
   return { meta, tree };
 };
+
+const transact = {
+  list: [] as (() => void)[],
+};

app/web/src/nova/ed/logic/tree/assign-mitem.ts

@@ -4,7 +4,6 @@ import { FMCompDef, FNCompDef } from "../../../../utils/types/meta-fn";
 import { IMeta, PG } from "../ed-global";
 
 export const assignMitem = (arg: {
-  p: PG;
   m: IMeta;
   root: IItem;
   mitem: MItem;
@@ -16,7 +15,7 @@ export const assignMitem = (arg: {
     prop_val: FNCompDef
   ) => void;
 }) => {
-  const { p, m, root, mitem, meta } = arg;
+  const { m, root, mitem, meta } = arg;
 
   if (m.jsx_prop && m.parent?.instance_id) {
     const instance_meta = meta[m.parent?.instance_id];

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

@@ -53,7 +53,6 @@ export const treeRebuild = async (p: PG, arg?: { note?: string }) => {
                 }
 
                 assignMitem({
-                  p,
                   m,
                   root: item,
                   mitem,

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

@@ -19,6 +19,7 @@ export const pushTreeNode = (
       });
   } else {
     const parent = metas[meta.parent?.id || ""];
+
     if (parent && parent.mitem) {
       parent.mitem.get("childs")?.forEach((mitem) => {
         if (mitem.get("id") === meta.item.id) {

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

@@ -3,7 +3,7 @@ import { useGlobal, useLocal } from "web-utils";
 import { IItem } from "../../../../utils/types/item";
 import { FMCompDef, FNCompDef } from "../../../../utils/types/meta-fn";
 import { Menu, MenuItem } from "../../../../utils/ui/context-menu";
-import { EDGlobal, IMeta, active } from "../../logic/ed-global";
+import { EDGlobal, IMeta, PG, active } from "../../logic/ed-global";
 import { createEditScript } from "./prop-instance/edit-script";
 import { EdPropInstanceCode } from "./prop-instance/prop-code";
 import { EdPropInstanceOptions } from "./prop-instance/prop-option";
@@ -20,20 +20,14 @@ export const EdSidePropInstance: FC<{ meta: IMeta }> = ({ meta }) => {
 
   let _meta = meta;
   if (active.comp_id) {
-    if (
-      p.comp.list[active.comp_id] &&
-      p.comp.list[active.comp_id].meta &&
-      meta.item.originalId
-    ) {
-      const m = p.comp.list[active.comp_id].meta[meta.item.originalId];
-      if (m) {
-        _meta = m;
-      }
+    if (p.comp.list[active.comp_id]) {
+      _meta = getCompMeta(p, meta);
     }
   }
 
   const item = _meta?.item as IItem;
   if (!item) return <>Warning: Item not found</>;
+  if (!_meta.mitem) return <>Warning: MItem Not Found</>;
 
   let filtered = [] as { mprop: FMCompDef; cprop: FNCompDef; name: string }[];
   const mprops = _meta.mitem?.get("component")?.get("props");
@@ -216,3 +210,9 @@ export const EdSidePropInstance: FC<{ meta: IMeta }> = ({ meta }) => {
     </div>
   );
 };
+
+const getCompMeta = (p: PG, imeta: IMeta) => {
+  let meta = null as unknown as IMeta;
+
+  return imeta;
+};

app/web/src/nova/ed/panel/tree/body.tsx

@@ -19,7 +19,6 @@ export const EdTreeBody = () => {
   const local = useLocal({ tree: null as TreeMethods | null });
   const TypedTree = DNDTree<IMeta>;
 
-  active.hover.renderTree = local.render;
   expandTreeHook(p, local);
 
   let tree: NodeModel<IMeta>[] = [];

app/web/src/nova/ed/panel/tree/node/item/name.tsx

@@ -26,6 +26,10 @@ export const EdTreeName = ({
   const is_jsx_prop = !!node.data?.jsx_prop?.is_root;
 
   const isRenaming = p.ui.tree.rename_id === item.id;
+  let name = item.name;
+  if (item.component?.id && p.comp.loaded[item.component.id]) {
+    name = p.comp.loaded[item.component.id].name;
+  }
   return (
     <div className="text-[14px] relative flex flex-col justify-center cursor-pointer flex-1">
       {/* <div className="text-[10px]">{item.id}</div> */}
@@ -37,7 +41,7 @@ export const EdTreeName = ({
           )}
           autoFocus
           spellCheck={false}
-          defaultValue={local.rename}
+          value={local.rename}
           onFocus={(e) => {
             if (node.data?.jsx_prop?.is_root) {
               p.ui.tree.rename_id = "";
@@ -97,13 +101,13 @@ export const EdTreeName = ({
             }
           }}
           onChange={(e) => {
-            local.rename = e.target.value;
+            local.rename = e.target.value.replace(/[\W_]+/g, "_");
             p.render();
           }}
         />
       ) : (
         <div className="flex flex-col">
-          <Name name={node.text} is_jsx_prop={is_jsx_prop} />
+          <Name name={name} is_jsx_prop={is_jsx_prop} />
           {/* <div className={"text-[9px] text-gray-500 -mt-1"}>
             {node.id} - {item.originalId}
           </div> */}

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

@@ -4,21 +4,20 @@ import { IContent } from "../../../../../utils/types/general";
 import { Loading } from "../../../../../utils/ui/loading";
 import { getMetaById } from "../../../logic/active/get-meta";
 import { EDGlobal, IMeta, active } from "../../../logic/ed-global";
+import { text_edit } from "../../main/main-per-item";
 import { EdTreeAction } from "./item/action";
 import { EdTreeCtxMenu } from "./item/ctx-menu";
 import { EdTreeIndent } from "./item/indent";
 import { EdTreeName } from "./item/name";
 import { treeItemKeyMap } from "./key-map";
-import { text_edit } from "../../main/main-per-item";
-import { treeRebuild } from "../../../logic/tree/build";
 
 export const nodeRender: NodeRender<IMeta> = (node, prm) => {
   const p = useGlobal(EDGlobal, "EDITOR");
   const local = useLocal({
     rightClick: null as null | React.MouseEvent<HTMLDivElement, MouseEvent>,
   });
+
   if (!node || !node.data) {
-    console.log("hello", node, prm);
     return <></>;
   }
   const item = node.data?.item;
@@ -122,9 +121,7 @@ export const nodeRender: NodeRender<IMeta> = (node, prm) => {
         }
         active.item_id = item.id;
         p.ui.tree.search = "";
-        treeRebuild(p);
         p.render();
-        p.page.render();
         if ((item as IContent).type === "text") {
           setTimeout(() => {
             if (document.activeElement?.tagName === "INPUT") {

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

@@ -6,6 +6,7 @@ import { simplifyItemChild } from "./simplify";
 
 export const genComp = (p: GenMetaP, arg: GenMetaArg) => {
   const { item } = arg;
+
   if (item.type === "item" && item.component?.id && arg.parent?.item.id) {
     let item_comp = p.comps[item.component.id];
     if (p.on?.visit_component) {
@@ -42,8 +43,10 @@ export const genComp = (p: GenMetaP, arg: GenMetaArg) => {
           ids: instance,
         });
       }
+
       const meta: IMeta = {
         item: simplifyItemChild(item),
+        jsx_prop: arg.jsx_prop,
         parent: {
           id: arg.parent.item.id,
           comp_id: arg.parent?.comp?.component?.id,

app/web/src/nova/vi/meta/comp/init-comp-load.tsx

@@ -26,10 +26,40 @@ export const initLoadComp = async (
                 comp_ids.add(id);
               }
             }
+
+            if (component?.props) {
+              for (const [name, prop] of Object.entries(component.props)) {
+                if (prop.meta?.type === "content-element" && prop.content) {
+                  genMeta(
+                    {
+                      ...p,
+                      on: {
+                        visit_component: ({ component }) => {
+                          if (component) {
+                            const { id } = component;
+                            if (!p.comps[id]) {
+                              if (!_loaded || (_loaded && !_loaded.has(id))) {
+                                comp_ids.add(id);
+                              }
+                            }
+                          }
+                        },
+                        visit(meta, vitem) {
+                          if (opt.visit) opt.visit(meta, vitem, shared);
+                        },
+                      },
+                      set_meta: false,
+                      note: "init-load-comp-prop",
+                    },
+                    { item: prop.content }
+                  );
+                }
+              }
+            }
           }
         },
-        visit(meta, item) {
-          if (opt.visit) opt.visit(meta, item, shared);
+        visit(meta, vitem) {
+          if (opt.visit) opt.visit(meta, vitem, shared);
         },
       },
       set_meta: false,
@@ -52,6 +82,7 @@ export const initLoadComp = async (
 
     for (const id of [...loaded]) {
       const comp = p.comps[id];
+
       if (comp) {
         await initLoadComp(p, comp, opt, loaded);
       }

app/web/src/nova/vi/meta/meta.ts

@@ -5,6 +5,7 @@ import { simplifyItemChild } from "./simplify";
 
 export const genMeta = (p: GenMetaP, arg: GenMetaArg) => {
   const item = arg.item as IItem;
+
   if (item.type === "item" && item.component?.id) {
     if (arg.ignore_first_component !== true) {
       genComp(p, arg);

app/web/src/utils/types/meta.ts

@@ -7,13 +7,12 @@ import {
   FMDimension,
   FMFont,
   FMLayout,
-  FMLinkTag,
   FMPadding,
   FNBackground,
   FNBorder,
   FNDimension,
   FNFont,
-  FNPadding,
+  FNPadding
 } from "./meta-fn";
 
 export type MetaItem = {