Merge branch 'dev' of https://github.com/micro-zoe/micro-app into dev

dvbug · Oct 26, 2021 · 0d3132f · 0d3132f
2 parents 1940aa9 + ed118df
commit 0d3132f
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 77 deletions.
diff --git a/examples/main-react16/src/pages/react16/react16.js b/examples/main-react16/src/pages/react16/react16.js
@@ -123,60 +123,62 @@ export default class App extends React.Component {
 
   render () {
     return (
-      <Row className='react16'>
-        <Col span={6} className='btn-con'>
-          <Button type="primary" onClick={this.toggleShow}>微应用是否展示</Button>
-          <Button type="primary" onClick={this.changeData}>data属性发送数据</Button>
-          <Button type="primary" onClick={this.dispatchData}>dispatch方法发送数据</Button>
-          <Button type="primary" onClick={this.dispatchGlobalData}>发送全局数据</Button>
-          <Button type="primary" onClick={this.changeNameUrl}>切换应用</Button>
-          <Button type="primary" onClick={this.handleModal}>modal内嵌应用</Button>
-        </Col>
-        <Col span={18} className='app-con-react16'>
-          { this.state.showLoading && <Spin indicator={antIcon} /> }
-          { !this.state.showLoading && <h3>微应用{this.state.name}</h3> }
-          {
-            this.state.showMicroApp && (
+      <>
+        <Row className='react16'>
+          <Col span={6} className='btn-con'>
+            <Button type="primary" onClick={this.toggleShow}>微应用是否展示</Button>
+            <Button type="primary" onClick={this.changeData}>data属性发送数据</Button>
+            <Button type="primary" onClick={this.dispatchData}>dispatch方法发送数据</Button>
+            <Button type="primary" onClick={this.dispatchGlobalData}>发送全局数据</Button>
+            <Button type="primary" onClick={this.changeNameUrl}>切换应用</Button>
+            <Button type="primary" onClick={this.handleModal}>modal内嵌应用</Button>
+          </Col>
+          <Col span={18} className='app-con-react16'>
+            { this.state.showLoading && <Spin indicator={antIcon} /> }
+            { !this.state.showLoading && <h3>微应用{this.state.name}</h3> }
+            {
+              this.state.showMicroApp && (
+                <micro-app
+                  name={this.state.name}
+                  url={this.state.url}
+                  data={this.state.data}
+                  onCreated={this.handleCreated}
+                  onBeforemount={this.beforemount}
+                  onMounted={this.mounted}
+                  onUnmount={this.unmount}
+                  onError={this.error}
+                  onDataChange={this.handleDataChange}
+                  baseRoute='/micro-app/demo/react16'
+                  // destory
+                  // inline
+                  // disableSandbox
+                  // disableScopecss
+                  // macro
+                >
+                </micro-app>
+              )
+            }
+            <Modal
+              visible={this.state.modal1}
+              maskClosable={true}
+              title="Title"
+              width={500}
+              height={500}
+              destroyOnClose
+              onOk={() => this.setState({modal1: false})}
+              onCancel={() => this.setState({modal1: false})}
+            >
               <micro-app
-                name={this.state.name}
+                name='modal-app1'
                 url={this.state.url}
-                data={this.state.data}
-                onCreated={this.handleCreated}
-                onBeforemount={this.beforemount}
-                onMounted={this.mounted}
-                onUnmount={this.unmount}
-                onError={this.error}
-                onDataChange={this.handleDataChange}
                 baseRoute='/micro-app/demo/react16'
-                // destory
-                // inline
                 // disableSandbox
-                // disableScopecss
                 // macro
-              >
-              </micro-app>
-            )
-          }
-          <Modal
-            visible={this.state.modal1}
-            maskClosable={true}
-            title="Title"
-            width={500}
-            height={500}
-            destroyOnClose
-            onOk={() => this.setState({modal1: false})}
-            onCancel={() => this.setState({modal1: false})}
-          >
-            <micro-app
-              name='modal-app1'
-              url={this.state.url}
-              baseRoute='/micro-app/demo/react16'
-              // disableSandbox
-              // macro
-            />
-          </Modal>
-        </Col>
-      </Row>
+              />
+            </Modal>
+          </Col>
+        </Row>
+      </>
     )
   }
 }
diff --git a/src/polyfill/jsx-custom-event.ts b/src/polyfill/jsx-custom-event.ts
@@ -11,40 +11,42 @@ export default function jsxCustomEvent (
   props: Record<string, unknown> | null,
   ...children: any[]
 ): void {
+  if (typeof type !== 'string' || !/^micro-app(-\S+)?/.test(type as string) || !props) {
+    return React.createElement.apply(null, [type, props, ...children])
+  }
+
   const newProps = Object.assign({}, props)
 
-  if (/^micro-app(-\S+)?/.test(type as string) && props) {
-    // ref will call when create, update, unmount
-    newProps.ref = (element: MicroElementType | null) => {
-      if (typeof props.ref === 'function') {
-        props.ref(element)
-      } else if (typeof props.ref === 'object') {
-        (props.ref as any).current = element
-      }
+  // ref will call when create, update, unmount
+  newProps.ref = (element: MicroElementType | null) => {
+    if (typeof props.ref === 'function') {
+      props.ref(element)
+    } else if (typeof props.ref === 'object') {
+      (props.ref as any).current = element
+    }
 
-      // when unmount and update the element is null
-      if (element) {
-        // Update data when the prev and next data are different
-        if (toString.call(props.data) === '[object Object]' && element.data !== props.data) {
-          element.data = props.data
-        }
+    // when unmount and update the element is null
+    if (element) {
+      // Update data when the prev and next data are different
+      if (toString.call(props.data) === '[object Object]' && element.data !== props.data) {
+        element.data = props.data
+      }
 
-        for (const key in props) {
-          if (
-            Object.prototype.hasOwnProperty.call(props, key) &&
-            eventLifeCycles.includes(key.toLowerCase()) &&
-            typeof props[key] === 'function' &&
-            (!element[key] || element[key] !== props[key])
-          ) {
-            const eventName = key.toLowerCase().replace('on', '')
-            if (element[key]) {
-              // @ts-ignore
-              element.removeEventListener(eventName, element[key], false)
-            }
+      for (const key in props) {
+        if (
+          Object.prototype.hasOwnProperty.call(props, key) &&
+          eventLifeCycles.includes(key.toLowerCase()) &&
+          typeof props[key] === 'function' &&
+          (!element[key] || element[key] !== props[key])
+        ) {
+          const eventName = key.toLowerCase().replace('on', '')
+          if (element[key]) {
             // @ts-ignore
-            element.addEventListener(eventName, props[key], false)
-            element[key] = props[key]
+            element.removeEventListener(eventName, element[key], false)
           }
+          // @ts-ignore
+          element.addEventListener(eventName, props[key], false)
+          element[key] = props[key]
         }
       }
     }