diff --git a/src/single-spa-react.js b/src/single-spa-react.js index ae79667..3291945 100644 --- a/src/single-spa-react.js +++ b/src/single-spa-react.js @@ -12,6 +12,7 @@ const defaultOpts = { rootComponent: null, loadRootComponent: null, suppressComponentDidCatchWarning: false, + domElements: {}, // optional opts domElementGetter: null, @@ -97,7 +98,7 @@ function mount(opts, props) { const elementToRender = SingleSpaContext ? opts.React.createElement(SingleSpaContext.Provider, {value: props}, rootComponentElement) : rootComponentElement const domElement = getRootDomEl(domElementGetter, props) const renderedComponent = reactDomRender({elementToRender, domElement, whenFinished, opts}) - opts.domElement = domElement + opts.domElements[props.name] = domElement }) } @@ -105,7 +106,7 @@ function unmount(opts, props) { return Promise .resolve() .then(() => { - opts.ReactDOM.unmountComponentAtNode(opts.domElement); + opts.ReactDOM.unmountComponentAtNode(opts.domElements[props.name]); }) } @@ -117,7 +118,7 @@ function update(opts, props) { const rootComponentElement = opts.React.createElement(opts.rootComponent, props) const elementToRender = SingleSpaContext ? opts.React.createElement(SingleSpaContext.Provider, {value: props}, rootComponentElement) : rootComponentElement - const renderedComponent = reactDomRender({elementToRender, domElement:opts.domElement, whenFinished, opts}) + const renderedComponent = reactDomRender({elementToRender, domElement:opts.domElements[props.name], whenFinished, opts}) }) } diff --git a/src/single-spa-react.test.js b/src/single-spa-react.test.js index 8fa8369..7d97c0a 100644 --- a/src/single-spa-react.test.js +++ b/src/single-spa-react.test.js @@ -143,6 +143,36 @@ describe('single-spa-react', () => { }) }) + it(`correctly handles two parcels using the same configuration`, () => { + let opts = {React, ReactDOM, rootComponent} + + let props1 = {domElement: 'element1'} + let props2 = {domElement: 'element2'} + const lifecycles = singleSpaReact(opts) + + return lifecycles + .bootstrap() + .then(() => lifecycles.mount(props1)) + .then(() => lifecycles.unmount(props1)) + .then(() => { + expect(ReactDOM.render).toHaveBeenCalled() + expect(ReactDOM.render.mock.calls[0][1]).toBe('element1') + expect(ReactDOM.unmountComponentAtNode).toHaveBeenCalled() + expect(ReactDOM.unmountComponentAtNode.mock.calls.length).toBe(1) + expect(ReactDOM.unmountComponentAtNode.mock.calls[0][0]).toBe('element1') + }) + // simulate another parcel using the same configuration + .then(() => lifecycles.bootstrap()) + .then(() => lifecycles.mount(props2)) + .then(() => lifecycles.unmount(props2)) + .then(() => { + expect(ReactDOM.render).toHaveBeenCalled() + expect(ReactDOM.render.mock.calls[1][1]).toBe('element2') + expect(ReactDOM.unmountComponentAtNode.mock.calls.length).toBe(2) + expect(ReactDOM.unmountComponentAtNode.mock.calls[1][0]).toBe('element2') + }) + }) + it(`allows you to provide a domElementGetter as an opt`, () => { const props = {why: 'hello', customProps: {}} const lifecycles = singleSpaReact({React, ReactDOM, rootComponent, domElementGetter})