wip fix

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

@@ -161,11 +161,14 @@ export const code_edit: SAction["code"]["edit"] = async function (
           const mprop = mprops?.get(prop_name);
           if (mprop) {
             try {
-              const res = await transform(`return ${src}`, {
+              const res =
-                jsx: "transform",
+                prop_kind !== "typings"
-                format: "cjs",
+                  ? await transform(`return ${src}`, {
-                loader: "tsx",
+                      jsx: "transform",
-              });
+                      format: "cjs",
+                      loader: "tsx",
+                    })
+                  : { code: src };
               doc?.transact(() => {
                 if (prop_kind === "value") {
                   mprop.set("value", src);
@@ -175,6 +178,8 @@ export const code_edit: SAction["code"]["edit"] = async function (
                   mprop.set("genBuilt", res.code.substring(6));
                 } else if (prop_kind === "visible") {
                   mprop.set("visible", src);
+                } else if (prop_kind === "typings") {
+                  mprop.set("typings", src);
                 } else if (prop_kind === "option") {
                   const meta = mprop.get("meta");
                   if (meta) {

app/srv/ws/sync/editor/prep-page.ts

@@ -90,11 +90,13 @@ export const loadCompForPage = async (ctree: IRoot, sync: SyncConnection) => {
                 userSyncComponent(sync, id);
               }
 
-              result.add(id);
+              if (docs.comp[id]) {
-              mcomps[id] = docs.comp[id].doc
+                result.add(id);
-                .getMap("map")
+                mcomps[id] = docs.comp[id].doc
-                .get("root")
+                  .getMap("map")
-                ?.toJSON() as IItem;
+                  .get("root")
+                  ?.toJSON() as IItem;
+              }
             }
           },
         }

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

@@ -40,7 +40,7 @@ export const EmptySite = {
 export type ESite = typeof EmptySite;
 export type EPage = typeof EmptyPage;
 export type EComp = typeof EmptyComp;
-export type PropFieldKind = "visible" | "gen" | "value" | "option";
+export type PropFieldKind = "visible" | "gen" | "value" | "option" | "typings";
 export type ISingleScope = {
   p: string[];
   n: string;

app/web/src/nova/ed/logic/tree/assign-mitem.ts

@@ -60,11 +60,18 @@ export const assignMitem = (arg: {
 
       if (m.item.component?.props) {
         for (const [prop_name, v] of Object.entries(m.item.component.props)) {
-          const mprop = m.mitem?.get("component")?.get("props")?.get(prop_name);
+          let mprop = m.mitem?.get("component")?.get("props")?.get(prop_name);
+          if (!mprop) {
+            const mprops = m.mitem?.get("component")?.get("props");
+            if (mprops) {
+              arg.new_prop_jsx(m, mprops, prop_name, v);
+            }
+          }
 
           if (v.content) {
             if (mprop) {
               const pmeta = meta[v.content.id];
+
               if (pmeta) {
                 pmeta.mitem = mprop.get("content");
               }

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

@@ -8,6 +8,8 @@ import { loadCompSnapshot, loadComponent } from "../comp/load";
 import { IMeta, PG, active } from "../ed-global";
 import { assignMitem } from "./assign-mitem";
 import { pushTreeNode } from "./build/push-tree";
+import { createId } from "@paralleldrive/cuid2";
+import { FMCompDef } from "../../../../utils/types/meta-fn";
 
 export const treeCacheBuild = async (p: PG, page_id: string) => {
   const page_cache = p.preview.page_cache[page_id];
@@ -125,14 +127,11 @@ export const treeRebuild = async (p: PG, arg?: { note?: string }) => {
                   mitem,
                   meta,
                   new_prop_jsx(meta, mprops, prop_name, prop_val) {
-                    // if (prop_val.meta?.type === "content-element") {
+                    if (!mprops.get(prop_name)) {
-                    //   transact.list.push(() => {
+                      const map = new Y.Map();
-                    //     const map = new Y.Map();
+                      syncronize(map, prop_val);
-                    //     if (prop_val.content) prop_val.content.id = createId();
+                      mprops.set(prop_name, map as FMCompDef);
-                    //     syncronize(map, prop_val);
+                    }
-                    //     mprops.set(prop_name, map as any);
-                    //   });
-                    // }
                   },
                 });
               }
@@ -141,14 +140,6 @@ export const treeRebuild = async (p: PG, arg?: { note?: string }) => {
         },
         { item }
       );
-
-      if (transact.list.length > 0) {
-        p.page.doc?.transact(() => {
-          for (const fn of transact.list) {
-            fn();
-          }
-        });
-      }
     }
   }
 
@@ -183,7 +174,3 @@ export const treeRebuild = async (p: PG, arg?: { note?: string }) => {
     }
   }
 };
-
-const transact = {
-  list: [] as (() => void)[],
-};

app/web/src/nova/ed/panel/popup/script/default-val.tsx

@@ -44,6 +44,8 @@ async () => {
 }`;
         } else if (kind === "visible") {
           val = mprop.get("visible") || "true";
+        }  else if (kind === "typings") {
+          val = mprop.get("typings") || "const typings = {}";
         } else if (kind === "option") {
           val =
             mprop.get("meta")?.get("options") ||

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

@@ -16,6 +16,7 @@ import { declareScope } from "./scope/scope";
 // @ts-ignore
 import { constrainedEditor } from "constrained-editor-plugin/dist/esm/constrainedEditor";
 import { addScope } from "./scope/add-scope";
+import { FNCompDef } from "../../../../../utils/types/meta-fn";
 
 const scriptEdit = {
   timeout: null as any,
@@ -95,6 +96,7 @@ export const EdScriptMonaco: FC<{}> = () => {
               }
             }
           }
+
           if (p.ui.popup.script.mode === "js") {
             const w = window as any;
             const types: any = {};
@@ -109,20 +111,20 @@ export const EdScriptMonaco: FC<{}> = () => {
               }
             }
 
-            await monacoTypings(
+            let component = { id: "", props: {} as Record<string, FNCompDef> };
-              {
+            if (meta?.item.component?.id && meta.item.component.props) {
-                site_dts: p.site_dts,
+              component.id = meta.item.component.id;
-                script: {
+              component.props = meta.item.component.props;
-                  siteTypes: p.script.site_types,
+            }
-                },
+            if (meta?.parent?.comp_id && meta.parent.instance_id) {
-                site: p.site.config,
+              const comp_meta = p.page.meta[meta.parent.instance_id];
-              },
+
-              monaco,
+              if (comp_meta && comp_meta.item.component?.id) {
-              {
+                component.id = comp_meta.item.component.id;
-                types,
+                component.props = comp_meta.item.component.props;
-                values: {},
               }
-            );
+            }
+
             if (meta) {
               switch (type) {
                 case "prop-master":
@@ -143,25 +145,24 @@ export const EdScriptMonaco: FC<{}> = () => {
                       monaco.Uri.parse("file:///active.tsx")
                     );
                     editor.setModel(nmodel);
-                    const constrainedInstance = constrainedEditor(monaco);
+
-                    constrainedInstance.initializeIn(editor);
+                    if (component.id) {
-                    const model = editor.getModel();
+                      const prop_name = p.ui.popup.script.prop_name;
-                    constrainedInstance.removeRestrictionsIn(model);
+                      const prop = component.props[prop_name];
-                    const frange = model?.getFullModelRange();
+                      if (typeof prop.typings === "string") {
-                    if (frange) {
+                        const typings_src = prop.typings.substring(
-                      // const ranges = [
+                          `const typings = `.length
-                      //   {
+                        );
-                      //     range: [
+                        const typings_fn = new Function(
-                      //       end_hide + 1,
+                          `return ${typings_src}`
-                      //       `export const ${p.ui.popup.script.prop_name} = `
+                        );
-                      //         .length,
+                        const typings = typings_fn();
-                      //       frange.getEndPosition().lineNumber,
+                        for (const [k, v] of Object.entries(typings)) {
-                      //       frange.getEndPosition().column,
+                          if (typeof v === "string") {
-                      //     ],
+                            types[k] = v;
-                      //     allowMultiline: true,
+                          }
-                      //   },
+                        }
-                      // ];
+                      }
-                      // constrainedInstance.addRestrictionsTo(model, ranges);
                     }
                   }
                   break;
@@ -199,10 +200,44 @@ export const EdScriptMonaco: FC<{}> = () => {
                       const range = new monaco.Range(1, 1, end_hide, 1);
                       (editor as any).setHiddenAreas([range]);
                     }
+
+                    if (component.id && meta.jsx_prop?.name) {
+                      const prop_name = meta.jsx_prop.name;
+                      const prop = component.props[prop_name];
+                      if (typeof prop.typings === "string") {
+                        const typings_src = prop.typings.substring(
+                          `const typings = `.length
+                        );
+                        const typings_fn = new Function(
+                          `return ${typings_src}`
+                        );
+                        const typings = typings_fn();
+                        for (const [k, v] of Object.entries(typings)) {
+                          if (typeof v === "string") {
+                            types[k] = v;
+                          }
+                        }
+                      }
+                    }
                   }
                   break;
               }
             }
+
+            await monacoTypings(
+              {
+                site_dts: p.site_dts,
+                script: {
+                  siteTypes: p.script.site_types,
+                },
+                site: p.site.config,
+              },
+              monaco,
+              {
+                types,
+                values: {},
+              }
+            );
             await jsMount(editor, monaco, p);
           } else {
             const model = monaco.editor.createModel(
@@ -362,7 +397,6 @@ export const EdScriptMonaco: FC<{}> = () => {
                 scope = code_result;
               }
             } else {
-              console.log(value);
               const code_result = await p.sync.code.edit({
                 type: "adv",
                 mode: mode,

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

@@ -232,6 +232,16 @@ export const EdPropPopoverForm: FC<{
           </div>
         </div>
       )}
+
+      <div className="border-t border-slate-300 pl-2 pt-1 flex justify-between items-center">
+        <div className="uppercase text-xs">TYPINGS</div>
+        <div
+          className="m-1 px-1 bg-white cursor-pointer hover:bg-blue-500 hover:text-white hover:border-blue-500 font-mono border border-slate-300 text-[11px]"
+          onClick={createEditScript(p, "typings", mprop, name)}
+        >
+          EDIT CODE
+        </div>
+      </div>
     </div>
   );
 };

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

@@ -25,6 +25,7 @@ export type FNComponent = {
 
 export type FNCompDef = {
   idx: number;
+  typings: string;
   type: string;
   value: any;
   valueBuilt: any;