Merge pull request #1 from jrobichaud/asgi

Partially rewrite django-suspense to use StreamingResponse

Author: paqstd-dev

.github/workflows/tests.yml

@@ -15,7 +15,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        python-version: ["3.8", "3.9", "3.10", "3.11"]
+        python-version: ["3.9", "3.10", "3.11", "3.12", "3.13"]
 
     steps:
       - uses: actions/checkout@v4

README.md

@@ -6,7 +6,9 @@
 
 Django Suspense is small package to easily display a fallback in templates until children have finished loading.
 
+
 ## Quick start
+
 ### 1. Install package:
 To get started, install the package from [pypi](https://pypi.org/project/django-suspense/):
 ```bash
@@ -42,36 +44,24 @@ TEMPLATES = [
 ```
 If you choose not use it as a built-in, you will need to add `{% load suspense %}` to the top of your template whenever you want to use suspense.
 
-### 2. Add `suspense` to `urls.py`:
-This is necessary because some parts of the pages will be loaded asynchronously (via http).
-```python
-from django.urls import include, path
 
-
-urlpatterns = [
-    ...,
-    path('/_suspense/', include('suspense.urls'))
-]
-```
-
-### 3. Create view with slow lazy load object:
+### 2. Create view with slow lazy load object:
 Because django executes database queries lazily, they may sometimes not work as expected. Let's try to create a very slow but lazy object and write a view function:
 ```python
+from suspense.shortcuts import render
+
 # app/views.py
 def view(request):
     def obj():
         import time
 
-        i = 0
-        while i < 10:
-            yield i
-            i += 1
-            time.sleep(1)
+        time.sleep(1)
+        return range(10)
 
     return render(request, 'template.html', {'obj': obj})
 ```
 
-### 4. Use `suspense` in your template:
+### 3. Use `suspense` in your template:
 Let's now add the output of the received data to the template. At this point, we still haven't made a database query, so we can easily and quickly show the template right away.
 ```html
 {% load suspense %}
@@ -92,7 +82,47 @@ Let's now add the output of the received data to the template. At this point, we
 ```
 Once obj is ready for use, we will show it. But until it is ready, fallback works. While we are waiting for the data to be displayed, a request is made on the client side.
 
-### 5. Hooray! Everything is ready to use it.
+### 4. Hooray! Everything is ready to use it.
+
+
+## Troubleshooting
+
+### Safari delay in rendering
+
+On Safari if your webpage is very light/simple, you may experience a delay in rendering.
+
+Ex: the page renders only after some django-suspense or all content is downloaded.
+
+WebKit has an issue with streaming responses requiring a certain amount of visible content before to actually start rendering.
+
+See [webkit issue #252413](https://bugs.webkit.org/show_bug.cgi?id=252413)
+
+If you are experiencing this issue, you can use the additional `{% webkit_extra_invisible_bytes %}` template tag to add a few extra invisible bytes in Safari.
+
+```html
+{% load suspense %}
+
+{% webkit_extra_invisible_bytes %}
+```
+
+By default the `webkit_extra_invisible_bytes` adds 200 bytes but you can specify a different amount:
+
+```html
+{% webkit_extra_invisible_bytes 300 %}
+```
+
+### Content Security Policy (CSP) nonce error because of `strict-dynamic`
+
+If you are using a Content Security Policy (CSP) with `nonce` and [`strict-dynamic`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#strict-dynamic), you may need to add the `nonce` attribute to the script tag.
+
+You can override the `suspense/replacer.html` template and add the `nonce` attribute to the script tag.
+
+With [django-csp](https://django-csp.readthedocs.io/en/latest/nonce.html#middleware):
+
+```html
+{% extends "suspense/replacer.html" %}
+{% block script_attributes %}nonce="{{request.csp_nonce}}"{% endblock %}
+```
 
 
 ## Contributing

config/tests.py

@@ -0,0 +1,28 @@
+DEBUG = True
+
+TEMPLATES = [
+    {
+        'BACKEND': 'django.template.backends.django.DjangoTemplates',
+        'DIRS': ["tests/templates"],
+        'APP_DIRS': True,
+        'OPTIONS': {
+            'context_processors': [
+                'django.template.context_processors.debug',
+                'django.template.context_processors.request',
+                'django.contrib.auth.context_processors.auth',
+                'django.contrib.messages.context_processors.messages',
+            ],
+        },
+    },
+]
+INSTALLED_APPS = [
+    'django.contrib.auth',
+    'django.contrib.contenttypes',
+    'suspense',
+]
+
+TIME_ZONE = 'UTC'
+
+USE_I18N = True
+
+USE_TZ = True

config/urls.py

@@ -1,5 +1 @@
-from django.urls import include, path
-
-urlpatterns = [
-    path('/suspense/', include('suspense.urls')),
-]
+urlpatterns = []

example/README.md

@@ -30,5 +30,5 @@ This command will add several posts with title and content.
 ## Run server
 Now that everything is ready, you can start the local server:
 ```bash
-python manage.py runserver
+PYTHONPATH=$PWD/../ ./manage.py runserver
 ```

example/example/urls.py

@@ -3,6 +3,5 @@
 
 urlpatterns = [
     path('', include('posts.urls')),
-    path('_suspense/', include('suspense.urls')),
     path('admin/', admin.site.urls),
 ]

example/posts/templates/posts/all.html

@@ -3,6 +3,8 @@
 {% load suspense %}
 
 {% block content %}
+  {% webkit_extra_invisible_bytes %}
+
   <aside class="py-8 lg:py-24 bg-gray-50">
     <div class="px-4 mx-auto max-w-screen-xl">
       <h2 class="mb-8 text-2xl font-bold text-gray-900">

example/posts/urls.py

@@ -1,5 +1,9 @@
 from django.urls import path
 
-from .views import post, posts
+from .views import PostTemplateView, post, posts
 
-urlpatterns = [path('', posts), path('<str:slug>/', post)]
+urlpatterns = [
+    path('', posts),
+    path('class-view/', PostTemplateView.as_view()),
+    path('<str:slug>/', post),
+]

example/posts/views.py

@@ -1,15 +1,25 @@
 from django.shortcuts import get_object_or_404, render
 
+from suspense.shortcuts import render as suspense_render
+from suspense.views import SuspenseTemplateView
+
 from .models import Post
 
 
 def posts(request):
     posts = Post.objects.all()
 
-    return render(request, 'posts/all.html', {'posts': posts})
+    return suspense_render(request, 'posts/all.html', {'posts': posts})
 
 
 def post(request, slug):
     post = get_object_or_404(Post, slug=slug)
 
     return render(request, 'posts/post.html', {'post': post})
+
+
+class PostTemplateView(SuspenseTemplateView):
+    template_name = 'posts/all.html'
+
+    def get_context_data(self, **kwargs):
+        return {'posts': Post.objects.all()}

example/requirements.txt

@@ -2,4 +2,4 @@ asgiref==3.7.2
 Django==4.2.7
 sqlparse==0.4.4
 
-django-suspense
+#django-suspense