fix: prettier format script into iife caught error (#1184)

packages/common/js/ast.js

@@ -37,8 +37,23 @@ const formatScript = (string) => {
     ...prettierConfig
   }
   try {
-    // 低码中的编辑器大多只会输入js值，并不是一个完整的javascript表达式，无法格式化，因此需要特殊处理预格式化该种情形
+    const ast = string2Ast(string)
-    newStr = prettier.format(`!${string}`, options).substring(1).replace(/\n$/, '')
+    // javascript 在 prettier 格式化的时候，会自动在前面加上逗号“；”，因此该种情形需要特殊处理格式化
+    if (ast.program.body?.length === 1 && ast.program.body?.[0]?.type === 'ExpressionStatement') {
+      // 将 javascript 表达式 包裹在 "!()" 中，格式化完成之后，再从里面取出来格式化之后的值
+      newStr = prettier.format(`!(${string})`, options).replace(/\r?\n$/, '')
+
+      // 格式化后，仍存在包裹的 "!()"
+      if (newStr.match(/^!\([\s\S]*\)$/)) {
+        newStr = newStr.replace(/^!\(([\s\S]*)\)$/, '$1')
+      } else {
+        // 格式化后，仅存在开头的 "!"
+        newStr = newStr.replace(/^!/, '')
+      }
+    } else {
+      // 其他类型，不需要特殊处理
+      newStr = prettier.format(string, options)
+    }
   } catch (error) {
     newStr = prettier.format(newStr, options)
   }

packages/configurator/src/variable-configurator/VariableConfigurator.vue

@@ -130,7 +130,7 @@ import {
   META_SERVICE
 } from '@opentiny/tiny-engine-meta-register'
 import { getCommentByKey } from '@opentiny/tiny-engine-common/js/comment'
-import { formatString, generate, parse, traverse } from '@opentiny/tiny-engine-common/js/ast'
+import { generate, parse, traverse } from '@opentiny/tiny-engine-common/js/ast'
 import { DEFAULT_LOOP_NAME } from '@opentiny/tiny-engine-common/js/constants'
 import { constants } from '@opentiny/tiny-engine-utils'
 import { Alert, Button, DialogBox, Input, Search, Switch, Tooltip } from '@opentiny/vue'
@@ -277,7 +277,19 @@ export default {
       lineNumbers: false,
       minimap: {
         enabled: false
-      }
+      },
+      tabSize: 2,
+      insertSpaces: true,
+      formatOnPaste: true,
+      formatOnType: true,
+      autoIndent: 'full',
+      newLineCharacter: '\n',
+      convertTabsToSpaces: true,
+      trimAutoWhitespace: true,
+      wordWrap: 'on',
+      wordWrapColumn: 120,
+      wordWrapMinChars: 10,
+      wordWrapStrategy: 'advanced'
     }
 
     const editorDidMount = () => {
@@ -398,14 +410,16 @@ export default {
       cancel()
     }
 
-    const confirm = () => {
+    const confirm = async () => {
-      let variableContent = state.isEditorEditMode ? editor.value?.getEditor().getValue() : state.variable
+      const editorInstance = editor.value?.getEditor()
+      await editorInstance.getAction('editor.action.formatDocument').run()
+
+      const variableContent = state.isEditorEditMode ? editorInstance.getValue() : state.variable
 
       const { setSaved, getSchema, updateSchema } = useCanvas()
       // 如果新旧值不一样就显示未保存状态
       if (oldValue !== variableContent) {
         setSaved(false)
-        variableContent = formatString(variableContent, 'javascript')
       }
 
       const pattern = /^[\s]*{[\s]*api[\s]*:[\s\w.]*}$/

packages/plugins/script/src/Main.vue

@@ -69,7 +69,19 @@ export default {
 
       // 禁用滚动条边边一直显示的边框
       overviewRulerBorder: false,
-      renderLineHighlightOnlyWhenFocus: true
+      renderLineHighlightOnlyWhenFocus: true,
+      tabSize: 2,
+      insertSpaces: true,
+      formatOnPaste: true,
+      formatOnType: true,
+      autoIndent: 'full',
+      newLineCharacter: '\n',
+      convertTabsToSpaces: true,
+      trimAutoWhitespace: true,
+      wordWrap: 'on',
+      wordWrapColumn: 120,
+      wordWrapMinChars: 10,
+      wordWrapStrategy: 'advanced'
     }
 
     const editorDidMount = (editor) => {

packages/plugins/script/src/js/method.js

@@ -60,7 +60,11 @@ const getScriptString = () => {
 }
 
 const change = (value) => {
-  state.isChanged = value !== state.script
+  const lineBreakPattern = /\r\n/g
+  // 使用 prettier 格式化之后，换行符会变成 \n
+  // monaco 传入的 value 在 window下，换行符会变成 \r\n
+  // 对比需要抹平换行符带来的差异
+  state.isChanged = value.replace(lineBreakPattern, '\n') !== state.script.replace(lineBreakPattern, '\n')
 
   if (!monaco.value) {
     return