fix: 高德修改对象引用问题 (#30)

packages/li-editor/src/hooks/internal/use-immer.ts

@@ -1,23 +1,20 @@
 import type { Draft, nothing } from 'immer';
-import produce, { freeze, setAutoFreeze } from 'immer';
+import produce, { freeze } from 'immer';
 import type { Dispatch } from 'react';
 import { useCallback, useMemo, useReducer, useState } from 'react';
 
-setAutoFreeze(false);
-
 export type Reducer<S = any, A = any> = (
   draftState: Draft<S>,
   action: A,
 ) => void | (S extends undefined ? typeof nothing : S);
 export type DraftFunction<S> = (draft: Draft<S>) => void;
 export type Updater<S> = (arg: S | DraftFunction<S>) => void;
 export type ImmerHook<S> = [S, Updater<S>];
-export function useImmer<S = any>(initialValue: S | (() => S)): ImmerHook<S>;
+export function useImmer<S = any>(initialValue: S | (() => S), freezeDeep?: boolean): ImmerHook<S>;
 
-export function useImmer(initialValue: any) {
+export function useImmer(initialValue: any, freezeDeep: boolean = true) {
   const [val, updateValue] = useState(() =>
-    // change freeze to default
-    freeze(typeof initialValue === 'function' ? initialValue() : initialValue),
+    freeze(typeof initialValue === 'function' ? initialValue() : initialValue, freezeDeep),
   );
   return [
     val,

packages/li-editor/src/layout/RuntimeApp/index.tsx

@@ -2,7 +2,7 @@ import type { Application, DatasetSchema, LIRuntimeApp } from '@antv/li-sdk';
 import { useLatest, useMemoizedFn, useUpdateEffect } from 'ahooks';
 import classNames from 'classnames';
 import type { WritableDraft } from 'immer/dist/internal';
-import { debounce } from 'lodash-es';
+import { cloneDeep, debounce } from 'lodash-es';
 import type { CSSProperties } from 'react';
 import React from 'react';
 import type { FallbackProps } from 'react-error-boundary';
@@ -23,6 +23,13 @@ function FallbackRender({ error, resetErrorBoundary }: FallbackProps) {
   );
 }
 
+// 使用 Editor 传下来的 defaultApplication 可能是被 freeze 的
+// 高德地图初始化的时候，会使用 center 属性，直接引用修改变量
+// 为避免修改失败报错，解冻 map 属性
+function cloneDefaultApplication(defaultApplication: Application): Application {
+  return { ...defaultApplication, spec: { ...defaultApplication.spec, map: cloneDeep(defaultApplication.spec.map) } };
+}
+
 export type RuntimeAppProps = {
   /** 默认的应用配置 */
   defaultApplication: Application;
@@ -44,7 +51,10 @@ const RuntimeApp: React.FC<RuntimeAppProps> = (props) => {
   const { state } = useEditorState();
 
   // LISDK 配置项
-  const [sdkConfigState, updateSdkConfigState] = useImmer<Application>(defaultApplication);
+  const [sdkConfigState, updateSdkConfigState] = useImmer<Application>(
+    cloneDefaultApplication(defaultApplication),
+    false,
+  );
 
   const latestAppConfigRef = useLatest({
     ...sdkConfigState,