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.

Sign up for GitHub

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

Jump to bottom

Allow django_css and django_js to load only_once #194

Closed
Archmonger opened this issue Oct 1, 2023 · 3 comments
Closed

Allow django_css and django_js to load only_once #194

Archmonger opened this issue Oct 1, 2023 · 3 comments
Labels
blocked complexity: 1 (high) complexity: 2 (medium) type: feature

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 Archmonger mentioned this issue Jan 11, 2024
Open
@Archmonger
Copy link
Contributor Author

Archmonger commented Jan 11, 2024 •
edited
Loading

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 Archmonger linked a pull request Feb 13, 2024 that will close this issue
Add Django CSS/JS de-duplication #226
Closed
4 tasks
@Archmonger
Copy link
Contributor Author

Blocked on

@Archmonger
Copy link
Contributor Author

Closing due to reasons described here:

@Archmonger Archmonger closed this as not planned Won't fix, can't repro, duplicate, stale Dec 25, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
blocked complexity: 1 (high) complexity: 2 (medium) type: feature
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add Django CSS/JS de-duplication Archmonger/reactpy-django
1 participant
@Archmonger