reactive-python · Archmonger · Jul 1, 2022 · Jun 23, 2022 · Jun 23, 2022 · Jun 23, 2022
@@ -24,6 +24,12 @@ Types of changes are to be listed in this order
 
 -   Nothing (yet)
 
+## [1.1.0] - 2022-06-25
+
+### Added
+
+-   `static_css` component that can be used to defer loading CSS for your IDOM components until you need them.
+
 ## [1.0.0] - 2022-05-22
 
 ### Added
@@ -103,6 +109,7 @@ Types of changes are to be listed in this order
 -   Support for IDOM within the Django
 
 [unreleased]: https://github.com/idom-team/django-idom/compare/1.0.0...HEAD
+[1.1.0]: https://github.com/idom-team/django-idom/compare/1.0.0...1.1.0
 [1.0.0]: https://github.com/idom-team/django-idom/compare/0.0.5...1.0.0
 [0.0.5]: https://github.com/idom-team/django-idom/compare/0.0.4...0.0.5
 [0.0.4]: https://github.com/idom-team/django-idom/compare/0.0.3...0.0.4

@@ -19,8 +19,6 @@ Any Python web framework with Websockets can support IDOM. See below for what fr
 
 <!--intro-end-->
 
----
-
 # At a Glance
 
 ## `my_app/components.py`
@@ -65,8 +63,6 @@ Additonally, you can pass in keyword arguments into your component function. For
 
 <!--html-code-end-->
 
----
-
 # Resources
 
 <!--resources-start-->

@@ -0,0 +1,31 @@
+## Static CSS
+
+Allows you to defer loading a CSS stylesheet until a component begins rendering. This stylesheet 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_css
+
+@component
+def MyComponent():
+    return html.div(
+        static_css("/static/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 -->
+
+??? question "Can I load HTML using `html.link`?"
+
+??? question "What about external stylesheets?"
+
+??? 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.  -->
+
+## Static JavaScript
+
+<!-- In progress -->
@@ -18,7 +18,7 @@ def MyComponent():
     return html.div(my_websocket)
 ```
 
----
+
 
 ## Use Scope
 
@@ -34,7 +34,6 @@ def MyComponent():
     return html.div(my_scope)
 ```
 
----
 
 ## Use Location
 

@@ -6,3 +6,7 @@
 .md-header {
 	background-color: var(--md-footer-bg-color--dark);
 }
+
+.md-typeset :is(.admonition, details) {
+	margin: 1em 0;
+}
@@ -9,6 +9,7 @@ nav:
           - 4. Render Your View: getting-started/render-view.md
           - 5. Learn More: getting-started/learn-more.md
     - Exclusive Features:
+          - Components: features/components.md
           - Hooks: features/hooks.md
           - Template Tag: features/templatetag.md
     - Contribute:

@@ -1,7 +1,7 @@
-from . import hooks
+from . import components, hooks
 from .websocket.consumer import IdomWebsocket
 from .websocket.paths import IDOM_WEBSOCKET_PATH
 
 
-__version__ = "1.0.0"
-__all__ = ["IDOM_WEBSOCKET_PATH", "IdomWebsocket", "hooks"]
+__version__ = "1.1.0"
+__all__ = ["IDOM_WEBSOCKET_PATH", "IdomWebsocket", "hooks", "components"]
@@ -0,0 +1,41 @@
+import os
+
+from django.contrib.staticfiles.finders import find
+from idom import component, html
+
+from django_idom.config import IDOM_CACHE
+
+
+@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"))
+
+
+@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"))
+
+
+def _cached_static_contents(static_path: str, cache_name: str):
+    # Try to find the file within Django's static files
+    abs_path = find(static_path)
+    if not abs_path:
+        raise FileNotFoundError(
+            f"Could not find static file {static_path} within Django's static files."
+        )
+
+    # 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}"
+    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:
+            file_contents = static_file.read()
+        IDOM_CACHE.delete(cache_key)
+        IDOM_CACHE.set(
+            cache_key, file_contents, timeout=None, version=last_modified_time
+        )
+
+    return file_contents
-Original file line number
+Diff line change
@@ Expand Up / @@ -18,7 +18,7 @@ def MyComponent(): @@
         return html.div(my_websocket)
     ```
-    ---
     ## Use Scope
@@ Expand All / @@ -34,7 +34,6 @@ def MyComponent(): @@
         return html.div(my_scope)
     ```
-    ---
     ## Use Location
@@ Expand Down @@