@alilc/lowcode-renderer-core
Version:
renderer core
230 lines • 10 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import Debug from 'debug';
import adapter from '../adapter';
import contextFactory from '../context';
import { isFileSchema, isEmpty } from '../utils';
import baseRendererFactory from './base';
import divFactory from '../components/Div';
import logger from '../utils/logger';
export default function rendererFactory() {
var _Renderer;
var _adapter$getRuntime = adapter.getRuntime(),
PureComponent = _adapter$getRuntime.PureComponent,
Component = _adapter$getRuntime.Component,
_createElement = _adapter$getRuntime.createElement,
findDOMNode = _adapter$getRuntime.findDOMNode;
var RENDERER_COMPS = adapter.getRenderers();
var BaseRenderer = baseRendererFactory();
var AppContext = contextFactory();
var Div = divFactory();
var ConfigProvider = adapter.getConfigProvider() || Div;
var debug = Debug('renderer:entry');
var FaultComponent = /*#__PURE__*/function (_PureComponent) {
function FaultComponent() {
return _PureComponent.apply(this, arguments) || this;
}
_inheritsLoose(FaultComponent, _PureComponent);
var _proto = FaultComponent.prototype;
_proto.render = function render() {
var _this$props$error;
logger.error("%c" + (this.props.componentName || '') + " \u7EC4\u4EF6\u6E32\u67D3\u5F02\u5E38, \u5F02\u5E38\u539F\u56E0: " + (((_this$props$error = this.props.error) === null || _this$props$error === void 0 ? void 0 : _this$props$error.message) || this.props.error || '未知'), 'color: #ff0000;');
return _createElement(Div, {
style: {
width: '100%',
height: '50px',
lineHeight: '50px',
textAlign: 'center',
fontSize: '15px',
color: '#ff0000',
border: '2px solid #ff0000'
}
}, (this.props.componentName || '') + " \u7EC4\u4EF6\u6E32\u67D3\u5F02\u5E38\uFF0C\u8BF7\u67E5\u770B\u63A7\u5236\u53F0\u65E5\u5FD7");
};
return FaultComponent;
}(PureComponent);
var NotFoundComponent = /*#__PURE__*/function (_PureComponent2) {
function NotFoundComponent() {
return _PureComponent2.apply(this, arguments) || this;
}
_inheritsLoose(NotFoundComponent, _PureComponent2);
var _proto2 = NotFoundComponent.prototype;
_proto2.render = function render() {
if (this.props.enableStrictNotFoundMode) {
return (this.props.componentName || '') + " Component Not Found";
}
return _createElement(Div, this.props, this.props.children || (this.props.componentName || '') + " Component Not Found");
};
return NotFoundComponent;
}(PureComponent);
return _Renderer = /*#__PURE__*/function (_Component) {
function Renderer(props, context) {
var _props$schema;
var _this;
_this = _Component.call(this, props, context) || this;
_this.state = {};
_this.__ref = void 0;
_this.__getRef = function (ref) {
_this.__ref = ref;
if (ref) {
var _this$props$onCompGet, _this$props;
(_this$props$onCompGet = (_this$props = _this.props).onCompGetRef) === null || _this$props$onCompGet === void 0 ? void 0 : _this$props$onCompGet.call(_this$props, _this.props.schema, ref);
}
};
_this.state = {};
debug("entry.constructor - " + (props === null || props === void 0 ? void 0 : (_props$schema = props.schema) === null || _props$schema === void 0 ? void 0 : _props$schema.componentName));
return _this;
}
_inheritsLoose(Renderer, _Component);
var _proto3 = Renderer.prototype;
_proto3.componentDidMount = /*#__PURE__*/function () {
var _componentDidMount = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
debug("entry.componentDidMount - " + (this.props.schema && this.props.schema.componentName));
case 1:
case "end":
return _context.stop();
}
}, _callee, this);
}));
function componentDidMount() {
return _componentDidMount.apply(this, arguments);
}
return componentDidMount;
}();
_proto3.componentDidUpdate = /*#__PURE__*/function () {
var _componentDidUpdate = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
var _this$props2, _this$props2$schema;
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) switch (_context2.prev = _context2.next) {
case 0:
debug("entry.componentDidUpdate - " + ((_this$props2 = this.props) === null || _this$props2 === void 0 ? void 0 : (_this$props2$schema = _this$props2.schema) === null || _this$props2$schema === void 0 ? void 0 : _this$props2$schema.componentName));
case 1:
case "end":
return _context2.stop();
}
}, _callee2, this);
}));
function componentDidUpdate() {
return _componentDidUpdate.apply(this, arguments);
}
return componentDidUpdate;
}();
_proto3.componentWillUnmount = /*#__PURE__*/function () {
var _componentWillUnmount = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
var _this$props3, _this$props3$schema;
return _regeneratorRuntime.wrap(function _callee3$(_context3) {
while (1) switch (_context3.prev = _context3.next) {
case 0:
debug("entry.componentWillUnmount - " + ((_this$props3 = this.props) === null || _this$props3 === void 0 ? void 0 : (_this$props3$schema = _this$props3.schema) === null || _this$props3$schema === void 0 ? void 0 : _this$props3$schema.componentName));
case 1:
case "end":
return _context3.stop();
}
}, _callee3, this);
}));
function componentWillUnmount() {
return _componentWillUnmount.apply(this, arguments);
}
return componentWillUnmount;
}();
_proto3.componentDidCatch = function componentDidCatch(error) {
this.state.engineRenderError = true;
this.state.error = error;
};
_proto3.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
return !nextProps.suspended;
};
_proto3.isValidComponent = function isValidComponent(SetComponent) {
return SetComponent;
};
_proto3.createElement = function createElement(SetComponent, props, children) {
return (this.props.customCreateElement || _createElement)(SetComponent, props, children);
};
_proto3.getNotFoundComponent = function getNotFoundComponent() {
return this.props.notFoundComponent || NotFoundComponent;
};
_proto3.getFaultComponent = function getFaultComponent() {
var _this$props4 = this.props,
faultComponent = _this$props4.faultComponent,
faultComponentMap = _this$props4.faultComponentMap,
schema = _this$props4.schema;
if (faultComponentMap) {
var componentName = schema.componentName;
return faultComponentMap[componentName] || faultComponent || FaultComponent;
}
return faultComponent || FaultComponent;
};
_proto3.getComp = function getComp() {
var _this$props5 = this.props,
schema = _this$props5.schema,
components = _this$props5.components;
var componentName = schema.componentName;
var allComponents = _extends({}, RENDERER_COMPS, components);
var Comp = allComponents[componentName] || RENDERER_COMPS[componentName + "Renderer"];
if (Comp && Comp.prototype) {
if (!(Comp.prototype instanceof BaseRenderer)) {
Comp = RENDERER_COMPS[componentName + "Renderer"];
}
}
return Comp;
};
_proto3.render = function render() {
var _this$props6 = this.props,
schema = _this$props6.schema,
designMode = _this$props6.designMode,
appHelper = _this$props6.appHelper,
components = _this$props6.components;
if (isEmpty(schema)) {
return null;
}
// 兼容乐高区块模板
if (schema.componentName !== 'Div' && !isFileSchema(schema)) {
logger.error('The root component name needs to be one of Page、Block、Component, please check the schema: ', schema);
return '模型结构异常';
}
debug('entry.render');
var allComponents = _extends({}, RENDERER_COMPS, components);
var Comp = this.getComp();
if (this.state && this.state.engineRenderError) {
return _createElement(this.getFaultComponent(), _extends({}, this.props, {
error: this.state.error
}));
}
if (Comp) {
return _createElement(AppContext.Provider, {
value: {
appHelper: appHelper,
components: allComponents,
engine: this
}
}, _createElement(ConfigProvider, {
device: this.props.device,
locale: this.props.locale
}, _createElement(Comp, _extends({
key: schema.__ctx && schema.__ctx.lceKey + "_" + (schema.__ctx.idx || '0'),
ref: this.__getRef,
__appHelper: appHelper,
__components: allComponents,
__schema: schema,
__designMode: designMode
}, this.props))));
}
return null;
};
return Renderer;
}(Component), _Renderer.displayName = 'Renderer', _Renderer.defaultProps = {
appHelper: undefined,
components: {},
designMode: '',
suspended: false,
schema: {},
onCompGetRef: function onCompGetRef() {},
onCompGetCtx: function onCompGetCtx() {},
thisRequiredInJSE: true
}, _Renderer.findDOMNode = findDOMNode, _Renderer;
}