wip fix error

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

@@ -1,13 +1,75 @@
+import { Doc } from "yjs";
+import { MContent } from "../../../../web/src/utils/types/general";
+import { MItem } from "../../../../web/src/utils/types/item";
+import { MRoot } from "../../../../web/src/utils/types/root";
 import { SAction } from "../actions";
+import { docs } from "../entity/docs";
+import { gunzipAsync } from "../entity/zlib";
 import { SyncConnection } from "../type";
-
+import { transform } from "esbuild";
+const decoder = new TextDecoder();
 export const code_edit: SAction["code"]["edit"] = async function (
   this: SyncConnection,
   arg
 ) {
-  if (arg.type === 'adv') {
-    const { item_id, mode, comp_id, page_id } = arg;
+  if (arg.type === "adv") {
+    const { item_id, mode, comp_id, page_id, value } = arg;
+    const src = decoder.decode(await gunzipAsync(value));
+
+    let root = undefined as undefined | MRoot | MItem;
+    let doc = undefined as undefined | Doc;
+    if (page_id) {
+      const ref = docs.page[page_id];
+      if (ref) {
+        root = ref.doc.getMap("map").get("root");
+        doc = ref.doc as Doc;
+      }
+    }
+
+    if (root) {
+      const mitem = findId(root, item_id);
+
+      if (mitem) {
+        const adv = mitem.get("adv");
+
+        if (adv) {
+          doc?.transact(async () => {
+            adv.set(mode, src);
+
+            if (mode === "js") {
+              const res = await transform(`render(${src})`, {
+                jsx: "transform",
+                format: "cjs",
+                loader: "tsx",
+                minify: true,
+                sourcemap: "inline",
+              });
+              adv.set("jsBuilt", res.code);
+            }
+          });
+        }
+      }
+    }
   }
 
   return false;
 };
+
+const findId = (mitem: MContent | MRoot, id: string) => {
+  if ((mitem as MItem).get("id") === id) {
+    return mitem as MItem;
+  }
+
+  const childs = (mitem as MItem).get("childs");
+  if (childs) {
+    let found: null | MItem = null;
+    childs.forEach((child) => {
+      const f = findId(child, id);
+      if (f) {
+        found = f;
+      }
+    });
+
+    if (found) return found;
+  }
+};

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

@@ -153,15 +153,24 @@ export const ScriptMonaco = () => {
         { css: "scss", js: "typescript", html: "html" }[p.ui.popup.script.mode]
       }
       onChange={(val) => {
+        clearTimeout(scriptEdit.timeout);
         scriptEdit.timeout = setTimeout(() => {
           const meta = getMetaById(p, active.item_id);
           const type = p.ui.popup.script.mode;
           if (meta && meta.mitem) {
+            let arg = {} as any;
+            if (active.comp_id) {
+              arg.comp_id = active.comp_id;
+            } else {
+              arg.page_id = p.page.cur.id;
+            }
+
             p.sync.code.edit({
               type: "adv",
               mode: type,
               item_id: active.item_id,
               value: compress(encode.encode(val || "")),
+              ...arg,
             });
           }
         }, 1000);

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

@@ -2,8 +2,9 @@ import { FC, useState } from "react";
 import { useGlobal } from "web-utils";
 import { ViewGlobal } from "../../logic/global";
 import { ViewMetaRender } from "./render";
-import { ViewMetaScript } from "./script";
+import { ViewBoundedScript, ViewMetaScript } from "./script";
 import { compPropVal } from "./script/comp-propval";
+import { ErrorBox } from "./script/error-box";
 
 export const ViewMeta: FC<{ id: string; scopeIndex?: Record<string, any> }> = ({
   id,
@@ -30,8 +31,15 @@ export const ViewMeta: FC<{ id: string; scopeIndex?: Record<string, any> }> = ({
   }
 
   if (item.adv) {
-    if (item.adv.js && item.adv.jsBuilt) {
-      return <ViewMetaScript v={v} item={item} scopeIndex={scopeIndex} />;
+    if (item.adv.js && item.adv.jsBuilt && typeof item.adv.js === "string") {
+      return (
+        <ViewBoundedScript
+          js={item.adv.js}
+          v={v}
+          item={item}
+          scopeIndex={scopeIndex}
+        />
+      );
     }
   }
 

app/web/src/nova/view/render/meta/script.tsx

@@ -12,9 +12,39 @@ import { createLocal } from "./script/create-local";
 import { createPassProp } from "./script/create-pass-prop";
 import { ErrorBox } from "./script/error-box";
 import { mergeScopeUpwards } from "./script/merge-upward";
+import { useLocal } from "web-utils";
 
+const renderLimit = {} as Record<
+  string,
+  Record<string, { ts: number; count: number; cache: ReactNode }>
+>;
+
+export const ViewBoundedScript: FC<{
+  v: VG;
+  item: IItem | IText | ISection;
+  scopeIndex?: Record<string, any>;
+  js: string;
+}> = ({ item, v, scopeIndex, js }) => {
+  const local = useLocal({ js: "" });
+
+  useEffect(() => {
+    if (local.js !== js) {
+      local.js = js;
+      local.render();
+    }
+  }, [js]);
+
+  if (local.js !== js) {
+    return null;
+  }
+
+  return (
+    <ErrorBox silent={true}>
+      <ViewMetaScript v={v} item={item} scopeIndex={scopeIndex} />
+    </ErrorBox>
+  );
+};
 
-const renderLimit = {} as Record<string, Record<string, { ts: number, count: number; cache: ReactNode }>>;
 export const ViewMetaScript: FC<{
   v: VG;
   item: IItem | IText | ISection;
@@ -30,40 +60,41 @@ export const ViewMetaScript: FC<{
   });
 
   if (!renderLimit[v.current.page_id]) {
-    renderLimit[v.current.page_id] = {}
+    renderLimit[v.current.page_id] = {};
   }
 
   if (!renderLimit[v.current.page_id][item.id]) {
     renderLimit[v.current.page_id][item.id] = {
       ts: Date.now(),
       count: 1,
-      cache: null
-    }
+      cache: null,
+    };
   }
 
   if (renderLimit[v.current.page_id][item.id].ts - Date.now() < 100) {
-    renderLimit[v.current.page_id][item.id].count++
+    renderLimit[v.current.page_id][item.id].count++;
   } else {
     renderLimit[v.current.page_id][item.id].ts = Date.now();
     renderLimit[v.current.page_id][item.id].count = 1;
   }
 
   if (renderLimit[v.current.page_id][item.id].count > 100) {
-
-    let js = '';
-    if (typeof item.adv?.js === 'string') {
+    let js = "";
+    if (typeof item.adv?.js === "string") {
       js = item.adv.js;
     }
-    console.warn(`Maximum render limit (100 render in 100ms) reached in item [${item.name}]:\n${js.length > 30 ? js.substring(0, 30) + '...' : js}`)
+    console.warn(
+      `Maximum render limit (100 render in 100ms) reached in item [${
+        item.name
+      }]:\n${js.length > 30 ? js.substring(0, 30) + "..." : js}`
+    );
     return renderLimit[v.current.page_id][item.id].cache;
   }
 
-
   const children = <ViewMetaChildren key={item.id} meta={meta} />;
   let args = {};
 
   if (js && meta) {
-    try {
     if (!meta.memoize) {
       meta.memoize = {};
     }
@@ -132,11 +163,7 @@ export const ViewMetaScript: FC<{
       },
       useEffect: useEffect,
       render: (jsx: ReactNode) => {
-          output.jsx = (
-            <ErrorBox>
-              <Suspense>{jsx}</Suspense>
-            </ErrorBox>
-          );
+        output.jsx = jsx;
         renderLimit[v.current.page_id][item.id].cache = output.jsx;
       },
     };
@@ -157,15 +184,5 @@ export const ViewMetaScript: FC<{
       });
     }
     return output.jsx;
-    } catch (e) {
-      console.warn(e);
-      console.warn(
-        (
-          `ERROR in ${item.type} [${item.name}]:\n ` +
-          ((item.adv?.js || "") as any)
-        ).trim()
-      );
-      console.warn(`Available var:`, args, `\n\n`);
-    }
   }
 };

app/web/src/nova/view/render/meta/script/error-box.tsx

@@ -4,10 +4,20 @@ import { EdMeta } from "../../../../ed/logic/ed-global";
 import { ViewGlobal } from "../../../logic/global";
 
 export const ErrorBox = withErrorBoundary(
-  ({ children, meta, id }: { children: any; meta?: EdMeta; id?: string }) => {
+  ({
+    children,
+    meta,
+    id,
+    silent,
+  }: {
+    children: any;
+    meta?: EdMeta;
+    id?: string;
+    silent?: boolean;
+  }) => {
     const local = useLocal({ retrying: false });
     const [error, resetError] = useErrorBoundary((error, errorInfo) => {
-      console.warn(error);
+      if (silent !== true) console.warn(error);
     });
 
     let _meta = meta;