style tag append every time when we navigate api tab while using CDN link

[jatingajera31]

What happens?

I am using this scaler CDN link : https://cdn.jsdelivr.net/npm/@scalar/[email protected]
when i navigate other tab and back to swagger api tab every time new style tag is appending and it will impact on performance and speed

What did you expect to happen?

The internal style append only once.

How can we reproduce the issue?

1 Setup CDN in Angular project.
2 Setup API documentation page in particular url.
3 Navigate to another page.
4 Go to the existing page on which we loaded the API documentation via CDN link
5 See head tag style in DOM via inspect element in browser

Swagger/OpenAPI Example

No response

[hanspagel]

Thanks for bringing this up!

Related issue: #1340

[jatingajera31]

@hanspagel I check #1340 issue but still I am getting problem.
I already add screenshot.

[hanspagel]

Sure! Just wanted to cross link both issues.

We’re using vite-plugin-css-injected-by-js to inject the styles. I think we could use styleId and a custom injectCode function to make sure the style tag is only added once:

https://github.com/marco-prontera/vite-plugin-css-injected-by-js?tab=readme-ov-file#injectcode-function

[amritk]

@hanspagel @jatingajera31 there is a fix possible for this now with the new events. Just place the script tag outside of the page so it only gets loaded once, then you can trigger the custom event when you navigate to the page to reload the references

document.dispatchEvent(new Event('scalar:reload-references'))

but yes we should also only load the js and styles once

[amritk]

@jatingajera31 if you want to put up a minimal reproduction or just your code in general I can try and help

[jatingajera31]

@amritk here is the code
angular component file

`import { AfterViewInit, Component, OnDestroy, OnInit, Renderer2 } from '@angular/core';

@component({
selector: 'app-api-list',
standalone: true,
imports: [],
templateUrl: './api-list.component.html',
styleUrls: ['./api-list.component.scss'],
})
export class ApiListComponent implements OnInit, AfterViewInit, OnDestroy {
constructor() { }

ngOnInit(): void {
this.loadScript('https://cdn.jsdelivr.net/npm/@scalar/api-reference').then((res: any) => {
console.log('res:', res);
}).catch(error => {
console.error('Error loading script:', error);
});
}

ngOnDestroy(): void {
}

ngAfterViewInit(): void {
}

private loadScript(url: string): Promise {
return new Promise((resolve, reject) => {
const scriptElement = document.createElement('script');
scriptElement.src = url;
scriptElement.onload = () => resolve();
scriptElement.onerror = (error) => reject(error);
document.body.appendChild(scriptElement);
});
}
}`

html code file
<div id="api-reference" data-url="https://petstore3.swagger.io/api/v3/openapi.json" data-proxy-url="https://api.scalar.com/request-proxy"></div>

[amritk]

Alright I tested it and you are correct, even with the new events we still can't get it working in angular due to attaching the references to the body instead of the dom element inside the view. I think we should just make an angular integration at some point. I will open a ticket

[amritk]

You can track the work here

#1750

[jatingajera31]

@amritk Thank you for ticket.
I have fix that issue by removing (text/css) appending node from cdn link. I use this ( n.parentNode.removeChild(n))

Is this okay?

[amritk]

not sure, @hanspagel what do yo think

[hanspagel]

Great you‘ve found a workaround! 🙌 As a general solution for our published version I’d still take the approach mentioned above:

#1724 (comment)