wip fix

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

@@ -195,7 +195,6 @@ export const EDGlobal = {
   global_prop: [] as string[],
   ui: {
     zoom: localStorage.zoom || "100%",
-    should_render: false,
     side: { prop: true },
     layout: {
       left: parseInt(localStorage.getItem("prasi-layout-left") || "250"),

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

@@ -1,7 +1,7 @@
 import { compress, decompress } from "wasm-gzip";
 import { isTextEditing } from "./active/is-editing";
 import { loadCompSnapshot } from "./comp/load";
-import { PG } from "./ed-global";
+import { PG, active } from "./ed-global";
 import { loadSite } from "./ed-site";
 import { treeRebuild } from "./tree/build";
 
@@ -77,13 +77,13 @@ export const reloadPage = async (p: PG, page_id: string, note: string) => {
       const res = await p.sync.yjs.sv_local(
         "page",
         p.page.cur.id,
-				Buffer.from(compress(bin)),
+        Buffer.from(compress(bin))
       );
 
       if (res) {
         const diff_local = Y.encodeStateAsUpdate(
           doc as any,
-					decompress(res.sv),
+          decompress(res.sv)
         );
         Y.applyUpdate(doc as any, decompress(res.diff), "local");
 
@@ -94,7 +94,7 @@ export const reloadPage = async (p: PG, page_id: string, note: string) => {
         await p.sync.yjs.diff_local(
           "page",
           p.page.cur.id,
-					Buffer.from(compress(diff_local)),
+          Buffer.from(compress(diff_local))
         );
         p.ui.syncing = false;
 
@@ -104,7 +104,7 @@ export const reloadPage = async (p: PG, page_id: string, note: string) => {
           ?.get("childs")
           ?.map((e: any) => e.get("id")) as string[];
 
-				if (p.ui.should_render) p.render();
+        if (active.should_render_main) p.render();
       }
     };
 

app/web/src/nova/ed/panel/header/mid/add-item.tsx

@@ -29,7 +29,7 @@ export const EdAddItem = () => {
 
         const json = {
           id: createId(),
-          name: `New Item`,
+          name: `new_item`,
           type: "item",
           dim: { w: "full", h: "full" },
           childs: [],

app/web/src/nova/ed/panel/header/mid/add-text.tsx

@@ -33,7 +33,7 @@ export const EdAddText = () => {
 
           const json = {
             id: createId(),
-            name: `New Text`,
+            name: `new_text`,
             type: "text",
             dim: { w: "full", h: "full" },
             layout: { align: "center", dir: "col", gap: 0 },
@@ -68,7 +68,7 @@ export const EdAddText = () => {
               if (mitem.get("type") === "section") {
                 const json = {
                   id: createId(),
-                  name: `New Item`,
+                  name: `new_item`,
                   type: "item",
                   dim: { w: "full", h: "full" },
                   childs: [],

app/web/src/nova/ed/panel/header/mid/comp-picker.tsx

@@ -105,7 +105,7 @@ const addComponent = (mitem: MItem | MSection, comp: IItem) => {
 const addSection = (root: MRoot) => {
   const json = {
     id: createId(),
-    name: `New Section`,
+    name: `new_section`,
     type: "section",
     dim: { w: "full", h: "full" },
     childs: [],

app/web/src/nova/ed/panel/main/main.tsx

@@ -39,7 +39,7 @@ export const EdMain = () => {
         visit={(meta, parts) => {
           return mainPerItemVisit(p, meta, parts);
         }}
-				onStatusChanged={(status) => {
+        on_status_changed={(status) => {
           if (status !== "ready") {
             active.should_render_main = true;
             local.render();
@@ -60,7 +60,7 @@ export const EdMain = () => {
     <div
       className={cx(
         "flex flex-1 relative overflow-auto",
-				p.mode === "mobile" ? "flex-col items-center" : "",
+        p.mode === "mobile" ? "flex-col items-center" : ""
       )}
       ref={(el) => {
         if (el) {
@@ -148,6 +148,6 @@ const mainStyle = (p: PG, meta?: IMeta) => {
             border: 2px solid #1c88f3;
           }
         }
-      `,
+      `
   );
 };

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

@@ -34,11 +34,13 @@ export const declareScope = (p: PG, meta: IMeta, monaco: Monaco) => {
   for (const path of paths) {
     if (path.includes(meta)) {
       for (const m of path) {
+        if (m) {
           if (m.instances) {
             cur_path.length = 0;
           }
           cur_path.push(m);
         }
+      }
       break;
     }
   }

app/web/src/nova/ed/panel/side/style/side-all.tsx

@@ -11,6 +11,7 @@ import { PanelLink } from "./panel/link";
 import { PanelPadding } from "./panel/padding";
 import { SideBox } from "./ui/SideBox";
 import { SideLabel } from "./ui/SideLabel";
+import { treeRebuild } from "../../../logic/tree/build";
 
 export const EdStyleAll = () => {
   const p = useGlobal(EDGlobal, "EDITOR");
@@ -27,7 +28,7 @@ export const EdStyleAll = () => {
         let mitem = meta.mitem;
 
         if (mitem) {
-          p.ui.should_render = true;
+          active.should_render_main = true;
           mitem.doc?.transact(() => {
             if (mitem) {
               if (p.mode === "mobile") {

app/web/src/nova/ed/panel/side/style/ui/FieldNumUnit.tsx

@@ -70,8 +70,6 @@ export const FieldNumUnit: FC<{
     local.render();
   }, [value, unit]);
 
-  const [txPending, tx] = useTransition();
-
   useEffect(() => {
     // Only change the value if the drag was actually started.
     const onUpdate = (event: any) => {
@@ -86,9 +84,7 @@ export const FieldNumUnit: FC<{
 
         local.render();
 
-        tx(() => {
         update(local.val + local.unit);
-        });
       }
     };
 
@@ -105,7 +101,7 @@ export const FieldNumUnit: FC<{
       document.removeEventListener("pointermove", onUpdate);
       document.removeEventListener("pointerup", onEnd);
     };
-  }, [local.drag.clientX, local.drag.old, local.val]);
+  }, [local.drag.clientX, local.drag.old, local.val, update]);
 
   const onStart = useCallback(
     (event: React.MouseEvent) => {

app/web/src/nova/ed/panel/tree/node/item/name.tsx

@@ -1,8 +1,9 @@
 import { NodeModel, RenderParams } from "@minoru/react-dnd-treeview";
 import { FC, useEffect } from "react";
 import { useGlobal, useLocal } from "web-utils";
-import { EDGlobal, IMeta, active } from "../../../../logic/ed-global";
+import { IItem, MItem } from "../../../../../../utils/types/item";
 import { Tooltip } from "../../../../../../utils/ui/tooltip";
+import { EDGlobal, IMeta, PG, active } from "../../../../logic/ed-global";
 import { treeRebuild } from "../../../../logic/tree/build";
 
 export const EdTreeName = ({
@@ -101,13 +102,15 @@ export const EdTreeName = ({
             }
           }}
           onChange={(e) => {
-            local.rename = e.target.value.replace(/[\W_]+/g, "_");
+            local.rename = e.target.value
+              .replace(/[^a-zA-Z\:\d\s:]+/g, "_")
+              .toLowerCase();
             p.render();
           }}
         />
       ) : (
         <div className="flex flex-col">
-          <Name name={name} is_jsx_prop={is_jsx_prop} />
+          <Name name={name} is_jsx_prop={is_jsx_prop} meta={node.data} />
           {/* <div className={"text-[9px] text-gray-500 -mt-1"}>
             {node.id} - {item.originalId}
           </div> */}
@@ -117,20 +120,22 @@ export const EdTreeName = ({
   );
 };
 
-const Name: FC<{ name: string; is_jsx_prop: boolean }> = ({
+const Name: FC<{ name: string; is_jsx_prop: boolean; meta?: IMeta }> = ({
   name,
   is_jsx_prop,
+  meta,
 }) => {
   if (is_jsx_prop) {
     return (
-      <div className="flex items-center space-x-1">
+      <div className={cx("flex items-center space-x-1 pr-1")}>
         <Tooltip
           content={`Type: JSX Prop`}
           className="flex text-purple-500 border border-purple-400 items-center justify-center font-mono text-[6px] px-[2px]"
         >
           P
         </Tooltip>
-        <div>{name}</div>
+        <div className="flex-1">{name}</div>
+        {meta && meta.mitem && <GenerateJSX mitem={meta.mitem} />}
       </div>
     );
   }
@@ -153,3 +158,76 @@ const Name: FC<{ name: string; is_jsx_prop: boolean }> = ({
 
   return <div>{name}</div>;
 };
+
+const GenerateJSX: FC<{ mitem: MItem }> = ({ mitem }) => {
+  const p = useGlobal(EDGlobal, "EDITOR");
+  return (
+    <Tooltip
+      content="Generate JSX"
+      onClick={() => {
+        const genJSX = findDefaultJSX(p, mitem);
+        const ijson = mitem.toJSON() as IItem;
+        mitem.doc?.transact(() => {
+          syncronize(mitem as any, {
+            ...genJSX,
+            name: ijson.name,
+            id: ijson.id,
+            hidden: false,
+            originalId: ijson.originalId,
+          });
+        });
+        treeRebuild(p);
+        p.render();
+      }}
+    >
+      <div
+        className="action-script px-1 py-[2px] rounded-sm text-purple-500 bg-white border border-purple-400 opacity-0 transition-all hover:bg-purple-700 hover:text-white hover:border-purple-700"
+        dangerouslySetInnerHTML={{
+          __html: `<svg width="9px" height="9px" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.69667 0.0403541C8.90859 0.131038 9.03106 0.354857 8.99316 0.582235L8.0902 6.00001H12.5C12.6893 6.00001 12.8625 6.10701 12.9472 6.27641C13.0319 6.4458 13.0136 6.6485 12.8999 6.80001L6.89997 14.8C6.76167 14.9844 6.51521 15.0503 6.30328 14.9597C6.09135 14.869 5.96888 14.6452 6.00678 14.4178L6.90974 9H2.49999C2.31061 9 2.13748 8.893 2.05278 8.72361C1.96809 8.55422 1.98636 8.35151 2.09999 8.2L8.09997 0.200038C8.23828 0.0156255 8.48474 -0.0503301 8.69667 0.0403541ZM3.49999 8.00001H7.49997C7.64695 8.00001 7.78648 8.06467 7.88148 8.17682C7.97648 8.28896 8.01733 8.43723 7.99317 8.5822L7.33027 12.5596L11.5 7.00001H7.49997C7.353 7.00001 7.21347 6.93534 7.11846 6.8232C7.02346 6.71105 6.98261 6.56279 7.00678 6.41781L7.66968 2.44042L3.49999 8.00001Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>`,
+        }}
+      ></div>
+    </Tooltip>
+  );
+};
+
+export const findDefaultJSX = (p: PG, mitem: MItem): IItem => {
+  let resetJSXProp: any = false;
+  if (mitem && mitem.parent && (mitem.parent as any).get("content")) {
+    let name = "";
+    (mitem as any).parent.parent.forEach((e: any, k: any) => {
+      if (e === mitem.parent) {
+        name = k;
+      }
+    });
+
+    if (name) {
+      try {
+        const cid = (mitem as any).parent.parent.parent.get("id");
+        const comp = p.comp.list[cid].doc;
+        if (comp) {
+          const mchilds = comp
+            .getMap("map")
+            .get("root")
+            ?.get("childs")
+            ?.toJSON() as IItem[];
+          for (const c of mchilds) {
+            if (
+              c &&
+              c.name &&
+              c.name.startsWith("jsx:") &&
+              c.name.substring(4).trim() === name
+            ) {
+              c.hidden = false;
+              c.name = name;
+              c.id = mitem.get("id") || "";
+              c.originalId = mitem.get("originalId") || "";
+              resetJSXProp = c;
+            }
+          }
+        }
+      } catch (e) {}
+    }
+  }
+
+  return resetJSXProp;
+};

app/web/src/nova/vi/render/render.tsx

@@ -52,7 +52,6 @@ export const ViRender: FC<{
   }
 
   if (!meta) return null;
-
   if (meta.item.hidden) return null;
 
   if (meta.item.adv?.js || meta.item.component?.id) {

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

@@ -84,13 +84,7 @@ const JsxProp: FC<{
   meta: IMeta;
   passprop: any;
 }> = ({ fn, meta, passprop }) => {
-  const local = useLocal({ init: false, result: null as any });
+  return fn({ passprop, meta });
-
-  if (!local.init) {
-    local.init = true;
-    local.result = fn({ passprop, meta });
-  }
-  return local.result;
 };
 
 export const replacement = {

app/web/src/nova/vi/vi.tsx

@@ -1,4 +1,4 @@
-import { FC, Suspense } from "react";
+import { FC, Suspense, useState } from "react";
 import { useGlobal } from "web-utils";
 import { IMeta } from "../ed/logic/ed-global";
 import { viLoad } from "./load/load";
@@ -19,7 +19,7 @@ export const Vi: FC<{
   script?: { init_local_effect: Record<string, boolean> };
   visit?: VG["visit"];
   render_stat?: "enabled" | "disabled";
-  onStatusChanged?: (status: VG["status"]) => void;
+  on_status_changed?: (status: VG["status"]) => void;
 }> = ({
   meta,
   entry,
@@ -30,10 +30,10 @@ export const Vi: FC<{
   visit,
   script,
   render_stat: rs,
-  onStatusChanged,
+  on_status_changed,
 }) => {
   const vi = useGlobal(ViGlobal, "VI");
-  vi.on_status_changes = onStatusChanged;
+  vi.on_status_changes = on_status_changed;
 
   if (rs === "disabled") {
     render_stat.enabled = false;

app/web/src/render/editor/panel/side/Side.tsx

@@ -17,6 +17,7 @@ import { CPInstance } from "./props/CPInstance";
 import { CPMaster } from "./props/CPMaster";
 import { SideBox } from "./ui/SideBox";
 import { SideLabel } from "./ui/SideLabel";
+import { treeRebuild } from "../../../../nova/ed/logic/tree/build";
 
 export const ESide = () => {
   const p = useGlobal(EditorGlobal, "EDITOR");

app/web/src/utils/css/font.ts

@@ -36,7 +36,7 @@ export const cssFont = (
     font.family = glbFont.defaultFont;
   }
 
-  return cx(
+  const res = cx(
     font.color &&
       `
         color: ${font.color};
@@ -69,4 +69,6 @@ export const cssFont = (
         font-family: ${font.family};
       `
   );
+
+  return res;
 };