style tag append every time when we navigate api tab while using CDN link about scalar HOT 11 OPEN

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

from scalar.

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

from scalar.

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

#1724 (comment)

from scalar.

Thanks for bringing this up!

Related issue: #1340

from scalar.

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

from scalar.

@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

from scalar.

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

from scalar.

@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>

from scalar.

You can track the work here

#1750

from scalar.

@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?

from scalar.

not sure, @hanspagel what do yo think

from scalar.