Merge pull request #488 from illacloud/develop

Develop

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -11,7 +11,7 @@ body:
         Please search open/closed issues before submitting. Someone
         might have asked the same thing before 😉!
 
-        If you want to discuss sth, please go to the [Discussion](https://github.com/illa-family/discussions)
+        If you want to discuss sth, please go to the [Discussion](https://github.com/illacloud/discussions)
 
   - type: "input"
     id: "description"

.github/ISSUE_TEMPLATE/config.yml

@@ -1,8 +1,8 @@
 blank_issues_enabled: false
 contact_links:
   - name: Ask a question
-    url: https://github.com/orgs/illa-family/discussions
+    url: https://github.com/orgs/illacloud/discussions
     about: Ask questions and discuss topics with other community members
   - name: Chat with other community members
-    url: https://discord.gg/2tGBuJkgd6
-    about: The official illa Family Discord community
+    url: https://discord.gg/illacloud
+    about: The official illa Cloud Discord community

.gitmodules

@@ -1,4 +1,4 @@
 [submodule "illa-design"]
 	path = illa-design
-	url = https://github.com/illa-family/illa-design.git
+	url = https://github.com/illacloud/illa-design.git
 	branch = develop

apps/builder/package.json

@@ -1,11 +1,11 @@
 {
   "name": "illa-builder",
   "description": "Help every Developer as fast as to build Business Tools",
-  "repository": "[email protected]:illa-family/illa-builder.git",
+  "repository": "[email protected]:illacloud/illa-builder.git",
   "private": true,
-  "author": "illa Family",
+  "author": "illa Cloud",
   "license": "Apache-2.0",
-  "version": "1.1.2",
+  "version": "1.3.2",
   "scripts": {
     "dev": "vite --mode cloud",
     "build-cloud": "vite build --mode cloud",

apps/builder/src/components/CodeEditor/index.tsx

@@ -1,7 +1,13 @@
-/* eslint-disable */
-import { forwardRef, useContext, useEffect, useRef, useState } from "react"
+import {
+  forwardRef,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  useCallback,
+} from "react"
 import { Global } from "@emotion/react"
-import { debounce, get } from "lodash"
+import { cloneDeep, debounce, get } from "lodash"
 import CodeMirror, { Editor } from "codemirror"
 import "codemirror/lib/codemirror.css"
 import "codemirror/lib/codemirror"
@@ -12,23 +18,22 @@ import "codemirror/addon/display/placeholder"
 import "codemirror/addon/display/autorefresh"
 import "./modes"
 import "./hinter"
-import "./lintHelper"
+import { clearMarks, lineMarker } from "@/components/CodeEditor/lintHelper"
 import { BaseTern, TernServer } from "./TernSever"
 import { Trigger } from "@illa-design/trigger"
 import { evaluateDynamicString } from "@/utils/evaluateDynamicString"
 import { CodePreview } from "./CodePreview"
 import { CodeEditorProps, EditorModes, ResultPreview } from "./interface"
 import { applyCodeEditorStyle, codemirrorStyle } from "./style"
 import { isCloseKey, isExpectType } from "./utils"
-import { GLOBAL_DATA_CONTEXT } from "@/page/App/context/globalDataProvider"
 import { useSelector } from "react-redux"
 import { getLanguageValue } from "@/redux/builderInfo/builderInfoSelector"
 import {
   getExecutionError,
   getExecutionResult,
 } from "@/redux/currentApp/executionTree/executionSelector"
-import { clearMarks, lineMarker } from "@/components/CodeEditor/lintHelper"
 import { VALIDATION_TYPES } from "@/utils/validationFactory"
+import { isDynamicString } from "@/utils/evaluateDynamicString/utils"
 
 export const CodeEditor = forwardRef<HTMLDivElement, CodeEditorProps>(
   (props, ref) => {
@@ -51,29 +56,24 @@ export const CodeEditor = forwardRef<HTMLDivElement, CodeEditorProps>(
       onChange,
       ...otherProps
     } = props
-    const { globalData } = useContext(GLOBAL_DATA_CONTEXT)
     const languageValue = useSelector(getLanguageValue)
     const executionError = useSelector(getExecutionError)
     const executionResult = useSelector(getExecutionResult)
+    const executionResultRef = useRef<Record<string, any>>(executionResult)
     const codeTargetRef = useRef<HTMLDivElement>(null)
     const sever = useRef<CodeMirror.TernServer>()
-    const [editor, setEditor] = useState<Editor>()
+    const ILLAEditor = useRef<Editor | null>(null)
     const [preview, setPreview] = useState<ResultPreview>({
       state: "default",
       type: expectedType,
     })
     const [previewVisible, setPreviewVisible] = useState<boolean>()
     const [focus, setFocus] = useState<boolean>()
-    const [error, setError] = useState<boolean>()
+    const [error, setError] = useState<boolean>(false)
     // Solve the closure problem
     const latestProps = useRef(props)
     latestProps.current = props
 
-    const globalDataRef = useRef(globalData)
-    useEffect(() => {
-      globalDataRef.current = globalData
-    }, [globalData])
-
     const handleFocus = () => {
       setFocus(true)
     }
@@ -84,38 +84,48 @@ export const CodeEditor = forwardRef<HTMLDivElement, CodeEditorProps>(
       setPreviewVisible(false)
     }
 
-    const valueChanged = (currentValue: string) => {
-      let calcResult: any = null
-      let previewType = expectedType
-      setError(false)
-      try {
-        calcResult = evaluateDynamicString(
-          "",
-          currentValue,
-          globalDataRef.current,
-        )
-        // [TODO]: v1 evaluate
-        // if (!currentValue?.includes("{{")) {
-        //   calcResult = getEvalValue(previewType, calcResult)
-        // }
-        isExpectType(previewType, calcResult)
-        setPreview({
-          state: "default",
-          type: previewType,
-          content: calcResult,
-        })
-      } catch (e) {
-        setError(true)
-        if (e instanceof Error) {
+    const valueChanged = useCallback(
+      (currentValue: string) => {
+        let calcResult: any = null
+        let previewType = expectedType
+        setError(false)
+        try {
+          const isDynamic = isDynamicString(currentValue)
+          if (isDynamic) {
+            calcResult = evaluateDynamicString(
+              "",
+              currentValue,
+              executionResultRef.current || {},
+            )
+          } else {
+            calcResult = currentValue
+          }
+
+          // [TODO]: v1 evaluate
+          // if (!currentValue?.includes("{{")) {
+          //   calcResult = getEvalValue(previewType, calcResult)
+          // }
+          calcResult && isExpectType(previewType, calcResult)
+
           setPreview({
-            state: "error",
-            content: e.toString(),
+            state: "default",
+            type: previewType,
+            content: calcResult,
           })
+        } catch (e) {
+          setError(true)
+          if (e instanceof Error) {
+            setPreview({
+              state: "error",
+              content: e.toString(),
+            })
+          }
+        } finally {
+          latestProps.current.onChange?.(currentValue, calcResult)
         }
-      } finally {
-        latestProps.current.onChange?.(currentValue, calcResult)
-      }
-    }
+      },
+      [expectedType],
+    )
 
     useEffect(() => {
       if (path) {
@@ -135,8 +145,8 @@ export const CodeEditor = forwardRef<HTMLDivElement, CodeEditorProps>(
               content: evalError.errorMessage,
             })
           }
-          if (lintError?.errorLine && editor) {
-            lineMarker(editor, lintError.errorLine - 1)
+          if (lintError?.errorLine && ILLAEditor.current) {
+            lineMarker(ILLAEditor.current, lintError.errorLine - 1)
           }
         } else {
           setError(false)
@@ -147,7 +157,13 @@ export const CodeEditor = forwardRef<HTMLDivElement, CodeEditorProps>(
           })
         }
       }
-    }, [executionError, executionResult, path])
+    }, [executionError, executionResult, expectedType, path])
+
+    useEffect(() => {
+      if (!path && previewVisible) {
+        valueChanged(value || "")
+      }
+    }, [valueChanged, value, path, previewVisible])
 
     const handleChange = (editor: Editor) => {
       const currentValue = editor?.getValue()
@@ -161,37 +177,40 @@ export const CodeEditor = forwardRef<HTMLDivElement, CodeEditorProps>(
 
     const debounceHandleChange = debounce(handleChange, 300)
 
-    const handleKeyUp = (editor: Editor, event: KeyboardEvent) => {
-      const key = event.key
-      const code = `${event.ctrlKey ? "Ctrl+" : ""}${event.code}`
-      if (isCloseKey(code) || isCloseKey(key)) {
-        editor.closeHint()
-        return
-      }
-      const cursor = editor.getCursor()
-      const line = editor.getLine(cursor.line)
-      let showAutocomplete = false
-      if (mode === "XML_JS" || mode === "HTML_JS") {
-        showAutocomplete = true
-      }
-      if (key === "/") {
-        showAutocomplete = true
-      } else if (event.code === "Backspace") {
-        const prevChar = line[cursor.ch - 1]
-        showAutocomplete = !!prevChar && /[a-zA-Z_0-9.]/.test(prevChar)
-      } else if (key === "{") {
-        const prevChar = line[cursor.ch - 2]
-        showAutocomplete = prevChar === "{"
-      } else if (key.length == 1) {
-        showAutocomplete = /[a-zA-Z_0-9.]/.test(key)
-      }
-      showAutocomplete && handleAutocomplete(editor, line)
-    }
+    const handleKeyUp = useCallback(
+      (editor: Editor, event: KeyboardEvent) => {
+        const key = event.key
+        const code = `${event.ctrlKey ? "Ctrl+" : ""}${event.code}`
+        if (isCloseKey(code) || isCloseKey(key)) {
+          editor.closeHint()
+          return
+        }
+        const cursor = editor.getCursor()
+        const line = editor.getLine(cursor.line)
+        let showAutocomplete = false
+        if (mode === "XML_JS" || mode === "HTML_JS") {
+          showAutocomplete = true
+        }
+        if (key === "/") {
+          showAutocomplete = true
+        } else if (event.code === "Backspace") {
+          const prevChar = line[cursor.ch - 1]
+          showAutocomplete = !!prevChar && /[a-zA-Z_0-9.]/.test(prevChar)
+        } else if (key === "{") {
+          const prevChar = line[cursor.ch - 2]
+          showAutocomplete = prevChar === "{"
+        } else if (key.length == 1) {
+          showAutocomplete = /[a-zA-Z_0-9.]/.test(key)
+        }
+        showAutocomplete && handleAutocomplete(editor, line)
+      },
+      [mode],
+    )
 
     useEffect(() => {
-      const currentValue = editor?.getValue()
+      const currentValue = ILLAEditor.current?.getValue()
       if (value !== currentValue) {
-        editor?.setValue(value ?? "")
+        ILLAEditor.current?.setValue(value ?? "")
       }
     }, [value])
 
@@ -219,17 +238,21 @@ export const CodeEditor = forwardRef<HTMLDivElement, CodeEditorProps>(
       }
     }
 
+    useEffect(() => {
+      executionResultRef.current = executionResult
+    }, [executionResult])
+
     useEffect(() => {
       sever.current = TernServer(languageValue, { ...executionResult })
     }, [executionResult, languageValue])
 
     useEffect(() => {
-      editor?.setOption("mode", EditorModes[mode])
+      ILLAEditor.current?.setOption("mode", EditorModes[mode])
     }, [mode])
 
     useEffect(() => {
-      if (!editor) {
-        const editor = CodeMirror(codeTargetRef.current!, {
+      if (!ILLAEditor.current) {
+        ILLAEditor.current = CodeMirror(codeTargetRef.current!, {
           mode: EditorModes[mode],
           placeholder,
           lineNumbers,
@@ -247,23 +270,34 @@ export const CodeEditor = forwardRef<HTMLDivElement, CodeEditorProps>(
           },
         })
         if (noTab) {
-          editor?.setOption("extraKeys", { Tab: false })
+          ILLAEditor.current?.setOption("extraKeys", { Tab: false })
         }
         if (lineNumbers) {
-          editor?.setOption("gutters", ["CodeMirror-lint-markers"])
+          ILLAEditor.current?.setOption("gutters", ["CodeMirror-lint-markers"])
         }
-        editor.on("change", debounceHandleChange)
-        editor.on("keyup", handleKeyUp)
-        editor.on("focus", handleFocus)
-        editor.on("blur", handleBlur)
-        setEditor(editor)
+        ILLAEditor.current.on("change", debounceHandleChange)
+        ILLAEditor.current.on("keyup", handleKeyUp)
+        ILLAEditor.current.on("focus", handleFocus)
+        ILLAEditor.current.on("blur", handleBlur)
       }
+    }, [
+      debounceHandleChange,
+      handleKeyUp,
+      lineNumbers,
+      mode,
+      noTab,
+      placeholder,
+      readOnly,
+      value,
+    ])
 
+    useEffect(() => {
       return () => {
-        editor?.off("change", debounceHandleChange)
-        editor?.off("keyup", handleKeyUp)
-        editor?.off("focus", handleFocus)
-        editor?.off("blur", handleBlur)
+        ILLAEditor.current?.off("change", debounceHandleChange)
+        ILLAEditor.current?.off("keyup", handleKeyUp)
+        ILLAEditor.current?.off("focus", handleFocus)
+        ILLAEditor.current?.off("blur", handleBlur)
+        ILLAEditor.current = null
       }
     }, [])
 

apps/builder/src/components/CodeEditor/style.ts

@@ -132,7 +132,6 @@ export function applyCodeEditorStyle(
 
       &:hover {
         border-color: ${globalColor(`--${illaPrefix}-techPurple-06`)};
-        z-index: 1;
       }
     `
   }