Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow django_css and django_js to load only_once #194

Open
Archmonger opened this issue Oct 1, 2023 · 2 comments · May be fixed by #226
Open

Allow django_css and django_js to load only_once #194

Archmonger opened this issue Oct 1, 2023 · 2 comments · May be fixed by #226

Comments

@Archmonger
Copy link
Contributor

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)
@Archmonger
Copy link
Contributor Author

Archmonger commented 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:

<body>
    <div id="reactpy-stylesheets">
        <style id="path/to/stylesheet.css"> ... </style>
    </div>
</body>

@Archmonger
Copy link
Contributor Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant