wip fix content

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

@@ -27,28 +27,22 @@ 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");
+  const mitem = doc.getMap("map").get("root");
-  if (root) {
+  if (mitem) {
-    const name = root.get("name") || "";
+    const name = mitem.get("name") || "";
-    const childs = root.get("childs");
+    await serverWalkLoad(mitem, scope_comps, sync, loaded);
-    if (childs) {
+    serverWalkMap(
-      await Promise.all(
+      { sync, scope, scope_comps },
-        childs.map((m) => serverWalkLoad(m, scope_comps, sync, loaded))
+      {
-      );
+        mitem,
-      childs.map((m, i) => {
+        parent_item: { id: "root" },
-        serverWalkMap(
+        parent_ids: ["root"],
-          { 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 };
   }
 

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

@@ -0,0 +1,45 @@
+import {
+  ensureMItemProps,
+  ensureMProp,
+  ensurePropContent,
+} from "../../../../web/src/nova/ed/logic/tree/sync-walk-utils";
+import { MItem } from "../../../../web/src/utils/types/item";
+import {
+  FNCompDef,
+  FNComponent,
+} from "../../../../web/src/utils/types/meta-fn";
+import { parseJs } from "./parser/parse-js";
+
+export const extractMItemProps = (arg: {
+  mitem: MItem;
+  item_comp: FNComponent;
+  mcomp: MItem;
+  scope: Exclude<ReturnType<typeof parseJs>, undefined>;
+  mcontent: (mcontent: MItem) => void;
+}) => {
+  const { mitem, item_comp, mcomp, scope } = arg;
+
+  const mitem_comp = mitem.get("component");
+
+  const mprops = mcomp.get("component")?.get("props")?.toJSON() as Record<
+    string,
+    FNCompDef
+  >;
+  if (mitem_comp) {
+    const mitem_props = ensureMItemProps(mitem_comp, item_comp);
+    if (mitem_props) {
+      for (const [k, v] of Object.entries(mprops)) {
+        scope.props[k] = { name: k, value: `null as any` };
+        const mprop = ensureMProp(mitem_props, k, v);
+        item_comp.props[k] = v;
+        if (mprop && v.meta?.type === "content-element") {
+          scope.props[k].value = "null as ReactElement";
+          const mcontent = ensurePropContent(mprop, k);
+          if (mcontent) {
+            arg.mcontent(mcontent);
+          }
+        }
+      }
+    }
+  }
+};

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

@@ -6,20 +6,18 @@ import {
   IScopeComp,
 } from "../../../../web/src/nova/ed/logic/ed-global";
 import {
-  ensureMItemProps,
+  ensurePropContent
-  ensureMProp,
-  ensurePropContent,
 } from "../../../../web/src/nova/ed/logic/tree/sync-walk-utils";
 import { MContent } from "../../../../web/src/utils/types/general";
 import { IItem, MItem } from "../../../../web/src/utils/types/item";
 import {
-  FNCompDef,
+  FNComponent
-  FNComponent,
 } from "../../../../web/src/utils/types/meta-fn";
 import { docs } from "../entity/docs";
 import { gzipAsync } from "../entity/zlib";
 import { SyncConnection } from "../type";
 import { loadComponent } from "./load-component";
+import { extractMItemProps } from "./load-page-comp";
 import { parseJs } from "./parser/parse-js";
 
 export const serverWalkLoad = async (
@@ -123,113 +121,126 @@ export const serverWalkMap = (
 
   const item_comp = item.component;
   const mitem_comp = mitem.get("component");
-  if (item_comp && item_comp.id && parent_item.id !== "root") {
+  if (item_comp && item_comp.id) {
-    if (!docs.comp[item_comp.id]) {
+    if (parent_item.id === "root") {
-      console.error("Component failed to load:", item_comp.id);
+      const scope = { props: {} } as Exclude<
-      return;
+        ReturnType<typeof parseJs>,
-    }
+        undefined
-
+      >;
-    if (!p.scope_comps[item_comp.id]) {
+      extractMItemProps({
-      console.error("Failed to assign component:", item_comp.id);
+        item_comp,
-      return;
+        mitem,
-    }
+        mcomp: mitem,
-
+        scope,
-    const ref_comp = docs.comp[item_comp.id];
+        mcontent(mcontent) {},
-
+      });
-    if (ref_comp && mitem_comp) {
+      p.scope[item.id] = {
-      const mcomp = ref_comp.doc.getMap("map").get("root");
+        p: arg.parent_ids,
-
+        n: item.name,
-      if (mcomp) {
+        s: scope,
-        let ref_ids: Record<string, string> = item_comp.ref_ids;
+      };
-        if (!ref_ids) {
+      const js = item.adv?.js;
-          mitem_comp.set("ref_ids", new Y.Map() as any);
+      if (typeof js === "string") {
-          ref_ids = {};
+        const s = parseJs(js);
-        }
+        const ps = p.scope[item.id].s;
-        const original_id = item.id;
+        if (ps) {
-        mapItem(mcomp, item);
+          if (s?.local) ps.local = s.local;
-        item.id = original_id;
+          if (s?.passprop) ps.passprop = s.passprop;
-
-        const mprops = mcomp.get("component")?.get("props")?.toJSON() as Record<
-          string,
-          FNCompDef
-        >;
-
-        const scope = { props: {} } as Exclude<
-          ReturnType<typeof parseJs>,
-          undefined
-        >;
-
-        if (mprops) {
-          const mitem_comp = mitem.get("component");
-          if (mitem_comp) {
-            const mitem_props = ensureMItemProps(mitem_comp, item_comp);
-            if (mitem_props) {
-              for (const [k, v] of Object.entries(mprops)) {
-                scope.props[k] = { name: k, value: `null as any` };
-                const mprop = ensureMProp(mitem_props, k, v);
-                item_comp.props[k] = v;
-                if (mprop && v.meta?.type === "content-element") {
-                  scope.props[k].value = "null as ReactElement";
-                  const mcontent = ensurePropContent(mprop, k);
-                  if (mcontent) {
-                    serverWalkMap(p, {
-                      parent_ids: [...arg.parent_ids, item.id],
-                      mitem: mcontent,
-                      parent_item: { id: item.id, mitem: mitem as MItem },
-                      is_prop: true,
-                      parent_mcomp: {
-                        id: item_comp.id,
-                        mitem: mitem as MItem,
-                        mcomp,
-                      },
-                    });
-                  }
-                }
-              }
-            }
-          }
-        }
-
-        const pcomp = p.scope_comps[item_comp.id];
-        pcomp.scope[item.id] = { p: arg.parent_ids, n: item.name, s: null };
-        const js = item.adv?.js;
-        if (typeof js === "string") {
-          const res = parseJs(js);
-          if (res) {
-            scope.local = res.local;
-            scope.passprop = res.passprop;
-          }
-        }
-
-        if (scope) pcomp.scope[item.id].s = scope;
-        if (!parent_mcomp) {
-          p.scope[item.id] = {
-            p: arg.parent_ids,
-            n: item.name,
-            s: null,
-          };
-          if (scope) p.scope[item.id].s = scope;
-        }
-
-        const childs = mcomp.get("childs")?.map((e) => e) || [];
-        for (const e of childs) {
-          serverWalkMap(p, {
-            mitem: e,
-            parent_ids: [...arg.parent_ids, item.id],
-            parent_item: {
-              id: item.id,
-              mitem: mitem as MItem,
-            },
-            parent_mcomp: {
-              id: item_comp.id,
-              mitem: mitem as MItem,
-              mcomp,
-            },
-          });
         }
       }
+    } else {
+      if (!docs.comp[item_comp.id]) {
+        console.error("Component failed to load:", item_comp.id);
+        return;
+      }
+
+      if (!p.scope_comps[item_comp.id]) {
+        console.error("Failed to assign component:", item_comp.id);
+        return;
+      }
+
+      const ref_comp = docs.comp[item_comp.id];
+
+      if (ref_comp && mitem_comp) {
+        const mcomp = ref_comp.doc.getMap("map").get("root");
+
+        if (mcomp) {
+          let ref_ids: Record<string, string> = item_comp.ref_ids;
+          if (!ref_ids) {
+            mitem_comp.set("ref_ids", new Y.Map() as any);
+            ref_ids = {};
+          }
+          const original_id = item.id;
+          mapItem(mcomp, item);
+          item.id = original_id;
+
+          const scope = { props: {} } as Exclude<
+            ReturnType<typeof parseJs>,
+            undefined
+          >;
+
+          extractMItemProps({
+            item_comp,
+            mitem,
+            mcomp,
+            scope,
+            mcontent(mcontent) {
+              serverWalkMap(p, {
+                parent_ids: ["root", item.id],
+                mitem: mcontent,
+                parent_item: { id: item.id, mitem: mitem as MItem },
+                is_prop: true,
+                parent_mcomp: {
+                  id: item_comp.id,
+                  mitem: mitem as MItem,
+                  mcomp,
+                },
+              });
+            },
+          });
+
+          const pcomp = p.scope_comps[item_comp.id];
+          pcomp.scope[item.id] = { p: ["root"], n: item.name, s: null };
+
+          const js = item.adv?.js;
+          if (typeof js === "string") {
+            const res = parseJs(js);
+            if (res) {
+              scope.local = res.local;
+              scope.passprop = res.passprop;
+            }
+          }
+
+          if (scope) pcomp.scope[item.id].s = scope;
+          if (!parent_mcomp) {
+            p.scope[item.id] = {
+              p: arg.parent_ids,
+              n: item.name,
+              s: null,
+            };
+            if (scope) p.scope[item.id].s = scope;
+          }
+
+          const childs = mcomp.get("childs")?.map((e) => e) || [];
+          for (const e of childs) {
+            serverWalkMap(p, {
+              mitem: e,
+              parent_ids: ["root", item.id],
+              parent_item: {
+                id: item.id,
+                mitem: mitem as MItem,
+              },
+              parent_mcomp: {
+                id: item_comp.id,
+                mitem: mitem as MItem,
+                mcomp,
+              },
+            });
+          }
+        }
+      }
+      return;
     }
-    return;
   }
 
   if (arg.parent_mcomp && !arg.is_prop) {
@@ -241,11 +252,13 @@ export const serverWalkMap = (
       if (scope) pcomp.scope[item.id].s = scope;
     }
   } else {
-    p.scope[item.id] = { p: arg.parent_ids, n: item.name, s: null };
+    if (!(item_comp && item_comp.id)) {
-    const js = item.adv?.js;
+      p.scope[item.id] = { p: arg.parent_ids, n: item.name, s: null };
-    if (typeof js === "string") {
+      const js = item.adv?.js;
-      const scope = parseJs(js);
+      if (typeof js === "string") {
-      if (scope) p.scope[item.id].s = scope;
+        const scope = parseJs(js);
+        if (scope) p.scope[item.id].s = scope;
+      }
     }
   }
 

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

@@ -22,7 +22,11 @@ export const ScriptMonaco = () => {
   const Editor = jscript.editor;
   if (!Editor) return null;
 
-  const meta = p.page.meta[active.item_id];
+  let meta = p.page.meta[active.item_id];
+  if (active.comp_id) {
+    meta = p.comp.list[active.comp_id].meta[active.item_id];
+  }
+
   if (!meta) return null;
 
   const item = meta.item;

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

@@ -9,8 +9,12 @@ export const declareScope = async (
   editor: MonacoEditor,
   monaco: Monaco
 ) => {
-  const active_id = active.item_id;
+  let active_id = active.item_id;
-  const s = deepClone(p.page.scope[active_id]);
+  let s = deepClone(p.page.scope[active_id]);
+
+  if (active.comp_id) {
+    s = deepClone(p.comp.list[active.comp_id].scope[active.item_id]);
+  }
 
   monaco.editor.getModels().forEach((model) => {
     if (model.uri.toString().startsWith("ts:scope~")) {
@@ -37,18 +41,28 @@ export const declareScope = async (
   });
 
   spreadScope(p, s, (arg) => {
-    addScope(
+    if (arg.type !== "local") {
-      monaco,
+      addScope(
-      `${arg.type}~${arg.id}`,
+        monaco,
-      `\
+        `${arg.type}~${arg.name}`,
+        `\
+export const {};
+declare global {
+  const ${arg.name} = ${arg.value};
+}`
+      );
+    } else {
+      addScope(
+        monaco,
+        `${arg.type}~${arg.id}`,
+        `\
 export const {};
 const __val = ${arg.value};
 declare global {
-  const ${arg.name}: typeof __val ${
+  const ${arg.name}: typeof __val & { render: ()=>void };
-    arg.type === "local" ? " & { render: ()=>void}" : ""
-  };
 }`
-    );
+      );
+    }
   });
 };
 
@@ -100,7 +114,11 @@ const spreadScope = (
       }
     }
     if (!item) {
-      item = p.page.scope[parent_id];
+      if (active.comp_id) {
+        item = p.comp.list[active.comp_id].scope[parent_id];
+      } else {
+        item = p.page.scope[parent_id];
+      }
     }
 
     if (item) {
@@ -120,7 +138,7 @@ const spreadScope = (
           for (const [k, v] of Object.entries(scope.passprop)) {
             each({
               s,
-              type: "prop",
+              type: "passprop",
               id: parent_id,
               name: k,
               value: v.value,
@@ -133,7 +151,7 @@ const spreadScope = (
           for (const [k, v] of Object.entries(scope.props)) {
             each({
               s,
-              type: "passprop",
+              type: "prop",
               id: parent_id,
               name: k,
               value: v.value,