replace code edit with sucrase

app/web/src/nova/ed/panel/popup/script/code-edit/adv-js.ts

@@ -0,0 +1,27 @@
+import { codeBuild } from "../../../../../vi/render/script/code-build";
+import { getMetaById } from "../../../../logic/active/get-meta";
+import { active, PG } from "../../../../logic/ed-global";
+
+export const codeEditAdvJs = (p: PG, value: string) => {
+  const meta = getMetaById(p, active.item_id);
+
+  if (meta) {
+    const mprop = meta.mitem?.get("adv");
+    if (mprop) {
+      try {
+        const valueBuilt = codeBuild(
+          { _: `render (${value})` },
+          `[item: ${meta.item.name} - ${meta.item.id}]`
+        )["_"];
+
+        mprop.doc?.transact(() => {
+          mprop.set("js", value);
+          mprop.set("jsBuilt", valueBuilt);
+          console.log(mprop.toJSON());
+        });
+      } catch (e: any) {
+        return e.message;
+      }
+    }
+  }
+};

app/web/src/nova/ed/panel/popup/script/code-edit/prop-instance.ts

@@ -0,0 +1,20 @@
+import { codeBuild } from "../../../../../vi/render/script/code-build";
+import { getMetaById } from "../../../../logic/active/get-meta";
+import { active, PG } from "../../../../logic/ed-global";
+
+export const codeEditPropInstance = (p: PG, value: string) => {
+  const prop_name = p.ui.popup.script.prop_name;
+  const meta = getMetaById(p, active.item_id);
+
+  if (meta) {
+    const mprop = meta.mitem?.get("component")?.get("props")?.get(prop_name);
+    if (mprop) {
+      const valueBuilt = codeBuild({ _: value })["_"];
+      mprop.doc?.transact(() => {
+        mprop.set("value", value);
+        mprop.set("valueBuilt", valueBuilt);
+      });
+      return valueBuilt;
+    }
+  }
+};

app/web/src/nova/ed/panel/popup/script/code-edit/prop-master.ts

@@ -0,0 +1,42 @@
+import { codeBuild } from "../../../../../vi/render/script/code-build";
+import { active, PG } from "../../../../logic/ed-global";
+
+export const codeEditPropMaster = (p: PG, value: string) => {
+  const prop_kind = p.ui.popup.script.prop_kind;
+  const prop_name = p.ui.popup.script.prop_name;
+  const comp = p.comp.list[active.comp_id];
+
+  if (comp) {
+    const mprop = comp.doc
+      .getMap("map")
+      .get("root")
+      ?.get("component")
+      ?.get("props")
+      ?.get(prop_name);
+    if (mprop) {
+      const valueBuilt = codeBuild({ _: value })["_"];
+      mprop.doc?.transact(() => {
+        if (prop_kind === "value") {
+          mprop.set("value", value);
+          mprop.set("valueBuilt", valueBuilt);
+        } else if (prop_kind === "onChange") {
+          mprop.set("onChange", value);
+          mprop.set("onChangeBuilt", valueBuilt);
+        } else if (prop_kind === "gen") {
+          mprop.set("gen", value);
+          mprop.set("genBuilt", valueBuilt);
+        } else if (prop_kind === "visible") {
+          mprop.set("visible", value);
+        } else if (prop_kind === "typings") {
+          mprop.set("typings", value);
+        } else if (prop_kind === "option") {
+          const meta = mprop.get("meta");
+          if (meta) {
+            meta.set("options", value);
+            meta.set("optionsBuilt", valueBuilt);
+          }
+        }
+      });
+    }
+  }
+};

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

@@ -18,6 +18,9 @@ import { declareScope } from "./scope/scope";
 import { FNCompDef } from "../../../../../utils/types/meta-fn";
 import { editorLocalValue } from "../../../../vi/render/script/local";
 import { propInstanceOnChange } from "../../side/prop-instance/on-change";
+import { codeEditPropMaster } from "./code-edit/prop-master";
+import { codeEditPropInstance } from "./code-edit/prop-instance";
+import { codeEditAdvJs } from "./code-edit/adv-js";
 
 const scriptEdit = {
   timeout: null as any,
@@ -327,22 +330,9 @@ export const EdScriptMonaco: FC<{}> = () => {
             p.ui.popup.script.typings.err_msg = "";
 
             if (stype === "prop-master") {
-              p.sync.code.edit({
+              codeEditPropMaster(p, value);
-                type: "prop-master",
-                prop_kind: p.ui.popup.script.prop_kind,
-                prop_name: p.ui.popup.script.prop_name,
-                value: compress(encode.encode(value || "")),
-                ...arg,
-              });
             } else if (stype === "prop-instance") {
-              const code_result = await p.sync.code.edit({
+              const code_result = codeEditPropInstance(p, value);
-                type: "prop-instance",
-                mode: mode,
-                prop_name: p.ui.popup.script.prop_name,
-                item_id: active.item_id,
-                value: compress(encode.encode(value || "")),
-                ...arg,
-              });
 
               if (p.ui.popup.script.prop_kind === "value") {
                 propInstanceOnChange(p, p.ui.popup.script.prop_name, value);
@@ -356,13 +346,7 @@ export const EdScriptMonaco: FC<{}> = () => {
               }
             } else {
               editorLocalValue[active.item_id] = null;
-              const code_result = await p.sync.code.edit({
+              const code_result = codeEditAdvJs(p, value);
-                type: "adv",
-                mode: mode,
-                item_id: active.item_id,
-                value: compress(encode.encode(value || "")),
-                ...arg,
-              });
 
               if (typeof code_result === "string") {
                 p.ui.popup.script.typings.status = "error";

app/web/src/nova/vi/render/script/code-build.ts

@@ -1,17 +1,20 @@
 import { transform } from "sucrase";
 
-export const codeBuild = (codes: Record<string, string>) => {
+export const codeBuild = (codes: Record<string, string>, filePath?: string) => {
   const result = {} as Record<string, string>;
   for (const [k, v] of Object.entries(codes)) {
     result[k] = transform(v, {
       transforms: ["typescript", "imports", "jsx"],
       preserveDynamicImport: true,
       disableESTransforms: true,
+      filePath: filePath,
     }).code;
 
-    const use_strict = `"use strict";`;
+    const removes = [`"use strict";`];
-    if (result[k].startsWith(use_strict)) {
+    for (const r of removes) {
-      result[k] = result[k].substring(use_strict.length).trim();
+      if (result[k].startsWith(r)) {
+        result[k] = result[k].substring(r.length).trim();
+      }
     }
   }
   return result;

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

@@ -179,7 +179,7 @@ ERROR: $\{e.message}
 }
   `;
   try {
-    const fn = new Function(...Object.keys(arg), '__js', final_src);
+    const fn = new Function(...Object.keys(arg), "__js", final_src);
     fn(...Object.values(arg), meta.item.adv?.js);
   } catch (e: any) {
     console.error(`\n
@@ -210,6 +210,7 @@ export const replacement = {
   "stroke-linejoin": "strokeLinejoin",
   "stroke-linecap": "strokeLinecap",
   "clip-path": "clipPath",
+  "stroke-miterlimit": "strokeMiterlimit",
 };
 
 export const replaceWithObject = (tpl: string, data: any) => {