reactive-python · Archmonger · Jul 1, 2022 · Jun 23, 2022 · Jun 23, 2022 · Jun 23, 2022
@@ -0,0 +1,11 @@
+# Description
+
+A summary of the changes.
+
+# Checklist:
+
+Please update this checklist as you complete each item:
+
+-   [ ] Tests have been included for all bug fixes or added functionality.
+-   [ ] The `changelog.rst` has been updated with any significant changes, if necessary.
+-   [ ] GitHub Issues which may be closed by this PR have been linked.
@@ -28,7 +28,7 @@ Types of changes are to be listed in this order
 
 ### Added
 
--   `static_css` component that can be used to defer loading CSS for your IDOM components until you need them.
+-   `static_css` and `static_js` components to defer loading CSS & JS files until needed.
 
 ## [1.0.0] - 2022-05-22
 

@@ -9,23 +9,117 @@ from django_idom.components import static_css
 @component
 def MyComponent():
     return html.div(
-        static_css("/static/css/buttons.css"),
-        html.button("My Button!")
+        static_css("css/buttons.css"),
+        html.button("My Button!"),
     )
 ```
 
 ??? question "Should I put `static_css` at the top of my component?"
 
-<!-- Yes, to ensure proper load order -->
+    Yes, if the stylesheet is contains styling for your component.
 
-??? question "Can I load HTML using `html.link`?"
+??? question "Can I load static CSS using `html.link` instead?"
 
-??? question "What about external stylesheets?"
+    While you can load stylesheets with `html.link`, keep in mind that loading this way **does not** ensure load order. Thus, your stylesheet will be loaded after your component is displayed. This would likely cause some visual jankiness, so use this at your own discretion.
+
+    Here's an example on what you should typically avoid doing:
+
+    ```python
+    from idom import component, html
+    from django_idom.components import static_js
+    from django.templatetags.static import static
+
+    @component
+    def MyComponent():
+        return html.div(
+            html.link({"rel": "stylesheet", "href": static("css/buttons.css")}),
+            html.button("My Button!"),
+        )
+    ```
+
+??? question "How do I load external CSS?"
+
+    `static_css` can only be used with local static files.
+
+    For external CSS, substitute `static_css` with `html.link`.
+
+    ```python
+    from idom import component, html
+    from django_idom.components import static_js
+
+    @component
+    def MyComponent():
+        return html.div(
+            html.link({"rel": "stylesheet", "href": "https://example.com/external-styles.css"}),
+            html.button("My Button!"),
+        )
+    ```
 
 ??? question "Why not load my CSS in `#!html <head>`?"
 
-<!-- Generally, Django stylesheets are loaded in your `#!html <head>` using the `#!jinja {% load static %}` template tag.  -->
+    Traditionally, stylesheets are loaded in your `#!html <head>` using the `#!jinja {% load static %}` template tag.
+
+    To help improve webpage load times, you can use the `static_css` component to defer loading your stylesheet until it is needed.
 
 ## Static JavaScript
 
-<!-- In progress -->
+Allows you to defer loading JavaScript until a component begins rendering. This JavaScript must be stored within [Django's static files](https://docs.djangoproject.com/en/dev/howto/static-files/).
+
+```python title="components.py"
+from idom import component, html
+from django_idom.components import static_js
+
+@component
+def MyComponent():
+    return html.div(
+        html.button("My Button!"),
+        static_js("js/scripts.js"),
+    )
+```
+
+??? question "Should I put `static_js` at the bottom of my component?"
+
+    Yes, if your scripts are reliant on the contents of the component.
+
+??? question "Can I load static JavaScript using `html.script` instead?"
+
+    While you can load JavaScript with `html.script`, keep in mind that loading this way **does not** ensure load order. Thus, your JavaScript will likely be loaded at an arbitrary time after your component is displayed.
+
+    Here's an example on what you should typically avoid doing:
+
+    ```python
+    from idom import component, html
+    from django_idom.components import static_js
+    from django.templatetags.static import static
+
+    @component
+    def MyComponent():
+        return html.div(
+            html.script({"src": static("js/scripts.js")}),
+            html.button("My Button!"),
+        )
+    ```
+
+??? question "How do I load external JS?"
+
+    `static_js` can only be used with local static files.
+
+    For external JavaScript, substitute `static_js` with `html.script`.
+
+    ```python
+    from idom import component, html
+    from django_idom.components import static_js
+
+    @component
+    def MyComponent():
+        return html.div(
+            html.script({"src": static("https://example.com/external-scripts.js")}),
+            html.button("My Button!"),
+        )
+    ```
+
+??? question "Why not load my JS in `#!html <head>`?"
+
+    Traditionally, JavaScript is loaded in your `#!html <head>` using the `#!jinja {% load static %}` template tag.
+
+    To help improve webpage load times, you can use the `static_js` component to defer loading your JavaScript until it is needed.
@@ -1,3 +1,3 @@
 django
-selenium
+selenium <= 4.2.0
 twisted
@@ -9,16 +9,16 @@
 @component
 def static_css(static_path: str):
     """Fetches a CSS static file for use within IDOM. This allows for deferred CSS loading."""
-    return html.style(_cached_static_contents(static_path, "css_contents"))
+    return html.style(_cached_static_contents(static_path))
 
 
 @component
 def static_js(static_path: str):
     """Fetches a JS static file for use within IDOM. This allows for deferred JS loading."""
-    return html.script(_cached_static_contents(static_path, "js_contents"))
+    return html.script(_cached_static_contents(static_path))
 
 
-def _cached_static_contents(static_path: str, cache_name: str):
+def _cached_static_contents(static_path: str):
     # Try to find the file within Django's static files
     abs_path = find(static_path)
     if not abs_path:
@@ -28,7 +28,7 @@ def _cached_static_contents(static_path: str, cache_name: str):
 
     # Fetch the file from cache, if available
     last_modified_time = os.stat(abs_path).st_mtime
-    cache_key = f"django_idom:{cache_name}:{static_path}"
+    cache_key = f"django_idom:static_contents:{static_path}"
     file_contents = IDOM_CACHE.get(cache_key, version=last_modified_time)
     if file_contents is None:
         with open(abs_path, encoding="utf-8") as static_file:

@@ -71,3 +71,25 @@ def UseLocation():
         f"UseLocation: {location}",
         idom.html.hr(),
     )
+
+
+@idom.component
+def StaticCSS():
+    return idom.html.div(
+        {"id": "static-css"},
+        django_idom.components.static_css("static-css-test.css"),
+        idom.html.div({"style": {"display": "inline"}}, "StaticCSS: "),
+        idom.html.button("This text should be blue."),
+        idom.html.hr(),
+    )
+
+
+@idom.component
+def StaticJS():
+    success = False
+    return idom.html.div(
+        {"id": "static-js", "data-success": success},
+        f"StaticJS: {success}",
+        django_idom.components.static_js("static-js-test.js"),
+        idom.html.hr(),
+    )
@@ -0,0 +1,3 @@
+#static-css button {
+    color: rgba(0, 0, 255, 1);
+}
@@ -0,0 +1,3 @@
+let el = document.body.querySelector("#static-js");
+el.textContent = "StaticJS: True";
+el.dataset.success = "true";
@@ -19,6 +19,8 @@ <h1>IDOM Test Page</h1>
   <div>{% component "test_app.components.UseWebsocket" %}</div>
   <div>{% component "test_app.components.UseScope" %}</div>
   <div>{% component "test_app.components.UseLocation" %}</div>
+  <div>{% component "test_app.components.StaticCSS" %}</div>
+  <div>{% component "test_app.components.StaticJS" %}</div>
 </body>
 
 </html>
@@ -59,6 +59,16 @@ def test_use_location(self):
             element = self.driver.find_element_by_id("use-location")
             self.assertEqual(element.get_attribute("data-success"), "true")
 
+        def test_static_css(self):
+            element = self.driver.find_element_by_css_selector("#static-css button")
+            self.assertEqual(
+                element.value_of_css_property("color"), "rgba(0, 0, 255, 1)"
+            )
+
+        def test_static_js(self):
+            element = self.driver.find_element_by_id("static-js")
+            self.assertEqual(element.get_attribute("data-success"), "true")
+
 
 def make_driver(page_load_timeout, implicit_wait_timeout):
     options = webdriver.ChromeOptions()