diff --git a/packages/demo/src/app/index.ts b/packages/demo/src/app/index.ts index 8304a6936..f4df24866 100644 --- a/packages/demo/src/app/index.ts +++ b/packages/demo/src/app/index.ts @@ -1,20 +1,20 @@ -import { contribution, run } from '@ali/lowcode-runtime'; +import { app } from '@ali/lowcode-runtime'; import Renderer from '@ali/lowcode-react-renderer'; import FusionLoading from './plugins/loading/fusion'; import BasicLayout from './layouts/BasicLayout'; import Preview from './plugins/provider'; // 注册渲染模块 -contribution.registerRenderer(Renderer); +app.registerRenderer(Renderer); // 注册布局组件,可注册多个 -contribution.registerLayout('BasicLayout', BasicLayout); +app.registerLayout('BasicLayout', BasicLayout); // 注册页面 Loading -contribution.registerLoading(FusionLoading); +app.registerLoading(FusionLoading); // appKey:应用唯一标识 -contribution.registerProvider(new Preview({ appKey: 'lowcode_demo' })); +app.registerProvider(Preview); // 启动应用 -run(); +app.run(); diff --git a/packages/demo/src/app/plugins/provider.ts b/packages/demo/src/app/plugins/provider.ts index 4cb0d513a..3e5458bd7 100644 --- a/packages/demo/src/app/plugins/provider.ts +++ b/packages/demo/src/app/plugins/provider.ts @@ -8,7 +8,7 @@ import utils from '../config/utils'; // 定制加载应用配置的逻辑 export default class Preview extends ReactProvider { // 定制获取、处理应用配置(组件、插件、路由模式、布局等)的逻辑 - async getAppData(appkey: string): Promise { + async getAppData(): Promise { const { history, layout, containerId } = appConfig; const appSchemaStr: any = localStorage.getItem('lce-dev-store'); if (!appSchemaStr) { diff --git a/packages/runtime/package.json b/packages/runtime/package.json index 2a59b5112..4b99d22eb 100644 --- a/packages/runtime/package.json +++ b/packages/runtime/package.json @@ -1,6 +1,6 @@ { "name": "@ali/lowcode-runtime", - "version": "0.8.5", + "version": "0.8.6", "description": "Runtime for Ali lowCode engine", "files": [ "es", diff --git a/packages/runtime/src/core/contribution.ts b/packages/runtime/src/core/container.ts similarity index 69% rename from packages/runtime/src/core/contribution.ts rename to packages/runtime/src/core/container.ts index c36daa206..c6b2bfc53 100644 --- a/packages/runtime/src/core/contribution.ts +++ b/packages/runtime/src/core/container.ts @@ -1,7 +1,7 @@ import { ReactType } from 'react'; -import { IProvider } from './provider/base'; +import Provider from './provider'; -class Contribution { +export default class Container { private renderer: ReactType | null = null; private layouts: { [key: string]: ReactType } = {}; private loading: ReactType | null = null; @@ -25,8 +25,13 @@ class Contribution { this.loading = component; } - registerProvider(provider: IProvider) { - this.provider = provider; + registerProvider(CustomProvider: any) { + if (Provider.isPrototypeOf(CustomProvider)) { + this.provider = new CustomProvider(); + } else { + const identifier = (CustomProvider && CustomProvider.name) || 'registered Provider'; + throw new Error(`${identifier} is not a child class of Provider`); + } } getLayout(componentName: string) { @@ -48,5 +53,3 @@ class Contribution { return this.provider; } } - -export default new Contribution(); diff --git a/packages/runtime/src/core/index.ts b/packages/runtime/src/core/index.ts new file mode 100644 index 000000000..bd1758b52 --- /dev/null +++ b/packages/runtime/src/core/index.ts @@ -0,0 +1,49 @@ +import { ReactType } from 'react'; +import Container from './container'; +import run from './run'; + +class App { + private container: Container; + + constructor() { + this.container = new Container(); + } + + run() { + run(); + } + + registerRenderer(renderer: ReactType): any { + this.container.registerRenderer(renderer); + } + + registerLayout(componentName: string, Layout: ReactType): any { + this.container.registerLayout(componentName, Layout); + } + + registerLoading(component: ReactType) { + this.container.registerLoading(component); + } + + registerProvider(CustomProvider: any) { + this.container.registerProvider(CustomProvider); + } + + getLayout(componentName: string) { + return this.container.getLayout(componentName); + } + + getRenderer(): ReactType | null { + return this.container.getRenderer(); + } + + getLoading(): ReactType | null { + return this.container.getLoading(); + } + + getProvider() { + return this.container.getProvider(); + } +} + +export default new App(); diff --git a/packages/runtime/src/core/provider/base.ts b/packages/runtime/src/core/provider/index.ts similarity index 88% rename from packages/runtime/src/core/provider/base.ts rename to packages/runtime/src/core/provider/index.ts index cb792c296..77f1d388d 100644 --- a/packages/runtime/src/core/provider/base.ts +++ b/packages/runtime/src/core/provider/index.ts @@ -38,10 +38,6 @@ interface IAppData { constants?: IConstants; } -interface IOptions { - appKey: string; -} - export interface ComponentProps { [key: string]: any; } @@ -90,22 +86,21 @@ export interface ComponentModel { dataSource?: DataSource; lifeCycles?: LifeCycles; methods?: Methods; - children?: ComponentModel[]; + children?: ComponentModel[] | string[]; condition?: JSExpression | boolean; loop?: string[]; loopArgs?: string[]; } -export interface IProvider { - init?(): void; - getAppData?(appkey: string): Promise; - getPageData?(pageId: string): Promise; - getLazyComponent?(pageId: string, props: any): any; - createApp?(): void; -} +// export interface IProvider { +// init?(): void; +// getAppData?(appkey: string): Promise; +// getPageData?(pageId: string): Promise; +// getLazyComponent?(pageId: string, props: any): any; +// createApp?(): void; +// } -export default class Provider implements IProvider { - private appKey = ''; +export default class Provider { private components: IComponents = {}; private utils: IUtils = {}; private constants: IConstants = {}; @@ -116,16 +111,14 @@ export default class Provider implements IProvider { private containerId = ''; private lazyElementsMap: { [key: string]: any } = {}; - constructor(options: IOptions) { - const { appKey } = options; - this.appKey = appKey; + constructor() { this.init(); } async(): Promise { return new Promise(async (resolve, reject) => { try { - const appData = await this.getAppData(this.appKey || ''); + const appData = await this.getAppData(); if (!appData) { return; } @@ -154,11 +147,11 @@ export default class Provider implements IProvider { console.log('init'); } - async getAppData(appkey: string): Promise { + getAppData(): any { throw new Error('Method called "getPageData" not implemented.'); } - async getPageData(pageId: string): Promise { + getPageData(pageId?: string): any { throw new Error('Method called "getPageData" not implemented.'); } diff --git a/packages/runtime/src/core/provider/react/index.ts b/packages/runtime/src/core/provider/react/index.ts index 8c98f1df3..3bff84f94 100644 --- a/packages/runtime/src/core/provider/react/index.ts +++ b/packages/runtime/src/core/provider/react/index.ts @@ -1,7 +1,7 @@ import { createElement, ReactElement } from 'react'; import { Router } from '@ali/recore'; -import contribution from '../../contribution'; -import Provider from '../base'; +import app from '../../index'; +import Provider from '..'; import LazyComponent from './lazy-component'; export default class ReactProvider extends Provider { @@ -52,7 +52,7 @@ export default class ReactProvider extends Provider { return App; } const { componentName: layoutName, props: layoutProps } = layoutConfig; - const Layout = contribution.getLayout(layoutName); + const Layout = app.getLayout(layoutName); if (Layout) { App = (props: any) => createElement(Layout, layoutProps, RouterView({ props })); } else { diff --git a/packages/runtime/src/core/provider/react/lazy-component.tsx b/packages/runtime/src/core/provider/react/lazy-component.tsx index 42f48075b..72119ccb8 100644 --- a/packages/runtime/src/core/provider/react/lazy-component.tsx +++ b/packages/runtime/src/core/provider/react/lazy-component.tsx @@ -1,5 +1,5 @@ import { Component, createElement } from 'react'; -import contribution from '../../contribution'; +import app from '../../index'; interface IProps { getPageData: () => any; @@ -29,8 +29,8 @@ export default class LazyComponent extends Component { render() { const { getPageData, ...restProps } = this.props; const { schema } = this.state; - const Renderer = contribution.getRenderer(); - const Loading = contribution.getLoading(); + const Renderer = app.getRenderer(); + const Loading = app.getLoading(); if (!Renderer || !schema) { if (!Loading) { return null; diff --git a/packages/runtime/src/core/run.ts b/packages/runtime/src/core/run.ts index 7b1084187..3fd4a364e 100644 --- a/packages/runtime/src/core/run.ts +++ b/packages/runtime/src/core/run.ts @@ -1,7 +1,7 @@ import { ReactType } from 'react'; import { runApp } from '@ali/recore'; import { HashHistoryBuildOptions, BrowserHistoryBuildOptions, MemoryHistoryBuildOptions } from '@recore/history'; -import contribution from './contribution'; +import app from './index'; export type HistoryOptions = { mode?: HistoryMode; @@ -47,7 +47,7 @@ function transformConfig(config: IAppConfig | (() => IAppConfig)): IRecoreAppCon } export default function run(config?: IAppConfig | (() => IAppConfig)) { - const provider = contribution.getProvider(); + const provider = app.getProvider(); if (config) { config = transformConfig(config); const App = provider.createApp(); diff --git a/packages/runtime/src/index.ts b/packages/runtime/src/index.ts index e7c98a256..bb8e079a1 100644 --- a/packages/runtime/src/index.ts +++ b/packages/runtime/src/index.ts @@ -1,8 +1,7 @@ import { navigator, Router } from '@ali/recore'; -import run from './core/run'; -import contribution from './core/contribution'; -import Provider from './core/provider/base'; +import Provider from './core/provider'; import ReactProvider from './core/provider/react'; +import app from './core'; import * as Utils from './utils'; -export { run, Router, contribution, Provider, ReactProvider, navigator, Utils }; +export { app, Router, Provider, ReactProvider, navigator, Utils };