Support for non-serializable component parameters

CHANGELOG.md

@@ -22,7 +22,21 @@ Using the following categories, list your changes in this order:
 
 ## [Unreleased]
 
--   Nothing (yet)
+### Changed
+
+-   The `component` template tag now supports both positional and keyword arguments.
+-   `use_location`, `use_scope`, and `use_websocket` previously contained within `django_idom.hooks` have been migrated to `idom.backend.hooks`.
+-   Bumped the minimum IDOM version to 0.43.0
+
+### Removed
+
+-   `django_idom.hooks.use_location` has been removed. The equivalent replacement is found at `idom.backends.hooks.use_location`.
+-   `django_idom.hooks.use_scope` has been removed. The equivalent replacement is found at `idom.backends.hooks.use_scope`.
+-   `django_idom.hooks.use_websocket` has been removed. The equivalent replacement is found at `idom.backends.hooks.use_connection`.
+
+### Security
+
+-   Fixed a potential method of component argument spoofing
 
 ## [2.2.1] - 2022-01-09
 

README.md

@@ -46,7 +46,7 @@ def hello_world(recipient: str):
 
 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.
 
-Additionally, 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 `hello_world` (_in the previous example_) accepts a `recipient` argument.
+Additionally, you can pass in `args` and `kwargs` into your component function. For example, after reading the code below, pay attention to how the function definition for `hello_world` (_in the previous example_) accepts a `recipient` argument.
 
 <!--html-header-end-->
 <!--html-code-start-->

docs/src/features/decorators.md

@@ -16,7 +16,6 @@ This decorator can be used with or without parentheses.
 
     ```python
     from django_idom.decorators import auth_required
-    from django_idom.hooks import use_websocket
     from idom import component, html
 
     @component
@@ -70,7 +69,6 @@ This decorator can be used with or without parentheses.
 
         ```python
         from django_idom.decorators import auth_required
-        from django_idom.hooks import use_websocket
         from idom import component, html
 
         @component
@@ -87,7 +85,6 @@ This decorator can be used with or without parentheses.
 
         ```python
         from django_idom.decorators import auth_required
-        from django_idom.hooks import use_websocket
         from idom import component, html
 
 
@@ -120,7 +117,6 @@ This decorator can be used with or without parentheses.
 
         ```python
         from django_idom.decorators import auth_required
-        from django_idom.hooks import use_websocket
         from idom import component, html
 
         @component

docs/src/features/hooks.md

@@ -399,19 +399,19 @@ The function you provide into this hook will have no return value.
 
     {% include-markdown "../../includes/orm.md" start="<!--orm-excp-start-->" end="<!--orm-excp-end-->" %}
 
-## Use Websocket
+## Use Connection
 
-You can fetch the Django Channels [websocket](https://channels.readthedocs.io/en/stable/topics/consumers.html#asyncjsonwebsocketconsumer) at any time by using `use_websocket`.
+You can fetch the Django Channels [websocket](https://channels.readthedocs.io/en/stable/topics/consumers.html#asyncjsonwebsocketconsumer) at any time by using `use_connection`.
 
 === "components.py"
 
     ```python
     from idom import component, html
-    from django_idom.hooks import use_websocket
+    from django_idom.hooks import use_connection
 
     @component
     def my_component():
-        my_websocket = use_websocket()
+        my_websocket = use_connection()
         return html.div(my_websocket)
     ```
 

docs/src/features/settings.md

@@ -16,7 +16,7 @@
 
     # Maximum seconds between two reconnection attempts that would cause the client give up.
     # 0 will disable reconnection.
-    IDOM_WS_MAX_RECONNECT_TIMEOUT = 604800
+    IDOM_MAX_RECONNECT_TIMEOUT = 259200
 
     # The URL for IDOM to serve websockets
     IDOM_WEBSOCKET_URL = "idom/"

docs/src/features/templatetag.md

@@ -44,7 +44,7 @@
     For this template tag, there are two reserved keyword arguments: `class` and `key`
 
     -   `class` allows you to apply a HTML class to the top-level component div. This is useful for styling purposes.
-    -   `key` allows you to force the component to use a [specific key value](https://idom-docs.herokuapp.com/docs/guides/understanding-idom/why-idom-needs-keys.html?highlight=key). You typically won't need to set this.
+    -   `key` allows you to force the component to use a [specific key value](https://idom-docs.herokuapp.com/docs/guides/understanding-idom/why-idom-needs-keys.html?highlight=key). Using `key` within a template tag is effectively useless.
 
     === "my-template.html"
 
@@ -63,7 +63,8 @@
     | Name | Type | Description | Default |
     | --- | --- | --- | --- |
     | `dotted_path` | `str` | The dotted path to the component to render. | N/A |
-    | `**kwargs` | `Any` | The keyword arguments to pass to the component. | N/A |
+    | `*args` | `Any` | The positional arguments to provide to the component. | N/A |
+    | `**kwargs` | `Any` | The keyword arguments to provide to the component. | N/A |
 
     <font size="4">**Returns**</font>
 
@@ -96,13 +97,7 @@
     Additionally, the components in the example above will not be able to interact with each other, except through database queries.
 
 <!--multiple-components-end-->
-<!--kwargs-start-->
 
-??? question "Can I use positional arguments instead of keyword arguments?"
-
-    You can only pass in **keyword arguments** within the template tag. Due to technical limitations, **positional arguments** are not supported at this time.
-
-<!--kwargs-end-->
 <!--tags-start-->
 
 ??? question "What is a "template tag"?"

docs/src/getting-started/reference-component.md

@@ -16,8 +16,6 @@
 
 {% include-markdown "../features/templatetag.md" start="<!--multiple-components-start-->" end="<!--multiple-components-end-->" %}
 
-{% include-markdown "../features/templatetag.md" start="<!--kwargs-start-->" end="<!--kwargs-end-->" %}
-
 {% include-markdown "../features/templatetag.md" start="<!--tags-start-->" end="<!--tags-end-->" %}
 
 ??? question "Where is my templates folder?"

pyproject.toml

@@ -10,8 +10,12 @@ ensure_newline_before_comments = "True"
 include_trailing_comma = "True"
 line_length = 88
 lines_after_imports = 2
+skip = ['src/django_idom/migrations/', 'tests/test_app/migrations/', '.nox/', '.venv/', 'build/']
 
 [tool.mypy]
+exclude = [
+    'migrations/.*',
+]
 ignore_missing_imports = true
 warn_unused_configs = true
 warn_redundant_casts = true

requirements/pkg-deps.txt

@@ -1,4 +1,5 @@
 channels >=4.0.0
-idom >=0.40.2, <0.41.0
+idom >=0.43.0, <0.44.0
 aiofile >=3.0
+dill >=0.3.5
 typing_extensions

src/django_idom/__init__.py

@@ -1,12 +1,12 @@
 from django_idom import components, decorators, hooks, types, utils
-from django_idom.types import IdomWebsocket
+from django_idom.types import WebsocketConnection
 from django_idom.websocket.paths import IDOM_WEBSOCKET_PATH
 
 
 __version__ = "2.2.1"
 __all__ = [
     "IDOM_WEBSOCKET_PATH",
-    "IdomWebsocket",
+    "WebsocketConnection",
     "hooks",
     "components",
     "decorators",

src/django_idom/config.py

@@ -17,10 +17,10 @@
     "IDOM_WEBSOCKET_URL",
     "idom/",
 )
-IDOM_WS_MAX_RECONNECT_TIMEOUT = getattr(
+IDOM_MAX_RECONNECT_TIMEOUT = getattr(
     settings,
-    "IDOM_WS_MAX_RECONNECT_TIMEOUT",
-    604800,
+    "IDOM_MAX_RECONNECT_TIMEOUT",
+    259200,  # Default to 3 days
 )
 IDOM_CACHE: BaseCache = (
     caches["idom"]

src/django_idom/decorators.py

@@ -3,10 +3,9 @@
 from functools import wraps
 from typing import Callable
 
+from idom.backend.hooks import use_scope
 from idom.core.types import ComponentType, VdomDict
 
-from django_idom.hooks import use_websocket
-
 
 def auth_required(
     component: Callable | None = None,
@@ -27,9 +26,9 @@ def auth_required(
     def decorator(component):
         @wraps(component)
         def _wrapped_func(*args, **kwargs):
-            websocket = use_websocket()
+            scope = use_scope()
 
-            if getattr(websocket.scope["user"], auth_attribute):
+            if getattr(scope["user"], auth_attribute):
                 return component(*args, **kwargs)
             return fallback(*args, **kwargs) if callable(fallback) else fallback
 

src/django_idom/hooks.py

@@ -15,17 +15,10 @@
 
 from channels.db import database_sync_to_async as _database_sync_to_async
 from idom import use_callback, use_ref
-from idom.backend.types import Location
-from idom.core.hooks import Context, create_context, use_context, use_effect, use_state
-
-from django_idom.types import (
-    IdomWebsocket,
-    Mutation,
-    Query,
-    QueryOptions,
-    _Params,
-    _Result,
-)
+from idom.backend.hooks import use_scope
+from idom.core.hooks import use_effect, use_state
+
+from django_idom.types import Mutation, Query, QueryOptions, _Params, _Result
 from django_idom.utils import _generate_obj_name
 
 
@@ -34,20 +27,11 @@
     Callable[..., Callable[..., Awaitable[Any]]],
     _database_sync_to_async,
 )
-WebsocketContext: Context[IdomWebsocket | None] = create_context(None)
 _REFETCH_CALLBACKS: DefaultDict[
     Callable[..., Any], set[Callable[[], None]]
 ] = DefaultDict(set)
 
 
-def use_location() -> Location:
-    """Get the current route as a `Location` object"""
-    # TODO: Use the browser's current page, rather than the WS route
-    scope = use_scope()
-    search = scope["query_string"].decode()
-    return Location(scope["path"], f"?{search}" if search else "")
-
-
 def use_origin() -> str | None:
     """Get the current origin as a string. If the browser did not send an origin header,
     this will be None."""
@@ -65,19 +49,6 @@ def use_origin() -> str | None:
         return None
 
 
-def use_scope() -> dict[str, Any]:
-    """Get the current ASGI scope dictionary"""
-    return use_websocket().scope
-
-
-def use_websocket() -> IdomWebsocket:
-    """Get the current IdomWebsocket object"""
-    websocket = use_context(WebsocketContext)
-    if websocket is None:
-        raise RuntimeError("No websocket. Are you running with a Django server?")
-    return websocket
-
-
 @overload
 def use_query(
     options: QueryOptions,

src/django_idom/migrations/0001_initial.py

@@ -0,0 +1,26 @@
+# Generated by Django 4.1.3 on 2023-01-10 00:54
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = []
+
+    operations = [
+        migrations.CreateModel(
+            name="ComponentParams",
+            fields=[
+                (
+                    "uuid",
+                    models.UUIDField(
+                        editable=False, primary_key=True, serialize=False, unique=True
+                    ),
+                ),
+                ("data", models.BinaryField()),
+                ("created_at", models.DateTimeField(auto_now_add=True)),
+            ],
+        ),
+    ]

src/django_idom/models.py

@@ -0,0 +1,7 @@
+from django.db import models
+
+
+class ComponentParams(models.Model):
+    uuid = models.UUIDField(primary_key=True, editable=False, unique=True)  # type: ignore
+    data = models.BinaryField(editable=False)  # type: ignore
+    created_at = models.DateTimeField(auto_now_add=True, editable=False)  # type: ignore

src/django_idom/templates/idom/component.html

@@ -2,13 +2,12 @@
 <div id="{{ idom_mount_uuid }}" class="{{ class }}"></div>
 <script type="module" crossorigin="anonymous">
   import { mountViewToElement } from "{% static 'django_idom/client.js' %}";
-  const mountPoint = document.getElementById("{{ idom_mount_uuid }}");
+  const mountElement = document.getElementById("{{ idom_mount_uuid }}");
   mountViewToElement(
-    mountPoint,
+    mountElement,
     "{{ idom_websocket_url }}",
     "{{ idom_web_modules_url }}",
     "{{ idom_ws_max_reconnect_timeout }}",
-    "{{ idom_component_id }}",
-    "{{ idom_component_params }}"
+    "{{ idom_component_path }}",
   );
 </script>