Theme component containing a web component that modifies the post's URL anchor freezes the browser

Development

AI-generated summary

wwerner reported that a theme component using RapiDoc as a web component caused browser freezing when clicking operations that modified the URL anchor. The issue seemed linked to URL changes and a failed CSS selector, with the console showing a SyntaxError related to an invalid selector. wwerner later resolved the issue by identifying a loop in scheduleUpdate triggered by specific RapiDoc parameters, particularly show-curl-before-try, and adjusting the configuration to avoid the problematic scenario. The issue was ultimately unrelated to Discourse.

1

Hey folks,

I stole the nice mermaid theme component and modified it to include RapiDoc as a web component. It allows for rendering OpenAPI specs.

When clicking an operation in the web component, it sometimes freezes up the browser and I have a hard time figuring out what’s happening.
Only closing the tab helps. This does not happen with the same RapiDoc version and the same OpenAPI spec when embedded in other pages.

What it does is that it adds the operation’s id as an anchor to the URL,e.g. _https://my-site/t/my-topic/150#post-/clusters/-clusterID-/gateway. I guess there’s something listening to URL changes that fails in this case, maybe b/c the web component is not yet fully rendered and/or the ID cannot be found in the shadow DOM.

I saw the following on the console:

Promise Rejection: SyntaxError: '#main #put-/clusters/-clusterID-/appliances/-applianceID-/constraints, a[name=put-/clusters/-clusterID-/appliances/-applianceID-/constraints]' is not a valid selector.

The inserted element carrying the ID corresponding to the anchor in the URL looks like this.

<section 
  part="section-endpoint" 
  id="patch-/clusters/-clusterID-" 
  class="m-endpoint regular-font patch collapsed">

Does anyone have any pointers for me to get to the core of the issue?

Thanks a ton!

https://rapidocweb.com/
https://github.com/wwerner/discourse-rapidoc-theme-component

2

Answering my own question: Seems it had nothing to do with Discourse after all.
A certain combination of params sent the web component into an scheduleUpdate loop.
Sorry for the noise.

For reference, here’s what I did:

  • Used a non-minified version of rapidoc in the theme component
  • Used the debugger while the site was stuck
  • Looked at the call-stack & found the culprit triggering repeated updates (show-curl-before-try)
  • Changed rapidoc’s params not to trigger this scenario anymore

If you feel this topic doesn’t add to the discussion/is irrelevant, feel free to remove.

Thanks anyway and sorry for the noise again