From 66ddf74ab8f365eeba8d4e5f7e159613bd736e2c Mon Sep 17 00:00:00 2001 From: Farhan Date: Tue, 27 Oct 2026 20:14:32 +0000 Subject: [PATCH 1/5] Fix 404 audio in the browser JavaScript sound demo The demo hard-coded /vintage-button-sound-effect.mp3, but the docs site is mounted at /docs, so the file was never found and both play buttons were silent. Resolving the file with rx.asset prepends the frontend path and also shows readers the supported way to reference an asset. Claude-Session: https://claude.ai/code/session_01LwJUCUDZhZY71q8Azr37BQ --- docs/api-reference/browser_javascript.md | 7 ++++--- docs/app/news/+sound-demo-asset.bugfix.md | 1 + 2 files changed, 5 insertions(+), 3 deletions(-) create mode 100644 docs/app/news/+sound-demo-asset.bugfix.md diff --git a/docs/api-reference/browser_javascript.md b/docs/api-reference/browser_javascript.md index f3cd32dcc74..daa87f3c907 100644 --- a/docs/api-reference/browser_javascript.md +++ b/docs/api-reference/browser_javascript.md @@ -58,9 +58,10 @@ class SoundEffectState(rx.State): def sound_effect_demo(): return rx.hstack( - rx.script(""" - var button_sfx = new Audio("/vintage-button-sound-effect.mp3") - function playFromStart (sfx) {sfx.load(); sfx.play()}"""), + rx.script( + f'var button_sfx = new Audio("{rx.asset("vintage-button-sound-effect.mp3")}");' + " function playFromStart(sfx) {sfx.load(); sfx.play()}" + ), rx.button( "Play Immediately", on_click=rx.call_script("playFromStart(button_sfx)") ), diff --git a/docs/app/news/+sound-demo-asset.bugfix.md b/docs/app/news/+sound-demo-asset.bugfix.md new file mode 100644 index 00000000000..c8aa3133d6c --- /dev/null +++ b/docs/app/news/+sound-demo-asset.bugfix.md @@ -0,0 +1 @@ +Fix the inline-script sound demo on the browser JavaScript page, whose audio file resolved to a 404 because the site is served under `/docs`. From 1a4ea564912b262292c57b88838a429ec8114771 Mon Sep 17 00:00:00 2001 From: Farhan Date: Tue, 27 Oct 2026 20:20:48 +0000 Subject: [PATCH 2/5] Add regression test for the sound demo asset path Claude-Session: https://claude.ai/code/session_01LwJUCUDZhZY71q8Azr37BQ --- docs/app/tests/test_browser_javascript_demo.py | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 docs/app/tests/test_browser_javascript_demo.py diff --git a/docs/app/tests/test_browser_javascript_demo.py b/docs/app/tests/test_browser_javascript_demo.py new file mode 100644 index 00000000000..0199ee5379d --- /dev/null +++ b/docs/app/tests/test_browser_javascript_demo.py @@ -0,0 +1,14 @@ +"""Regression coverage for the browser JavaScript page's inline-script demo.""" + +from reflex_docs.docgen_pipeline import render_docgen_document + + +def test_sound_demo_audio_resolves_under_frontend_path(): + """The sound effect URL carries the /docs mount, so the file is not a 404.""" + body, _ = render_docgen_document( + "docs/api-reference/browser_javascript.md", + "../api-reference/browser_javascript.md", + ) + rendered = str(body) + assert "/docs/vintage-button-sound-effect.mp3" in rendered + assert 'new Audio("/vintage-button-sound-effect.mp3")' not in rendered From ad6d168de36ebb5a4505f5cf806d6ea3215147a9 Mon Sep 17 00:00:00 2001 From: Farhan Date: Tue, 27 Oct 2026 20:27:17 +0000 Subject: [PATCH 3/5] Anchor the sound demo test to the test file instead of the working directory Claude-Session: https://claude.ai/code/session_01LwJUCUDZhZY71q8Azr37BQ --- docs/app/tests/test_browser_javascript_demo.py | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/app/tests/test_browser_javascript_demo.py b/docs/app/tests/test_browser_javascript_demo.py index 0199ee5379d..2720537035c 100644 --- a/docs/app/tests/test_browser_javascript_demo.py +++ b/docs/app/tests/test_browser_javascript_demo.py @@ -1,13 +1,17 @@ """Regression coverage for the browser JavaScript page's inline-script demo.""" +from pathlib import Path + from reflex_docs.docgen_pipeline import render_docgen_document +DOCS = Path(__file__).resolve().parents[2] + def test_sound_demo_audio_resolves_under_frontend_path(): """The sound effect URL carries the /docs mount, so the file is not a 404.""" body, _ = render_docgen_document( "docs/api-reference/browser_javascript.md", - "../api-reference/browser_javascript.md", + str(DOCS / "api-reference" / "browser_javascript.md"), ) rendered = str(body) assert "/docs/vintage-button-sound-effect.mp3" in rendered From da25ff34c6ddc20f63c09e3335cf239fdbb7eed5 Mon Sep 17 00:00:00 2001 From: Farhan Date: Tue, 27 Oct 2026 20:29:11 +0000 Subject: [PATCH 4/5] Render the sound demo test under its own virtual path Rendering the page under the real path registered the demo's state class first, so test_docgen_double_eval's re-evaluation of the same page failed with a duplicate substate. Claude-Session: https://claude.ai/code/session_01LwJUCUDZhZY71q8Azr37BQ --- docs/app/tests/test_browser_javascript_demo.py | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/app/tests/test_browser_javascript_demo.py b/docs/app/tests/test_browser_javascript_demo.py index 2720537035c..561bc1178c8 100644 --- a/docs/app/tests/test_browser_javascript_demo.py +++ b/docs/app/tests/test_browser_javascript_demo.py @@ -9,8 +9,10 @@ def test_sound_demo_audio_resolves_under_frontend_path(): """The sound effect URL carries the /docs mount, so the file is not a 404.""" + # A test-specific virtual path keeps the demo's state class from colliding + # with the one test_docgen_double_eval registers for the real page. body, _ = render_docgen_document( - "docs/api-reference/browser_javascript.md", + "docs/api-reference/browser_javascript_sound_test.md", str(DOCS / "api-reference" / "browser_javascript.md"), ) rendered = str(body) From ba5fbd48f59f60d0137fc3bd728098dbb10c9bd9 Mon Sep 17 00:00:00 2001 From: Farhan Date: Tue, 27 Oct 2026 20:35:05 +0000 Subject: [PATCH 5/5] Isolate the sound demo test's state registration Render inside a RegistrationContext, as the tutorial tests do, so the demo's state class does not stay in the shared registries. Claude-Session: https://claude.ai/code/session_01LwJUCUDZhZY71q8Azr37BQ --- docs/app/tests/test_browser_javascript_demo.py | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/docs/app/tests/test_browser_javascript_demo.py b/docs/app/tests/test_browser_javascript_demo.py index 561bc1178c8..a24535f8aef 100644 --- a/docs/app/tests/test_browser_javascript_demo.py +++ b/docs/app/tests/test_browser_javascript_demo.py @@ -2,11 +2,24 @@ from pathlib import Path +import pytest +import reflex as rx +from reflex_base.registry import RegistrationContext + from reflex_docs.docgen_pipeline import render_docgen_document DOCS = Path(__file__).resolve().parents[2] +@pytest.fixture(autouse=True) +def isolated_registration(): + """Keep the demo's state class out of the shared registries other tests use.""" + with RegistrationContext( + _config=rx.Config(app_name="reflex_docs", frontend_path="/docs") + ): + yield + + def test_sound_demo_audio_resolves_under_frontend_path(): """The sound effect URL carries the /docs mount, so the file is not a 404.""" # A test-specific virtual path keeps the demo's state class from colliding