Client-side Python components using PyScript (#243)

-   Client-side Python components can now be rendered via the new `{% pyscript_component %}` template tag
    -   You must first call the `{% pyscript_setup %}` template tag to load PyScript dependencies
-   Client-side components can be embedded into existing server-side components via `reactpy_django.components.pyscript_component`.
-   Tired of writing JavaScript? You can now write PyScript code that runs directly within client browser via the `reactpy_django.html.pyscript` element.
    -   This is a viable substitution for most JavaScript code.

Author: Archmonger

.gitignore

@@ -1,5 +1,7 @@
 # ReactPy-Django Build Artifacts
-src/reactpy_django/static/*
+src/reactpy_django/static/reactpy_django/client.js
+src/reactpy_django/static/reactpy_django/pyscript
+src/reactpy_django/static/reactpy_django/morphdom
 
 # Django #
 logs

CHANGELOG.md

@@ -34,21 +34,33 @@ Using the following categories, list your changes in this order:
 
 ## [Unreleased]
 
+### Added
+
+-   Client-side Python components can now be rendered via the new `{% pyscript_component %}` template tag
+    -   You must first call the `{% pyscript_setup %}` template tag to load PyScript dependencies
+-   Client-side components can be embedded into existing server-side components via `reactpy_django.components.pyscript_component`.
+-   Tired of writing JavaScript? You can now write PyScript code that runs directly within client browser via the `reactpy_django.html.pyscript` element.
+    -   This is a viable substitution for most JavaScript code.
+
 ### Changed
 
 -   New syntax for `use_query` and `use_mutation` hooks. Here's a quick comparison of the changes:
 
     ```python
-    query = use_query(QueryOptions(thread_sensitive=True), get_items, value=123456, foo="bar") # Old
-    query = use_query(get_items, {"value":12356, "foo":"bar"}, thread_sensitive=True) # New
+    query = use_query(QueryOptions(thread_sensitive=True), get_items, foo="bar") # Old
+    query = use_query(get_items, {"foo":"bar"}, thread_sensitive=True) # New
 
     mutation = use_mutation(MutationOptions(thread_sensitive=True), remove_item) # Old
     mutation = use_mutation(remove_item, thread_sensitive=True) # New
     ```
 
 ### Removed
 
--   `QueryOptions` and `MutationOptions` have been removed. Their values are now passed direct into the hook.
+-   `QueryOptions` and `MutationOptions` have been removed. The value contained within these objects are now passed directly into the hook.
+
+### Fixed
+
+-   Resolved a bug where Django-ReactPy would not properly detect `settings.py:DEBUG`.
 
 ## [3.8.1] - 2024-05-07
 

README.md

@@ -1,4 +1,4 @@
-# <img src="https://raw.githubusercontent.com/reactive-python/reactpy/main/branding/svg/reactpy-logo-square.svg" align="left" height="45"/> ReactPy Django
+# <img src="https://raw.githubusercontent.com/reactive-python/reactpy/main/branding/svg/reactpy-logo-square.svg" align="left" height="45"/> ReactPy-Django
 
 <p>
     <a href="https://github.com/reactive-python/reactpy-django/actions?query=workflow%3ATest">
@@ -21,6 +21,7 @@
 [ReactPy-Django](https://github.com/reactive-python/reactpy-django) is used to add [ReactPy](https://reactpy.dev/) support to an existing **Django project**. This package also turbocharges ReactPy with features such as...
 
 -   [SEO compatible rendering](https://reactive-python.github.io/reactpy-django/latest/reference/settings/#reactpy_prerender)
+-   [Client-Side Python components](https://reactive-python.github.io/reactpy-django/latest/reference/template-tag/#pyscript-component)
 -   [Single page application (SPA) capabilities](https://reactive-python.github.io/reactpy-django/latest/reference/router/#django-router)
 -   [Distributed computing](https://reactive-python.github.io/reactpy-django/latest/reference/settings/#reactpy_default_hosts)
 -   [Performance enhancements](https://reactive-python.github.io/reactpy-django/latest/reference/settings/#performance-settings)
@@ -82,7 +83,7 @@ def hello_world(recipient: str):
 
 <!--py-code-end-->
 
-## [`my_app/templates/my-template.html`](https://docs.djangoproject.com/en/dev/topics/templates/)
+## [`my_app/templates/my_template.html`](https://docs.djangoproject.com/en/dev/topics/templates/)
 
 <!--html-header-start-->
 

docs/examples/html/pyscript-component.html

@@ -0,0 +1,14 @@
+{% load reactpy %}
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>ReactPy</title>
+    {% pyscript_setup %}
+</head>
+
+<body>
+    {% pyscript_component "./example_project/my_app/components/hello_world.py" %}
+</body>
+
+</html>

docs/examples/html/pyscript-initial-object.html

@@ -0,0 +1,3 @@
+<body>
+    {% pyscript_component "./example_project/my_app/components/root.py" initial=my_initial_object %}
+</body>

docs/examples/html/pyscript-initial-string.html

@@ -0,0 +1,3 @@
+<body>
+    {% pyscript_component "./example_project/my_app/components/root.py" initial="<div> Loading ... </div>" %}
+</body>

docs/examples/html/pyscript-js-module.html

@@ -0,0 +1,14 @@
+{% load reactpy %}
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>ReactPy</title>
+    {% pyscript_setup extra_js='{"/static/moment.js":"moment"}' %}
+</head>
+
+<body>
+    {% component "example_project.my_app.components.root.py" %}
+</body>
+
+</html>

docs/examples/html/pyscript-multiple-files.html

@@ -0,0 +1,15 @@
+{% load reactpy %}
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>ReactPy</title>
+    {% pyscript_setup %}
+</head>
+
+<body>
+    {% pyscript_component "./example_project/my_app/components/root.py"
+    "./example_project/my_app/components/child.py" %}
+</body>
+
+</html>

docs/examples/html/pyscript-root.html

@@ -0,0 +1,3 @@
+<body>
+    {% pyscript_component "./example_project/my_app/components/main.py" root="main" %}
+</body>

docs/examples/html/pyscript-setup-config-object.html

@@ -0,0 +1,4 @@
+<head>
+    <title>ReactPy</title>
+    {% pyscript_setup config=my_config_object %}
+</head>