wip comps scope

app/srv/ws/sync/actions.ts

@@ -1,8 +1,11 @@
 import { component, page } from "dbgen";
-import { EComp, EPage, ESite } from "../../../web/src/nova/ed/logic/ed-global";
+import {
+  EPage,
+  ESite,
+  IScopeComp
+} from "../../../web/src/nova/ed/logic/ed-global";
 import { IItem } from "../../../web/src/utils/types/item";
 import { site_group } from "./actions/site_group";
-import { activity } from "./entity/activity";
 import { parseJs } from "./editor/parser/parse-js";
 
 /* 
@@ -41,7 +44,7 @@ export const SyncActions = {
       ({}) as Record<string, Exclude<component, "content_tree">>,
     group: async (id_site: string) =>
       ({}) as Record<string, { id: string; name: string; comps: string[] }>,
-    load: async (id: string) => ({}) as EComp | void,
+    load: async (id: string) => ({}) as IScopeComp | void,
   },
   page: {
     list: async (id_site: string) =>

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

@@ -1,10 +1,53 @@
+import { IScopeComp } from "../../../../web/src/nova/ed/logic/ed-global";
+import { MItem } from "../../../../web/src/utils/types/item";
+import { DComp } from "../../../../web/src/utils/types/root";
 import { SAction } from "../actions";
 import { loadComponent } from "../editor/load-component";
+import { serverWalkLoad, serverWalkMap } from "../editor/load-page";
+import { docs } from "../entity/docs";
+import { gzipAsync } from "../entity/zlib";
 import { SyncConnection } from "../type";
 
 export const comp_load: SAction["comp"]["load"] = async function (
   this: SyncConnection,
   id: string
 ) {
-  return await loadComponent(id, this);
+  const root = await loadComponent(id, this);
+
+  let ref = docs.comp[id];
+  if (ref) {
+    return scanMeta(id, ref.doc, this);
+  }
+};
+
+const scanMeta = async (id: string, doc: DComp, sync: SyncConnection) => {
+  const scope = {};
+  const scope_comps: IScopeComp = {};
+  const loaded = new Set<string>();
+  const root = doc.getMap("map").get("root");
+  if (root) {
+    const name = root.get("name") || "";
+    const childs = root.get("childs");
+    if (childs) {
+      await Promise.all(
+        childs.map((m) => serverWalkLoad(m, scope_comps, sync, loaded))
+      );
+      childs.map((m, i) => {
+        serverWalkMap(
+          { sync, scope, scope_comps },
+          {
+            mitem: m,
+            parent_item: { id: "root" },
+            parent_ids: ["root"],
+          }
+        );
+      });
+    }
+
+    const bin = Y.encodeStateAsUpdate(doc as any);
+    const snapshot = await gzipAsync(bin);
+    scope_comps[id] = { id, name, scope, snapshot };
+  }
+
+  return scope_comps;
 };

app/srv/ws/sync/editor/load-page.ts

@@ -96,32 +96,7 @@ export const serverWalkMap = (
   const { mitem, parent_item, parent_mcomp } = arg;
 
   const item = {} as unknown as IItem;
-
-  let override_id = "";
-  const id = mitem.get("id");
-
-  if (parent_mcomp && id) {
-    const fcomp = parent_mcomp.mitem.get("component");
-
-    if (fcomp) {
-      const ref_ids = fcomp.get("ref_ids");
-
-      if (ref_ids) {
-        let ref_id = ref_ids.get(id);
-
-        if (!ref_id) {
-          ref_id = createId();
-          ref_ids.set(id, ref_id);
-        }
-        override_id = ref_id;
-      }
-    }
-  }
-
   mapItem(mitem, item);
-  if (override_id) {
-    item.id = override_id;
-  }
 
   const item_comp = item.component;
   const mitem_comp = mitem.get("component");

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

@@ -127,7 +127,7 @@ export const EDGlobal = {
     doc: null as null | DComp,
     item: null as null | IItem,
     map: {} as Record<string, { id: string; item: IItem }>,
-    list: {} as Record<string, { comp: EComp; doc: DComp }>,
+    list: {} as Record<string, { comp: EComp; doc: DComp; scope: IScope }>,
     group: {} as Record<string, Awaited<ReturnType<SAction["comp"]["group"]>>>,
   },
   ui: {

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

@@ -1,4 +1,6 @@
 import { compress, decompress } from "wasm-gzip";
+import { IItem } from "../../../utils/types/item";
+import { DComp } from "../../../utils/types/root";
 import { PG } from "./ed-global";
 import { treeRebuild } from "./tree/build";
 
@@ -43,8 +45,21 @@ export const reloadPage = async (p: PG) => {
     p.render();
     return;
   }
-
+  if (remotePage.scope_comps) {
-  console.log(remotePage.scope, remotePage.scope_comps);
+    for (const [id_comp, c] of Object.entries(remotePage.scope_comps)) {
+      if (c && c.snapshot) {
+        const doc = new Y.Doc() as DComp;
+        if (c.snapshot) {
+          Y.applyUpdate(doc as any, decompress(c.snapshot));
+          p.comp.map[id_comp] = {
+            id: id_comp,
+            item: doc.getMap("map").get("root")?.toJSON() as IItem,
+          };
+          p.comp.list[id_comp] = { comp: c, doc, scope: c.scope };
+        }
+      }
+    }
+  }
 
   p.page.cur = remotePage;
   if (remotePage.snapshot) {

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

@@ -3,14 +3,15 @@ import { decompress } from "wasm-gzip";
 import { TypedArray } from "yjs-types";
 import { MContent } from "../../../../utils/types/general";
 import { IItem, MItem } from "../../../../utils/types/item";
-import {
+import { FNCompDef, FNComponent } from "../../../../utils/types/meta-fn";
-  FNCompDef,
-  FNComponent
-} from "../../../../utils/types/meta-fn";
 import { DComp } from "../../../../utils/types/root";
 import { MSection } from "../../../../utils/types/section";
 import { EdMeta, PG } from "../ed-global";
-import { ensureMItemProps, ensureMProp, ensurePropContent } from "./sync-walk-utils";
+import {
+  ensureMItemProps,
+  ensureMProp,
+  ensurePropContent,
+} from "./sync-walk-utils";
 
 export const syncWalkLoad = async (
   p: PG,
@@ -256,7 +257,10 @@ export const syncWalkMap = (
 };
 
 export const loadComponent = async (p: PG, id_comp: string) => {
-  const cur = await p.sync.comp.load(id_comp);
+  const comps = await p.sync.comp.load(id_comp);
+
+  if (comps) {
+    for (const cur of Object.values(comps)) {
       if (cur && cur.snapshot) {
         const doc = new Y.Doc() as DComp;
         if (cur.snapshot) {
@@ -265,10 +269,12 @@ export const loadComponent = async (p: PG, id_comp: string) => {
             id: id_comp,
             item: doc.getMap("map").get("root")?.toJSON() as IItem,
           };
-      p.comp.list[id_comp] = { comp: cur, doc };
+          p.comp.list[id_comp] = { comp: cur, doc, scope: cur.scope };
-      return true;
         }
       }
+    }
+    return true;
+  }
   return false;
 };
 

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

@@ -12,8 +12,16 @@ export const EdTreeAction = ({
   const p = useGlobal(EDGlobal, "EDITOR");
   const item = node.data?.item;
   if (!item) return null;
+  const isComponent = item.type === "item" && !!item.component?.id;
+
+  let mode = "";
+  if (item.adv?.js) mode = "js";
+  if (!mode && item.adv?.css) mode = "css";
+  if (!mode && item.adv?.html) mode = "html";
+
   return (
     <div className="flex items-center pr-1">
+      {!isComponent && (
         <div
           className={cx(
             "border rounded-sm text-[9px] flex w-[20px] h-[15px] items-center cursor-pointer justify-center uppercase",
@@ -29,15 +37,16 @@ export const EdTreeAction = ({
                 ),
             !(item.adv?.js || item.adv?.css || item.adv?.html) &&
               `bg-orange-100  border-orange-200 hover:border-orange-500 hover:text-orange-900 hover:bg-orange-300`,
-          item.adv?.js &&
+            mode === "js" &&
               `bg-orange-100  border-orange-200 hover:border-orange-500 hover:text-orange-900 hover:bg-orange-300`,
-          item.adv?.css &&
+            mode === "css" &&
               `bg-green-100  border-green-200 hover:border-green-500 hover:text-green-900 hover:bg-green-300`,
-          item.adv?.html &&
+            mode === "html" &&
               `bg-blue-100  border-blue-200 hover:border-blue-500 hover:text-blue-900 hover:bg-blue-300`
           )}
           onClick={() => {
             p.ui.popup.script.open = true;
+            p.ui.popup.script.mode = (mode || "js") as any;
             p.render();
           }}
         >
@@ -47,6 +56,7 @@ export const EdTreeAction = ({
             }}
           ></div>
         </div>
+      )}
     </div>
   );
 };