Merge pull request #26 from klarna/stack-list-should-keep-context-and-context-component

Fix a bug with Context Parent component changing all the time, causing RemoteFrames to be remounted.

Author: filipbozhinovskiklarna

package.json

@@ -2,7 +2,8 @@
   "name": "@klarna/remote-frames",
   "version": "0.3.7",
   "description": "Render a subset of the React tree to a different location, from many locations, without having to coordinate them",
-  "main": "build/esm/index.js",
+  "main": "src/index.js",
+  "module": "build/esm/index.js",
   "scripts": {
     "clean": "rimraf -- build",
     "build:esm": "cross-env BABEL_ENV=esm babel src/ --copy-files --out-dir build/esm/ --ignore spec.js,example/",

src/GlobalTarget.js

@@ -28,30 +28,30 @@ class GlobalTarget extends Component {
 
     this.stackTypes = []
 
-    this.SetContextComponent = createSetContextComponent({})
-
     this.state = {
       stack: [],
     }
   }
 
   componentDidMount() {
     this.renderInRemote = ({ jsx, context, contextTypes }) => {
-      this.SetContextComponent = createSetContextComponent(contextTypes)
+      const newStackItem = {
+        jsx,
+        SetContextComponent: createSetContextComponent(contextTypes),
+        context
+      };
 
       if (this.stackTypes.filter(type => type === jsx.type).length === 0) {
         this.stackTypes = [...this.stackTypes, jsx.type]
 
         this.setState(({ stack }) => ({
-          context,
-          stack: [...stack, jsx],
+          stack: [...stack, newStackItem],
         }))
 
         this.props.onAddStackElement(jsx)
       } else {
         this.setState(({ stack }) => ({
-          context,
-          stack: stack.map(item => (item.type === jsx.type ? jsx : item)),
+          stack: stack.map(item => (item.jsx.type === jsx.type ? newStackItem : item)),
         }))
       }
     }
@@ -61,7 +61,7 @@ class GlobalTarget extends Component {
 
       this.setState(
         ({ stack }) => ({
-          stack: stack.filter(({ type }) => type !== jsx.type),
+          stack: stack.filter(item => item.jsx.type !== jsx.type),
         }),
         () => {
           this.props.onRemoveStackElement(jsx)
@@ -77,21 +77,20 @@ class GlobalTarget extends Component {
   }
 
   render() {
-    const { context, stack } = this.state
+    const { stack } = this.state
 
     return (
-      <this.SetContextComponent context={context}>
-        {stack.map((jsx, index) => {
+      <React.Fragment>
+        {stack.map(({jsx, SetContextComponent, context}, index) => {
           return (
-            <div
-              key={index}
-              style={{ display: index === stack.length - 1 ? 'block' : 'none' }}
-            >
-              {jsx}
-            </div>
+            <SetContextComponent key={index} context={context}>
+              <div style={{ display: index === stack.length - 1 ? 'block' : 'none' }}>
+                {jsx}
+              </div>
+            </SetContextComponent>
           )
         })}
-      </this.SetContextComponent>
+      </React.Fragment>
     )
   }
 }