wip fix compo

app/web/src/nova/ed/logic/ed-route.ts

@@ -94,7 +94,7 @@ export const reloadPage = async (p: PG, page_id: string, note: string) => {
           Buffer.from(compress(diff_local))
         );
         p.ui.syncing = false;
-        p.render();
+        // p.render();
       }
     };
 

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

@@ -18,6 +18,7 @@ export const assignMitem = (arg: {
 }) => {
   const { p, m, root, mitem, meta } = arg;
 
+  console.log(m.item.name, m.item.id);
   if (m.jsx_prop && m.parent?.instance_id) {
     const instance_meta = meta[m.parent?.instance_id];
     if (instance_meta) {
@@ -59,32 +60,25 @@ export const assignMitem = (arg: {
         }
       }
 
-      //     if (m.item.component?.props) {
+      if (m.item.component?.props) {
-      //       for (const [prop_name, v] of Object.entries(
+        for (const [prop_name, v] of Object.entries(m.item.component.props)) {
-      //         m.item.component.props
+          const mprop = m.mitem?.get("component")?.get("props")?.get(prop_name);
-      //       )) {
-      //         const mprop = m.mitem
-      //           ?.get("component")
-      //           ?.get("props")
-      //           ?.get(prop_name);
 
-      //         if (v.content) {
+          if (v.content) {
-      //           if (mprop) {
+            if (mprop) {
-      //             const pmeta = meta[v.content.id];
+              const pmeta = meta[v.content.id];
-      //             if (pmeta) {
+              if (pmeta) {
-      //               pmeta.mitem = mprop.get("content");
+                pmeta.mitem = mprop.get("content");
-      //             }
+              }
-      //           } else {
+            } else {
-      //             const mprops = m.mitem?.get("component")?.get("props");
+              const mprops = m.mitem?.get("component")?.get("props");
-      //             if (mprops) {
+              if (mprops) {
-      //               arg.new_prop_jsx(m, mprops, prop_name, v);
+                arg.new_prop_jsx(m, mprops, prop_name, v);
-      //             }
+              }
-      //           }
+            }
-      //         }
+          }
-      //       }
+        }
-      //     }
+      }
-      //   }
-      // });
     }
   }
 };

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

@@ -49,7 +49,6 @@ export const treeRebuild = async (p: PG, arg?: { note?: string }) => {
               if (!is_layout) {
                 if (m.parent?.instance_id !== m.parent?.id || m.jsx_prop) {
                   pushTreeNode(p, m, meta, p.page.tree);
-                } else {
                 }
 
                 assignMitem({
@@ -59,14 +58,13 @@ export const treeRebuild = async (p: PG, arg?: { note?: string }) => {
                   mitem,
                   meta,
                   new_prop_jsx(meta, mprops, prop_name, prop_val) {
-                    transact.list.push(() => {
+                    console.log(meta, mprops, prop_name, prop_val);
-                      const map = new Y.Map();
+                    // transact.list.push(() => {
-
+                    //   const map = new Y.Map();
-                      if (prop_val.content) prop_val.content.id = createId();
+                    //   if (prop_val.content) prop_val.content.id = createId();
-
+                    //   syncronize(map, prop_val);
-                      syncronize(map, prop_val);
+                    //   mprops.set(prop_name, map as any);
-                      mprops.set(prop_name, map as any);
+                    // });
-                    });
                   },
                 });
               }

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

@@ -1,5 +1,5 @@
 import { NodeModel } from "@minoru/react-dnd-treeview";
-import { IMeta, PG, active } from "../../ed-global";
+import { IMeta, PG } from "../../ed-global";
 
 export const pushTreeNode = (
   p: PG,
@@ -43,7 +43,7 @@ export const pushTreeNode = (
         tree.push({
           id: meta.item.id,
           parent: meta.parent?.instance_id || "root",
-          text: meta.item.name,
+          text: meta.jsx_prop.name,
           data: meta,
         });
       } else {

app/web/src/nova/ed/panel/popup/script/monaco.tsx

@@ -109,7 +109,9 @@ export const EdScriptMonaco: FC<{}> = () => {
               const model = editor.getModel();
               if (!model) {
                 const nmodel = monaco.editor.createModel(
-                  val,
+                  imports && imports.length > 0
+                    ? `${imports}\n/** IMPORT MODULE **/\n${val}`
+                    : val,
                   "typescript",
                   monaco.Uri.parse("file:///active.tsx")
                 );

app/web/src/nova/ed/panel/popup/script/scope/scope.tsx

@@ -93,7 +93,6 @@ const extract_import_map = (
           added.add(m.item.id);
 
           const ex = extractExport(p, m);
-
           for (const [k, v] of Object.entries(ex)) {
             let src = "";
             if (v.type === "local") {
@@ -105,6 +104,7 @@ export const ${k}: typeof _local & { render: ()=>void } = _local;
               src = `export const ${k} = ${v.val}`;
             }
             if (src) {
+
               addScope(
                 p,
                 monaco,
@@ -180,7 +180,6 @@ const map_childs = (
             );
 
             jprop = comp_map[meta.item.component.id];
-            //todo: comp prop src: import from page scope
             for (const path of jprop.paths) {
               for (const m of path) {
                 if (!jprop.exports[m.item.id]) {

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

@@ -23,6 +23,10 @@ export const EdPropCompTreeItem: FC<{
   if (node.id === "root") {
     return <></>;
   }
+
+  let type = "TXT";
+  if (node.data?.prop.meta?.type === "option") type = "OPT";
+  else if (node.data?.prop.meta?.type === "content-element") type = "JSX";
   return (
     <div className="flex items-stretch border-b text-[14px] min-h-[27px]">
       <div
@@ -74,7 +78,12 @@ export const EdPropCompTreeItem: FC<{
           }
           className="flex-1 pl-1 hover:bg-blue-100 cursor-pointer items-center flex"
         >
-          {node.text}
+          <div className="flex items-center justify-between flex-1">
+            <div>{node.text}</div>
+            <div className="text-[9px] px-1 border border-slate-400 ml-1 text-slate-500">
+              {type}
+            </div>
+          </div>
         </Popover>
       )}
       <div

app/web/src/nova/ed/panel/side/side-style.tsx

@@ -18,7 +18,7 @@ export const EdSideStyle: FC<{ meta: IMeta }> = ({ meta }) => {
     <div className="flex flex-col text-[12px]">
       <div className="flex border-b p-1 h-[28px] items-center bg-slate-50 justify-between select-none">
         <div className="flex-1 overflow-hidden mr-2 text-ellipsis whitespace-nowrap">
-          {item.name}
+          {meta.jsx_prop?.name || item.name}
         </div>
         {item.component?.id === active.comp_id && (
           <div

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

@@ -86,6 +86,15 @@ export const EdTreeBody = () => {
           if (!args.dragSource?.data?.item) return false;
           return canDrop(p, args);
         }}
+        canDrag={(node) => {
+          if (node) {
+            if (node.data?.jsx_prop?.is_root) {
+              return false;
+            }
+          }
+
+          return true;
+        }}
         dragPreviewRender={DragPreview}
         placeholderRender={(node, params) => (
           <Placeholder node={node} params={params} />

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

@@ -127,7 +127,7 @@ export const EdTreeAction = ({
           )}
           {comp.id === active.comp_id && (
             <>
-              <Tooltip content="Edit Component">
+              <Tooltip content="Close Component">
                 <div
                   className="flex items-center border border-slate-500 bg-white rounded-sm text-[10px] px-[2px] cursor-pointer hover:bg-purple-100 hover:border-purple-600"
                   onClick={(e) => {

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

@@ -104,9 +104,9 @@ export const EdTreeName = ({
       ) : (
         <div className="flex flex-col">
           <Name name={node.text} is_jsx_prop={is_jsx_prop} />
-          <div className={"text-[9px] text-gray-500 -mt-1"}>
+          {/* <div className={"text-[9px] text-gray-500 -mt-1"}> 
             {node.id} - {item.originalId}
-          </div>
+          </div> */}
         </div>
       )}
     </div>

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

@@ -11,7 +11,7 @@ export const genComp = (p: GenMetaP, arg: GenMetaArg) => {
     if (p.on?.visit_component) {
       p.on.visit_component(item);
     }
-
+ 
     if (!item_comp) {
       return;
     }
@@ -48,34 +48,16 @@ export const genComp = (p: GenMetaP, arg: GenMetaArg) => {
         },
       };
 
+      if (p.on?.visit) {
+        p.on.visit(meta, item);
+      }
+
       if (item.id) {
         if (p.set_meta !== false) {
           p.meta[item.id] = meta;
         }
       }
 
-      if (p.on?.visit) {
-        p.on.visit(meta, item);
-      }
-
-      for (const child of Object.values(item.childs)) {
-        if (child.name.startsWith("jsx:")) continue;
-
-        genMeta(
-          { ...p, mode: "comp" },
-          {
-            item: child,
-            is_root: false,
-            parent: {
-              item,
-              instance_id: item.id,
-              root_instances: instances,
-              comp: item_comp,
-            },
-          }
-        );
-      } 
-
       walkProp({
         item,
         item_comp: item_comp,
@@ -85,7 +67,9 @@ export const genComp = (p: GenMetaP, arg: GenMetaArg) => {
 
           if (prop.meta?.type === "content-element" && comp_id) {
             if (prop.content) {
-              genMeta(
+              prop.content.name = name;
+ 
+              genMeta( 
                 { ...p },
                 {
                   item: prop.content,
@@ -107,6 +91,25 @@ export const genComp = (p: GenMetaP, arg: GenMetaArg) => {
           }
         },
       });
+
+      for (const child of Object.values(item.childs)) {
+        if (child.name.startsWith("jsx:")) continue;
+
+        genMeta(
+          { ...p, mode: "comp" },
+          {
+            item: child,
+            is_root: false,
+            parent: {
+              item,
+              instance_id: item.id,
+              root_instances: instances,
+              comp: item_comp,
+            },
+          }
+        );
+      }
+
     }
   }
 };

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

@@ -35,7 +35,7 @@ export const genMeta = (p: GenMetaP, arg: GenMetaArg) => {
       p.meta[meta.item.id] = meta;
     }
   }
-
+ 
   if (item.childs) {
     for (const [_, v] of Object.entries(item.childs)) {
       const carg: GenMetaArg = {

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

@@ -23,8 +23,6 @@ export const viEvalScript = (
 
   if (vi.visit) vi.visit(meta, parts);
 
-  const mhash = hash_sum(flatten(passprop));
-
   if (!meta.script) {
     meta.script = {
       passprop,
@@ -76,5 +74,4 @@ ${meta.item.adv?.jsBuilt || ""}
   fn(...Object.values(arg));
 
   updatePropScope(meta, passprop);
-  return mhash;
 };