Implementing default dom element getter.

.babelrc

@@ -1,14 +1,16 @@
 {
-  "presets": ["env", "react"],
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react",
+  ],
   "plugins": [
-    "transform-object-rest-spread",
-    "transform-class-properties",
-    ["transform-es2015-modules-umd",
+    ["@babel/plugin-transform-modules-umd",
       {
         "globals": {
           "react": "React",
         },
       },
     ],
+    "@babel/plugin-proposal-class-properties",
   ],
 }

package.json

@@ -28,22 +28,22 @@
   },
   "homepage": "https://github.com/joeldenning/single-spa-react#readme",
   "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-jest": "^23.0.0-alpha.0",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-es2015-modules-umd": "^6.24.1",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-preset-env": "^1.6.1",
-    "babel-preset-react": "^6.24.1",
-    "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.1.1",
+    "@babel/cli": "^7.4.3",
+    "@babel/core": "^7.4.3",
+    "@babel/plugin-proposal-class-properties": "^7.4.0",
+    "@babel/plugin-transform-modules-amd": "^7.2.0",
+    "@babel/preset-env": "^7.4.3",
+    "@babel/preset-react": "^7.0.0",
+    "babel-jest": "^24.7.1",
+    "enzyme": "^3.9.0",
+    "enzyme-adapter-react-16": "^1.12.1",
     "in-publish": "^2.0.0",
-    "jest": "^22.4.3",
-    "jest-cli": "^23.0.0-alpha.0",
+    "jest": "^24.7.1",
+    "jest-cli": "^24.7.1",
     "mkdirp": "^0.5.1",
-    "react": "^16.3.2",
-    "react-dom": "^16.3.2",
-    "rimraf": "^2.6.2"
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "rimraf": "^2.6.3"
   },
   "peerDependencies": {
     "react": "*"

src/single-spa-react.js

@@ -85,8 +85,8 @@ function mount(opts, props) {
 
     const domElementGetter = chooseDomElementGetter(opts, props)
 
-    if (!domElementGetter) {
-      throw new Error(`Cannot mount react application '${props.appName || props.name}' without a domElementGetter provided in either opts or props`)
+    if (typeof domElementGetter !== 'function') {
+      throw new Error(`single-spa-react: the domElementGetter for react application '${props.appName || props.name}' is not a function`)
     }
 
     const whenFinished = function() {
@@ -125,7 +125,7 @@ function update(opts, props) {
 function getRootDomEl(domElementGetter) {
   const el = domElementGetter();
   if (!el) {
-    throw new Error(`single-spa-react: domElementGetter function did not return a valid dom element`);
+    throw new Error(`single-spa-react: domElementGetter function did not return a valid dom element. Please pass a valid domElement or domElementGetter via opts or props`);
   }
 
   return el;
@@ -150,8 +150,28 @@ function chooseDomElementGetter(opts, props) {
     return () => props.domElement
   } else if (props.domElementGetter) {
     return props.domElementGetter
-  } else {
+  } else if (opts.domElementGetter) {
     return opts.domElementGetter
+  } else {
+    return defaultDomElementGetter(props)
+  }
+}
+
+function defaultDomElementGetter(props) {
+  const htmlId = props.appName || props.name
+  if (!htmlId) {
+    throw Error(`single-spa-react was not given an application name as a prop, so it can't make a unique dom element container for the react application`)
+  }
+
+  return function defaultDomEl() {
+    let domElement = document.getElementById(htmlId)
+    if (!domElement) {
+      domElement = document.createElement('div')
+      domElement.id = htmlId
+      document.body.appendChild(domElement)
+    }
+
+    return domElement
   }
 }
 

src/single-spa-react.test.js

@@ -297,5 +297,22 @@ describe('single-spa-react', () => {
           return expect(console.warn.mock.calls.length).toBe(1)
         })
     })
+
+    it(`provides a default implementation of domElementGetter if you don't provide one`, () => {
+      const props = {name: 'k_ruel'}
+      const lifecycles = singleSpaReact({
+        React,
+        ReactDOM,
+        rootComponent: function foo() {},
+        // No domElementGetter
+      })
+
+      return lifecycles
+        .bootstrap()
+        .then(() => lifecycles.mount(props))
+        .then(() => {
+          expect(document.getElementById('k_ruel'))
+        })
+    })
   })
 })