github/lowcode-engine
1
0
Fork 0
mirror of https://github.com/alibaba/lowcode-engine.git synced 2026-03-07 02:47:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: set buildComponents as utils

Browse Source
This commit is contained in:
wuji.xwt 2020-07-28 15:37:48 +08:00
parent d72c0d13b0
commit 4372bb1366
4 changed files with 95 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
packages/plugin-sample-preview/src/index.tsx
View File

@ -2,85 +2,10 @@ import React, { useState, ComponentType } from 'react';
import { Button, Dialog } from '@alifd/next'; import { Button, Dialog } from '@alifd/next';
import { PluginProps, NpmInfo } from '@ali/lowcode-types'; import { PluginProps, NpmInfo } from '@ali/lowcode-types';
import { Designer } from '@ali/lowcode-designer'; 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 ReactRenderer from '@ali/lowcode-react-renderer';
import './index.scss'; 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<any> }) {
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 SamplePreview = ({ editor }: PluginProps) => {
const [data, setData] = useState({}); const [data, setData] = useState({});
const [visible, setVisible] = useState(false); const [visible, setVisible] = useState(false);
@ -93,7 +18,7 @@ const SamplePreview = ({ editor }: PluginProps) => {
const assets = await editor.get('assets'); const assets = await editor.get('assets');
console.info('save schema:', designer, assets); console.info('save schema:', designer, assets);
const libraryMap: LibraryMap = {}; const libraryMap = {};
assets.packages.forEach(({ package, library }) => { assets.packages.forEach(({ package, library }) => {
libraryMap[package] = library; libraryMap[package] = library;
}); });

93
packages/react-simulator-renderer/src/renderer.ts
View File

@ -3,12 +3,12 @@ import { render as reactRender } from 'react-dom';
import { host } from './host'; import { host } from './host';
import SimulatorRendererView from './renderer-view'; import SimulatorRendererView from './renderer-view';
import { computed, obx } from '@recore/obx'; 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 { getClientRects } from './utils/get-client-rects';
import loader from './utils/loader'; import loader from './utils/loader';
import { reactFindDOMNodes, FIBER_KEY } from './utils/react-find-dom-nodes'; import { reactFindDOMNodes, FIBER_KEY } from './utils/react-find-dom-nodes';
import { isESModule, isElement, cursor, setNativeSelection } from '@ali/lowcode-utils'; import { isElement, cursor, setNativeSelection, buildComponents, getSubComponent } from '@ali/lowcode-utils';
import { RootSchema, NpmInfo, ComponentSchema, TransformStage } from '@ali/lowcode-types'; import { RootSchema, ComponentSchema, TransformStage } from '@ali/lowcode-types';
// just use types // just use types
import { BuiltinSimulatorRenderer, NodeInstance, Component } from '@ali/lowcode-designer'; import { BuiltinSimulatorRenderer, NodeInstance, Component } from '@ali/lowcode-designer';
import Slot from './builtin-components/slot'; import Slot from './builtin-components/slot';
@ -74,7 +74,10 @@ export class SimulatorRenderer implements BuiltinSimulatorRenderer {
} }
private _libraryMap: { [key: string]: string } = {}; private _libraryMap: { [key: string]: string } = {};
private buildComponents() { private buildComponents() {
this._components = buildComponents(this._libraryMap, this._componentsMap); this._components = {
...builtinComponents,
...buildComponents(this._libraryMap, this._componentsMap)
};
} }
@obx.ref private _components: any = {}; @obx.ref private _components: any = {};
@computed get components(): object { @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) // Slot/Leaf and Fragment|FunctionComponent polyfill(ref)
const builtinComponents = { const builtinComponents = {
@ -386,24 +325,6 @@ const builtinComponents = {
Leaf, Leaf,
}; };
function buildComponents(libraryMap: LibraryMap, componentsMap: { [componentName: string]: NpmInfo | ComponentType<any> }) {
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 = ''; let REACT_KEY = '';
function cacheReactKey(el: Element): Element { function cacheReactKey(el: Element): Element {
if (REACT_KEY !== '') { if (REACT_KEY !== '') {

85
packages/utils/src/build-components.ts Normal file
View File

@ -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<any> }) {
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;
}

1
packages/utils/src/index.ts
View File

@ -18,3 +18,4 @@ export * from './set-prototype-of';
export * from './shallow-equal'; export * from './shallow-equal';
export * from './svg-icon'; export * from './svg-icon';
export * from './unique-id'; export * from './unique-id';
export * from './build-components';