优化代码编辑体验，仅在切换模式时同步文件 AST 信息

apps/playground/src/pages/index.tsx

@@ -8,7 +8,7 @@ import {
   Toolbar,
   WorkspacePanel,
   WorkspaceView,
-  CodeEditor,
+  LiveCodeEditor,
   Sandbox,
   DndQuery,
   themeLight,
@@ -188,7 +188,7 @@ export default function App() {
         </Sidebar>
         <WorkspacePanel>
           <WorkspaceView mode="code">
-            <CodeEditor />
+            <LiveCodeEditor />
           </WorkspaceView>
           <WorkspaceView mode="design">
             <Sandbox

packages/context/src/context.ts

@@ -29,6 +29,10 @@ export const useDesigner = () => {
   return useTangoEngine()?.engine.designer;
 };
 
+export const useEditorState = () => {
+  return useTangoEngine()?.engine.workspace.editorState;
+};
+
 export const useWorkspaceData = () => {
   const ctx = useTangoEngine();
   const workspace = useWorkspace();

packages/core/src/helpers/ast/generate.ts

@@ -3,7 +3,7 @@
  */
 import generator, { GeneratorOptions } from '@babel/generator';
 import * as t from '@babel/types';
-import { logger, wrapCode } from '@music163/tango-helpers';
+import { Dict, logger, wrapCode } from '@music163/tango-helpers';
 import { formatCode } from '../string';
 
 const defaultGeneratorOptions: GeneratorOptions = {
@@ -25,19 +25,12 @@ export function ast2code(ast: t.Node, options: GeneratorOptions = defaultGenerat
   return code;
 }
 
-const bracketPattern = /^\(.+\)$/s;
-
 /**
  * 是否被 () 包裹
- *
  * @example ({ foo: 'foo' }) -> true
  * @example { foo: 'foo' } -> false
- *
- * @param str 目标字符串
  */
-function isWrappingWithBrackets(str: string) {
-  return bracketPattern.test(str);
-}
+const bracketPattern = /^\(.+\)$/;
 
 /**
  * 将表达式生成为块级代码
@@ -54,7 +47,7 @@ export function expression2code(node: t.Expression) {
 
   const isWrappingExpression = t.isObjectExpression(node) || t.isFunctionExpression(node);
 
-  if (isWrappingExpression && isWrappingWithBrackets(ret)) {
+  if (isWrappingExpression && bracketPattern.test(ret)) {
     // 如果是对象，输出包含 ({})，则去掉首尾的括号
     ret = ret.slice(1, -1);
   }
@@ -195,7 +188,7 @@ export function node2value(node: t.Node, isWrapCode = true): any {
       );
       if (isSimpleObject) {
         // simple object: { key1, key2, key3 }
-        ret = node.properties.reduce((prev, propertyNode) => {
+        ret = node.properties.reduce<Dict>((prev, propertyNode) => {
           if (propertyNode.type === 'ObjectProperty') {
             const key = keyNode2value(propertyNode.key);
             const value = node2value(propertyNode.value, isWrapCode);

packages/core/src/helpers/ast/parse.ts

@@ -68,11 +68,7 @@ export function isValidExpressionCode(code: string) {
  * @returns
  */
 export function code2ast(code: string): t.File {
-  try {
-    return parse(code, babelParserConfig);
-  } catch (err) {
-    logger.error('[code2ast failed!]', err);
-  }
+  return parse(code, babelParserConfig);
 }
 
 /**
@@ -175,7 +171,7 @@ export function value2node(
  * 将 js 普通对象解析为 t.Node
  */
 export function object2node(
-  obj: object,
+  obj: Dict<any>,
   getValueNode: (value: any, key?: string) => t.Expression = value2node,
 ) {
   if (!isPlainObject(obj)) {

packages/core/src/helpers/ast/traverse.ts

@@ -1009,15 +1009,15 @@ export function serviceConfig2Node(payload: object) {
   });
 }
 
-export function updateServiceConfigToServiceFile(ast: t.File, config: Dict<object>) {
+export function updateServiceConfigToServiceFile(ast: t.File, config: Dict<Dict>) {
   traverse(ast, {
     CallExpression(path) {
       const calleeName = keyNode2value(path.node.callee) as string;
       if (isDefineService(calleeName) && path.node.arguments.length) {
         const configNode = path.node.arguments[0];
 
         if (t.isObjectExpression(configNode)) {
-          const newPropertiesNodeMap = Object.keys(config).reduce((properties, key) => {
+          const newPropertiesNodeMap: Dict = Object.keys(config).reduce<Dict>((properties, key) => {
             const serviceConfig = config[key];
             const property = t.objectProperty(t.identifier(key), serviceConfig2Node(serviceConfig));
             properties[key] = property;

packages/core/src/models/designer.ts

@@ -1,6 +1,6 @@
 import { action, computed, makeObservable, observable, toJS } from 'mobx';
-import { IWorkspace } from './interfaces';
 import { MenuDataType } from '@music163/tango-helpers';
+import { IWorkspace } from './interfaces';
 
 export type SimulatorNameType = 'desktop' | 'phone';
 
@@ -185,6 +185,7 @@ export class Designer {
     // 默认激活的视图
     if (defaultActiveView) {
       this.setActiveView(defaultActiveView);
+      this.workspace.setMode(defaultActiveView === 'design' ? 'design' : 'code');
     }
 
     makeObservable(this, {
@@ -238,14 +239,24 @@ export class Designer {
   }
 
   setActiveView(view: DesignerViewType) {
-    this._activeView = view;
+    const prevView = this._activeView;
+    if (view === prevView) {
+      return;
+    }
+
     if (view === 'dual') {
       this.setActiveSidebarPanel('');
       this.toggleRightPanel(false);
       this.toggleIsPreview(true);
+      this.workspace.setMode('code');
     } else if (view === 'design') {
       this.toggleIsPreview(false);
+      this.workspace.setMode('design');
+    } else if (view === 'code') {
+      this.workspace.setMode('code');
     }
+
+    this._activeView = view;
   }
 
   setActiveSidebarPanel(panel: string) {