wip fix tree

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

@@ -112,6 +112,7 @@ export const serverWalkMap = (
   const item = {} as unknown as IItem;
   mapItem(mitem, item);
   if (override_id) {
+    item.originalId = item.id;
     item.id = override_id;
   }
 
@@ -167,6 +168,7 @@ export const serverWalkMap = (
             ref_ids = {};
           }
           const original_id = item.id;
+
           mapItem(mcomp, item);
           item.id = original_id;
 
@@ -208,6 +210,7 @@ export const serverWalkMap = (
           }
 
           if (scope) pcomp.scope[item.id].s = scope;
+
           if (!parent_mcomp) {
             p.scope[item.id] = {
               p: arg.parent_ids,
@@ -241,12 +244,17 @@ export const serverWalkMap = (
   }
 
   if (arg.parent_mcomp && !arg.is_prop) {
+    let id = item.originalId || item.id;
     const pcomp = p.scope_comps[arg.parent_mcomp.id];
-    pcomp.scope[item.id] = { p: arg.parent_ids, n: item.name, s: null };
+    pcomp.scope[id] = {
+      p: arg.parent_ids,
+      n: item.name,
+      s: null,
+    };
     const js = item.adv?.js;
     if (typeof js === "string") {
       const scope = parseJs(js);
-      if (scope) pcomp.scope[item.id].s = scope;
+      if (scope) pcomp.scope[id].s = scope;
     }
   } else {
     if (!(item_comp && item_comp.id)) {

app/srv/ws/sync/editor/parser/parse-js.ts

@@ -1,12 +1,18 @@
 import recast from "recast";
 import babel from "recast/parsers/babel-ts";
 export const parseJs = (code: string) => {
+  const local = { name: "", value: "", index: 0 };
+  const passprop: Record<string, { value: string; index: number }> = {};
+  const result = {} as {
+    local: typeof local | undefined;
+    passprop: typeof passprop | undefined;
+    props: Record<string, { name: string; value: string }>;
+  };
+  try {
     const ast = recast.parse(code, {
       parser: babel,
     });
 
-  const local = { name: "", value: "", index: 0 };
-  const passprop: Record<string, { value: string; index: number }> = {};
     recast.visit(ast, {
       visitJSXOpeningElement({ node }) {
         if (node.name.type === "JSXIdentifier" && node.attributes) {
@@ -62,11 +68,6 @@ export const parseJs = (code: string) => {
       },
     });
 
-  const result = {} as {
-    local: typeof local | undefined;
-    passprop: typeof passprop | undefined;
-    props: Record<string, { name: string; value: string }>;
-  };
     if (local.name) {
       result.local = local;
     }
@@ -77,4 +78,9 @@ export const parseJs = (code: string) => {
     if (Object.keys(result).length > 0) {
       return result;
     }
+  } catch (e) {
+    // console.error(code, "\n", e);
+  }
+  return result;
 };
+ 

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

@@ -177,6 +177,7 @@ export const EDGlobal = {
   comp: {
     doc: null as null | DComp,
     item: null as null | IItem,
+    tree: [] as NodeModel<EdMeta>[],
     list: {} as Record<
       string,
       {

app/web/src/nova/ed/logic/ed-sync.tsx

@@ -38,7 +38,6 @@ export const edInitSync = (p: PG) => {
           navigate(`/ed/`);
         }
       });
-      console.log("site not equal");
       return false;
     }
 
@@ -55,7 +54,6 @@ export const edInitSync = (p: PG) => {
         .then((e) => {
           if (e) navigate(`/ed/${params.site_id}/${e.id}`);
         });
-      console.log("page not found");
       return false;
     }
   }

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

@@ -17,7 +17,6 @@ export const declareScope = async (
   }
 
   if (!s) return;
-
   s.p.push(active_id);
 
   monaco.editor.getModels().forEach((model) => {
@@ -29,6 +28,7 @@ export const declareScope = async (
   const existing: Record<string, IEachArgScope> = {};
   spreadScope(p, s, (arg) => {
     const { name } = arg;
+
     const e = existing[name];
     if (e && e.s.s) {
       if (e.type === "local") {
@@ -132,6 +132,7 @@ const spreadScope = (
           item = layout.scope[parent_id];
         }
       }
+
       if (!item) {
         if (comp_id) {
           item = p.comp.list[comp_id].scope[parent_id];

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

@@ -71,21 +71,8 @@ export const EdPopScript = () => {
               `
             )}
           >
-            {(!jscript.editor || !jscript.build) && (
+            {!jscript.editor && <Loading note={"js-editor"} backdrop={false} />}
-              <>
+            {jscript.editor && <ScriptWorkbench />}
-                {!jscript.editor && !jscript.build && (
-                  <Loading note={"js-code"} backdrop={false} />
-                )}
-                {!jscript.editor && jscript.build && (
-                  <Loading note={"js-editor"} backdrop={false} />
-                )}
-                {!jscript.build && jscript.editor && (
-                  <Loading note={"js-build"} backdrop={false} />
-                )}
-              </>
-            )}
-
-            {jscript.editor && jscript.build && <ScriptWorkbench />}
           </div>
         </div>
       </Modal>

app/web/src/nova/ed/panel/popup/site/site-popup.tsx

@@ -7,10 +7,7 @@ import { EDGlobal } from "../../../logic/ed-global";
 import { EdFormSite } from "./site-form";
 import { EdSiteHead } from "./site-head";
 import { EdSiteTree, SiteGroupItem } from "./site-tree";
-
-import uFuzzy from "@leeoniya/ufuzzy";
 import { fuzzy } from "../../../../../utils/ui/fuzzy";
-const uf = new uFuzzy({});
 
 const conf = { group: null as any };
 

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

@@ -38,7 +38,7 @@ export const EdMonacoWrap = ({
 }) => {
   const local = useLocal({});
 
-  if (jscript.pending && (!jscript.editor || !jscript.build)) {
+  if (jscript.pending && !jscript.editor) {
     jscript.pending.then(() => {
       local.render();
     });
@@ -99,7 +99,7 @@ export const EdMonacoWrap = ({
       {header}
       <div className="relative flex-1">
         <div className="absolute inset-0">
-          {!jscript.editor || !jscript.build ? (
+          {!jscript.editor ? (
             <Loading note="script-cst" backdrop={false} />
           ) : (
             children(jscript.editor)

app/web/src/nova/ed/panel/tree/body.tsx

@@ -16,21 +16,25 @@ import { doTreeSearch } from "./search";
 
 export const EdTreeBody = () => {
   const p = useGlobal(EDGlobal, "EDITOR");
-  const local = useLocal({ tree: null as TreeMethods | null });
+  const local = useLocal({ tree: null as TreeMethods | null, comp_id: "" });
   const TypedTree = DNDTree<EdMeta>;
 
   indentHook(p, local);
 
+  if (active.comp_id && local.comp_id !== active.comp_id) {
+    local.comp_id = active.comp_id;
+    const ref = p.comp.list[active.comp_id];
+    if (ref) {
+      p.comp.tree = ref.tree;
+    }
+  }
+
   let tree: NodeModel<EdMeta>[] = [];
   if (p.ui.tree.search) {
     tree = doTreeSearch(p);
   } else {
-    if (
+    if (!!active.comp_id) {
-      active.comp_id &&
+      tree = p.comp.tree;
-      p.comp.list[active.comp_id] &&
-      p.comp.list[active.comp_id].tree
-    ) {
-      tree = p.comp.list[active.comp_id].tree;
     } else {
       tree = p.page.tree;
     }
@@ -39,7 +43,7 @@ export const EdTreeBody = () => {
   if (tree.length === 0)
     return (
       <div className="flex py-[100px] select-none justify-center flex-1">
-        <div className="flex flex-col">
+        <div className="flex flex-col items-center">
           <img
             draggable={false}
             src="/img/empty.png"
@@ -47,7 +51,26 @@ export const EdTreeBody = () => {
               width: 50px;
             `}
           />
-          <div className="mt-[20px]">No Item</div>
+          <div className="mt-[20px] text-[12px]">— No Item —</div>
+          {active.comp_id && (
+            <div
+              className="flex items-center border border-slate-500 bg-white rounded-sm text-[10px] px-[2px] cursor-pointer hover:bg-purple-100 hover:border-purple-600 mt-5"
+              onClick={(e) => {
+                e.stopPropagation();
+                e.preventDefault();
+
+                if (active.comp_id) {
+                  active.comp_id = active.instance.comp_id || "";
+                  active.item_id = active.instance.item_id || "";
+                  active.instance.comp_id = "";
+                  active.instance.item_id = "";
+                  p.render();
+                }
+              }}
+            >
+              Close Component
+            </div>
+          )}
         </div>
       </div>
     );

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

@@ -30,7 +30,7 @@ export const jscript = {
     estree: null as null | typeof estree,
     ts: null as null | typeof ts,
   },
-  async init(render: () => void) {
+  async init(render: () => void, enabled?: { esbuild: boolean }) {
     if (this.pending) {
       await this.pending;
       render();
@@ -39,9 +39,12 @@ export const jscript = {
       this.pending = new Promise<void>(async (resolve) => {
         this.events.pendingDone = resolve;
 
-        const { sendIPC } = await import("./esbuild/ipc");
+        let sendIPC = null as any;
+        if (enabled?.esbuild !== false) {
+          sendIPC = (await import("./esbuild/ipc")).sendIPC;
           await initJS();
           this.events.esbuildLoaded();
+        }
 
         this.prettier.standalone = (
           await import("prettier/standalone")
@@ -55,6 +58,7 @@ export const jscript = {
         e.loader.config({ paths: { vs: "/min/vs" } });
         this.events.editorLoaded();
 
+        if (enabled?.esbuild !== false) {
           this.build = async (entry, src, files, verbose?: boolean) => {
             const options: BuildOptions = {
               entryPoints: [entry],
@@ -78,6 +82,7 @@ export const jscript = {
           };
 
           await this.build("el.tsx", `return ""`);
+        }
         render();
       });
     }