fix props

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

@@ -33,7 +33,8 @@ 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,
       isOpen: false,
@@ -49,7 +50,11 @@ export const EdPropInstanceOptions: FC<{
       open: false,
       pendingVal: null as any,
       changedTimeout: null as any,
-  });
+    },
+    ({ setDelayedRender }) => {
+      setDelayedRender(true);
+    }
+  );
   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;