fix rendering

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

@@ -1,6 +1,7 @@
 import { NodeModel } from "@minoru/react-dnd-treeview";
 import { IMeta, PG } from "../../ed-global";
 import { MItem } from "../../../../../utils/types/item";
+import { createId } from "@paralleldrive/cuid2";
 
 export const pushTreeNode = (
   p: PG,
@@ -51,6 +52,7 @@ export const pushTreeNode = (
 
   if (tree.find((t) => t.id === meta.item.id)) {
     console.error("Double Tree Item: ", meta.item.id, meta.item.name);
+    meta.mitem?.set("id", createId());
   } else {
     if (!meta.parent?.comp_id) {
       tree.push({

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

@@ -92,8 +92,6 @@ export const EdSidePropInstance: FC<{ meta: IMeta }> = ({ meta }) => {
                   const evn = new Function("arg", `arg["${k}"] = ${v.value}`);
                   evn(arg);
                 } catch (e) {
-                  console.error(e);
-                  console.error(k, v.value);
                 }
               }
             }

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

@@ -85,8 +85,6 @@ export const EdPropInstanceOptions: FC<{
                 const evn = new Function("arg", `arg["${k}"] = ${v.value}`);
                 evn(arg);
               } catch (e) {
-                console.error(e);
-                console.error(k, v.value);
               }
             }
           }

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

@@ -13,6 +13,7 @@ import { expandTreeHook } from "./node/item/indent-hook";
 import { canDrop, nodeOnDrop } from "./node/on-drop";
 import { nodeRender } from "./node/render";
 import { doTreeSearch } from "./search";
+import { ErrorBox } from "../../../vi/utils/error-box";
 
 export const EdTreeBody = () => {
   const p = useGlobal(EDGlobal, "EDITOR");
@@ -68,7 +69,7 @@ export const EdTreeBody = () => {
     );
 
   return (
-    <>
+    <ErrorBox>
       <TypedTree
         tree={tree}
         rootId={"root"}
@@ -99,7 +100,7 @@ export const EdTreeBody = () => {
           <Placeholder node={node} params={params} />
         )}
       />
-    </>
+    </ErrorBox>
   );
 };
 

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

@@ -90,13 +90,7 @@ export const nodeRender: NodeRender<IMeta> = (node, prm) => {
   }
 
   return (
-    <Tooltip
+    <Tooltip placement="right" content={`ID: ${node.data.item.id}`} delay={0}>
-      placement="right"
-      content={bytesToHumanFileSize(
-        JSON.stringify(hydrateItem(p, item)).length
-      )}
-      delay={0}
-    >
       <div
         tabIndex={0}
         className={cx(

app/web/src/nova/vi/render/script/eval-prop.tsx

@@ -152,24 +152,17 @@ export const viEvalProps = (
           let val = fn(...Object.values(arg));
 
           if (typeof val === "function") {
-            if (w.isEditor) {
+            val = (...args: any[]) => {
-              script.props[name].fn = val;
+              const definer = new Function(
-              val = (...args: any[]) => {
+                ...Object.keys(arg),
-                if (script) return script.props?.[name].fn(...args);
+                `// [${meta.item.name}] ${name}: ${meta.item.id} 
-              };
-            } else {
-              val = (...args: any[]) => {
-                const definer = new Function(
-                  ...Object.keys(arg),
-                  `// [${meta.item.name}] ${name}: ${meta.item.id} 
   return ${src}
     `
-                );
+              );
 
-                const fn = definer(...Object.values(arg));
+              const fn = definer(...Object.values(arg));
-                return fn(...args);
+              return fn(...args);
-              };
+            };
-            }
           }
 
           arg[name] = val;

app/web/src/nova/vi/render/script/item-dev.ts

@@ -43,8 +43,17 @@ export type PrasiEdit = {
 export const devItem = (
   metas: Record<string, IMeta>,
   mitem: MItem,
-  page_id: string
+  page_id: string,
+  _added?: Record<string, any>
 ) => {
+  const added = _added || {};
+  const id = mitem.get("id") || "";
+  if (added[id]) {
+    console.error(added);
+    throw new Error("already added " + id);
+    return added[id];
+  }
+
   if (!w.prasiEditDevItem) {
     w.prasiEditDevItem = {};
   }
@@ -66,7 +75,7 @@ export const devItem = (
 
   const item = mitem.toJSON() as IItem;
 
-  return {
+  const result = {
     ...item,
     edit: {
       get props() {
@@ -81,10 +90,18 @@ export const devItem = (
                 ?.get("content");
 
               if (content) {
-                result[k] = {
+                const id = content.get("id") || "";
-                  mode: "jsx",
+                if (added[id]) {
-                  value: devItem(metas, content, page_id),
+                  result[k] = {
-                };
+                    mode: "jsx",
+                    value: added[id],
+                  };
+                } else {
+                  result[k] = {
+                    mode: "jsx",
+                    value: devItem(metas, content, page_id, added),
+                  };
+                }
               } else {
                 result[k] = {
                   mode: "jsx",
@@ -284,18 +301,20 @@ export const devItem = (
         changes.push({ type: "child", childs });
       },
       get childs() {
-        const item = mitem?.toJSON() as IItem;
-
         if (item.component?.id) {
           const child = item.component?.props.child;
-          if (child.content) {
+          if (child && child.content) {
             const m = mitem
               .get("component")
               ?.get("props")
               ?.get("child")
               ?.get("content");
             if (m) {
-              return [devItem(metas, m, page_id)];
+              const id = m.get("id") || "";
+              if (added[id]) {
+                return [added[id]];
+              }
+              return [devItem(metas, m, page_id, added)];
             }
           }
           return [];
@@ -306,7 +325,12 @@ export const devItem = (
             .map((e) => {
               if (e) {
                 const m = metas[e.id];
-                if (m && m.mitem) return devItem(metas, m.mitem, page_id);
+
+                if (added[e.id]) {
+                  return added[e.id];
+                }
+                if (m && m.mitem)
+                  return devItem(metas, m.mitem, page_id, added);
               }
             })
             .filter((e) => e);
@@ -319,10 +343,17 @@ export const devItem = (
           const parent = mitem.parent.toJSON();
           if (Array.isArray(parent)) {
             const parent_id = (mitem.parent?.parent as any).get("id");
-            const parent_meta = metas[parent_id].mitem;
+            const parent_meta = metas[parent_id]?.mitem;
             if (parent_meta) {
+              const item = added[parent_id]
+                ? added[parent_id]
+                : devItem(metas, parent_meta, page_id, added);
+
+              if (added[parent_id]) {
+                throw new Error("wi");
+              }
               return {
-                item: devItem(metas, parent_meta, page_id),
+                item,
                 child_type: "child",
                 child_idx: parent.findIndex((e) => e.id === item.id),
               };
@@ -333,6 +364,10 @@ export const devItem = (
       },
     },
   } as IItem & PrasiEdit;
+
+  added[id] = result;
+
+  return result;
 };
 
 const complexifyProps = (