ele-admin-plus 1.2.2-beta.5 → 1.3.0-beta.2

package/lib/ele-pro-form-builder/components/code-template.d.ts

@@ -0,0 +1,130 @@
+import { ProFormItemProps, ProFormItemTypeData } from '../../ele-pro-form/types';
+import { ComponentGroup, TemplateFormConfig } from '../types';
+
+/**
+ * ProForm 代码生成模板
+ */
+export declare const proTemplate = "<template>\n  <pro-form\n    :model=\"form\"\n    :items=\"formItems\"<% d.proFormPropsCode %><%# if(d.showFooterExpand){ %>\n    v-model:search-expand=\"form.searchExpand\"<%# } %>\n    @updateValue=\"setFieldValue\"\n    @submit=\"handleSubmit\"\n    @reset=\"handleReset\"\n  />\n</template>\n\n<script setup>\n  <% d.proFormImportCode %>\n\n  /** \u8868\u5355\u6570\u636E */\n  const [form, resetFields, _assignFields, setFieldValue] = useFormData(<% d.modelCode %>);\n\n  /** \u63D0\u4EA4 */\n  const handleSubmit = (form) => {\n    console.log(form);\n  };\n\n  /** \u91CD\u7F6E */\n  const handleReset = () => {<%# if(d.showFooterExpand){ %>\n    resetFields(void 0, ['searchExpand']);<%# }else{ %>\n    resetFields();<%# } %>\n  };<%# if(d.proFormVarCode){ %>\n\n  <% d.proFormVarCode %><%# } %>\n\n  /** \u8868\u5355\u9879 */\n  const formItems = ref(<% d.proFormItemsCode %>);\n</script>\n";
+/**
+ * ElForm 代码生成模板
+ */
+export declare const formTemplate = "<template>\n  <el-form\n    ref=\"formRef\"\n    :model=\"form\"\n    :rules=\"rules\"<% d.formPropsCode %>\n    @submit.prevent=\"\"\n  ><% d.formContentCode %>\n  </el-form>\n</template>\n\n<script setup>\n  <% d.formImportCode %>\n\n  /** \u8868\u5355\u5B9E\u4F8B */\n  const formRef = ref(null);\n\n  /** \u8868\u5355\u6570\u636E */\n  const [form, resetFields, _assignFields] = useFormData(<% d.modelCode %>);\n\n  /** \u8868\u5355\u9A8C\u8BC1\u89C4\u5219 */\n  const rules = reactive(<% d.formRuleCode %>);\n\n  /** \u4FDD\u5B58\u7F16\u8F91 */\n  const <% d.showFooter?'':'_' %>handleSubmit = () => {\n    formRef.value?.validate?.((valid) => {\n      if (!valid) {\n        return;\n      }\n      console.log(form);\n    });\n  };\n\n  /** \u91CD\u7F6E\u8868\u5355 */\n  const <% d.showFooter?'':'_' %>handleReset = () => {<%# if(d.showFooterExpand){ %>\n    resetFields(void 0, ['searchExpand']);<%# }else{ %>\n    resetFields();<%# } %>\n    nextTick(() => {\n      nextTick(() => {\n        formRef.value?.clearValidate?.();\n      });\n    });\n  };<%# if(d.formVarCode){ %>\n\n  <% d.formVarCode %><%# } %>\n</script>\n";
+/**
+ * ElForm 内容代码生成模板
+ */
+export declare const contentTemplate = "<%# getFormContent(d.items,d.grid,d.rowProps,d.indentSize,d.contentExtra,d.contentExtraColProps); function getFormContent(items,grid,rowProps,indentSize,contentExtra,contentExtraColProps){ var indentChar = Array.from({length:indentSize||0}).fill(' ').join(''); if(!grid){ (items||[]).forEach(function(item){ %>\n<% indentChar %><%# getFormItem(item,indentSize); }); if(contentExtra){ %>\n<% indentChar %><% d.addIndentChar(contentExtra,indentChar) %><%# } }else if(items&&items.length){ %>\n<% indentChar %><el-row<% d.addIndentChar(d.generatePropsCode(rowProps,null,2,true),indentChar) %>><%# items.forEach(function(item){ %>\n<% indentChar %>  <el-col<% d.generateColProps(item,grid,4,indentChar) %>>\n<% indentChar %>    <%# getFormItem(item,(indentSize||0)+4); %>\n<% indentChar %>  </el-col><%# }); if(contentExtra){ %>\n<% indentChar %>  <el-col<% d.generateColProps(null,contentExtraColProps,4,indentChar) %>>\n<% indentChar %>    <% d.addIndentChar(contentExtra,'    '+indentChar) %>\n<% indentChar %>  </el-col><%# } %>\n<% indentChar %></el-row><%# } } function getFormItem(item,indentSize){ var indentChar = Array.from({length:indentSize||0}).fill(' ').join(''); if(item.type=='icon'){ %><el-icon<% d.generateComponentProps(item,2,indentChar) %>><%# if(item.label){ %>\n<% indentChar %>  <<% item.label %> /><%# } getFormContent(item.children,item.grid,item.rowProps,indentSize+2); %>\n<% indentChar %></el-icon><%# }else if(d.viewTypes.includes(item.type)){ %><<% d.getComponentTag(item) %><% d.generateComponentProps(item,2,indentChar) %>><%# if(item.label){ %>\n<% indentChar %>  <% item.label %><%# } getFormContent(item.children,item.grid,item.rowProps,indentSize+2); %>\n<% indentChar %></<% d.getComponentTag(item) %>><%# }else if(item.type=='card'){ %><ele-card<% d.generateComponentProps(item,2,indentChar) %>><%# getFormContent(item.children,item.grid,item.rowProps,indentSize+2); %>\n<% indentChar %></ele-card><%# }else if(item.type=='tabs'){ %><ele-tabs<% d.generateComponentProps(item,2,indentChar) %>><%# (item.children||[]).forEach(function(tabItem){ %>\n<% indentChar %>  <template #<% tabItem.prop %>><%# getFormContent(tabItem.children,tabItem.grid,tabItem.rowProps,indentSize+4); %>\n<% indentChar %>  </template><%# }); %>\n<% indentChar %></ele-tabs><%# }else if(item.type=='div'){ var divTagName = d.getDivTag(item); %><<% divTagName %><% d.generateComponentProps(item,2,indentChar) %>><%# if(item.label){ %>\n<% indentChar %>  <% item.label %><%# } getFormContent(item.children,item.grid,item.rowProps,indentSize+2); %>\n<% indentChar %></<% divTagName %>><%# }else if(d.isContainerType(item.type)){ %><<% d.getComponentTag(item) %><% d.generateComponentProps(item,2,indentChar) %>><%# if(item.label&&!['collapseItem'].includes(item.type)){ %>\n<% indentChar %>  <% item.label %><%# } getFormContent(item.children,item.grid,item.rowProps,indentSize+2); %>\n<% indentChar %></<% d.getComponentTag(item) %>><%# }else{ %><el-form-item<% d.generateFormItemProps(item,2,indentChar) %>>\n<% indentChar %>  <%# if(item.type=='select'||item.type=='multipleSelect'){ %><el-select<% d.generateComponentProps(item,4,indentChar) %>><%# (item.options||[]).forEach(function(opt){ %>\n<% indentChar %>    <el-option<% d.generatePropsCode(opt,true) %> /><%# }); %>\n<% indentChar %>  </el-select><%# }else if(item.type=='radio'){ %><el-radio-group<% d.generateComponentProps(item,4,indentChar) %>><%# (item.options||[]).forEach(function(opt){ %>\n<% indentChar %>    <el-radio<% d.generatePropsCode(opt,true) %> /><%# }); %>\n<% indentChar %>  </el-radio-group><%# }else if(item.type=='radioButton'){ %><el-radio-group<% d.generateComponentProps(item,4,indentChar) %>><%# (item.options||[]).forEach(function(opt){ %>\n<% indentChar %>    <el-radio-button<% d.generatePropsCode(opt,true) %> /><%# }); %>\n<% indentChar %>  </el-radio-group><%# }else if(item.type=='checkbox'){ %><el-checkbox-group<% d.generateComponentProps(item,4,indentChar) %>><%# (item.options||[]).forEach(function(opt){ %>\n<% indentChar %>    <el-checkbox<% d.generatePropsCode(opt,true) %> /><%# }); %>\n<% indentChar %>  </el-checkbox-group><%# }else if(item.type=='checkboxButton'){ %><el-checkbox-group<% d.generateComponentProps(item,4,indentChar) %>><%# (item.options||[]).forEach(function(opt){ %>\n<% indentChar %>    <el-checkbox-button<% d.generatePropsCode(opt,true) %> /><%# }); %>\n<% indentChar %>  </el-checkbox-group><%# }else if(item.type=='text'){ %><ele-text<% d.generateComponentProps(item,4,indentChar) %>>\n<% indentChar %>    {{ form.<% item.prop %> }}\n<% indentChar %>  </ele-text><%# }else{ %><% d.generateComponentCode(item,4,indentChar) %><%# } %>\n<% indentChar %></el-form-item><%# } } %>";
+/**
+ * ElForm 底栏代码生成模板
+ */
+export declare const footerTemplate = "<el-form-item<% d.footerPropsCode %>>\n  <div :style=\"<% d.footerStyleCode %>\">\n    <el-button type=\"primary\" @click=\"handleSubmit\"><% d.showFooterExpand?'\u641C\u7D22':'\u63D0\u4EA4' %></el-button>\n    <el-button @click=\"handleReset\">\u91CD\u7F6E</el-button><%# if(d.showFooterExpand){ %>\n    <el-link\n      type=\"primary\"\n      :underline=\"false\"\n      @click=\"form.searchExpand = !form.searchExpand\"\n      style=\"margin-left: 12px\"\n    >\n      <template v-if=\"form.searchExpand\">\n        <span>\u6536\u8D77</span>\n        <el-icon style=\"vertical-align: -1px\">\n          <ArrowUp />\n        </el-icon>\n      </template>\n      <template v-else>\n        <span>\u5C55\u5F00</span>\n        <el-icon style=\"vertical-align: -2px\">\n          <ArrowDown />\n        </el-icon>\n      </template>\n    </el-link><%# } %>\n  </div>\n</el-form-item>";
+/**
+ * 生成 ElForm 底栏代码
+ * @param formProps 表单配置
+ * @param showFooterExpand 是否需要展开收起按钮
+ */
+export declare function generateFooterCode(formProps: TemplateFormConfig, showFooterExpand?: boolean): string;
+/**
+ * 生成 ElFormItem 所有属性代码
+ * @param item 表单项
+ * @param indentChar 上层代码缩进
+ * @param indentSize 属性换行的缩进空格数量
+ */
+export declare function generateFormItemProps(item: ProFormItemProps, indentSize?: number, indentChar?: string): string;
+/**
+ * 生成 ElCol 所有属性代码
+ * @param item 表单项
+ * @param grid 父级的 grid 属性
+ * @param indentChar 上层代码缩进
+ * @param indentSize 属性换行的缩进空格数量
+ */
+export declare function generateColProps(item?: ProFormItemProps, grid?: Record<string, any> | boolean, indentSize?: number, indentChar?: string): string;
+/**
+ * 生成容器组件和非单标签组件的所有属性代码
+ * @param item 表单项
+ * @param indentSize 属性换行的缩进空格数量
+ * @param indentChar 上层代码缩进
+ */
+export declare function generateComponentProps(item: ProFormItemProps, indentSize?: number, indentChar?: string): string;
+/**
+ * 生成 ElForm 代码时获取组件使用的组件名称
+ * @param item 表单项
+ * @param componentData 组件库数据
+ */
+export declare function getItemComponentTag(item: ProFormItemProps, componentData?: ComponentGroup[]): string;
+/**
+ * 生成展示型组件和单标签组件的完整代码
+ * @param item 表单项
+ * @param indentSize 属性换行的缩进空格数量
+ * @param indentChar 上层代码缩进
+ * @param content 展示型组件的文本内容
+ * @param componentData 组件库数据
+ */
+export declare function generateItemComponentCode(item: ProFormItemProps, indentSize: number | undefined, indentChar: string | undefined, content: string | undefined, componentData?: ComponentGroup[]): string;
+/**
+ * 生成 ElForm 代码时获取 div 容器使用的组件名称
+ * @param item 表单项
+ */
+export declare function getDivTag(item: ProFormItemProps): any;
+/**
+ * 生成 ElForm 内容代码
+ * @param items 表单项数据
+ * @param formProps 表单配置
+ * @param showFooterExpand 是否需要展开收起按钮
+ * @param componentData 组件库数据
+ * @param itemTypeData 高级表单组件类型数据
+ */
+export declare function generateContentCode(items: ProFormItemProps[], formProps: TemplateFormConfig, showFooterExpand: boolean | undefined, componentData?: ComponentGroup[], itemTypeData?: ProFormItemTypeData[]): string;
+/**
+ * 获取上传组件表单验证方法代码
+ * @param item 表单项
+ */
+export declare function getUploadValidatorCode(item: ProFormItemProps): string;
+/**
+ * 生成 ElForm 验证规则代码
+ * @param items 表单项数据
+ * @param componentData 组件库数据
+ * @param itemTypeData 高级表单组件类型数据
+ */
+export declare function generateRuleCode(items: ProFormItemProps[], componentData?: ComponentGroup[], itemTypeData?: ProFormItemTypeData[]): any;
+/**
+ * 获取生成 ElForm 代码时组件的属性
+ * @param item 表单项
+ * @param componentData 组件库数据
+ * @param itemTypeData 高级表单组件类型数据
+ */
+export declare function getComponentProps(item: ProFormItemProps, componentData?: ComponentGroup[], itemTypeData?: ProFormItemTypeData[]): {
+    [x: string]: any;
+};
+/**
+ * 获取导入代码和变量声明代码
+ * @param items 表单项
+ * @param formProps 表单其它属性
+ */
+export declare function getImportAndVarCode(items: ProFormItemProps[], formProps: TemplateFormConfig): {
+    imports: string[];
+    codes: string[];
+    proImports: string[];
+    proCodes: string[];
+};
+/**
+ * 取消表单项数据的多余属性
+ * @param items 表单项数据
+ * @param isEl 是否是生成 ElForm 代码
+ * @param componentData 组件库数据
+ * @param itemTypeData 高级表单组件类型数据
+ */
+export declare function getNormalizeItems(formItems?: ProFormItemProps[], isEl?: boolean, componentData?: ComponentGroup[], itemTypeData?: ProFormItemTypeData[]): any;
+/**
+ * 生成 ProForm 代码
+ * @param config 表单配置数据
+ * @param componentData 组件库数据
+ * @param itemTypeData 高级表单组件类型数据
+ */
+export declare function generateProFormCode(config?: TemplateFormConfig, componentData?: ComponentGroup[], itemTypeData?: ProFormItemTypeData[]): string;
+/**
+ * 生成 ElForm 代码
+ * @param config 表单配置数据
+ * @param componentData 组件库数据
+ * @param itemTypeData 高级表单组件类型数据
+ */
+export declare function generateElFormCode(config?: TemplateFormConfig, componentData?: ComponentGroup[], itemTypeData?: ProFormItemTypeData[]): string;

package/lib/ele-pro-form-builder/components/code-util.cjs

@@ -0,0 +1,225 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const codeJsVar = require("./code-js-var");
+function templateEngine(template, data = {}) {
+  if (typeof template !== "string" || !template) {
+    return "";
+  }
+  const openCode = "<%";
+  const closeCode = "%>";
+  try {
+    const jss = new RegExp("^" + openCode + "#", "g");
+    const jsse = new RegExp(closeCode + "$", "g");
+    const result = template.replace(new RegExp(openCode + "#", "g"), openCode + "# ").replace(new RegExp(closeCode + "}", "g"), "} " + closeCode).replace(/\\/g, "\\\\").replace(new RegExp(openCode + "!(.+?)!" + closeCode, "g"), (str) => {
+      return str.replace(new RegExp("^" + openCode + "!", "g"), "").replace(new RegExp("!" + closeCode, "g"), "").replace(new RegExp(openCode + "|" + closeCode, "g"), (tag) => {
+        return tag.replace(/(.)/g, "\\$1");
+      });
+    }).replace(/(?="|')/g, "\\").replace(
+      new RegExp(openCode + "#([\\s\\S])+?" + closeCode, "g"),
+      (str) => {
+        return '";' + str.replace(jss, "").replace(jsse, "").replace(/\\/g, "") + ';view+="';
+      }
+    ).replace(new RegExp(openCode + "([^{#}])*?" + closeCode, "g"), (str) => {
+      if (str.replace(/\s/g, "") === openCode + closeCode) {
+        return "";
+      }
+      let start = '"+(';
+      str = str.replace(new RegExp(openCode + "|" + closeCode, "g"), "");
+      if (/^=/.test(str)) {
+        str = str.replace(/^=/, "");
+        start = '"+_escape_(';
+      }
+      return start + str.replace(/\\/g, "") + ')+"';
+    }).replace(/\r\n/g, '\\r\\n" + "').replace(/\n/g, '\\n" + "').replace(/\r/g, '\\r" + "');
+    return new Function(
+      "d, _escape_",
+      '"use strict";var view = "' + result + '";return view;'
+    )(data, (str) => {
+      return String(str || "").replace(/&(?!#?[a-zA-Z0-9]+;)/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/'/g, "&#39;").replace(/"/g, "&quot;");
+    });
+  } catch (e) {
+    console.error("TemplateEngine Error: ", e, "\n" + (template || ""));
+    return "";
+  }
+}
+function addIndentChar(code, indentChar) {
+  if (code == null || !indentChar) {
+    return code ?? "";
+  }
+  return code.split("\n").join("\n" + indentChar);
+}
+function escapeStr(str) {
+  const escapes = {
+    "'": "\\'",
+    "\\": "\\\\",
+    "\n": "\\n",
+    "\r": "\\r",
+    "	": "\\t",
+    "\b": "\\b",
+    "\f": "\\f"
+  };
+  return str.replace(/['\\\n\r\t\b\f]/g, (char) => escapes[char]);
+}
+function isValidKey(name) {
+  const pattern = /^[a-zA-Z_$][0-9a-zA-Z_$]*$/;
+  if (!pattern.test(name)) {
+    return false;
+  }
+  const keywords = [
+    "break",
+    "case",
+    "catch",
+    "class",
+    "const",
+    "continue",
+    "debugger",
+    "default",
+    "delete",
+    "do",
+    "else",
+    "enum",
+    "export",
+    "extends",
+    "finally",
+    "for",
+    "function",
+    "if",
+    "goto",
+    "implements",
+    "import",
+    "in",
+    "instanceof",
+    "interface",
+    "let",
+    "new",
+    "package",
+    "private",
+    "protected",
+    "public",
+    "return",
+    "static",
+    "super",
+    "switch",
+    "this",
+    "throw",
+    "try",
+    "typeof",
+    "var",
+    "void",
+    "while",
+    "with",
+    "yield",
+    "as",
+    "async",
+    "await",
+    "of",
+    "static",
+    "from",
+    "null",
+    "true",
+    "false"
+  ];
+  return !keywords.includes(name);
+}
+function obj2Str(obj, singleLine, indentSize, transformJsVarFunc) {
+  if (typeof obj === "undefined") {
+    return "void 0";
+  }
+  if (obj === null) {
+    return "null";
+  }
+  const indent = indentSize ?? 0;
+  const indentChar = Array.from({ length: indent }).fill(" ").join("");
+  const jsVar = (transformJsVarFunc ?? codeJsVar.transformJsVar)(obj);
+  if (jsVar != null && jsVar.name) {
+    if (singleLine) {
+      return jsVar.name;
+    }
+    return addIndentChar(jsVar.name, indentChar);
+  }
+  if (typeof obj === "string") {
+    return `'${escapeStr(obj)}'`;
+  }
+  if (Array.isArray(obj)) {
+    if (!obj.length) {
+      return "[]";
+    }
+    const result = obj.map(
+      (v) => obj2Str(v, singleLine, indent + 2, transformJsVarFunc)
+    );
+    if (singleLine) {
+      return `[ ${result.join(", ")} ]`;
+    }
+    const code = result.join(",\n  " + indentChar);
+    return "[\n  " + indentChar + code + "\n" + indentChar + "]";
+  }
+  if (typeof obj === "object") {
+    const result = [];
+    Object.keys(obj).forEach((k) => {
+      const code2 = obj2Str(obj[k], singleLine, indent + 2, transformJsVarFunc);
+      result.push(isValidKey(k) ? `${k}: ${code2}` : `'${k}': ${code2}`);
+    });
+    if (!result.length) {
+      return "{}";
+    }
+    if (singleLine) {
+      return `{ ${result.join(", ")} }`;
+    }
+    const code = result.join(",\n  " + indentChar);
+    return "{\n  " + indentChar + code + "\n" + indentChar + "}";
+  }
+  return JSON.stringify(obj) || "";
+}
+function kebabCase(name) {
+  return name.replace(/([A-Z])/g, " $1").trim().split(" ").join("-").toLowerCase();
+}
+function generatePropsCode(props, singleLine, indentSize, isAllProps, transformJsVarFunc) {
+  if (!props) {
+    return "";
+  }
+  const keys = Object.keys(props).filter(
+    (k) => typeof props[k] !== "undefined"
+  );
+  if (!keys.length) {
+    return "";
+  }
+  const codes = keys.map((k) => {
+    const key = kebabCase(k);
+    const jsVar = (transformJsVarFunc ?? codeJsVar.transformJsVar)(props[k]);
+    if (jsVar != null && jsVar.name) {
+      if (key === "ref" || key === "v-model" || key === "v-if") {
+        return `${key}="${jsVar.name}"`;
+      }
+      if (key.startsWith("on-")) {
+        return `@${key.slice(3)}="${jsVar.name}"`;
+      }
+      return `:${key}="${jsVar.name}"`;
+    }
+    if (typeof props[k] === "string") {
+      if (key === "v-if") {
+        return `${key}="${props[k]}"`;
+      }
+      const str = escapeStr(props[k]);
+      if (str.includes("\\n") && !str.includes("`")) {
+        return `:${key}="\`${str}\`"`;
+      }
+      return `${key}="${str}"`;
+    }
+    return `:${key}="${obj2Str(props[k], true, void 0, transformJsVarFunc)}"`;
+  });
+  const isAll = isAllProps ?? true;
+  if (singleLine ?? keys.length <= 2) {
+    return (isAll ? " " : "") + codes.join(" ");
+  }
+  const indent = indentSize ?? 2;
+  const indentChar = Array.from({ length: indent }).fill(" ").join("");
+  const code = "\n" + indentChar + codes.join("\n" + indentChar);
+  return isAll ? code + "\n" + indentChar.slice(2) : code;
+}
+exports.addIndentChar = addIndentChar;
+exports.escapeStr = escapeStr;
+exports.generatePropsCode = generatePropsCode;
+exports.isValidKey = isValidKey;
+exports.kebabCase = kebabCase;
+exports.obj2Str = obj2Str;
+exports.templateEngine = templateEngine;

package/lib/ele-pro-form-builder/components/code-util.d.ts

@@ -0,0 +1,46 @@
+import { JsVar } from './code-js-var';
+
+/**
+ * 模板引擎
+ * @param template 模板
+ * @param data 数据
+ */
+export declare function templateEngine(template: string, data?: {}): string;
+/**
+ * 代码增加缩进
+ * @param code 代码
+ * @param indentChar 缩进字符
+ */
+export declare function addIndentChar(code?: string, indentChar?: string): string;
+/**
+ * 转义字符串
+ * @param str 字符串
+ */
+export declare function escapeStr(str: string): string;
+/**
+ * 判断是否是合法的属性名
+ * @param name 属性名
+ */
+export declare function isValidKey(name: string): boolean;
+/**
+ * 对象转 js 字符串
+ * @param obj 对象
+ * @param singleLine 是否单行显示
+ * @param indentSize 多行时缩进空格数量 TODO
+ * @param transformJsVarFunc 转换 JsVar 对象的方法
+ */
+export declare function obj2Str(obj: any, singleLine?: boolean, indentSize?: number, transformJsVarFunc?: (jv: any) => JsVar | undefined): any;
+/**
+ * 驼峰转中划线
+ * @param name 驼峰风格名称
+ */
+export declare function kebabCase(name: string): string;
+/**
+ * 生成组件属性的代码
+ * @param props 属性
+ * @param singleLine 是否单行显示
+ * @param indentSize 多行时缩进空格数量
+ * @param isAll 是否是全部属性, 会考虑标签结束符的换行和缩进
+ * @param transformJsVarFunc 转换 JsVar 对象的方法
+ */
+export declare function generatePropsCode(props?: Record<string, any>, singleLine?: boolean | null, indentSize?: number, isAllProps?: boolean, transformJsVarFunc?: (jv: any) => JsVar | undefined): string;