fix

app/web/src/nova/vi/render/script/item-dev.ts

@@ -8,7 +8,8 @@ const w = window as unknown as {
 
 type SingleChange =
   | { type: "set"; name: string; value: any }
-  | ({ type: "prop"; name: string } & PropVal);
+  | ({ type: "prop"; name: string } & PropVal)
+  | { type: "child"; childs: SimpleItem[] };
 
 export type PropVal =
   | { mode: "string"; value: string }
@@ -21,12 +22,17 @@ type ParentArg = {
   child_idx: number;
 };
 
+type SimpleItem = Partial<Omit<IItem, "component">> & {
+  component?: { id: string; props: Record<string, PropVal> };
+};
+
 export type PrasiEdit = {
   edit: {
     setValue: <T extends keyof IItem>(name: T, value: IItem[T]) => void;
     setProp: (name: string, value: PropVal | string) => void;
     pending: SingleChange[];
-    readonly childs: (IItem & PrasiEdit)[];
+    childs: (IItem & PrasiEdit)[];
+    setChilds: (childs: SimpleItem[]) => void;
     readonly parent: null | ParentArg;
     commit: () => Promise<void>;
     readonly props?: Record<string, PropVal>;
@@ -113,6 +119,11 @@ export const devItem = (
       },
       async commit() {
         const result = {} as Record<string, any>;
+        const compile = {} as Record<
+          string,
+          { value: string; valueBuilt?: string }
+        >;
+
         for (const [item_id, changes] of Object.entries(pedit)) {
           if (mitem) {
             const item = mitem.toJSON();
@@ -138,7 +149,10 @@ export const devItem = (
                       } as any;
                     }
                     if (c.value) {
-                      props[c.name].content = formatChilds([c.value])[0];
+                      props[c.name].content = removeEditFromChilds(
+                        [c.value],
+                        compile
+                      )[0];
                     }
                   }
                 }
@@ -147,13 +161,26 @@ export const devItem = (
                   for (const [k, v] of Object.entries(c.value) as any) {
                     item[k] = v;
                   }
+                } else if (c.type === "child" && Array.isArray(c.childs)) {
+                  const childs = removeEditFromChilds(
+                    c.childs.filter((e) => e),
+                    compile
+                  );
                 }
               }
             }
 
+            for (const [k, v] of Object.entries(compile)) {
+              src[k] = v.value;
+            }
+
             const result = await _api.code_build(src);
-            for (const [k, v] of Object.entries(result)) {
+            for (const [k, v] of Object.entries(result) as any) {
-              props[k].valueBuilt = v;
+              if (props[k]) {
+                props[k].valueBuilt = v;
+              } else if (compile[k]) {
+                compile[k].valueBuilt = v;
+              }
             }
             result[item_id] = item;
           }
@@ -176,7 +203,7 @@ export const devItem = (
         let _value: any = value;
 
         if (name === "childs") {
-          _value = formatChilds(value as any);
+          throw new Error("Please modify childs via .child");
         }
 
         changes.push({ type: "set", name, value: _value });
@@ -216,6 +243,10 @@ export const devItem = (
           }
         }
       },
+      setChilds(childs) {
+        const changes = initChanges();
+        changes.push({ type: "child", childs });
+      },
       get childs() {
         const item = mitem?.toJSON() as IItem;
 
@@ -268,21 +299,61 @@ export const devItem = (
   } as IItem & PrasiEdit;
 };
 
-const formatChilds = (childs: (IItem & PrasiEdit)[]) => {
+const complexifyProps = async (
+  props: Record<string, PropVal>,
+  compileValueBuilt: Record<string, { value: string; valueBuilt?: string }>
+) => {
+  const result: Record<string, FNCompDef> = {};
+  for (const [k, v] of Object.entries(props)) {
+    if (v.mode) {
+      if (v.mode === "string") {
+        result[k] = {
+          value: JSON.stringify(v.value),
+          valueBuilt: JSON.stringify(v.value),
+          meta: { type: "text" },
+        };
+      } else if (v.mode === "jsx" && v.value) {
+        result[k] = {
+          value: "",
+          valueBuilt: "",
+          content: removeEditFromChilds([v.value], compileValueBuilt)[0],
+          meta: { type: "content-element" },
+        };
+      } else if (v.mode === "raw") {
+        result[k] = {
+          value: v.value,
+          valueBuilt: v.valueBuilt,
+          meta: { type: "text" },
+        };
+      }
+    } else {
+      result[k] = v;
+    }
+  }
+  return result;
+};
+
+const removeEditFromChilds = (
+  childs: (SimpleItem | (IItem & PrasiEdit))[],
+  compileValueBuilt: Record<string, { value: string; valueBuilt?: string }>
+) => {
+  let compile = compileValueBuilt || {};
   const result = childs.map((e) => {
     const item: any = { ...e };
     delete item.edit;
 
     if (item.component?.props) {
+      item.component.props = complexifyProps(item.component.props, compile);
+
       for (const [k, v] of Object.entries(item.component.props) as any) {
-        if (v.content) {
+        if (!v.valueBuilt && v.value) {
-          v.content = formatChilds([v.content]);
+          compile[item.id + "|||" + k] = v;
         }
       }
     }
 
     if (item.childs) {
-      item.childs = formatChilds(item.childs);
+      item.childs = removeEditFromChilds(item.childs, compile);
     }
 
     return item;

app/web/src/nova/vi/render/script/item-prod.ts

@@ -10,6 +10,7 @@ export const prodItem = (
   return {
     ...item,
     edit: {
+      setChilds(childs) {},
       get childs() {
         if (item.component?.id) {
           const child = item.component?.props.child;

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

@@ -69,32 +69,37 @@ export const baseTypings = `
     childs: IItem[];
   };
  
-
   type SingleChange =
   | { type: "set"; name: string; value: any }
-  | ({ type: "prop"; name: string } & PropVal);
+  | ({ type: "prop"; name: string } & PropVal)
+  | { type: "child"; childs: SimpleItem[] };
 
-  type PropVal =
+  export type PropVal =
-    | { mode: "string"; value: string }
+  | { mode: "string"; value: string }
-    | { mode: "raw"; value: string; valueBuilt?: string }
+  | { mode: "raw"; value: string; valueBuilt?: string }
-    | { mode: "jsx"; value: null | (IItem & PrasiEdit) };
+  | { mode: "jsx"; value: null | (IItem & PrasiEdit) };
 
   type ParentArg = {
-    item: IItem & PrasiEdit;
+  item: IItem & PrasiEdit;
-    child_type: "jsx" | "child";
+  child_type: "jsx" | "child";
-    child_idx: number;
+  child_idx: number;
   };
 
-  type PrasiEdit = {
+  type SimpleItem = Partial<Omit<IItem, "component">> & {
-    edit: {
+  component?: { id: string; props: Record<string, PropVal> };
-      setValue: <T extends keyof IItem>(name: T, value: IItem[T]) => void;
+  };
-      setProp: (name: string, value: PropVal | string) => void;
+
-      pending: SingleChange[];
+  export type PrasiEdit = {
-      readonly childs: (IItem & PrasiEdit)[];
+  edit: {
-      readonly parent: null | ParentArg;
+    setValue: <T extends keyof IItem>(name: T, value: IItem[T]) => void;
-      commit: () => Promise<void>;
+    setProp: (name: string, value: PropVal | string) => void;
-      readonly props?: Record<string, PropVal>;
+    pending: SingleChange[];
-    };
+    childs: (IItem & PrasiEdit)[];
+    setChilds: (childs: SimpleItem[]) => void;
+    readonly parent: null | ParentArg;
+    commit: () => Promise<void>;
+    readonly props?: Record<string, PropVal>;
+  };
   };
 
   type PrasiItem = IItem & PrasiEdit;

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

@@ -27,12 +27,12 @@ export type FNComponent = {
 };
 
 export type FNCompDef = {
-  idx: number;
+  idx?: number;
-  typings: string;
+  typings?: string;
-  type: string;
+  type?: string;
   label?: string;
   value: any;
-  valueBuilt: any;
+  valueBuilt?: any;
   gen?: string;
   genBuilt?: string;
   is_name?: boolean;