Application
new Application(options)
创建一个 Tachybase 应用。
1export interface ApplicationOptions {
2 apiClient?: APIClientOptions | APIClient;
3 ws?: WebSocketClientOptions | boolean;
4 i18n?: i18next;
5 providers?: (ComponentType | ComponentAndProps)[];
6 plugins?: PluginType[];
7 components?: Record<string, ComponentType>;
8 scopes?: Record<string, any>;
9 router?: RouterOptions;
10 schemaSettings?: SchemaSetting[];
11 schemaInitializers?: SchemaInitializer[];
12 loadRemotePlugins?: boolean;
13 dataSourceManager?: DataSourceManagerOptions;
14 addFieldInterfaceComponentOption(fieldName: string, componentOption: CollectionFieldInterfaceComponentOption): void;
15}
1/**
2 * defaultShowCode: true
3 */
4import { Application, Plugin } from '@tachybase/client';
5
6const ProviderDemo = ({ children }) => {
7 return <div>
8 <div>hello world</div>
9 <div style={{ marginTop: 10 }}>{children}</div>
10 </div>
11}
12
13class MyPlugin extends Plugin {
14 async load(){
15 this.app.router.add('home', {
16 path: '/',
17 Component: () => <div>home page</div>
18 })
19 }
20}
21
22const app = new Application({
23 providers: [ProviderDemo],
24 plugins: [MyPlugin],
25 router: {
26 type: 'memory',
27 initialEntries: ['/'],
28 }
29});
30
31export default app.getRootComponent();
实例属性
app.i18n
1class Application {
2 i18n: i18next;
3}
详细介绍，请参考：i18next
app.apiClient
1class Application {
2 apiClient: APIClient;
3}
详细介绍，请参考：Request
app.router
详细介绍，请参考：RouterManager
app.systemSettingsManager
详细介绍，请参考：SystemSettingsManager
app.schemaSettingsManager
详细介绍，请参考：SchemaSettingsManager
app.schemaInitializerManager
详细介绍，请参考：SchemaInitializerManager
app.dataSourceManager
详细介绍，请参考：DataSourceManager
实例方法
app.getRootComponent()
获取应用的根组件。
1class Application {
2 getRootComponent(): React.FC
3}
1import { Application } from '@tachybase/client';
2
3const app = new Application();
4
5const App = app.getRootComponent();
app.mount()
将应用实例挂载在一个容器元素中。
1class Application {
2 mount(containerOrSelector: Element | ShadowRoot | string): ReactDOM.Root
3}
1import { Application } from '@tachybase/client';
2
3const app = new Application();
4
5app.mount('#root');
app.addProvider()
添加 Provider 上下文。
1class Application {
2 addProvider<T = any>(component: ComponentType, props?: T): void;
3}
第一个参数是组件，第二个参数是组件的参数。注意 Provider 一定要渲染 children。
1// 场景1：第三方库，或者自己创建的 Context
2const MyContext = createContext({});
3app.addProvider(MyContext.provider, { value: { color: 'red' } });
1import { createContext, useContext } from 'react';
2import { Application, Plugin } from '@tachybase/client';
3
4const MyContext = createContext();
5
6const HomePage = () => {
7 const { color } = useContext(MyContext) || {};
8 return <div style={{ color }}>home page</div>
9}
10
11class MyPlugin extends Plugin {
12 async load(){
13 this.app.addProvider(MyContext.Provider, { value: { color: 'red' } });
14 this.app.router.add('home', {
15 path: '/',
16 Component: HomePage
17 })
18 }
19}
20
21const app = new Application({
22 plugins: [MyPlugin],
23 router: {
24 type: 'memory',
25 initialEntries: ['/'],
26 }
27});
28
29export default app.getRootComponent();
1// 场景2：自定义的组件，注意 children
2const GlobalDemo = ({ name, children }) => {
3 return <div>
4 <div>hello, { name }</div>
5 <div>{ children }</div>
6 </div>
7}
8app.addProvider(GlobalDemo, { name: 'tachybase' });
1import { Application, Plugin } from '@tachybase/client';
2
3const GlobalDemo = ({ name, children }) => {
4 return <div>
5 <div>hello, { name }</div>
6 <div>{ children }</div>
7 </div>
8}
9
10class MyPlugin extends Plugin {
11 async load(){
12 this.app.addProvider(GlobalDemo, { name: 'tachybase' });
13 this.app.router.add('home', {
14 path: '/',
15 Component: () => <div>home page</div>
16 })
17 }
18}
19
20const app = new Application({
21 plugins: [MyPlugin],
22 router: {
23 type: 'memory',
24 initialEntries: ['/'],
25 }
26});
27
28export default app.getRootComponent();
app.addProviders()
添加多个 Provider 上下文。
1class Application {
2 addProviders(providers: (ComponentType | [ComponentType, any])[]): void;
3}
一次添加多个 Provider。
1app.addProviders([[MyContext.provider, { value: { color: 'red' } }], [GlobalDemo, { name: 'tachybase' }]])
app.addComponents()
添加全局组件。
全局组件可以使用在 RouterManager 和 UI Schema上。
1class Application {
2 addComponents(components: Record<string, ComponentType>): void;
3}
1app.addComponents({ Demo, Foo, Bar })
app.addScopes()
添加全局的 scope。
全局组 scope 可以在UI Schema 上使用。
1class Application {
2 addScopes(scopes: Record<string, any>): void;
3}
1function useSomeThing() {}
2const anyVar = '';
3
4app.addScopes({ useSomeThing, anyVar })
app.getCollectionManager()
获取指定数据源的 collection manager 实例。
1class Application {
2 getCollectionManager(dataSource?: string): CollectionManager;
3}
1app.getCollectionManager() // 获取默认数据源的 collection manager
2app.getCollectionManager('test') // 获取指定数据源的 collection manager
Hooks
useApp()
获取当前应用的实例。
1const useApp: () => Application
1const Demo = () => {
2 const app = useApp();
3 return <div>{ JSON.stringify(app.router.getRouters()) }</div>
4}
1import { Application, Plugin, useApp } from '@tachybase/client';
2
3const HomePage = () => {
4 const app = useApp();
5 return <div>{ JSON.stringify(app.router.getRoutes()) }</div>
6}
7
8class MyPlugin extends Plugin {
9 async load(){
10 this.app.router.add('home', {
11 path: '/',
12 Component: HomePage
13 })
14 }
15}
16
17const app = new Application({
18 plugins: [MyPlugin],
19 router: {
20 type: 'memory',
21 initialEntries: ['/'],
22 }
23});
24
25export default app.getRootComponent();
