From 51a473a9cf658a2efaf944046493ffdd5ba9d36c Mon Sep 17 00:00:00 2001 From: Archmonger <16909269+Archmonger@users.noreply.github.com> Date: Thu, 23 Jun 2022 02:45:50 -0700 Subject: [PATCH 01/35] functional static_css implementation --- src/django_idom/__init__.py | 4 ++-- src/django_idom/components.py | 31 +++++++++++++++++++++++++++++++ 2 files changed, 33 insertions(+), 2 deletions(-) create mode 100644 src/django_idom/components.py diff --git a/src/django_idom/__init__.py b/src/django_idom/__init__.py index af2dec38..7bf01173 100644 --- a/src/django_idom/__init__.py +++ b/src/django_idom/__init__.py @@ -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"] +__all__ = ["IDOM_WEBSOCKET_PATH", "IdomWebsocket", "hooks", "components"] diff --git a/src/django_idom/components.py b/src/django_idom/components.py new file mode 100644 index 00000000..e4a68d10 --- /dev/null +++ b/src/django_idom/components.py @@ -0,0 +1,31 @@ +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): + """Returns a Django CSS static file CSS stylesheet within a style tag. + This helps avoid the need to wait for CSS files to load.""" + # 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:css_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: + file_contents = static_file.read() + IDOM_CACHE.delete(cache_key) + IDOM_CACHE.set( + cache_key, file_contents, timeout=None, version=last_modified_time + ) + + # Return the file contents as a style tag + return html.style(file_contents) From b1a2bcf452129d2394cab87b397870ff0793a69e Mon Sep 17 00:00:00 2001 From: Archmonger <16909269+Archmonger@users.noreply.github.com> Date: Thu, 23 Jun 2022 02:56:07 -0700 Subject: [PATCH 02/35] Bump Django IDOM version --- CHANGELOG.md | 7 +++++++ src/django_idom/__init__.py | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6a696e82..dc80a74a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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 diff --git a/src/django_idom/__init__.py b/src/django_idom/__init__.py index 7bf01173..857f92e1 100644 --- a/src/django_idom/__init__.py +++ b/src/django_idom/__init__.py @@ -3,5 +3,5 @@ from .websocket.paths import IDOM_WEBSOCKET_PATH -__version__ = "1.0.0" +__version__ = "1.1.0" __all__ = ["IDOM_WEBSOCKET_PATH", "IdomWebsocket", "hooks", "components"] From 6b82359f8c4e3ea16f9650910f048be9947ff3d1 Mon Sep 17 00:00:00 2001 From: Archmonger <16909269+Archmonger@users.noreply.github.com> Date: Thu, 23 Jun 2022 02:57:14 -0700 Subject: [PATCH 03/35] format components.py --- src/django_idom/components.py | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/django_idom/components.py b/src/django_idom/components.py index e4a68d10..b76246fc 100644 --- a/src/django_idom/components.py +++ b/src/django_idom/components.py @@ -13,7 +13,9 @@ def static_css(static_path: 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.") + 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 From 551b6f1ca5f1805d3b718a553c70da23490532f2 Mon Sep 17 00:00:00 2001 From: Archmonger <16909269+Archmonger@users.noreply.github.com> Date: Thu, 23 Jun 2022 03:26:28 -0700 Subject: [PATCH 04/35] rudimentary docs --- docs/features/components.md | 31 +++++++++++++++++++++++++++++++ mkdocs.yml | 1 + 2 files changed, 32 insertions(+) create mode 100644 docs/features/components.md diff --git a/docs/features/components.md b/docs/features/components.md new file mode 100644 index 00000000..1ae683d6 --- /dev/null +++ b/docs/features/components.md @@ -0,0 +1,31 @@ +## Static CSS + +Allows you to defer loading a CSS stylesheet until a component's 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?" + + + +??? question "Can I load HTML using `html.link`?" + +??? question "What about external stylesheets?" + +??? question "Why not load my CSS in `#!html `?" + + + +## Static JavaScript + + diff --git a/mkdocs.yml b/mkdocs.yml index 1cfff5ab..50cef329 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -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: From d5b0d9cd7c78398cf450ad521e2a00b806d166a6 Mon Sep 17 00:00:00 2001 From: Archmonger <16909269+Archmonger@users.noreply.github.com> Date: Thu, 23 Jun 2022 03:29:35 -0700 Subject: [PATCH 05/35] fix docstring --- src/django_idom/components.py | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/django_idom/components.py b/src/django_idom/components.py index b76246fc..977ac1a8 100644 --- a/src/django_idom/components.py +++ b/src/django_idom/components.py @@ -8,8 +8,7 @@ @component def static_css(static_path: str): - """Returns a Django CSS static file CSS stylesheet within a style tag. - This helps avoid the need to wait for CSS files to load.""" + """Fetches a CSS static file for use within IDOM. This allows for deferred CSS loading.""" # Try to find the file within Django's static files abs_path = find(static_path) if not abs_path: From 11b3e42aa40ce6c5d3207d7782ece262c0e016d8 Mon Sep 17 00:00:00 2001 From: Archmonger <16909269+Archmonger@users.noreply.github.com> Date: Thu, 23 Jun 2022 04:16:18 -0700 Subject: [PATCH 06/35] clean up readme --- README.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/README.md b/README.md index fe0165df..5fcde22f 100644 --- a/README.md +++ b/README.md @@ -19,8 +19,6 @@ Any Python web framework with Websockets can support IDOM. See below for what fr ---- - # At a Glance ## `my_app/components.py` @@ -65,8 +63,6 @@ Additonally, you can pass in keyword arguments into your component function. For ---- - # Resources From e9339fa6cec84438bb2abe4f943cf839cf96f2ed Mon Sep 17 00:00:00 2001 From: Archmonger <16909269+Archmonger@users.noreply.github.com> Date: Thu, 23 Jun 2022 04:16:28 -0700 Subject: [PATCH 07/35] static_js --- src/django_idom/components.py | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/src/django_idom/components.py b/src/django_idom/components.py index 977ac1a8..17800372 100644 --- a/src/django_idom/components.py +++ b/src/django_idom/components.py @@ -9,6 +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")) + + +@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: @@ -18,7 +28,7 @@ def static_css(static_path: str): # Fetch the file from cache, if available last_modified_time = os.stat(abs_path).st_mtime - cache_key = f"django_idom:css_contents:{static_path}" + 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: @@ -28,5 +38,4 @@ def static_css(static_path: str): cache_key, file_contents, timeout=None, version=last_modified_time ) - # Return the file contents as a style tag - return html.style(file_contents) + return file_contents From 836fe718a1824b99bc45f33f2078c65427622e52 Mon Sep 17 00:00:00 2001 From: Archmonger <16909269+Archmonger@users.noreply.github.com> Date: Thu, 23 Jun 2022 04:16:49 -0700 Subject: [PATCH 08/35] minor docs styling tweaks --- docs/features/hooks.md | 3 +-- docs/stylesheets/extra.css | 4 ++++ 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/docs/features/hooks.md b/docs/features/hooks.md index 64721d31..e1cc4d04 100644 --- a/docs/features/hooks.md +++ b/docs/features/hooks.md @@ -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 diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css index 13121f71..2f8c7dab 100644 --- a/docs/stylesheets/extra.css +++ b/docs/stylesheets/extra.css @@ -6,3 +6,7 @@ .md-header { background-color: var(--md-footer-bg-color--dark); } + +.md-typeset :is(.admonition, details) { + margin: 1em 0; +} From 0ee94021a8e46aded023e63539bca996f16ad634 Mon Sep 17 00:00:00 2001 From: Mark <16909269+Archmonger@users.noreply.github.com> Date: Thu, 23 Jun 2022 15:14:35 -0700 Subject: [PATCH 09/35] Update docs/features/components.md Co-authored-by: Ryan Morshead --- docs/features/components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/features/components.md b/docs/features/components.md index 1ae683d6..3d9208ca 100644 --- a/docs/features/components.md +++ b/docs/features/components.md @@ -1,6 +1,6 @@ ## Static CSS -Allows you to defer loading a CSS stylesheet until a component's begins rendering. This stylesheet must be stored within [Django's static files](https://docs.djangoproject.com/en/dev/howto/static-files/). +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 4cc86aa655350a08b359e158387da4a4b6842867 Mon Sep 17 00:00:00 2001 From: Archmonger <16909269+Archmonger@users.noreply.github.com> Date: Thu, 23 Jun 2022 16:28:14 -0700 Subject: [PATCH 10/35] flesh out the docs --- docs/features/components.md | 108 +++++++++++++++++++++++++++++++++--- 1 file changed, 101 insertions(+), 7 deletions(-) diff --git a/docs/features/components.md b/docs/features/components.md index 3d9208ca..52315e42 100644 --- a/docs/features/components.md +++ b/docs/features/components.md @@ -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, if the stylesheet is contains styling for your component. -??? question "Can I load HTML using `html.link`?" +??? question "Can I load CSS using `html.link` instead?" -??? question "What about external stylesheets?" + While you can load a with `html.link`, keep in mind that loading this way **does not** ensure load order. Thus, your stylesheet will likely be loaded after your component is displayed. + + Here's an example on this use case: + + ```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` as such: + + ```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 `?" - + Traditionally, stylesheets are loaded in your `#!html ` using the `#!jinja {% load static %}` template tag. + + Instead, you can use the `static_css` component to help improve webpage load times to deferring loading stylesheets until they are needed. ## Static JavaScript - +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 +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 JavaScript using `html.script` instead?" + + While you can load 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 this use case: + + ```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` as such: + + ```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 `?" + + Traditionally, JavaScript is loaded in your `#!html ` using the `#!jinja {% load static %}` template tag. + + Instead, you can use the `static_js` component to help improve webpage load times to deferring loading scripts until they are needed. From 526bc8f9b0cea4adb8804de8d8a396149c3399e9 Mon Sep 17 00:00:00 2001 From: Archmonger <16909269+Archmonger@users.noreply.github.com> Date: Thu, 23 Jun 2022 16:28:48 -0700 Subject: [PATCH 11/35] simplify _cached_static_contents --- src/django_idom/components.py | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/django_idom/components.py b/src/django_idom/components.py index 17800372..efe32a0e 100644 --- a/src/django_idom/components.py +++ b/src/django_idom/components.py @@ -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: From 6b0dfb8a0512d5c80df557ac773ec7df61e0997a Mon Sep 17 00:00:00 2001 From: Archmonger <16909269+Archmonger@users.noreply.github.com> Date: Thu, 23 Jun 2022 16:29:06 -0700 Subject: [PATCH 12/35] add static js to changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index dc80a74a..5becd123 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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 you need them. ## [1.0.0] - 2022-05-22 From 70d78fcf7214852354aae51e297eb23d28f5d6cc Mon Sep 17 00:00:00 2001 From: Archmonger <16909269+Archmonger@users.noreply.github.com> Date: Thu, 23 Jun 2022 16:30:37 -0700 Subject: [PATCH 13/35] clean up changelog entry --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5becd123..315dc78a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -28,7 +28,7 @@ Types of changes are to be listed in this order ### Added -- `static_css` and `static_js` components to defer loading CSS & JS files until you need them. +- `static_css` and `static_js` components to defer loading CSS & JS files until needed. ## [1.0.0] - 2022-05-22 From 0ffb5a58847e2feacb35b8242af2893da9e71bbf Mon Sep 17 00:00:00 2001 From: Archmonger <16909269+Archmonger@users.noreply.github.com> Date: Thu, 23 Jun 2022 16:48:09 -0700 Subject: [PATCH 14/35] Selenium 4.3 compatibility --- tests/test_app/tests/test_components.py | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/tests/test_app/tests/test_components.py b/tests/test_app/tests/test_components.py index fbfda829..1f102286 100644 --- a/tests/test_app/tests/test_components.py +++ b/tests/test_app/tests/test_components.py @@ -26,18 +26,18 @@ def wait_until(self, condition, timeout=10): return self.wait(timeout).until(lambda driver: condition()) def test_hello_world(self): - self.driver.find_element_by_id("hello-world") + self.driver.find_element("hello-world") def test_counter(self): - button = self.driver.find_element_by_id("counter-inc") - count = self.driver.find_element_by_id("counter-num") + button = self.driver.find_element("counter-inc") + count = self.driver.find_element("counter-num") for i in range(5): self.wait_until(lambda: count.get_attribute("data-count") == str(i)) button.click() def test_parametrized_component(self): - element = self.driver.find_element_by_id("parametrized-component") + element = self.driver.find_element("parametrized-component") self.assertEqual(element.get_attribute("data-value"), "579") def test_component_from_web_module(self): @@ -48,15 +48,15 @@ def test_component_from_web_module(self): ) def test_use_websocket(self): - element = self.driver.find_element_by_id("use-websocket") + element = self.driver.find_element("use-websocket") self.assertEqual(element.get_attribute("data-success"), "true") def test_use_scope(self): - element = self.driver.find_element_by_id("use-scope") + element = self.driver.find_element("use-scope") self.assertEqual(element.get_attribute("data-success"), "true") def test_use_location(self): - element = self.driver.find_element_by_id("use-location") + element = self.driver.find_element("use-location") self.assertEqual(element.get_attribute("data-success"), "true") From 6cc9dede62b43e49aaf97c352b7172ce367830a7 Mon Sep 17 00:00:00 2001 From: Archmonger <16909269+Archmonger@users.noreply.github.com> Date: Thu, 23 Jun 2022 16:48:19 -0700 Subject: [PATCH 15/35] add title to readme example --- docs/features/components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/features/components.md b/docs/features/components.md index 52315e42..a2c3ddfe 100644 --- a/docs/features/components.md +++ b/docs/features/components.md @@ -65,7 +65,7 @@ def MyComponent(): 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 +```python title="components.py" from idom import component, html from django_idom.components import static_js From 77332436535ea7adf1c41c632d9386810995dcc9 Mon Sep 17 00:00:00 2001 From: Archmonger <16909269+Archmonger@users.noreply.github.com> Date: Thu, 23 Jun 2022 16:52:58 -0700 Subject: [PATCH 16/35] pin selenium to older version 4.2 --- requirements/test-env.txt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/requirements/test-env.txt b/requirements/test-env.txt index 6f2e151e..61ee65ee 100644 --- a/requirements/test-env.txt +++ b/requirements/test-env.txt @@ -1,3 +1,3 @@ django -selenium +selenium <= 4.2.0 twisted From 568a49e057fa70a3070f315758a5c366be2493c7 Mon Sep 17 00:00:00 2001 From: Archmonger <16909269+Archmonger@users.noreply.github.com> Date: Thu, 23 Jun 2022 16:54:53 -0700 Subject: [PATCH 17/35] Revert "Selenium 4.3 compatibility" This reverts commit 0ffb5a58847e2feacb35b8242af2893da9e71bbf. --- tests/test_app/tests/test_components.py | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/tests/test_app/tests/test_components.py b/tests/test_app/tests/test_components.py index 1f102286..fbfda829 100644 --- a/tests/test_app/tests/test_components.py +++ b/tests/test_app/tests/test_components.py @@ -26,18 +26,18 @@ def wait_until(self, condition, timeout=10): return self.wait(timeout).until(lambda driver: condition()) def test_hello_world(self): - self.driver.find_element("hello-world") + self.driver.find_element_by_id("hello-world") def test_counter(self): - button = self.driver.find_element("counter-inc") - count = self.driver.find_element("counter-num") + button = self.driver.find_element_by_id("counter-inc") + count = self.driver.find_element_by_id("counter-num") for i in range(5): self.wait_until(lambda: count.get_attribute("data-count") == str(i)) button.click() def test_parametrized_component(self): - element = self.driver.find_element("parametrized-component") + element = self.driver.find_element_by_id("parametrized-component") self.assertEqual(element.get_attribute("data-value"), "579") def test_component_from_web_module(self): @@ -48,15 +48,15 @@ def test_component_from_web_module(self): ) def test_use_websocket(self): - element = self.driver.find_element("use-websocket") + element = self.driver.find_element_by_id("use-websocket") self.assertEqual(element.get_attribute("data-success"), "true") def test_use_scope(self): - element = self.driver.find_element("use-scope") + element = self.driver.find_element_by_id("use-scope") self.assertEqual(element.get_attribute("data-success"), "true") def test_use_location(self): - element = self.driver.find_element("use-location") + element = self.driver.find_element_by_id("use-location") self.assertEqual(element.get_attribute("data-success"), "true") From 5f981a058dd91ebbd6d4c662ab28dc78ef2b1d72 Mon Sep 17 00:00:00 2001 From: Archmonger <16909269+Archmonger@users.noreply.github.com> Date: Thu, 23 Jun 2022 17:28:42 -0700 Subject: [PATCH 18/35] add new tests --- tests/test_app/components.py | 22 ++++++++++++++++++++++ tests/test_app/static/static-css-test.css | 3 +++ tests/test_app/static/static-js-test.js | 3 +++ tests/test_app/templates/base.html | 2 ++ tests/test_app/tests/test_components.py | 7 +++++++ 5 files changed, 37 insertions(+) create mode 100644 tests/test_app/static/static-css-test.css create mode 100644 tests/test_app/static/static-js-test.js diff --git a/tests/test_app/components.py b/tests/test_app/components.py index 2efd878c..ba1cb1be 100644 --- a/tests/test_app/components.py +++ b/tests/test_app/components.py @@ -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(), + ) diff --git a/tests/test_app/static/static-css-test.css b/tests/test_app/static/static-css-test.css new file mode 100644 index 00000000..8a4766b9 --- /dev/null +++ b/tests/test_app/static/static-css-test.css @@ -0,0 +1,3 @@ +#static-css button { + color: blue; +} \ No newline at end of file diff --git a/tests/test_app/static/static-js-test.js b/tests/test_app/static/static-js-test.js new file mode 100644 index 00000000..005b363a --- /dev/null +++ b/tests/test_app/static/static-js-test.js @@ -0,0 +1,3 @@ +let el = document.body.querySelector("#static-js"); +el.textContent = "StaticJS: True"; +el.dataset.success = "True"; \ No newline at end of file diff --git a/tests/test_app/templates/base.html b/tests/test_app/templates/base.html index 0c52a8cc..c597cdf9 100644 --- a/tests/test_app/templates/base.html +++ b/tests/test_app/templates/base.html @@ -19,6 +19,8 @@

IDOM Test Page

{% component "test_app.components.UseWebsocket" %}
{% component "test_app.components.UseScope" %}
{% component "test_app.components.UseLocation" %}
+
{% component "test_app.components.StaticCSS" %}
+
{% component "test_app.components.StaticJS" %}
diff --git a/tests/test_app/tests/test_components.py b/tests/test_app/tests/test_components.py index fbfda829..8c21c5f6 100644 --- a/tests/test_app/tests/test_components.py +++ b/tests/test_app/tests/test_components.py @@ -59,6 +59,13 @@ 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"), "blue") + + 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() From f9aa39f66ee9ce3787982cf652b94b5f3cb3074d Mon Sep 17 00:00:00 2001 From: Archmonger <16909269+Archmonger@users.noreply.github.com> Date: Thu, 23 Jun 2022 17:34:13 -0700 Subject: [PATCH 19/35] fix tests --- tests/test_app/static/static-css-test.css | 2 +- tests/test_app/static/static-js-test.js | 2 +- tests/test_app/tests/test_components.py | 5 ++++- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/tests/test_app/static/static-css-test.css b/tests/test_app/static/static-css-test.css index 8a4766b9..6589cf89 100644 --- a/tests/test_app/static/static-css-test.css +++ b/tests/test_app/static/static-css-test.css @@ -1,3 +1,3 @@ #static-css button { - color: blue; + color: rgba(0, 0, 255, 1); } \ No newline at end of file diff --git a/tests/test_app/static/static-js-test.js b/tests/test_app/static/static-js-test.js index 005b363a..c2d06e40 100644 --- a/tests/test_app/static/static-js-test.js +++ b/tests/test_app/static/static-js-test.js @@ -1,3 +1,3 @@ let el = document.body.querySelector("#static-js"); el.textContent = "StaticJS: True"; -el.dataset.success = "True"; \ No newline at end of file +el.dataset.success = "true"; \ No newline at end of file diff --git a/tests/test_app/tests/test_components.py b/tests/test_app/tests/test_components.py index 8c21c5f6..33a8c6e8 100644 --- a/tests/test_app/tests/test_components.py +++ b/tests/test_app/tests/test_components.py @@ -61,12 +61,15 @@ def test_use_location(self): def test_static_css(self): element = self.driver.find_element_by_css_selector("#static-css button") - self.assertEqual(element.value_of_css_property("color"), "blue") + 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() options.headless = bool(int(os.environ.get("SELENIUM_HEADLESS", 0))) From aa55ad76a0d0deea0a2c5151692909cea281b1ba Mon Sep 17 00:00:00 2001 From: Archmonger <16909269+Archmonger@users.noreply.github.com> Date: Thu, 23 Jun 2022 17:57:03 -0700 Subject: [PATCH 20/35] docs cleanup --- docs/features/components.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/docs/features/components.md b/docs/features/components.md index a2c3ddfe..b24dde3e 100644 --- a/docs/features/components.md +++ b/docs/features/components.md @@ -18,11 +18,11 @@ def MyComponent(): Yes, if the stylesheet is contains styling for your component. -??? question "Can I load CSS using `html.link` instead?" +??? question "Can I load static CSS using `html.link` instead?" - While you can load a with `html.link`, keep in mind that loading this way **does not** ensure load order. Thus, your stylesheet will likely be loaded after your component is displayed. + 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 this use case: + Here's an example on what you should typically avoid doing: ```python from idom import component, html @@ -41,7 +41,7 @@ def MyComponent(): `static_css` can only be used with local static files. - For external CSS, substitute `static_css` with `html.link` as such: + For external CSS, substitute `static_css` with `html.link`. ```python from idom import component, html @@ -59,7 +59,7 @@ def MyComponent(): Traditionally, stylesheets are loaded in your `#!html ` using the `#!jinja {% load static %}` template tag. - Instead, you can use the `static_css` component to help improve webpage load times to deferring loading stylesheets until they are needed. + To help improve webpage load times, you can use the `static_css` component to defer loading your stylesheet until it is needed. ## Static JavaScript @@ -81,11 +81,11 @@ def MyComponent(): Yes, if your scripts are reliant on the contents of the component. -??? question "Can I load JavaScript using `html.script` instead?" +??? question "Can I load static JavaScript using `html.script` instead?" - While you can load 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. + 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 this use case: + Here's an example on what you should typically avoid doing: ```python from idom import component, html @@ -104,7 +104,7 @@ def MyComponent(): `static_js` can only be used with local static files. - For external JavaScript, substitute `static_js` with `html.script` as such: + For external JavaScript, substitute `static_js` with `html.script`. ```python from idom import component, html @@ -122,4 +122,4 @@ def MyComponent(): Traditionally, JavaScript is loaded in your `#!html ` using the `#!jinja {% load static %}` template tag. - Instead, you can use the `static_js` component to help improve webpage load times to deferring loading scripts until they are needed. + To help improve webpage load times, you can use the `static_js` component to defer loading your JavaScript until it is needed. From fa11504eb616633223d255ee4c344ad604a0fea1 Mon Sep 17 00:00:00 2001 From: Archmonger <16909269+Archmonger@users.noreply.github.com> Date: Thu, 23 Jun 2022 18:08:30 -0700 Subject: [PATCH 21/35] Create PR template --- .github/pull_request_template.md | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 .github/pull_request_template.md diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md new file mode 100644 index 00000000..92ac3c3d --- /dev/null +++ b/.github/pull_request_template.md @@ -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. From 03ac98024f6155b9d32a11a5f9fac65ae09b6a79 Mon Sep 17 00:00:00 2001 From: Archmonger <16909269+Archmonger@users.noreply.github.com> Date: Fri, 24 Jun 2022 14:59:34 -0700 Subject: [PATCH 22/35] bump the minimum idom version --- CHANGELOG.md | 4 ++++ requirements/pkg-deps.txt | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 315dc78a..141d1101 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -30,6 +30,10 @@ Types of changes are to be listed in this order - `static_css` and `static_js` components to defer loading CSS & JS files until needed. +### Changed + +- Bumped the minimum IDOM version to 0.39.0 + ## [1.0.0] - 2022-05-22 ### Added diff --git a/requirements/pkg-deps.txt b/requirements/pkg-deps.txt index 7b9f9420..08e42fad 100644 --- a/requirements/pkg-deps.txt +++ b/requirements/pkg-deps.txt @@ -1,3 +1,3 @@ channels >=3.0.0 -idom >=0.38.0, <0.39.0 +idom >=0.39.0, <0.40.0 aiofile >=3.0 From 7095f648597307e57dbd75b8d4daf86d44f808c0 Mon Sep 17 00:00:00 2001 From: Archmonger <16909269+Archmonger@users.noreply.github.com> Date: Sat, 25 Jun 2022 19:05:54 -0700 Subject: [PATCH 23/35] update issue form --- .github/ISSUE_TEMPLATE/issue-form.yml | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/.github/ISSUE_TEMPLATE/issue-form.yml b/.github/ISSUE_TEMPLATE/issue-form.yml index 342316ad..45a21446 100644 --- a/.github/ISSUE_TEMPLATE/issue-form.yml +++ b/.github/ISSUE_TEMPLATE/issue-form.yml @@ -13,11 +13,4 @@ body: label: Proposed Actions description: Describe what ought to be done, and why that will address the reasons for action mentioned above. validations: - required: false -- type: textarea - attributes: - label: Work Items - description: | - An itemized list or detailed description of the work to be done to based on the proposed actions above. - validations: - required: false + required: false \ No newline at end of file From bdb3431f8b77d33ea7d292f2b666d97298687cab Mon Sep 17 00:00:00 2001 From: Archmonger <16909269+Archmonger@users.noreply.github.com> Date: Sat, 25 Jun 2022 19:16:54 -0700 Subject: [PATCH 24/35] minor readme wordsmithing --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 5fcde22f..58f86611 100644 --- a/README.md +++ b/README.md @@ -44,7 +44,7 @@ def HelloWorld(recipient: str): -In your **Django app**'s HTML located within your `templates` folder, you can now embed your IDOM component using the `component` template tag. Within this tag, you will need to type in your dotted path to the component function as the first argument. +In your **Django app**'s HTML template, you can now embed your IDOM component using the `component` template tag. Within this tag, you will need to type in your dotted path to the component function as the first argument. Additonally, you can pass in keyword arguments into your component function. For example, after reading the code below, pay attention to how the function definition for `HelloWorld` (_in the previous example_) accepts a `recipient` argument. From 7ea6306d6d0cfa4e47a9b1e6a07f0a33bd3db682 Mon Sep 17 00:00:00 2001 From: Archmonger <16909269+Archmonger@users.noreply.github.com> Date: Sat, 25 Jun 2022 23:53:36 -0700 Subject: [PATCH 25/35] docstring for component template tag --- src/django_idom/templatetags/idom.py | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/django_idom/templatetags/idom.py b/src/django_idom/templatetags/idom.py index 5707733d..386721d2 100644 --- a/src/django_idom/templatetags/idom.py +++ b/src/django_idom/templatetags/idom.py @@ -15,6 +15,21 @@ @register.inclusion_tag("idom/component.html") def component(_component_id_, **kwargs): + """ + This tag is used to embed an existing IDOM component into your HTML template. + + The first arguement within this tag is your dotted path to the component function. + + Subsequent values are keyworded arguements are passed into your component:: + + {% load idom %} + + + + {% component "example_project.my_app.components.HelloWorld" recipient="World" %} + + + """ _register_component(_component_id_) class_ = kwargs.pop("class", "") From 2de0deef8822dce259ea58650c7e3928780352d7 Mon Sep 17 00:00:00 2001 From: Archmonger <16909269+Archmonger@users.noreply.github.com> Date: Tue, 28 Jun 2022 03:52:19 -0700 Subject: [PATCH 26/35] use PascalCase for component names --- CHANGELOG.md | 2 +- docs/features/components.md | 36 +++++++++++++++++------------------ src/django_idom/components.py | 18 ++++++++++++++---- tests/test_app/components.py | 4 ++-- 4 files changed, 35 insertions(+), 25 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 141d1101..87a010cc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -28,7 +28,7 @@ Types of changes are to be listed in this order ### Added -- `static_css` and `static_js` components to defer loading CSS & JS files until needed. +- `DjangoCSS` and `DjangoJS` components to defer loading CSS & JS files until needed. ### Changed diff --git a/docs/features/components.md b/docs/features/components.md index b24dde3e..bf50aef5 100644 --- a/docs/features/components.md +++ b/docs/features/components.md @@ -1,20 +1,20 @@ -## Static CSS +## Django 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 +from django_idom.components import DjangoCSS @component def MyComponent(): return html.div( - static_css("css/buttons.css"), + DjangoCSS("css/buttons.css"), html.button("My Button!"), ) ``` -??? question "Should I put `static_css` at the top of my component?" +??? question "Should I put `DjangoCSS` at the top of my component?" Yes, if the stylesheet is contains styling for your component. @@ -26,7 +26,7 @@ def MyComponent(): ```python from idom import component, html - from django_idom.components import static_js + from django_idom.components import DjangoJS from django.templatetags.static import static @component @@ -39,13 +39,13 @@ def MyComponent(): ??? question "How do I load external CSS?" - `static_css` can only be used with local static files. + `DjangoCSS` can only be used with local static files. - For external CSS, substitute `static_css` with `html.link`. + For external CSS, substitute `DjangoCSS` with `html.link`. ```python from idom import component, html - from django_idom.components import static_js + from django_idom.components import DjangoJS @component def MyComponent(): @@ -59,25 +59,25 @@ def MyComponent(): Traditionally, stylesheets are loaded in your `#!html ` 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. + To help improve webpage load times, you can use the `DjangoCSS` component to defer loading your stylesheet until it is needed. -## Static JavaScript +## Django JS 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 +from django_idom.components import DjangoJS @component def MyComponent(): return html.div( html.button("My Button!"), - static_js("js/scripts.js"), + DjangoJS("js/scripts.js"), ) ``` -??? question "Should I put `static_js` at the bottom of my component?" +??? question "Should I put `DjangoJS` at the bottom of my component?" Yes, if your scripts are reliant on the contents of the component. @@ -89,7 +89,7 @@ def MyComponent(): ```python from idom import component, html - from django_idom.components import static_js + from django_idom.components import DjangoJS from django.templatetags.static import static @component @@ -102,13 +102,13 @@ def MyComponent(): ??? question "How do I load external JS?" - `static_js` can only be used with local static files. + `DjangoJS` can only be used with local static files. - For external JavaScript, substitute `static_js` with `html.script`. + For external JavaScript, substitute `DjangoJS` with `html.script`. ```python from idom import component, html - from django_idom.components import static_js + from django_idom.components import DjangoJS @component def MyComponent(): @@ -122,4 +122,4 @@ def MyComponent(): Traditionally, JavaScript is loaded in your `#!html ` 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. + To help improve webpage load times, you can use the `DjangoJS` component to defer loading your JavaScript until it is needed. diff --git a/src/django_idom/components.py b/src/django_idom/components.py index efe32a0e..16207644 100644 --- a/src/django_idom/components.py +++ b/src/django_idom/components.py @@ -7,14 +7,24 @@ @component -def static_css(static_path: str): - """Fetches a CSS static file for use within IDOM. This allows for deferred CSS loading.""" +def DjangoCSS(static_path: str): + """Fetches a CSS static file for use within IDOM. This allows for deferred CSS loading. + + Args: + static_path: The path to the static file. This path is identical to what you would + use on a `static` template tag. + """ 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.""" +def DjangoJS(static_path: str): + """Fetches a JS static file for use within IDOM. This allows for deferred JS loading. + + Args: + static_path: The path to the static file. This path is identical to what you would + use on a `static` template tag. + """ return html.script(_cached_static_contents(static_path)) diff --git a/tests/test_app/components.py b/tests/test_app/components.py index ba1cb1be..13939f8b 100644 --- a/tests/test_app/components.py +++ b/tests/test_app/components.py @@ -77,7 +77,7 @@ def UseLocation(): def StaticCSS(): return idom.html.div( {"id": "static-css"}, - django_idom.components.static_css("static-css-test.css"), + django_idom.components.DjangoCSS("static-css-test.css"), idom.html.div({"style": {"display": "inline"}}, "StaticCSS: "), idom.html.button("This text should be blue."), idom.html.hr(), @@ -90,6 +90,6 @@ def StaticJS(): return idom.html.div( {"id": "static-js", "data-success": success}, f"StaticJS: {success}", - django_idom.components.static_js("static-js-test.js"), + django_idom.components.DjangoJS("static-js-test.js"), idom.html.hr(), ) From 1db08a5797b00edea0100738adb7b6f322551301 Mon Sep 17 00:00:00 2001 From: Archmonger <16909269+Archmonger@users.noreply.github.com> Date: Tue, 28 Jun 2022 03:57:09 -0700 Subject: [PATCH 27/35] Fix formatting --- src/django_idom/components.py | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/django_idom/components.py b/src/django_idom/components.py index 16207644..eb087230 100644 --- a/src/django_idom/components.py +++ b/src/django_idom/components.py @@ -9,7 +9,7 @@ @component def DjangoCSS(static_path: str): """Fetches a CSS static file for use within IDOM. This allows for deferred CSS loading. - + Args: static_path: The path to the static file. This path is identical to what you would use on a `static` template tag. @@ -20,7 +20,7 @@ def DjangoCSS(static_path: str): @component def DjangoJS(static_path: str): """Fetches a JS static file for use within IDOM. This allows for deferred JS loading. - + Args: static_path: The path to the static file. This path is identical to what you would use on a `static` template tag. From 1e26dfad9d88fe6dcdeb1e2e9907d5ab92025591 Mon Sep 17 00:00:00 2001 From: Archmonger <16909269+Archmonger@users.noreply.github.com> Date: Tue, 28 Jun 2022 17:08:32 -0700 Subject: [PATCH 28/35] fix HR on JS test --- tests/test_app/components.py | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/tests/test_app/components.py b/tests/test_app/components.py index 13939f8b..54fc3dd8 100644 --- a/tests/test_app/components.py +++ b/tests/test_app/components.py @@ -87,9 +87,11 @@ def StaticCSS(): @idom.component def StaticJS(): success = False - return idom.html.div( - {"id": "static-js", "data-success": success}, - f"StaticJS: {success}", - django_idom.components.DjangoJS("static-js-test.js"), + return idom.html._( + idom.html.div( + {"id": "static-js", "data-success": success}, + f"StaticJS: {success}", + django_idom.components.DjangoJS("static-js-test.js"), + ), idom.html.hr(), ) From 53ea6e603b59e0de62cce0582c35d6f887461221 Mon Sep 17 00:00:00 2001 From: Archmonger <16909269+Archmonger@users.noreply.github.com> Date: Wed, 29 Jun 2022 01:12:42 -0700 Subject: [PATCH 29/35] wordsmith --- docs/features/components.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/features/components.md b/docs/features/components.md index bf50aef5..81e68729 100644 --- a/docs/features/components.md +++ b/docs/features/components.md @@ -16,13 +16,13 @@ def MyComponent(): ??? question "Should I put `DjangoCSS` at the top of my component?" - Yes, if the stylesheet is contains styling for your component. + Yes, if the stylesheet contains styling for your component. ??? question "Can I load static CSS using `html.link` instead?" 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: + Here's an example on what you should avoid doing for Django static files: ```python from idom import component, html @@ -85,7 +85,7 @@ def MyComponent(): 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: + Here's an example on what you should avoid doing for Django static files: ```python from idom import component, html From ad33221dc86921a6c2c380c14b9eca97227fe670 Mon Sep 17 00:00:00 2001 From: Archmonger <16909269+Archmonger@users.noreply.github.com> Date: Thu, 30 Jun 2022 06:15:22 -0700 Subject: [PATCH 30/35] fix spelling --- src/django_idom/templatetags/idom.py | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/django_idom/templatetags/idom.py b/src/django_idom/templatetags/idom.py index 386721d2..7b8f3610 100644 --- a/src/django_idom/templatetags/idom.py +++ b/src/django_idom/templatetags/idom.py @@ -18,9 +18,9 @@ def component(_component_id_, **kwargs): """ This tag is used to embed an existing IDOM component into your HTML template. - The first arguement within this tag is your dotted path to the component function. + The first argument within this tag is your dotted path to the component function. - Subsequent values are keyworded arguements are passed into your component:: + Subsequent values are keyworded arguments are passed into your component:: {% load idom %} From 574acdb528c8b90b89d8dea86f9742cf15cf0a09 Mon Sep 17 00:00:00 2001 From: Mark <16909269+Archmonger@users.noreply.github.com> Date: Thu, 30 Jun 2022 21:39:32 -0700 Subject: [PATCH 31/35] Update tests/test_app/static/static-css-test.css Co-authored-by: Ryan Morshead --- tests/test_app/static/static-css-test.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/test_app/static/static-css-test.css b/tests/test_app/static/static-css-test.css index 6589cf89..d5565d70 100644 --- a/tests/test_app/static/static-css-test.css +++ b/tests/test_app/static/static-css-test.css @@ -1,3 +1,3 @@ #static-css button { color: rgba(0, 0, 255, 1); -} \ No newline at end of file +} From aea5062a398187d41f237dae8f4e3fbc304b604c Mon Sep 17 00:00:00 2001 From: Mark <16909269+Archmonger@users.noreply.github.com> Date: Thu, 30 Jun 2022 21:39:39 -0700 Subject: [PATCH 32/35] Update .github/ISSUE_TEMPLATE/issue-form.yml Co-authored-by: Ryan Morshead --- .github/ISSUE_TEMPLATE/issue-form.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/ISSUE_TEMPLATE/issue-form.yml b/.github/ISSUE_TEMPLATE/issue-form.yml index 45a21446..b4a4b892 100644 --- a/.github/ISSUE_TEMPLATE/issue-form.yml +++ b/.github/ISSUE_TEMPLATE/issue-form.yml @@ -13,4 +13,4 @@ body: label: Proposed Actions description: Describe what ought to be done, and why that will address the reasons for action mentioned above. validations: - required: false \ No newline at end of file + required: false From 18dc65847f7e0090896a5162991fcaacaae14544 Mon Sep 17 00:00:00 2001 From: Mark <16909269+Archmonger@users.noreply.github.com> Date: Thu, 30 Jun 2022 21:39:54 -0700 Subject: [PATCH 33/35] Update tests/test_app/static/static-js-test.js Co-authored-by: Ryan Morshead --- tests/test_app/static/static-js-test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/test_app/static/static-js-test.js b/tests/test_app/static/static-js-test.js index c2d06e40..b4423acf 100644 --- a/tests/test_app/static/static-js-test.js +++ b/tests/test_app/static/static-js-test.js @@ -1,3 +1,3 @@ let el = document.body.querySelector("#static-js"); el.textContent = "StaticJS: True"; -el.dataset.success = "true"; \ No newline at end of file +el.dataset.success = "true"; From 26608820a1cc0f6ca7b1d1cf13df3c1f2545358a Mon Sep 17 00:00:00 2001 From: Archmonger <16909269+Archmonger@users.noreply.github.com> Date: Thu, 30 Jun 2022 21:41:31 -0700 Subject: [PATCH 34/35] use_memo is preferrable --- src/django_idom/components.py | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/django_idom/components.py b/src/django_idom/components.py index eb087230..b0deac9a 100644 --- a/src/django_idom/components.py +++ b/src/django_idom/components.py @@ -14,7 +14,16 @@ def DjangoCSS(static_path: str): static_path: The path to the static file. This path is identical to what you would use on a `static` template tag. """ - return html.style(_cached_static_contents(static_path)) + return html._( + html.script( + """ + let parentTag = document.currentScript; + console.log(parentTag); + //parentTag.attachShadow({ mode: 'open' }); + """ + ), + html.style(_cached_static_contents(static_path)), + ) @component @@ -37,6 +46,7 @@ def _cached_static_contents(static_path: str): ) # Fetch the file from cache, if available + # Cache is preferrable to `use_memo` due to multiprocessing capabilities last_modified_time = os.stat(abs_path).st_mtime cache_key = f"django_idom:static_contents:{static_path}" file_contents = IDOM_CACHE.get(cache_key, version=last_modified_time) From a544c1150de52df98ec46128274e582504860940 Mon Sep 17 00:00:00 2001 From: Archmonger <16909269+Archmonger@users.noreply.github.com> Date: Thu, 30 Jun 2022 22:06:13 -0700 Subject: [PATCH 35/35] use snake_case --- CHANGELOG.md | 2 +- docs/features/components.md | 28 ++++++++++++---------------- src/django_idom/components.py | 4 ++-- tests/test_app/components.py | 4 ++-- 4 files changed, 17 insertions(+), 21 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 87a010cc..bf2a083b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -28,7 +28,7 @@ Types of changes are to be listed in this order ### Added -- `DjangoCSS` and `DjangoJS` components to defer loading CSS & JS files until needed. +- `django_css` and `django_js` components to defer loading CSS & JS files until needed. ### Changed diff --git a/docs/features/components.md b/docs/features/components.md index 81e68729..947a4431 100644 --- a/docs/features/components.md +++ b/docs/features/components.md @@ -4,17 +4,17 @@ Allows you to defer loading a CSS stylesheet until a component begins rendering. ```python title="components.py" from idom import component, html -from django_idom.components import DjangoCSS +from django_idom.components import django_css @component def MyComponent(): return html.div( - DjangoCSS("css/buttons.css"), + django_css("css/buttons.css"), html.button("My Button!"), ) ``` -??? question "Should I put `DjangoCSS` at the top of my component?" +??? question "Should I put `django_css` at the top of my component?" Yes, if the stylesheet contains styling for your component. @@ -26,7 +26,6 @@ def MyComponent(): ```python from idom import component, html - from django_idom.components import DjangoJS from django.templatetags.static import static @component @@ -39,13 +38,12 @@ def MyComponent(): ??? question "How do I load external CSS?" - `DjangoCSS` can only be used with local static files. + `django_css` can only be used with local static files. - For external CSS, substitute `DjangoCSS` with `html.link`. + For external CSS, substitute `django_css` with `html.link`. ```python from idom import component, html - from django_idom.components import DjangoJS @component def MyComponent(): @@ -59,7 +57,7 @@ def MyComponent(): Traditionally, stylesheets are loaded in your `#!html ` using the `#!jinja {% load static %}` template tag. - To help improve webpage load times, you can use the `DjangoCSS` component to defer loading your stylesheet until it is needed. + To help improve webpage load times, you can use the `django_css` component to defer loading your stylesheet until it is needed. ## Django JS @@ -67,17 +65,17 @@ Allows you to defer loading JavaScript until a component begins rendering. This ```python title="components.py" from idom import component, html -from django_idom.components import DjangoJS +from django_idom.components import django_js @component def MyComponent(): return html.div( html.button("My Button!"), - DjangoJS("js/scripts.js"), + django_js("js/scripts.js"), ) ``` -??? question "Should I put `DjangoJS` at the bottom of my component?" +??? question "Should I put `django_js` at the bottom of my component?" Yes, if your scripts are reliant on the contents of the component. @@ -89,7 +87,6 @@ def MyComponent(): ```python from idom import component, html - from django_idom.components import DjangoJS from django.templatetags.static import static @component @@ -102,13 +99,12 @@ def MyComponent(): ??? question "How do I load external JS?" - `DjangoJS` can only be used with local static files. + `django_js` can only be used with local static files. - For external JavaScript, substitute `DjangoJS` with `html.script`. + For external JavaScript, substitute `django_js` with `html.script`. ```python from idom import component, html - from django_idom.components import DjangoJS @component def MyComponent(): @@ -122,4 +118,4 @@ def MyComponent(): Traditionally, JavaScript is loaded in your `#!html ` using the `#!jinja {% load static %}` template tag. - To help improve webpage load times, you can use the `DjangoJS` component to defer loading your JavaScript until it is needed. + To help improve webpage load times, you can use the `django_js` component to defer loading your JavaScript until it is needed. diff --git a/src/django_idom/components.py b/src/django_idom/components.py index b0deac9a..dab9a5d0 100644 --- a/src/django_idom/components.py +++ b/src/django_idom/components.py @@ -7,7 +7,7 @@ @component -def DjangoCSS(static_path: str): +def django_css(static_path: str): """Fetches a CSS static file for use within IDOM. This allows for deferred CSS loading. Args: @@ -27,7 +27,7 @@ def DjangoCSS(static_path: str): @component -def DjangoJS(static_path: str): +def django_js(static_path: str): """Fetches a JS static file for use within IDOM. This allows for deferred JS loading. Args: diff --git a/tests/test_app/components.py b/tests/test_app/components.py index 54fc3dd8..687bfea2 100644 --- a/tests/test_app/components.py +++ b/tests/test_app/components.py @@ -77,7 +77,7 @@ def UseLocation(): def StaticCSS(): return idom.html.div( {"id": "static-css"}, - django_idom.components.DjangoCSS("static-css-test.css"), + django_idom.components.django_css("static-css-test.css"), idom.html.div({"style": {"display": "inline"}}, "StaticCSS: "), idom.html.button("This text should be blue."), idom.html.hr(), @@ -91,7 +91,7 @@ def StaticJS(): idom.html.div( {"id": "static-js", "data-success": success}, f"StaticJS: {success}", - django_idom.components.DjangoJS("static-js-test.js"), + django_idom.components.django_js("static-js-test.js"), ), idom.html.hr(), )