checkpoint

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

@@ -43,7 +43,7 @@ export const viEvalScript = (
       scope: passprop,
       result: null,
       Local: createViLocal(vi, is_layout, meta),
-      PassProp: createViPassProp(vi, is_layout, meta, passprop),
+      PassProp: createViPassProp(vi, is_layout, meta, passprop, depth),
     };
   } else {
     meta.script.scope = passprop;
@@ -104,7 +104,7 @@ export const viEvalScript = (
                   } else {
                     new_childs.push(child);
                   }
-                } else if (typeof child === "object") {
+                } else if (typeof child === "object" && child) {
                   if (child.type === meta.script?.PassProp) {
                     should_replace = true;
                     new_childs.push({

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

@@ -8,7 +8,8 @@ export const createViPassProp = (
   vi: { meta: VG["meta"]; render?: () => void; comp: VG["comp"] },
   is_layout: boolean,
   meta: IMeta,
-  passprop: any
+  passprop: any,
+  depth: number
 ) => {
   return (
     arg: Record<string, any> & { children: ReactNode; internal_key: any }
@@ -93,6 +94,7 @@ export const createViPassProp = (
                   meta={cmeta}
                   passprop={_pass}
                   parent_key={arg.internal_key}
+                  depth={depth}
                 />
               );
             }
@@ -141,6 +143,7 @@ export const createViPassProp = (
             meta={meta}
             passprop={_pass}
             parent_key={arg.internal_key}
+            depth={depth}
           />
         );
       }

app/web/src/utils/script/mount.tsx

@@ -41,8 +41,6 @@ export const jsMount = async (editor: MonacoEditor, monaco: Monaco, p?: PG) => {
 
   const compilerOptions: CompilerOptions = {
     jsx: monaco.languages.typescript.JsxEmit.ReactJSX,
-    jsxFactory: "React.createElement",
-    jsxFragmentFactory: "React.Fragment",
     target: monaco.languages.typescript.ScriptTarget.ES2015,
     allowNonTsExtensions: true,
     lib: ["esnext", "dom"],

app/web/src/utils/script/typings.ts

@@ -110,20 +110,52 @@ declare module "ts:prisma_ext" {
   }
 
   monaco.languages.typescript.typescriptDefaults.setExtraLibs([
+    {
+      filePath: "jsx-runtime.d.ts",
+      content: `declare module "react/jsx-runtime" {
+import * as React from "react";
+export { Fragment } from "react";
+
+export namespace JSX {
+    type ElementType = React.JSX.ElementType;
+    interface Element extends React.JSX.Element {}
+    interface ElementClass extends React.JSX.ElementClass {}
+    interface ElementAttributesProperty extends React.JSX.ElementAttributesProperty {}
+    interface ElementChildrenAttribute extends React.JSX.ElementChildrenAttribute {}
+    type LibraryManagedAttributes<C, P> = React.JSX.LibraryManagedAttributes<C, P>;
+    interface IntrinsicAttributes extends React.JSX.IntrinsicAttributes {}
+    interface IntrinsicClassAttributes<T> extends React.JSX.IntrinsicClassAttributes<T> {}
+    interface IntrinsicElements extends React.JSX.IntrinsicElements {}
+}
+
+/**
+ * Create a React element.
+ *
+ * You should not use this function directly. Use JSX and a transpiler instead.
+ */
+export function jsx(
+    type: React.ElementType,
+    props: unknown,
+    key?: React.Key,
+): React.ReactElement;
+
+/**
+ * Create a React element.
+ *
+ * You should not use this function directly. Use JSX and a transpiler instead.
+ */
+export function jsxs(
+    type: React.ElementType,
+    props: unknown,
+    key?: React.Key,
+): React.ReactElement;
+}
+`,
+    },
     {
       filePath: "react.d.ts",
       content: `declare module "react" {
 ${await loadText("https://cdn.jsdelivr.net/npm/@types/react@18.3.1/index.d.ts")}
-}`,
-    },
-    {
-      filePath: "jsx-runtime.d.ts",
-      content: `declare module "react/jsx-runtime" {
-${(
-  await loadText(
-    "https://cdn.jsdelivr.net/npm/@types/react@18.3.1/jsx-runtime.d.ts"
-  )
-).replaceAll('from "./"', 'from "react"')}
 }`,
     },
   ]);