feat: add ComponentsProvider, LazyComponent

akai · akai · commit 53b38021a862 · 2021-01-18T20:17:27.000+08:00
diff --git a/src/components/ComponentsProvider/index.tsx b/src/components/ComponentsProvider/index.tsx
@@ -0,0 +1,124 @@
+import React from 'react';
+import { lazyComponent, LazyComponentResult } from '../../utils/lazyComponent';
+// eslint-disable-next-line import/no-cycle
+import { LazyComponent } from '../LazyComponent';
+
+// Interface
+interface ComponentInterfaceWithComponent {
+  component: React.ComponentType<any>;
+}
+
+interface ComponentInterfaceWithUrl {
+  url: string;
+  name: string;
+}
+
+interface ComponentInterfaceWithDecorator {
+  decorator: string;
+  data: any;
+}
+
+type ComponentInterface =
+  | ComponentInterfaceWithComponent
+  | ComponentInterfaceWithUrl
+  | ComponentInterfaceWithDecorator;
+
+interface CallbackParamsWithAsync {
+  async: boolean;
+  component?: any;
+}
+
+interface CallbackParamsWithError {
+  errCode: string;
+}
+
+interface GetComponentCallback {
+  (e: CallbackParamsWithAsync | CallbackParamsWithError): void;
+}
+
+interface ComponentsContextInterface {
+  addComponent: (code: string, value: ComponentInterface) => void;
+  getComponent: (
+    code: string,
+    callback?: GetComponentCallback,
+  ) => React.ComponentType<any> | LazyComponentResult | null;
+}
+
+export interface ComponentsMap {
+  [k: string]: ComponentInterface;
+}
+
+export interface ComponentsProviderProps {
+  components: ComponentsMap;
+}
+
+// Context
+const ComponentsContext = React.createContext<ComponentsContextInterface>({
+  addComponent: () => {},
+  getComponent: () => null,
+});
+
+// Provider
+export const ComponentsProvider: React.FC<ComponentsProviderProps> = (props) => {
+  const { components, children } = props;
+  const componentsRef = React.useRef(components || {});
+
+  function addComponent(code: string, val: ComponentInterface) {
+    componentsRef.current[code] = val;
+  }
+
+  function getComponent(code: string, callback: GetComponentCallback = () => {}) {
+    const comp = componentsRef.current[code];
+
+    // no component
+    if (!comp) {
+      callback({ errCode: 'NO_CODE' });
+      return null;
+    }
+
+    //
+    if ('component' in comp) {
+      callback({ async: false, component: comp.component });
+      return comp.component;
+    }
+
+    if ('decorator' in comp) {
+      const component = (compProps: any) => (
+        <LazyComponent code={comp.decorator} decoratorData={comp.data} {...compProps} />
+      );
+
+      componentsRef.current[code] = { component };
+      return component;
+    }
+
+    if ('url' in comp) {
+      const component = lazyComponent(
+        comp.url,
+        comp.name,
+        () => {
+          componentsRef.current[code] = { component };
+          callback({ async: true, component });
+        },
+        () => {
+          callback({ errCode: 'ERR_IMPORT_SCRIPT' });
+        },
+      );
+
+      return component;
+    }
+
+    callback({ errCode: 'NO_HANDLER' });
+    return null;
+  }
+
+  return (
+    <ComponentsContext.Provider value={{ addComponent, getComponent }}>
+      {children}
+    </ComponentsContext.Provider>
+  );
+};
+
+// Hooks
+export function useComponents() {
+  return React.useContext(ComponentsContext);
+}
diff --git a/src/components/ErrorBoundary/index.tsx b/src/components/ErrorBoundary/index.tsx
@@ -17,10 +17,13 @@ export class ErrorBoundary extends React.Component<
   React.PropsWithRef<React.PropsWithChildren<ErrorBoundaryProps>>,
   ErrorBoundaryState
 > {
-  state = {
-    error: null,
-    errorInfo: null,
-  };
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = {
+      error: null,
+      errorInfo: null,
+    };
+  }
 
   componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
     const { onError } = this.props;
diff --git a/src/components/LazyComponent/index.tsx b/src/components/LazyComponent/index.tsx
@@ -0,0 +1,50 @@
+import React, { Suspense } from 'react';
+import { ErrorBoundary } from '../..';
+// eslint-disable-next-line import/no-cycle
+import { useComponents } from '../ComponentsProvider';
+
+interface LazyComponentBaseProps {
+  fallback?: NonNullable<React.ReactNode> | null;
+  onError?: (error: Error, info?: React.ErrorInfo) => void;
+  [k: string]: any;
+}
+
+interface LazyComponentPropsWithComponent extends LazyComponentBaseProps {
+  component: React.ComponentType;
+}
+
+interface LazyComponentPropsWithCode extends LazyComponentBaseProps {
+  code: string;
+  onLoad?: (e: { async: boolean }) => void;
+}
+
+export type LazyComponentProps = LazyComponentPropsWithComponent | LazyComponentPropsWithCode;
+
+export const LazyComponent: React.FC<LazyComponentProps> = (props) => {
+  const { getComponent } = useComponents();
+  const { component, code, fallback, onLoad, onError, ...rest } = props;
+
+  const Comp =
+    component ||
+    getComponent(code, (res) => {
+      if ('async' in res && onLoad) {
+        onLoad(res);
+      } else if ('errCode' in res && onError) {
+        onError(new Error(res.errCode));
+      }
+    });
+
+  if (component && onLoad) {
+    onLoad({ async: false, component });
+  }
+
+  return Comp ? (
+    <ErrorBoundary onError={onError}>
+      <Suspense fallback={fallback || null}>
+        <Comp {...rest} />
+      </Suspense>
+    </ErrorBoundary>
+  ) : null;
+};
+
+export default LazyComponent;
diff --git a/src/index.ts b/src/index.ts
@@ -5,6 +5,15 @@ export { default as clsx } from 'clsx';
 export { importScript } from './utils/importScript';
 export { lazyComponent } from './utils/lazyComponent';
 export { mountComponent } from './utils/mountComponent';
+
+/* eslint-disable import/no-cycle */
+export { ComponentsProvider, useComponents } from './components/ComponentsProvider';
+export type { ComponentsProviderProps, ComponentsMap } from './components/ComponentsProvider';
+
+export { LazyComponent } from './components/LazyComponent';
+export type { LazyComponentProps } from './components/LazyComponent';
+/* eslint-enable import/no-cycle */
+
 export { Avatar } from './components/Avatar';
 export type { AvatarProps, AvatarSize, AvatarShape } from './components/Avatar';
 export { Backdrop } from './components/Backdrop';
diff --git a/storybook/stories/ComponentProvider.stories.tsx b/storybook/stories/ComponentProvider.stories.tsx
@@ -0,0 +1,181 @@
+import React from 'react';
+import { Meta } from '@storybook/react/types-6-0';
+
+import * as ChatUI from '../../src';
+import { ComponentsMap } from '../../src';
+
+const { ComponentsProvider, useComponents, LazyComponent } = ChatUI;
+
+export default {
+  title: 'ComponentsProvider',
+  component: ComponentsProvider,
+} as Meta;
+
+// for Alime Component
+declare global {
+  interface Window {
+    ChatUI: any;
+  }
+}
+
+window.React = React;
+window.ChatUI = ChatUI;
+
+const ctx = {
+  ui: {
+    scrollToEnd: () => {},
+  },
+  log: {
+    expo: () => {},
+  },
+};
+
+// components
+const components: ComponentsMap = {
+  slot: {
+    name: 'AlimeComponentSlot',
+    url: '//g.alicdn.com/alime-components/slot/0.1.3/index.js',
+  },
+  'error-url': {
+    name: 'AlimeComponentPromptAccess',
+    url: '//g.alicdn.com/alime-components/slot/0.1.3/no-index.js',
+  },
+  'local-component': {
+    component: ({ data }: { data: string }) => <p>local component: {data}</p>,
+  },
+  'my-decorator': {
+    component: (props) => (
+      <div>
+        <h2>`my-decorator`</h2>
+        <p>props:</p>
+        <pre>{JSON.stringify(props, null, 4)}</pre>
+      </div>
+    ),
+  },
+  'test-decorator': {
+    decorator: 'my-decorator',
+    data: {
+      jsonUrl: 'this is a url',
+      d1: 'd1',
+      d2: 'd2',
+    },
+  },
+};
+
+function TestLocalComponent() {
+  return (
+    <div>
+      <h1>Example:</h1>
+      <LazyComponent code="local-component" onLoad={(a: any) => console.log('onLoad:', a)} />
+    </div>
+  );
+}
+
+export const LocalComponent = () => (
+  <ComponentsProvider components={components}>
+    <TestLocalComponent />
+  </ComponentsProvider>
+);
+
+function TestAsyncComponent() {
+  return (
+    <div>
+      <h1>Example:</h1>
+      <LazyComponent
+        code="slot"
+        data={{ list: [{ title: 'item-1' }, { title: 'item-2' }] }}
+        meta={{}}
+        ctx={ctx}
+        onLoad={(a: any) => console.log('onLoad:', a)}
+      />
+    </div>
+  );
+}
+
+export const AsyncComponent = () => (
+  <ComponentsProvider components={components}>
+    <TestAsyncComponent />
+  </ComponentsProvider>
+);
+
+function TestNotFoundCode() {
+  const [errMsg, setErrMsg] = React.useState('');
+  return (
+    <div>
+      <h1>Example:</h1>
+      <LazyComponent
+        code="no-code"
+        onError={(err) => {
+          setErrMsg(err.message);
+        }}
+      />
+      {errMsg && <pre>Error message: {errMsg}</pre>}
+    </div>
+  );
+}
+
+export const NotFoundCode = () => (
+  <ComponentsProvider components={components}>
+    <TestNotFoundCode />
+  </ComponentsProvider>
+);
+
+function TestComponentHasError() {
+  const [errMsg, setErrMsg] = React.useState('');
+  return (
+    <div>
+      <h1>Example:</h1>
+      <LazyComponent
+        code="slot"
+        onError={(err, errInfo) => {
+          setErrMsg(err.message);
+          console.log(errInfo);
+        }}
+      />
+      {errMsg && <pre>Error message: {errMsg}</pre>}
+    </div>
+  );
+}
+
+export const ComponentHasError = () => (
+  <ComponentsProvider components={components}>
+    <TestComponentHasError />
+  </ComponentsProvider>
+);
+
+function TestErrorUrl() {
+  const [errMsg, setErrMsg] = React.useState('');
+  return (
+    <div>
+      <h1>Example:</h1>
+      <LazyComponent
+        code="error-url"
+        onError={(err) => {
+          setErrMsg(err.message);
+        }}
+      />
+      {errMsg && <pre>Error message: {errMsg}</pre>}
+    </div>
+  );
+}
+
+export const ErrorUrl = () => (
+  <ComponentsProvider components={components}>
+    <TestErrorUrl />
+  </ComponentsProvider>
+);
+
+function TestDecorator() {
+  return (
+    <div>
+      <h1>Example:</h1>
+      <LazyComponent code="test-decorator" data1="foo" data2="bar" />
+    </div>
+  );
+}
+
+export const Decorator = () => (
+  <ComponentsProvider components={components}>
+    <TestDecorator />
+  </ComponentsProvider>
+);
