chore: debug 功能改成在 env 里初始化，方便针对特定 amis 渲染区域关闭 (#3738)

* chore: debug 功能改成在 env 里初始化，方便针对特定 amis 渲染区域关闭

* 补回 warning

docs/zh-CN/extend/debug.md

@@ -8,10 +8,11 @@ amis 内置了调试工具，可以查看组件内部运行日志，方便分析
 
 ## 开启方法
 
-默认不会开启这个功能，可以通过下面两种方式开启：
+默认不会开启这个功能，可以通过下面三种方式开启：
 
+1. render 的 env 里设置 `enableAMISDebug`。
 1. 配置全局变量 `enableAMISDebug` 的值为 `true`，比如 `window.enableAMISDebug = true`。
-2. 在页面 URL 参数中加上 `amisDebug=1`，比如 `http://xxx.com/?amisDebug=1`。
+1. 在页面 URL 参数中加上 `amisDebug=1`，比如 `http://xxx.com/?amisDebug=1`。
 
 开启之后，在页面右侧就会显示。
 

src/SchemaRenderer.tsx

@@ -15,7 +15,7 @@ import {asFormItem} from './renderers/Form/Item';
 import {renderChild, renderChildren} from './Root';
 import {IScopedContext, ScopedContext} from './Scoped';
 import {Schema, SchemaNode} from './types';
-import {DebugWrapper, enableAMISDebug} from './utils/debug';
+import {DebugWrapper} from './utils/debug';
 import getExprProperties from './utils/filter-schema';
 import {anyChanged, chainEvents, autobind} from './utils/helper';
 import {SimpleMap} from './utils/SimpleMap';
@@ -417,7 +417,7 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
       />
     );
 
-    return enableAMISDebug ? (
+    return this.props.env.enableAMISDebug ? (
       <DebugWrapper renderer={renderer}>{component}</DebugWrapper>
     ) : (
       component

src/factory.tsx

@@ -42,6 +42,7 @@ import {
   RendererEvent
 } from './utils/renderer-event';
 import {runActions} from './actions/Action';
+import {enableDebug} from './utils/debug';
 
 export interface TestFunc {
   (
@@ -152,6 +153,10 @@ export interface RenderOptions {
    * 过滤 html 标签，可用来添加 xss 保护逻辑
    */
   filterHtml?: (input: string) => string;
+  /**
+   * 是否开启 amis 调试
+   */
+  enableAMISDebug?: boolean;
   [propName: string]: any;
 }
 
@@ -271,6 +276,10 @@ const defaultOptions: RenderOptions = {
   affixOffsetBottom: 0,
   richTextToken: '',
   useMobileUI: true, // 是否启用移动端原生 UI
+  enableAMISDebug:
+    (window as any).enableAMISDebug ??
+    location.search.indexOf('amisDebug=1') !== -1 ??
+    false,
   loadRenderer,
   rendererEventListeners: [],
   fetcher() {
@@ -492,6 +501,10 @@ export function render(
       translate
     } as any;
 
+    if (options.enableAMISDebug) {
+      enableDebug();
+    }
+
     store = RendererStore.create({}, options);
     stores[options.session || 'global'] = store;
   }

src/utils/debug.tsx

@@ -284,24 +284,6 @@ const AMISDebug = observer(({store}: {store: AMISDebugStore}) => {
   );
 });
 
-export let enableAMISDebug = false;
-
-// 开启 debug 有两种方法，一个是设置 enableAMISDebug 全局变量，另一个是通过 amisDebug=1 query
-if (
-  (window as any).enableAMISDebug ||
-  location.search.indexOf('amisDebug=1') !== -1
-) {
-  enableAMISDebug = true;
-  // 页面只有一个
-  if (!(window as any).amisDebugElement) {
-    const amisDebugElement = document.createElement('div');
-    document.body.appendChild(amisDebugElement);
-    const element = <AMISDebug store={store} />;
-    render(element, amisDebugElement);
-    (window as any).amisDebugElement = true;
-  }
-}
-
 /**
  * 鼠标移动到某个组件的效果
  */
@@ -365,7 +347,20 @@ autorun(() => {
   }
 });
 
-if (enableAMISDebug) {
+// 页面中只能有一个实例
+let isEnabled = false;
+
+export function enableDebug() {
+  if (isEnabled) {
+    return;
+  }
+  isEnabled = true;
+
+  const amisDebugElement = document.createElement('div');
+  document.body.appendChild(amisDebugElement);
+  const element = <AMISDebug store={store} />;
+  render(element, amisDebugElement);
+
   document.body.appendChild(amisHoverBox);
   document.body.appendChild(amisActiveBox);
   document.addEventListener('mousemove', handleMouseMove);
@@ -378,9 +373,6 @@ interface DebugWrapperProps {
 
 export class DebugWrapper extends Component<DebugWrapperProps> {
   componentDidMount() {
-    if (!enableAMISDebug) {
-      return;
-    }
     const root = findDOMNode(this) as HTMLElement;
     if (!root) {
       return;
@@ -407,7 +399,7 @@ type Category = 'api' | 'event';
  * @param ext 扩展信息
  */
 export function debug(cat: Category, msg: string, ext?: object) {
-  if (!enableAMISDebug) {
+  if (!isEnabled) {
     return;
   }
   const log = {
@@ -426,7 +418,7 @@ export function debug(cat: Category, msg: string, ext?: object) {
  * @param ext 扩展信息
  */
 export function warning(cat: Category, msg: string, ext?: object) {
-  if (!enableAMISDebug) {
+  if (!isEnabled) {
     return;
   }
   store.logs.push({