Topbar plugin is only included in Standalone

Q&A

• Method of installation: npm
• Swagger-UI version: 3.21.0

Content & configuration

Swagger-UI configuration options:

        SwaggerUI({
            urls: [/* ... */],
            dom_id: '#swagger-ui',
            deepLinking: true,
            presets: [
                SwaggerUI.presets.apis,
                SwaggerUIStandalonePreset // Brings in TopbarPlugin
            ],
            plugins: [/* ... */],
            layout: 'CustomLayoutUsingTopbar',
            validatorUrl: null,
            displayOperationId: true,
            filter: true,
            operationsSorter: 'alpha',
            defaultModelsExpandDepth: 0
        });

Describe the bug you're encountering

The Topbar plugin is not available in the plugins property of the Swagger UI object. It seems to live in its own directory and only gets imported in the standalone preset.

To reproduce...

Steps to reproduce the behavior:

1. In your Swagger UI configuration, import swagger-ui as SwaggerUI.
2. Add SwaggerUI.plugins.Topbar to your plugin configuration.
3. Use a layout that includes Topbar.
4. Load your Swagger UI website.

Expected behavior

The website renders, topbar and all.

Actual behavior

The website does not render and there's an error in the console:

Could not find component Topbar

Additional context or thoughts

As you can see from my configuration, I can work around this by including the Standalone preset. However, that forces me to serve a whole bunch of code that does not need to go to the browser at all.

Start from the SwaggerUI.plugins.Topbar entry point and the SwaggerUIStandalonePreset import described in the report. Check how the Topbar plugin is exposed outside the standalone preset, then reproduce the configuration with a custom layout. Done means the site renders with Topbar available through the plugins property without requiring the standalone preset.