3 |
11 | {% endif %}
--------------------------------------------------------------------------------
/django_unicorn/db.py:
--------------------------------------------------------------------------------
1 | from typing import Optional
2 |
3 | from django.db.models import Model
4 |
5 |
6 | class DbModel:
7 | def __init__(self, name: str, model_class: Model, *, defaults: Optional[dict] = None):
8 | if defaults is None:
9 | defaults = {}
10 | self.name = name
11 | self.model_class = model_class
12 | self.defaults = defaults
13 |
--------------------------------------------------------------------------------
/example/unicorn/components/wizard/step2.py:
--------------------------------------------------------------------------------
1 | from django_unicorn.components import UnicornView
2 |
3 |
4 | class Step2View(UnicornView):
5 | address: str
6 | city: str
7 | state: str
8 | zip_code: str
9 |
10 | def mount(self):
11 | self.address = "123 Main St"
12 | self.city = "Anytown"
13 | self.state = "CA"
14 | self.zip_code = "12345"
15 |
--------------------------------------------------------------------------------
/example/unicorn/components/wizard/wizard.py:
--------------------------------------------------------------------------------
1 | from django_unicorn.components import UnicornView
2 |
3 |
4 | class WizardView(UnicornView):
5 | step: int = 1
6 |
7 | def next(self):
8 | self.step += 1
9 |
10 | def previous(self):
11 | self.step -= 1
12 |
13 | def finish(self):
14 | self.step = 3
15 |
16 | def start(self):
17 | self.step = 1
18 |
--------------------------------------------------------------------------------
/example/www/templates/www/text-inputs.html:
--------------------------------------------------------------------------------
1 | {% extends "www/base.html" %}
2 | {% load static unicorn %}
3 |
4 | {% block content %}
5 |
6 | -
4 | {% for name, errors in unicorn.errors.items %}
5 | {% for error in errors %}
6 |
- {{ error.message }} 7 | {% endfor %} 8 | {% endfor %} 9 |
Text inputs
7 | 8 | 9 | 10 | {% unicorn 'text-inputs' key="asdf" %} 11 | 12 | {% unicorn 'text-inputs' key="zxcv" %} 13 | 14 | {% endblock content %} -------------------------------------------------------------------------------- /example/unicorn/templates/unicorn/wizard/step1.html: -------------------------------------------------------------------------------- 1 |
2 |
17 |
--------------------------------------------------------------------------------
/example/www/templates/www/nested.html:
--------------------------------------------------------------------------------
1 | {% extends "www/base.html" %}
2 | {% load static unicorn %}
3 |
4 | {% block content %}
5 |
6 |
14 |
15 | Step 1
3 | 4 |
5 |
6 |
7 |
8 |
9 | Name: {{ name }}
10 |
11 |
12 |
13 |
14 |
15 |
16 | Nested components (table)
16 | 17 | {% unicorn 'nested.table' %} 18 | 19 | {% endblock content %} 20 | -------------------------------------------------------------------------------- /django_unicorn/components/mixins.py: -------------------------------------------------------------------------------- 1 | from django_unicorn.serializer import model_value 2 | 3 | 4 | class ModelValueMixin: 5 | """ 6 | Adds a `value` method to a model similar to `QuerySet.values(*fields)` which serializes 7 | a model into a dictionary with the fields as specified in the `fields` argument. 8 | """ 9 | 10 | def value(self, *fields): 11 | return model_value(self, *fields) 12 | -------------------------------------------------------------------------------- /example/unicorn/components/hello_world.py: -------------------------------------------------------------------------------- 1 | from django.utils.timezone import now 2 | 3 | from django_unicorn.components import UnicornView 4 | 5 | 6 | class HelloWorldView(UnicornView): 7 | template_name = "unicorn/hello-world-test.html" 8 | 9 | name = "World" 10 | 11 | def set_name(self): 12 | self.name = "set_name method called" 13 | return "set_name called at " + now().strftime("%H:%M:%S.%f") 14 | -------------------------------------------------------------------------------- /tests/js/unicorn/init.test.js: -------------------------------------------------------------------------------- 1 | import test from "ava"; 2 | import { init } from "../../../django_unicorn/static/unicorn/js/unicorn.js"; 3 | 4 | test("init unicorn", (t) => { 5 | const actual = init("unicorn/", "X-Unicorn", "unicorn", { NAME: "morphdom" }); 6 | 7 | t.true(actual.messageUrl === "unicorn/"); 8 | t.true(actual.csrfTokenHeaderName === "X-Unicorn"); 9 | t.true(actual.csrfTokenCookieName === "unicorn"); 10 | }); 11 | -------------------------------------------------------------------------------- /example/books/models.py: -------------------------------------------------------------------------------- 1 | from django.db import models 2 | 3 | 4 | class Book(models.Model): 5 | TYPES = ((1, "Hardcover"), (2, "Softcover")) 6 | title = models.CharField(max_length=255) 7 | date_published = models.DateField() 8 | type = models.IntegerField(choices=TYPES, default=1) 9 | 10 | 11 | class Author(models.Model): 12 | name = models.CharField(max_length=1024) 13 | books = models.ManyToManyField(Book) 14 | -------------------------------------------------------------------------------- /example/unicorn/components/nested/filter.py: -------------------------------------------------------------------------------- 1 | from django_unicorn.components import UnicornView 2 | 3 | 4 | class FilterView(UnicornView): 5 | search = "" 6 | 7 | def updated_search(self, query): 8 | self.parent.load_table() 9 | 10 | if query: 11 | self.parent.flavors = list(filter(lambda f: query.lower() in f.name.lower(), self.parent.flavors)) 12 | 13 | self.parent.force_render = True 14 | -------------------------------------------------------------------------------- /example/project/urls.py: -------------------------------------------------------------------------------- 1 | from django.contrib import admin 2 | from django.urls import include, path 3 | 4 | from unicorn.components.hello_world import HelloWorldView 5 | 6 | 7 | urlpatterns = [ 8 | path("admin/", admin.site.urls), 9 | path("", include("www.urls")), 10 | # Include django-unicorn urls 11 | path("unicorn/", include("django_unicorn.urls")), 12 | path("test", HelloWorldView.as_view(), name="test"), 13 | ] 14 | -------------------------------------------------------------------------------- /example/www/views.py: -------------------------------------------------------------------------------- 1 | from django.http.response import Http404 2 | from django.shortcuts import render 3 | from django.template.exceptions import TemplateDoesNotExist 4 | 5 | 6 | def index(request): 7 | return render(request, "www/index.html") 8 | 9 | 10 | def template(request, name): 11 | try: 12 | return render(request, f"www/{name}.html", context={"example": "test"}) 13 | except TemplateDoesNotExist: 14 | raise Http404 15 | -------------------------------------------------------------------------------- /example/unicorn/components/nested/row.py: -------------------------------------------------------------------------------- 1 | from django_unicorn.components import UnicornView 2 | from example.coffee.models import Flavor 3 | 4 | 5 | class RowView(UnicornView): 6 | model: Flavor = None 7 | is_editing = False 8 | is_updated_by_child = False 9 | 10 | def edit(self): 11 | self.is_editing = True 12 | 13 | def cancel(self): 14 | self.is_editing = False 15 | 16 | def save(self): 17 | self.model.save() 18 | self.is_editing = False 19 | -------------------------------------------------------------------------------- /example/unicorn/components/text_inputs.py: -------------------------------------------------------------------------------- 1 | from django.utils.timezone import now 2 | 3 | from django_unicorn.components import UnicornView 4 | 5 | 6 | class TextInputsView(UnicornView): 7 | name = "World" 8 | testing_xss = "Whatever " 9 | 10 | def set_name(self, name=None): 11 | if name: 12 | self.name = name 13 | else: 14 | self.name = "Universe" 15 | 16 | return f"{self.name} - {now().second}" 17 | -------------------------------------------------------------------------------- /tests/js/utils/contains.test.js: -------------------------------------------------------------------------------- 1 | import test from "ava"; 2 | import { contains } from "../../../django_unicorn/static/unicorn/js/utils"; 3 | 4 | test("contains", (t) => { 5 | t.true(contains("abcdefg", "cde")); 6 | }); 7 | 8 | test("not contains", (t) => { 9 | t.false(contains("abcdefg", "xyz")); 10 | }); 11 | 12 | test("undefined contains", (t) => { 13 | t.false(contains(undefined, "xyz")); 14 | }); 15 | 16 | test("null contains", (t) => { 17 | t.false(contains(null, "xyz")); 18 | }); 19 | -------------------------------------------------------------------------------- /django_unicorn/components/__init__.py: -------------------------------------------------------------------------------- 1 | from django_unicorn.components.mixins import ModelValueMixin 2 | from django_unicorn.components.unicorn_view import UnicornField, UnicornView 3 | from django_unicorn.components.updaters import HashUpdate, LocationUpdate, PollUpdate 4 | from django_unicorn.typing import QuerySetType 5 | 6 | __all__ = [ 7 | "QuerySetType", 8 | "UnicornField", 9 | "UnicornView", 10 | "HashUpdate", 11 | "LocationUpdate", 12 | "PollUpdate", 13 | "ModelValueMixin", 14 | ] 15 | -------------------------------------------------------------------------------- /django_unicorn/unicorn-ascii.txt: -------------------------------------------------------------------------------- 1 | 2 | ,/ 3 | // 4 | ,// 5 | __ /| |// 6 | `__/\_ --(/|___/-/ 7 | \|\_-\___ __-_`- /-/ \. 8 | |\_-___,-\_____--/_)' ) \ 9 | \ -_ / __ \( `( __`\| 10 | `\__| |\) (/| 11 | ',--//-| \ | ' / 12 | /,---| \ / 13 | `_/ _,' | | 14 | __/'/ | | 15 | ___/ \ ( ) / 16 | \____/\ 17 | \ 18 | -------------------------------------------------------------------------------- /example/books/migrations/0004_book_type.py: -------------------------------------------------------------------------------- 1 | # Generated by Django 4.2.5 on 2023-10-29 22:53 2 | 3 | from django.db import migrations, models 4 | 5 | 6 | class Migration(migrations.Migration): 7 | dependencies = [ 8 | ("books", "0003_auto_20221110_0400"), 9 | ] 10 | 11 | operations = [ 12 | migrations.AddField( 13 | model_name="book", 14 | name="type", 15 | field=models.IntegerField(choices=[(1, "Hardcover"), (2, "Softcover")], default=1), 16 | ), 17 | ] 18 | -------------------------------------------------------------------------------- /example/unicorn/templates/unicorn/wizard/wizard.html: -------------------------------------------------------------------------------- 1 | {% load unicorn %} 2 |
3 | {% if step == 1 %}
4 | {% unicorn "wizard/step1" id="step1" %}
5 | {% elif step == 2 %}
6 | {% unicorn "wizard/step2" id="step2" %}
7 | {% elif step == 3 %}
8 |
20 |
--------------------------------------------------------------------------------
/tests/js/utils/isEmpty.test.js:
--------------------------------------------------------------------------------
1 | import test from "ava";
2 | import { isEmpty } from "../../../django_unicorn/static/unicorn/js/utils";
3 |
4 | test("undefined isEmpty", (t) => {
5 | t.true(isEmpty(undefined));
6 | });
7 |
8 | test("null isEmpty", (t) => {
9 | t.true(isEmpty(null));
10 | });
11 |
12 | test("{} isEmpty", (t) => {
13 | t.true(isEmpty({}));
14 | });
15 |
16 | test("object isEmpty", (t) => {
17 | t.false(isEmpty({ test: 123 }));
18 | });
19 |
20 | test("empty string isEmpty", (t) => {
21 | t.true(isEmpty(""));
22 | });
23 |
--------------------------------------------------------------------------------
/example/unicorn/templates/unicorn/wizard/step2.html:
--------------------------------------------------------------------------------
1 |
9 | Last step! {{ step }}
10 |
11 |
12 |
13 |
14 |
15 |
16 | {% else %}
17 | UNKNOWN STEP! {{ step }}
18 | {% endif %}
19 |
2 |
21 |
--------------------------------------------------------------------------------
/setup.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 |
3 | # This is a temporary solution for the fact that `pip install -e`
4 | # fails when there is not a `setup.py`.
5 |
6 | import json
7 | from configparser import ConfigParser
8 | from distutils.core import setup
9 |
10 |
11 | def project_info():
12 | config = ConfigParser()
13 | config.read("pyproject.toml")
14 | project = config["tool.poetry"]
15 | return {
16 | "name": json.loads(project["name"]),
17 | "version": json.loads(project["version"]),
18 | }
19 |
20 |
21 | setup(**project_info())
22 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | # Helps keep Windows, Mac, Linux on the same page since they handle end of line differently
5 | end_of_line = lf
6 | charset = utf-8
7 | # Auto-trims trailing whitespace
8 | trim_trailing_whitespace = true
9 | # Auto-adds a blank newline to the end of a file
10 | insert_final_newline = true
11 |
12 | [*.scss]
13 | # More common to see 2 spaces in SCSS, HTML, and JS
14 | indent_size = 2
15 |
16 | [*.html]
17 | indent_size = 2
18 |
19 | [*.js]
20 | indent_size = 2
21 |
22 | [*.py]
23 | indent_style = space
24 | indent_size = 4
25 |
--------------------------------------------------------------------------------
/example/unicorn/templates/unicorn/redirects.html:
--------------------------------------------------------------------------------
1 | {% extends "www/base.html" %}
2 | {% load unicorn %}
3 |
4 | {% block content %}
5 |
6 | Step 2
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | Address: {{ address }}
13 | City: {{ city }}
14 | State: {{ state }}
15 | Zip code: {{ zip_code }}
16 |
17 |
18 |
19 |
20 | 13 | City: {{ city }}
14 | State: {{ state }}
15 | Zip code: {{ zip_code }}
16 |
7 |
25 |
26 | {% endblock content %}
--------------------------------------------------------------------------------
/example/unicorn/components/nested/favorite.py:
--------------------------------------------------------------------------------
1 | from django_unicorn.components import UnicornView
2 | from example.coffee.models import Favorite
3 |
4 |
5 | class FavoriteView(UnicornView):
6 | model: Favorite = None
7 | is_editing = False
8 |
9 | def updated(self, name, value):
10 | if not self.model:
11 | self.model = Favorite(flavor_id=self.parent.model.id, is_favorite=value)
12 |
13 | self.model.save()
14 | self.parent.is_updated_by_child = value
15 | self.parent.parent.favorite_count += 1 if value else -1
16 |
17 | self.parent.parent.force_render = True
18 |
--------------------------------------------------------------------------------
/tests/js/utils/toKebabCase.test.js:
--------------------------------------------------------------------------------
1 | import test from "ava";
2 | import { toKebabCase } from "../../../django_unicorn/static/unicorn/js/utils";
3 |
4 | test("Enter to kebab case", (t) => {
5 | t.is(toKebabCase("Enter"), "enter");
6 | });
7 |
8 | test("Escape to kebab case", (t) => {
9 | t.is(toKebabCase("Escape"), "escape");
10 | });
11 |
12 | test("Null to empty string", (t) => {
13 | t.is(toKebabCase(null), "");
14 | });
15 |
16 | test("Empty string to empty string", (t) => {
17 | t.is(toKebabCase(""), "");
18 | });
19 |
20 | test("One space string to empty string", (t) => {
21 | t.is(toKebabCase(" "), " ");
22 | });
23 |
--------------------------------------------------------------------------------
/.github/workflows/js.yml:
--------------------------------------------------------------------------------
1 | name: JavaScript
2 | on:
3 | push:
4 | workflow_dispatch:
5 |
6 | jobs:
7 | test:
8 | runs-on: ubuntu-latest
9 |
10 | steps:
11 | - uses: actions/checkout@v4.1.1
12 | with:
13 | fetch-depth: 1
14 |
15 | - name: Set up node
16 | uses: actions/setup-node@v4.0.2
17 |
18 | - name: Install node packages
19 | run: npm install
20 |
21 | - name: See if unicorn.min.js is up-to-date
22 | run: |
23 | npm run build
24 | git diff --stat --exit-code
25 |
26 | - name: Test with ava
27 | run: npm run-script test
28 |
--------------------------------------------------------------------------------
/example/www/urls.py:
--------------------------------------------------------------------------------
1 | from django.urls import path
2 |
3 | from example.unicorn.components.direct_view import DirectViewView
4 | from example.unicorn.components.redirects import RedirectsView
5 | from example.www import views
6 |
7 |
8 | app_name = "www"
9 |
10 | urlpatterns = [
11 | path("", views.index, name="index"),
12 | path(
13 | "direct-view",
14 | DirectViewView.as_view(),
15 | name="direct-view",
16 | ),
17 | path(
18 | "redirects",
19 | RedirectsView.as_view(),
20 | name="redirects",
21 | ),
22 | path("Redirects
8 | 9 |
10 | Update Location
11 |
12 | Current location count: {{ location_count }} 13 |
14 |
15 | 12 | Current location count: {{ location_count }} 13 |
16 | Update Hash
17 |
18 | Current hash count: {{ hash_count }} 19 |
20 |
21 | 18 | Current hash count: {{ hash_count }} 19 |
22 | Redirect
23 |
24 | Index
7 | 8 | 11 | 12 | 15 | 16 | 17 | {% unicorn 'unicorn.components.hello_world.HelloWorldView' name=abcdf %} 18 | 19 | {% endblock content %} 20 | -------------------------------------------------------------------------------- /example/unicorn/components/validation.py: -------------------------------------------------------------------------------- 1 | from datetime import datetime 2 | 3 | from django_unicorn.components import UnicornView 4 | 5 | from ..forms import ValidationForm 6 | 7 | 8 | class ValidationView(UnicornView): 9 | form_class = ValidationForm 10 | 11 | text = "hello" 12 | number = "" 13 | date_time = datetime(2020, 9, 13, 17, 45, 14) 14 | email = "" 15 | 16 | def set_text_no_validation(self): 17 | self.text = "no validation" 18 | 19 | def set_text_with_validation(self): 20 | self.text = "validation" 21 | self.validate() 22 | 23 | def set_number(self, number): 24 | self.number = number 25 | -------------------------------------------------------------------------------- /example/books/migrations/0001_initial.py: -------------------------------------------------------------------------------- 1 | # Generated by Django 3.0.8 on 2020-08-22 20:55 2 | 3 | from django.db import migrations, models 4 | 5 | 6 | class Migration(migrations.Migration): 7 | 8 | initial = True 9 | 10 | dependencies = [ 11 | ] 12 | 13 | operations = [ 14 | migrations.CreateModel( 15 | name='Book', 16 | fields=[ 17 | ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')), 18 | ('title', models.CharField(max_length=255)), 19 | ('date_published', models.DateField()), 20 | ], 21 | ), 22 | ] 23 | -------------------------------------------------------------------------------- /django_unicorn/typing.py: -------------------------------------------------------------------------------- 1 | from typing import Generic, Iterator, TypeVar 2 | 3 | from django.db.models import Model, QuerySet 4 | 5 | M_co = TypeVar("M_co", bound=Model, covariant=True) 6 | 7 | 8 | class QuerySetType(Generic[M_co], QuerySet): 9 | """ 10 | Type for QuerySet that can be used for a typehint in components. 11 | """ 12 | 13 | # This is based on https://github.com/Vieolo/django-hint/blob/97e22bf/django_hint/typehint.py#L167, 14 | # although https://github.com/typeddjango/django-stubs/blob/2a732fd/django-stubs/db/models/manager.pyi#L28 15 | # might be a better long-term solution. 16 | 17 | def __iter__(self) -> Iterator[M_co]: 18 | ... 19 | -------------------------------------------------------------------------------- /example/books/migrations/0002_author.py: -------------------------------------------------------------------------------- 1 | # Generated by Django 3.1.7 on 2021-06-17 14:36 2 | 3 | from django.db import migrations, models 4 | 5 | 6 | class Migration(migrations.Migration): 7 | 8 | dependencies = [ 9 | ('books', '0001_initial'), 10 | ] 11 | 12 | operations = [ 13 | migrations.CreateModel( 14 | name='Author', 15 | fields=[ 16 | ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')), 17 | ('name', models.CharField(max_length=1024)), 18 | ('books', models.ManyToManyField(to='books.Book')), 19 | ], 20 | ), 21 | ] 22 | -------------------------------------------------------------------------------- /example/coffee/migrations/0002_auto_20201205_1450.py: -------------------------------------------------------------------------------- 1 | # Generated by Django 3.1.3 on 2020-12-05 14:50 2 | 3 | from django.db import migrations, models 4 | 5 | 6 | class Migration(migrations.Migration): 7 | 8 | dependencies = [ 9 | ('coffee', '0001_initial'), 10 | ] 11 | 12 | operations = [ 13 | migrations.AddField( 14 | model_name='flavor', 15 | name='decimal_value', 16 | field=models.DecimalField(decimal_places=2, max_digits=10, null=True), 17 | ), 18 | migrations.AddField( 19 | model_name='flavor', 20 | name='float_value', 21 | field=models.FloatField(null=True), 22 | ), 23 | ] 24 | -------------------------------------------------------------------------------- /tests/js/utils/toRegExp.test.js: -------------------------------------------------------------------------------- 1 | import test from "ava"; 2 | import { toRegExp } from "../../../django_unicorn/static/unicorn/js/utils"; 3 | 4 | test("To regexp 'test-*'", (t) => { 5 | t.deepEqual(toRegExp("test-*"), /(test-)[a-zA-Z0-9_:.\-]*/); 6 | }); 7 | 8 | test("To regexp '*-test'", (t) => { 9 | t.deepEqual(toRegExp("*-test"), /[a-zA-Z0-9_:.\-]*(-test)/); 10 | }); 11 | 12 | test("To regexp 'test-*-final'", (t) => { 13 | t.deepEqual(toRegExp("test-*-final"), /(test-)[a-zA-Z0-9_:.\-]*(-final)/); 14 | }); 15 | 16 | test("To regexp 'test-*-v*-final'", (t) => { 17 | t.deepEqual( 18 | toRegExp("test-*-v*-final"), 19 | /(test-)[a-zA-Z0-9_:.\-]*(-v)[a-zA-Z0-9_:.\-]*(-final)/ 20 | ); 21 | }); 22 | -------------------------------------------------------------------------------- /django_unicorn/static/unicorn/js/morpher.js: -------------------------------------------------------------------------------- 1 | import { MorphdomMorpher } from "./morphers/morphdom.js"; 2 | import { AlpineMorpher } from "./morphers/alpine.js"; 3 | import { isEmpty } from "./utils.js"; 4 | 5 | const MORPHER_CLASSES = { 6 | morphdom: MorphdomMorpher, 7 | alpine: AlpineMorpher, 8 | }; 9 | 10 | export function getMorpher(morpherSettings) { 11 | const morpherName = morpherSettings.NAME; 12 | 13 | if (isEmpty(morpherName)) { 14 | throw Error(" Missing morpher name"); 15 | } 16 | 17 | const MorpherClass = MORPHER_CLASSES[morpherName]; 18 | 19 | if (MorpherClass) { 20 | return new MorpherClass(morpherSettings); 21 | } 22 | 23 | throw Error(`Unknown morpher: ${morpherName}`); 24 | } 25 | -------------------------------------------------------------------------------- /docs/Makefile: -------------------------------------------------------------------------------- 1 | # Minimal makefile for Sphinx documentation 2 | # 3 | 4 | # You can set these variables from the command line, and also 5 | # from the environment for the first two. 6 | SPHINXOPTS ?= 7 | SPHINXBUILD ?= sphinx-build 8 | SOURCEDIR = source 9 | BUILDDIR = build 10 | 11 | # Put it first so that "make" without argument is like "make help". 12 | help: 13 | @$(SPHINXBUILD) -M help "$(SOURCEDIR)" "$(BUILDDIR)" $(SPHINXOPTS) $(O) 14 | 15 | .PHONY: help Makefile 16 | 17 | # Catch-all target: route all unknown targets to Sphinx using the new 18 | # "make mode" option. $(O) is meant as a shortcut for $(SPHINXOPTS). 19 | %: Makefile 20 | @$(SPHINXBUILD) -M $@ "$(SOURCEDIR)" "$(BUILDDIR)" $(SPHINXOPTS) $(O) 21 | -------------------------------------------------------------------------------- /example/manage.py: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env python 2 | """Django's command-line utility for administrative tasks.""" 3 | import os 4 | import sys 5 | 6 | 7 | def main(): 8 | os.environ.setdefault("DJANGO_SETTINGS_MODULE", "project.settings") 9 | try: 10 | from django.core.management import execute_from_command_line 11 | except ImportError as exc: 12 | raise ImportError( 13 | "Couldn't import Django. Are you sure it's installed and " 14 | "available on your PYTHONPATH environment variable? Did you " 15 | "forget to activate a virtual environment?" 16 | ) from exc 17 | execute_from_command_line(sys.argv) 18 | 19 | 20 | if __name__ == "__main__": 21 | main() 22 | -------------------------------------------------------------------------------- /example/static/svg/oval.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [adamghill] # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 13 | -------------------------------------------------------------------------------- /example/books/migrations/0003_auto_20221110_0400.py: -------------------------------------------------------------------------------- 1 | # Generated by Django 3.2.15 on 2022-11-10 04:00 2 | 3 | from django.db import migrations, models 4 | 5 | 6 | class Migration(migrations.Migration): 7 | 8 | dependencies = [ 9 | ('books', '0002_author'), 10 | ] 11 | 12 | operations = [ 13 | migrations.AlterField( 14 | model_name='author', 15 | name='id', 16 | field=models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID'), 17 | ), 18 | migrations.AlterField( 19 | model_name='book', 20 | name='id', 21 | field=models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID'), 22 | ), 23 | ] 24 | -------------------------------------------------------------------------------- /tests/js/element/poll.test.js: -------------------------------------------------------------------------------- 1 | import test from "ava"; 2 | import { getElement } from "../utils.js"; 3 | 4 | test("poll", (t) => { 5 | const html = ""; 6 | const element = getElement(html); 7 | 8 | t.is(element.poll.method, "test()"); 9 | t.is(element.poll.timing, 2000); 10 | }); 11 | 12 | test("poll-1000", (t) => { 13 | const html = ""; 14 | const element = getElement(html); 15 | 16 | t.is(element.poll.timing, 1000); 17 | }); 18 | 19 | test("poll.disable", (t) => { 20 | const html = 21 | ""; 22 | const element = getElement(html); 23 | 24 | t.is(element.poll.timing, 2000); 25 | t.is(element.poll.disableData, "disabled_poll"); 26 | }); 27 | -------------------------------------------------------------------------------- /example/coffee/migrations/0006_favorite.py: -------------------------------------------------------------------------------- 1 | # Generated by Django 3.2.16 on 2023-02-14 00:02 2 | 3 | from django.db import migrations, models 4 | import django.db.models.deletion 5 | 6 | 7 | class Migration(migrations.Migration): 8 | 9 | dependencies = [ 10 | ('coffee', '0005_auto_20221110_0400'), 11 | ] 12 | 13 | operations = [ 14 | migrations.CreateModel( 15 | name='Favorite', 16 | fields=[ 17 | ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')), 18 | ('is_favorite', models.BooleanField(default=False)), 19 | ('flavor', models.OneToOneField(on_delete=django.db.models.deletion.CASCADE, to='coffee.flavor')), 20 | ], 21 | ), 22 | ] 23 | -------------------------------------------------------------------------------- /example/unicorn/components/redirects.py: -------------------------------------------------------------------------------- 1 | from django.shortcuts import redirect 2 | from django.utils.timezone import now 3 | 4 | from django_unicorn.components import HashUpdate, LocationUpdate, UnicornView 5 | 6 | 7 | class RedirectsView(UnicornView): 8 | location_count: int = 0 9 | hash_count: int = 0 10 | redirect_count: int = 0 11 | 12 | def update_location(self): 13 | self.location_count += 1 14 | 15 | return LocationUpdate( 16 | redirect(f"/redirects#{self.location_count}"), 17 | title=f"{self.location_count}", 18 | ) 19 | 20 | def update_hash(self): 21 | self.hash_count += 1 22 | 23 | return HashUpdate(f"#{self.hash_count}") 24 | 25 | def do_redirect(self): 26 | return redirect(f"/redirects#{now().timestamp()}") 27 | -------------------------------------------------------------------------------- /example/coffee/management/commands/import_flavors.py: -------------------------------------------------------------------------------- 1 | import csv 2 | 3 | from django.core.management.base import BaseCommand, CommandError 4 | 5 | from ...models import Favorite, Flavor 6 | 7 | 8 | class Command(BaseCommand): 9 | def handle(self, *args, **options): 10 | with open("example/coffee/management/commands/flavors.csv", "r") as f: 11 | csv_reader = csv.reader(f) 12 | 13 | for row in csv_reader: 14 | next(csv_reader) 15 | 16 | name = row[0] 17 | label = row[1] 18 | parent_name = row[2] 19 | 20 | parent = Flavor.objects.filter(name=parent_name).first() 21 | flavor = Flavor(name=name, label=label, parent=parent) 22 | flavor.save() 23 | Favorite.objects.create(flavor=flavor) 24 | -------------------------------------------------------------------------------- /example/coffee/migrations/0001_initial.py: -------------------------------------------------------------------------------- 1 | # Generated by Django 3.0.8 on 2020-09-29 02:04 2 | 3 | from django.db import migrations, models 4 | import django.db.models.deletion 5 | 6 | 7 | class Migration(migrations.Migration): 8 | 9 | initial = True 10 | 11 | dependencies = [ 12 | ] 13 | 14 | operations = [ 15 | migrations.CreateModel( 16 | name='Flavor', 17 | fields=[ 18 | ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')), 19 | ('name', models.CharField(max_length=255)), 20 | ('label', models.CharField(max_length=255)), 21 | ('parent', models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.SET_NULL, to='coffee.Flavor')), 22 | ], 23 | ), 24 | ] 25 | -------------------------------------------------------------------------------- /tests/views/test_unicorn_model.py: -------------------------------------------------------------------------------- 1 | from django.db.models import Model 2 | from django.db.models.fields import CharField 3 | 4 | from django_unicorn.components import UnicornView 5 | from django_unicorn.views.utils import set_property_from_data 6 | 7 | 8 | class FakeModel(Model): 9 | name = CharField(max_length=255) 10 | 11 | class Meta: 12 | app_label = "www" 13 | 14 | 15 | class ModelPropertyView(UnicornView): 16 | model = FakeModel(name="fake_model") 17 | 18 | 19 | def test_set_property_from_data_model(): 20 | component = ModelPropertyView(component_name="test", component_id="test_set_property_from_data_model") 21 | assert "fake_model" == component.model.name 22 | 23 | set_property_from_data(component, "model", {"name": "fake_model_updated"}) 24 | 25 | assert "fake_model_updated" == component.model.name 26 | -------------------------------------------------------------------------------- /tests/urls.py: -------------------------------------------------------------------------------- 1 | from django.shortcuts import render 2 | from django.urls import include, path 3 | from django.views.generic import TemplateView 4 | 5 | 6 | def parent_view(request): 7 | return render(request, "templates/test_parent_template.html") 8 | 9 | 10 | def parent_implicit_view(request): 11 | return render(request, "templates/test_parent_implicit_template.html") 12 | 13 | 14 | urlpatterns = ( 15 | path("test", TemplateView.as_view(template_name="templates/test_template.html")), 16 | path("test-parent", parent_view, name="test-parent"), 17 | path("test-parent-implicit", parent_implicit_view, name="test-parent-implicit"), 18 | path( 19 | "test-parent-template", 20 | TemplateView.as_view(template_name="templates/test_parent_template.html"), 21 | ), 22 | path("", include("django_unicorn.urls")), 23 | ) 24 | -------------------------------------------------------------------------------- /example/unicorn/templates/unicorn/hello-world-test.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |
7 | 8 | 9 | 10 | 11 | Hello, {{ name|default:'World' }}! 12 | 13 |
24 |
--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | parserOptions: {
4 | parser: "babel-eslint",
5 | },
6 | env: {
7 | browser: true,
8 | },
9 | extends: ["airbnb-base", "prettier"],
10 | rules: {
11 | "no-console": "warn",
12 | quotes: ["error", "double"],
13 | "max-len": ["error", { code: 140, ignoreStrings: true, ignoreUrls: true }],
14 | "import/no-unresolved": 0,
15 | "linebreak-style": 0,
16 | "comma-dangle": 0,
17 | "import/extensions": ["error", "always", { ignorePackages: true }],
18 | "import/prefer-default-export": 0,
19 | "no-unused-expressions": ["error", { allowTernary: true }],
20 | "no-underscore-dangle": 0,
21 | "no-param-reassign": 0,
22 | "object-curly-newline": ["error", { ObjectPattern: "never" }],
23 | "no-plusplus": ["error", { allowForLoopAfterthoughts: true }],
24 | "max-classes-per-file": 0,
25 | },
26 | };
27 |
--------------------------------------------------------------------------------
/tests/js/component/init.test.js:
--------------------------------------------------------------------------------
1 | import test from "ava";
2 | import { getComponent } from "../utils.js";
3 |
4 | test("unicorn:id", (t) => {
5 | const component = getComponent();
6 |
7 | t.true(component.root != null);
8 | t.is(component.id, "5jypjiyb");
9 | });
10 |
11 | test("unicorn:name", (t) => {
12 | const component = getComponent();
13 |
14 | t.is(component.name, "text-inputs");
15 | });
16 |
17 | test("unicorn:checksum", (t) => {
18 | const component = getComponent();
19 |
20 | t.is(component.checksum, "GXzew3Km");
21 | });
22 |
23 | test("component on non-div", (t) => {
24 | const html = `
25 |
26 | `;
27 | const component = getComponent(html);
28 |
29 | t.is(component.root.attributes.length, 3);
30 | t.is(component.id, "5jypjiyb");
31 | t.is(component.checksum, "GXzew3Km");
32 | });
33 |
--------------------------------------------------------------------------------
/django_unicorn/errors.py:
--------------------------------------------------------------------------------
1 | class UnicornCacheError(Exception):
2 | pass
3 |
4 |
5 | class UnicornViewError(Exception):
6 | pass
7 |
8 |
9 | class ComponentLoadError(Exception):
10 | def __init__(self, *args, locations=None, **kwargs):
11 | super().__init__(*args, **kwargs)
12 | self.locations = locations
13 |
14 |
15 | class ComponentModuleLoadError(ComponentLoadError):
16 | pass
17 |
18 |
19 | class ComponentClassLoadError(ComponentLoadError):
20 | pass
21 |
22 |
23 | class RenderNotModifiedError(Exception):
24 | pass
25 |
26 |
27 | class MissingComponentElementError(Exception):
28 | pass
29 |
30 |
31 | class MissingComponentViewElementError(Exception):
32 | pass
33 |
34 |
35 | class NoRootComponentElementError(Exception):
36 | pass
37 |
38 |
39 | class MultipleRootComponentElementError(Exception):
40 | pass
41 |
42 |
43 | class ComponentNotValidError(Exception):
44 | pass
45 |
--------------------------------------------------------------------------------
/tests/templatetags/test_unicorn.py:
--------------------------------------------------------------------------------
1 | from django.template.base import Parser, Token, TokenType
2 |
3 | from django_unicorn.templatetags.unicorn import unicorn
4 |
5 |
6 | def test_unicorn():
7 | token = Token(TokenType.TEXT, "unicorn 'todo'")
8 | unicorn_node = unicorn(Parser([]), token)
9 |
10 | assert unicorn_node.component_name.resolve({}) == "todo"
11 | assert len(unicorn_node.kwargs) == 0
12 |
13 |
14 | def test_unicorn_kwargs():
15 | token = Token(TokenType.TEXT, "unicorn 'todo' blob='blob'")
16 | unicorn_node = unicorn(Parser([]), token)
17 |
18 | assert unicorn_node.kwargs == {"blob": "blob"}
19 |
20 |
21 | def test_unicorn_args_and_kwargs():
22 | # args after the component name get ignored
23 | token = Token(TokenType.TEXT, "unicorn 'todo' '1' 2 hello='world' test=3 '4'")
24 | unicorn_node = unicorn(Parser([]), token)
25 |
26 | assert unicorn_node.kwargs == {"hello": "world", "test": 3}
27 |
--------------------------------------------------------------------------------
/docs/make.bat:
--------------------------------------------------------------------------------
1 | @ECHO OFF
2 |
3 | pushd %~dp0
4 |
5 | REM Command file for Sphinx documentation
6 |
7 | if "%SPHINXBUILD%" == "" (
8 | set SPHINXBUILD=sphinx-build
9 | )
10 | set SOURCEDIR=source
11 | set BUILDDIR=build
12 |
13 | if "%1" == "" goto help
14 |
15 | %SPHINXBUILD% >NUL 2>NUL
16 | if errorlevel 9009 (
17 | echo.
18 | echo.The 'sphinx-build' command was not found. Make sure you have Sphinx
19 | echo.installed, then set the SPHINXBUILD environment variable to point
20 | echo.to the full path of the 'sphinx-build' executable. Alternatively you
21 | echo.may add the Sphinx directory to PATH.
22 | echo.
23 | echo.If you don't have Sphinx installed, grab it from
24 | echo.http://sphinx-doc.org/
25 | exit /b 1
26 | )
27 |
28 | %SPHINXBUILD% -M %1 %SOURCEDIR% %BUILDDIR% %SPHINXOPTS% %O%
29 | goto end
30 |
31 | :help
32 | %SPHINXBUILD% -M help %SOURCEDIR% %BUILDDIR% %SPHINXOPTS% %O%
33 |
34 | :end
35 | popd
36 |
--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
1 | import filesize from "rollup-plugin-filesize";
2 | import { terser } from "rollup-plugin-terser";
3 | import commonjs from "@rollup/plugin-commonjs";
4 | import resolve from "@rollup/plugin-node-resolve";
5 | import babel from "@rollup/plugin-babel";
6 | import versionInjector from "rollup-plugin-version-injector";
7 |
8 | export default {
9 | input: "django_unicorn/static/unicorn/js/unicorn.js",
10 | output: {
11 | file: "django_unicorn/static/unicorn/js/unicorn.min.js",
12 | format: "iife",
13 | name: "Unicorn",
14 | },
15 | plugins: [
16 | resolve(),
17 | terser({
18 | mangle: true,
19 | }),
20 | versionInjector({
21 | injectInComments: {
22 | fileRegexp: /\.js$/,
23 | tag: "Version: {version}",
24 | dateFormat: "mmmm d, yyyy HH:MM:ss",
25 | }
26 | }),
27 | commonjs({}),
28 | babel({ babelHelpers: "bundled" }),
29 | filesize(),
30 | ],
31 | };
32 |
--------------------------------------------------------------------------------
/tests/components/test_create.py:
--------------------------------------------------------------------------------
1 | import pytest
2 |
3 | from django_unicorn.components.unicorn_view import UnicornView
4 | from django_unicorn.errors import ComponentModuleLoadError
5 |
6 |
7 | def test_no_component():
8 | with pytest.raises(ComponentModuleLoadError) as e:
9 | UnicornView.create(component_id="create-no-component", component_name="create-no-component")
10 |
11 | assert (
12 | e.exconly()
13 | == "django_unicorn.errors.ComponentModuleLoadError: The component module 'create_no_component' could not be loaded." # noqa: E501
14 | )
15 |
16 |
17 | class FakeComponent(UnicornView):
18 | pass
19 |
20 |
21 | def test_components_settings(settings):
22 | settings.UNICORN["COMPONENTS"] = {"create-components-setting": FakeComponent}
23 |
24 | component = UnicornView.create(
25 | component_id="create-components-setting-id", component_name="create-components-setting"
26 | )
27 | assert component
28 |
--------------------------------------------------------------------------------
/example/unicorn/components/todo.py:
--------------------------------------------------------------------------------
1 | from django import forms
2 |
3 | from django_unicorn.components import UnicornView
4 |
5 |
6 | class TodoForm(forms.Form):
7 | task = forms.CharField(min_length=3, max_length=10, required=True)
8 |
9 |
10 | class TodoView(UnicornView):
11 | form_class = TodoForm
12 |
13 | task = ""
14 | tasks = []
15 |
16 | def __init__(self, *args, **kwargs):
17 | super().__init__(**kwargs)
18 | self.hello = kwargs.get("hello", "not available")
19 | print("__init__() self.request", self.request)
20 | print("__init__() self.hello", self.hello)
21 |
22 | def hydrate(self):
23 | print("hydrate() self.hello", self.hello)
24 |
25 | def mount(self):
26 | print("mount() self.hello", self.hello)
27 |
28 | def add(self):
29 | print("add() self.hello", self.hello)
30 |
31 | if self.is_valid():
32 | self.tasks.append(self.task)
33 | self.task = ""
34 |
--------------------------------------------------------------------------------
/django_unicorn/static/unicorn/js/morphers/alpine.js:
--------------------------------------------------------------------------------
1 | export class AlpineMorpher {
2 | constructor(options) {
3 | this.options = options;
4 | }
5 |
6 | morph(dom, htmlElement) {
7 | if (htmlElement) {
8 | // Check if window has Alpine and Alpine Morph
9 | if (!window.Alpine || !window.Alpine.morph) {
10 | throw Error(`
11 | Alpine.js and the Alpine morph plugin can not be found.
12 | See https://www.django-unicorn.com/docs/custom-morphers/#alpine for more information.
13 | `);
14 | }
15 |
16 | return window.Alpine.morph(dom, htmlElement, this.getOptions());
17 | }
18 | }
19 |
20 | getOptions() {
21 | return {
22 | key(el) {
23 | if (el.attributes) {
24 | const key =
25 | el.getAttribute("unicorn:key") || el.getAttribute("u:key") || el.id;
26 |
27 | if (key) {
28 | return key;
29 | }
30 | }
31 |
32 | return el.id;
33 | },
34 | };
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/example/unicorn/components/polling.py:
--------------------------------------------------------------------------------
1 | import time
2 |
3 | from django.contrib import messages
4 | from django.utils.timezone import now
5 |
6 | from django_unicorn.components import PollUpdate, UnicornView
7 |
8 |
9 | class PollingView(UnicornView):
10 | polling_disabled = False
11 | date_example = now()
12 | current_time = now()
13 | counter = 0
14 |
15 | def slow_update(self):
16 | self.counter += 1
17 | time.sleep(0.8) # Simulate slow request
18 |
19 | def get_date(self):
20 | self.current_time = now()
21 | self.date_example = now()
22 |
23 | messages.error(self.request, "get_date called :(")
24 |
25 | return PollUpdate(timing=2000, disable=False, method="get_date_2")
26 |
27 | def get_date_2(self):
28 | self.current_time = now()
29 | self.date_example = now()
30 |
31 | messages.success(self.request, "get_date2 called :)")
32 |
33 | return PollUpdate(timing=1000, disable=False, method="get_date")
34 |
--------------------------------------------------------------------------------
/tests/views/message/test_get_property_value.py:
--------------------------------------------------------------------------------
1 | from tests.views.fake_components import FakeComponent
2 |
3 | from django_unicorn.views.action_parsers.call_method import _get_property_value
4 |
5 |
6 | def test_get_property_value():
7 | component = FakeComponent(component_name="test", component_id="asdf")
8 |
9 | component.check = False
10 | check_value = _get_property_value(component, "check")
11 | assert check_value is False
12 |
13 | component.check = True
14 | check_value = _get_property_value(component, "check")
15 |
16 | assert check_value is True
17 |
18 |
19 | def test_get_property_value_nested():
20 | component = FakeComponent(component_name="test", component_id="asdf")
21 |
22 | component.nested["check"] = False
23 | check_value = _get_property_value(component, "nested.check")
24 | assert check_value is False
25 |
26 | component.nested["check"] = True
27 | check_value = _get_property_value(component, "nested.check")
28 |
29 | assert check_value is True
30 |
--------------------------------------------------------------------------------
/docs/source/queue-requests.md:
--------------------------------------------------------------------------------
1 | # Queue Requests
2 |
3 | This is an experimental feature of that queues up slow-processing component views to prevent race conditions. For simple components this should not be necessary.
4 |
5 | Serialization is turned off by default, but can be enabled in the [settings](settings.md#serial).
6 |
7 | ```{warning}
8 | This feature will be disabled automatically if the cache backend is set to ["django.core.cache.backends.dummy.DummyCache"](https://docs.djangoproject.com/en/stable/topics/cache/#dummy-caching-for-development).
9 |
10 | [Local memory caching](https://docs.djangoproject.com/en/3.1/topics/cache/#local-memory-caching) (the default if no `CACHES` setting is provided) will work fine if the web server only has one process. For more production use cases, consider using [`redis`](https://github.com/jazzband/django-redis), [`Memcache`](https://docs.djangoproject.com/en/stable/topics/cache/#memcached), or [database caching](https://docs.djangoproject.com/en/stable/topics/cache/#database-caching).
11 | ```
12 |
--------------------------------------------------------------------------------
/example/unicorn/templates/unicorn/polling.html:
--------------------------------------------------------------------------------
1 | 6 |
7 | 8 | 9 | 10 | 11 | Hello, {{ name|default:'World' }}! 12 | 13 |
14 | Request path context variable: '{{ request.path }}'
15 |
16 |
17 |
23 |
2 | {% if messages %}
3 |
8 | {% endif %}
9 |
10 |
17 | 18 | 19 |
20 | 21 | date_example: {{ date_example }} | {{ date_example|date:"s" }}
22 | 23 | 24 | 25 | 26 |
27 |
--------------------------------------------------------------------------------
/tests/views/test_is_component_field_model_or_unicorn_field.py:
--------------------------------------------------------------------------------
1 | from django_unicorn.components import UnicornView
2 | from django_unicorn.views.utils import _is_component_field_model_or_unicorn_field
3 | from example.coffee.models import Flavor
4 |
5 |
6 | class TypeHintView(UnicornView):
7 | model: Flavor = None
8 |
9 |
10 | class ModelInstanceView(UnicornView):
11 | model = Flavor()
12 |
13 |
14 | def test_type_hint():
15 | component = TypeHintView(component_name="asdf", component_id="test_type_hint")
16 | name = "model"
17 | actual = _is_component_field_model_or_unicorn_field(component, name)
18 |
19 | assert actual
20 | assert component.model is not None
21 | assert type(component.model) is Flavor
22 |
23 |
24 | def test_model_instance():
25 | component = ModelInstanceView(component_name="asdf", component_id="test_model_instance")
26 | name = "model"
27 | actual = _is_component_field_model_or_unicorn_field(component, name)
28 |
29 | assert actual
30 | assert component.model is not None
31 | assert type(component.model) is Flavor
32 |
--------------------------------------------------------------------------------
/django_unicorn/views/action_parsers/sync_input.py:
--------------------------------------------------------------------------------
1 | from typing import Dict
2 |
3 | from django_unicorn.components import UnicornView
4 | from django_unicorn.views.action_parsers.utils import set_property_value
5 | from django_unicorn.views.objects import ComponentRequest
6 |
7 |
8 | def handle(component_request: ComponentRequest, component: UnicornView, payload: Dict):
9 | property_name = payload.get("name")
10 | property_value = payload.get("value")
11 |
12 | call_resolved_method = True
13 |
14 | # If there is more than one action then only call the resolved methods for the last action in the queue
15 | if len(component_request.action_queue) > 1:
16 | call_resolved_method = False
17 | last_action = component_request.action_queue[-1:][0]
18 |
19 | if last_action.payload.get("name") == property_name and last_action.payload.get("value") == property_value:
20 | call_resolved_method = True
21 |
22 | set_property_value(
23 | component, property_name, property_value, component_request.data, call_resolved_method=call_resolved_method
24 | )
25 |
--------------------------------------------------------------------------------
/tests/js/element/setValue.test.js:
--------------------------------------------------------------------------------
1 | import test from "ava";
2 | import { getElement } from "../utils.js";
3 |
4 | test("setValue()", (t) => {
5 | const html = "";
6 | const element = getElement(html);
7 |
8 | element.setValue("test");
9 | t.is(element.getValue(), "test");
10 | });
11 |
12 | test("setValue() radio with value", (t) => {
13 | const html = "";
14 | const element = getElement(html);
15 |
16 | element.setValue(true);
17 | t.is(element.getValue(), "test");
18 | });
19 |
20 | test("setValue() radio no value", (t) => {
21 | const html = "";
22 | const element = getElement(html);
23 |
24 | element.setValue(true);
25 | t.is(element.getValue(), "on");
26 | });
27 |
28 | test("setValue() checkbox", (t) => {
29 | const html = "";
30 | const element = getElement(html);
31 |
32 | t.false(element.getValue());
33 | element.setValue(true);
34 | t.true(element.getValue());
35 | });
36 |
--------------------------------------------------------------------------------
/example/coffee/migrations/0004_origin_taste.py:
--------------------------------------------------------------------------------
1 | # Generated by Django 3.1.7 on 2021-04-11 18:00
2 |
3 | from django.db import migrations, models
4 |
5 |
6 | class Migration(migrations.Migration):
7 |
8 | dependencies = [
9 | ('coffee', '0003_auto_20210128_0140'),
10 | ]
11 |
12 | operations = [
13 | migrations.CreateModel(
14 | name='Taste',
15 | fields=[
16 | ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
17 | ('name', models.CharField(max_length=255)),
18 | ('flavor', models.ManyToManyField(to='coffee.Flavor')),
19 | ],
20 | ),
21 | migrations.CreateModel(
22 | name='Origin',
23 | fields=[
24 | ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
25 | ('name', models.CharField(max_length=255)),
26 | ('flavor', models.ManyToManyField(related_name='origins', to='coffee.Flavor')),
27 | ],
28 | ),
29 | ]
30 |
--------------------------------------------------------------------------------
/badges/coverage.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2020 Adam Hill
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/example/unicorn/components/js.py:
--------------------------------------------------------------------------------
1 | from django.utils.timezone import now
2 |
3 | from django_unicorn.components import UnicornView
4 |
5 |
6 | class JsView(UnicornView):
7 | states = (
8 | "Alabama",
9 | "Alaska",
10 | "Wisconsin",
11 | "Wyoming",
12 | )
13 | selected_state = ""
14 | select2_datetime = now()
15 | scroll_counter = 0
16 | load_js = False
17 |
18 | def call_javascript(self):
19 | self.call("callAlert", "world")
20 |
21 | def call_javascript_module(self):
22 | self.call("HelloJs.hello", "world!")
23 |
24 | def get_now(self):
25 | self.select2_datetime = now()
26 |
27 | def change_states(self):
28 | self.states = ("Pennsylvania",)
29 |
30 | def select_state(self, val, idx):
31 | print("select_state called", val)
32 | print("select_state called idx", idx)
33 | self.selected_state = val
34 |
35 | def increase_counter(self):
36 | if self.scroll_counter >= 2:
37 | return False
38 |
39 | self.scroll_counter += 1
40 |
41 | class Meta:
42 | javascript_excludes = ("states",)
43 |
--------------------------------------------------------------------------------
/tests/views/message/utils.py:
--------------------------------------------------------------------------------
1 | import time
2 |
3 | import shortuuid
4 |
5 | from django_unicorn.utils import generate_checksum
6 |
7 |
8 | def post_and_get_response(
9 | client,
10 | *,
11 | url="",
12 | data=None,
13 | action_queue=None,
14 | component_id=None,
15 | hash=None, # noqa: A002
16 | return_response=False,
17 | ):
18 | if not data:
19 | data = {}
20 | if not action_queue:
21 | action_queue = []
22 | if not component_id:
23 | component_id = shortuuid.uuid()[:8]
24 |
25 | message = {
26 | "actionQueue": action_queue,
27 | "data": data,
28 | "checksum": generate_checksum(data),
29 | "id": component_id,
30 | "epoch": time.time(),
31 | "hash": hash,
32 | }
33 |
34 | response = client.post(
35 | url,
36 | message,
37 | content_type="application/json",
38 | )
39 |
40 | if return_response:
41 | return response
42 |
43 | try:
44 | return response.json()
45 | except TypeError:
46 | # Return the regular response if no JSON for HttpResponseNotModified
47 | return response
48 |
--------------------------------------------------------------------------------
/django_unicorn/decorators.py:
--------------------------------------------------------------------------------
1 | import logging
2 | import time
3 |
4 | from decorator import decorator
5 | from django.conf import settings
6 |
7 |
8 | @decorator
9 | def timed(func, *args, **kwargs):
10 | """
11 | Decorator that prints out the timing of a function.
12 |
13 | Slightly altered version of https://gist.github.com/bradmontgomery/bd6288f09a24c06746bbe54afe4b8a82.
14 | """
15 | if not settings.DEBUG:
16 | return func(*args, **kwargs)
17 |
18 | logger = logging.getLogger("profile")
19 | start = time.time()
20 | result = func(*args, **kwargs)
21 | end = time.time()
22 |
23 | function_name = func.__name__
24 | arguments = ""
25 |
26 | if args:
27 | arguments = f"{args}, "
28 |
29 | for kwarg_key, kwarg_val in kwargs.items():
30 | if isinstance(kwarg_val, str):
31 | kwarg_val = f"'{kwarg_val}'" # noqa: PLW2901
32 |
33 | arguments = f"{arguments}{kwarg_key}={kwarg_val}, "
34 |
35 | if arguments.endswith(", "):
36 | arguments = arguments[:-2]
37 |
38 | ms = round(end - start, 4)
39 |
40 | logger.debug(f"{function_name}({arguments}): {ms}ms")
41 | return result
42 |
--------------------------------------------------------------------------------
/tests/js/unicorn/getComponent.test.js:
--------------------------------------------------------------------------------
1 | import test from "ava";
2 | import { getComponent } from "../../../django_unicorn/static/unicorn/js/unicorn.js";
3 | import { components } from "../../../django_unicorn/static/unicorn/js/store.js";
4 | import { getComponent as getComponentUtil } from "../utils.js";
5 |
6 | test("getComponent by name", (t) => {
7 | const component = getComponentUtil();
8 | component.name = "text-inputs-name";
9 | components[component.id] = component;
10 |
11 | t.truthy(getComponent("text-inputs-name"));
12 | });
13 |
14 | test("getComponent by key", (t) => {
15 | const component = getComponentUtil();
16 | component.key = "text-inputs-key";
17 | components[component.id] = component;
18 |
19 | t.truthy(getComponent("text-inputs-key"));
20 | });
21 |
22 | test("getComponent missing", (t) => {
23 | const component = getComponentUtil();
24 | component.name = "text-inputs-name";
25 | components[component.id] = component;
26 |
27 | const error = t.throws(
28 | () => {
29 | getComponent("text-inputs-missing");
30 | },
31 | { instanceOf: Error }
32 | );
33 | t.is(error.message, "No component found for: text-inputs-missing");
34 | });
35 |
--------------------------------------------------------------------------------
/tests/js/element/partial.test.js:
--------------------------------------------------------------------------------
1 | import test from "ava";
2 | import { getElement } from "../utils.js";
3 |
4 | test("partial target", (t) => {
5 | const html =
6 | "";
7 | const element = getElement(html);
8 |
9 | t.is(element.partials[0].target, "test-target");
10 | });
11 |
12 | test("partial.id", (t) => {
13 | const html =
14 | "";
15 | const element = getElement(html);
16 |
17 | t.is(element.partials[0].id, "test-id");
18 | });
19 |
20 | test("partial.key", (t) => {
21 | const html =
22 | "";
23 | const element = getElement(html);
24 |
25 | t.is(element.partials[0].key, "test-key");
26 | });
27 |
28 | test("multiple partials", (t) => {
29 | const html =
30 | "";
31 | const element = getElement(html);
32 |
33 | t.is(element.partials[0].id, "test-id");
34 | t.is(element.partials[1].key, "test-key");
35 | });
36 |
--------------------------------------------------------------------------------
/django_unicorn/templates/unicorn/scripts.html:
--------------------------------------------------------------------------------
1 | {% load static %}
2 |
3 | {{ MORPHER|json_script:"unicorn:settings:morpher" }}
4 |
5 | {% if MINIFIED %}
6 |
7 | {% comment %} {% endcomment %}
8 |
9 |
16 | {% else %}
17 |
29 | {% endif %}
30 |
--------------------------------------------------------------------------------
/example/unicorn/components/models.py:
--------------------------------------------------------------------------------
1 | from django_unicorn import QuerySetType, UnicornView
2 | from example.coffee.models import Flavor, Taste
3 |
4 |
5 | class ModelsView(UnicornView):
6 | flavor: Flavor = None
7 | flavors: QuerySetType[Flavor] = Flavor.objects.none()
8 |
9 | def mount(self):
10 | self.flavor = Flavor()
11 | self.refresh_flavors()
12 |
13 | def refresh_flavors(self):
14 | self.flavors = Flavor.objects.all().order_by("-id")[:2]
15 |
16 | def save_flavor(self):
17 | self.flavor.save()
18 | self.flavor = Flavor()
19 | self.refresh_flavors()
20 |
21 | def save(self, flavor_idx: int):
22 | flavor_data = self.flavors[flavor_idx]
23 | flavor_data.save()
24 |
25 | def delete(self, flavor_to_delete: Flavor):
26 | flavor_to_delete.delete()
27 | self.refresh_flavors()
28 |
29 | def available_flavors(self):
30 | return Flavor.objects.all()
31 |
32 | def available_tastes(self):
33 | return Taste.objects.all()
34 |
35 | def model_typehint(self, flavor: Flavor):
36 | print(flavor)
37 |
38 | class Meta:
39 | javascript_exclude = ("flavor.taste_set",)
40 |
--------------------------------------------------------------------------------
/tests/js/unicorn/call.test.js:
--------------------------------------------------------------------------------
1 | import test from "ava";
2 | import { call } from "../../../django_unicorn/static/unicorn/js/unicorn.js";
3 | import { components } from "../../../django_unicorn/static/unicorn/js/store.js";
4 | import { getComponent } from "../utils.js";
5 |
6 | test("call a method", (t) => {
7 | const component = getComponent();
8 | components[component.id] = component;
9 |
10 | component.callMethod = (methodName) => {
11 | t.true(methodName === "testMethod");
12 | };
13 |
14 | call("text-inputs", "testMethod");
15 | });
16 |
17 | test("call a method with string argument", (t) => {
18 | const component = getComponent();
19 | components[component.id] = component;
20 |
21 | component.callMethod = (methodName) => {
22 | t.true(methodName === "testMethod('test1')");
23 | };
24 |
25 | call("text-inputs", "testMethod", "test1");
26 | });
27 |
28 | test("call a method with string and int argument", (t) => {
29 | const component = getComponent();
30 | components[component.id] = component;
31 |
32 | component.callMethod = (methodName) => {
33 | t.true(methodName === "testMethod('test1', 2)");
34 | };
35 |
36 | call("text-inputs", "testMethod", "test1", 2);
37 | });
38 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/docs.yml:
--------------------------------------------------------------------------------
1 | name: 📑 Docs
2 | description: Propose changes and improvements to Django Unicorn Docs.
3 | labels: "📑 docs"
4 | title: "[📑 Docs]: "
5 |
6 | body:
7 | - type: markdown
8 | attributes:
9 | value: |
10 | Thank you for contributing to Django Unicorn! 📑 👩🏻💻 We appreciate your feedback, ideas, and contributions.
11 |
12 | Before filing this issue, please make sure to check if there's already a similar issue opened.
13 |
14 | - type: textarea
15 | id: reason-context
16 | attributes:
17 | label: What Dev Docs changes are you proposing?
18 | description: Why do the Docs need this improvement? What is the motivation for this change?
19 | placeholder: "I would like to contribute to Django Unicorn 📑 by..."
20 | validations:
21 | required: true
22 |
23 | - type: checkboxes
24 | id: terms
25 | attributes:
26 | label: Code of Conduct
27 | description: By submitting this issue, you agree to follow our [Code of Conduct](https://github.com/adamghill/django-unicorn/blob/main/CODE_OF_CONDUCT.md)
28 | options:
29 | - label: I agree to follow this project's Code of Conduct
30 | required: true
--------------------------------------------------------------------------------
/example/unicorn/templates/unicorn/nested/row.html:
--------------------------------------------------------------------------------
1 |
2 | {% load unicorn %}
3 |
11 | poll-id: {{ current_time|date:"s" }}
12 |
13 |
14 | current_time: {{ current_time|date:"s" }}
15 |
16 | 17 | 18 | 19 |
20 | 21 | date_example: {{ date_example }} | {{ date_example|date:"s" }}
22 | 23 | 24 | 25 | 26 |
3 |
28 |
29 |
41 |
42 |
43 |
44 |
45 |
--------------------------------------------------------------------------------
/tests/views/test_unicorn_dict.py:
--------------------------------------------------------------------------------
1 | from django_unicorn.components import UnicornView
2 | from django_unicorn.views.utils import set_property_from_data
3 |
4 |
5 | class DictPropertyView(UnicornView):
6 | dictionary = {"name": "dictionary"} # noqa: RUF012
7 | nested_dictionary = {"nested": {"name": "nested_dictionary"}} # noqa: RUF012
8 |
9 |
10 | def test_set_property_from_data_dict():
11 | component = DictPropertyView(component_name="test", component_id="test_set_property_from_data_dict")
12 | assert "dictionary" == component.dictionary.get("name")
13 |
14 | set_property_from_data(component, "dictionary", {"name": "dictionary_updated"})
15 |
16 | assert "dictionary_updated" == component.dictionary.get("name")
17 |
18 |
19 | def test_set_property_from_data_nested_dict():
20 | component = DictPropertyView(component_name="test", component_id="test_set_property_from_data_nested_dict")
21 | assert "nested_dictionary" == component.nested_dictionary.get("nested").get("name")
22 |
23 | set_property_from_data(
24 | component,
25 | "nested_dictionary",
26 | {"nested": {"name": "nested_dictionary_updated"}},
27 | )
28 |
29 | assert "nested_dictionary_updated" == component.nested_dictionary.get("nested").get("name")
30 |
--------------------------------------------------------------------------------
/SECURITY.md:
--------------------------------------------------------------------------------
1 | # Security Policy
2 |
3 | ## Supported Versions
4 |
5 | The following versions of Django Unicorn are currently supported for security updates:
6 |
7 | | Version | Supported |
8 | | ------- | ------------------ |
9 | | 0.61.x | ✅ Fully supported |
10 |
11 | Please ensure you are using the latest version to receive security updates.
12 |
13 | ---
14 |
15 | ## Reporting a Vulnerability
16 |
17 | We take security issues seriously and appreciate your efforts to responsibly disclose vulnerabilities.
18 |
19 | To report a security vulnerability:
20 |
21 | 1. **Use our GitHub Security Advisory**:
22 | - Navigate to the [Django Unicorn repository](https://github.com/adamghill/django-unicorn).
23 | - Go to the **Security** tab and click **Report a vulnerability**.
24 | 2. **Responsible Disclosure**:
25 | - Do not publicly disclose the vulnerability until we have had a chance to investigate and provide a fix.
26 | - We aim to respond to security reports within **48 hours** and provide a resolution within **7-14 days**.
27 |
28 | ---
29 |
30 | ## Acknowledgments
31 |
32 | We appreciate the contributions of security researchers and developers who help us make Django Unicorn secure. Thank you for your support in keeping this project safe and reliable.
33 |
--------------------------------------------------------------------------------
/example/unicorn/templates/unicorn/todo.html:
--------------------------------------------------------------------------------
1 | {% load static %}
2 |
3 |
4 |
5 |
6 |
7 | {% if is_editing %}
8 |
9 |
10 |
11 | {% else %}
12 |
16 |
17 |
18 |
19 | {{ name }}
13 | Edit 14 | {% endif %} 15 |Favorite count: {{ favorite_count }}
20 |
21 |
22 |
23 | {% if show_filter %}
24 | {% unicorn 'nested.filter' %}
25 | {% endif %}
26 |
27 | | Name | 31 |Label | 32 |Datetime | 33 |Favorite | 34 |Action | 35 |
4 |
36 |
--------------------------------------------------------------------------------
/tests/js/component/callCalls.test.js:
--------------------------------------------------------------------------------
1 | import test from "ava";
2 | import { getComponent } from "../utils.js";
3 |
4 | test("callCalls with function name", (t) => {
5 | const functionName = "someFunction";
6 | const component = getComponent();
7 |
8 | component.window[functionName] = () => {
9 | return true;
10 | };
11 |
12 | const actual = component.callCalls([{ fn: functionName }]);
13 | t.deepEqual(actual, [true]);
14 | });
15 |
16 | test("callCalls with function name and arg", (t) => {
17 | const functionName = "someFunction";
18 | const component = getComponent();
19 |
20 | component.window[functionName] = (argOne) => {
21 | return `${argOne}!!`;
22 | };
23 |
24 | const actual = component.callCalls([{ fn: functionName, args: ["great"] }]);
25 | t.deepEqual(actual, ["great!!"]);
26 | });
27 |
28 | test("callCalls with module and arg", (t) => {
29 | const component = getComponent();
30 |
31 | component.window.SomeModule = (() => {
32 | const self = {};
33 |
34 | self.someFunction = (name) => {
35 | return `${name}!`;
36 | };
37 |
38 | return self;
39 | })();
40 |
41 | const actual = component.callCalls([
42 | { fn: "SomeModule.someFunction", args: ["howdy"] },
43 | ]);
44 | t.deepEqual(actual, ["howdy!"]);
45 | });
46 |
--------------------------------------------------------------------------------
/example/unicorn/components/nested/table.py:
--------------------------------------------------------------------------------
1 | from django_unicorn.components import UnicornView
2 | from example.coffee.models import Flavor
3 |
4 |
5 | class TableView(UnicornView):
6 | name = "Coffee Flavors"
7 | original_name = None
8 | flavors = Flavor.objects.none()
9 | is_editing = False
10 | favorite_count = 0
11 | show_filter = False
12 |
13 | def edit(self):
14 | self.is_editing = True
15 | self.original_name = self.name
16 |
17 | def save(self):
18 | self.is_editing = False
19 |
20 | def cancel(self):
21 | if self.original_name:
22 | self.name = self.original_name
23 | self.original_name = None
24 |
25 | self.is_editing = False
26 |
27 | def mount(self):
28 | self.load_table()
29 |
30 | def load_table(self):
31 | self.flavors = Flavor.objects.select_related("favorite").all()[10:20]
32 | self.favorite_count = sum([1 for f in self.flavors if hasattr(f, "favorite") and f.favorite.is_favorite])
33 |
34 | def set_unedit(c):
35 | if hasattr(c, "is_editing"):
36 | c.is_editing = False
37 | for cc in c.children:
38 | set_unedit(cc)
39 |
40 | for child in self.children:
41 | set_unedit(child)
42 |
--------------------------------------------------------------------------------
/tests/serializer/test_exclude_field_attributes.py:
--------------------------------------------------------------------------------
1 | import pytest
2 |
3 | from django_unicorn.serializer import (
4 | InvalidFieldAttributeError,
5 | InvalidFieldNameError,
6 | _exclude_field_attributes,
7 | )
8 |
9 |
10 | def test_exclude_field_attributes():
11 | expected = {"1": {"2": {}}}
12 | dict_data = {"1": {"2": {"3": "4"}}}
13 | _exclude_field_attributes(dict_data, ("1.2.3",))
14 |
15 | assert dict_data == expected
16 |
17 |
18 | def test_exclude_field_attributes_none_value():
19 | expected = {"1": None}
20 | dict_data = {"1": None}
21 | _exclude_field_attributes(dict_data, ("1.2",))
22 |
23 | assert dict_data == expected
24 |
25 |
26 | def test_exclude_field_attributes_empty_value():
27 | dict_data = {"1": {}}
28 |
29 | with pytest.raises(InvalidFieldAttributeError):
30 | _exclude_field_attributes(dict_data, ("1.2",))
31 |
32 |
33 | def test_exclude_field_attributes_invalid_field_name():
34 | dict_data = {"test": None}
35 |
36 | with pytest.raises(InvalidFieldNameError):
37 | _exclude_field_attributes(dict_data, ("1.2",))
38 |
39 |
40 | def test_exclude_field_attributes_invalid_field_attribute():
41 | dict_data = {"1": {"test": "more"}}
42 |
43 | with pytest.raises(InvalidFieldAttributeError):
44 | _exclude_field_attributes(dict_data, ("1.2",))
45 |
--------------------------------------------------------------------------------
/tests/js/element/init.test.js:
--------------------------------------------------------------------------------
1 | import test from "ava";
2 | import { getElement } from "../utils.js";
3 |
4 | test("isUnicorn", (t) => {
5 | const html = "";
6 | const element = getElement(html);
7 |
8 | t.true(element.isUnicorn);
9 | });
10 |
11 | test("!isUnicorn", (t) => {
12 | const html = "";
13 | const element = getElement(html);
14 |
15 | t.false(element.isUnicorn);
16 | });
17 |
18 | test("key", (t) => {
19 | const html = "";
20 | const element = getElement(html);
21 |
22 | t.is(element.key, "testKey");
23 | });
24 |
25 | test("unicorn:id is not an action", (t) => {
26 | const html = "";
27 | const element = getElement(html);
28 |
29 | t.true(element.isUnicorn);
30 | t.is(element.actions.length, 0);
31 | });
32 |
33 | test("unicorn:key is not an action", (t) => {
34 | const html = "";
35 | const element = getElement(html);
36 |
37 | t.true(element.isUnicorn);
38 | t.is(element.actions.length, 0);
39 | });
40 |
41 | test("unicorn:checksum is not an action", (t) => {
42 | const html = "";
43 | const element = getElement(html);
44 |
45 | t.true(element.isUnicorn);
46 | t.is(element.actions.length, 0);
47 | });
48 |
--------------------------------------------------------------------------------
/example/coffee/models.py:
--------------------------------------------------------------------------------
1 | import uuid
2 |
3 | from django.db import models
4 |
5 |
6 | class Flavor(models.Model):
7 | name = models.CharField(max_length=255)
8 | label = models.CharField(max_length=255)
9 | parent = models.ForeignKey("self", blank=True, null=True, on_delete=models.SET_NULL)
10 | float_value = models.FloatField(blank=True, null=True)
11 | decimal_value = models.DecimalField(blank=True, null=True, max_digits=10, decimal_places=2)
12 | uuid = models.UUIDField(default=uuid.uuid4)
13 | datetime = models.DateTimeField(blank=True, null=True)
14 | date = models.DateField(blank=True, null=True)
15 | time = models.TimeField(blank=True, null=True)
16 | duration = models.DurationField(blank=True, null=True)
17 |
18 | def __str__(self):
19 | return self.name
20 |
21 |
22 | class Favorite(models.Model):
23 | is_favorite = models.BooleanField(default=False)
24 | flavor = models.OneToOneField(Flavor, on_delete=models.CASCADE)
25 |
26 |
27 | class Taste(models.Model):
28 | name = models.CharField(max_length=255)
29 | flavor = models.ManyToManyField(Flavor)
30 |
31 |
32 | class Origin(models.Model):
33 | name = models.CharField(max_length=255)
34 | flavor = models.ManyToManyField(Flavor, related_name="origins")
35 |
36 |
37 | class NewFlavor(Flavor):
38 | new_name = models.CharField(max_length=255)
39 |
--------------------------------------------------------------------------------
/docs/source/direct-view.md:
--------------------------------------------------------------------------------
1 | # Direct View
2 |
3 | Usually components will be included in a regular Django template, however a component can also be specified in a `urls.py` file in instances where having an additional template is not necessary.
4 |
5 | ## Template Requirements
6 |
7 | - there must be one (and only one) element that wraps around the portion of the template that should be handled by `Unicorn`
8 | - the wrapping element must include `unicorn:view` as an attribute
9 | - the template must included the `unicorn_scripts` and `csrf_token` template tags
10 |
11 | Similar to a class-based view, `Unicorn` components have a `as_view` function which is used in `urls.py`.
12 |
13 | ## Example
14 |
15 | ```python
16 | # book.py
17 | from django_unicorn.components import UnicornView
18 |
19 | class BookView(UnicornView):
20 | title = ""
21 | ```
22 |
23 | ```html
24 |
25 | {% load unicorn %}
26 |
27 |
28 |
29 | {% unicorn_scripts %}
30 |
31 |
32 | {% csrf_token %}
33 | {{ unicorn.errors.task.0.message }}
5 |
6 |
7 |
23 |
24 | 8 |
11 | 12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 
20 |
21 |
25 | {% if tasks %} 26 |
-
27 | {% for task in tasks %}
28 |
- {{ task }} 29 | {% endfor %} 30 |
Book
34 | 35 |
36 |
37 | {{ title }} 38 |
39 |
40 |
41 | ```
42 |
43 | ```python
44 | # urls.py
45 | from django.urls import path
46 | from unicorn.components.book import BookView
47 |
48 | urlpatterns = [
49 | path("book", BookView.as_view(), name="book"),
50 | ]
51 | ```
52 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/features.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: 💡 Feature Request
3 | about: Suggest a new idea/feature
4 | title: '[FEATURE] 37 | {{ title }} 38 |
16 |
17 |
18 |
19 |
`;
20 | const component = getComponent(html);
21 |
22 | t.is(component.attachedEventTypes.length, 1);
23 | t.false(isEmpty(component.actionEvents));
24 | t.is(component.actionEvents.click.length, 2);
25 | });
26 |
27 | test("multiple action eventTypes", (t) => {
28 | const html = `
29 |
30 |
31 |
32 |
33 |
`;
34 | const component = getComponent(html);
35 |
36 | t.is(component.attachedEventTypes.length, 2);
37 | t.false(isEmpty(component.actionEvents));
38 | t.is(component.actionEvents.click.length, 1);
39 | t.is(component.actionEvents.keyup.length, 1);
40 | });
41 |
--------------------------------------------------------------------------------
/.github/workflows/coverage.yml:
--------------------------------------------------------------------------------
1 | name: Post coverage comment
2 |
3 | on:
4 | workflow_run:
5 | workflows: ["CI"]
6 | types:
7 | - completed
8 |
9 | jobs:
10 | test:
11 | name: Run tests & display coverage
12 | runs-on: ubuntu-latest
13 | if: github.event.workflow_run.event == 'pull_request' && github.event.workflow_run.conclusion == 'success'
14 | permissions:
15 | # Gives the action the necessary permissions for publishing new
16 | # comments in pull requests.
17 | pull-requests: write
18 | # Gives the action the necessary permissions for editing existing
19 | # comments (to avoid publishing multiple comments in the same PR)
20 | contents: write
21 | # Gives the action the necessary permissions for looking up the
22 | # workflow that launched this workflow, and download the related
23 | # artifact that contains the comment to be published
24 | actions: read
25 | steps:
26 | # DO NOT run actions/checkout here, for security reasons
27 | # For details, refer to https://securitylab.github.com/research/github-actions-preventing-pwn-requests/
28 | - name: Post comment
29 | uses: py-cov-action/python-coverage-comment-action@v3
30 | with:
31 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
32 | GITHUB_PR_RUN_ID: ${{ github.event.workflow_run.id }}
33 | # Update those if you changed the default values:
34 | # COMMENT_ARTIFACT_NAME: python-coverage-comment-action
35 | # COMMENT_FILENAME: python-coverage-comment-action.txt
36 |
--------------------------------------------------------------------------------
/tests/views/message/test_toggle.py:
--------------------------------------------------------------------------------
1 | import time
2 |
3 | import orjson
4 | import shortuuid
5 |
6 | from django_unicorn.utils import generate_checksum
7 |
8 |
9 | def _post_message_and_get_body(client, message):
10 | response = client.post(
11 | "/message/tests.views.fake_components.FakeComponent",
12 | message,
13 | content_type="application/json",
14 | )
15 |
16 | body = orjson.loads(response.content)
17 | return body
18 |
19 |
20 | def test_message_toggle(client):
21 | data = {"check": False}
22 | message = {
23 | "actionQueue": [
24 | {"type": "callMethod", "payload": {"name": "$toggle('check')"}},
25 | ],
26 | "data": data,
27 | "checksum": generate_checksum(str(data)),
28 | "id": shortuuid.uuid()[:8],
29 | "epoch": time.time(),
30 | }
31 |
32 | body = _post_message_and_get_body(client, message)
33 |
34 | assert not body["errors"]
35 | assert body["data"]["check"] is True
36 |
37 |
38 | def test_message_nested_toggle(client):
39 | data = {"nested": {"check": False}}
40 | message = {
41 | "actionQueue": [
42 | {"type": "callMethod", "payload": {"name": "$toggle('nested.check')"}},
43 | ],
44 | "data": data,
45 | "checksum": generate_checksum(str(data)),
46 | "id": shortuuid.uuid()[:8],
47 | "epoch": time.time(),
48 | }
49 |
50 | body = _post_message_and_get_body(client, message)
51 |
52 | assert not body["errors"]
53 | assert body["data"]["nested"]["check"] is True
54 |
--------------------------------------------------------------------------------
/tests/templatetags/test_unicorn_scripts.py:
--------------------------------------------------------------------------------
1 | from django_unicorn.templatetags.unicorn import unicorn_scripts
2 |
3 |
4 | def test_unicorn_scripts():
5 | actual = unicorn_scripts()
6 |
7 | assert actual["CSRF_HEADER_NAME"] == "X-CSRFTOKEN"
8 | assert actual["CSRF_COOKIE_NAME"] == "csrftoken"
9 | assert actual["MINIFIED"] is True
10 |
11 |
12 | def test_unicorn_scripts_debug(settings):
13 | settings.DEBUG = True
14 | actual = unicorn_scripts()
15 |
16 | assert actual["CSRF_HEADER_NAME"] == "X-CSRFTOKEN"
17 | assert actual["CSRF_COOKIE_NAME"] == "csrftoken"
18 | assert actual["MINIFIED"] is False
19 |
20 |
21 | def test_unicorn_scripts_minified_true(settings):
22 | settings.UNICORN = {"MINIFIED": True}
23 | actual = unicorn_scripts()
24 |
25 | assert actual["CSRF_HEADER_NAME"] == "X-CSRFTOKEN"
26 | assert actual["CSRF_COOKIE_NAME"] == "csrftoken"
27 | assert actual["MINIFIED"] is True
28 |
29 |
30 | def test_unicorn_scripts_minified_false(settings):
31 | settings.UNICORN = {"MINIFIED": False}
32 | actual = unicorn_scripts()
33 |
34 | assert actual["MINIFIED"] is False
35 |
36 |
37 | def test_unicorn_scripts_csrf_header_name(settings):
38 | settings.CSRF_HEADER_NAME = "HTTP_X_UNICORN"
39 | actual = unicorn_scripts()
40 |
41 | assert actual["CSRF_HEADER_NAME"] == "X-UNICORN"
42 |
43 |
44 | def test_unicorn_scripts_csrf_cookie_name(settings):
45 | settings.CSRF_COOKIE_NAME = "unicorn-csrftoken"
46 | actual = unicorn_scripts()
47 |
48 | assert actual["CSRF_COOKIE_NAME"] == "unicorn-csrftoken"
49 |
--------------------------------------------------------------------------------
/tests/js/element/loading.test.js:
--------------------------------------------------------------------------------
1 | import test from "ava";
2 | import { getElement } from "../utils.js";
3 |
4 | test("loading class", (t) => {
5 | const html = "";
6 | const element = getElement(html);
7 |
8 | t.is(element.loading.classes.length, 1);
9 | t.is(element.loading.classes[0], "loading");
10 | });
11 |
12 | test("loading multiple classes", (t) => {
13 | const html =
14 | "";
15 | const element = getElement(html);
16 |
17 | t.is(element.loading.classes.length, 2);
18 | t.is(element.loading.classes[0], "loading");
19 | t.is(element.loading.classes[1], "another");
20 | });
21 |
22 | test("loading remove class", (t) => {
23 | const html =
24 | "";
25 | const element = getElement(html);
26 |
27 | t.is(element.loading.removeClasses.length, 1);
28 | t.is(element.loading.removeClasses[0], "unloading");
29 | });
30 |
31 | test("loading multiple remove classes", (t) => {
32 | const html =
33 | "";
34 | const element = getElement(html);
35 |
36 | t.is(element.loading.removeClasses.length, 2);
37 | t.is(element.loading.removeClasses[0], "unloading");
38 | t.is(element.loading.removeClasses[1], "great");
39 | });
40 |
41 | test("loading attr", (t) => {
42 | const html = "";
43 | const element = getElement(html);
44 |
45 | t.is(element.loading.attr, "disabled");
46 | });
47 |
--------------------------------------------------------------------------------
/docs/source/custom-morphers.md:
--------------------------------------------------------------------------------
1 | # Custom Morphers
2 |
3 | The morpher is a library used to update specific parts of the DOM element instead of replacing the entire element. This improves performance and maintains the state of unchanged DOM elements, such as the cursor position in an input.
4 |
5 | The default morpher used in Unicorn is [`morphdom`](https://github.com/patrick-steele-idem/morphdom). The only alternative morpher available is the [Alpine.js morph plugin](https://alpinejs.dev/plugins/morph).
6 |
7 | ## `Morphdom`
8 |
9 | `morphdom` is the default morpher so no extra settings or installation is required to use it.
10 |
11 | ## `Alpine`
12 |
13 | Components which use both `Unicorn` and `Alpine.js` should use the `Alpine.js` morpher to prevent losing state when it gets re-rendered.
14 |
15 | ## Django Settings
16 |
17 | ```python
18 | # settings.py
19 |
20 | UNICORN = {
21 | ...
22 | "MORPHER": {
23 | "NAME": "alpine",
24 | }
25 | ...
26 | }
27 | ```
28 |
29 | ```{note}
30 | `MORPHER.RELOAD_SCRIPT_ELEMENTS` is not currently supported for the `Alpine.js` morpher.
31 | ```
32 |
33 | ### JavaScript Installation
34 |
35 | `Alpine.js` is not included in `Unicorn` so you will need to manually include it. Make sure to include `Alpine.js` and the morpher plugin by adding the following line to your template before `{% unicorn_scripts %}`.
36 |
37 | ```html
38 | ...
39 |
40 |
41 |
42 | {% unicorn_scripts %}
43 |
44 | ...
45 | ```
46 |
--------------------------------------------------------------------------------
/example/coffee/migrations/0003_auto_20210128_0140.py:
--------------------------------------------------------------------------------
1 | # Generated by Django 3.1.5 on 2021-01-28 01:40
2 |
3 | from django.db import migrations, models
4 | import uuid
5 |
6 |
7 | class Migration(migrations.Migration):
8 |
9 | dependencies = [
10 | ('coffee', '0002_auto_20201205_1450'),
11 | ]
12 |
13 | operations = [
14 | migrations.AddField(
15 | model_name='flavor',
16 | name='date',
17 | field=models.DateField(blank=True, null=True),
18 | ),
19 | migrations.AddField(
20 | model_name='flavor',
21 | name='datetime',
22 | field=models.DateTimeField(blank=True, null=True),
23 | ),
24 | migrations.AddField(
25 | model_name='flavor',
26 | name='duration',
27 | field=models.DurationField(blank=True, null=True),
28 | ),
29 | migrations.AddField(
30 | model_name='flavor',
31 | name='time',
32 | field=models.TimeField(blank=True, null=True),
33 | ),
34 | migrations.AddField(
35 | model_name='flavor',
36 | name='uuid',
37 | field=models.UUIDField(default=uuid.uuid4),
38 | ),
39 | migrations.AlterField(
40 | model_name='flavor',
41 | name='decimal_value',
42 | field=models.DecimalField(blank=True, decimal_places=2, max_digits=10, null=True),
43 | ),
44 | migrations.AlterField(
45 | model_name='flavor',
46 | name='float_value',
47 | field=models.FloatField(blank=True, null=True),
48 | ),
49 | ]
50 |
--------------------------------------------------------------------------------
/docs/source/javascript.md:
--------------------------------------------------------------------------------
1 | # JavaScript Integration
2 |
3 | ## Call JavaScript from View
4 |
5 | To integrate with other JavaScript functions, view methods can call an arbitrary JavaScript function after it gets rendered.
6 |
7 | ```html
8 |
9 |
10 |
15 |
16 |
17 |
18 |
19 | ```
20 |
21 | ```python
22 | # call_javascript.py
23 | from django_unicorn.components import UnicornView
24 |
25 | class CallJavascriptView(UnicornView):
26 | name = ""
27 |
28 | def mount(self):
29 | self.call("hello", "world")
30 |
31 | def hello(self):
32 | self.call("hello", self.name)
33 | ```
34 |
35 | ## Trigger Model Update
36 |
37 | Normally when a model element gets changed by a user it will trigger an event which `Unicorn` listens for (either `input` or `blur` depending on if it has a `lazy` modifier). However, when setting an element with JavaScript those events do not fire. `Unicorn.trigger()` provides a way to trigger that event from JavaScript manually.
38 |
39 | The first argument to `trigger` is the component name. The second argument is the value for the element's `unicorn:key`.
40 |
41 | ```html
42 |
43 |
49 |
50 |
54 | ```
55 |
--------------------------------------------------------------------------------
/docs/source/dirty-states.md:
--------------------------------------------------------------------------------
1 | # Dirty States
2 |
3 | `Unicorn` can provide context to the user that some data has been changed and will be updated.
4 |
5 | ## Toggling Attributes
6 |
7 | Elements can include an `unicorn:dirty` attribute with either an `attr` or `class` modifier.
8 |
9 | ### attr
10 |
11 | Set the specified attribute on the element that is changed.
12 |
13 | This example will set the input to be readonly when the model is changed. The attribute will be removed once the name is synced or if the input value is changed back to the original value.
14 |
15 | :::{code} html
16 | :force: true
17 |
18 |
19 |
20 |
21 |
22 | :::
23 |
24 | ### class
25 |
26 | Add the specified class(es) to the model that is changed.
27 |
28 | This example will add _dirty_ and _changing_ classes to the input when the model is changed. The classes will be removed once the model is synced or if the input value is changed back to the original value.
29 |
30 | :::{code} html
31 | :force: true
32 |
33 |
34 |
35 |
36 |
37 | :::
38 |
39 | ### class.remove
40 |
41 | Remove the specified class(es) from the model that is changed.
42 |
43 | This example will remove the _clean_ class from the input when the model is changed. The class will be added back once the model is synced or if the input value is changed back to the original value.
44 |
45 | :::{code} html
46 | :force: true
47 |
48 |
49 |
50 |
51 |
52 | :::
53 |
--------------------------------------------------------------------------------
/docs/source/cli.md:
--------------------------------------------------------------------------------
1 | # CLI
2 |
3 | `Unicorn` provides a Django management command to create new components. The first argument is the name of the Django app to create components in. Every argument after is the name of components that should be created.
4 |
5 | ```shell
6 | python manage.py startunicorn unicorn hello-world
7 | ```
8 |
9 | This example would create a `unicorn` directory, and `templates` and `components` sub-directories if necessary. Underneath the `components` directory there will be a new module and subclass of `django_unicorn.components.UnicornView`. Underneath the `templates/unicorn` directory will be a example template.
10 |
11 | The following is an example folder structure.
12 |
13 | ```
14 | unicorn/
15 | components/
16 | __init__.py
17 | hello_world.py
18 | templates/
19 | unicorn/
20 | hello-world.html
21 | ```
22 |
23 | ```{note}
24 | If you have an existing Django app, you can use that instead of `unicorn` like the example above. The management command will create the the directories and files as needed.
25 | ```
26 |
27 | ## Sub-folders
28 |
29 | `startunicorn` supports creating components in sub-folders. Separate each folder by a dot (similar to Python modules) to create a nested structure.
30 |
31 | ```shell
32 | python manage.py startunicorn unicorn hello.world
33 | ```
34 |
35 | ```
36 | unicorn/
37 | components/
38 | __init__.py
39 | hello/
40 | __init__.py
41 | world.py
42 | templates/
43 | unicorn/
44 | hello/
45 | world.html
46 | ```
47 |
48 | The nested component would be included in a template like:
49 |
50 | ```html
51 | {% unicorn 'hello.world' %}
52 | ```
53 |
--------------------------------------------------------------------------------
/docs/source/troubleshooting.md:
--------------------------------------------------------------------------------
1 | # Troubleshooting
2 |
3 | ## Disallowed MIME type error on Windows
4 |
5 | Apparently Windows system-wide MIME type configuration sometimes won't load up JavaScript modules in certain browsers. The errors would be something like `Loading module from “http://127.0.0.1:8000/static/js/unicorn.js” was blocked because of a disallowed MIME type (“text/plain”)` or `Failed to load module script: The server responded with a non-JavaScript MIME type of "text/plain".`
6 |
7 | One suggested solution is to add the following to the bottom of the settings file:
8 |
9 | ```python
10 | # settings.py
11 |
12 | if DEBUG:
13 | import mimetypes
14 | mimetypes.add_type("application/javascript", ".js", True)
15 | ```
16 |
17 | See this [Windows MIME type detection pitfalls](https://www.taricorp.net/2020/windows-mime-pitfalls/) article, this [StackOverflow answer](https://stackoverflow.com/a/16355034), or [issue #201](https://github.com/adamghill/django-unicorn/issues/201) for more details.
18 |
19 | ## Missing CSRF token or 403 Forbidden errors
20 |
21 | `Unicorn` uses CSRF to protect its endpoint from malicious actors. The two parts that are required for CSRF are `"django.middleware.csrf.CsrfViewMiddleware"` in `MIDDLEWARE` and `{% csrf_token %}` in the template that includes any `Unicorn` components.
22 |
23 | ```python
24 | # settings.py
25 |
26 | ...
27 | MIDDLEWARE = [
28 | ...
29 | "django.middleware.csrf.CsrfViewMiddleware",
30 | ...
31 | ]
32 | ```
33 |
34 | ```html
35 |
36 | {% load unicorn %}
37 |
38 |
39 |
40 | {% unicorn_scripts %}
41 |
42 |
43 | {% csrf_token %}
44 |
45 | {% unicorn 'hello-world' %}
46 |
47 |
48 | ```
49 |
--------------------------------------------------------------------------------
/DEVELOPING.md:
--------------------------------------------------------------------------------
1 | # Developing
2 |
3 | ## Local development
4 |
5 | 1. Fork https://github.com/adamghill/django-unicorn`
6 | 1. `git clone` your forked repository
7 | 1. `cd django-unicorn`
8 | 1. `poetry install -E minify -E docs`
9 | 1. `poetry run python example/manage.py migrate`
10 | 1. `poetry run python example/manage.py runserver localhost:8000`
11 | 1. Go to `localhost:8000` in your browser
12 |
13 | ## To install in another project
14 |
15 | 1. Download the repo to your local
16 | 1. `pip install -e ../django-unicorn` from inside the other project's virtualenv _or_ add `django-unicorn = { path="../django-unicorn", develop=true }` to the other project's `pyproject.toml`
17 |
18 | ## Build Sphinx documentation
19 |
20 | 1. `poetry run sphinx-autobuild -W docs/source docs/build`
21 |
22 | ## Run unit tests on local environment
23 |
24 | 1. Python: `poetry run pytest`
25 | 1. JavaScript: `npm run test`
26 |
27 | ## Run Python/Django matrix unit tests
28 |
29 | 1. Install [`act`](https://nektosact.com)
30 | 1. `act -W .github/workflows/python.yml -j test`
31 |
32 | # Minify JavaScript
33 |
34 | 1. `npm install`
35 | 1. `npm run build`
36 |
37 | ## Bump version
38 |
39 | 1. Update changelog.md
40 | 1. Update package.json
41 | 1. `poetry version major|minor|patch`
42 | 1. Run all build processes: `poe build`
43 | 1. Commit/tag/push version bump
44 | 1. `poe publish`
45 | 1. Make sure test package can be installed as expected (https://test.pypi.org/project/django-unicorn/)
46 | 1. Make sure live package can be installed as expected (https://pypi.org/project/django-unicorn/)
47 | 1. [Create GitHub release](https://github.com/adamghill/django-unicorn/releases/new) and add changelog there
48 | 1. Update django-unicorn.com's version of `django-unicorn`
49 |
--------------------------------------------------------------------------------
/tests/views/test_process_component_request.py:
--------------------------------------------------------------------------------
1 | from tests.views.message.utils import post_and_get_response
2 |
3 | from django_unicorn.components import UnicornView
4 |
5 |
6 | class FakeComponent(UnicornView):
7 | template_name = "templates/test_component_variable.html"
8 |
9 | hello = ""
10 |
11 |
12 | class FakeComponentSafe(UnicornView):
13 | template_name = "templates/test_component_variable.html"
14 |
15 | hello = ""
16 |
17 | class Meta:
18 | safe = ("hello",)
19 |
20 |
21 | def test_html_entities_encoded(client):
22 | data = {"hello": "test"}
23 | action_queue = [
24 | {
25 | "payload": {"name": "hello", "value": "test1"},
26 | "type": "syncInput",
27 | }
28 | ]
29 | response = post_and_get_response(
30 | client,
31 | url="/message/tests.views.test_process_component_request.FakeComponent",
32 | data=data,
33 | action_queue=action_queue,
34 | )
35 |
36 | assert not response["errors"]
37 | assert response["data"].get("hello") == "test1"
38 | assert "<b>test1</b>" in response["dom"]
39 |
40 |
41 | def test_safe_html_entities_not_encoded(client):
42 | data = {"hello": "test"}
43 | action_queue = [
44 | {
45 | "payload": {"name": "hello", "value": "test1"},
46 | "type": "syncInput",
47 | }
48 | ]
49 | response = post_and_get_response(
50 | client,
51 | url="/message/tests.views.test_process_component_request.FakeComponentSafe",
52 | data=data,
53 | action_queue=action_queue,
54 | )
55 |
56 | assert not response["errors"]
57 | assert response["data"].get("hello") == "test1"
58 | assert "test1" in response["dom"]
59 |
--------------------------------------------------------------------------------
/tests/js/utils/args.test.js:
--------------------------------------------------------------------------------
1 | import test from "ava";
2 | import { args } from "../../../django_unicorn/static/unicorn/js/utils.js";
3 |
4 | test("one arg", (t) => {
5 | const functionArgs = args("test($event.target.value)");
6 |
7 | t.is(functionArgs.length, 1);
8 | t.is(functionArgs[0], "$event.target.value");
9 | });
10 |
11 | test("two args", (t) => {
12 | const functionArgs = args("test($event.target.value, 1)");
13 |
14 | t.is(functionArgs.length, 2);
15 | t.is(functionArgs[0], "$event.target.value");
16 | t.is(functionArgs[1], "1");
17 | });
18 |
19 | test("two args with array", (t) => {
20 | const functionArgs = args("test($event.target.value, [1, 2])");
21 |
22 | t.is(functionArgs.length, 2);
23 | t.is(functionArgs[0], "$event.target.value");
24 | t.is(functionArgs[1], "[1, 2]");
25 | });
26 |
27 | test("two args with object", (t) => {
28 | const functionArgs = args('test($event.target.value, {"1": 2})');
29 |
30 | t.is(functionArgs.length, 2);
31 | t.is(functionArgs[0], "$event.target.value");
32 | t.is(functionArgs[1], '{"1": 2}');
33 | });
34 |
35 | test("two args with comma in double quotes", (t) => {
36 | const functionArgs = args('test($event.target.value, "1,2")');
37 |
38 | t.is(functionArgs.length, 2);
39 | t.is(functionArgs[0], "$event.target.value");
40 | t.is(functionArgs[1], '"1,2"');
41 | });
42 |
43 | test("two args with comma in single quotes", (t) => {
44 | const functionArgs = args("test($event.target.value, '1,2')");
45 |
46 | t.is(functionArgs.length, 2);
47 | t.is(functionArgs[0], "$event.target.value");
48 | t.is(functionArgs[1], "'1,2'");
49 | });
50 |
51 | test("two args with missing parenthesis", (t) => {
52 | const functionArgs = args("test(4, $event.target.value");
53 |
54 | // Error condition returns an empty array of args
55 | t.is(functionArgs.length, 0);
56 | });
57 |
--------------------------------------------------------------------------------
/tests/serializer/test_model_value.py:
--------------------------------------------------------------------------------
1 | import pytest
2 | from django.db import models
3 |
4 | from django_unicorn.components import ModelValueMixin
5 | from django_unicorn.serializer import model_value
6 | from example.coffee.models import Flavor
7 |
8 |
9 | def test_model_value_all_fields():
10 | flavor = Flavor(name="flavor-1")
11 |
12 | expected = {
13 | "date": None,
14 | "datetime": None,
15 | "decimal_value": None,
16 | "duration": None,
17 | "float_value": None,
18 | "name": flavor.name,
19 | "label": "",
20 | "parent": None,
21 | "pk": None,
22 | "time": None,
23 | "uuid": str(flavor.uuid),
24 | "taste_set": [],
25 | "origins": [],
26 | }
27 |
28 | actual = model_value(flavor)
29 |
30 | assert expected == actual
31 |
32 |
33 | def test_model_value_one_field():
34 | expected = {"name": "flavor-1"}
35 |
36 | flavor = Flavor(name="flavor-1")
37 | actual = model_value(flavor, "name")
38 |
39 | assert expected == actual
40 |
41 |
42 | @pytest.mark.django_db
43 | def test_model_value_multiple_field():
44 | expected = {
45 | "pk": 77,
46 | "name": "flavor-1",
47 | }
48 |
49 | flavor = Flavor(name="flavor-1", id=77)
50 | actual = model_value(flavor, "pk", "name")
51 |
52 | assert expected == actual
53 |
54 |
55 | class FakeModel(ModelValueMixin, models.Model):
56 | name = models.CharField(max_length=255)
57 |
58 | class Meta:
59 | app_label = "tests"
60 |
61 |
62 | def test_model_value_mixin():
63 | test_model = FakeModel(name="test-model")
64 | expected = {"name": test_model.name}
65 |
66 | actual = test_model.value("name")
67 | assert expected == actual
68 |
69 | actual = model_value(test_model, "name")
70 | assert expected == actual
71 |
--------------------------------------------------------------------------------
/django_unicorn/static/unicorn/js/delayers.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Returns a function, that, as long as it continues to be invoked, will not
3 | * be triggered. The function will be called after it stops being called for
4 | * N milliseconds. If `immediate` is passed, trigger the function on the
5 | * leading edge, instead of the trailing.
6 |
7 | * Derived from underscore.js's implementation in https://davidwalsh.name/javascript-debounce-function.
8 | */
9 | export function debounce(func, wait, immediate) {
10 | let timeout;
11 |
12 | if (typeof immediate === "undefined") {
13 | immediate = true;
14 | }
15 |
16 | return (...args) => {
17 | const context = this;
18 |
19 | const later = () => {
20 | timeout = null;
21 | if (!immediate) {
22 | func.apply(context, args);
23 | }
24 | };
25 |
26 | const callNow = immediate && !timeout;
27 | clearTimeout(timeout);
28 | timeout = setTimeout(later, wait);
29 |
30 | if (callNow) {
31 | func.apply(context, args);
32 | }
33 | };
34 | }
35 |
36 | /**
37 | * The function is executed the number of times it is called,
38 | * but there is a fixed wait time before each execution.
39 | * From https://medium.com/ghostcoder/debounce-vs-throttle-vs-queue-execution-bcde259768.
40 | */
41 | const funcQueue = [];
42 | export function queue(func, waitTime) {
43 | let isWaiting;
44 |
45 | const play = () => {
46 | let params;
47 | isWaiting = false;
48 |
49 | if (funcQueue.length) {
50 | params = funcQueue.shift();
51 | executeFunc(params);
52 | }
53 | };
54 |
55 | const executeFunc = (params) => {
56 | isWaiting = true;
57 | func(params);
58 | setTimeout(play, waitTime);
59 | };
60 |
61 | return (params) => {
62 | if (isWaiting) {
63 | funcQueue.push(params);
64 | } else {
65 | executeFunc(params);
66 | }
67 | };
68 | }
69 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Byte-compiled / optimized / DLL files
2 | __pycache__/
3 | *.py[cod]
4 | *$py.class
5 |
6 | # C extensions
7 | *.so
8 |
9 | # Distribution / packaging
10 | .Python
11 | build/
12 | develop-eggs/
13 | dist/
14 | downloads/
15 | eggs/
16 | .eggs/
17 | lib/
18 | lib64/
19 | parts/
20 | sdist/
21 | var/
22 | wheels/
23 | *.egg-info/
24 | .installed.cfg
25 | *.egg
26 | MANIFEST
27 |
28 | # PyInstaller
29 | # Usually these files are written by a python script from a template
30 | # before PyInstaller builds the exe, so as to inject date/other infos into it.
31 | *.manifest
32 | *.spec
33 |
34 | # Installer logs
35 | pip-log.txt
36 | pip-delete-this-directory.txt
37 |
38 | # Unit test / coverage reports
39 | htmlcov/
40 | .tox/
41 | .coverage
42 | .coverage.*
43 | .cache
44 | nosetests.xml
45 | coverage.xml
46 | *.cover
47 | .hypothesis/
48 | .pytest_cache/
49 |
50 | # Translations
51 | *.mo
52 | *.pot
53 |
54 | # Django stuff:
55 | *.log
56 | local_settings.py
57 | db.sqlite3
58 |
59 | # Flask stuff:
60 | instance/
61 | .webassets-cache
62 |
63 | # Scrapy stuff:
64 | .scrapy
65 |
66 | # Sphinx documentation
67 | docs/_build/
68 |
69 | # PyBuilder
70 | target/
71 |
72 | # Jupyter Notebook
73 | .ipynb_checkpoints
74 |
75 | # pyenv
76 | .python-version
77 |
78 | # celery beat schedule file
79 | celerybeat-schedule
80 |
81 | # SageMath parsed files
82 | *.sage.py
83 |
84 | # Environments
85 | .env
86 | .venv*
87 | env/
88 | venv/
89 | ENV/
90 | env.bak/
91 | venv.bak/
92 |
93 | # Spyder project settings
94 | .spyderproject
95 | .spyproject
96 |
97 | # Rope project settings
98 | .ropeproject
99 |
100 | # mkdocs documentation
101 | /site
102 |
103 | # mypy
104 | .mypy_cache/
105 |
106 | # vscode
107 | .vscode/
108 | .DS_Store
109 | pip-wheel-metadata
110 | TODO.md
111 |
112 | # pycharm
113 | .idea/
114 |
115 | node_modules/
116 | tags
117 | staticfiles/
--------------------------------------------------------------------------------
/django_unicorn/components/updaters.py:
--------------------------------------------------------------------------------
1 | import logging
2 | from typing import Optional
3 |
4 | from django.http.response import HttpResponseRedirect
5 |
6 | logger = logging.getLogger(__name__)
7 |
8 |
9 | class Update:
10 | """
11 | Base class for updaters.
12 | """
13 |
14 | def to_json(self):
15 | return self.__dict__
16 |
17 |
18 | class HashUpdate(Update):
19 | """
20 | Updates the current URL hash from an action method.
21 | """
22 |
23 | def __init__(self, url_hash: str):
24 | """
25 | Args:
26 | param url_hash: The URL hash to change. Example: `#model-123`.
27 | """
28 | self.hash = url_hash
29 |
30 |
31 | class LocationUpdate(Update):
32 | """
33 | Updates the current URL from an action method.
34 | """
35 |
36 | def __init__(self, redirect: HttpResponseRedirect, title: Optional[str] = None):
37 | """
38 | Args:
39 | param redirect: The redirect that contains the URL to redirect to.
40 | param title: The new title of the page. Optional.
41 | """
42 | self.redirect = redirect
43 | self.title = title
44 |
45 |
46 | class PollUpdate(Update):
47 | """
48 | Updates the current poll from an action method.
49 | """
50 |
51 | def __init__(self, *, timing: Optional[int] = None, method: Optional[str] = None, disable: bool = False):
52 | """
53 | Args:
54 | param timing: The timing that should be used for the poll. Optional. Defaults to `None`
55 | which keeps the existing timing.
56 | param method: The method that should be used for the poll. Optional. Defaults to `None`
57 | which keeps the existing method.
58 | param disable: Whether to disable the poll or not not. Optional. Defaults to `False`.
59 | """
60 | self.timing = timing
61 | self.method = method
62 | self.disable = disable
63 |
--------------------------------------------------------------------------------
/example/www/templates/www/base.html:
--------------------------------------------------------------------------------
1 | {% load static unicorn %}
2 |
3 |
4 |
5 |
6 |
19 |
23 | ```
24 |
25 | ```{note}
26 | In some cases, the element with the `unicorn:visible` attribute will always be in the viewport, so the event will continue to fire and the method will continue to execute. However, this will not happen in the following instances:
27 |
28 | - the fields of component do not change, so the AJAX request will return a 304 status code
29 | - the method explicitly returns `False`
30 | ```
31 |
32 | ## Modifiers
33 |
34 | There are a few modifiers for `unicorn:visible` and they are able to be chained if necessary.
35 |
36 | ### Debounce
37 |
38 | Similar to the debounce modifier on a [model](templates.md#debounce) or [actions](actions.md#debounce), wait the specified number of milliseconds before calling the specified method.
39 |
40 | :::{code} html
41 | :force: true
42 |
43 |
44 |
20 |
21 |
22 |
45 |
49 | :::
50 |
51 | ### Threshold
52 |
53 | The percentage (as an integer) that should be visible before being triggered. For example, `0` means that as soon as 1 pixel of the element is visible it would be fired, `25` would be 25% of the target element is visible, `100` would require 100% of the element to be completely visible.
54 |
55 | :::{code} html
56 | :force: true
57 |
58 |
59 |
46 |
47 |
48 |
60 |
64 | :::
65 |
--------------------------------------------------------------------------------
/docs/source/getting-started.md:
--------------------------------------------------------------------------------
1 | # Getting Started
2 |
3 | ## Create a Django Project
4 |
5 | `Unicorn` requires a working Django project before it can be used. While it is recommended that you have some experience working with Python and Django, below is a list of steps you would need do to use `Unicorn`.
6 |
7 | ```{dropdown} Install the latest version of Python
8 | `Unicorn` works with Python 3.8 or greater. If you don't have Python installed, you will need to download and install it on your local machine.
9 |
10 | You can find the [latest version](https://www.python.org/downloads/) of Python at [python.org](https://www.python.org).
11 |
12 | Once you have installed Python, make sure that it has been added to your `PATH`.
13 |
14 | `python --version`
15 | ```
16 |
17 | ````{dropdown} Create a virtual environment
18 | Before installing Django, you will need to create a new directory for your project. It is also recommended to create a [virtual environment](https://docs.python.org/3/library/venv.html) where you can install Django, `Unicorn`, and any other dependencies. Once you have created and navigated to the directory, type the following command to create a virtual environment.
19 |
20 | `python -m venv .venv`
21 |
22 | ```{note}
23 | Some package managers automatically create a virtual environment so this step might not be required. But, a virtual environment is suggested if directly using `pip` to install dependencies.
24 | ```
25 | ````
26 |
27 | ````{dropdown} Install Django and start a project
28 | You are now ready to install Django and start your project.
29 |
30 | ```sh
31 | python -m pip install Django
32 | django-admin startproject project-name .
33 | ```
34 |
35 | If you have never created a Django project before, you may want to get acquainted with it first. There are several resources, including some [official tutorials](https://docs.djangoproject.com/en/stable/intro/), though the [Django Girls Tutorial](https://tutorial.djangogirls.org/en/django_start_project/) is also highly recommended.
36 | ````
37 |
38 | Once you have a working Django project, you are ready to [install `Unicorn`](installation.md).
--------------------------------------------------------------------------------
/tests/js/utils/walk.test.js:
--------------------------------------------------------------------------------
1 | import test from "ava";
2 | import {
3 | FilterAny,
4 | FilterSkipNested,
5 | walk,
6 | } from "../../../django_unicorn/static/unicorn/js/utils";
7 | import { getEl, setBrowserMocks } from "../utils.js";
8 |
9 | // makes a document and NodeFilter available from a fake DOM
10 | setBrowserMocks();
11 |
12 | test("walk any", (t) => {
13 | const componentRootHtml = `
14 |
61 |
62 |
63 |
15 |
16 |
26 | `;
27 | const componentRoot = getEl(componentRootHtml);
28 | const nodes = [];
29 |
30 | walk(componentRoot, (node) => nodes.push(node), FilterAny);
31 |
32 | t.is(nodes.length, 4);
33 | t.is(nodes[0].getAttribute("id"), "name");
34 | t.is(nodes[1].getAttribute("unicorn:id"), "5jypjiyb:nested.filter");
35 | t.is(nodes[2].getAttribute("id"), "search");
36 | t.is(nodes[3].getAttribute("id"), "name2");
37 | });
38 |
39 | test("walk skip nested", (t) => {
40 | const componentRootHtml = `
41 |
22 |
23 |
24 |
25 |
42 |
43 |
53 | `;
54 | const componentRoot = getEl(componentRootHtml);
55 | const nodes = [];
56 |
57 | walk(componentRoot, (node) => nodes.push(node), FilterSkipNested);
58 |
59 | t.is(nodes.length, 2);
60 | t.is(nodes[0].getAttribute("id"), "name");
61 | t.is(nodes[1].getAttribute("id"), "name2");
62 | });
63 |
--------------------------------------------------------------------------------
/tests/call_method_parser/test_parse_kwarg.py:
--------------------------------------------------------------------------------
1 | import pytest
2 |
3 | from django_unicorn.call_method_parser import InvalidKwargError, parse_kwarg
4 |
5 |
6 | def test_kwargs_string():
7 | expected = {"test": "1"}
8 | actual = parse_kwarg("test='1'")
9 |
10 | assert actual == expected
11 | assert isinstance(actual["test"], str)
12 | assert actual["test"] == "1"
13 |
14 |
15 | def test_kwargs_int():
16 | expected = {"test": 2}
17 | actual = parse_kwarg("test=2")
18 |
19 | assert actual == expected
20 | assert isinstance(actual["test"], int)
21 | assert actual["test"] == 2
22 |
23 |
24 | def test_kwargs_invalid_startswith_doublequote():
25 | with pytest.raises(InvalidKwargError) as e:
26 | parse_kwarg('"test"=2')
27 |
28 | assert e.type == InvalidKwargError
29 |
30 |
31 | def test_kwargs_invalid_startswith_singlequote():
32 | with pytest.raises(InvalidKwargError) as e:
33 | parse_kwarg("'test'=2")
34 |
35 | assert e.type == InvalidKwargError
36 |
37 |
38 | def test_kwargs_invalid_no_equal_sign():
39 | with pytest.raises(InvalidKwargError) as e:
40 | parse_kwarg("test")
41 |
42 | assert e.type == InvalidKwargError
43 |
44 |
45 | def test_kwargs_invalid_internal_doublequote():
46 | with pytest.raises(InvalidKwargError) as e:
47 | parse_kwarg('te"st=1')
48 |
49 | assert e.type == InvalidKwargError
50 |
51 |
52 | def test_kwargs_invalid_internal_singlequote():
53 | with pytest.raises(InvalidKwargError) as e:
54 | parse_kwarg("te'st=1")
55 |
56 | assert e.type == InvalidKwargError
57 |
58 |
59 | def test_kwargs_skip_unparseable_value():
60 | expected = {"test": "some_context_variable"}
61 | actual = parse_kwarg("test=some_context_variable")
62 |
63 | assert actual == expected
64 | assert isinstance(actual["test"], str)
65 | assert actual["test"] == "some_context_variable"
66 |
67 |
68 | def test_kwargs_raise_unparseable_value():
69 | with pytest.raises(ValueError) as e:
70 | parse_kwarg("test=some_context_variable", raise_if_unparseable=True)
71 |
72 | assert e.type is ValueError
73 |
--------------------------------------------------------------------------------
/docs/source/partial-updates.md:
--------------------------------------------------------------------------------
1 | # Partial Updates
2 |
3 | Normally `Unicorn` will send the entire component's rendered HTML on every action to make sure that any changes to the context is reflected on the page. However, to reduce latency and minimize the amount of data that has to be sent over the network, `Unicorn` can only update a portion of the page by utilizing the `unicorn:partial` attribute.
4 |
5 | ```{note}
6 | By default, `unicorn:partial` will look in the current component's template for an `id` or `unicorn:key`. If an element can't be found with the specified target, the entire component will be morphed like usual.
7 | ```
8 |
9 | ```python
10 | # partial_update.py
11 | from django_unicorn.components import UnicornView
12 |
13 | class PartialUpdateView(UnicornView):
14 | checked = False
15 | ```
16 |
17 | ```html
18 |
19 |
49 |
50 |
51 |
52 |
20 | {{ checked }}
21 |
24 |
25 | ```
26 |
27 | ## Target by id
28 |
29 | To only target an element `id` add the `id` modifier to `unicorn:partial`.
30 |
31 | :::{code} html
32 | :force: true
33 |
34 |
35 |
36 | {{ checked }}
37 |
40 |
41 | :::
42 |
43 | ## Target by key
44 |
45 | To only target an element `unicorn:key` add the `key` modifier to `unicorn:partial`.
46 |
47 | :::{code} html
48 | :force: true
49 |
50 |
51 |
52 | {{ checked }}
53 |
56 |
57 | :::
58 |
59 | ```{note}
60 | Multiple partials can be targetted by adding multiple attributes to the element.
61 |
62 | :::{code} html
63 | :force: true
64 |
65 |