From b0de4f349718d14976efac852c6017da0d86e024 Mon Sep 17 00:00:00 2001 From: "wuyue.xht" Date: Thu, 12 Mar 2020 09:56:14 +0800 Subject: [PATCH 1/8] feat: init --- packages/runtime-framework/.editorconfig | 16 +++++++++ packages/runtime-framework/.eslintignore | 6 ++++ packages/runtime-framework/.eslintrc | 3 ++ packages/runtime-framework/.gitignore | 41 +++++++++++++++++++++++ packages/runtime-framework/.prettierrc | 6 ++++ packages/runtime-framework/README.md | 2 +- packages/runtime-framework/package.json | 25 ++++++++++++++ packages/runtime-framework/src/index.ts | 1 + packages/runtime-framework/test/foobar.ts | 5 +++ packages/runtime-framework/tsconfig.json | 6 ++++ 10 files changed, 110 insertions(+), 1 deletion(-) create mode 100644 packages/runtime-framework/.editorconfig create mode 100644 packages/runtime-framework/.eslintignore create mode 100644 packages/runtime-framework/.eslintrc create mode 100644 packages/runtime-framework/.gitignore create mode 100644 packages/runtime-framework/.prettierrc create mode 100644 packages/runtime-framework/package.json create mode 100644 packages/runtime-framework/src/index.ts create mode 100644 packages/runtime-framework/test/foobar.ts create mode 100644 packages/runtime-framework/tsconfig.json diff --git a/packages/runtime-framework/.editorconfig b/packages/runtime-framework/.editorconfig new file mode 100644 index 000000000..16a029ac9 --- /dev/null +++ b/packages/runtime-framework/.editorconfig @@ -0,0 +1,16 @@ +# EditorConfig is awesome: http://EditorConfig.org + +# top-most EditorConfig file +root = true + +# Tab indentation +[*] +charset = utf-8 +end_of_line = lf +indent_size = 2 +indent_style = space +insert_final_newline = true +trim_trailing_whitespace = true + +[*.md] +trim_trailing_whitespace = false diff --git a/packages/runtime-framework/.eslintignore b/packages/runtime-framework/.eslintignore new file mode 100644 index 000000000..1fb2edf7c --- /dev/null +++ b/packages/runtime-framework/.eslintignore @@ -0,0 +1,6 @@ +.idea/ +.vscode/ +build/ +.* +~* +node_modules diff --git a/packages/runtime-framework/.eslintrc b/packages/runtime-framework/.eslintrc new file mode 100644 index 000000000..db78d35d1 --- /dev/null +++ b/packages/runtime-framework/.eslintrc @@ -0,0 +1,3 @@ +{ + "extends": "./node_modules/@recore/config/.eslintrc" +} diff --git a/packages/runtime-framework/.gitignore b/packages/runtime-framework/.gitignore new file mode 100644 index 000000000..a3f292fcc --- /dev/null +++ b/packages/runtime-framework/.gitignore @@ -0,0 +1,41 @@ +node_modules/ +coverage/ +build/ +dist/ +.idea/ +.vscode/ +.theia/ +.recore/ +demo/ +~* +package-lock.json + +# Packages # +############ +# it's better to unpack these files and commit the raw source +# git has its own built in compression methods +*.7z +*.dmg +*.gz +*.iso +*.jar +*.rar +*.tar +*.zip + +# Logs and databases # +###################### +*.log +*.sql +*.sqlite + +# OS generated files # +###################### +.DS_Store +.Trash* +*.swp +._* +.Spotlight-V100 +.Trashes +ehthumbs.db +Thumbs.db diff --git a/packages/runtime-framework/.prettierrc b/packages/runtime-framework/.prettierrc new file mode 100644 index 000000000..8748c5ed3 --- /dev/null +++ b/packages/runtime-framework/.prettierrc @@ -0,0 +1,6 @@ +{ + "semi": true, + "singleQuote": true, + "printWidth": 120, + "trailingComma": "all" +} diff --git a/packages/runtime-framework/README.md b/packages/runtime-framework/README.md index 12e6d0a3b..f37b9b0f6 100644 --- a/packages/runtime-framework/README.md +++ b/packages/runtime-framework/README.md @@ -1 +1 @@ -运行时框架 +# 低代码引擎运行时框架 diff --git a/packages/runtime-framework/package.json b/packages/runtime-framework/package.json new file mode 100644 index 000000000..f524e061f --- /dev/null +++ b/packages/runtime-framework/package.json @@ -0,0 +1,25 @@ +{ + "name": "@ali/lowcode-engine-runtime", + "version": "0.0.1", + "description": "runtime for Ali lowCode engine", + "main": "lib/index.js", + "files": [ + "lib" + ], + "scripts": { + "build": "tsc", + "test": "ava", + "test:snapshot": "ava --update-snapshots" + }, + "ava": { + "compileEnhancements": false, + "snapshotDir": "test/fixtures/__snapshots__", + "extensions": [ + "ts" + ], + "require": [ + "ts-node/register" + ] + }, + "license": "MIT" +} diff --git a/packages/runtime-framework/src/index.ts b/packages/runtime-framework/src/index.ts new file mode 100644 index 000000000..8337712ea --- /dev/null +++ b/packages/runtime-framework/src/index.ts @@ -0,0 +1 @@ +// diff --git a/packages/runtime-framework/test/foobar.ts b/packages/runtime-framework/test/foobar.ts new file mode 100644 index 000000000..7a14c4b2d --- /dev/null +++ b/packages/runtime-framework/test/foobar.ts @@ -0,0 +1,5 @@ +import test from 'ava'; + +test('foobar', t => { + t.pass(); +}); diff --git a/packages/runtime-framework/tsconfig.json b/packages/runtime-framework/tsconfig.json new file mode 100644 index 000000000..70a9c6a64 --- /dev/null +++ b/packages/runtime-framework/tsconfig.json @@ -0,0 +1,6 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "./lib" + } +} \ No newline at end of file From fcd0af8346a6d4bab9126eff5352322352584545 Mon Sep 17 00:00:00 2001 From: "wuyue.xht" Date: Thu, 12 Mar 2020 23:48:41 +0800 Subject: [PATCH 2/8] feat: complet Trunk --- packages/runtime-framework/src/trunk.ts | 30 +++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 packages/runtime-framework/src/trunk.ts diff --git a/packages/runtime-framework/src/trunk.ts b/packages/runtime-framework/src/trunk.ts new file mode 100644 index 000000000..7ef5975ac --- /dev/null +++ b/packages/runtime-framework/src/trunk.ts @@ -0,0 +1,30 @@ +import { ComponentClass } from 'react'; + +class Trunk { + private renderer: ComponentClass | null = null; + private layouts: { [key: string]: ComponentClass } = {}; + + public registerRenderer(renderer: ComponentClass): any { + this.renderer = renderer; + } + + public registerLayout(componentName: string, Layout: ComponentClass): any { + if (!componentName || !Layout) { + return; + } + this.layouts[componentName] = Layout; + } + + public getLayout(componentName: string) { + if (!componentName) { + return; + } + return this.layouts[componentName]; + } + + public getRenderer(): ComponentClass | null { + return this.renderer; + } +} + +export default new Trunk(); From edf14c1bc67defff02a95b8b84a034acbb911af1 Mon Sep 17 00:00:00 2001 From: "wuyue.xht" Date: Sun, 15 Mar 2020 01:03:09 +0800 Subject: [PATCH 3/8] feat: complet dynamically render --- packages/runtime-framework/index.d.ts | 25 ++++++ packages/runtime-framework/package.json | 5 +- packages/runtime-framework/src/index.ts | 6 +- .../runtime-framework/src/lazyComponent.tsx | 38 ++++++++++ packages/runtime-framework/src/provider.ts | 76 +++++++++++++++++++ packages/runtime-framework/tsconfig.json | 3 +- 6 files changed, 150 insertions(+), 3 deletions(-) create mode 100644 packages/runtime-framework/index.d.ts create mode 100644 packages/runtime-framework/src/lazyComponent.tsx create mode 100644 packages/runtime-framework/src/provider.ts diff --git a/packages/runtime-framework/index.d.ts b/packages/runtime-framework/index.d.ts new file mode 100644 index 000000000..5988aa400 --- /dev/null +++ b/packages/runtime-framework/index.d.ts @@ -0,0 +1,25 @@ +import { ReactType } from 'react'; + +export as namespace LowCodeEngineRuntime; +export = LowCodeEngineRuntime; + +declare module LowCodeEngineRuntime { + type HistoryMode = 'browser' | 'hash'; + + interface ComponentsMap { + [key: string]: ReactType; + } + + interface UtilsMap { + [key: string]: any; + } + + interface AppConfig { + history?: HistoryMode; + globalComponents?: ComponentsMap; + globalUtils?: UtilsMap; + containerId?: string; + } + + function runApp(Component: any, config?: AppConfig | (() => AppConfig), exposeModule?: boolean): any; +} \ No newline at end of file diff --git a/packages/runtime-framework/package.json b/packages/runtime-framework/package.json index f524e061f..cc7d06e93 100644 --- a/packages/runtime-framework/package.json +++ b/packages/runtime-framework/package.json @@ -21,5 +21,8 @@ "ts-node/register" ] }, - "license": "MIT" + "license": "MIT", + "dependencies": { + "@ali/recore": "^1.6.9" + } } diff --git a/packages/runtime-framework/src/index.ts b/packages/runtime-framework/src/index.ts index 8337712ea..988bc976b 100644 --- a/packages/runtime-framework/src/index.ts +++ b/packages/runtime-framework/src/index.ts @@ -1 +1,5 @@ -// +import { Router, runApp } from '@ali/recore'; +import Provider from './provider'; +import Trunk from './trunk'; + +export { runApp, Router, Trunk, Provider }; diff --git a/packages/runtime-framework/src/lazyComponent.tsx b/packages/runtime-framework/src/lazyComponent.tsx new file mode 100644 index 000000000..b7cfeed2c --- /dev/null +++ b/packages/runtime-framework/src/lazyComponent.tsx @@ -0,0 +1,38 @@ +import { Component, createElement } from 'react'; +import Trunk from './trunk'; + +interface IProps { + getPageData: () => any; + [key: string]: any; +} + +interface IState { + schema: object | null; +} + +export default class LazyComponent extends Component { + constructor(props: IProps) { + super(props); + this.state = { + schema: null, + }; + } + + public async componentDidMount() { + const { getPageData } = this.props; + if (getPageData) { + const schema = await getPageData(); + this.setState({ schema }); + } + } + + public render() { + const Renderer = Trunk.getRenderer(); + if (!Renderer) { + return null; + } + const { getPageData, ...restProps } = this.props; + const { schema } = this.state; + return createElement(Renderer as any, { schema, ...restProps }); + } +} diff --git a/packages/runtime-framework/src/provider.ts b/packages/runtime-framework/src/provider.ts new file mode 100644 index 000000000..9d5e5d741 --- /dev/null +++ b/packages/runtime-framework/src/provider.ts @@ -0,0 +1,76 @@ +import { createElement, ReactElement, ReactType } from 'react'; +import LazyComponent from './lazyComponent'; + +export interface IAppData { + App: any; + config: object; +} + +interface IComponentsMap { + [key: string]: ReactType; +} + +interface IUtilsMap { + [key: string]: any; +} + +type HistoryMode = 'browser' | 'hash'; + +export interface IAppConfig { + history?: HistoryMode; + globalComponents?: IComponentsMap; + globalUtils?: IUtilsMap; + containerId?: string; +} + +export default abstract class Provider { + public globalComponents: any = {}; + public globalUtils: any = {}; + public routerConfig: { [key: string]: string } = {}; + public layout: { componentName: string; props: any } | null = null; + + constructor() { + this.init(); + } + + public create(appkey: string): Promise { + return new Promise(async (resolve, reject) => { + try { + const config = await this.getAppData(appkey); + const App = this.createApp(); + resolve({ + App, + config, + }); + } catch (err) { + reject(err.message); + } + }); + } + + public async init() { + console.log('init'); + } + + public async getAppData(appkey: string, restOptions?: any): Promise { + console.log('getAppData'); + return {}; + } + + public async getPageData(pageId: string, restOptions?: any): Promise { + console.log('getPageData'); + return; + } + + public getLazyComponent(pageId: string, props: any): ReactElement | null { + if (!pageId) { + return null; + } + return createElement(LazyComponent as any, { getPageData: async () => await this.getPageData(pageId), ...props }); + } + + public createApp() { + console.log('createApp'); + return; + } +} diff --git a/packages/runtime-framework/tsconfig.json b/packages/runtime-framework/tsconfig.json index 70a9c6a64..be9a486b2 100644 --- a/packages/runtime-framework/tsconfig.json +++ b/packages/runtime-framework/tsconfig.json @@ -1,6 +1,7 @@ { "extends": "../../tsconfig.json", "compilerOptions": { - "outDir": "./lib" + "outDir": "./lib", + "jsx": "react", } } \ No newline at end of file From e48307dc6de5282b5e0d2ff313efcf4789311d2d Mon Sep 17 00:00:00 2001 From: "wuyue.xht" Date: Mon, 16 Mar 2020 16:36:59 +0800 Subject: [PATCH 4/8] fix: add unique key --- packages/runtime-framework/src/provider.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/runtime-framework/src/provider.ts b/packages/runtime-framework/src/provider.ts index 9d5e5d741..b621c0275 100644 --- a/packages/runtime-framework/src/provider.ts +++ b/packages/runtime-framework/src/provider.ts @@ -66,7 +66,11 @@ export default abstract class Provider { if (!pageId) { return null; } - return createElement(LazyComponent as any, { getPageData: async () => await this.getPageData(pageId), ...props }); + return createElement(LazyComponent as any, { + getPageData: async () => await this.getPageData(pageId), + key: pageId, + ...props, + }); } public createApp() { From 3a1e9001496b521dfd3646c77f9b8fad2eb6e655 Mon Sep 17 00:00:00 2001 From: "wuyue.xht" Date: Tue, 17 Mar 2020 00:35:37 +0800 Subject: [PATCH 5/8] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0loading=E6=89=A9?= =?UTF-8?q?=E5=B1=95=E7=82=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/runtime-framework/src/boot.ts | 44 +++++++++++++++++++ .../runtime-framework/src/lazyComponent.tsx | 20 ++++++--- packages/runtime-framework/src/trunk.ts | 30 ------------- 3 files changed, 58 insertions(+), 36 deletions(-) create mode 100644 packages/runtime-framework/src/boot.ts delete mode 100644 packages/runtime-framework/src/trunk.ts diff --git a/packages/runtime-framework/src/boot.ts b/packages/runtime-framework/src/boot.ts new file mode 100644 index 000000000..2598b18fe --- /dev/null +++ b/packages/runtime-framework/src/boot.ts @@ -0,0 +1,44 @@ +import { ComponentClass, FunctionComponent } from 'react'; + +type TComponent = ComponentClass | FunctionComponent; + +class Trunk { + private renderer: TComponent | null = null; + private layouts: { [key: string]: TComponent } = {}; + private loading: TComponent | null = null; + + public registerRenderer(renderer: TComponent): any { + this.renderer = renderer; + } + + public registerLayout(componentName: string, Layout: TComponent): any { + if (!componentName || !Layout) { + return; + } + this.layouts[componentName] = Layout; + } + + public registerLoading(component: TComponent) { + if (!component) { + return; + } + this.loading = component; + } + + public getLayout(componentName: string) { + if (!componentName) { + return; + } + return this.layouts[componentName]; + } + + public getRenderer(): TComponent | null { + return this.renderer; + } + + public getLoading(): TComponent | null { + return this.loading; + } +} + +export default new Trunk(); diff --git a/packages/runtime-framework/src/lazyComponent.tsx b/packages/runtime-framework/src/lazyComponent.tsx index b7cfeed2c..b33d0b3df 100644 --- a/packages/runtime-framework/src/lazyComponent.tsx +++ b/packages/runtime-framework/src/lazyComponent.tsx @@ -1,5 +1,5 @@ import { Component, createElement } from 'react'; -import Trunk from './trunk'; +import Boot from './boot'; interface IProps { getPageData: () => any; @@ -11,6 +11,8 @@ interface IState { } export default class LazyComponent extends Component { + private schema: object | null = null; + constructor(props: IProps) { super(props); this.state = { @@ -20,19 +22,25 @@ export default class LazyComponent extends Component { public async componentDidMount() { const { getPageData } = this.props; - if (getPageData) { + if (getPageData && !this.schema) { const schema = await getPageData(); + this.schema = schema; this.setState({ schema }); } } public render() { - const Renderer = Trunk.getRenderer(); - if (!Renderer) { - return null; - } const { getPageData, ...restProps } = this.props; const { schema } = this.state; + const Renderer = Boot.getRenderer(); + const Loading = Boot.getLoading(); + if (!Renderer || !schema) { + if (!Loading) { + return null; + } + // loading扩展点 + return createElement(Loading); + } return createElement(Renderer as any, { schema, ...restProps }); } } diff --git a/packages/runtime-framework/src/trunk.ts b/packages/runtime-framework/src/trunk.ts deleted file mode 100644 index 7ef5975ac..000000000 --- a/packages/runtime-framework/src/trunk.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { ComponentClass } from 'react'; - -class Trunk { - private renderer: ComponentClass | null = null; - private layouts: { [key: string]: ComponentClass } = {}; - - public registerRenderer(renderer: ComponentClass): any { - this.renderer = renderer; - } - - public registerLayout(componentName: string, Layout: ComponentClass): any { - if (!componentName || !Layout) { - return; - } - this.layouts[componentName] = Layout; - } - - public getLayout(componentName: string) { - if (!componentName) { - return; - } - return this.layouts[componentName]; - } - - public getRenderer(): ComponentClass | null { - return this.renderer; - } -} - -export default new Trunk(); From ad1f36d78e1597e866d4ca1f0557d25fc084146d Mon Sep 17 00:00:00 2001 From: "wuyue.xht" Date: Tue, 17 Mar 2020 12:22:41 +0800 Subject: [PATCH 6/8] chore: add publishConfig --- packages/runtime-framework/package.json | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/runtime-framework/package.json b/packages/runtime-framework/package.json index cc7d06e93..225792897 100644 --- a/packages/runtime-framework/package.json +++ b/packages/runtime-framework/package.json @@ -3,6 +3,9 @@ "version": "0.0.1", "description": "runtime for Ali lowCode engine", "main": "lib/index.js", + "publishConfig": { + "registry": "https://registry.npm.alibaba-inc.com" + }, "files": [ "lib" ], From ef99ec27dc284f5ccbd164141c9c21da8becf0c0 Mon Sep 17 00:00:00 2001 From: "wuyue.xht" Date: Tue, 17 Mar 2020 12:23:01 +0800 Subject: [PATCH 7/8] feat: export navigator --- packages/runtime-framework/src/index.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/runtime-framework/src/index.ts b/packages/runtime-framework/src/index.ts index 988bc976b..37abfe968 100644 --- a/packages/runtime-framework/src/index.ts +++ b/packages/runtime-framework/src/index.ts @@ -1,5 +1,5 @@ -import { Router, runApp } from '@ali/recore'; +import { navigator, Router, runApp as run } from '@ali/recore'; +import Boot from './boot'; import Provider from './provider'; -import Trunk from './trunk'; -export { runApp, Router, Trunk, Provider }; +export { run, Router, Boot, Provider, navigator }; From 8f3b4e69aff2bd11649b05c24cab25798619ccf2 Mon Sep 17 00:00:00 2001 From: "wuyue.xht" Date: Tue, 17 Mar 2020 12:23:28 +0800 Subject: [PATCH 8/8] feat: cache lazyElement --- .../runtime-framework/src/lazyComponent.tsx | 5 +---- packages/runtime-framework/src/provider.ts | 19 ++++++++++++++----- 2 files changed, 15 insertions(+), 9 deletions(-) diff --git a/packages/runtime-framework/src/lazyComponent.tsx b/packages/runtime-framework/src/lazyComponent.tsx index b33d0b3df..9acd799ce 100644 --- a/packages/runtime-framework/src/lazyComponent.tsx +++ b/packages/runtime-framework/src/lazyComponent.tsx @@ -11,8 +11,6 @@ interface IState { } export default class LazyComponent extends Component { - private schema: object | null = null; - constructor(props: IProps) { super(props); this.state = { @@ -22,9 +20,8 @@ export default class LazyComponent extends Component { public async componentDidMount() { const { getPageData } = this.props; - if (getPageData && !this.schema) { + if (getPageData && !this.state.schema) { const schema = await getPageData(); - this.schema = schema; this.setState({ schema }); } } diff --git a/packages/runtime-framework/src/provider.ts b/packages/runtime-framework/src/provider.ts index b621c0275..b0535d89d 100644 --- a/packages/runtime-framework/src/provider.ts +++ b/packages/runtime-framework/src/provider.ts @@ -28,6 +28,7 @@ export default abstract class Provider { public globalUtils: any = {}; public routerConfig: { [key: string]: string } = {}; public layout: { componentName: string; props: any } | null = null; + private lazyElementsMap: { [key: string]: any } = {}; constructor() { this.init(); @@ -66,11 +67,19 @@ export default abstract class Provider { if (!pageId) { return null; } - return createElement(LazyComponent as any, { - getPageData: async () => await this.getPageData(pageId), - key: pageId, - ...props, - }); + if (this.lazyElementsMap[pageId]) { + console.log('缓存'); + return this.lazyElementsMap[pageId]; + } else { + const lazyElement = createElement(LazyComponent as any, { + getPageData: async () => await this.getPageData(pageId), + key: pageId, + ...props, + }); + this.lazyElementsMap[pageId] = lazyElement; + console.log('新组件'); + return lazyElement; + } } public createApp() {