wip fix

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

@@ -2,7 +2,6 @@ import { IScopeComp } from "../../../../web/src/nova/ed/logic/ed-global";
 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";
@@ -14,44 +13,8 @@ export const comp_load: SAction["comp"]["load"] = async function (
   const result: Record<string, IScopeComp> = {};
   for (const id of ids) {
     const root = await loadComponent(id, this);
-
-    let ref = docs.comp[id];
-    if (ref) {
-      result[id] = await scanMeta(id, ref.doc, this);
-    }
   }
   return result;
 };
 
-const scanMeta = async (id: string, doc: DComp, sync: SyncConnection) => {
+const scanMeta = async (id: string, doc: DComp, sync: SyncConnection) => {};
-  const scope = {};
-  const scope_comps: IScopeComp = {};
-  const loaded = new Set<string>();
-  const mitem = doc.getMap("map").get("root");
-  if (mitem) {
-    const name = mitem.get("name") || "";
-    await serverWalkLoad(mitem, scope_comps, sync, loaded);
-    serverWalkMap(
-      { sync, scope, scope_comps, note: "comp-load" },
-      {
-        mitem,
-        parent_item: { id: "root" },
-        parent_ids: ["root"],
-        parent_mcomp: {
-          id,
-          jsx_props: {},
-          mcomp: mitem,
-          mitem,
-          parent_ids: [],
-        },
-      }
-    );
-
-    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/actions/page_load.ts

@@ -7,6 +7,7 @@ import { IItem } from "../../../../web/src/utils/types/item";
 import { DPage } from "../../../../web/src/utils/types/root";
 import { SAction } from "../actions";
 import { loadComponent } from "../editor/load-component";
+import { parseJs } from "../editor/parser/parse-js";
 import { activity } from "../entity/activity";
 import { conns } from "../entity/conn";
 import { docs } from "../entity/docs";
@@ -214,7 +215,20 @@ const scanMeta = async (doc: DPage, sync: SyncConnection) => {
     for (const mitem of childs) {
       const item = mitem.toJSON() as IItem;
       entry.push(item.id);
-      genMeta({ comps: mcomps, meta }, { item });
+      genMeta(
+        {
+          comps: mcomps,
+          meta,
+          on: {
+            visit(meta) {
+              if (typeof meta.item.adv?.js === "string") {
+                meta.scope.def = parseJs(meta.item.adv.js);
+              }
+            },
+          },
+        },
+        { item }
+      );
     }
   }
 

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

@@ -1,49 +0,0 @@
-import {
-  ensureMItemProps,
-  ensureMProp,
-  ensurePropContent,
-} from "../../../../web/src/nova/ed/logic/tree/sync-walk-utils";
-import { IItem, 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: IItem;
-  item_comp: FNComponent;
-  mcomp: MItem;
-  scope: Exclude<ReturnType<typeof parseJs>, undefined>;
-  content_scope?: Record<string, string>;
-  mcontent: (mcontent: MItem, prop_name: string) => void;
-}) => {
-  const { mitem, item, content_scope, 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 && mprops) {
-      for (const [k, v] of Object.entries(mprops)) {
-        scope.props[k] = { name: k, value: `null as any` };
-        const mprop = ensureMProp(mitem_props, k, v);
-
-        parseJs(v.value, { item, content_scope });
-
-        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, k);
-          }
-        }
-      }
-    }
-  }
-};

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

@@ -1,361 +0,0 @@
-import { createId } from "@paralleldrive/cuid2";
-import { TypedArray } from "yjs-types";
-import {
-  EdMeta,
-  IScope,
-  IScopeComp,
-} from "../../../../web/src/nova/ed/logic/ed-global";
-import { 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 { 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 { ArgParentMComp, parseJs } from "./parser/parse-js";
-import { user } from "../entity/user";
-
-const defaultActive = {
-  select: "" as "" | "comp" | "item" | "section" | "text",
-};
-export const serverWalkLoad = async (
-  mitem: MItem,
-  scope_comps: IScopeComp,
-  sync: SyncConnection,
-  loaded: Set<string>
-) => {
-  if (typeof mitem.get !== "function") {
-    return;
-  }
-
-  const mcomp = mitem.get("component");
-  if (mcomp) {
-    const id = mcomp.get("id");
-    const comp = mcomp.toJSON() as FNComponent;
-    if (id) {
-      const isFirstLoaded = !loaded.has(id);
-      loaded.add(id);
-      if (!docs.comp[id]) {
-        await loadComponent(id, sync);
-      } else {
-        const conf = sync.conf;
-        if (conf) {
-          user.active.add({
-            ...defaultActive,
-            client_id: sync.client_id,
-            user_id: sync.user_id,
-            site_id: conf.site_id,
-            page_id: conf.page_id,
-            comp_id: comp.id,
-          });
-        }
-      }
-
-      const pcomp = docs.comp[id];
-      if (pcomp) {
-        const pitem = pcomp.doc.getMap("map").get("root");
-
-        if (pitem) {
-          const name = pitem.get("name");
-          if (id && name) {
-            const bin = Y.encodeStateAsUpdate(pcomp.doc as any);
-            scope_comps[id] = {
-              id: id,
-              name,
-              scope: {},
-              snapshot: await gzipAsync(bin),
-            };
-            if (isFirstLoaded) {
-              await serverWalkLoad(pitem, scope_comps, sync, loaded);
-            }
-          }
-        }
-      }
-    }
-
-    for (const [propName, prop] of Object.entries(comp.props || {})) {
-      if (prop.meta?.type === "content-element") {
-        const mprop = mcomp.get("props")?.get(propName);
-        if (mprop) {
-          const mcontent = ensurePropContent(mprop, propName);
-          if (mcontent) {
-            await serverWalkLoad(mcontent, scope_comps, sync, loaded);
-          }
-        }
-      }
-    }
-  }
-
-  for (const e of mitem.get("childs")?.map((e) => e) || []) {
-    await serverWalkLoad(e, scope_comps, sync, loaded);
-  }
-};
-
-export const serverWalkMap = (
-  p: {
-    sync: SyncConnection;
-    scope: IScope;
-    scope_comps: IScopeComp;
-    note: string;
-  },
-  arg: {
-    mitem: MItem;
-    parent_ids: string[];
-    parent_item: EdMeta["parent_item"];
-    parent_mcomp?: ArgParentMComp;
-    content_scope?: Record<string, string>;
-  }
-) => {
-  const { mitem, parent_item, parent_mcomp } = arg;
-
-  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;
-      }
-    }
-  }
-
-  const item = {} as unknown as IItem;
-  mapItem(mitem, item);
-  if (override_id) {
-    item.originalId = item.id;
-    item.id = override_id;
-  }
-
-  const item_comp = item.component;
-  const mitem_comp = mitem.get("component");
-  if (item_comp && item_comp.id) {
-    if (parent_item.id === "root") {
-      const scope = { props: {} } as Exclude<
-        ReturnType<typeof parseJs>,
-        undefined
-      >;
-      extractMItemProps({
-        item_comp,
-        mitem,
-        item,
-        content_scope: arg.content_scope,
-        mcomp: mitem,
-        scope,
-        mcontent(mcontent) {},
-      });
-      p.scope[item.id] = {
-        p: arg.parent_ids,
-        n: item.name,
-        s: scope,
-      };
-      const js = item.adv?.js;
-      if (typeof js === "string") {
-        const s = parseJs(js, {
-          item,
-          content_scope: arg.content_scope,
-        });
-        const ps = p.scope[item.id].s;
-        if (ps) {
-          if (s?.local) ps.local = s.local;
-          if (s?.passprop) ps.passprop = s.passprop;
-        }
-      }
-    } 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
-          >;
-
-          const parent_mcomp: ArgParentMComp = {
-            parent_ids: ["root", item.id],
-            id: item_comp.id,
-            mitem: mitem as MItem,
-            mcomp,
-            jsx_props: {},
-          };
-
-          const content_scope: Record<string, string> = {};
-
-          extractMItemProps({
-            item_comp,
-            item,
-            mitem,
-            mcomp,
-            scope,
-            content_scope: arg.content_scope,
-            mcontent(mcontent, prop_name) {
-              const id = mcontent.get("id");
-              if (id) {
-                let cid = ref_ids[id] || id;
-                parent_mcomp.jsx_props[prop_name] = {
-                  id: cid,
-                  mitem: mcontent,
-                  parent_mcomp: arg.parent_mcomp,
-                  parent_ids: [...arg.parent_ids, item.id],
-                };
-
-                content_scope[prop_name] = cid;
-              }
-            },
-          });
-
-          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, {
-              item,
-              content_scope: arg.content_scope,
-            });
-            if (res) {
-              scope.local = res.local;
-              scope.passprop = res.passprop;
-            }
-          }
-
-          if (scope) pcomp.scope[item.id].s = scope;
-
-          if (!p.scope[item.id]) {
-            p.scope[item.id] = {
-              p: arg.parent_ids,
-              n: item.name,
-              s: null,
-            };
-          }
-
-          if (scope) {
-            if (!p.scope[item.id].s) {
-              p.scope[item.id].s = scope;
-            } else {
-              p.scope[item.id].s = { ...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,
-              content_scope,
-            });
-          }
-        }
-      }
-      return;
-    }
-  }
-
-  if (arg.parent_mcomp) {
-    let id = item.originalId || item.id;
-    const pcomp = p.scope_comps[arg.parent_mcomp.id];
-
-    if (pcomp) {
-      pcomp.scope[id] = {
-        p: arg.parent_mcomp.parent_ids,
-        n: item.name,
-        s: null,
-      };
-
-      const js = item.adv?.js;
-      if (typeof js === "string") {
-        const scope = parseJs(js, {
-          item,
-          content_scope: arg.content_scope,
-        });
-        if (scope) pcomp.scope[id].s = scope;
-      }
-    }
-  } else {
-    if (!(item_comp && item_comp.id)) {
-      p.scope[item.id] = { p: arg.parent_ids, n: item.name, s: null };
-      const js = item.adv?.js;
-      if (typeof js === "string") {
-        const scope = parseJs(js, {
-          item,
-          content_scope: arg.content_scope,
-        });
-        if (scope) p.scope[item.id].s = scope;
-      }
-    }
-  }
-
-  const childs = mitem.get("childs")?.map((e) => e) || [];
-
-  for (const e of childs) {
-    serverWalkMap(p, {
-      mitem: e,
-      parent_item: { id: item.id, mitem: mitem as MItem },
-      parent_mcomp: !!arg.parent_mcomp
-        ? {
-            ...arg.parent_mcomp,
-            parent_ids: [...(arg.parent_mcomp?.parent_ids || []), item.id],
-          }
-        : undefined,
-      parent_ids: [...arg.parent_ids, item.id],
-      content_scope: arg.content_scope,
-    });
-  }
-};
-
-const mapItem = (mitem: MContent, item: any) => {
-  mitem.forEach((e, k) => {
-    if (k !== "childs") {
-      let val = e;
-      if (typeof e === "object" && e) {
-        if ((e as any).toJSON) {
-          val = e.toJSON() as any;
-        }
-      }
-      item[k] = val;
-    } else {
-      if (!item[k]) item[k] = [];
-      const childs = e as unknown as TypedArray<{}>;
-      childs.forEach((c) => {
-        item[k].push({ id: c.get("id") });
-      });
-    }
-  });
-};

app/srv/ws/sync/editor/parser/parse-js.ts

@@ -1,30 +1,7 @@
 import recast from "recast";
 import babel from "recast/parsers/babel-ts";
-import { IItem, MItem } from "../../../../../web/src/utils/types/item";
-import { EdMeta } from "../../../../../web/src/nova/ed/logic/ed-global";
 
-export type ArgParentMComp = EdMeta["parent_mcomp"] & {
+export const parseJs = (code: string) => {
-  id: string;
-  parent_ids: string[];
-  jsx_props: Record<
-    string,
-    {
-      id: string;
-      mitem: MItem;
-      parent_mcomp?: ArgParentMComp;
-      parent_ids: string[];
-    }
-  >;
-};
-
-export const parseJs = (
-  code: string,
-  arg: {
-    item: IItem;
-    content_scope?: Record<string, string>;
-  }
-) => {
-  const { item } = arg;
   const local = { name: "", value: "", index: 0 };
   const passprop: Record<string, { value: string; index: number }> = {};
   const result = {} as {

app/web/src/nova/vi/render/render.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from "react";
+import { FC, ReactNode, Suspense } from "react";
 import { IMeta } from "../../ed/logic/ed-global";
 import { ViContext, viParts } from "./parts";
 import { ViScript } from "./script";
@@ -12,11 +12,7 @@ export const ViRender: FC<{
   if (!meta) return null;
 
   if (meta.item.adv?.js || meta.item.component?.id) {
-    return (
+    return <ViScript ctx={ctx} meta={meta} />;
-      <ErrorBox>
-        <ViScript ctx={ctx} meta={meta} />
-      </ErrorBox>
-    );
   }
 
   const parts = viParts(meta);
@@ -31,7 +27,9 @@ export const ViRender: FC<{
 
           return (
             <ErrorBox key={id}>
-              <ViRender ctx={ctx} meta={ctx.meta[id]} />
+              <Suspense>
+                <ViRender ctx={ctx} meta={ctx.meta[id]} />
+              </Suspense>
             </ErrorBox>
           );
         });

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

@@ -2,20 +2,22 @@ import { FC, ReactNode } from "react";
 import { IMeta } from "../../ed/logic/ed-global";
 import { ViContext, viParts } from "./parts";
 import { ViRender } from "./render";
-import { ErrorBox } from "../utils/error-box";
 import { ViLocal } from "./script/local";
+import { ViPassProp } from "./script/passprop";
 import { viScopeUpward } from "./script/upward";
+import { ErrorBox } from "../utils/error-box";
 
 export const ViScript: FC<{ ctx: ViContext; meta: IMeta }> = ({
   ctx,
   meta,
 }) => {
   viEvalScript(ctx, meta);
-  if (meta.script) return <ErrorBox>{meta.script.el}</ErrorBox>;
+
+  if (meta.script) return meta.script.el;
   return null;
 };
 
-export const viEvalScript = async (ctx: ViContext, meta: IMeta) => {
+export const viEvalScript = (ctx: ViContext, meta: IMeta) => {
   const childs = meta.item.childs;
   const parts = viParts(meta);
 
@@ -35,12 +37,21 @@ export const viEvalScript = async (ctx: ViContext, meta: IMeta) => {
     children,
     props: parts.props,
     Local: ViLocal,
+    PassProp: ViPassProp,
+    ErrorBox: ErrorBox,
     newElement: () => {},
     render: (jsx: ReactNode) => {
-      meta.script = { el: jsx };
+      meta.script = {
+        el: jsx,
+      };
     },
   };
 
-  const fn = new Function(...Object.keys(arg), meta.item.adv?.jsBuilt || "");
+  const fn = new Function(
+    ...Object.keys(arg),
+    `// [${meta.item.type}] ${meta.item.name}: ${meta.item.id} 
+${meta.item.adv?.jsBuilt || ""}
+  `
+  );
   fn(...Object.values(arg));
 };

app/web/src/nova/vi/render/script/local.tsx

@@ -1,5 +1,13 @@
-import { FC, ReactNode } from "react";
+import { ReactNode } from "react";
+
+export const ViLocal = <T extends Record<string, any>>(arg: {
+  children: ReactNode;
+  name: string;
+  value: T;
+  hook: (local: T) => void;
+  effect: (local: T) => void | Promise<void>;
+}) => {
+  const { children } = arg;
 
-export const ViLocal: FC<{ children: ReactNode }> = ({ children }) => {
   return children;
 };

app/web/src/nova/vi/render/script/passprop.tsx

@@ -0,0 +1,5 @@
+import { FC, ReactNode } from "react";
+
+export const ViPassProp: FC<{ children: ReactNode }> = ({ children }) => {
+  return children;
+};

app/web/src/nova/vi/render/script/upward.ts

@@ -4,12 +4,14 @@ import { ViContext } from "../parts";
 export const viScopeUpward = (ctx: ViContext, meta: IMeta) => {
   let cur = meta;
 
-  // while (cur.parent) {
+  if (cur && cur.parent) {
-  //   if (cur.scope.def) {
+    while (cur.parent) {
-  //     console.log(cur.item.id, cur.item.name, cur.scope);
+      console.log(cur.scope);
-  //   }
+
-  //   cur = ctx.meta[cur.parent.id];
+      if (!ctx.meta[cur.parent.id]) break;
-  // }
+      cur = ctx.meta[cur.parent.id];
+    }
+  }
 
   return {};
 };

app/web/src/nova/vi/root.tsx

@@ -2,6 +2,7 @@ import { FC } from "react";
 import { ViContext } from "./render/parts";
 import { ViRender } from "./render/render";
 import { useLocal } from "web-utils";
+import { ErrorBox } from "./utils/error-box";
 
 export const ViRoot: FC<{
   ctx: ViContext;
@@ -16,7 +17,11 @@ export const ViRoot: FC<{
         const meta = ctx.meta[id];
         if (meta) {
           if (Element) {
-            return <ViRender key={meta.item.id} ctx={ctx} meta={meta} />;
+            return (
+              <ErrorBox key={meta.item.id}>
+                <ViRender ctx={ctx} meta={meta} />
+              </ErrorBox>
+            );
           }
         }
         return null;

app/web/src/nova/vi/utils/error-box.tsx

@@ -7,7 +7,7 @@ export const ErrorBox = withErrorBoundary(
     children,
     meta,
     id,
-    silent,
+    silent = true,
   }: {
     children: any;
     meta?: IMeta;

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

@@ -5,7 +5,9 @@ import { ErrorBox } from "./utils/error-box";
 export const Vi: typeof ViRoot = (props) => {
   return (
     <ErrorBox>
-      <Suspense>{/* <ViRoot {...props} /> */}</Suspense>
+      <Suspense>
+        <ViRoot {...props} />
+      </Suspense>
     </ErrorBox>
   );
 };

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

@@ -20,6 +20,14 @@ export const instantiate = (
   }
 
   walkChild(newitem, ref_ids);
+
+  for (const key of Object.keys(item)) {
+    delete (item as any)[key];
+  }
+
+  for (const [k, v] of Object.entries(newitem)) {
+    (item as any)[k] = v;
+  }
 };
 
 const walkChild = (item: IItem, ref_ids: Record<string, string>) => {

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

@@ -19,6 +19,13 @@ export const genMeta = (p: GenMetaP, arg: GenMetaArg) => {
       return;
     }
 
+    let scope: IMeta["scope"] = {};
+    if (p.smeta) {
+      if (p.smeta[item.id] && p.smeta[item.id].scope) {
+        scope.def = p.smeta[item.id].scope;
+      }
+    }
+
     const meta: IMeta = {
       item: simplifyItemChild(item),
       jsx_prop: arg.jsx_prop,
@@ -27,7 +34,7 @@ export const genMeta = (p: GenMetaP, arg: GenMetaArg) => {
         instance_id: arg.parent?.instance?.id,
         comp_id: arg.parent?.comp?.id,
       },
-      scope: {},
+      scope,
     };
 
     if (p.on?.visit) {

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

@@ -1,4 +1,5 @@
 import { ReactNode } from "react";
+import { parseJs } from "../../../../../../srv/ws/sync/editor/parser/parse-js";
 import { IContent } from "../../../../utils/types/general";
 import { IItem, MItem } from "../../../../utils/types/item";
 
@@ -58,15 +59,6 @@ export type IMeta = {
   };
   scope: {
     val?: any;
-    def?: {
+    def?: ReturnType<typeof parseJs>;
-      props?: Record<string, { value: string; visible: boolean }>;
-      local?: {
-        name: string;
-        idx: number;
-        idxval: Record<string, number>;
-        src: string;
-      };
-      pass?: Record<string, { src: string; idx: number }>;
-    };
   };
 };

app/web/src/utils/types/meta-fn.ts

@@ -12,10 +12,10 @@ export type FNLayout = {
 export type FMLayout = TypedMap<FNLayout>;
 
 export type FNAdv = {
-  js?: Y.Text | string;
+  js?: string;
   jsBuilt?: string;
-  css?: Y.Text | string;
+  css?: string;
-  html?: Y.Text | string;
+  html?: string;
 };
 
 export type FMAdv = TypedMap<FNAdv>;