wip fix

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

@@ -1,17 +1,18 @@
 import { NodeModel } from "@minoru/react-dnd-treeview";
 import { page } from "dbgen";
-import { FC, ReactElement } from "react";
 import { deepClone } from "web-utils";
 import { SAction } from "../../../../../srv/ws/sync/actions";
 import { parseJs } from "../../../../../srv/ws/sync/editor/parser/parse-js";
 import { clientStartSync } from "../../../utils/sync/ws-client";
-import { IItem, MItem } from "../../../utils/types/item";
+import { IItem } from "../../../utils/types/item";
 import { DComp, DPage } from "../../../utils/types/root";
-import { ISection } from "../../../utils/types/section";
+import {
-import { IText, MText } from "../../../utils/types/text";
+  GenMetaP,
-import { PageItem } from "../panel/popup/page/page-tree";
+  IMeta as LogicMeta,
-import { FMCompDef } from "../../../utils/types/meta-fn";
+  ISimpleMeta,
-import { IMeta, ISimpleMeta } from "../../view/logic/meta/types";
+} from "../../view/logic/meta/types";
+
+export type IMeta = LogicMeta;
 
 export const EmptySite = {
   id: "",
@@ -20,7 +21,7 @@ export const EmptySite = {
   config: { api_url: "" },
   js: "",
   js_compiled: "",
-  layout: { snapshot: null as null | Uint8Array, id: "" },
+  layout: { id: "", meta: {} as Record<string, IMeta>, entry: [] as string[] },
 };
 
 export type ESite = typeof EmptySite;
@@ -113,38 +114,6 @@ export const active = {
   },
 };
 
-export type EdMeta = {
-  item: IItem | IText | ISection;
-  mitem?: MItem | MText;
-  parent_item: {
-    id: string;
-    mitem?: MItem;
-  };
-  parent_mcomp?: {
-    minstance: MItem;
-    meta: EdMeta;
-    mcomp: MItem;
-  };
-  el?: ReactElement;
-  is_layout?: boolean;
-  jsx_prop_name?: string;
-  jsx_prop_root?: boolean;
-  /** script related meta **/
-  jsx_scope_id?: string;
-  propval?: Record<string, any>;
-  propvis?: Record<string, boolean>;
-  indexed_scope: Record<string, any>;
-  memoize?: Record<
-    string,
-    {
-      Local: FC<any>;
-      PassProp: FC<any>;
-    }
-  >;
-  scope?: Record<string, any>;
-  render?: () => void;
-};
-
 export const EDGlobal = {
   mode: "" as "desktop" | "mobile",
   user: { id: "", username: "", client_id: "" },
@@ -179,23 +148,23 @@ export const EDGlobal = {
     >,
     scope: {} as IScope,
     building: false,
-    meta: {} as Record<string, EdMeta>,
+    meta: {} as Record<string, IMeta>,
     entry: [] as string[],
-    tree: [] as NodeModel<EdMeta>[],
+    tree: [] as NodeModel<IMeta>[],
     render: () => {},
   },
   comp: {
     doc: null as null | DComp,
     item: null as null | IItem,
-    tree: [] as NodeModel<EdMeta>[],
+    tree: [] as NodeModel<IMeta>[],
+    loaded: {} as GenMetaP["comps"],
     list: {} as Record<
       string,
       {
         comp: EComp;
         doc: DComp;
-        scope: IScope;
+        tree: NodeModel<IMeta>[];
-        tree: NodeModel<EdMeta>[];
+        meta: Record<string, IMeta>;
-        meta: Record<string, EdMeta>;
         on_update: (bin: Uint8Array, origin: any) => Promise<void>;
       }
     >,

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

@@ -47,15 +47,16 @@ export const reloadPage = async (p: PG, page_id: string, note: string) => {
     return;
   }
 
-  p.page.scope = remotePage.scope || {};
+  if (remotePage.comps) {
-  if (remotePage.scope_comps) {
+    for (const [id_comp, c] of Object.entries(remotePage.comps)) {
-    for (const [id_comp, c] of Object.entries(remotePage.scope_comps)) {
       if (c && c.snapshot) {
-        await loadCompSnapshot(p, id_comp, c.snapshot, c.scope);
+        await loadCompSnapshot(p, id_comp, c.snapshot);
       }
     }
   }
 
+  p.page.entry = remotePage.entry;
+
   p.page.cur = remotePage;
   if (remotePage.snapshot) {
     const doc = new Y.Doc();

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

@@ -1,7 +1,74 @@
+import { deepClone } from "web-utils";
+import { IItem, MItem } from "../../../../utils/types/item";
+import { genMeta } from "../../../view/logic/meta/meta";
 import { PG, active } from "../ed-global";
 
 export const treeRebuild = async (p: PG, arg?: { note?: string }) => {
-  console.log(p.comp.list);
+  const is_layout =
+    p.site.layout &&
+    p.site.layout.id === p.page.cur.id &&
+    arg?.note === "load-layout page-init";
+
+  for (const [k, v] of Object.entries(p.comp.list)) {
+    if (!p.comp.loaded[k]) {
+      const mcomp = v.doc.getMap("map").get("root");
+      const icomp = mcomp?.toJSON() as IItem | undefined;
+      if (icomp) {
+        p.comp.loaded[k] = {
+          comp: icomp,
+          mcomp,
+        };
+      }
+    }
+  }
+
+  const mroot = p.page.doc?.getMap("map").get("root");
+  const mitems: MItem[] = [];
+  mroot?.get("childs")?.forEach((m) => mitems.push(m));
+
+  const meta = {};
+  for (const mitem of mitems) {
+    const item = mitem.toJSON() as IItem;
+    if (item) {
+      genMeta(
+        {
+          comps: p.comp.loaded,
+          meta,
+          on: !is_layout
+            ? {
+                visit(meta) {
+                },
+              }
+            : undefined,
+        },
+        { item, mitem }
+      );
+    }
+  }
+
+  if (is_layout) {
+    p.site.layout.meta = meta;
+  } else {
+    let root_id = "root";
+    if (p.site.layout && p.site.layout.meta) {
+      for (const [_, v] of Object.entries(p.site.layout.meta)) {
+        if (v.item.component?.id) {
+          if (v.item.name === "content") {
+            root_id = v.item.id;
+            break;
+          }
+        }
+      }
+
+      p.page.root_id = root_id;
+
+      if (p.site.layout && p.site.layout.id === p.page.cur.id) {
+        p.page.meta = meta;
+      } else {
+        p.page.meta = { ...p.site.layout.meta, ...meta };
+      }
+    }
+  }
 };
 
 export const getMRoot = (p: PG) => {

app/web/src/nova/ed/logic/tree/load-walk.tsx

@@ -3,7 +3,7 @@
 // import { IContent } from "../../../../utils/types/general";
 // import { IItem } from "../../../../utils/types/item";
 // import { FNComponent } from "../../../../utils/types/meta-fn";
-// import { EdMeta, PG } from "../ed-global";
+// import { IMeta, PG } from "../ed-global";
 
 // export const walkLoad = async (
 //   p: { map: PG["comp"]["map"] },
@@ -48,7 +48,7 @@
 
 // export const walkMap = (
 //   p: {
-//     meta: Record<string, EdMeta>;
+//     meta: Record<string, IMeta>;
 //     comps: Record<string, { id: string; item: IItem }>;
 //   },
 //   arg: {
@@ -56,10 +56,10 @@
 //     item: IContent;
 //     parent_item: { id: string };
 //     portal: {
-//       in: Record<string, EdMeta>;
+//       in: Record<string, IMeta>;
-//       out: Record<string, EdMeta>;
+//       out: Record<string, IMeta>;
 //     };
-//     each?: (meta: EdMeta) => void;
+//     each?: (meta: IMeta) => void;
 //     parent_comp?: { id: string; comp_id: string };
 //   }
 // ) => {
@@ -112,7 +112,7 @@
 //       item = deepClone(mcomp);
 //       item.id = original_id;
 
-//       const meta: EdMeta = {
+//       const meta: IMeta = {
 //         item,
 //         parent_item,
 //         idexed_scope: {},
@@ -156,7 +156,7 @@
 //     return;
 //   }
 
-//   const meta: EdMeta = {
+//   const meta: IMeta = {
 //     item,
 //     parent_item,
 //     idexed_scope: {},

app/web/src/nova/ed/logic/tree/sync-walk-comp.tsx

@@ -2,7 +2,7 @@ import { NodeModel } from "@minoru/react-dnd-treeview";
 import { compress, decompress } from "wasm-gzip";
 import { MItem } from "../../../../utils/types/item";
 import { DComp } from "../../../../utils/types/root";
-import { EdMeta, IScope, PG, active } from "../ed-global";
+import { IMeta, IScope, PG, active } from "../ed-global";
 import { treeRebuild } from "./build";
 import {
   loadComponent,
@@ -15,8 +15,7 @@ import { waitUntil } from "web-utils";
 export const loadCompSnapshot = async (
   p: PG,
   id_comp: string,
-  snapshot: Uint8Array,
+  snapshot: Uint8Array
-  scope: IScope
 ) => {
   const doc = new Y.Doc() as DComp;
   Y.applyUpdate(doc as any, decompress(snapshot));
@@ -29,7 +28,6 @@ export const loadCompSnapshot = async (
     p.comp.list[id_comp] = {
       comp: { id: id_comp, snapshot },
       doc,
-      scope: scope,
     } as any;
 
     const { tree, meta } = await walkCompTree(p, mitem, id_comp);
@@ -80,11 +78,11 @@ export const loadCompSnapshot = async (
 };
 
 const walkCompTree = async (p: PG, mitem: MItem, comp_id: string) => {
-  const tree: NodeModel<EdMeta>[] = [];
+  const tree: NodeModel<IMeta>[] = [];
   const meta = {};
   const portal = {
-    in: {} as Record<string, EdMeta>,
+    in: {} as Record<string, IMeta>,
-    out: {} as Record<string, EdMeta>,
+    out: {} as Record<string, IMeta>,
   };
   syncWalkLoad(p, mitem, (id) => loadComponent(p, id));
   mitem.doc?.transact(() => {

app/web/src/nova/ed/logic/tree/sync-walk.tsx

@@ -5,7 +5,7 @@ import { MContent } from "../../../../utils/types/general";
 import { IItem, MItem } from "../../../../utils/types/item";
 import { FNCompDef, FNComponent } from "../../../../utils/types/meta-fn";
 import { MSection } from "../../../../utils/types/section";
-import { EdMeta, IScope, PG } from "../ed-global";
+import { IMeta, IScope, PG } from "../ed-global";
 import { loadCompSnapshot } from "./sync-walk-comp";
 import {
   ensureMItemProps,
@@ -60,9 +60,9 @@ export const syncWalkMap = (
   p: {
     note?: string;
     item_loading: PG["ui"]["tree"]["item_loading"];
-    tree?: NodeModel<EdMeta>[];
+    tree?: NodeModel<IMeta>[];
     comps: PG["comp"]["list"];
-    meta: Record<string, EdMeta>;
+    meta: Record<string, IMeta>;
     component_not_found?: (comp_id: string) => void;
     scope?: null | IScope;
   },
@@ -70,16 +70,16 @@ export const syncWalkMap = (
     is_layout: boolean;
     mitem: MItem | MSection;
     portal: {
-      in: Record<string, EdMeta>;
+      in: Record<string, IMeta>;
-      out: Record<string, EdMeta>;
+      out: Record<string, IMeta>;
     };
-    parent_item: EdMeta["parent_item"];
+    parent_item: IMeta["parent_item"];
-    parent_mcomp?: EdMeta["parent_mcomp"];
+    parent_mcomp?: IMeta["parent_mcomp"];
     jsx_prop_name?: string;
     jsx_prop_root?: boolean;
     skip_add_tree?: boolean;
     tree_root_id: string;
-    each?: (meta: EdMeta) => void;
+    each?: (meta: IMeta) => void;
   }
 ) => {
   const { mitem, parent_item } = arg;
@@ -180,7 +180,7 @@ export const syncWalkMap = (
         mapItem(mcomp, item, ref_ids);
         item.id = old_id;
 
-        const meta: EdMeta = {
+        const meta: IMeta = {
           item,
           mitem: mitem as MItem,
           parent_item,
@@ -277,7 +277,7 @@ export const syncWalkMap = (
     return;
   }
 
-  const meta: EdMeta = {
+  const meta: IMeta = {
     is_layout: arg.is_layout,
     item,
     jsx_prop_name: arg.jsx_prop_name,

app/web/src/nova/ed/panel/main/main.tsx

@@ -2,195 +2,185 @@ import { ReactNode, useEffect } from "react";
 import { useGlobal, useLocal } from "web-utils";
 import { Loading } from "../../../../utils/ui/loading";
 import { View } from "../../../view/view";
-import { EDGlobal, EdMeta, active } from "../../logic/ed-global";
+import { EDGlobal, active } from "../../logic/ed-global";
 import { getMetaById } from "../../logic/tree/build";
 import { loadComponent } from "../../logic/tree/sync-walk";
 import { code } from "../popup/code/code";
+import { IMeta } from "../../../view/logic/meta/types";
 
 export const EdMain = () => {
-  const p = useGlobal(EDGlobal, "EDITOR");
+  return <div className="flex-1"></div>;
-  const local = useLocal({
+  // const p = useGlobal(EDGlobal, "EDITOR");
-    el: null as ReactNode,
+  // const local = useLocal({
-  });
+  //   el: null as ReactNode,
-  active.hover.renderMain = local.render;
+  // });
+  // active.hover.renderMain = local.render;
 
-  if (code.mode && !p.page.building) {
+  // if (code.mode && !p.page.building) {
-    local.el = (
+  //   local.el = (
-      <View
+  //     <View
-        mode={p.mode}
+  //       mode={p.mode}
-        code_mode={code.mode}
+  //       code_mode={code.mode}
-        layout={{ show: false }}
+  //       layout={{ show: false }}
-        isEditor={true}
+  //       isEditor={true}
-        api_url={p.site.config.api_url}
+  //       api_url={p.site.config.api_url}
-        component={{
+  //       component={{
-          async load(id_comp) {
+  //         async load(id_comp) {
-            await loadComponent(p, id_comp);
+  //           await loadComponent(p, id_comp);
-          },
+  //         },
-        }}
+  //       }}
-        load={{
+  //       load={{
-          mode: "tree_meta",
+  //         mode: "tree_meta",
-          meta: p.page.meta,
+  //         meta: p.page.meta,
-          entry: p.page.entry,
+  //         entry: p.page.entry,
-          scope: p.page.scope,
+  //         scope: p.page.scope,
-        }}
+  //       }}
-        site_id={p.site.id}
+  //       site_id={p.site.id}
-        page_id={p.page.cur.id}
+  //       page_id={p.page.cur.id}
-        bind={({ render }) => {
+  //       bind={({ render }) => {
-          p.page.render = render;
+  //         p.page.render = render;
-        }}
+  //       }}
-        hidden={(meta) => {
+  //       hidden={(meta) => {
-          if (meta.item.hidden) return true;
+  //         if (meta.item.hidden) return true;
-          return false;
+  //         return false;
-        }}
+  //       }}
-        hover={{
+  //       hover={{
-          get(meta) {
+  //         get(meta) {
-            return false;
+  //           return false;
-          },
+  //         },
-          set(meta) {
+  //         set(meta) {
-            const outer = getOuterItem(meta);
+  //           const outer = getOuterItem(meta);
-            if (outer) {
+  //           if (outer) {
-              if (active.hover.id !== outer.id) {
+  //             if (active.hover.id !== outer.id) {
-                active.hover.id = outer.id;
+  //               active.hover.id = outer.id;
-                active.hover.renderTree();
+  //               active.hover.renderTree();
-                active.hover.renderMain();
+  //               active.hover.renderMain();
-              }
+  //             }
-            }
+  //           }
-          },
+  //         },
-        }}
+  //       }}
-        active={{
+  //       active={{
-          get(meta) {
+  //         get(meta) {
-            return active.item_id === meta.item.id;
+  //           return active.item_id === meta.item.id;
-          },
+  //         },
-          set(meta) {
+  //         set(meta) {
-            const outer = getOuterItem(meta);
+  //           const outer = getOuterItem(meta);
-            if (outer) {
+  //           if (outer) {
-              active.item_id = outer.id;
+  //             active.item_id = outer.id;
-            }
+  //           }
 
-            p.render();
+  //           p.render();
-            p.page.render();
+  //           p.page.render();
-            focus();
+  //           focus();
-          },
+  //         },
-          text({ meta }) {
+  //         text({ meta }) {
-            const { item } = meta;
+  //           const { item } = meta;
 
-            useEffect(() => {
+  //           useEffect(() => {
-              return () => {
+  //             return () => {
-                active.text.id = "";
+  //               active.text.id = "";
-                p.render();
+  //               p.render();
-              };
+  //             };
-            }, []);
+  //           }, []);
 
-            const updateWithTimeout = (timeout: number) => {
+  //           const updateWithTimeout = (timeout: number) => {
-              return new Promise<void>((resolve) => {
+  //             return new Promise<void>((resolve) => {
-                const saving = {
+  //               const saving = {
-                  id: active.text.id,
+  //                 id: active.text.id,
-                  content: active.text.content,
+  //                 content: active.text.content,
-                };
+  //               };
 
-                clearTimeout(active.text.timeout);
+  //               clearTimeout(active.text.timeout);
-                active.text.timeout = setTimeout(() => {
+  //               active.text.timeout = setTimeout(() => {
-                  const meta = getMetaById(p, saving.id);
+  //                 const meta = getMetaById(p, saving.id);
-                  if (meta && meta.mitem) {
+  //                 if (meta && meta.mitem) {
-                    meta.mitem.set("html", saving.content);
+  //                   meta.mitem.set("html", saving.content);
-                  }
+  //                 }
-                  resolve();
+  //                 resolve();
-                }, timeout);
+  //               }, timeout);
-              });
+  //             });
-            };
+  //           };
 
-            if (active.text.id !== item.id) {
+  //           if (active.text.id !== item.id) {
-              clearTimeout(active.text.timeout);
+  //             clearTimeout(active.text.timeout);
-              active.text.id = item.id;
+  //             active.text.id = item.id;
-              active.text.content = item.html || "";
+  //             active.text.content = item.html || "";
-              active.text.el = (
+  //             active.text.el = (
-                <div
+  //               <div
-                  className={cx(
+  //                 className={cx(
-                    `v-text-${item.id} v-text-${item.originalId} outline-none`
+  //                   `v-text-${item.id} v-text-${item.originalId} outline-none`
-                  )}
+  //                 )}
-                  ref={(ref) => {
+  //                 ref={(ref) => {
-                    if (ref !== document.activeElement && ref) {
+  //                   if (ref !== document.activeElement && ref) {
-                      const renaming = document.querySelector(".rename-item");
+  //                     const renaming = document.querySelector(".rename-item");
-                      const modals = document.querySelectorAll(
+  //                     const modals = document.querySelectorAll(
-                        "[data-floating-ui-portal]"
+  //                       "[data-floating-ui-portal]"
-                      );
+  //                     );
-                      if (modals.length === 0 && !renaming) {
+  //                     if (modals.length === 0 && !renaming) {
-                        ref.focus();
+  //                       ref.focus();
-                        setEndOfContenteditable(ref);
+  //                       setEndOfContenteditable(ref);
-                      }
+  //                     }
-                    }
+  //                   }
-                  }}
+  //                 }}
-                  onPointerDownCapture={(e) => {
+  //                 onPointerDownCapture={(e) => {
-                    e.stopPropagation();
+  //                   e.stopPropagation();
-                  }}
+  //                 }}
-                  contentEditable
+  //                 contentEditable
-                  spellCheck={false}
+  //                 spellCheck={false}
-                  onInput={(e) => {
+  //                 onInput={(e) => {
-                    const val = e.currentTarget.innerHTML;
+  //                   const val = e.currentTarget.innerHTML;
-                    item.html = val;
+  //                   item.html = val;
-                    active.text.id = item.id;
+  //                   active.text.id = item.id;
-                    active.text.content = val;
+  //                   active.text.content = val;
-                    updateWithTimeout(100);
+  //                   updateWithTimeout(100);
-                  }}
+  //                 }}
-                  dangerouslySetInnerHTML={{ __html: item.html || "" }}
+  //                 dangerouslySetInnerHTML={{ __html: item.html || "" }}
-                ></div>
+  //               ></div>
-              );
+  //             );
-            }
+  //           }
 
-            return active.text.el;
+  //           return active.text.el;
-          },
+  //         },
-        }}
+  //       }}
-      />
+  //     />
-    );
+  //   );
-  }
+  // }
 
-  return (
+  // return (
-    <div
+  //   <div
-      className={cx(
+  //     className={cx(
-        "flex flex-1 relative overflow-auto ",
+  //       "flex flex-1 relative overflow-auto ",
-        css`
+  //       css`
-          contain: content;
+  //         contain: content;
-        `,
+  //       `,
-        active.hover.id &&
+  //       active.hover.id &&
-          active.hover.id !== active.item_id &&
+  //         active.hover.id !== active.item_id &&
-          css`
+  //         css`
-            .s-${active.hover.id} {
+  //           .s-${active.hover.id} {
-              position: relative;
+  //             position: relative;
 
-              &::after {
+  //             &::after {
-                content: " ";
+  //               content: " ";
-                pointer-events: none;
+  //               pointer-events: none;
-                position: absolute;
+  //               position: absolute;
-                z-index: 100;
+  //               z-index: 100;
-                left: 0;
+  //               left: 0;
-                right: 0;
+  //               right: 0;
-                bottom: 0;
+  //               bottom: 0;
-                top: 0;
+  //               top: 0;
-                border: 2px solid #b2d2fd;
+  //               border: 2px solid #b2d2fd;
-              }
+  //             }
-            }
+  //           }
-          `
+  //         `
-      )}
+  //     )}
-    >
+  //   >
-      {/* <div className="absolute bg-white px-1 z-10">{active.hover.id}</div> */}
+  //     {/* <div className="absolute bg-white px-1 z-10">{active.hover.id}</div> */}
-      <div className="absolute inset-0 flex flex-col">
+  //     <div className="absolute inset-0 flex flex-col">
-        {!!p.page.building && <Loading backdrop={false} />}
+  //       {!!p.page.building && <Loading backdrop={false} />}
-        {!p.page.building && code.mode !== "" && local.el}
+  //       {!p.page.building && code.mode !== "" && local.el}
-      </div>
+  //     </div>
-    </div>
+  //   </div>
-  );
+  // );
-};
-
-const getOuterItem = (meta: EdMeta) => {
-  let cur: undefined | EdMeta = meta;
-
-  if (cur.jsx_prop_name) return meta.item;
-
-  while (cur.parent_mcomp) {
-    cur = cur.parent_mcomp.meta;
-  }
-
-  return cur.item;
 };
 
 function setEndOfContenteditable(div: any) {

app/web/src/nova/ed/panel/popup/comp/comp-preview-tree.tsx

@@ -6,17 +6,17 @@ import {
 } from "@minoru/react-dnd-treeview";
 import { FC, useEffect } from "react";
 import { HTML5Backend } from "react-dnd-html5-backend";
-import { EDGlobal, EdMeta } from "../../../logic/ed-global";
+import { EDGlobal, IMeta } from "../../../logic/ed-global";
 import { compPicker } from "./comp-reload";
 import { nodeRender } from "../../tree/node/render";
 import { useGlobal, useLocal } from "web-utils";
 
-export const EdCompPreviewTree: FC<{ tree: NodeModel<EdMeta>[] }> = ({
+export const EdCompPreviewTree: FC<{ tree: NodeModel<IMeta>[] }> = ({
   tree,
 }) => {
   const p = useGlobal(EDGlobal, "EDITOR");
   const local = useLocal({ ref: null as any });
-  const TypedTree = DNDTree<EdMeta>;
+  const TypedTree = DNDTree<IMeta>;
 
   useEffect(() => {
     if (local.ref) local.ref.openAll();

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

@@ -7,7 +7,7 @@ import { useGlobal, useLocal } from "web-utils";
 import { jscript } from "../../../../../utils/script/jscript";
 import { jsMount } from "../../../../../utils/script/mount";
 import { monacoTypings } from "../../../../../utils/script/typings";
-import { EDGlobal, EdMeta, active } from "../../../logic/ed-global";
+import { EDGlobal, IMeta, active } from "../../../logic/ed-global";
 import { getMetaById } from "../../../logic/tree/build";
 import { declareScope } from "./scope";
 
@@ -32,7 +32,7 @@ export const ScriptMonaco = () => {
   const Editor = jscript.editor;
   if (!Editor) return null;
 
-  let meta: EdMeta | null = p.page.meta[active.item_id];
+  let meta: IMeta | null = p.page.meta[active.item_id];
   if (active.comp_id) {
     if (p.comp.list[active.comp_id]) {
       meta = p.comp.list[active.comp_id].meta[active.item_id];

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

@@ -2,7 +2,7 @@ import type { OnMount } from "@monaco-editor/react";
 import { deepClone } from "web-utils";
 import {
   EPage,
-  EdMeta,
+  IMeta,
   ISingleScope,
   PG,
   active,
@@ -13,7 +13,7 @@ export type MonacoEditor = Parameters<OnMount>[0];
 
 export const declareScope = async (
   p: PG,
-  meta: EdMeta,
+  meta: IMeta,
   editor: MonacoEditor,
   monaco: Monaco
 ) => {

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

@@ -3,13 +3,13 @@ import { useGlobal, useLocal } from "web-utils";
 import { IItem } from "../../../../utils/types/item";
 import { FMCompDef } from "../../../../utils/types/meta-fn";
 import { Menu, MenuItem } from "../../../../utils/ui/context-menu";
-import { EDGlobal, EdMeta, active } from "../../logic/ed-global";
+import { EDGlobal, IMeta, active } from "../../logic/ed-global";
 import { EdPropInstanceCode } from "./prop-instance/prop-code";
 import { EdPropInstanceOptions } from "./prop-instance/prop-option";
 import { reset } from "./prop-instance/prop-reset";
 import { EdPropInstanceText } from "./prop-instance/prop-text";
 
-export const EdSidePropInstance: FC<{ meta: EdMeta }> = ({ meta }) => {
+export const EdSidePropInstance: FC<{ meta: IMeta }> = ({ meta }) => {
   const p = useGlobal(EDGlobal, "EDITOR");
   const local = useLocal({
     rightClickEvent: null as any,

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

@@ -10,7 +10,7 @@ import { HTML5Backend } from "react-dnd-html5-backend";
 import { useGlobal, useLocal } from "web-utils";
 import { IItem } from "../../../../utils/types/item";
 import { FMCompDef } from "../../../../utils/types/meta-fn";
-import { EDGlobal, EdMeta, active } from "../../logic/ed-global";
+import { EDGlobal, IMeta, active } from "../../logic/ed-global";
 import { EdPropCompTreeItem, PropItem } from "./prop-master/tree-item";
 import { propPopover } from "./prop-master/prop-form";
 
@@ -18,7 +18,7 @@ const propRef = {
   el: null as any,
 };
 
-export const EdSidePropComp: FC<{ meta: EdMeta }> = ({ meta }) => {
+export const EdSidePropComp: FC<{ meta: IMeta }> = ({ meta }) => {
   const p = useGlobal(EDGlobal, "EDITOR");
   const local = useLocal({});
   const item = meta?.item as IItem;

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

@@ -1,10 +1,10 @@
 import { FC } from "react";
-import { EDGlobal, EdMeta, active } from "../../logic/ed-global";
+import { EDGlobal, IMeta, active } from "../../logic/ed-global";
 import { useGlobal } from "web-utils";
 import { IItem } from "../../../../utils/types/item";
 import { EdSidePropComp } from "./prop-master";
 
-export const EdSideStyle: FC<{ meta: EdMeta }> = ({ meta }) => {
+export const EdSideStyle: FC<{ meta: IMeta }> = ({ meta }) => {
   const p = useGlobal(EDGlobal, "EDITOR");
 
   const item = meta?.item as IItem;

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

@@ -7,7 +7,7 @@ import {
 } from "@minoru/react-dnd-treeview";
 import { FC } from "react";
 import { useGlobal, useLocal } from "web-utils";
-import { EDGlobal, EdMeta, active } from "../../logic/ed-global";
+import { EDGlobal, IMeta, active } from "../../logic/ed-global";
 import { DEPTH_WIDTH } from "./node/item/indent";
 import { expandTreeHook } from "./node/item/indent-hook";
 import { canDrop, nodeOnDrop } from "./node/on-drop";
@@ -17,7 +17,7 @@ import { doTreeSearch } from "./search";
 export const EdTreeBody = () => {
   const p = useGlobal(EDGlobal, "EDITOR");
   const local = useLocal({ tree: null as TreeMethods | null, comp_id: "" });
-  const TypedTree = DNDTree<EdMeta>;
+  const TypedTree = DNDTree<IMeta>;
 
   active.hover.renderTree = local.render;
 
@@ -31,7 +31,7 @@ export const EdTreeBody = () => {
     }
   }
 
-  let tree: NodeModel<EdMeta>[] = [];
+  let tree: NodeModel<IMeta>[] = [];
   if (p.ui.tree.search) {
     tree = doTreeSearch(p);
   } else {
@@ -114,7 +114,7 @@ const treeClasses = {
   `,
 };
 
-export const DragPreview: DragPreviewRender<EdMeta> = (props) => {
+export const DragPreview: DragPreviewRender<IMeta> = (props) => {
   const item = props.item;
 
   return (
@@ -127,8 +127,8 @@ export const DragPreview: DragPreviewRender<EdMeta> = (props) => {
 };
 
 export const Placeholder: FC<{
-  node: Parameters<PlaceholderRender<EdMeta>>[0];
+  node: Parameters<PlaceholderRender<IMeta>>[0];
-  params: Parameters<PlaceholderRender<EdMeta>>[1];
+  params: Parameters<PlaceholderRender<IMeta>>[1];
 }> = ({ params }) => {
   return (
     <div

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

@@ -1,13 +1,13 @@
 import { NodeModel, RenderParams } from "@minoru/react-dnd-treeview";
 import { useGlobal } from "web-utils";
 import { Tooltip } from "../../../../../../utils/ui/tooltip";
-import { EDGlobal, EdMeta, active } from "../../../../logic/ed-global";
+import { EDGlobal, IMeta, active } from "../../../../logic/ed-global";
 
 export const EdTreeAction = ({
   node,
   prm,
 }: {
-  node: NodeModel<EdMeta>;
+  node: NodeModel<IMeta>;
   prm: RenderParams;
 }) => {
   const p = useGlobal(EDGlobal, "EDITOR");

app/web/src/nova/ed/panel/tree/node/item/ctx-menu.tsx

@@ -3,7 +3,7 @@ import { useGlobal, useLocal } from "web-utils";
 import { IItem } from "../../../../../../utils/types/item";
 import { FNComponent } from "../../../../../../utils/types/meta-fn";
 import { Menu, MenuItem } from "../../../../../../utils/ui/context-menu";
-import { EDGlobal, EdMeta, active } from "../../../../logic/ed-global";
+import { EDGlobal, IMeta, active } from "../../../../logic/ed-global";
 import { edActionAttach } from "./action/attach";
 import { edActionClone } from "./action/clone";
 import { edActionCopy } from "./action/copy";
@@ -24,7 +24,7 @@ export const EdTreeCtxMenu = ({
   onClose,
 }: {
   event: React.MouseEvent<HTMLDivElement, MouseEvent>;
-  node: NodeModel<EdMeta>;
+  node: NodeModel<IMeta>;
   prm: RenderParams;
   onClose: () => void;
 }) => {

app/web/src/nova/ed/panel/tree/node/item/indent-hook.ts

@@ -1,6 +1,6 @@
 import { TreeMethods } from "@minoru/react-dnd-treeview";
 import { useEffect } from "react";
-import { EdMeta, PG, active } from "../../../../logic/ed-global";
+import { IMeta, PG, active } from "../../../../logic/ed-global";
 import { getMetaById } from "../../../../logic/tree/build";
 
 export const expandTreeHook = (
@@ -26,7 +26,7 @@ export const expandTreeHook = (
       if (id) {
         shouldOpen.add(id);
 
-        let meta: EdMeta | undefined = getMetaById(p, id);
+        let meta: IMeta | undefined = getMetaById(p, id);
         while (meta) {
           const id = meta.parent_item.id;
           if (id && !shouldOpen.has(id)) {

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

@@ -1,12 +1,12 @@
 import { NodeModel, RenderParams } from "@minoru/react-dnd-treeview";
-import { EDGlobal, EdMeta } from "../../../../logic/ed-global";
+import { EDGlobal, IMeta } from "../../../../logic/ed-global";
 import { useGlobal } from "web-utils";
 export const DEPTH_WIDTH = 5;
 export const EdTreeIndent = ({
   node,
   prm,
 }: {
-  node: NodeModel<EdMeta>;
+  node: NodeModel<IMeta>;
   prm: RenderParams;
 }) => {
   const p = useGlobal(EDGlobal, "EDITOR");

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

@@ -1,14 +1,14 @@
 import { NodeModel, RenderParams } from "@minoru/react-dnd-treeview";
 import { FC, useEffect } from "react";
 import { useGlobal, useLocal } from "web-utils";
-import { EDGlobal, EdMeta } from "../../../../logic/ed-global";
+import { EDGlobal, IMeta } from "../../../../logic/ed-global";
 import { Tooltip } from "../../../../../../utils/ui/tooltip";
 
 export const EdTreeName = ({
   node,
   prm,
 }: {
-  node: NodeModel<EdMeta>;
+  node: NodeModel<IMeta>;
   prm: RenderParams;
 }) => {
   const p = useGlobal(EDGlobal, "EDITOR");

app/web/src/nova/ed/panel/tree/node/on-drop.tsx

@@ -1,14 +1,14 @@
 import { DropOptions, NodeModel } from "@minoru/react-dnd-treeview";
 import get from "lodash.get";
 import { MContent } from "../../../../../utils/types/general";
-import { EdMeta, PG, active } from "../../../logic/ed-global";
+import { IMeta, PG, active } from "../../../logic/ed-global";
 import { getMetaById } from "../../../logic/tree/build";
 import { fillID } from "../../../logic/tree/fill-id";
 
 export const nodeOnDrop: (
   p: PG,
-  tree: NodeModel<EdMeta>[],
+  tree: NodeModel<IMeta>[],
-  options: DropOptions<EdMeta>
+  options: DropOptions<IMeta>
 ) => void = (p, tree, options) => {
   const { dragSource, dropTarget, relativeIndex, dragSourceId, dropTargetId } =
     options;
@@ -47,7 +47,7 @@ export const nodeOnDrop: (
   }
 };
 
-export const canDrop = (p: PG, arg: DropOptions<EdMeta>) => {
+export const canDrop = (p: PG, arg: DropOptions<IMeta>) => {
   const { dragSource, dragSourceId, dropTargetId, dropTarget } = arg;
   try {
     const parentSource: MContent | undefined = get(
@@ -69,7 +69,7 @@ export const canDrop = (p: PG, arg: DropOptions<EdMeta>) => {
       const to = dropTarget.data.item.type;
 
       if (from === "section" || from === "item") {
-        let parent: EdMeta | undefined = dropTarget.data;
+        let parent: IMeta | undefined = dropTarget.data;
         while (parent) {
           if (parent.item.id === dragSource.data.item.id) {
             return false;

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

@@ -1,7 +1,7 @@
 import { NodeRender } from "@minoru/react-dnd-treeview";
 import { useGlobal, useLocal } from "web-utils";
 import { Loading } from "../../../../../utils/ui/loading";
-import { EDGlobal, EdMeta, active } from "../../../logic/ed-global";
+import { EDGlobal, IMeta, active } from "../../../logic/ed-global";
 import { getMetaById } from "../../../logic/tree/build";
 import { EdTreeAction } from "./item/action";
 import { EdTreeCtxMenu } from "./item/ctx-menu";
@@ -11,7 +11,7 @@ import { treeItemKeyMap } from "./key-map";
 
 const jsxPropVis = {} as Record<string, string>;
 
-export const nodeRender: NodeRender<EdMeta> = (node, prm) => {
+export const nodeRender: NodeRender<IMeta> = (node, prm) => {
   const p = useGlobal(EDGlobal, "EDITOR");
   const local = useLocal({
     rightClick: null as null | React.MouseEvent<HTMLDivElement, MouseEvent>,

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

@@ -1,7 +1,7 @@
 import { NodeModel } from "@minoru/react-dnd-treeview";
 import { useEffect } from "react";
 import { useGlobal, useLocal } from "web-utils";
-import { EDGlobal, EdMeta, PG, active } from "../../logic/ed-global";
+import { EDGlobal, IMeta, PG, active } from "../../logic/ed-global";
 import { fuzzy } from "../../../../utils/ui/fuzzy";
 
 export const EdTreeSearch = () => {
@@ -100,7 +100,7 @@ export const EdTreeSearch = () => {
 };
 
 export const doTreeSearch = (p: PG) => {
-  let tree: Record<string, { idx: number; node: NodeModel<EdMeta> }> = {};
+  let tree: Record<string, { idx: number; node: NodeModel<IMeta> }> = {};
 
   if (p.ui.tree.search_mode.Name) {
     const found = fuzzy(p.page.tree, "text", p.ui.tree.search);

app/web/src/nova/view/logic/global.ts

@@ -1,12 +1,12 @@
 import { ReactElement, ReactNode } from "react";
-import { EdMeta, IScope } from "../../ed/logic/ed-global";
+import { IMeta, IScope } from "../../ed/logic/ed-global";
 
 export const ViewGlobal = {
   mode: "" as "desktop" | "mobile",
   status: "init" as "init" | "load-code" | "loading-code" | "ready" | "rebuild",
   current: { site_id: "", page_id: "" },
   layout: { show: false },
-  meta: {} as Record<string, EdMeta>,
+  meta: {} as Record<string, IMeta>,
   scope: null as null | IScope,
   entry: [] as string[],
   body_cache: null as null | ReactElement,
@@ -19,17 +19,17 @@ export const ViewGlobal = {
     api: null as any,
   },
   view: {
-    hidden: undefined as undefined | ((meta: EdMeta) => boolean),
+    hidden: undefined as undefined | ((meta: IMeta) => boolean),
     active: undefined as
       | undefined
       | {
-          get: (meta: EdMeta) => boolean;
+          get: (meta: IMeta) => boolean;
-          set: (meta: EdMeta) => void;
+          set: (meta: IMeta) => void;
-          text?: (arg: { meta: EdMeta }) => ReactNode;
+          text?: (arg: { meta: IMeta }) => ReactNode;
         },
     hover: undefined as
       | undefined
-      | { get: (meta: EdMeta) => boolean; set: (meta: EdMeta) => void },
+      | { get: (meta: IMeta) => boolean; set: (meta: IMeta) => void },
   },
 };
 

app/web/src/nova/view/logic/meta/comp.tsx

@@ -4,7 +4,7 @@ import { instantiate } from "./comp/instantiate";
 import { walkProp } from "./comp/walk-prop";
 import { genMeta } from "./meta";
 import { applyRefIds } from "./ref-ids";
-import { simplifyItem } from "./simplify";
+import { simplifyItemChild } from "./simplify";
 import { GenMetaArg, GenMetaP, IMeta } from "./types";
 
 export const genComp = (
@@ -16,10 +16,14 @@ export const genComp = (
   const mitem = arg.mitem as MItem | undefined;
   if (item.type === "item" && item.component?.id && arg.parent?.item.id) {
     let pcomp = p.comps[item.component.id];
-    if (!pcomp && p.on?.visit_component) {
+    if (p.on?.visit_component) {
       p.on.visit_component(item.component.id);
+    }
+
+    if (!pcomp) {
       return;
     }
+
     if (pcomp) {
       const ref_ids = r?.ref_ids || item.component?.ref_ids || {};
       let mref_ids = r?.mref_ids || mitem?.get("component")?.get("ref_ids");
@@ -32,7 +36,7 @@ export const genComp = (
       instantiate(item, pcomp.comp, ref_ids, mref_ids);
 
       const meta: IMeta = {
-        item: simplifyItem(item),
+        item: simplifyItemChild(item),
         parent: {
           id: arg.parent.item.id,
           instance_id: arg.parent?.instance?.id,

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

@@ -13,8 +13,9 @@ export const initLoadComp = async (
       ...p,
       on: {
         visit_component: async (id) => {
-          comp_ids.push(id);
+          if (!p.comps[id]) {
-          return { item: null as any };
+            comp_ids.push(id);
+          }
         },
       },
       set_meta: false,

app/web/src/nova/view/logic/meta/meta.tsx

@@ -1,7 +1,7 @@
 import { IItem, MItem } from "../../../../utils/types/item";
 import { genComp } from "./comp";
 import { applyRefIds } from "./ref-ids";
-import { simplifyItem } from "./simplify";
+import { simplifyItemChild } from "./simplify";
 import { GenMetaArg, GenMetaP, IMeta } from "./types";
 
 export const genMeta = (p: GenMetaP, arg: GenMetaArg) => {
@@ -28,7 +28,7 @@ export const genMeta = (p: GenMetaP, arg: GenMetaArg) => {
     }
 
     const meta: IMeta = {
-      item: simplifyItem(item),
+      item: simplifyItemChild(item),
       parent: {
         id: arg.parent?.item.id || "root",
         instance_id: arg.parent?.instance?.id,

app/web/src/nova/view/logic/meta/simplify.tsx

@@ -1,7 +1,7 @@
 import { IItem } from "../../../../utils/types/item";
 import { IMeta, ISimpleMeta } from "./types";
 
-export const simplifyItem = (item: IItem) => {
+export const simplifyItemChild = (item: IItem) => {
   const newitem = {} as any;
   for (const [k, v] of Object.entries(item)) {
     if (k === "childs") {

app/web/src/nova/view/logic/types.ts

@@ -1,4 +1,4 @@
-import { EdMeta, IScope, PG } from "../../ed/logic/ed-global";
+import { IMeta, IScope, PG } from "../../ed/logic/ed-global";
 
 export type VLoad =
   | { mode: "page"; page_id: string }
@@ -7,7 +7,7 @@ export type VLoad =
       mode: "tree_meta";
       entry: string[];
       scope?: IScope;
-      meta: Record<string, EdMeta>;
+      meta: Record<string, IMeta>;
     };
 
 export type VLoadComponent = {

app/web/src/nova/view/render/meta/children.tsx

@@ -1,11 +1,11 @@
 import { FC, Fragment, ReactNode } from "react";
 import { useGlobal, useLocal } from "web-utils";
-import { EdMeta } from "../../../ed/logic/ed-global";
+import { IMeta } from "../../../ed/logic/ed-global";
 import { ViewGlobal } from "../../logic/global";
 import { ViewMeta } from "./meta";
 
 export const ViewMetaChildren: FC<{
-  meta: EdMeta;
+  meta: IMeta;
   className?: string;
 }> = ({ meta, className }) => {
   const v = useGlobal(ViewGlobal, "VIEW");

app/web/src/nova/view/render/meta/render.tsx

@@ -1,11 +1,11 @@
 import { FC } from "react";
 import { produceCSS } from "../../../../utils/css/gen";
-import { EdMeta } from "../../../ed/logic/ed-global";
+import { IMeta } from "../../../ed/logic/ed-global";
 import { VG } from "../../logic/global";
 import { ViewMetaChildren } from "./children";
 
 export const ViewMetaRender: FC<{
-  meta: EdMeta;
+  meta: IMeta;
   v: VG;
   props?: any;
   className?: string;

app/web/src/nova/view/render/meta/script/comp-propval.tsx

@@ -1,7 +1,7 @@
 import { createAPI, createDB } from "../../../../../utils/script/init-api";
 import { IItem } from "../../../../../utils/types/item";
 import { FNCompDef } from "../../../../../utils/types/meta-fn";
-import { EdMeta } from "../../../../ed/logic/ed-global";
+import { IMeta } from "../../../../ed/logic/ed-global";
 import { VG } from "../../../logic/global";
 import { extractNavigate, preload } from "../../../logic/router";
 import { ViewMeta } from "../meta";
@@ -10,7 +10,7 @@ import { mergeScopeUpwards } from "./merge-upward";
 const jsxProps = {} as Record<string, any>;
 export const compPropVal = (
   v: VG,
-  meta: EdMeta,
+  meta: IMeta,
   scopeIndex?: Record<string, any>
 ) => {
   let props = {} as Record<string, FNCompDef>;
@@ -76,7 +76,7 @@ export const compPropVal = (
                   scopeIndex?: Record<string, any>;
                 }) => {
                   if (prop.content) {
-                    const meta = v.meta[prop.content.id] as EdMeta;
+                    const meta = v.meta[prop.content.id] as IMeta;
                     let parent = v.meta[parent_id];
 
                     if (meta && parent) {

app/web/src/nova/view/render/meta/script/create-local.tsx

@@ -1,6 +1,6 @@
 import { ReactNode, useEffect, useState } from "react";
 import { deepClone } from "web-utils";
-import { EdMeta } from "../../../../ed/logic/ed-global";
+import { IMeta } from "../../../../ed/logic/ed-global";
 import { VG } from "../../../logic/global";
 import { modifyChildScopeIndex } from "./mod-scope-index";
 
@@ -31,7 +31,7 @@ export const createLocal = (
     deps?: any[];
     cache?: boolean;
   }) => {
-    const meta = v.meta[id] as EdMeta;
+    const meta = v.meta[id] as IMeta;
     const [_, set] = useState({});
 
     let scope = null as any;

app/web/src/nova/view/render/meta/script/error-box.tsx

@@ -1,6 +1,6 @@
 import { useErrorBoundary, withErrorBoundary } from "react-use-error-boundary";
 import { useGlobal, useLocal } from "web-utils";
-import { EdMeta } from "../../../../ed/logic/ed-global";
+import { IMeta } from "../../../../ed/logic/ed-global";
 import { ViewGlobal } from "../../../logic/global";
 
 export const ErrorBox = withErrorBoundary(
@@ -11,7 +11,7 @@ export const ErrorBox = withErrorBoundary(
     silent,
   }: {
     children: any;
-    meta?: EdMeta;
+    meta?: IMeta;
     id?: string;
     silent?: boolean;
   }) => {

app/web/src/nova/view/render/meta/script/merge-upward.tsx

@@ -1,11 +1,11 @@
-import { EdMeta } from "../../../../ed/logic/ed-global";
+import { IMeta } from "../../../../ed/logic/ed-global";
 import { VG } from "../../../logic/global";
 
 export const mergeScopeUpwards = (
   v: VG,
   id: string,
   scopeIndex?: Record<string, any>,
-  each?: (meta: EdMeta, values: Record<string, any>) => boolean
+  each?: (meta: IMeta, values: Record<string, any>) => boolean
 ) => {
   const meta = v.meta[id];
 

app/web/src/nova/view/view.tsx

@@ -1,7 +1,7 @@
 import { FC, ReactNode, Suspense } from "react";
 import { useGlobal } from "web-utils";
 import { Loading } from "../../utils/ui/loading";
-import { EdMeta } from "../ed/logic/ed-global";
+import { IMeta } from "../ed/logic/ed-global";
 import { ViewGlobal } from "./logic/global";
 import { vInit } from "./logic/init";
 import { newLoadCode } from "./logic/load-code-new";
@@ -21,12 +21,12 @@ type ViewProp = {
   layout?: { show: boolean };
   isEditor?: boolean;
   bind?: (arg: { render: () => void }) => void;
-  hidden?: (item: EdMeta) => boolean;
+  hidden?: (item: IMeta) => boolean;
-  hover?: { get: (item: EdMeta) => boolean; set: (meta: EdMeta) => void };
+  hover?: { get: (item: IMeta) => boolean; set: (meta: IMeta) => void };
   active?: {
-    get: (item: EdMeta) => boolean;
+    get: (item: IMeta) => boolean;
-    set: (item: EdMeta) => void;
+    set: (item: IMeta) => void;
-    text?: (arg: { meta: EdMeta }) => ReactNode;
+    text?: (arg: { meta: IMeta }) => ReactNode;
   };
 };
 

pkgs/web-utils/src/use-global.ts

@@ -43,7 +43,7 @@ export const useGlobal = <T extends object>(
   const { global, render } = ctx;
 
   if (!global[_id]) {
-    global[_id] = deepClone(defaultValue);
+    global[_id] = defaultValue;
   }
 
   useEffect(() => {