fix

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

@@ -23,7 +23,7 @@ export const comp_new: SAction["comp"]["new"] = async function (
 
   const comp = await createComp(item, group_id);
 
-  const walk = (mitem: MItem | MText) => {
+  const walk = (mitem: MItem) => {
     if (mitem.get("id") === item_id) {
       const map = new Y.Map() as FMComponent;
       syncronize(

app/web/src/base/load/proxy.ts

@@ -52,13 +52,16 @@ export const fetchViaProxy = async (
     const cur_url = new URL(location.href);
     let final_url = "";
 
-    if (to_url.host === cur_url.host ||
-      (!!g && typeof g.server_hook === 'function')) {
+    if (
+      to_url.host === cur_url.host ||
+      (!!g && typeof g.server_hook === "function")
+    ) {
       final_url = to_url.toString();
     } else {
-      final_url = `${cur_url.protocol}//${cur_url.host
-        }/_proxy/${encodeURIComponent(to_url.toString())}`;
-    } 
+      final_url = `${cur_url.protocol}//${
+        cur_url.host
+      }/_proxy/${encodeURIComponent(to_url.toString())}`;
+    }
 
     if (final_url) {
       if (uploadProgress) {
@@ -75,10 +78,10 @@ export const fetchViaProxy = async (
           final_url,
           data
             ? {
-              method: "POST",
-              body,
-              headers,
-            }
+                method: "POST",
+                body,
+                headers,
+              }
             : undefined
         );
         const raw = await res.text();
@@ -90,14 +93,15 @@ export const fetchViaProxy = async (
       }
     }
   }
+
   const res = await fetch(
     to_url,
     data
       ? {
-        method: "POST",
-        body,
-        headers,
-      }
+          method: "POST",
+          body,
+          headers,
+        }
       : undefined
   );
   const raw = await res.text();

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

@@ -17,7 +17,8 @@ export const ViRender: FC<{
   children?: ReactNode;
   passprop?: any;
   is_layout: boolean;
-}> = ({ meta, children, passprop, is_layout }) => {
+  parent_key?: any;
+}> = ({ meta, passprop, is_layout, parent_key }) => {
   if (render_stat.enabled) {
     const rstat_meta = render_stat.meta;
 
@@ -64,14 +65,19 @@ export const ViRender: FC<{
           meta={meta}
           is_layout={is_layout}
           passprop={passprop}
+          parent_key={parent_key}
         ></ViScript>
       </ErrorBox>
     );
   }
-
   return (
     <ErrorBox meta={meta}>
-      <ViChild meta={meta} passprop={passprop} is_layout={is_layout}></ViChild>
+      <ViChild
+        meta={meta}
+        passprop={passprop}
+        is_layout={is_layout}
+        parent_key={parent_key}
+      ></ViChild>
     </ErrorBox>
   );
 };
@@ -80,7 +86,8 @@ export const ViChild: FC<{
   meta: IMeta;
   is_layout: boolean;
   passprop?: any;
-}> = ({ meta, passprop, is_layout }) => {
+  parent_key?: any;
+}> = ({ meta, passprop, is_layout, parent_key }) => {
   const vi = useGlobal(ViGlobal, "VI");
 
   if (is_layout && meta.item.name === "children") {
@@ -95,6 +102,7 @@ export const ViChild: FC<{
               meta={meta}
               is_layout={false}
               passprop={passprop}
+              parent_key={parent_key}
             ></ViScript>
           </ErrorBox>
         );

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

@@ -10,7 +10,8 @@ export const ViScript: FC<{
   meta: IMeta;
   is_layout: boolean;
   passprop?: any;
-}> = ({ meta, passprop, is_layout }) => {
+  parent_key?: any;
+}> = ({ meta, passprop, is_layout, parent_key }) => {
   const vi = useGlobal(ViGlobal, "VI");
   const [_, _set] = useState({});
   meta.render = () => {
@@ -20,7 +21,7 @@ export const ViScript: FC<{
   let _pass = passprop;
   if (meta.item.component?.id) {
     if (!_pass) _pass = {};
-    viEvalProps(vi, meta, is_layout, _pass);
+    viEvalProps(vi, meta, is_layout, _pass, parent_key);
   }
 
   if (meta.item.adv?.html) {
@@ -28,7 +29,7 @@ export const ViScript: FC<{
   }
 
   if (meta.item.adv?.js) {
-    viEvalScript(vi, meta, is_layout, _pass);
+    viEvalScript(vi, meta, is_layout, _pass, parent_key);
     if (meta.script) return meta.script.result;
   }
 

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

@@ -7,6 +7,7 @@ import { viScriptArg } from "./arg";
 import { replaceWithObject, replacement } from "./eval-script";
 import { extractNavigate } from "./extract-nav";
 import type { Doc } from "yjs";
+import type { parseJs } from "../../../../../../srv/ws/sync/editor/parser/parse-js";
 
 export const w = window as any;
 
@@ -21,13 +22,26 @@ export const viEvalProps = (
   },
   meta: IMeta,
   is_layout: boolean,
-  passprop: any
+  passprop: any,
+  parent_key?: any
 ) => {
   if (meta.item.component?.id) {
-    if (!meta.item.script) {
-      meta.item.script = {};
+    let script = meta.item.script;
+
+    if (parent_key) {
+      if (!meta.item.script_keyed) meta.item.script_keyed = {};
+      if (!meta.item.script_keyed[parent_key])
+        meta.item.script_keyed[parent_key] = {};
+      script = meta.item.script_keyed[parent_key];
+    } else {
+      if (!meta.item.script) {
+        meta.item.script = {};
+      }
+      script = meta.item.script;
     }
 
+    if (!script) return;
+
     const exports = (window as any).exports;
     const arg = {
       ...exports,
@@ -38,7 +52,7 @@ export const viEvalProps = (
       params,
     };
 
-    meta.item.script.props = {};
+    script.props = {};
     let fails = new Set<string>();
     if (!!meta.item.component.props) {
       const _props: any = {};
@@ -131,13 +145,13 @@ export const viEvalProps = (
     `
           );
 
-          meta.item.script.props[name] = { value: src };
+          script.props[name] = { value: src };
           let val = fn(...Object.values(arg));
 
           if (typeof val === "function") {
-            meta.item.script.props[name].fn = val;
+            script.props[name].fn = val;
             val = (...args: any[]) => {
-              return meta.item.script?.props?.[name].fn(...args);
+              if (script) return script.props?.[name].fn(...args);
             };
           }
 
@@ -209,11 +223,18 @@ const updatePropValueBuilt = (mprop: FMCompDef, src: string) => {
 export const updatePropScope = (
   vi: { site: { db: any; api: any } },
   meta: IMeta,
-  scope: any
+  scope: any,
+  parent_key?: any
 ) => {
-  if (meta.item.script?.props) {
+  const script = parent_key
+    ? meta.item.script_keyed?.[parent_key]
+    : meta.item.script;
+
+  if (!script) return;
+
+  if (script.props) {
     const scopes = { ...scope, api: vi.site.api, db: vi.site.db };
-    for (const [name, prop] of Object.entries(meta.item.script.props)) {
+    for (const [name, prop] of Object.entries(script.props)) {
       if (prop.fn) {
         const fn = new Function(
           ...Object.keys(scopes),

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

@@ -1,4 +1,4 @@
-import { FC, ReactNode, Suspense, useEffect } from "react";
+import { FC, ReactNode, Suspense, isValidElement, useEffect } from "react";
 import { w } from "../../../../utils/types/general";
 import { IMeta } from "../../../ed/logic/ed-global";
 import { ErrorBox } from "../../utils/error-box";
@@ -23,12 +23,12 @@ export const viEvalScript = (
   },
   meta: IMeta,
   is_layout: boolean,
-  passprop: any
+  passprop: any,
+  parent_key?: any
 ) => {
   const parts = viParts(vi, meta, is_layout, passprop);
 
   if (vi.visit) vi.visit(meta, parts);
-
   if (!meta.script) {
     meta.script = {
       scope: passprop,
@@ -46,14 +46,38 @@ export const viEvalScript = (
     useEffect,
     children: parts.props.children,
     props: parts.props,
-    Local: script.Local,
+    Local: script?.Local,
     db: vi.site.db,
     api: vi.site.api,
     PassProp: script?.PassProp,
     ErrorBox: ErrorBox,
     newElement: () => {},
     render: (jsx: ReactNode) => {
-      script.result = <Suspense>{jsx}</Suspense>;
+      let result = jsx;
+      if (isValidElement(jsx) && jsx.props.children) {
+        if (Array.isArray(jsx.props.children)) {
+          const childs = jsx.props.children.filter((e: any) => e);
+          if (childs.length > 1) {
+            let new_childs = [];
+            for (const child of childs) {
+              if (!child.key) {
+                console.warn(
+                  `No key prop in item: ${meta.item.name}`,
+                  `\n\n`,
+                  meta.item.adv?.js
+                );
+              } else {
+                new_childs.push({
+                  ...child,
+                  props: { ...child.props, internal_key: child.key },
+                });
+              }
+            }
+            result = { ...jsx, props: { ...jsx.props, children: new_childs } };
+          }
+        }
+      }
+      if (script) script.result = <Suspense>{result}</Suspense>;
     },
     params,
     ...viScriptArg(vi),
@@ -90,7 +114,7 @@ ${src}
   );
   fn(...Object.values(arg));
 
-  updatePropScope(vi, meta, passprop);
+  updatePropScope(vi, meta, passprop, parent_key);
 };
 
 const JsxProp: FC<{

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

@@ -24,13 +24,14 @@ export const createViLocal = (
     value: T;
     hook?: (local: T) => void;
     effect?: (local: T) => void | Promise<void>;
+    parent_key?: any;
   }) => {
     const isEditor =
       ["localhost", "prasi.avolut.com"].includes(location.hostname) &&
       location.pathname.startsWith("/ed/");
     let id = meta.item.id;
 
-    const { children } = arg;
+    const { children, parent_key } = arg;
     const init_local_effect = vi.script?.init_local_effect;
     const metas = is_layout ? vi.layout?.meta : vi.meta;
     const ref = useRef<any>(
@@ -39,7 +40,7 @@ export const createViLocal = (
     const local = ref.current;
     local.render = meta.render;
 
-    updatePropScope(vi, meta, meta.script?.scope);
+    updatePropScope(vi, meta, meta.script?.scope, parent_key);
 
     if (arg.hook) {
       arg.hook(local);

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

@@ -3,7 +3,6 @@ import { ReactNode, isValidElement, useState } from "react";
 import { IMeta } from "../../../ed/logic/ed-global";
 import { VG } from "../global";
 import { ViRender } from "../render";
-import { scanComponent } from "../../../prod/base/component";
 
 export const createViPassProp = (
   vi: { meta: VG["meta"]; render?: () => void; comp: VG["comp"] },
@@ -11,24 +10,40 @@ export const createViPassProp = (
   meta: IMeta,
   passprop: any
 ) => {
-  return (arg: Record<string, any> & { children: ReactNode }) => {
+  return (
+    arg: Record<string, any> & { children: ReactNode; internal_key: any }
+  ) => {
     const [_, render] = useState({});
+    const internal_key = arg.internal_key;
+
     if (!meta.item.script) {
       meta.item.script = {};
     }
 
-    if (!meta.item.script.passprop) {
-      meta.item.script.passprop = {};
+    let script = meta.item.script;
+    if (internal_key) {
+      if (!meta.item.script_keyed) {
+        meta.item.script_keyed = {};
+      }
+
+      if (!meta.item.script_keyed[internal_key]) {
+        meta.item.script_keyed[internal_key] = {};
+      }
+      script = meta.item.script_keyed[internal_key] as any;
+    }
+
+    if (!script.passprop) {
+      script.passprop = {};
     }
 
     const script_pass: any = {};
-    if (meta.item.script.passprop) {
+    if (script.passprop) {
       let is_changed = false;
       for (const [k, v] of Object.entries(arg)) {
         if (!["children", "key"].includes(k)) {
           is_changed = true;
           script_pass[k] = v;
-          meta.item.script.passprop[k] = { end: 0, start: 0, value: v };
+          script.passprop[k] = { end: 0, start: 0, value: v };
         }
       }
     }
@@ -77,6 +92,7 @@ export const createViPassProp = (
                   is_layout={is_layout}
                   meta={cmeta}
                   passprop={_pass}
+                  parent_key={arg.internal_key}
                 />
               );
             }
@@ -119,17 +135,26 @@ export const createViPassProp = (
           }
         }
 
-        return <ViRender is_layout={is_layout} meta={meta} passprop={_pass} />;
+        return (
+          <ViRender
+            is_layout={is_layout}
+            meta={meta}
+            passprop={_pass}
+            parent_key={arg.internal_key}
+          />
+        );
       }
     }
-
-    const result = modifyChild(arg, meta.script?.scope);
-
+    const result = modifyChild(
+      arg,
+      _pass,
+      internal_key ? { parent_key: internal_key } : undefined
+    );
     return result;
   };
 };
 
-export const modifyChild = (arg: any, passprop?: any) => {
+export const modifyChild = (arg: any, passprop?: any, add_props?: any) => {
   let prop: any = {};
   if (Array.isArray(arg)) {
     prop.children = arg;
@@ -140,22 +165,26 @@ export const modifyChild = (arg: any, passprop?: any) => {
   if (Array.isArray(prop.children)) {
     const childs = [];
     for (const child of prop.children) {
-      childs.push(modify(child, prop, passprop));
+      childs.push(modify(child, prop, passprop, add_props));
     }
     return childs;
   }
 
-  return modify(prop.children, prop, passprop);
+  return modify(prop.children, prop, passprop, add_props);
 };
 
-const modify = (el: ReactNode, arg: any, passprop?: any) => {
+const modify = (el: ReactNode, arg: any, passprop?: any, add_props?: any) => {
   if (isValidElement(el)) {
     const passarg = { ...arg };
     delete passarg.children;
 
     return {
       ...el,
-      props: { ...el.props, passprop: { ...passprop, ...passarg } },
+      props: {
+        ...el.props,
+        ...add_props,
+        passprop: { ...passprop, ...passarg },
+      },
     };
   }
   return el;

app/web/src/nova/vi/utils/types.ts

@@ -67,5 +67,14 @@ export type IMeta = {
     Local: ReturnType<typeof createViLocal>;
     PassProp: ReturnType<typeof createViPassProp>;
   };
+  script_keyed?: Record<
+    any,
+    {
+      scope?: any;
+      result: ReactNode;
+      Local: ReturnType<typeof createViLocal>;
+      PassProp: ReturnType<typeof createViPassProp>;
+    }
+  >;
   render?: () => void;
 };

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

@@ -33,6 +33,7 @@ export type BasicItem = {
   dim?: FNDimension;
   border?: FNBorder;
   script?: ReturnType<typeof parseJs>;
+  script_keyed?: Record<string, ReturnType<typeof parseJs>>;
 };
 
 export type MBasicItem = {