fix props

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

@@ -33,23 +33,28 @@ export const EdPropInstanceOptions: FC<{
   labelClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
 }> = ({ name, mprop, cprop, label, labelClick, meta }) => {
   const prop = mprop.toJSON() as FNCompDef;
-  const local = useLocal({
+  const local = useLocal(
-    codeEditing: false,
+    {
-    loading: true,
+      codeEditing: false,
-    isOpen: false,
+      loading: true,
-    val: "",
+      isOpen: false,
-    metaFnInit: false,
+      val: "",
-    metaFn: null as null | (() => Promise<MetaOption[]>),
+      metaFnInit: false,
-    checkbox: {
+      metaFn: null as null | (() => Promise<MetaOption[]>),
-      width: 0,
+      checkbox: {
+        width: 0,
+      },
+      options: [] as MetaOption[],
+      optDeps: [] as any[],
+      resetOnDeps: false as boolean | (() => any[]),
+      open: false,
+      pendingVal: null as any,
+      changedTimeout: null as any,
     },
-    options: [] as MetaOption[],
+    ({ setDelayedRender }) => {
-    optDeps: [] as any[],
+      setDelayedRender(true);
-    resetOnDeps: false as boolean | (() => any[]),
+    }
-    open: false,
+  );
-    pendingVal: null as any,
-    changedTimeout: null as any,
-  });
   const p = useGlobal(EDGlobal, "EDITOR");
 
   config.opt[name] = () => {
@@ -97,6 +102,7 @@ export const EdPropInstanceOptions: FC<{
             if (v.valueBuilt && v.valueBuilt.length > 3) {
               if (v.valueBuilt.startsWith(`const _jsxFileName = "";`)) {
                 v.valueBuilt = `(() => { ${v.valueBuilt.replace(
+                  `const _jsxFileName = "";`,
                   `const _jsxFileName = ""; return `
                 )} })()`;
               }

app/web/src/nova/vi/render/script/eval-prop.tsx

@@ -139,7 +139,15 @@ export const viEvalProps = (
             }
           }
 
-          const js = prop.valueBuilt || "";
+          let js = prop.valueBuilt || "";
+
+          if (js.startsWith(`const _jsxFileName = "";`)) {
+            js = `(() => { ${js.replace(
+              `const _jsxFileName = "";`,
+              `const _jsxFileName = ""; return `
+            )} })()`;
+          }
+
           const src = replaceWithObject(js, replacement) || "";
 
           const fn = new Function(

pkgs/web-utils/src/use-local.ts

@@ -4,6 +4,7 @@ export const useLocal = <T extends object>(
   data: T,
   effect?: (arg: {
     init: boolean;
+    setDelayedRender: (arg: boolean) => void;
   }) => Promise<void | (() => void)> | void | (() => void),
   deps?: any[]
 ): {
@@ -19,12 +20,20 @@ export const useLocal = <T extends object>(
     _loading: {} as any, 
     lastRender: 0,
     lastRenderCount: 0,
+    delayedRender: false,
+    delayedRenderTimeout: null as any,
   });
   const local = _.current;
 
   useEffect(() => {
     local.ready = true;
-    if (effect) effect({ init: true });
+    if (effect)
+      effect({
+        init: true,
+        setDelayedRender(arg) {
+          local.delayedRender = arg;
+        },
+      });
   }, []);
 
   if (local.ready === false) {
@@ -32,6 +41,17 @@ export const useLocal = <T extends object>(
 
     local.data.render = () => {
       if (local.ready) {
+        if (local.delayedRender) {
+          if (Date.now() - local.lastRender > 100) {
+            local.lastRender = Date.now();
+            _render({});
+          } else {
+            clearTimeout(local.delayedRenderTimeout);
+            local.delayedRenderTimeout = setTimeout(local.data.render, 50);
+          }
+          return;
+        }
+
         if (Date.now() - local.lastRender < 300) {
           local.lastRenderCount++;
         } else {
@@ -39,7 +59,9 @@ export const useLocal = <T extends object>(
         }
 
         if (local.lastRenderCount > 300) {
-          throw new Error("local.render more than 300 times in less than 300ms");
+          throw new Error(
+            "local.render more than 300 times in less than 300ms"
+          );
         }
 
         local.lastRender = Date.now();
@@ -54,7 +76,12 @@ export const useLocal = <T extends object>(
 
           if (effect) {
             setTimeout(() => {
-              effect({ init: false });
+              effect({
+                init: false,
+                setDelayedRender(arg) {
+                  local.delayedRender = arg;
+                },
+              });
             });
           }
           break;