Merge pull request #559 from smartxworks/fix/expression-problems

Refactor some expressions logics

packages/editor-sdk/src/components/Widgets/ArrayField.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { SpecWidget } from './SpecWidget';
 import { WidgetProps } from '../../types/widget';
 import { implementWidget, mergeWidgetOptionsIntoSpec } from '../../utils/widget';
-import { IconButton, Flex } from '@chakra-ui/react';
+import { IconButton, Flex, Code } from '@chakra-ui/react';
 import { AddIcon } from '@chakra-ui/icons';
 import {
   generateDefaultValueFromSpec,
@@ -28,30 +28,38 @@ declare module '../../types/widget' {
 }
 
 export const ArrayField: React.FC<WidgetProps<ArrayFieldWidgetType>> = props => {
-  const { spec, value, path, level, onChange } = props;
+  const { spec, path, value: rawValue, level, onChange, services } = props;
   const { expressionOptions } = spec.widgetOptions || {};
   const itemSpec = Array.isArray(spec.items) ? spec.items[0] : spec.items;
+  let value = rawValue;
 
   if (typeof itemSpec === 'boolean' || !itemSpec) {
     return null;
   }
 
-  if (!Array.isArray(value)) {
-    return (
-      <div>
-        Expected array but got
-        <pre>{JSON.stringify(value, null, 2)}</pre>
-      </div>
-    );
-  }
+  if (!Array.isArray(rawValue)) {
+    const evaledValue = services.stateManager.deepEval(rawValue, {
+      scopeObject: {},
+      overrideScope: true,
+      fallbackWhenError: exp => exp,
+    });
+    if (!Array.isArray(evaledValue)) {
+      return (
+        <div>
+          Failed to convert <Code>{rawValue}</Code> to Array.
+        </div>
+      );
+    }
 
+    value = evaledValue;
+  }
   const isNotBaseType = itemSpec.type === 'object' || itemSpec.type === 'array';
 
   return isNotBaseType ? (
-    <ArrayTable {...props} itemSpec={itemSpec} />
+    <ArrayTable {...props} value={value} itemSpec={itemSpec} />
   ) : (
     <>
-      {value.map((itemValue, itemIndex) => (
+      {value.map((itemValue: any, itemIndex: number) => (
         <ArrayItemBox key={itemIndex} index={itemIndex} value={value} onChange={onChange}>
           <SpecWidget
             {...props}

packages/editor-sdk/src/components/Widgets/BooleanField.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { WidgetProps } from '../../types/widget';
 import { implementWidget } from '../../utils/widget';
 import { Switch } from '@chakra-ui/react';
@@ -13,6 +13,14 @@ declare module '../../types/widget' {
 
 export const BooleanField: React.FC<WidgetProps<BooleanFieldType>> = props => {
   const { value, onChange } = props;
+
+  useEffect(() => {
+    // Convert value to boolean after switch from expression widget mode.
+    if (typeof value !== 'boolean') {
+      onChange(true);
+    }
+  }, [onChange, value]);
+
   const onValueChange = useCallback(
     event => {
       onChange(event.currentTarget.checked);

packages/editor-sdk/src/components/Widgets/ExpressionWidget.tsx

@@ -213,14 +213,6 @@ export const ExpressionWidget: React.FC<WidgetProps<ExpressionWidgetType>> = pro
   const onFocus = useCallback(() => {
     evalCode(code);
   }, [code, evalCode]);
-  const onBlur = useCallback(
-    newCode => {
-      const newValue = getParsedValue(newCode, type);
-
-      onChange(newValue);
-    },
-    [type, onChange]
-  );
 
   useEffect(() => {
     setDefs([customTreeTypeDefCreator(stateManager.store)]);
@@ -241,7 +233,7 @@ export const ExpressionWidget: React.FC<WidgetProps<ExpressionWidgetType>> = pro
       error={error}
       defs={defs}
       onChange={onCodeChange}
-      onBlur={onBlur}
+      onBlur={onChange}
       onFocus={onFocus}
     />
   );

packages/editor-sdk/src/components/Widgets/NumberField.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { WidgetProps } from '../../types/widget';
 import { implementWidget } from '../../utils/widget';
 import {
@@ -23,6 +23,15 @@ export const NumberField: React.FC<WidgetProps<NumberFieldType>> = props => {
   const [stringValue, setStringValue] = React.useState(String(value));
   const numValue = useRef<number>(value);
 
+  useEffect(() => {
+    // Convert value to boolean after switch from expression widget mode.
+    if (typeof value !== 'number') {
+      onChange(0);
+      setStringValue('0');
+      numValue.current = 0;
+    }
+  }, [onChange, value]);
+
   return (
     <NumberInput
       value={stringValue}

packages/editor-sdk/src/types/editor.ts

@@ -3,6 +3,14 @@ import { RegistryInterface } from '@sunmao-ui/runtime';
 import WidgetManager from '../models/WidgetManager';
 import type { Operations } from '../types/operation';
 
+type EvalOptions = {
+  evalListItem?: boolean;
+  scopeObject?: Record<string, any>;
+  overrideScope?: boolean;
+  fallbackWhenError?: (exp: string) => any;
+  ignoreEvalError?: boolean;
+};
+
 export interface EditorServices {
   registry: RegistryInterface;
   editorStore: {
@@ -14,7 +22,7 @@ export interface EditorServices {
   };
   stateManager: {
     store: Record<string, any>;
-    deepEval: Function;
+    deepEval: (value: any, options?: EvalOptions) => any;
   };
   widgetManager: WidgetManager;
 }

packages/runtime/__tests__/ImplWrapper/ImplWrapper.spec.tsx

@@ -59,7 +59,7 @@ describe('after the schema changes', () => {
 describe('hidden trait condition', () => {
   it('the hidden component should not merge state in store', () => {
     const { App, stateManager } = initSunmaoUI({ libs: [TestLib] });
-    stateManager.noConsoleError = true;
+    stateManager.mute = true;
     const { unmount } = render(<App options={HiddenTraitSchema} />);
     expect(screen.getByTestId('tester')).toHaveTextContent(SingleComponentRenderTimes);
     expect(screen.getByTestId('tester-text')).toHaveTextContent('');
@@ -73,7 +73,7 @@ describe('hidden trait condition', () => {
 describe('when parent rerender change', () => {
   it('the children should not rerender', () => {
     const { App, stateManager, apiService } = initSunmaoUI({ libs: [TestLib] });
-    stateManager.noConsoleError = true;
+    stateManager.mute = true;
     const { unmount } = render(<App options={ParentRerenderSchema} />);
     const childTester = screen.getByTestId('tester');
     expect(childTester).toHaveTextContent(SingleComponentRenderTimes);
@@ -111,7 +111,7 @@ describe('when component merge state synchronously', () => {
       draft.spec.components[1] = temp;
     });
     const { App, stateManager } = initSunmaoUI({ libs: [TestLib] });
-    stateManager.noConsoleError = true;
+    stateManager.mute = true;
     const { unmount } = render(<App options={newMergeStateSchema} />);
     expect(screen.getByTestId('tester')).toHaveTextContent(SingleComponentRenderTimes);
     expect(screen.getByTestId('tester-text')).toHaveTextContent('foo-bar-baz');
@@ -130,7 +130,7 @@ describe('when component merge state asynchronously', () => {
 
   it('it will cause extra render', async () => {
     const { App, stateManager } = initSunmaoUI({ libs: [TestLib] });
-    stateManager.noConsoleError = true;
+    stateManager.mute = true;
     const { unmount } = render(<App options={AsyncMergeStateSchema} />);
     await waitFor(timeoutPromise);
     // 4 = 2 default render times + timeout trait run twice causing another 2 renders
@@ -147,7 +147,7 @@ describe('when component merge state asynchronously', () => {
       draft.spec.components[1] = temp;
     });
     const { App, stateManager } = initSunmaoUI({ libs: [TestLib] });
-    stateManager.noConsoleError = true;
+    stateManager.mute = true;
     const { unmount } = render(<App options={newMergeStateSchema} />);
     await waitFor(timeoutPromise);
     // 5 = 2 default render times + timeout trait run twice causing another 2 renders + order causing change
@@ -161,7 +161,7 @@ describe('when component merge state asynchronously', () => {
 describe('slot trait if condition', () => {
   it('only teardown component state when it is not hidden before the check', () => {
     const { App, stateManager, apiService } = initSunmaoUI({ libs: [TestLib] });
-    stateManager.noConsoleError = true;
+    stateManager.mute = true;
     const { unmount } = render(<App options={TabsWithSlotsSchema} />);
     expect(screen.getByTestId('tabs')).toHaveTextContent(`Tab OneTab Two`);
 

packages/runtime/__tests__/_internal/List.spec.tsx

@@ -145,7 +145,7 @@ const ListEventSchema: Application = {
 
 describe('Core List Component', () => {
   const { App, stateManager } = initSunmaoUI({ libs: [TestLib] });
-  stateManager.noConsoleError = true;
+  stateManager.mute = true;
   it('can render component directly', () => {
     const { unmount } = render(<App options={ListSchema} />);
 

packages/runtime/__tests__/_internal/ModuleRenderer.spec.tsx

@@ -117,7 +117,7 @@ const ApplicationSchema: Application = {
 describe('ModuleRenderer', () => {
   const { App, stateManager, registry } = initSunmaoUI({ libs: [TestLib] });
   registry.registerModule(ModuleSchema);
-  stateManager.noConsoleError = true;
+  stateManager.mute = true;
   it('can accept properties', () => {
     const { rerender, unmount } = render(<App options={ApplicationSchema} />);
     expect(screen.getByTestId('myModule__input')).toHaveValue('foo');

packages/runtime/__tests__/expression.spec.ts

@@ -26,7 +26,7 @@ describe('evalExpression function', () => {
   };
   const stateManager = new StateManager();
   stateManager.store = reactive<Record<string, any>>(scope);
-  stateManager.noConsoleError = true;
+  stateManager.mute = true;
   it('can eval {{}} expression', () => {
     const evalOptions = { evalListItem: false };
 
@@ -120,7 +120,7 @@ describe('evalExpression function', () => {
   it('can watch the state change in the object value', () => {
     const stateManager = new StateManager();
 
-    stateManager.noConsoleError = true;
+    stateManager.mute = true;
     stateManager.store.text = { value: 'hello' };
 
     return new Promise<void>(resolve => {
@@ -141,7 +141,7 @@ describe('evalExpression function', () => {
   it('can watch the state change in the expression string', () => {
     const stateManager = new StateManager();
 
-    stateManager.noConsoleError = true;
+    stateManager.mute = true;
     stateManager.store.text = { value: 'hello' };
 
     return new Promise<void>(resolve => {

packages/runtime/src/services/StateManager.ts

@@ -1,4 +1,4 @@
-import _, { toNumber, mapValues, isArray, isPlainObject, set } from 'lodash';
+import _, { mapValues, isArray, isPlainObject, set } from 'lodash';
 import dayjs from 'dayjs';
 import produce from 'immer';
 import 'dayjs/locale/zh-cn';
@@ -7,13 +7,7 @@ import relativeTime from 'dayjs/plugin/relativeTime';
 import LocalizedFormat from 'dayjs/plugin/localizedFormat';
 import { isProxy, reactive, toRaw } from '@vue/reactivity';
 import { watch } from '../utils/watchReactivity';
-import {
-  isNumeric,
-  parseExpression,
-  consoleError,
-  ConsoleType,
-  ExpChunk,
-} from '@sunmao-ui/shared';
+import { parseExpression, consoleError, ConsoleType, ExpChunk } from '@sunmao-ui/shared';
 import { type PropsAfterEvaled } from '@sunmao-ui/core';
 
 dayjs.extend(relativeTime);
@@ -26,6 +20,7 @@ type EvalOptions = {
   scopeObject?: Record<string, any>;
   overrideScope?: boolean;
   fallbackWhenError?: (exp: string) => any;
+  // when ignoreEvalError is true, the eval process will continue after error happens in nests expression.
   ignoreEvalError?: boolean;
 };
 
@@ -51,8 +46,7 @@ export class StateManager {
 
   dependencies: Record<string, unknown>;
 
-  // when ignoreEvalError is true, the eval process will continue after error happens in nests expression.
-  noConsoleError = false;
+  mute = true;
 
   constructor(dependencies: Record<string, unknown> = {}) {
     this.dependencies = { ...DefaultDependencies, ...dependencies };
@@ -101,15 +95,6 @@ export class StateManager {
     let result: unknown[] = [];
 
     try {
-      if (isNumeric(raw)) {
-        return toNumber(raw);
-      }
-      if (raw === 'true') {
-        return true;
-      }
-      if (raw === 'false') {
-        return false;
-      }
       const expChunk = parseExpression(raw, evalListItem);
 
       if (typeof expChunk === 'string') {
@@ -127,8 +112,8 @@ export class StateManager {
       if (error instanceof Error) {
         const expressionError = new ExpressionError(error.message);
 
-        if (!this.noConsoleError) {
-          consoleError(ConsoleType.Expression, '', expressionError.message);
+        if (!this.mute) {
+          consoleError(ConsoleType.Expression, raw, expressionError.message);
         }
 
         return fallbackWhenError ? fallbackWhenError(raw) : expressionError;