fix on change

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

@@ -175,6 +175,9 @@ export const code_edit: SAction["code"]["edit"] = async function (
                 if (prop_kind === "value") {
                   mprop.set("value", src);
                   mprop.set("valueBuilt", res.code.substring(6));
+                } else if (prop_kind === "onChange") {
+                  mprop.set("onChange", src);
+                  mprop.set("onChangeBuilt", res.code.substring(6));
                 } else if (prop_kind === "gen") {
                   mprop.set("gen", src);
                   mprop.set("genBuilt", res.code.substring(6));

app/web/src/nova/ed/logic/ed-global.ts

@@ -29,7 +29,13 @@ export const EmptySite = {
 export type ESite = typeof EmptySite;
 export type EPage = typeof EmptyPage;
 export type EComp = typeof EmptyComp;
-export type PropFieldKind = "visible" | "gen" | "value" | "option" | "typings";
+export type PropFieldKind =
+  | "onChange"
+  | "visible"
+  | "gen"
+  | "value"
+  | "option"
+  | "typings";
 export type ISingleScope = {
   p: string[];
   n: string;

app/web/src/nova/ed/panel/popup/script/default-val.tsx

@@ -38,6 +38,13 @@ export const edMonacoDefaultVal = (p: PG, adv: FNAdv, mitem: MItem) => {
 
         if (kind === "value") {
           val = mprop.get("value");
+        } else if (kind === "onChange") {
+          val =
+            mprop.get("onChange") ||
+            `\
+({ name, value, item }: { name: string; value: string; item: PrasiItem }) => {
+  // on prop changed
+}`;
         } else if (kind === "gen") {
           val =
             mprop.get("gen") ||

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

@@ -17,6 +17,7 @@ import { declareScope } from "./scope/scope";
 // @ts-ignore
 import { FNCompDef } from "../../../../../utils/types/meta-fn";
 import { editorLocalValue } from "../../../../vi/render/script/local";
+import { propInstanceOnChange } from "../../side/prop-instance/on-change";
 
 const scriptEdit = {
   timeout: null as any,
@@ -342,6 +343,11 @@ export const EdScriptMonaco: FC<{}> = () => {
                 value: compress(encode.encode(value || "")),
                 ...arg,
               });
+
+              if (p.ui.popup.script.prop_kind === "value") {
+                propInstanceOnChange(p, p.ui.popup.script.prop_name, value);
+              }
+
               if (typeof code_result === "string") {
                 p.ui.popup.script.typings.status = "error";
                 p.ui.popup.script.typings.err_msg = code_result;

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

@@ -0,0 +1,35 @@
+import { IItem } from "../../../../../utils/types/item";
+import { FNComponent } from "../../../../../utils/types/meta-fn";
+import { devItem, PrasiEdit } from "../../../../vi/render/script/item-dev";
+import { getActiveMeta } from "../../../logic/active/get-meta";
+import { PG } from "../../../logic/ed-global";
+
+export const propInstanceOnChange = (p: PG, name: string, value: any) => {
+  const meta = getActiveMeta(p);
+
+  if (meta && meta.item.component) {
+    const comp = p.comp.list[meta.item.component.id]?.doc
+      .getMap("map")
+      .get("root")
+      ?.get("component")
+      ?.toJSON() as FNComponent;
+
+    if (comp) {
+      const prop = comp.props[name];
+      if (prop && prop.onChangeBuilt && meta.mitem) {
+        const gen_fn = new Function(`return ${prop.onChangeBuilt}`);
+        const fn = gen_fn() as (arg: {
+          name: string;
+          value: any;
+          item: IItem & PrasiEdit;
+        }) => void;
+
+        fn({
+          name,
+          value,
+          item: devItem(p.page.meta, meta.mitem, p.page.cur.id),
+        });
+      }
+    }
+  }
+};

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

@@ -1,8 +1,8 @@
 import { FC } from "react";
-import { FMCompDef } from "../../../../../utils/types/meta-fn";
-import { EdPropLabel } from "./prop-label";
 import { useGlobal } from "web-utils";
-import { EDGlobal, active } from "../../../logic/ed-global";
+import { FMCompDef } from "../../../../../utils/types/meta-fn";
+import { EDGlobal } from "../../../logic/ed-global";
+import { EdPropLabel } from "./prop-label";
 import { reset } from "./prop-reset";
 
 export const EdPropInstanceCode: FC<{

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

@@ -8,6 +8,7 @@ import { treeRebuild } from "../../../logic/tree/build";
 import { EdPropLabel } from "./prop-label";
 import { ChevronDown } from "../../tree/node/item/indent";
 import { Popover } from "../../../../../utils/ui/popover";
+import { propInstanceOnChange } from "./on-change";
 
 type MetaOption = {
   label: string;
@@ -45,6 +46,7 @@ export const EdPropInstanceOptions: FC<{
     resetOnDeps: false as boolean | (() => any[]),
     open: false,
     pendingVal: null as any,
+    changedTimeout: null as any,
   });
   const p = useGlobal(EDGlobal, "EDITOR");
 
@@ -231,6 +233,11 @@ export const EdPropInstanceOptions: FC<{
       treeRebuild(p);
       p.render();
 
+      clearTimeout(local.changedTimeout);
+      local.changedTimeout = setTimeout(() => {
+        propInstanceOnChange(p, name, val);
+      }, 1000);
+
       setTimeout(() => {
         if (item?.reload) {
           for (const name of item.reload) {

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

@@ -10,6 +10,7 @@ import { FMCompDef } from "../../../../../utils/types/meta-fn";
 import { EdPropLabel } from "./prop-label";
 import { treeRebuild } from "../../../logic/tree/build";
 import { EDGlobal } from "../../../logic/ed-global";
+import { propInstanceOnChange } from "./on-change";
 
 export const EdPropInstanceText: FC<{
   name: string;
@@ -25,6 +26,7 @@ export const EdPropInstanceText: FC<{
     codeEditing: false,
     timeout: null as any,
     focus: false,
+    changedTimeout: null as any,
   });
 
   useEffect(() => {
@@ -84,6 +86,8 @@ export const EdPropInstanceText: FC<{
           local.value = e.currentTarget.value;
           local.render();
           clearTimeout(local.timeout);
+          clearTimeout(local.changedTimeout);
+
           local.timeout = setTimeout(() => {
             mprop.doc?.transact(() => {
               mprop.set("value", `\`${local.value}\``);
@@ -91,6 +95,11 @@ export const EdPropInstanceText: FC<{
             });
             treeRebuild(p);
             p.render();
+
+            clearTimeout(local.changedTimeout);
+            local.changedTimeout = setTimeout(() => {
+              propInstanceOnChange(p, name, `\`${local.value}\``);
+            }, 500);
           }, 200);
         }}
       />

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

@@ -329,6 +329,16 @@ export const EdPropPopoverForm: FC<{
         </>
       )}
 
+      <div className="border-t border-slate-300 pl-2 pt-1 flex justify-between items-center">
+        <div className="uppercase text-xs">ON CHANGE</div>
+        <div
+          className="m-1 px-1 bg-white cursor-pointer hover:bg-blue-500 hover:text-white hover:border-blue-500 font-mono border border-slate-300 text-[11px]"
+          onClick={createEditScript(p, "onChange", mprop, name)}
+        >
+          EDIT CODE
+        </div>
+      </div>
+
       {type === "option" && (
         <div className="border-t border-slate-300 pl-2 pt-1 flex justify-between items-center select-none">
           <div className="uppercase text-xs">MODE</div>

app/web/src/utils/script/types/base.ts

@@ -95,7 +95,7 @@ export const baseTypings = `
     component?: { id: string; props: Record<string, PropVal> };
   };
 
-  export type PrasiEdit = {
+  type PrasiEdit = {
     edit: {
       setValue: <T extends keyof IItem>(name: T, value: IItem[T]) => void;
       setProp: (name: string, value: PropVal | string) => void;
@@ -108,7 +108,7 @@ export const baseTypings = `
     };
   };
 
-  const _item: undefined | PrasiItem;
+  type PrasiItem = IItem & PrasiEdit;
   
   const PassProp: (arg:Record<string, any> & { children: ReactNode }>) => ReactElement;
   const mobile: {

app/web/src/utils/types/meta-fn.ts

@@ -36,6 +36,8 @@ export type FNCompDef = {
   gen?: string;
   genBuilt?: string;
   is_name?: boolean;
+  onChange?: string;
+  onChangeBuilt?: string;
   jsxCalledBy?: string[];
   content?: IItem;
   visible?: string;