diff --git a/packages/react-renderer/demo/config/components/A.jsx b/packages/react-renderer/demo/config/components/A.jsx new file mode 100644 index 000000000..e453d06d9 --- /dev/null +++ b/packages/react-renderer/demo/config/components/A.jsx @@ -0,0 +1,8 @@ +import React, { PureComponent } from 'react'; +export default class AView extends PureComponent { + static displayName = 'A'; + static version = '0.0.0'; + render() { + return ; + } +} diff --git a/packages/react-renderer/demo/config/components/Div.jsx b/packages/react-renderer/demo/config/components/Div.jsx new file mode 100644 index 000000000..7c4dc7c25 --- /dev/null +++ b/packages/react-renderer/demo/config/components/Div.jsx @@ -0,0 +1,8 @@ +import React, { PureComponent } from 'react'; +export default class DivView extends PureComponent { + static displayName = 'Div'; + static version = '0.0.0'; + render() { + return
; + } +} diff --git a/packages/react-renderer/demo/config/components/Image.jsx b/packages/react-renderer/demo/config/components/Image.jsx new file mode 100644 index 000000000..ba2541dce --- /dev/null +++ b/packages/react-renderer/demo/config/components/Image.jsx @@ -0,0 +1,11 @@ +import React, { PureComponent } from 'react'; +export default class ImageView extends PureComponent { + static displayName = 'Image'; + static version = '0.0.0'; + static defaultProps = { + src: '//img.alicdn.com/tfs/TB1knm4bqNj0u4jSZFyXXXgMVXa-240-240.png_100x100.jpg', + }; + render() { + return ; + } +} diff --git a/packages/react-renderer/demo/config/components/Text.jsx b/packages/react-renderer/demo/config/components/Text.jsx new file mode 100644 index 000000000..5e9ad47bc --- /dev/null +++ b/packages/react-renderer/demo/config/components/Text.jsx @@ -0,0 +1,23 @@ +import React, { PureComponent } from 'react'; +import PropTypes from 'prop-types'; +export default class TextView extends PureComponent { + static displayName = 'Text'; + static version = '0.0.0'; + static propTypes = { + text: PropTypes.string, + }; + render() { + const { text, ...restProps } = this.props; + let textNode = text; + // 强制类型转换 + try { + textNode = text.toString(); + } catch (e) { + textNode = ''; + } + if (window.__ctx && window.__ctx.canvasAppHelper) { + textNode = textNode || 'Text'; + } + return {textNode}; + } +} diff --git a/packages/react-renderer/demo/config/components.js b/packages/react-renderer/demo/config/components/index.js similarity index 93% rename from packages/react-renderer/demo/config/components.js rename to packages/react-renderer/demo/config/components/index.js index f2dc1fb91..740f6498f 100644 --- a/packages/react-renderer/demo/config/components.js +++ b/packages/react-renderer/demo/config/components/index.js @@ -1,7 +1,7 @@ -import Div from '@ali/iceluna-components-div'; -import Text from '@ali/iceluna-components-text'; -import A from '@ali/iceluna-components-a'; -import Image from '@ali/iceluna-components-image'; +import Div from './Div'; +import Text from './Text'; +import A from './A'; +import Image from './Image'; import { Balloon, diff --git a/packages/react-renderer/demo/list.md b/packages/react-renderer/demo/list.md index 9609755a2..5d5888f4f 100644 --- a/packages/react-renderer/demo/list.md +++ b/packages/react-renderer/demo/list.md @@ -8,7 +8,7 @@ import React, { PureComponent } from 'react'; import ReactDOM from 'react-dom'; import ReactRenderer from '@ali/lowcode-react-renderer'; import schema from './schemas/list'; -import components from './config/components'; +import components from './config/components/index'; import utils from './config/utils'; import constants from './config/constants'; diff --git a/packages/react-renderer/demo/table.md b/packages/react-renderer/demo/table.md index c5e6362a2..9bdacf36c 100644 --- a/packages/react-renderer/demo/table.md +++ b/packages/react-renderer/demo/table.md @@ -8,7 +8,7 @@ import React, { PureComponent } from 'react'; import ReactDOM from 'react-dom'; import ReactRenderer from '@ali/lowcode-react-renderer'; import schema from './schemas/table'; -import components from './config/components'; +import components from './config/components/index'; import utils from './config/utils'; import constants from './config/constants'; diff --git a/packages/react-renderer/package.json b/packages/react-renderer/package.json index 5224a0790..55b847f74 100644 --- a/packages/react-renderer/package.json +++ b/packages/react-renderer/package.json @@ -26,7 +26,6 @@ "dependencies": { "@ali/b3-one": "^0.0.17", "@ali/bzb-request": "^2.6.0-beta.13", - "@ali/iceluna-comp-div": "^1.0.0", "@ali/lib-mtop": "^2.5.1", "@alifd/next": "^1.18.17", "debug": "^4.1.1", @@ -43,10 +42,6 @@ "whatwg-fetch": "^3.0.0" }, "devDependencies": { - "@ali/iceluna-components-a": "^0.1.0", - "@ali/iceluna-components-div": "^0.1.0", - "@ali/iceluna-components-image": "^0.1.0", - "@ali/iceluna-components-text": "^0.1.0", "@alib/build-scripts": "^0.1.18", "build-plugin-component": "^0.2.10", "build-plugin-fusion": "^0.1.0", diff --git a/packages/react-renderer/src/components/Div.jsx b/packages/react-renderer/src/components/Div.jsx new file mode 100644 index 000000000..a392b2a03 --- /dev/null +++ b/packages/react-renderer/src/components/Div.jsx @@ -0,0 +1,11 @@ +import React, { PureComponent } from 'react'; + +export default class DivView extends PureComponent { + static displayName = 'Div'; + + static version = '0.0.0'; + + render() { + return
; + } +} diff --git a/packages/react-renderer/src/comp/visualDom/index.jsx b/packages/react-renderer/src/components/VisualDom.jsx similarity index 96% rename from packages/react-renderer/src/comp/visualDom/index.jsx rename to packages/react-renderer/src/components/VisualDom.jsx index e9b98641e..7a900c0e5 100644 --- a/packages/react-renderer/src/comp/visualDom/index.jsx +++ b/packages/react-renderer/src/components/VisualDom.jsx @@ -1,6 +1,6 @@ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; -import './index.scss'; +import './VisualDom.scss'; export default class VisualDom extends PureComponent { static displayName = 'VisualDom'; static propTypes = { diff --git a/packages/react-renderer/src/comp/visualDom/index.scss b/packages/react-renderer/src/components/VisualDom.scss similarity index 100% rename from packages/react-renderer/src/comp/visualDom/index.scss rename to packages/react-renderer/src/components/VisualDom.scss diff --git a/packages/react-renderer/src/engine/index.jsx b/packages/react-renderer/src/engine/index.jsx deleted file mode 100644 index 244430e1a..000000000 --- a/packages/react-renderer/src/engine/index.jsx +++ /dev/null @@ -1,199 +0,0 @@ -import React, { Component, PureComponent, createElement as reactCreateElement } from 'react'; -import ReactDOM from 'react-dom'; -import PropTypes from 'prop-types'; -import Debug from 'debug'; -import AppContext from '../context/appContext'; -import { isFileSchema, goldlog } from '../utils'; -import PageEngine from './pageEngine'; -import ComponentEngine from './compEngine'; -import BlockEngine from './blockEngine'; -import AddonEngine from './addonEngine'; -import TempEngine from './tempEngine'; -import { isEmpty } from '@ali/b3-one/lib/obj'; -import BaseEngine from './base'; -import Div from '@ali/iceluna-comp-div'; - -window.React = React; -window.ReactDom = ReactDOM; - -const debug = Debug('engine:entry'); -const ENGINE_COMPS = { - PageEngine, - ComponentEngine, - BlockEngine, - AddonEngine, - TempEngine, - DivEngine: BlockEngine, -}; - -class FaultComponent extends PureComponent { - render() { - // FIXME: errorlog - console.error('render error', this.props); - return
RenderError
; - } -} - -class NotFoundComponent extends PureComponent { - render() { - console.error('component not found', this.props); - return
; - } -} - -function isReactClass(obj) { - return obj && obj.prototype && (obj.prototype.isReactComponent || obj.prototype instanceof Component); -} - -export default class Engine extends PureComponent { - static dislayName = 'engine'; - static propTypes = { - appHelper: PropTypes.object, - components: PropTypes.object, - designMode: PropTypes.string, - suspended: PropTypes.bool, - schema: PropTypes.oneOfType([PropTypes.array, PropTypes.object]), - onCompGetRef: PropTypes.func, - onCompGetCtx: PropTypes.func, - customCreateElement: PropTypes.func, - }; - static defaultProps = { - appHelper: null, - components: {}, - designMode: '', - suspended: false, - schema: {}, - onCompGetRef: () => {}, - onCompGetCtx: () => {}, - }; - - constructor(props, context) { - super(props, context); - this.state = {}; - debug(`entry.constructor - ${props.schema && props.schema.componentName}`); - } - - async componentDidMount() { - goldlog( - 'EXP', - { - action: 'appear', - value: !!this.props.designMode, - }, - 'engine', - ); - debug(`entry.componentDidMount - ${this.props.schema && this.props.schema.componentName}`); - } - - async componentDidUpdate() { - debug(`entry.componentDidUpdate - ${this.props.schema && this.props.schema.componentName}`); - } - - async componentWillUnmount() { - debug(`entry.componentWillUnmount - ${this.props.schema && this.props.schema.componentName}`); - } - - async componentDidCatch(e) { - console.warn(e); - } - - shouldComponentUpdate(nextProps) { - return !nextProps.suspended; - } - - __getRef = (ref) => { - this.__ref = ref; - if (ref) { - this.props.onCompGetRef(this.props.schema, ref, true); - } - }; - - patchDidCatch(Component) { - if (!isReactClass(Component)) { - return; - } - if (Component.patchedCatch) { - return; - } - Component.patchedCatch = true; - Component.getDerivedStateFromError = (error) => { - return { engineRenderError: true, error }; - }; - const engine = this; - const originRender = Component.prototype.render; - Component.prototype.render = function () { - if (this.state && this.state.engineRenderError) { - this.state.engineRenderError = false; - return engine.createElement(engine.getFaultComponent(), { - ...this.props, - error: this.state.error, - }); - } - return originRender.call(this); - }; - const originShouldComponentUpdate = Component.prototype.shouldComponentUpdate; - Component.prototype.shouldComponentUpdate = function (nextProps, nextState) { - if (nextState && nextState.engineRenderError) { - return true; - } - return originShouldComponentUpdate ? originShouldComponentUpdate.call(this, nextProps, nextState) : true; - }; - } - - createElement(Component, props, children) { - // TODO: enable in runtime mode? - this.patchDidCatch(Component); - return (this.props.customCreateElement || reactCreateElement)(Component, props, children); - } - getNotFoundComponent() { - return this.props.notFoundComponent || NotFoundComponent; - } - getFaultComponent() { - return this.props.faultComponent || FaultComponent; - } - - render() { - const { schema, designMode, appHelper, components, customCreateElement } = this.props; - if (isEmpty(schema)) { - return null; - } - // 兼容乐高区块模板 - if (schema.componentName !== 'Div' && !isFileSchema(schema)) { - return '模型结构异常'; - } - debug('entry.render'); - const { componentName } = schema; - const allComponents = { ...ENGINE_COMPS, ...components }; - let Comp = allComponents[componentName] || ENGINE_COMPS[`${componentName}Engine`]; - if (Comp && Comp.prototype) { - const proto = Comp.prototype; - if (!(Comp.prototype instanceof BaseEngine)) { - Comp = ENGINE_COMPS[`${componentName}Engine`]; - } - } - if (Comp) { - return ( - - - - ); - } - return null; - } -} - -Engine.findDOMNode = ReactDOM.findDOMNode; diff --git a/packages/react-renderer/src/index.js b/packages/react-renderer/src/index.js index 44032ec7b..37885f905 100644 --- a/packages/react-renderer/src/index.js +++ b/packages/react-renderer/src/index.js @@ -1 +1,199 @@ -export default from './engine'; +import React, { Component, PureComponent, createElement as reactCreateElement } from 'react'; +import ReactDOM from 'react-dom'; +import PropTypes from 'prop-types'; +import Debug from 'debug'; +import { isEmpty } from '@ali/b3-one/lib/obj'; +import AppContext from './context/appContext'; +import { isFileSchema, goldlog } from './utils'; +import PageEngine from './renderer/page'; +import ComponentEngine from './renderer/component'; +import BlockEngine from './renderer/block'; +import AddonEngine from './renderer/addon'; +import TempEngine from './renderer/temp'; +import BaseEngine from './renderer/base'; +import Div from './components/Div'; + +window.React = React; +window.ReactDom = ReactDOM; + +const debug = Debug('renderer:entry'); +const ENGINE_COMPS = { + PageEngine, + ComponentEngine, + BlockEngine, + AddonEngine, + TempEngine, + DivEngine: BlockEngine, +}; + +class FaultComponent extends PureComponent { + render() { + // FIXME: errorlog + console.error('render error', this.props); + return
RenderError
; + } +} + +class NotFoundComponent extends PureComponent { + render() { + console.error('component not found', this.props); + return
; + } +} + +function isReactClass(obj) { + return obj && obj.prototype && (obj.prototype.isReactComponent || obj.prototype instanceof Component); +} + +export default class Renderer extends PureComponent { + static dislayName = 'renderer'; + static propTypes = { + appHelper: PropTypes.object, + components: PropTypes.object, + designMode: PropTypes.string, + suspended: PropTypes.bool, + schema: PropTypes.oneOfType([PropTypes.array, PropTypes.object]), + onCompGetRef: PropTypes.func, + onCompGetCtx: PropTypes.func, + customCreateElement: PropTypes.func, + }; + static defaultProps = { + appHelper: null, + components: {}, + designMode: '', + suspended: false, + schema: {}, + onCompGetRef: () => {}, + onCompGetCtx: () => {}, + }; + + constructor(props, context) { + super(props, context); + this.state = {}; + debug(`entry.constructor - ${props.schema && props.schema.componentName}`); + } + + async componentDidMount() { + goldlog( + 'EXP', + { + action: 'appear', + value: !!this.props.designMode, + }, + 'engine', + ); + debug(`entry.componentDidMount - ${this.props.schema && this.props.schema.componentName}`); + } + + async componentDidUpdate() { + debug(`entry.componentDidUpdate - ${this.props.schema && this.props.schema.componentName}`); + } + + async componentWillUnmount() { + debug(`entry.componentWillUnmount - ${this.props.schema && this.props.schema.componentName}`); + } + + async componentDidCatch(e) { + console.warn(e); + } + + shouldComponentUpdate(nextProps) { + return !nextProps.suspended; + } + + __getRef = (ref) => { + this.__ref = ref; + if (ref) { + this.props.onCompGetRef(this.props.schema, ref, true); + } + }; + + patchDidCatch(Component) { + if (!isReactClass(Component)) { + return; + } + if (Component.patchedCatch) { + return; + } + Component.patchedCatch = true; + Component.getDerivedStateFromError = (error) => { + return { engineRenderError: true, error }; + }; + const engine = this; + const originRender = Component.prototype.render; + Component.prototype.render = function () { + if (this.state && this.state.engineRenderError) { + this.state.engineRenderError = false; + return engine.createElement(engine.getFaultComponent(), { + ...this.props, + error: this.state.error, + }); + } + return originRender.call(this); + }; + const originShouldComponentUpdate = Component.prototype.shouldComponentUpdate; + Component.prototype.shouldComponentUpdate = function (nextProps, nextState) { + if (nextState && nextState.engineRenderError) { + return true; + } + return originShouldComponentUpdate ? originShouldComponentUpdate.call(this, nextProps, nextState) : true; + }; + } + + createElement(Component, props, children) { + // TODO: enable in runtime mode? + this.patchDidCatch(Component); + return (this.props.customCreateElement || reactCreateElement)(Component, props, children); + } + getNotFoundComponent() { + return this.props.notFoundComponent || NotFoundComponent; + } + getFaultComponent() { + return this.props.faultComponent || FaultComponent; + } + + render() { + const { schema, designMode, appHelper, components, customCreateElement } = this.props; + if (isEmpty(schema)) { + return null; + } + // 兼容乐高区块模板 + if (schema.componentName !== 'Div' && !isFileSchema(schema)) { + return '模型结构异常'; + } + debug('entry.render'); + const { componentName } = schema; + const allComponents = { ...ENGINE_COMPS, ...components }; + let Comp = allComponents[componentName] || ENGINE_COMPS[`${componentName}Engine`]; + if (Comp && Comp.prototype) { + const proto = Comp.prototype; + if (!(Comp.prototype instanceof BaseEngine)) { + Comp = ENGINE_COMPS[`${componentName}Engine`]; + } + } + if (Comp) { + return ( + + + + ); + } + return null; + } +} + +Renderer.findDOMNode = ReactDOM.findDOMNode; diff --git a/packages/react-renderer/src/engine/addonEngine.jsx b/packages/react-renderer/src/renderer/addon.jsx similarity index 95% rename from packages/react-renderer/src/engine/addonEngine.jsx rename to packages/react-renderer/src/renderer/addon.jsx index b2839ea27..90e908641 100644 --- a/packages/react-renderer/src/engine/addonEngine.jsx +++ b/packages/react-renderer/src/renderer/addon.jsx @@ -1,13 +1,15 @@ import React from 'react'; import PropTypes from 'prop-types'; import Debug from 'debug'; -import AppContext from '../context/appContext'; import classnames from 'classnames'; -import BaseEngine from './base'; +import AppContext from '../context/appContext'; +import BaseRenderer from './base'; import { isSchema, getFileCssName, isEmpty, goldlog } from '../utils'; -const debug = Debug('engine:addon'); -export default class AddonEngine extends BaseEngine { - static dislayName = 'addon-engine'; + +const debug = Debug('renderer:addon'); + +export default class AddonRenderer extends BaseRenderer { + static dislayName = 'addon-renderer'; static propTypes = { config: PropTypes.object, __schema: PropTypes.object, diff --git a/packages/react-renderer/src/engine/base.jsx b/packages/react-renderer/src/renderer/base.jsx similarity index 98% rename from packages/react-renderer/src/engine/base.jsx rename to packages/react-renderer/src/renderer/base.jsx index af8c6d4eb..f9b76db64 100644 --- a/packages/react-renderer/src/engine/base.jsx +++ b/packages/react-renderer/src/renderer/base.jsx @@ -1,12 +1,10 @@ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import Debug from 'debug'; -import Div from '@ali/iceluna-comp-div'; -import VisualDom from '../comp/visualDom'; - +import Div from '../components/Div'; +import VisualDom from '../components/VisualDom'; import AppContext from '../context/appContext'; import DataHelper from '../utils/dataHelper'; - import { forEach, getValue, @@ -25,7 +23,7 @@ import { acceptsRef, } from '../utils'; -const debug = Debug('engine:base'); +const debug = Debug('renderer:base'); const DESIGN_MODE = { EXTEND: 'extend', BORDER: 'border', @@ -34,8 +32,8 @@ const DESIGN_MODE = { const OVERLAY_LIST = ['Dialog', 'Overlay', 'Animate', 'ConfigProvider']; let scopeIdx = 0; -export default class BaseEngine extends PureComponent { - static dislayName = 'base-engine'; +export default class BaseRender extends PureComponent { + static dislayName = 'base-renderer'; static propTypes = { locale: PropTypes.string, messages: PropTypes.object, diff --git a/packages/react-renderer/src/engine/blockEngine.jsx b/packages/react-renderer/src/renderer/block.jsx similarity index 94% rename from packages/react-renderer/src/engine/blockEngine.jsx rename to packages/react-renderer/src/renderer/block.jsx index 9712ef3ea..c3396d751 100644 --- a/packages/react-renderer/src/engine/blockEngine.jsx +++ b/packages/react-renderer/src/renderer/block.jsx @@ -4,13 +4,14 @@ import Debug from 'debug'; import classnames from 'classnames'; import Loading from '@alifd/next/lib/loading'; import '@alifd/next/lib/loading/style'; - -import BaseEngine from './base'; +import BaseRenderer from './base'; import AppContext from '../context/appContext'; import { isSchema, getFileCssName } from '../utils'; -const debug = Debug('engine:block'); -export default class BlockEngine extends BaseEngine { - static dislayName = 'block-engine'; + +const debug = Debug('renderer:block'); + +export default class BlockRenderer extends BaseRenderer { + static dislayName = 'block-renderer'; static propTypes = { __schema: PropTypes.object, }; diff --git a/packages/react-renderer/src/engine/compEngine.jsx b/packages/react-renderer/src/renderer/component.jsx similarity index 95% rename from packages/react-renderer/src/engine/compEngine.jsx rename to packages/react-renderer/src/renderer/component.jsx index 44bb1f1eb..2172b6c45 100644 --- a/packages/react-renderer/src/engine/compEngine.jsx +++ b/packages/react-renderer/src/renderer/component.jsx @@ -4,13 +4,14 @@ import Debug from 'debug'; import classnames from 'classnames'; import Loading from '@alifd/next/lib/loading'; import '@alifd/next/lib/loading/style'; - import AppContext from '../context/appContext'; -import BaseEngine from './base'; +import BaseRenderer from './base'; import { isSchema, getFileCssName } from '../utils'; -const debug = Debug('engine:comp'); -export default class CompEngine extends BaseEngine { - static dislayName = 'comp-engine'; + +const debug = Debug('renderer:comp'); + +export default class CompRenderer extends BaseRenderer { + static dislayName = 'comp-renderer'; static propTypes = { __schema: PropTypes.object, }; diff --git a/packages/react-renderer/src/engine/pageEngine.jsx b/packages/react-renderer/src/renderer/page.jsx similarity index 95% rename from packages/react-renderer/src/engine/pageEngine.jsx rename to packages/react-renderer/src/renderer/page.jsx index 2ddccecf9..df9c91304 100644 --- a/packages/react-renderer/src/engine/pageEngine.jsx +++ b/packages/react-renderer/src/renderer/page.jsx @@ -5,12 +5,13 @@ import classnames from 'classnames'; import Loading from '@alifd/next/lib/loading'; import '@alifd/next/lib/loading/style'; import AppContext from '../context/appContext'; -import BaseEngine from './base'; +import BaseRenderer from './base'; import { isSchema, getFileCssName } from '../utils'; -const debug = Debug('engine:page'); -export default class PageEngine extends BaseEngine { - static dislayName = 'page-engine'; +const debug = Debug('renderer:page'); + +export default class PageRenderer extends BaseRenderer { + static dislayName = 'page-renderer'; static propTypes = { __schema: PropTypes.object, }; diff --git a/packages/react-renderer/src/engine/tempEngine.jsx b/packages/react-renderer/src/renderer/temp.jsx similarity index 88% rename from packages/react-renderer/src/engine/tempEngine.jsx rename to packages/react-renderer/src/renderer/temp.jsx index 433f8a497..9aca53edf 100644 --- a/packages/react-renderer/src/engine/tempEngine.jsx +++ b/packages/react-renderer/src/renderer/temp.jsx @@ -2,11 +2,13 @@ import React from 'react'; import PropTypes from 'prop-types'; import Debug from 'debug'; import AppContext from '../context/appContext'; -import BaseEngine from './base'; +import BaseRenderer from './base'; import { isSchema } from '../utils'; -const debug = Debug('engine:temp'); -export default class TempEngine extends BaseEngine { - static dislayName = 'temp-engine'; + +const debug = Debug('renderer:temp'); + +export default class TempRenderer extends BaseRenderer { + static dislayName = 'temp-renderer'; static propTypes = { __ctx: PropTypes.object, __schema: PropTypes.object, @@ -52,7 +54,7 @@ export default class TempEngine extends BaseEngine { render() { const { __schema, __ctx } = this.props; if (!isSchema(__schema, true) || __schema.componentName !== 'Temp') { - return '下钻编辑schema结构异常！'; + return '下钻编辑 schema 结构异常！'; } debug(`temp.render - ${__schema.fileName}`);