@tmagic/editor 1.5.13 → 1.5.15

package/dist/tmagic-editor.umd.cjs

@@ -5264,13 +5264,11 @@
                   { value: core.HookCodeType.DATA_SOURCE_METHOD, text: "数据源方法" }
                 ],
                 defaultValue: "code",
-                onChange: (mForm, v, { model, prop, changeRecords }) => {
+                onChange: (_mForm, v, { setModel }) => {
                   if (v === core.HookCodeType.DATA_SOURCE_METHOD) {
-                    model.codeId = [];
-                    changeRecords.push({ propPath: prop.replace("codeType", "codeId"), value: [] });
+                    setModel("codeId", []);
                   } else {
-                    model.codeId = "";
-                    changeRecords.push({ propPath: prop.replace("codeType", "codeId"), value: "" });
+                    setModel("codeId", "");
                   }
                   return v;
                 }
@@ -5280,7 +5278,7 @@
                 name: "codeId",
                 span: 18,
                 labelWidth: 0,
-                display: (mForm, { model }) => model.codeType !== core.HookCodeType.DATA_SOURCE_METHOD,
+                display: (_mForm, { model }) => model.codeType !== core.HookCodeType.DATA_SOURCE_METHOD,
                 notEditable: () => !codeBlockService.getEditStatus()
               },
               {
@@ -5288,7 +5286,7 @@
                 name: "codeId",
                 span: 18,
                 labelWidth: 0,
-                display: (mForm, { model }) => model.codeType === core.HookCodeType.DATA_SOURCE_METHOD,
+                display: (_mForm, { model }) => model.codeType === core.HookCodeType.DATA_SOURCE_METHOD,
                 notEditable: () => !dataSourceService.get("editable")
               }
             ]
@@ -5486,13 +5484,12 @@
               append: {
                 type: "button",
                 text: "复制",
-                handler: async (vm, { model }) => {
-                  try {
-                    await navigator.clipboard.writeText(`${model.id}`);
+                handler: (vm, { model }) => {
+                  navigator.clipboard.writeText(`${model.id}`).then(() => {
                     designPlugin.tMagicMessage.success("已复制");
-                  } catch (err) {
+                  }).catch(() => {
                     designPlugin.tMagicMessage.error("复制失败");
-                  }
+                  });
                 }
               }
             },
@@ -7230,10 +7227,11 @@
       this.isHistoryStateChange = true;
       await this.update(value.data);
       this.set("modifiedNodeIds", value.modifiedNodeIds);
-      setTimeout(async () => {
+      setTimeout(() => {
         if (!value.nodeId) return;
-        await this.select(value.nodeId);
-        this.get("stage")?.select(value.nodeId);
+        this.select(value.nodeId).then(() => {
+          this.get("stage")?.select(value.nodeId);
+        });
       }, 0);
       this.emit("history-change", value.data);
     }
@@ -8005,20 +8003,23 @@
           }
           return [];
         },
-        onChange: (formState, codeId, { model }) => {
+        onChange: (formState, codeId, { setModel, model }) => {
           paramsConfig.value = getParamItemsConfig(codeId);
           if (paramsConfig.value.length) {
-            model.params = formPlugin.createValues(formState, paramsConfig.value, {}, model.params);
+            setModel("params", formPlugin.createValues(formState, paramsConfig.value, {}, model.params));
           } else {
-            model.params = {};
+            setModel("params", {});
           }
           return codeId;
         }
       };
-      const onCodeIdChangeHandler = (value) => {
+      const onCodeIdChangeHandler = (value, eventData) => {
         props.model.params = value.params;
         emit("change", props.model, {
-          changeRecords: [
+          changeRecords: eventData.changeRecords?.map((item) => ({
+            prop: `${props.prop.replace(props.name, "")}${item.propPath}`,
+            value: item.value
+          })) || [
             {
               propPath: props.prop,
               value: value[props.name]
@@ -8383,9 +8384,7 @@
     const createCodeBlock = async () => {
       codeConfig.value = {
         name: "",
-        content: `({app, params, flowState}) => {
-  // place your code here
-}`,
+        content: "({app, params, flowState}) => {\n  // place your code here\n}",
         params: []
       };
       codeId.value = await codeBlockService.getUniqueId();
@@ -8957,6 +8956,7 @@
             try {
               return JSON.stringify(row.defaultValue);
             } catch (e) {
+              error(e);
               return row.defaultValue;
             }
           }
@@ -9005,9 +9005,9 @@
             { text: "null", value: "null" },
             { text: "any", value: "any" }
           ],
-          onChange: (formState, v, { model }) => {
+          onChange: (_formState, v, { setModel }) => {
             if (!["any", "array", "object"].includes(v)) {
-              model.fields = [];
+              setModel("fields", []);
             }
             return v;
           }
@@ -10226,9 +10226,7 @@
             {
               text: "编辑",
               handler: (method, index) => {
-                let codeContent = method.content || `({ params, dataSource, app }) => {
-  // place your code here
-}`;
+                let codeContent = method.content || "({ params, dataSource, app }) => {\n  // place your code here\n}";
                 if (typeof codeContent !== "string") {
                   codeContent = codeContent.toString();
                 }
@@ -10257,9 +10255,7 @@
       const createCodeHandler = () => {
         codeConfig.value = {
           name: "",
-          content: `({ params, dataSource, app, flowState }) => {
-  // place your code here
-}`,
+          content: "({ params, dataSource, app, flowState }) => {\n  // place your code here\n}",
           params: []
         };
         editIndex = -1;
@@ -10378,12 +10374,12 @@
         }));
       };
       const paramsConfig = vue.ref(getParamItemsConfig(props.model[props.name || "dataSourceMethod"]));
-      const setParamsConfig = (dataSourceMethod, formState = {}) => {
+      const setParamsConfig = (dataSourceMethod, formState = {}, setModel) => {
         paramsConfig.value = dataSourceMethod ? getParamItemsConfig(dataSourceMethod) : [];
         if (paramsConfig.value.length) {
-          props.model.params = formPlugin.createValues(formState, paramsConfig.value, {}, props.model.params);
+          setModel("params", formPlugin.createValues(formState, paramsConfig.value, {}, props.model.params));
         } else {
-          props.model.params = {};
+          setModel("params", {});
         }
       };
       const methodsOptions = vue.computed(
@@ -10404,8 +10400,8 @@
         name: props.name,
         options: methodsOptions.value,
         disable: props.disabled,
-        onChange: (formState, dataSourceMethod) => {
-          setParamsConfig(dataSourceMethod, formState);
+        onChange: (formState, dataSourceMethod, { setModel }) => {
+          setParamsConfig(dataSourceMethod, formState, setModel);
           return dataSourceMethod;
         }
       }));
@@ -11073,8 +11069,8 @@
           text: "联动组件",
           type: "ui-select",
           display: (mForm, { model }) => model.actionType === core.ActionType.COMP,
-          onChange: (MForm, v, { model }) => {
-            model.method = "";
+          onChange: (MForm, v, { setModel }) => {
+            setModel("method", "");
             return v;
           }
         };
@@ -14165,7 +14161,7 @@
               type: "button",
               className: "delete",
               icon: vue.markRaw(iconsVue.Delete),
-              tooltip: `刪除(Delete)`,
+              tooltip: "刪除(Delete)",
               disabled: () => editorService.get("node")?.type === core.NodeType.PAGE,
               handler: () => {
                 const node = editorService.get("node");
@@ -15400,13 +15396,13 @@
       eventBus?.on("edit-code", (id) => {
         editCode(id);
       });
-      const editDialogOpenHandler = () => {
+      vue.watch(codeId, () => {
         if (codeBlockListRef.value) {
           for (const [statusId, status] of codeBlockListRef.value.nodeStatusMap.entries()) {
             status.selected = statusId === codeId.value;
           }
         }
-      };
+      });
       const editDialogCloseHandler = () => {
         if (codeBlockListRef.value) {
           for (const [, status] of codeBlockListRef.value.nodeStatusMap.entries()) {
@@ -15478,8 +15474,7 @@
               disabled: !editable.value,
               content: vue.unref(codeConfig),
               onSubmit: vue.unref(submitCodeBlockHandler),
-              onClose: editDialogCloseHandler,
-              onOpen: editDialogOpenHandler
+              onClose: editDialogCloseHandler
             }, null, 8, ["disabled", "content", "onSubmit"])) : vue.createCommentVNode("v-if", true),
             (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
               menuData.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$o, {
@@ -15866,20 +15861,20 @@
       const eventBus = vue.inject("eventBus");
       const { dataSourceService } = useServices();
       const { editDialog, dataSourceValues, dialogTitle, editable, editHandler, submitDataSourceHandler } = useDataSourceEdit(dataSourceService);
-      const editDialogOpenHandler = (id) => {
-        if (dataSourceList.value) {
-          for (const [statusId, status] of dataSourceList.value.nodeStatusMap.entries()) {
-            status.selected = statusId === id;
-          }
-        }
-      };
       const editDialogCloseHandler = () => {
-        if (dataSourceList.value) {
-          for (const [, status] of dataSourceList.value.nodeStatusMap.entries()) {
+        if (dataSourceListRef.value) {
+          for (const [, status] of dataSourceListRef.value.nodeStatusMap.entries()) {
             status.selected = false;
           }
         }
       };
+      vue.watch(dataSourceValues, (dataSourceValues2) => {
+        if (dataSourceListRef.value && dataSourceValues2.id) {
+          for (const [statusId, status] of dataSourceListRef.value.nodeStatusMap.entries()) {
+            status.selected = statusId === dataSourceValues2.id;
+          }
+        }
+      });
       const datasourceTypeList = vue.computed(
         () => [
           { text: "基础", type: "base" },
@@ -15909,9 +15904,9 @@
         });
         dataSourceService.remove(id);
       };
-      const dataSourceList = vue.ref();
+      const dataSourceListRef = vue.useTemplateRef("dataSourceList");
       const filterTextChangeHandler = (val) => {
-        dataSourceList.value?.filter(val);
+        dataSourceListRef.value?.filter(val);
       };
       eventBus?.on("edit-data-source", (id) => {
         editHandler(id);
@@ -15978,8 +15973,7 @@
                 ]),
                 vue.createCommentVNode(" 数据源列表 "),
                 vue.createVNode(_sfc_main$h, {
-                  ref_key: "dataSourceList",
-                  ref: dataSourceList,
+                  ref: "dataSourceList",
                   indent: _ctx.indent,
                   "next-level-indent-increment": _ctx.nextLevelIndentIncrement,
                   onEdit: vue.unref(editHandler),
@@ -15997,8 +15991,7 @@
               values: vue.unref(dataSourceValues),
               title: vue.unref(dialogTitle),
               onSubmit: vue.unref(submitDataSourceHandler),
-              onClose: editDialogCloseHandler,
-              onOpen: editDialogOpenHandler
+              onClose: editDialogCloseHandler
             }, null, 8, ["disabled", "values", "title", "onSubmit"]),
             (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
               menuData.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$o, {
@@ -19451,10 +19444,10 @@
     const getTMagicApp = () => {
       const renderer = editorService.get("stage")?.renderer;
       if (!renderer) {
-        return void 0;
+        return Promise.resolve(void 0);
       }
       if (renderer.runtime) {
-        return renderer.runtime.getApp?.();
+        return Promise.resolve(renderer.runtime.getApp?.());
       }
       return new Promise((resolve) => {
         const timeout = globalThis.setTimeout(() => {
@@ -19492,12 +19485,13 @@
         app.dsl.dataSources = root.dataSources;
       }
     };
-    const dsDepCollectedHandler = async () => {
+    const dsDepCollectedHandler = () => {
       const root = editorService.get("root");
-      const app = await getTMagicApp();
-      if (root && app?.dsl) {
-        app.dsl.dataSourceDeps = root.dataSourceDeps;
-      }
+      getTMagicApp()?.then((app) => {
+        if (root && app?.dsl) {
+          app.dsl.dataSourceDeps = root.dataSourceDeps;
+        }
+      });
     };
     const collectIdle = (nodes, deep, type) => Promise.all(
       nodes.map((node) => {
@@ -19530,7 +19524,7 @@
       depService.addTarget(core.createDataSourceMethodTarget(ds, vue.reactive({})));
       depService.addTarget(core.createDataSourceCondTarget(ds, vue.reactive({})));
     };
-    const rootChangeHandler = async (value, preValue) => {
+    const rootChangeHandler = (value, preValue) => {
       if (!value) return;
       value.codeBlocks = value.codeBlocks || {};
       value.dataSources = value.dataSources || [];
@@ -19553,29 +19547,33 @@
         delete value.dataSourceDeps;
         delete value.dataSourceCondDeps;
       }
-      const nodeId = editorService.get("node")?.id || props.defaultSelected;
-      let node;
-      if (nodeId) {
-        node = editorService.getNodeById(nodeId);
-      }
-      if (node && node !== value) {
-        await editorService.select(node.id);
-      } else if (value.items?.length) {
-        await editorService.select(value.items[0]);
-      } else if (value.id) {
-        editorService.set("nodes", [value]);
-        editorService.set("parent", null);
-        editorService.set("page", null);
-      }
-      if (vue.toRaw(value) !== vue.toRaw(preValue)) {
-        emit("update:modelValue", value);
-      }
+      const handler = async () => {
+        const nodeId = editorService.get("node")?.id || props.defaultSelected;
+        let node;
+        if (nodeId) {
+          node = editorService.getNodeById(nodeId);
+        }
+        if (node && node !== value) {
+          await editorService.select(node.id);
+        } else if (value.items?.length) {
+          await editorService.select(value.items[0]);
+        } else if (value.id) {
+          editorService.set("nodes", [value]);
+          editorService.set("parent", null);
+          editorService.set("page", null);
+        }
+        if (vue.toRaw(value) !== vue.toRaw(preValue)) {
+          emit("update:modelValue", value);
+        }
+      };
+      handler();
     };
-    const nodeAddHandler = async (nodes) => {
-      await collectIdle(nodes, true);
-      updateStageNodes(nodes);
+    const nodeAddHandler = (nodes) => {
+      collectIdle(nodes, true).then(() => {
+        updateStageNodes(nodes);
+      });
     };
-    const nodeUpdateHandler = async (data) => {
+    const nodeUpdateHandler = (data) => {
       const needRecollectNodes = [];
       const normalNodes = [];
       for (const { newNode, oldNode, changeRecords } of data) {
@@ -19607,9 +19605,12 @@
         }
       }
       if (needRecollectNodes.length) {
-        await collectIdle(needRecollectNodes, true, core.DepTargetType.DATA_SOURCE);
-        await collectIdle(needRecollectNodes, true, core.DepTargetType.DATA_SOURCE_COND);
-        updateStageNodes(needRecollectNodes);
+        const handler = async () => {
+          await collectIdle(needRecollectNodes, true, core.DepTargetType.DATA_SOURCE);
+          await collectIdle(needRecollectNodes, true, core.DepTargetType.DATA_SOURCE_COND);
+          updateStageNodes(needRecollectNodes);
+        };
+        handler();
       } else {
         updateStageNodes(normalNodes);
         Promise.all([
@@ -19621,28 +19622,32 @@
     const nodeRemoveHandler = (nodes) => {
       depService.clear(nodes);
     };
-    const historyChangeHandler = async (page) => {
-      await collectIdle([page], true);
-      updateStageNode(page);
+    const historyChangeHandler = (page) => {
+      collectIdle([page], true).then(() => {
+        updateStageNode(page);
+      });
     };
     editorService.on("history-change", historyChangeHandler);
     editorService.on("root-change", rootChangeHandler);
     editorService.on("add", nodeAddHandler);
     editorService.on("remove", nodeRemoveHandler);
     editorService.on("update", nodeUpdateHandler);
-    const dataSourceAddHandler = async (config) => {
-      initDataSourceDepTarget(config);
-      const app = await getTMagicApp();
-      if (!app?.dataSourceManager) {
-        return;
-      }
-      app.dataSourceManager.addDataSource(config);
-      const newDs = app.dataSourceManager.get(config.id);
-      if (newDs) {
-        app.dataSourceManager.init(newDs);
-      }
+    const dataSourceAddHandler = (config) => {
+      const handler = async () => {
+        initDataSourceDepTarget(config);
+        const app = await getTMagicApp();
+        if (!app?.dataSourceManager) {
+          return;
+        }
+        app.dataSourceManager.addDataSource(config);
+        const newDs = app.dataSourceManager.get(config.id);
+        if (newDs) {
+          app.dataSourceManager.init(newDs);
+        }
+      };
+      handler();
     };
-    const dataSourceUpdateHandler = async (config, { changeRecords }) => {
+    const dataSourceUpdateHandler = (config, { changeRecords }) => {
       const updateDsData = async () => {
         const app = await getTMagicApp();
         if (!app?.dataSourceManager) {
@@ -19703,23 +19708,26 @@
       depService.removeTarget(id, core.DepTargetType.DATA_SOURCE_COND);
       depService.removeTarget(id, core.DepTargetType.DATA_SOURCE_METHOD);
     };
-    const dataSourceRemoveHandler = async (id) => {
+    const dataSourceRemoveHandler = (id) => {
       const root = editorService.get("root");
       if (!root) {
         return;
       }
-      const nodeIds = Object.keys(root.dataSourceDeps?.[id] || {});
-      const nodes = utils.getNodes(nodeIds, root.items);
-      await Promise.all([
-        collectIdle(nodes, false, core.DepTargetType.DATA_SOURCE),
-        collectIdle(nodes, false, core.DepTargetType.DATA_SOURCE_COND),
-        collectIdle(nodes, false, core.DepTargetType.DATA_SOURCE_METHOD)
-      ]);
-      updateDataSourceSchema();
-      const app = await getTMagicApp();
-      app?.dataSourceManager?.removeDataSource(id);
-      updateStageNodes(nodes);
-      removeDataSourceTarget(id);
+      const handler = async () => {
+        const nodeIds = Object.keys(root.dataSourceDeps?.[id] || {});
+        const nodes = utils.getNodes(nodeIds, root.items);
+        await Promise.all([
+          collectIdle(nodes, false, core.DepTargetType.DATA_SOURCE),
+          collectIdle(nodes, false, core.DepTargetType.DATA_SOURCE_COND),
+          collectIdle(nodes, false, core.DepTargetType.DATA_SOURCE_METHOD)
+        ]);
+        updateDataSourceSchema();
+        const app = await getTMagicApp();
+        app?.dataSourceManager?.removeDataSource(id);
+        updateStageNodes(nodes);
+        removeDataSourceTarget(id);
+      };
+      handler();
     };
     dataSourceService.on("add", dataSourceAddHandler);
     dataSourceService.on("update", dataSourceUpdateHandler);

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.13",
+  "version": "1.5.15",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -58,11 +58,11 @@
     "moveable": "^0.53.0",
     "serialize-javascript": "^6.0.0",
     "sortablejs": "^1.15.2",
-    "@tmagic/design": "1.5.13",
-    "@tmagic/stage": "1.5.13",
-    "@tmagic/form": "1.5.13",
-    "@tmagic/table": "1.5.13",
-    "@tmagic/utils": "1.5.13"
+    "@tmagic/stage": "1.5.15",
+    "@tmagic/form": "1.5.15",
+    "@tmagic/table": "1.5.15",
+    "@tmagic/design": "1.5.15",
+    "@tmagic/utils": "1.5.15"
   },
   "devDependencies": {
     "@types/events": "^3.0.0",
@@ -76,7 +76,7 @@
     "monaco-editor": "^0.48.0",
     "typescript": "*",
     "vue": ">=3.5.0",
-    "@tmagic/core": "1.5.13"
+    "@tmagic/core": "1.5.15"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/Editor.vue

@@ -142,7 +142,7 @@ import codeBlockService from './services/codeBlock';
 import componentListService from './services/componentList';
 import dataSourceService from './services/dataSource';
 import depService from './services/dep';
-import editorService, { type EditorService } from './services/editor';
+import editorService from './services/editor';
 import eventsService from './services/events';
 import historyService from './services/history';
 import keybindingService from './services/keybinding';
@@ -153,25 +153,9 @@ import uiService from './services/ui';
 import keybindingConfig from './utils/keybinding-config';
 import { defaultEditorProps, EditorProps } from './editorProps';
 import { initServiceEvents, initServiceState } from './initService';
-import type {
-  EventBus,
-  FrameworkSlots,
-  PropsPanelSlots,
-  Services,
-  SidebarSlots,
-  StageOptions,
-  WorkspaceSlots,
-} from './type';
-
-defineSlots<
-  FrameworkSlots &
-    WorkspaceSlots &
-    SidebarSlots &
-    PropsPanelSlots & {
-      workspace(props: { editorService: EditorService }): any;
-      'workspace-content'(props: { editorService: EditorService }): any;
-    }
->();
+import type { EditorSlots, EventBus, Services, StageOptions } from './type';
+
+defineSlots<EditorSlots>();
 
 defineOptions({
   name: 'MEditor',

package/src/components/CodeBlockEditor.vue

@@ -233,7 +233,7 @@ const changeHandler = (values: CodeBlockContent) => {
   changedValue.value = values;
 };
 
-const beforeClose = (done: (cancel?: boolean) => void) => {
+const beforeClose = (done: (_cancel?: boolean) => void) => {
   if (!changedValue.value) {
     done();
     return;

package/src/components/FloatingBox.vue

@@ -39,7 +39,7 @@ const props = withDefaults(
   defineProps<{
     position?: Position;
     title?: string;
-    beforeClose?: (done: (cancel?: boolean) => void) => void;
+    beforeClose?: (_done: (_cancel?: boolean) => void) => void;
   }>(),
   {
     title: '',

package/src/components/ScrollBar.vue

@@ -93,7 +93,9 @@ const scrollBy = (delta: number) => {
   position: absolute;
   background-color: transparent;
   opacity: 0.3;
-  transition: background-color 0.2s linear, opacity 0.2s linear;
+  transition:
+    background-color 0.2s linear,
+    opacity 0.2s linear;
 
   .m-editor-scroll-bar-thumb {
     background-color: #aaa;
@@ -108,7 +110,9 @@ const scrollBy = (delta: number) => {
 
     .m-editor-scroll-bar-thumb {
       height: 6px;
-      transition: background-color 0.2s linear, height 0.2s ease-in-out;
+      transition:
+        background-color 0.2s linear,
+        height 0.2s ease-in-out;
       bottom: 2px;
     }
   }
@@ -120,7 +124,9 @@ const scrollBy = (delta: number) => {
 
     .m-editor-scroll-bar-thumb {
       width: 6px;
-      transition: background-color 0.2s linear, width 0.2s ease-in-out;
+      transition:
+        background-color 0.2s linear,
+        width 0.2s ease-in-out;
       right: 2px;
     }
   }

package/src/components/SearchInput.vue

@@ -27,7 +27,7 @@ const emit = defineEmits(['search']);
 
 const filterText = ref('');
 
-let timer: NodeJS.Timeout | null = null;
+let timer: ReturnType<typeof setTimeout> | null = null;
 const filterTextChangeHandler = () => {
   timer && clearTimeout(timer);
   timer = setTimeout(() => {

package/src/components/Tree.vue

@@ -38,9 +38,9 @@ import type { LayerNodeStatus, TreeNodeData } from '@editor/type';
 import TreeNode from './TreeNode.vue';
 
 defineSlots<{
-  'tree-node-content'(props: { data: TreeNodeData }): any;
-  'tree-node-label'(props: { data: TreeNodeData }): any;
-  'tree-node-tool'(props: { data: TreeNodeData }): any;
+  'tree-node-content'(_props: { data: TreeNodeData }): any;
+  'tree-node-label'(_props: { data: TreeNodeData }): any;
+  'tree-node-tool'(_props: { data: TreeNodeData }): any;
 }>();
 
 defineOptions({

package/src/components/TreeNode.vue

@@ -72,9 +72,9 @@ import type { LayerNodeStatus, TreeNodeData } from '@editor/type';
 import { updateStatus } from '@editor/utils/tree';
 
 defineSlots<{
-  'tree-node-label'(props: { data: TreeNodeData }): any;
-  'tree-node-tool'(props: { data: TreeNodeData }): any;
-  'tree-node-content'(props: { data: TreeNodeData }): any;
+  'tree-node-label'(_props: { data: TreeNodeData }): any;
+  'tree-node-tool'(_props: { data: TreeNodeData }): any;
+  'tree-node-content'(_props: { data: TreeNodeData }): any;
 }>();
 
 defineOptions({