Merge pull request #3501 from oysteinsigholt/master

Fixes #3492 - Add domNode parameter

Author: shockey

README.md

@@ -138,6 +138,7 @@ urls.primaryName | When using `urls`, you can use this subparameter. If the valu
 spec | A JSON object describing the OpenAPI Specification. When used, the `url` parameter will not be parsed. This is useful for testing manually-generated specifications without hosting them.
 validatorUrl | By default, Swagger-UI attempts to validate specs against swagger.io's online validator. You can use this parameter to set a different validator URL, for example for locally deployed validators ([Validator Badge](https://github.com/swagger-api/validator-badge)). Setting it to `null` will disable validation.
 dom_id | The id of a dom element inside which SwaggerUi will put the user interface for swagger.
+domNode | The HTML DOM element inside which SwaggerUi will put the user interface for swagger. Overrides `dom_id`.
 oauth2RedirectUrl | OAuth redirect URL
 tagsSorter | Apply a sort to the tag list of each API. It can be 'alpha' (sort by paths alphanumerically) or a function (see [Array.prototype.sort()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) to learn how to write a sort function). Two tag name strings are passed to the sorter for each pass. Default is the order determined by Swagger-UI.
 operationsSorter | Apply a sort to the operation list of each API. It can be 'alpha' (sort by paths alphanumerically), 'method' (sort by HTTP method) or a function (see Array.prototype.sort() to know how sort function works). Default is the order returned by the server unchanged.

src/core/index.js

@@ -23,6 +23,7 @@ module.exports = function SwaggerUI(opts) {
   const defaults = {
     // Some general settings, that we floated to the top
     dom_id: null,
+    domNode: null,
     spec: {},
     url: "",
     urls: null,
@@ -99,6 +100,12 @@ module.exports = function SwaggerUI(opts) {
 
     let localConfig = system.specSelectors.getLocalConfig ? system.specSelectors.getLocalConfig() : {}
     let mergedConfig = deepExtend({}, localConfig, constructorConfig, fetchedConfig || {}, queryConfig)
+
+    // deep extend mangles domNode, we need to set it manually
+    if(opts.domNode) {
+      mergedConfig.domNode = opts.domNode
+    }
+
     store.setConfigs(mergedConfig)
 
     if (fetchedConfig !== null) {
@@ -112,10 +119,13 @@ module.exports = function SwaggerUI(opts) {
       }
     }
 
-    if(mergedConfig.dom_id) {
-      system.render(mergedConfig.dom_id, "App")
+    if(mergedConfig.domNode) {
+      system.render(mergedConfig.domNode, "App")
+    } else if(mergedConfig.dom_id) {
+      let domNode = document.querySelector(mergedConfig.dom_id)
+      system.render(domNode, "App")
     } else {
-      console.error("Skipped rendering: no `dom_id` was specified")
+      console.error("Skipped rendering: no `dom_id` or `domNode` was specified")
     }
 
     return system

src/core/plugins/view/root-injects.js

@@ -58,8 +58,7 @@ export const makeMappedContainer = (getSystem, getStore, memGetComponent, getCom
 
 }
 
-export const render = (getSystem, getStore, getComponent, getComponents, dom) => {
-  let domNode = document.querySelector(dom)
+export const render = (getSystem, getStore, getComponent, getComponents, domNode) => {
   let App = (getComponent(getSystem, getStore, getComponents, "App", "root"))
   ReactDOM.render(( <App/> ), domNode)
 }