Application
new Application(options)
Create a Tachybase application.
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();
Instance Properties
app.i18n
class Application {
i18n: i18next;
}
For detailed introduction, please refer to: i18next
app.apiClient
class Application {
apiClient: APIClient;
}
For detailed introduction, please refer to: Request
app.router
For detailed introduction, please refer to: RouterManager
app.systemSettingsManager
For detailed introduction, please refer to: SystemSettingsManager
app.schemaSettingsManager
For detailed introduction, please refer to: SchemaSettingsManager
app.schemaInitializerManager
For detailed introduction, please refer to: SchemaInitializerManager
app.dataSourceManager
For detailed introduction, please refer to: DataSourceManager
Instance Methods
app.getRootComponent()
Get the root component of the application.
class Application {
getRootComponent(): React.FC
}
import { Application } from '@tachybase/client';
const app = new Application();
const App = app.getRootComponent();
app.mount()
Mount the application instance in a container element.
class Application {
mount(containerOrSelector: Element | ShadowRoot | string): ReactDOM.Root
}
import { Application } from '@tachybase/client';
const app = new Application();
app.mount('#root');
app.addProvider()
Add Provider context.
class Application {
addProvider<T = any>(component: ComponentType, props?: T): void;
}
The first parameter is a component, the second parameter is component parameters. Note that Provider must render children.
// Scenario 1: Third-party library, or Context created by yourself
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();
// Scenario 2: Custom component, note 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()
Add multiple Provider contexts.
class Application {
addProviders(providers: (ComponentType | [ComponentType, any])[]): void;
}
Add multiple Providers at once.
app.addProviders([[MyContext.provider, { value: { color: 'red' } }], [GlobalDemo, { name: 'tachybase' }]])
app.addComponents()
Add global components.
Global components can be used in RouterManager and UI Schema.
class Application {
addComponents(components: Record<string, ComponentType>): void;
}
app.addComponents({ Demo, Foo, Bar })
app.addScopes()
Add global scopes.
Global scopes can be used in UI Schema.
class Application {
addScopes(scopes: Record<string, any>): void;
}
function useSomeThing() {}
const anyVar = '';
app.addScopes({ useSomeThing, anyVar })
app.getCollectionManager()
Get the collection manager instance for the specified data source.
class Application {
getCollectionManager(dataSource?: string): CollectionManager;
}
app.getCollectionManager() // Get collection manager of default data source
app.getCollectionManager('test') // Get collection manager of specified data source
Hooks
useApp()
Get the instance of the current application.
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();
