Passing dom element to SwaggerUIBundle

[oysteinsigholt]

Hi!

I am integrating Swagger Ui with a developer portal using Barba.js and having some issues instantiating Swagger Ui.

I want to start instantiating Swagger Ui as soon as a a new page is loaded, and my issue arises from the fact that the old page is still in the DOM.

As of now I have wait until the old DOM is unloaded before ininstantiating Swagger Ui because there is two divs with the same id during the transition, and since SwaggerUIBundle accepts only a dom_id i have found no reliable way of selecting the correct one without modifying its attributes.

Is it possible to pass a DOM element to SwaggerUIBundle instead of an id of one to avoid this issue?

[shockey]

Hey @oysteinsigholt,

we don't currently have any plans to implement passing an element reference directly. It would be techincally possible though - internally, we resolve the dom_id to an element before feeding it to ReactDOM here. A PR that implements element referencing directly would be welcome.

Please note that you're violating the HTML specification by having two elements with the same ID on the page at once:

When specified on HTML elements, the id attribute value must be unique amongst all the IDs in the [document] and must contain at least one character.

citation: (html.spec.whatwg.org)

I'm not familiar with Barba.js, but it may be worth diving into that library's documentation to make sure you're orchestrating the transition correctly.

Depending on how your application is architected, it may be faster/easier to retain the same instance of Swagger-UI in the DOM, but programmatically change the spec content, instead of tearing down an instance and instantiating another.

Let me know if any of this helps you get unstuck!

[oysteinsigholt]

Thanks for the quick reply!

Sadly, the violation of the HTML spec is inevitable, as Barba.js must have both the previous and the next page in the DOM briefly during a transition.

I have suggested a change in PR #3501 that beats my current solution of giving each element an identifier that querySelector can use to uniquely identify them.

[shockey]

@oysteinsigholt - wanted to let you know that I'll be closing this issue and merging your PR.

Thanks for the contribution!