From 4372bb1366322e8d5cdbe5bd560516bc940a1f86 Mon Sep 17 00:00:00 2001 From: "wuji.xwt" Date: Tue, 28 Jul 2020 15:37:48 +0800 Subject: [PATCH 1/2] refactor: set buildComponents as utils --- packages/plugin-sample-preview/src/index.tsx | 79 +--------------- .../react-simulator-renderer/src/renderer.ts | 93 ++----------------- packages/utils/src/build-components.ts | 85 +++++++++++++++++ packages/utils/src/index.ts | 1 + 4 files changed, 95 insertions(+), 163 deletions(-) create mode 100644 packages/utils/src/build-components.ts diff --git a/packages/plugin-sample-preview/src/index.tsx b/packages/plugin-sample-preview/src/index.tsx index 7435f5ed2..c5cb139b2 100644 --- a/packages/plugin-sample-preview/src/index.tsx +++ b/packages/plugin-sample-preview/src/index.tsx @@ -2,85 +2,10 @@ import React, { useState, ComponentType } from 'react'; import { Button, Dialog } from '@alifd/next'; import { PluginProps, NpmInfo } from '@ali/lowcode-types'; import { Designer } from '@ali/lowcode-designer'; -import { isReactComponent, isESModule } from '@ali/lowcode-utils'; +import { buildComponents } from '@ali/lowcode-utils'; import ReactRenderer from '@ali/lowcode-react-renderer'; import './index.scss'; -interface LibraryMap { - [key: string]: string; -} - -function accessLibrary(library: string | object) { - if (typeof library !== 'string') { - return library; - } - - return (window as any)[library]; -} - -function getSubComponent(library: any, paths: string[]) { - const l = paths.length; - if (l < 1 || !library) { - return library; - } - let i = 0; - let component: any; - while (i < l) { - const key = paths[i]!; - let ex: any; - try { - component = library[key]; - } catch (e) { - ex = e; - component = null; - } - if (i === 0 && component == null && key === 'default') { - if (ex) { - return l === 1 ? library : null; - } - component = library; - } else if (component == null) { - return null; - } - library = component; - i++; - } - return component; -} - -function findComponent(libraryMap: LibraryMap, componentName: string, npm?: NpmInfo) { - if (!npm) { - return accessLibrary(componentName); - } - const exportName = npm.exportName || npm.componentName || componentName; - const libraryName = libraryMap[npm.package] || exportName; - const library = accessLibrary(libraryName); - const paths = npm.exportName && npm.subName ? npm.subName.split('.') : []; - if (npm.destructuring) { - paths.unshift(exportName); - } else if (isESModule(library)) { - paths.unshift('default'); - } - return getSubComponent(library, paths); -} - -function buildComponents(libraryMap: LibraryMap, componentsMap: { [componentName: string]: NpmInfo | ComponentType }) { - const components: any = { - }; - Object.keys(componentsMap).forEach((componentName) => { - let component = componentsMap[componentName]; - if (isReactComponent(component)) { - components[componentName] = component; - } else { - component = findComponent(libraryMap, componentName, component); - if (component) { - components[componentName] = component; - } - } - }); - return components; -} - const SamplePreview = ({ editor }: PluginProps) => { const [data, setData] = useState({}); const [visible, setVisible] = useState(false); @@ -93,7 +18,7 @@ const SamplePreview = ({ editor }: PluginProps) => { const assets = await editor.get('assets'); console.info('save schema:', designer, assets); - const libraryMap: LibraryMap = {}; + const libraryMap = {}; assets.packages.forEach(({ package, library }) => { libraryMap[package] = library; }); diff --git a/packages/react-simulator-renderer/src/renderer.ts b/packages/react-simulator-renderer/src/renderer.ts index dd578ce4b..653f4d36f 100644 --- a/packages/react-simulator-renderer/src/renderer.ts +++ b/packages/react-simulator-renderer/src/renderer.ts @@ -3,12 +3,12 @@ import { render as reactRender } from 'react-dom'; import { host } from './host'; import SimulatorRendererView from './renderer-view'; import { computed, obx } from '@recore/obx'; -import { Asset, isReactComponent } from '@ali/lowcode-utils'; +import { Asset } from '@ali/lowcode-utils'; import { getClientRects } from './utils/get-client-rects'; import loader from './utils/loader'; import { reactFindDOMNodes, FIBER_KEY } from './utils/react-find-dom-nodes'; -import { isESModule, isElement, cursor, setNativeSelection } from '@ali/lowcode-utils'; -import { RootSchema, NpmInfo, ComponentSchema, TransformStage } from '@ali/lowcode-types'; +import { isElement, cursor, setNativeSelection, buildComponents, getSubComponent } from '@ali/lowcode-utils'; +import { RootSchema, ComponentSchema, TransformStage } from '@ali/lowcode-types'; // just use types import { BuiltinSimulatorRenderer, NodeInstance, Component } from '@ali/lowcode-designer'; import Slot from './builtin-components/slot'; @@ -74,7 +74,10 @@ export class SimulatorRenderer implements BuiltinSimulatorRenderer { } private _libraryMap: { [key: string]: string } = {}; private buildComponents() { - this._components = buildComponents(this._libraryMap, this._componentsMap); + this._components = { + ...builtinComponents, + ...buildComponents(this._libraryMap, this._componentsMap) + }; } @obx.ref private _components: any = {}; @computed get components(): object { @@ -315,70 +318,6 @@ export class SimulatorRenderer implements BuiltinSimulatorRenderer { } } -function accessLibrary(library: string | object) { - if (typeof library !== 'string') { - return library; - } - - return (window as any)[library]; -} - -function getSubComponent(library: any, paths: string[]) { - const l = paths.length; - if (l < 1 || !library) { - return library; - } - let i = 0; - let component: any; - while (i < l) { - const key = paths[i]!; - let ex: any; - try { - component = library[key]; - } catch (e) { - ex = e; - component = null; - } - if (i === 0 && component == null && key === 'default') { - if (ex) { - return l === 1 ? library : null; - } - component = library; - } else if (component == null) { - return null; - } - library = component; - i++; - } - return component; -} - -function findComponent(libraryMap: LibraryMap, componentName: string, npm?: NpmInfo) { - if (!npm) { - return accessLibrary(componentName); - } - // libraryName the key access to global - // export { exportName } from xxx exportName === global.libraryName.exportName - // export exportName from xxx exportName === global.libraryName.default || global.libraryName - // export { exportName as componentName } from package - // if exportName == null exportName === componentName; - // const componentName = exportName.subName, if exportName empty subName donot use - const exportName = npm.exportName || npm.componentName || componentName; - const libraryName = libraryMap[npm.package] || exportName; - const library = accessLibrary(libraryName); - const paths = npm.exportName && npm.subName ? npm.subName.split('.') : []; - if (npm.destructuring) { - paths.unshift(exportName); - } else if (isESModule(library)) { - paths.unshift('default'); - } - return getSubComponent(library, paths); -} - -export interface LibraryMap { - [key: string]: string; -} - // Slot/Leaf and Fragment|FunctionComponent polyfill(ref) const builtinComponents = { @@ -386,24 +325,6 @@ const builtinComponents = { Leaf, }; -function buildComponents(libraryMap: LibraryMap, componentsMap: { [componentName: string]: NpmInfo | ComponentType }) { - const components: any = { - ...builtinComponents - }; - Object.keys(componentsMap).forEach((componentName) => { - let component = componentsMap[componentName]; - if (isReactComponent(component)) { - components[componentName] = component; - } else { - component = findComponent(libraryMap, componentName, component); - if (component) { - components[componentName] = component; - } - } - }); - return components; -} - let REACT_KEY = ''; function cacheReactKey(el: Element): Element { if (REACT_KEY !== '') { diff --git a/packages/utils/src/build-components.ts b/packages/utils/src/build-components.ts new file mode 100644 index 000000000..92c74b026 --- /dev/null +++ b/packages/utils/src/build-components.ts @@ -0,0 +1,85 @@ +import { ComponentType } from 'react'; +import { NpmInfo} from '@ali/lowcode-types'; +import { isReactComponent } from './is-react'; +import { isESModule } from './is-es-module'; + +interface LibraryMap { + [key: string]: string; +} + +function accessLibrary(library: string | object) { + if (typeof library !== 'string') { + return library; + } + + return (window as any)[library]; +} + +export function getSubComponent(library: any, paths: string[]) { + const l = paths.length; + if (l < 1 || !library) { + return library; + } + let i = 0; + let component: any; + while (i < l) { + const key = paths[i]!; + let ex: any; + try { + component = library[key]; + } catch (e) { + ex = e; + component = null; + } + if (i === 0 && component == null && key === 'default') { + if (ex) { + return l === 1 ? library : null; + } + component = library; + } else if (component == null) { + return null; + } + library = component; + i++; + } + return component; +} + +function findComponent(libraryMap: LibraryMap, componentName: string, npm?: NpmInfo) { + if (!npm) { + return accessLibrary(componentName); + } + // libraryName the key access to global + // export { exportName } from xxx exportName === global.libraryName.exportName + // export exportName from xxx exportName === global.libraryName.default || global.libraryName + // export { exportName as componentName } from package + // if exportName == null exportName === componentName; + // const componentName = exportName.subName, if exportName empty subName donot use + const exportName = npm.exportName || npm.componentName || componentName; + const libraryName = libraryMap[npm.package] || exportName; + const library = accessLibrary(libraryName); + const paths = npm.exportName && npm.subName ? npm.subName.split('.') : []; + if (npm.destructuring) { + paths.unshift(exportName); + } else if (isESModule(library)) { + paths.unshift('default'); + } + return getSubComponent(library, paths); +} + +export function buildComponents(libraryMap: LibraryMap, componentsMap: { [componentName: string]: NpmInfo | ComponentType }) { + const components: any = { + }; + Object.keys(componentsMap).forEach((componentName) => { + let component = componentsMap[componentName]; + if (isReactComponent(component)) { + components[componentName] = component; + } else { + component = findComponent(libraryMap, componentName, component); + if (component) { + components[componentName] = component; + } + } + }); + return components; +} \ No newline at end of file diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts index 3df01d928..08d5342b1 100644 --- a/packages/utils/src/index.ts +++ b/packages/utils/src/index.ts @@ -18,3 +18,4 @@ export * from './set-prototype-of'; export * from './shallow-equal'; export * from './svg-icon'; export * from './unique-id'; +export * from './build-components'; From e20b5102f221e3a44a3cbe4dbe6a7fea216e0134 Mon Sep 17 00:00:00 2001 From: "wuji.xwt" Date: Tue, 28 Jul 2020 15:41:09 +0800 Subject: [PATCH 2/2] refactor: buildCompoents should get from utils --- packages/demo/src/app/plugins/provider.ts | 5 +- packages/runtime/src/index.ts | 3 +- packages/runtime/src/utils/assets.ts | 101 ---------------------- packages/runtime/src/utils/index.ts | 1 - 4 files changed, 4 insertions(+), 106 deletions(-) delete mode 100644 packages/runtime/src/utils/assets.ts delete mode 100644 packages/runtime/src/utils/index.ts diff --git a/packages/demo/src/app/plugins/provider.ts b/packages/demo/src/app/plugins/provider.ts index 3e5458bd7..54bc61d23 100644 --- a/packages/demo/src/app/plugins/provider.ts +++ b/packages/demo/src/app/plugins/provider.ts @@ -1,4 +1,5 @@ -import { ReactProvider, Utils } from '@ali/lowcode-runtime'; +import { ReactProvider } from '@ali/lowcode-runtime'; +import { buildComponents } from '@ali/lowcode-utils'; import appConfig from '../config/app'; import builtInComps from '../config/components'; import componentsMap from '../config/componentsMap'; @@ -31,7 +32,7 @@ export default class Preview extends ReactProvider { layout, routes, containerId, - components: { ...builtInComps, ...Utils.buildComponents({ '@alifd/next': 'Next' }, componentsMap) }, + components: { ...builtInComps, ...buildComponents({ '@alifd/next': 'Next' }, componentsMap) }, componentsMap, utils: utils, constants, diff --git a/packages/runtime/src/index.ts b/packages/runtime/src/index.ts index 7a0999d95..0e0c9433f 100644 --- a/packages/runtime/src/index.ts +++ b/packages/runtime/src/index.ts @@ -1,5 +1,4 @@ import Provider from './core/provider'; import app from './core'; -import * as Utils from './utils'; -export { app, Provider, Utils }; +export { app, Provider }; diff --git a/packages/runtime/src/utils/assets.ts b/packages/runtime/src/utils/assets.ts deleted file mode 100644 index 08715003b..000000000 --- a/packages/runtime/src/utils/assets.ts +++ /dev/null @@ -1,101 +0,0 @@ -function isESModule(obj: any): obj is { [key: string]: any } { - return obj && obj.__esModule; -} - -function accessLibrary(library: string | object) { - if (typeof library !== 'string') { - return library; - } - - return (window as any)[library]; -} - -function getSubComponent(library: any, paths: string[]) { - const l = paths.length; - if (l < 1 || !library) { - return library; - } - let i = 0; - let component: any; - while (i < l) { - const key = paths[i]!; - let ex: any; - try { - component = library[key]; - } catch (e) { - ex = e; - component = null; - } - if (i === 0 && component == null && key === 'default') { - if (ex) { - return l === 1 ? library : null; - } - component = library; - } else if (component == null) { - return null; - } - library = component; - i++; - } - return component; -} - -function findComponent(libraryMap: LibraryMap, componentName: string, npm?: NpmInfo) { - if (!npm) { - return accessLibrary(componentName); - } - // libraryName the key access to global - // export { exportName } from xxx exportName === global.libraryName.exportName - // export exportName from xxx exportName === global.libraryName.default || global.libraryName - // export { exportName as componentName } from package - // if exportName == null exportName === componentName; - // const componentName = exportName.subName, if exportName empty subName donot use - const exportName = npm.exportName || npm.componentName || componentName; - const libraryName = libraryMap[npm.package] || exportName; - const library = accessLibrary(libraryName); - const paths = npm.exportName && npm.subName ? npm.subName.split('.') : []; - if (npm.destructuring) { - paths.unshift(exportName); - } else if (isESModule(library)) { - paths.unshift('default'); - } - return getSubComponent(library, paths); -} - -export interface LibraryMap { - [key: string]: string; -} - -export interface NpmInfo { - componentName?: string; - package: string; - version: string; - destructuring?: boolean; - exportName?: string; - subName?: string; - main?: string; -} - -export function buildComponents( - libraryMap: LibraryMap, - componentsMap: { [componentName: string]: NpmInfo } | NpmInfo[], -) { - const components: any = {}; - if (componentsMap && Array.isArray(componentsMap)) { - const compMapObj: any = {}; - componentsMap.forEach((item: NpmInfo) => { - if (!item || !item.componentName) { - return; - } - compMapObj[item.componentName] = item; - }); - componentsMap = compMapObj; - } - Object.keys(componentsMap).forEach((componentName) => { - const component = findComponent(libraryMap, componentName, (componentsMap as any)[componentName]); - if (component) { - components[componentName] = component; - } - }); - return components; -} diff --git a/packages/runtime/src/utils/index.ts b/packages/runtime/src/utils/index.ts deleted file mode 100644 index df6446646..000000000 --- a/packages/runtime/src/utils/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './assets';