add custom loadRenderer

__tests__/__snapshots__/factory.test.tsx.snap

@@ -1,5 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`factory custom loadRenderer 1`] = `
+<div>
+  <div>
+    Not Found
+  </div>
+</div>
+`;
+
 exports[`factory unregistered Renderer 1`] = `
 <div>
   <div

__tests__/factory.test.tsx

@@ -6,15 +6,29 @@ import {
 } from '../src/factory';
 import React = require('react');
 import {render, fireEvent, cleanup} from 'react-testing-library';
+import { wait, makeEnv } from './helper';
 
-test('factory unregistered Renderer', () => {
+test('factory unregistered Renderer', async () => {
     const {
         container,
     } = render(amisRender({
         type: 'my-renderer',
         a: 23
     }));
+    await wait(100);
+    expect(container).toMatchSnapshot(); // not found
+});
 
+test('factory custom loadRenderer', async () => {
+    const {
+        container,
+    } = render(amisRender({
+        type: 'my-renderer',
+        a: 23
+    }, {}, makeEnv({
+        loadRenderer: () => Promise.resolve(() => (<div>Not Found</div>))
+    })));
+    await wait(100);
     expect(container).toMatchSnapshot(); // not found
 });
 

src/factory.tsx

@@ -47,6 +47,7 @@ import Scoped from './Scoped';
 import { getTheme, ThemeInstance, ClassNamesFn, ThemeContext } from "./theme";
 import find = require("lodash/find");
 import Alert from "./components/Alert2";
+import { LazyComponent } from './components';
 
 export interface TestFunc {
     (path: string, schema?: object): boolean;
@@ -79,6 +80,7 @@ export interface RendererEnv {
     affixOffsetTop: number;
     affixOffsetBottom: number;
     richTextToken: string;
+    loadRenderer: (schema:Schema, path:string) => Promise<React.ReactType>;
     [propName:string]: any;
 };
 
@@ -132,6 +134,7 @@ export interface RenderOptions {
     rendererResolver?: (path:string, schema:Schema, props:any) => null | RendererConfig;
     copy?: (contents:string) => void;
     getModalContainer?: () => HTMLElement;
+    loadRenderer?: (schema:Schema, path: string) => Promise<React.ReactType>;
     affixOffsetTop?: number;
     affixOffsetBottom?: number;
     richTextToken?: string;
@@ -423,11 +426,9 @@ class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
             }, schema) : schema.children;
         } else if (!this.renderer) {
             return (
-                <Alert level="danger">
+                <LazyComponent
-                    <p>Error: 找不到对应的渲染器</p>
+                    getComponent={() => rest.env.loadRenderer(schema, $path)}
-                    <p>Path: {$path}</p>
+                />
-                    <pre><code>{JSON.stringify(schema, null, 2)}</code></pre>
-                </Alert>
             );
         }
 
@@ -621,6 +622,15 @@ const defaultOptions:RenderOptions = {
     affixOffsetTop: 50,
     affixOffsetBottom: 0,
     richTextToken: '',
+    loadRenderer(schema, path) {
+        return Promise.resolve(() => (
+            <Alert level="danger">
+                <p>Error: 找不到对应的渲染器</p>
+                <p>Path: {path}</p>
+                <pre><code>{JSON.stringify(schema, null, 2)}</code></pre>
+            </Alert>
+        ));
+    },
     fetcher() {
         return Promise.reject('fetcher is required');
     },