-
-
Notifications
You must be signed in to change notification settings - Fork 1.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: runtime plugin to mound multi react version app
- Loading branch information
ScriptedAlchemy
committed
Apr 21, 2024
1 parent
3d2f4c7
commit 7635dfb
Showing
14 changed files
with
769 additions
and
461 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,56 @@ | ||
import React from 'react'; | ||
import ReactDOM from 'react-dom'; | ||
|
||
class Component extends React.Component { | ||
render() { | ||
const { hostV, remoteV, containerRef } = this.props; | ||
console.log({ hostV, remoteV }); | ||
return ( | ||
<div> | ||
<p style={{ color: 'red' }}> | ||
In RUNTIME PLUGIN WRAPPER <br /> | ||
Host React: {hostV} Remote React: {remoteV} | ||
</p> | ||
<div ref={containerRef}/> | ||
</div> | ||
); | ||
} | ||
} | ||
|
||
// This is the higher-order component that takes the Original component and additional props | ||
const withVersions = (Original, hostVersion, remoteVersion) => { | ||
class WrappedComponent extends React.Component { | ||
constructor(props) { | ||
super(props); | ||
this.containerRef = React.createRef(); | ||
} | ||
|
||
componentDidMount() { | ||
this.mountOriginalComponent(); | ||
} | ||
|
||
componentDidUpdate() { | ||
this.mountOriginalComponent(); | ||
} | ||
|
||
componentWillUnmount() { | ||
if (this.containerRef.current) { | ||
ReactDOM.unmountComponentAtNode(this.containerRef.current); | ||
} | ||
} | ||
|
||
mountOriginalComponent() { | ||
const element = <Original {...this.props} />; | ||
ReactDOM.render(element, this.containerRef.current); | ||
} | ||
|
||
render() { | ||
console.log(Original, hostVersion, remoteVersion); | ||
return <Component hostV={hostVersion} remoteV={remoteVersion} containerRef={this.containerRef} />; | ||
} | ||
} | ||
|
||
return <WrappedComponent/>; | ||
}; | ||
|
||
export default withVersions; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
55 changes: 55 additions & 0 deletions
55
different-react-versions-16-17/app1/react-adapter-runtime-plugin.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
|
||
const runtimePlugin = function () { | ||
return { | ||
name: 'my-runtime-plugin', | ||
beforeInit(args) { | ||
console.log('beforeInit: ', args); | ||
return args; | ||
}, | ||
init(args) { | ||
console.log('init: ', args); | ||
return args; | ||
}, | ||
loadRemote(args) { | ||
console.log('beforeRequest: ', args); | ||
return args; | ||
}, | ||
afterResolve(args) { | ||
console.log('afterResolve', args); | ||
|
||
const hostVersion = args.options.shared.react[0].version; | ||
const remoteInstance = __FEDERATION__.__INSTANCES__.find(instance=>{ | ||
return instance.name === args.pkgNameOrAlias | ||
}) | ||
const remoteVersion = remoteInstance ? remoteInstance.options.shared.react[0].version : false | ||
|
||
if(remoteVersion && hostVersion && remoteVersion !== hostVersion) { | ||
console.log(remoteVersion, hostVersion) | ||
} | ||
|
||
return args; | ||
}, | ||
async onLoad(args) { | ||
console.log('onLoad: ', args); | ||
const hostVersion = args.origin.options.shared.react[0].version; | ||
const remoteInstance = __FEDERATION__.__INSTANCES__.find(instance=>{ | ||
return instance.name === args.pkgNameOrAlias | ||
}) | ||
const remoteVersion = remoteInstance ? remoteInstance.options.shared.react[0].version : false | ||
const res = (await import('./fallback.js')).default | ||
|
||
if(remoteVersion && hostVersion && remoteVersion !== hostVersion) { | ||
return ()=>()=>res(args.exposeModuleFactory().default, remoteVersion, hostVersion) | ||
} | ||
return args | ||
}, | ||
async loadShare(args) { | ||
console.log('loadShare:', args); | ||
}, | ||
async beforeLoadShare(args) { | ||
console.log('beforeloadShare:', args); | ||
return args; | ||
}, | ||
}; | ||
}; | ||
export default runtimePlugin; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,56 @@ | ||
import React from 'react'; | ||
import ReactDOM from 'react-dom'; | ||
|
||
class Component extends React.Component { | ||
render() { | ||
const { hostV, remoteV, containerRef } = this.props; | ||
console.log({ hostV, remoteV }); | ||
return ( | ||
<div> | ||
<p style={{ color: 'red' }}> | ||
In RUNTIME PLUGIN WRAPPER <br /> | ||
Host React: {hostV} Remote React: {remoteV} | ||
</p> | ||
<div ref={containerRef}/> | ||
</div> | ||
); | ||
} | ||
} | ||
|
||
// This is the higher-order component that takes the Original component and additional props | ||
const withVersions = (Original, hostVersion, remoteVersion) => { | ||
class WrappedComponent extends React.Component { | ||
constructor(props) { | ||
super(props); | ||
this.containerRef = React.createRef(); | ||
} | ||
|
||
componentDidMount() { | ||
this.mountOriginalComponent(); | ||
} | ||
|
||
componentDidUpdate() { | ||
this.mountOriginalComponent(); | ||
} | ||
|
||
componentWillUnmount() { | ||
if (this.containerRef.current) { | ||
ReactDOM.unmountComponentAtNode(this.containerRef.current); | ||
} | ||
} | ||
|
||
mountOriginalComponent() { | ||
const element = <Original {...this.props} />; | ||
ReactDOM.render(element, this.containerRef.current); | ||
} | ||
|
||
render() { | ||
console.log(Original, hostVersion, remoteVersion); | ||
return <Component hostV={hostVersion} remoteV={remoteVersion} containerRef={this.containerRef} />; | ||
} | ||
} | ||
|
||
return <WrappedComponent/>; | ||
}; | ||
|
||
export default withVersions; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
55 changes: 55 additions & 0 deletions
55
different-react-versions-16-17/app2/react-adapter-runtime-plugin.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
|
||
const runtimePlugin = function () { | ||
return { | ||
name: 'my-runtime-plugin', | ||
beforeInit(args) { | ||
console.log('beforeInit: ', args); | ||
return args; | ||
}, | ||
init(args) { | ||
console.log('init: ', args); | ||
return args; | ||
}, | ||
loadRemote(args) { | ||
console.log('beforeRequest: ', args); | ||
return args; | ||
}, | ||
afterResolve(args) { | ||
console.log('afterResolve', args); | ||
|
||
const hostVersion = args.options.shared.react[0].version; | ||
const remoteInstance = __FEDERATION__.__INSTANCES__.find(instance=>{ | ||
return instance.name === args.pkgNameOrAlias | ||
}) | ||
const remoteVersion = remoteInstance ? remoteInstance.options.shared.react[0].version : false | ||
|
||
if(remoteVersion && hostVersion && remoteVersion !== hostVersion) { | ||
console.log(remoteVersion, hostVersion) | ||
} | ||
|
||
return args; | ||
}, | ||
async onLoad(args) { | ||
console.log('onLoad: ', args); | ||
const hostVersion = args.origin.options.shared.react[0].version; | ||
const remoteInstance = __FEDERATION__.__INSTANCES__.find(instance=>{ | ||
return instance.name === args.pkgNameOrAlias | ||
}) | ||
const remoteVersion = remoteInstance ? remoteInstance.options.shared.react[0].version : false | ||
const res = (await import('./fallback.js')).default | ||
|
||
if(remoteVersion && hostVersion && remoteVersion !== hostVersion) { | ||
return ()=>()=>res(args.exposeModuleFactory().default, remoteVersion, hostVersion) | ||
} | ||
return args | ||
}, | ||
async loadShare(args) { | ||
console.log('loadShare:', args); | ||
}, | ||
async beforeLoadShare(args) { | ||
console.log('beforeloadShare:', args); | ||
return args; | ||
}, | ||
}; | ||
}; | ||
export default runtimePlugin; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.