首页
指南
API
开发
贡献
首页
指南
API
开发
贡献

Application

new Application(options)

创建一个 Tachybase 应用。

  • 类型
export interface ApplicationOptions {
  apiClient?: APIClientOptions | APIClient;
  ws?: WebSocketClientOptions | boolean;
  i18n?: i18next;
  providers?: (ComponentType | ComponentAndProps)[];
  plugins?: PluginType[];
  components?: Record<string, ComponentType>;
  scopes?: Record<string, any>;
  router?: RouterOptions;
  schemaSettings?: SchemaSetting[];
  schemaInitializers?: SchemaInitializer[];
  loadRemotePlugins?: boolean;
  dataSourceManager?: DataSourceManagerOptions;
  addFieldInterfaceComponentOption(fieldName: string, componentOption: CollectionFieldInterfaceComponentOption): void;
}
/**
 * defaultShowCode: true
 */
import { Application, Plugin } from '@tachybase/client';

const ProviderDemo = ({ children }) => {
    return <div>
        <div>hello world</div>
        <div style={{ marginTop: 10 }}>{children}</div>
    </div>
}

class MyPlugin extends Plugin {
    async load(){
        this.app.router.add('home', {
            path: '/',
            Component: () => <div>home page</div>
        })
    }
}

const app = new Application({
    providers: [ProviderDemo],
    plugins: [MyPlugin],
    router: {
        type: 'memory',
        initialEntries: ['/'],
    }
});

export default app.getRootComponent();

实例属性

app.i18n

class Application {
    i18n: i18next;
}

详细介绍，请参考：i18next

app.apiClient

class Application {
    apiClient: APIClient;
}

详细介绍，请参考：Request

app.router

详细介绍，请参考：RouterManager

app.systemSettingsManager

详细介绍，请参考：SystemSettingsManager

app.schemaSettingsManager

详细介绍，请参考：SchemaSettingsManager

app.schemaInitializerManager

详细介绍，请参考：SchemaInitializerManager

app.dataSourceManager

详细介绍，请参考：DataSourceManager

实例方法

app.getRootComponent()

获取应用的根组件。

  • 类型
class Application {
    getRootComponent(): React.FC
}
  • 示例
import { Application } from '@tachybase/client';

const app = new Application();

const App = app.getRootComponent();

app.mount()

将应用实例挂载在一个容器元素中。

  • 类型
class Application {
    mount(containerOrSelector: Element | ShadowRoot | string): ReactDOM.Root
}
  • 示例
import { Application } from '@tachybase/client';

const app = new Application();

app.mount('#root');

app.addProvider()

添加 Provider 上下文。

  • 类型
class Application {
    addProvider<T = any>(component: ComponentType, props?: T): void;
}
  • 详细信息

第一个参数是组件，第二个参数是组件的参数。注意 Provider 一定要渲染 children。

  • 示例
// 场景1：第三方库，或者自己创建的 Context
const MyContext = createContext({});
app.addProvider(MyContext.provider, { value: { color: 'red' } });
import { createContext, useContext } from 'react';
import { Application, Plugin } from '@tachybase/client';

const MyContext = createContext();

const HomePage = () => {
    const { color } = useContext(MyContext) || {};
    return <div style={{ color }}>home page</div>
}

class MyPlugin extends Plugin {
    async load(){
        this.app.addProvider(MyContext.Provider, { value: { color: 'red' } });
        this.app.router.add('home', {
            path: '/',
            Component: HomePage
        })
    }
}

const app = new Application({
    plugins: [MyPlugin],
    router: {
        type: 'memory',
        initialEntries: ['/'],
    }
});

export default app.getRootComponent();
// 场景2：自定义的组件，注意 children
const GlobalDemo = ({ name, children }) => {
    return <div>
        <div>hello, { name }</div>
        <div>{ children }</div>
    </div>
}
app.addProvider(GlobalDemo, { name: 'tachybase' });
import { Application, Plugin } from '@tachybase/client';

const GlobalDemo = ({ name, children }) => {
    return <div>
        <div>hello, { name }</div>
        <div>{ children }</div>
    </div>
}

class MyPlugin extends Plugin {
    async load(){
        this.app.addProvider(GlobalDemo, { name: 'tachybase' });
        this.app.router.add('home', {
            path: '/',
            Component: () => <div>home page</div>
        })
    }
}

const app = new Application({
    plugins: [MyPlugin],
    router: {
        type: 'memory',
        initialEntries: ['/'],
    }
});

export default app.getRootComponent();

app.addProviders()

添加多个 Provider 上下文。

  • 类型
class Application {
    addProviders(providers: (ComponentType | [ComponentType, any])[]): void;
}
  • 详细信息

一次添加多个 Provider。

  • 示例
app.addProviders([[MyContext.provider, { value: { color: 'red' } }], [GlobalDemo, { name: 'tachybase' }]])

app.addComponents()

添加全局组件。

全局组件可以使用在 RouterManager 和 UI Schema上。

  • 类型
class Application {
    addComponents(components: Record<string, ComponentType>): void;
}
  • 示例
app.addComponents({ Demo, Foo, Bar })

app.addScopes()

添加全局的 scope。

全局组 scope 可以在UI Schema 上使用。

  • 类型
class Application {
    addScopes(scopes: Record<string, any>): void;
}
  • 示例
function useSomeThing() {}
const anyVar = '';

app.addScopes({ useSomeThing, anyVar })

app.getCollectionManager()

获取指定数据源的 collection manager 实例。

  • 类型
class Application {
  getCollectionManager(dataSource?: string): CollectionManager;
}
  • 示例
app.getCollectionManager() // 获取默认数据源的 collection manager
app.getCollectionManager('test') // 获取指定数据源的 collection manager

Hooks

useApp()

获取当前应用的实例。

  • 类型
const useApp: () => Application
  • 示例
const Demo = () => {
    const app = useApp();
    return <div>{ JSON.stringify(app.router.getRouters()) }</div>
}
import { Application, Plugin, useApp } from '@tachybase/client';

const HomePage = () => {
    const app = useApp();
    return <div>{ JSON.stringify(app.router.getRoutes()) }</div>
}

class MyPlugin extends Plugin {
    async load(){
        this.app.router.add('home', {
            path: '/',
            Component: HomePage
        })
    }
}

const app = new Application({
    plugins: [MyPlugin],
    router: {
        type: 'memory',
        initialEntries: ['/'],
    }
});

export default app.getRootComponent();