mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2026-01-12 17:08:14 +00:00
refactor: set buildComponents as utils
This commit is contained in:
wuji.xwt
parent
d72c0d13b0
commit
4372bb1366
@ -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<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 [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;
|
||||
});
|
||||
|
||||
@ -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<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 = '';
|
||||
function cacheReactKey(el: Element): Element {
|
||||
if (REACT_KEY !== '') {
|
||||
|
||||
85
packages/utils/src/build-components.ts
Normal file
85
packages/utils/src/build-components.ts
Normal 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;
|
||||
}
|
||||
@ -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';
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user