From 45257deae45dfd89e0d9ebe9a84c4b0406f607c6 Mon Sep 17 00:00:00 2001
From: Eugene Toder <eltoder@users.noreply.github.com>
Date: Mon, 22 Jul 2024 19:35:42 -0400
Subject: [PATCH] Pass ReDoc UI Parameters using the JavaScript API instead of
 HTML Tags (#25)

Pass ReDoc UI Parameters using the JavaScript API instead of HTML Tags
---
 src/openapipages/redoc.py | 24 +++++++++++-------------
 tests/test_redoc.py       |  3 ++-
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/openapipages/redoc.py b/src/openapipages/redoc.py
index a005423..81c5c63 100644
--- a/src/openapipages/redoc.py
+++ b/src/openapipages/redoc.py
@@ -19,7 +19,7 @@
     "theme": {
         "typography": {"code": {"wrap": True}},
     },
-    "hide-download-button": False,
+    "hideDownloadButton": False,
 }
 
 
@@ -35,7 +35,7 @@ class ReDoc(Base):
             It is normally set to a CDN URL.
             """
         ),
-    ] = "https://cdn.jsdelivr.net/npm/redoc@next/bundles/redoc.standalone.js"
+    ] = "https://cdn.jsdelivr.net/npm/redoc@2/bundles/redoc.standalone.js"
     with_google_fonts: Annotated[
         bool,
         Doc(
@@ -64,15 +64,6 @@ def render(self) -> str:
         current_redoc_ui_parameters = default_parameters.copy()
         current_redoc_ui_parameters.update(self.ui_parameters or {})
 
-        def add_redoc_ui_parameters() -> str:
-            _props = ""
-            for key, value in current_redoc_ui_parameters.items():
-                if value:
-                    _props += f"{key}='{json.dumps(value)}' "
-                else:
-                    _props += f"{key} "
-            return _props
-
         html_template = self.get_html_template()
         return html_template.format(
             title=self.title,
@@ -82,7 +73,7 @@ def add_redoc_ui_parameters() -> str:
             head_js_str=self.get_head_js_str(),
             tail_js_str=self.get_tail_js_str(),
             google_fonts_str=google_fonts_str,
-            redoc_ui_parameters=add_redoc_ui_parameters(),
+            redoc_ui_parameters=json.dumps(current_redoc_ui_parameters, indent=2),
         )
 
     def get_html_template(self) -> str:
@@ -109,8 +100,15 @@ def get_html_template(self) -> str:
                 <noscript>
                     ReDoc requires Javascript to function. Please enable it to browse the documentation.
                 </noscript>
-                <redoc spec-url="{openapi_url}" {redoc_ui_parameters}></redoc>
+                <div id="redoc-container"></div>
                 {tail_js_str}
+                <script>
+                  Redoc.init(
+                    "{openapi_url}",
+                    {redoc_ui_parameters},
+                    document.getElementById("redoc-container")
+                  )
+                </script>
             </body>
         </html>
         """
diff --git a/tests/test_redoc.py b/tests/test_redoc.py
index 79954ee..0ef3301 100644
--- a/tests/test_redoc.py
+++ b/tests/test_redoc.py
@@ -11,7 +11,8 @@ async def test_redoc_plain() -> None:
         response = await client.get("/redoc-plain")
         assert response.status_code == 200, response.text
         assert response.headers["content-type"] == "text/html; charset=utf-8"
-        assert "redoc@next" in response.text
+        assert "redoc@2" in response.text
+        assert '"hideDownloadButton": false' in response.text
 
 
 @pytest.mark.asyncio()