feat: use outerHTML instead innerHTML, remove script after execute (#2)

* feat: changed innerHTML to outerHTML & auto-remove loader script

* feat(tests): added matrix python x django

Author: paqstd-dev

.github/workflows/release.yml

@@ -11,10 +11,10 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - name: Set up Python 3.11
-        uses: actions/setup-python@v4
+      - name: Set up Python 3.12
+        uses: actions/setup-python@v5
         with:
-          python-version: "3.11"
+          python-version: 3.12
 
       - name: Build source and wheel distributions
         run: |

.github/workflows/tests.yml

@@ -5,46 +5,85 @@ on:
     branches: [main]
     paths:
       - '**.py'
+      - 'pyproject.toml'
   pull_request:
     branches: [main]
     paths:
       - '**.py'
+      - 'pyproject.toml'
 
 jobs:
   tests:
     runs-on: ubuntu-latest
     strategy:
+      fail-fast: false
       matrix:
-        python-version: ["3.9", "3.10", "3.11", "3.12", "3.13"]
-
+        # https://docs.djangoproject.com/en/5.1/faq/install/#what-python-version-can-i-use-with-django
+        include:
+          # 3.9  -- 3.2, 4.0, 4.1, 4.2
+          - python-version: "3.9"
+            django-version: "3.2"
+          - python-version: "3.9"
+            django-version: "4.0"
+          - python-version: "3.9"
+            django-version: "4.1"
+          - python-version: "3.9"
+            django-version: "4.2"
+          # 3.10 -- 3.2, 4.0, 4.1, 4.2, 5.0, 5.1
+          - python-version: "3.10"
+            django-version: "3.2"
+          - python-version: "3.10"
+            django-version: "4.0"
+          - python-version: "3.10"
+            django-version: "4.1"
+          - python-version: "3.10"
+            django-version: "4.2"
+          - python-version: "3.10"
+            django-version: "5.0"
+          - python-version: "3.10"
+            django-version: "5.1"
+          # 3.11 -- 4.1, 4.2, 5.0, 5.1
+          - python-version: "3.11"
+            django-version: "4.1"
+          - python-version: "3.11"
+            django-version: "4.2"
+          - python-version: "3.11"
+            django-version: "5.0"
+          - python-version: "3.11"
+            django-version: "5.1"
+          # 3.12 -- 4.2, 5.0, 5.1
+          - python-version: "3.12"
+            django-version: "4.2"
+          - python-version: "3.12"
+            django-version: "5.0"
+          - python-version: "3.12"
+            django-version: "5.1"
+          # 3.13 -- 5.1
+          - python-version: "3.13"
+            django-version: "5.1"
     steps:
       - uses: actions/checkout@v4
 
       - name: Set up Python ${{ matrix.python-version }}
-        uses: actions/setup-python@v4
+        uses: actions/setup-python@v5
         with:
           python-version: ${{ matrix.python-version }}
 
+      - uses: pre-commit/[email protected]
+        if: matrix.python-version == 3.11
+
       - name: Install dependencies
         run: |
           pip install pytest pytest-django pytest-cov
-          pip install -r requirements.txt
+          pip install "Django~=${{ matrix.django-version }}"
 
       - name: Run tests
         run: |
           pytest --cov
 
       - name: Upload coverage reports to Codecov
-        uses: codecov/codecov-action@v3
+        # optimal value
+        if: matrix.python-version == 3.10 && matrix.django-version == 5.0
+        uses: codecov/codecov-action@v5
         env:
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
-
-  pre-commit:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - name: Set up Python
-        uses: actions/setup-python@v4
-        with:
-          python-version: 3.11
-      - uses: pre-commit/[email protected]

README.md

@@ -32,12 +32,9 @@ 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",
+                # ... list of default processors
             ],
-            "builtins": ["suspense.templatetags.suspense"],
+            "builtins": ["suspense.templatetags.suspense"], # <--
         },
     },
 ]
@@ -63,25 +60,25 @@ def view(request):
 
 ### 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
+```jinja
 {% load suspense %}
 
-<div class="list">
+<ul>
     {% suspense %}
         {% fallback %}
-            <div class="skeleton">Loading ... </div>
+            <li class="skeleton">Loading ... </li>
         {% endfallback %}
 
-        <ul>
-            {% for data in obj %}
-                <li>{{ data }}</li>
-            {% endfor %}
-        </ul>
+        {% for data in obj %}
+            <li>{{ data }}</li>
+        {% endfor %}
     {% endsuspense %}
-</div>
+</ul>
 ```
 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.
 
+> Suspense does not add additional DOM elements after rendering the final result. That's why syntactically the code above will be valid.
+
 ### 4. Hooray! Everything is ready to use it.
 
 
@@ -99,15 +96,15 @@ 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
+```jinja
 {% load suspense %}
 
 {% webkit_extra_invisible_bytes %}
 ```
 
 By default the `webkit_extra_invisible_bytes` adds 200 bytes but you can specify a different amount:
 
-```html
+```jinja
 {% webkit_extra_invisible_bytes 300 %}
 ```
 
@@ -119,8 +116,9 @@ You can override the `suspense/replacer.html` template and add the `nonce` attri
 
 With [django-csp](https://django-csp.readthedocs.io/en/latest/nonce.html#middleware):
 
-```html
+```jinja
 {% extends "suspense/replacer.html" %}
+
 {% block script_attributes %}nonce="{{request.csp_nonce}}"{% endblock %}
 ```
 

example/requirements.txt

@@ -1,5 +1,2 @@
-asgiref==3.7.2
-Django==4.2.7
-sqlparse==0.4.4
-
-#django-suspense
+Django>=3.2
+# django-suspense

pyproject.toml

@@ -19,6 +19,8 @@ classifiers = [
     "Framework :: Django :: 3.2",
     "Framework :: Django :: 4.1",
     "Framework :: Django :: 4.2",
+    "Framework :: Django :: 5.0",
+    "Framework :: Django :: 5.1",
     "Intended Audience :: Developers",
     "License :: OSI Approved :: MIT License",
     "Programming Language :: Python",

requirements.txt

@@ -1,3 +1,2 @@
-asgiref==3.7.2
-Django==4.2.6
-sqlparse==0.4.4
+# Supported 3.2, 4.0, 4.1, 4.2, 5.0, 5.1
+Django>=3.2

suspense/templates/suspense/replacer.html

@@ -1,3 +1,4 @@
 <script {% block script_attributes %}{% endblock %}>
-    document.getElementById("suspense-loader-{{uid}}").innerHTML = `{{escaped_string | safe}}`;
+    document.getElementById("suspense-loader-{{uid}}").outerHTML = `{{escaped_string | safe}}`;
+    document.currentScript.remove()
 </script>