refactor: remove error-fallback and __builtins__ from plugin-core
This commit is contained in:
parent
dbd5622f27
commit
8d580b72b2
@ -1,3 +0,0 @@
|
|||||||
export * from './useConfig';
|
|
||||||
export * from './usePrefixCls';
|
|
||||||
export * from './useToken';
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
import { ConfigProvider } from 'antd';
|
|
||||||
import { useContext } from 'react';
|
|
||||||
|
|
||||||
const { ConfigContext } = ConfigProvider;
|
|
||||||
export const useConfig = () => useContext(ConfigContext);
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
import { ConfigProvider } from 'antd';
|
|
||||||
import { useContext } from 'react';
|
|
||||||
|
|
||||||
export const usePrefixCls = (
|
|
||||||
tag?: string,
|
|
||||||
props?: {
|
|
||||||
prefixCls?: string;
|
|
||||||
},
|
|
||||||
) => {
|
|
||||||
const { getPrefixCls } = useContext(ConfigProvider.ConfigContext) || {};
|
|
||||||
if ('ConfigContext' in ConfigProvider) {
|
|
||||||
return getPrefixCls?.(tag, props?.prefixCls) || '';
|
|
||||||
} else {
|
|
||||||
const prefix = props?.prefixCls ?? 'ant-';
|
|
||||||
return `${prefix}${tag ?? ''}`;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
import { theme } from 'antd';
|
|
||||||
import { CustomToken } from '../style';
|
|
||||||
|
|
||||||
interface Result extends ReturnType<typeof theme.useToken> {
|
|
||||||
token: CustomToken;
|
|
||||||
}
|
|
||||||
|
|
||||||
const useToken = () => {
|
|
||||||
const result = theme.useToken();
|
|
||||||
return result as Result;
|
|
||||||
};
|
|
||||||
|
|
||||||
export { useToken };
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
export * from './hooks';
|
|
||||||
export * from './loading';
|
|
||||||
export * from './portal';
|
|
||||||
export * from './style';
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
import { message } from 'antd';
|
|
||||||
|
|
||||||
export const loading = async (title: React.ReactNode = 'Loading...', processor: () => Promise<any>) => {
|
|
||||||
let hide: any = null;
|
|
||||||
const loading = setTimeout(() => {
|
|
||||||
hide = message.loading(title);
|
|
||||||
}, 100);
|
|
||||||
try {
|
|
||||||
return await processor();
|
|
||||||
} finally {
|
|
||||||
hide?.();
|
|
||||||
clearTimeout(loading);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
@ -1,63 +0,0 @@
|
|||||||
import { Observer, ReactFC } from '@formily/react';
|
|
||||||
import { observable } from '@formily/reactive';
|
|
||||||
import React, { Fragment } from 'react';
|
|
||||||
import { createPortal } from 'react-dom';
|
|
||||||
import { render as reactRender, unmount as reactUnmount } from './render';
|
|
||||||
export interface IPortalProps {
|
|
||||||
id?: string | symbol;
|
|
||||||
}
|
|
||||||
|
|
||||||
const PortalMap = observable(new Map<string | symbol, React.ReactNode>());
|
|
||||||
|
|
||||||
export const createPortalProvider = (id: string | symbol) => {
|
|
||||||
const Portal: ReactFC<IPortalProps> = (props) => {
|
|
||||||
if (props.id && !PortalMap.has(props.id)) {
|
|
||||||
PortalMap.set(props.id, null);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Fragment>
|
|
||||||
{props.children}
|
|
||||||
<Observer>
|
|
||||||
{() => {
|
|
||||||
if (!props.id) return <></>;
|
|
||||||
const portal = PortalMap.get(props.id);
|
|
||||||
if (portal) return createPortal(portal, document.body);
|
|
||||||
return <></>;
|
|
||||||
}}
|
|
||||||
</Observer>
|
|
||||||
</Fragment>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
Portal.defaultProps = {
|
|
||||||
id,
|
|
||||||
};
|
|
||||||
return Portal;
|
|
||||||
};
|
|
||||||
|
|
||||||
export function createPortalRoot<T extends React.ReactNode>(host: HTMLElement, id: string) {
|
|
||||||
function render(renderer?: () => T) {
|
|
||||||
if (PortalMap.has(id)) {
|
|
||||||
PortalMap.set(id, renderer?.());
|
|
||||||
} else if (host) {
|
|
||||||
reactRender(<Fragment>{renderer?.()}</Fragment>, host);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function unmount() {
|
|
||||||
if (PortalMap.has(id)) {
|
|
||||||
PortalMap.set(id, null);
|
|
||||||
}
|
|
||||||
if (host) {
|
|
||||||
const unmountResult = reactUnmount(host);
|
|
||||||
if (unmountResult && host.parentNode) {
|
|
||||||
host.parentNode?.removeChild(host);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
render,
|
|
||||||
unmount,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@ -1,89 +0,0 @@
|
|||||||
import { ReactElement } from 'react';
|
|
||||||
import * as ReactDOM from 'react-dom';
|
|
||||||
import type { Root } from 'react-dom/client';
|
|
||||||
|
|
||||||
// 移植自rc-util: https://github.com/react-component/util/blob/master/src/React/render.ts
|
|
||||||
|
|
||||||
type CreateRoot = (container: ContainerType) => Root;
|
|
||||||
|
|
||||||
// Let compiler not to search module usage
|
|
||||||
const fullClone = {
|
|
||||||
...ReactDOM,
|
|
||||||
} as typeof ReactDOM & {
|
|
||||||
__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED?: {
|
|
||||||
usingClientEntryPoint?: boolean;
|
|
||||||
};
|
|
||||||
createRoot?: CreateRoot;
|
|
||||||
};
|
|
||||||
|
|
||||||
const { version, render: reactRender, unmountComponentAtNode } = fullClone;
|
|
||||||
|
|
||||||
let createRoot: CreateRoot;
|
|
||||||
try {
|
|
||||||
const mainVersion = Number((version || '').split('.')[0]);
|
|
||||||
if (mainVersion >= 18 && fullClone.createRoot) {
|
|
||||||
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
|
||||||
createRoot = fullClone.createRoot;
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
// Do nothing;
|
|
||||||
}
|
|
||||||
|
|
||||||
function toggleWarning(skip: boolean) {
|
|
||||||
const { __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED } = fullClone;
|
|
||||||
|
|
||||||
if (
|
|
||||||
__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED &&
|
|
||||||
typeof __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED === 'object'
|
|
||||||
) {
|
|
||||||
__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.usingClientEntryPoint = skip;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const MARK = '__antd_mobile_root__';
|
|
||||||
|
|
||||||
// ========================== Render ==========================
|
|
||||||
type ContainerType = (Element | DocumentFragment) & {
|
|
||||||
[MARK]?: Root;
|
|
||||||
};
|
|
||||||
|
|
||||||
function legacyRender(node: ReactElement, container: ContainerType) {
|
|
||||||
reactRender(node, container);
|
|
||||||
}
|
|
||||||
|
|
||||||
function concurrentRender(node: ReactElement, container: ContainerType) {
|
|
||||||
toggleWarning(true);
|
|
||||||
const root = container[MARK] || createRoot(container);
|
|
||||||
toggleWarning(false);
|
|
||||||
root.render(node);
|
|
||||||
container[MARK] = root;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function render(node: ReactElement, container: ContainerType) {
|
|
||||||
if (createRoot as unknown) {
|
|
||||||
concurrentRender(node, container);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
legacyRender(node, container);
|
|
||||||
}
|
|
||||||
|
|
||||||
// ========================== Unmount =========================
|
|
||||||
function legacyUnmount(container: ContainerType) {
|
|
||||||
return unmountComponentAtNode(container);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function concurrentUnmount(container: ContainerType) {
|
|
||||||
// Delay to unmount to avoid React 18 sync warning
|
|
||||||
return Promise.resolve().then(() => {
|
|
||||||
container[MARK]?.unmount();
|
|
||||||
delete container[MARK];
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function unmount(container: ContainerType) {
|
|
||||||
if (createRoot as unknown) {
|
|
||||||
return concurrentUnmount(container);
|
|
||||||
}
|
|
||||||
|
|
||||||
return legacyUnmount(container);
|
|
||||||
}
|
|
||||||
@ -1,130 +0,0 @@
|
|||||||
import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
|
|
||||||
import { useStyleRegister } from '@ant-design/cssinjs';
|
|
||||||
import { merge } from '@formily/shared';
|
|
||||||
import type { ComponentTokenMap, GlobalToken } from 'antd/es/theme/interface';
|
|
||||||
import { AliasToken } from 'antd/es/theme/internal';
|
|
||||||
import { useConfig, usePrefixCls, useToken } from './hooks';
|
|
||||||
|
|
||||||
export interface CustomToken extends AliasToken {
|
|
||||||
/** 顶部导航栏主色 */
|
|
||||||
colorPrimaryHeader: string;
|
|
||||||
/** 导航栏背景色 */
|
|
||||||
colorBgHeader: string;
|
|
||||||
/** 导航栏菜单背景色悬浮态 */
|
|
||||||
colorBgHeaderMenuHover: string;
|
|
||||||
/** 导航栏菜单背景色激活态 */
|
|
||||||
colorBgHeaderMenuActive: string;
|
|
||||||
/** 导航栏菜单文本色 */
|
|
||||||
colorTextHeaderMenu: string;
|
|
||||||
/** 导航栏菜单文本色悬浮态 */
|
|
||||||
colorTextHeaderMenuHover: string;
|
|
||||||
/** 导航栏菜单文本色激活态 */
|
|
||||||
colorTextHeaderMenuActive: string;
|
|
||||||
|
|
||||||
/** UI 配置色 */
|
|
||||||
colorSettings: string;
|
|
||||||
/** 鼠标悬浮时显示的背景色 */
|
|
||||||
colorBgSettingsHover: string;
|
|
||||||
/** 鼠标悬浮时显示的边框色 */
|
|
||||||
colorBorderSettingsHover: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export type OverrideComponent = keyof ComponentTokenMap | string;
|
|
||||||
|
|
||||||
export interface StyleInfo {
|
|
||||||
hashId: string;
|
|
||||||
prefixCls: string;
|
|
||||||
rootPrefixCls: string;
|
|
||||||
iconPrefixCls: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export type TokenWithCommonCls<T> = T & {
|
|
||||||
/** Wrap component class with `.` prefix */
|
|
||||||
componentCls: string;
|
|
||||||
/** Origin prefix which do not have `.` prefix */
|
|
||||||
prefixCls: string;
|
|
||||||
/** Wrap icon class with `.` prefix */
|
|
||||||
iconCls: string;
|
|
||||||
/** Wrap ant prefixCls class with `.` prefix */
|
|
||||||
antCls: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
export type GenerateStyle<
|
|
||||||
ComponentToken extends object = TokenWithCommonCls<GlobalToken>,
|
|
||||||
ReturnType = CSSInterpolation,
|
|
||||||
> = (token: ComponentToken, options?: any) => ReturnType;
|
|
||||||
|
|
||||||
export const genCommonStyle = (token: any, componentPrefixCls: string): CSSObject => {
|
|
||||||
const { fontFamily, fontSize } = token;
|
|
||||||
|
|
||||||
const rootPrefixSelector = `[class^="${componentPrefixCls}"], [class*=" ${componentPrefixCls}"]`;
|
|
||||||
|
|
||||||
return {
|
|
||||||
[rootPrefixSelector]: {
|
|
||||||
fontFamily,
|
|
||||||
fontSize,
|
|
||||||
boxSizing: 'border-box',
|
|
||||||
|
|
||||||
'&::before, &::after': {
|
|
||||||
boxSizing: 'border-box',
|
|
||||||
},
|
|
||||||
|
|
||||||
[rootPrefixSelector]: {
|
|
||||||
boxSizing: 'border-box',
|
|
||||||
|
|
||||||
'&::before, &::after': {
|
|
||||||
boxSizing: 'border-box',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
};
|
|
||||||
export type UseComponentStyleResult = {
|
|
||||||
wrapSSR: ReturnType<typeof useStyleRegister>;
|
|
||||||
hashId: string;
|
|
||||||
componentCls: string;
|
|
||||||
rootPrefixCls: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const genStyleHook = <ComponentName extends OverrideComponent>(
|
|
||||||
component: ComponentName,
|
|
||||||
styleFn: (token: TokenWithCommonCls<CustomToken>, props: any, info: StyleInfo) => CSSInterpolation,
|
|
||||||
) => {
|
|
||||||
return (props?: any): UseComponentStyleResult => {
|
|
||||||
const { theme, token, hashId } = useToken();
|
|
||||||
const { getPrefixCls, iconPrefixCls } = useConfig();
|
|
||||||
const prefixCls = usePrefixCls(component);
|
|
||||||
const rootPrefixCls = getPrefixCls();
|
|
||||||
|
|
||||||
return {
|
|
||||||
wrapSSR: useStyleRegister(
|
|
||||||
{
|
|
||||||
theme: theme as any,
|
|
||||||
token,
|
|
||||||
hashId,
|
|
||||||
path: ['formily-antd', component, prefixCls, iconPrefixCls],
|
|
||||||
},
|
|
||||||
() => {
|
|
||||||
const componentCls = `.${prefixCls}`;
|
|
||||||
const mergedToken: TokenWithCommonCls<CustomToken> = merge(token, {
|
|
||||||
componentCls,
|
|
||||||
prefixCls,
|
|
||||||
iconCls: `.${iconPrefixCls}`,
|
|
||||||
antCls: `.${rootPrefixCls}`,
|
|
||||||
});
|
|
||||||
|
|
||||||
const styleInterpolation = styleFn(mergedToken, props, {
|
|
||||||
hashId,
|
|
||||||
prefixCls,
|
|
||||||
rootPrefixCls,
|
|
||||||
iconPrefixCls,
|
|
||||||
});
|
|
||||||
return [genCommonStyle(token, prefixCls), styleInterpolation];
|
|
||||||
},
|
|
||||||
),
|
|
||||||
hashId,
|
|
||||||
componentCls: prefixCls,
|
|
||||||
rootPrefixCls,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
};
|
|
||||||
@ -1,45 +0,0 @@
|
|||||||
import { Button, Result, Typography } from 'antd';
|
|
||||||
import React, { FC } from 'react';
|
|
||||||
import { FallbackProps, useErrorBoundary } from 'react-error-boundary';
|
|
||||||
import { Trans, useTranslation } from 'react-i18next';
|
|
||||||
|
|
||||||
const { Paragraph, Text, Link } = Typography;
|
|
||||||
|
|
||||||
export const ErrorFallback: FC<FallbackProps> = ({ error }) => {
|
|
||||||
const { resetBoundary } = useErrorBoundary();
|
|
||||||
const { t } = useTranslation();
|
|
||||||
|
|
||||||
const subTitle = (
|
|
||||||
<Trans>
|
|
||||||
{'This is likely a NocoBase internals bug. Please open an issue at '}
|
|
||||||
<Link href="https://github.com/nocobase/nocobase/issues" target="_blank">
|
|
||||||
here
|
|
||||||
</Link>
|
|
||||||
</Trans>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div style={{ backgroundColor: 'white' }}>
|
|
||||||
<Result
|
|
||||||
style={{ maxWidth: '60vw', margin: 'auto' }}
|
|
||||||
status="error"
|
|
||||||
title={t('Render Failed')}
|
|
||||||
subTitle={subTitle}
|
|
||||||
extra={[
|
|
||||||
<Button type="primary" key="feedback" href="https://github.com/nocobase/nocobase/issues" target="_blank">
|
|
||||||
{t('Feedback')}
|
|
||||||
</Button>,
|
|
||||||
<Button key="try" onClick={resetBoundary}>
|
|
||||||
{t('Try again')}
|
|
||||||
</Button>,
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<Paragraph copyable>
|
|
||||||
<Text type="danger" style={{ whiteSpace: 'pre-line', textAlign: 'center' }}>
|
|
||||||
{error.stack}
|
|
||||||
</Text>
|
|
||||||
</Paragraph>
|
|
||||||
</Result>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,18 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { render, screen } from 'testUtils';
|
|
||||||
import App1 from '../demos/demo1';
|
|
||||||
|
|
||||||
describe('ErrorFallback', () => {
|
|
||||||
it('should render correctly', () => {
|
|
||||||
render(<App1 />);
|
|
||||||
|
|
||||||
expect(screen.getByText(/render failed/i)).toBeInTheDocument();
|
|
||||||
expect(screen.getByText(/this is likely a nocobase internals bug\. please open an issue at/i)).toBeInTheDocument();
|
|
||||||
expect(screen.getByRole('link', { name: /feedback/i })).toBeInTheDocument();
|
|
||||||
expect(screen.getByText(/try again/i)).toBeInTheDocument();
|
|
||||||
expect(screen.getByText(/error: error message/i)).toBeInTheDocument();
|
|
||||||
|
|
||||||
// 底部复制按钮
|
|
||||||
expect(document.querySelector('.ant-typography-copy')).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { ErrorBoundary } from 'react-error-boundary';
|
|
||||||
import { ErrorFallback } from '../ErrorFallback';
|
|
||||||
|
|
||||||
const App = () => {
|
|
||||||
throw new Error('error message');
|
|
||||||
};
|
|
||||||
|
|
||||||
export default () => {
|
|
||||||
return (
|
|
||||||
<ErrorBoundary FallbackComponent={ErrorFallback} onError={console.error}>
|
|
||||||
<App />
|
|
||||||
</ErrorBoundary>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
---
|
|
||||||
group:
|
|
||||||
title: Schema Components
|
|
||||||
---
|
|
||||||
|
|
||||||
# ErrorFallback
|
|
||||||
|
|
||||||
## Example
|
|
||||||
|
|
||||||
<code src="./demos/demo1.tsx"></code>
|
|
||||||
@ -1 +0,0 @@
|
|||||||
export * from './ErrorFallback';
|
|
||||||
Loading…
Reference in New Issue
Block a user