fix runtime comp

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

@@ -7,7 +7,7 @@ import { genMeta } from "../../../vi/meta/meta";
 import { IRoot } from "../../../../utils/types/root";
 import { IContent } from "../../../../utils/types/general";
 import { initLoadComp } from "../../../vi/meta/comp/init-comp-load";
-import { loadCompSnapshot } from "../../logic/comp/load";
+import { loadCompSnapshot, loadComponent } from "../../logic/comp/load";
 import { IItem } from "../../../../utils/types/item";
 import { mainStyle } from "./main";
 import { Loading } from "../../../../utils/ui/loading";

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

@@ -1,10 +1,11 @@
-import { useGlobal, useLocal } from "web-utils";
+import { deepClone, useGlobal, useLocal } from "web-utils";
 import { Vi } from "../../../vi/vi";
 import { isMetaActive } from "../../logic/active/is-meta.active";
 import { EDGlobal, IMeta, PG, active } from "../../logic/ed-global";
 import { mainPerItemVisit } from "./main-per-item";
 import { w } from "../../../../utils/types/general";
 import parseUA from "ua-parser-js";
+import { loadComponent } from "../../logic/comp/load";
 
 export const EdMain = () => {
   const p = useGlobal(EDGlobal, "EDITOR");
@@ -62,6 +63,17 @@ export const EdMain = () => {
           entry={p.page.entry}
           api={p.script.api}
           db={p.script.db}
+          comp_load={async (comp_id) => {
+            let comp = p.comp.loaded[comp_id];
+            if (comp) {
+              return comp;
+            }
+
+            await loadComponent(p, comp_id);
+            comp = p.comp.loaded[comp_id];
+
+            return deepClone(comp);
+          }}
           script={{ init_local_effect: p.script.init_local_effect }}
           visit={(meta, parts) => {
             return mainPerItemVisit(p, meta, parts);

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

@@ -50,7 +50,14 @@ export const EdSidePropInstance: FC<{ meta: IMeta }> = ({ meta }) => {
 
   const item = _meta?.item as IItem;
   if (!item) return <>Warning: Item not found</>;
-  if (!_meta.mitem) return <>Warning: MItem Not Found</>;
+  if (!_meta.mitem)
+    return (
+      <div className="p-3 text-sm space-y-1 flex flex-col">
+        <span>Warning: MItem Not Found</span>
+        <hr />
+        <span>This item is created on runtime</span>
+      </div>
+    );
 
   let filtered = [] as { mprop: FMCompDef; cprop: FNCompDef; name: string }[];
   const mprops = _meta.mitem?.get("component")?.get("props");
@@ -76,11 +83,15 @@ export const EdSidePropInstance: FC<{ meta: IMeta }> = ({ meta }) => {
           const arg: any = { ...active.scope };
           if (meta.item.script?.props) {
             for (const [k, v] of Object.entries(meta.item.script?.props)) {
-              eval(`try { arg.${k} = ${v.value} } catch(e) { console.error("arg", e); }`);
+              eval(
+                `try { arg.${k} = ${v.value} } catch(e) { console.error("arg", e); }`
+              );
             }
           } else if (meta.item.component) {
             for (const [k, v] of Object.entries(meta.item.component.props)) {
-              eval(`try { arg.${k} = ${v.valueBuilt} } catch(e) { console.error("arg", e); }`);
+              eval(
+                `try { arg.${k} = ${v.valueBuilt} } catch(e) { console.error("arg", e); }`
+              );
             }
           }
 

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

@@ -1,6 +1,10 @@
+import { set as setkv } from "idb-keyval";
 import { FC, useState } from "react";
 import { validate } from "uuid";
 import { GlobalContext, useLocal } from "web-utils";
+import { IContent } from "../../utils/types/general";
+import { IItem } from "../../utils/types/item";
+import { IRoot } from "../../utils/types/root";
 import { DeadEnd } from "../../utils/ui/deadend";
 import { Loading } from "../../utils/ui/loading";
 import { Vi } from "../vi/vi";
@@ -10,8 +14,6 @@ import { loadPage, loadUrls } from "./base/page";
 import { detectResponsiveMode } from "./base/responsive";
 import { initBaseRoute, rebuildMeta } from "./base/route";
 import { w } from "./w";
-import { IRoot } from "../../utils/types/root";
-import { IContent } from "../../utils/types/general";
 
 export const isPreview = () => {
   return (
@@ -165,6 +167,28 @@ export const Root = () => {
             site_id={base.site.id}
             db={base.site.db}
             api={base.site.api}
+            comp_load={async (comp_id) => {
+              const comp = base.comp;
+              if (comp.list[comp_id]) {
+                return comp.list[comp_id];
+              }
+              try {
+                const res = (await (
+                  await fetch(base.url`_prasi/comp`, {
+                    method: "POST",
+                    body: JSON.stringify({ ids: [comp_id] }),
+                  })
+                ).json()) as Record<string, IItem>;
+                for (const [id, item] of Object.entries(res)) {
+                  comp.pending.delete(id);
+                  comp.list[id] = item;
+
+                  await setkv(`comp-${id}`, item);
+                }
+              } catch (e) {}
+
+              return comp.list[comp_id];
+            }}
             layout={
               base.layout.id && base.layout.root && base.layout.meta
                 ? {

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

@@ -1,22 +1,21 @@
 import { get } from "idb-keyval";
+import parseUA from "ua-parser-js";
 import init, { decompress } from "wasm-gzip";
 import { useGlobal } from "web-utils";
 import { w } from "../../utils/types/general";
 import { IRoot } from "../../utils/types/root";
+import { DeadEnd } from "../../utils/ui/deadend";
 import { Loading } from "../../utils/ui/loading";
 import { EDGlobal, PG } from "../ed/logic/ed-global";
 import {
   loadPageMetaCache,
   reloadLayout,
-  reloadPage,
+  reloadPage
-  savePageMetaCache,
 } from "../ed/logic/ed-route";
 import { loadSite } from "../ed/logic/ed-site";
-import { treeCacheBuild, treeRebuild } from "../ed/logic/tree/build";
+import { treeCacheBuild } from "../ed/logic/tree/build";
 import { nav } from "./render/script/extract-nav";
 import { Vi } from "./vi";
-import parseUA from "ua-parser-js";
-import { DeadEnd } from "../../utils/ui/deadend";
 
 const decoder = new TextDecoder();
 export const ViPreview = (arg: { pathname: string }) => {

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

@@ -1,4 +1,5 @@
 import { IContent } from "../../../utils/types/general";
+import { IItem } from "../../../utils/types/item";
 import { IRoot } from "../../../utils/types/root";
 import { IMeta } from "../../ed/logic/ed-global";
 import { viParts } from "./parts";
@@ -36,6 +37,11 @@ export const ViGlobal = {
     cur: { id: "" },
     navs: {} as Record<string, Set<string>>,
   },
+  comp: {
+    load: (async () => {
+      return null as any;
+    }) as (comp_id: string) => Promise<null | IItem>,
+  },
   on_preload: undefined as
     | undefined
     | ((arg: {

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

@@ -1,16 +1,18 @@
 import get from "lodash.get";
-import { ReactNode, isValidElement } from "react";
+import { ReactNode, isValidElement, useState } from "react";
 import { IMeta } from "../../../ed/logic/ed-global";
 import { VG } from "../global";
 import { ViRender } from "../render";
+import { scanComponent } from "../../../prod/base/component";
 
 export const createViPassProp = (
-  vi: { meta: VG["meta"]; render?: () => void },
+  vi: { meta: VG["meta"]; render?: () => void; comp: VG["comp"] },
   is_layout: boolean,
   meta: IMeta,
   passprop: any
 ) => {
   return (arg: Record<string, any> & { children: ReactNode }) => {
+    const [_, render] = useState({});
     if (!meta.item.script) {
       meta.item.script = {};
     }
@@ -91,7 +93,26 @@ export const createViPassProp = (
     ) {
       const child_id = (arg.children as any).id;
       if (child_id) {
-        const meta = vi.meta[child_id];
+        let meta = vi.meta[child_id];
+
+        if (!meta) {
+          vi.meta[child_id] = { item: arg.children as any };
+          meta = vi.meta[child_id];
+
+          const comp_id = meta.item.component?.id;
+          if (comp_id) {
+            vi.comp.load(comp_id).then((comp) => {
+              if (comp) {
+                for (const [k, v] of Object.entries(comp)) {
+                  const item = meta.item as any;
+                  if (!item[k]) item[k] = v;
+                }
+                render({})
+              }
+            });
+          }
+        }
+
         return <ViRender is_layout={is_layout} meta={meta} passprop={_pass} />;
       }
     }

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

@@ -7,6 +7,7 @@ import { render_stat } from "./render/render";
 import { nav } from "./render/script/extract-nav";
 import { ViRoot } from "./root";
 import { ErrorBox } from "./utils/error-box";
+import { IItem } from "../../utils/types/item";
 
 type PRELOAD = Exclude<VG["on_preload"], undefined>;
 type PRELOAD_ARGS = Parameters<PRELOAD>[0];
@@ -15,7 +16,7 @@ const w = window as any;
 export const Vi: FC<{
   meta: Record<string, IMeta>;
   mode: "mobile" | "desktop";
-  comp_load?: (comp_id: string) => Promise<void>;
+  comp_load: (comp_id: string) => Promise<IItem>;
   entry: string[];
   api_url: string;
   site_id: string;
@@ -43,11 +44,13 @@ export const Vi: FC<{
   on_status_changed,
   on_preload,
   layout,
+  comp_load,
 }) => {
   const vi = useGlobal(ViGlobal, "VI");
   vi.mode = mode;
   vi.entry = entry;
   vi.on_preload = on_preload;
+  vi.comp.load = comp_load;
 
   w.siteurl = (pathname: string, forceOriginal?: boolean) => {
     if (pathname.startsWith("http://") || pathname.startsWith("https://"))