Repository navigation
Allow django_css and django_js to load only_once #194
Description
Current Situation
Currently, a user can add django_css to the body of a component that is rendered multiple times. This means that the CSS stylesheet will be duplicated for each component that is on the page.
Proposed Actions
Add an only_once = True argument to django_css and django_js. This will prevent CSS/JS duplication if the static file has already been loaded within the current component tree.
To detect whether a static file has been loaded, we should store whether a static_file_path has already been loaded within the ASGI scope. Here's some pseudocode on the concept:
# This should be initialized within the ReactPy WebSocket consumer
scope["reactpy_static_files"] = set()
# This check should occur within the `django_css` and `django_js` components
if static_file_path not in scope["reactpy_static_files"]:
return get_static_file_contents(static_file_path)
Activity
Archmonger commentedon Jan 11, 2024
Note to self: Storing the stylesheet within the scope will still result in duplicate stylesheets if multiple root components exist on the page.
Loading the stylesheets might need to be handled via JavaScript and somehow globally track whether a stylesheet is needed.
Or thinking in reverse, perhaps we should always load the stylesheet every time, but have duplicates get deleted via JavaScript?
Another idea is using a global JavaScript object to keep track of how many components want a certain stylesheet.
The stylesheet themselves would need to be stored in some master object, and would need to get unloaded after there are no component left that use the stylesheet.
On the page, this master object might look like this:
Archmonger commentedon Feb 21, 2024
Blocked on
use_effect's unmount method is not always called with dynamically rendered children reactpy#1198Archmonger commentedon Dec 25, 2024
Closing due to reasons described here: