fix component

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

@@ -67,7 +67,7 @@ export const page_load: SAction["page"]["load"] = async function (
             }
           }
         }
-      }, 500);
+      }, 300);
 
       for (const f of found) {
         const client_id = f.client_id;

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

@@ -1,3 +1,4 @@
+import { g } from "utils/global";
 import { IItem } from "../../../../web/src/utils/types/item";
 import { conns } from "../entity/conn";
 import { docs } from "../entity/docs";
@@ -28,23 +29,47 @@ export const loadComponent = async (comp_id: string, sync?: SyncConnection) => {
 
       const sv_local = await gzipAsync(update);
 
-      const client_ids = user.active
+      const found = user.active.findAll({ comp_id: comp_id });
-        .findAll({ comp_id: comp_id })
-        .map((e) => e.client_id);
 
-      client_ids.forEach((client_id) => {
+      if (!g.preview_comp_timeout) g.preview_comp_timeout = {};
+      clearTimeout(g.preview_comp_timeout[comp_id]);
+      g.preview_comp_timeout[comp_id] = setTimeout(() => {
+        let json = doc.toJSON();
+        for (const f of found) {
+          const client_id = f.client_id;
+          const ws = conns.get(client_id)?.ws;
+
+          if (client_id && ws) {
+            if (!f.user_id) {
+              sendWS(ws, {
+                type: SyncType.Event,
+                event: "comp_changed",
+                data: json,
+              });
+            }
+          }
+        }
+      }, 300);
+
+      for (const f of found) {
+        const client_id = f.client_id;
+        const ws = conns.get(client_id)?.ws;
+        if (client_id && ws) {
+          if (!!f.user_id) {
+            if (ws) {
               if (origin !== um) {
                 if (client_id === origin) return;
               }
 
-        const ws = conns.get(client_id)?.ws;
-        if (ws)
               sendWS(ws, {
                 type: SyncType.Event,
                 event: "remote_svlocal",
                 data: { type: "comp", sv_local, id: comp_id },
               });
-      });
+            }
+          }
+        }
+      }
     });
   };
 

app/srv/ws/sync/preview/live-reload.ts

@@ -8,7 +8,9 @@ export const previewLiveReload = (
     | { mode: "init"; data: { client_id: string; site_id: string } }
     | {
         mode: "listen";
-        data: { type: "page"; id: string; client_id: string };
+        data:
+          | { type: "page"; id: string; client_id: string }
+          | { type: "comp"; ids: string[]; client_id: string };
       }
 ) => {
   if (msg.mode === "init") {
@@ -22,6 +24,13 @@ export const previewLiveReload = (
         client_id: msg.data.client_id,
         page_id: msg.data.id,
       });
+    } else if (msg.data.type === "comp") {
+      for (const id of msg.data.ids) {
+        user.active.add({
+          client_id: msg.data.client_id,
+          comp_id: id,
+        });
+      }
     }
   }
 };

app/web/src/nova/prod/base/component.tsx

@@ -1,8 +1,9 @@
-import { get, set } from "idb-keyval";
+import { set } from "idb-keyval";
 import { IContent } from "../../../utils/types/general";
 import { IItem } from "../../../utils/types/item";
 import { ISection } from "../../../utils/types/section";
 import { base } from "./base";
+import { listenChanges } from "./live-reload/dev-live-reload";
 
 export const scanComponent = async (items: IContent[], from_root?: boolean) => {
   const comp = base.comp;
@@ -15,6 +16,7 @@ export const scanComponent = async (items: IContent[], from_root?: boolean) => {
 
   const pending = Object.keys(comp.pending);
   if (pending.length > 0) {
+    listenChanges({ type: "comp", ids: pending });
     try {
       const res = (await (
         await fetch(base.url`_prasi/comp`, {
@@ -42,7 +44,6 @@ export const scanComponent = async (items: IContent[], from_root?: boolean) => {
 };
 
 const scanSingle = (item: IItem | ISection, from_root?: boolean) => {
- 
   const comp = base.comp;
   if (item.type === "item") {
     const comp_id = item.component?.id;

app/web/src/nova/prod/base/live-reload/dev-live-reload.ts

@@ -77,6 +77,13 @@ export const initDevLiveReload = () => {
             rebuildMeta(p.meta, root);
             base.page.cache[p.id] = p;
             w.prasiContext.render();
+          } else if (msg.event === "comp_changed") {
+            const id = msg.data.map.id;
+            base.comp.list[id] = msg.data.map.root;
+            const p = base.page.cache[base.page.id];
+            await scanComponent([base.comp.list[id]]);
+            rebuildMeta(p.meta, p.root);
+            w.prasiContext.render();
           } else if (msg.event === "code_changes") {
             const { mode, ts, status } = msg.data;
             if (mode === "frontend") {

app/web/src/nova/prod/base/page.tsx

@@ -1,6 +1,6 @@
-import { base } from "./base";
+import { get } from "idb-keyval";
 import { IRoot } from "../../../utils/types/root";
-import { get, set } from "idb-keyval";
+import { base } from "./base";
 
 export const loadPage = (page_id: string) => {
   return new Promise<{

pkgs/core/utils/global.ts

@@ -66,5 +66,6 @@ export const g = global as unknown as {
   route_cache: Record<string, { br?: any; gzip?: any }>;
   main_cache: Record<string, { content: any; type: string }>;
   br: BrotliWasmType;
-  preview_page_timeout: Record<string, Timer>
+  preview_page_timeout: Record<string, Timer>;
+  preview_comp_timeout: Record<string, Timer>;
 };