wip prop on change script

app/srv/ws/sync/actions.ts

@@ -3,6 +3,7 @@ import {
   EPage,
   ESite,
   IScopeComp,
+  PropFieldKind,
 } from "../../../web/src/nova/ed/logic/ed-global";
 import { IItem } from "../../../web/src/utils/types/item";
 import { site_group } from "./actions/site_group";
@@ -105,10 +106,9 @@ export const SyncActions = {
           }
         | {
             type: "prop";
-            page_id?: string;
+            comp_id: string;
-            comp_id?: string;
-            item_id: string;
             prop_name: string;
+            prop_kind: PropFieldKind;
             value: Uint8Array;
           }
     ) => ({}) as boolean,

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

@@ -8,13 +8,15 @@ 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
 ) {
+  const src = decoder.decode(await gunzipAsync(arg.value));
+
   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;
@@ -24,6 +26,12 @@ export const code_edit: SAction["code"]["edit"] = async function (
         root = ref.doc.getMap("map").get("root");
         doc = ref.doc as Doc;
       }
+    } else if (comp_id) {
+      const ref = docs.comp[comp_id];
+      if (ref) {
+        root = ref.doc.getMap("map").get("root");
+        doc = ref.doc as Doc;
+      }
     }
 
     if (root) {
@@ -33,23 +41,48 @@ export const code_edit: SAction["code"]["edit"] = async function (
         const adv = mitem.get("adv");
 
         if (adv) {
-          doc?.transact(async () => {
+          const res = await transform(`render(${src})`, {
+            jsx: "transform",
+            format: "cjs",
+            loader: "tsx",
+            minify: true,
+            sourcemap: "inline",
+          });
+          doc?.transact(() => {
             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);
             }
           });
         }
       }
     }
+  } else {
+    const { comp_id, prop_kind, prop_name, value } = arg;
+    if (comp_id) {
+      const ref = docs.comp[comp_id];
+      if (ref) {
+        const root = ref.doc.getMap("map").get("root");
+        const doc = ref.doc as Doc;
+        if (root) {
+          const mprops = root.get("component")?.get("props");
+          const mprop = mprops?.get(prop_name);
+          if (mprop) {
+            const res = await transform(`return ${src}`, {
+              jsx: "transform",
+              format: "cjs",
+              loader: "tsx",
+            });
+            doc?.transact(() => {
+              if (prop_kind === "value") {
+                mprop.set("value", src);
+                mprop.set("valueBuilt", res.code.substring(6));
+              }
+            });
+          }
+        }
+      }
+    }
   }
 
   return false;

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

@@ -12,6 +12,8 @@ export const loadComponent = async (id: string, sync: SyncConnection) => {
   const conf = sync.conf;
   if (!conf) return undefined;
 
+  console.log(id, sync.client_id);
+
   const createUndoManager = async (root: Y.Map<any>) => {
     const um = new Y.UndoManager(root, {
       ignoreRemoteMapChanges: true,
@@ -28,17 +30,21 @@ export const loadComponent = async (id: string, sync: SyncConnection) => {
       snapshot.set("comp", id, "bin", bin);
 
       const sv_local = await gzipAsync(update);
+      console.log("comp on_update", id);
+
       user.active.findAll({ comp_id: id }).map((e) => {
         if (origin !== um) {
           if (e.client_id === origin) return;
         }
         const ws = conns.get(e.client_id)?.ws;
-        if (ws)
+        if (ws) {
+          console.log("remote_svlocal", id, !!e);
           sendWS(ws, {
             type: SyncType.Event,
             event: "remote_svlocal",
             data: { type: "comp", sv_local, id },
           });
+        }
       });
     });
   };

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

@@ -234,7 +234,7 @@ export const EDGlobal = {
       script: {
         open: false,
         mode: "js" as "js" | "css" | "html",
-        type: "item" as "item" | "prop",
+        type: "item" as "item" | "prop-master" | "prop-instance",
         prop_kind: "" as PropFieldKind,
         prop_name: "",
       },

app/web/src/nova/ed/logic/tree/build.tsx

@@ -113,7 +113,7 @@ export const treeRebuild = async (p: PG, arg?: { note?: string }) => {
       }
     }
 
-    doc.transact(async () => {
+    doc.transact(() => {
       const sections = root.get("childs");
       if (sections) {
         sections.map((e) => {

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

@@ -128,7 +128,7 @@ export const ScriptMonaco = () => {
     }
   }
 
-  if (p.ui.popup.script.type === "prop") {
+  if (p.ui.popup.script.type === "prop-master") {
     const mprops = mitem?.get("component")?.get("props");
     if (mprops) {
       const mprop = mprops.get(p.ui.popup.script.prop_name);
@@ -169,13 +169,23 @@ export const ScriptMonaco = () => {
               arg.page_id = p.page.cur.id;
             }
 
-            p.sync.code.edit({
+            if (p.ui.popup.script.type === "prop-master") {
-              type: "adv",
+              p.sync.code.edit({
-              mode: type,
+                type: "prop",
-              item_id: active.item_id,
+                prop_kind: p.ui.popup.script.prop_kind,
-              value: compress(encode.encode(val || "")),
+                prop_name: p.ui.popup.script.prop_name,
-              ...arg,
+                value: compress(encode.encode(val || "")),
-            });
+                ...arg,
+              });
+            } else {
+              p.sync.code.edit({
+                type: "adv",
+                mode: type,
+                item_id: active.item_id,
+                value: compress(encode.encode(val || "")),
+                ...arg,
+              });
+            }
           }
         }, 1000);
       }}

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

@@ -1,6 +1,7 @@
 import { useGlobal } from "web-utils";
 import { ScriptMonaco } from "./monaco";
 import { EDGlobal, active } from "../../../logic/ed-global";
+import { IItem } from "../../../../../utils/types/item";
 
 export const ScriptWorkbench = () => {
   const p = useGlobal(EDGlobal, "EDITOR");
@@ -8,8 +9,8 @@ export const ScriptWorkbench = () => {
     <div className="flex flex-1 items-stretch">
       <div className="flex flex-1 flex-col ">
         <div className="flex p-2 border-b space-x-2">
-          {p.ui.popup.script.type === "prop" ? (
+          {p.ui.popup.script.type === "prop-master" ? (
-            <></>
+            <CompTitle />
           ) : (
             <>
               {[
@@ -52,3 +53,43 @@ export const ScriptWorkbench = () => {
     </div>
   );
 };
+
+const CompTitle = () => {
+  const p = useGlobal(EDGlobal, "EDITOR");
+
+  const item = p.comp.list[active.comp_id].doc
+    .getMap("map")
+    .get("root")
+    ?.toJSON() as IItem;
+
+  if (item && item.component?.id) {
+    const props = item.component.props;
+    return (
+      <div className="flex text-xs space-x-1 items-center">
+        <div>{item.name}</div>
+        <ArrowRight />
+        <div>{p.ui.popup.script.prop_name}</div>
+        <ArrowRight />
+        <div>{p.ui.popup.script.prop_kind}</div>
+      </div>
+    );
+  }
+  return <></>;
+};
+
+const ArrowRight = () => (
+  <svg
+    width="12"
+    height="12"
+    viewBox="0 0 15 15"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z"
+      fill="currentColor"
+      fillRule="evenodd"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+);

app/web/src/nova/ed/panel/side/prop-comp/edit-script.tsx

@@ -16,7 +16,7 @@ export const createEditScript = (
     if (meta) {
       p.ui.popup.script.mode = "js";
       p.ui.popup.script.open = true;
-      p.ui.popup.script.type = "prop";
+      p.ui.popup.script.type = "prop-master";
       p.ui.popup.script.prop_kind = kind;
       p.ui.popup.script.prop_name = name;
       p.render();

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

@@ -1,6 +1,7 @@
 import { FC } from "react";
 import { useGlobal } from "web-utils";
-import { EDGlobal, EdMeta } from "../../logic/ed-global";
+import { EDGlobal, EdMeta, active } from "../../logic/ed-global";
+import { IItem } from "../../../../utils/types/item";
 
 export const EdSidePropInstance: FC<{ meta: EdMeta }> = ({ meta }) => {
   const p = useGlobal(EDGlobal, "EDITOR");
@@ -11,7 +12,28 @@ export const EdSidePropInstance: FC<{ meta: EdMeta }> = ({ meta }) => {
         <div className="flex-1 overflow-hidden mr-2 text-ellipsis whitespace-nowrap">
           {meta.item.name}
         </div>
-        <div className="border px-1 cursor-pointer bg-white hover:bg-blue-100">
+        <div
+          className="border px-1 cursor-pointer bg-white hover:bg-blue-100"
+          onClick={() => {
+            const item = meta.item as IItem;
+
+            const comp_id = item.component?.id;
+            if (comp_id) {
+              active.instance.item_id = item.id;
+              active.instance.comp_id = active.comp_id;
+
+              active.comp_id = comp_id || "";
+              const root = p.comp.list[comp_id].tree.find(
+                (e) => e.parent === "root"
+              );
+              if (root && typeof root.id === "string") {
+                active.item_id = root.id || "";
+              }
+
+              p.render();
+            }
+          }}
+        >
           Edit Component
         </div>
       </div>