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()

添加全局组件。

全局组件可以使用在 RouterManagerUI 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();