adamghill/django-unicorn

The magical reactive component framework for Django ✨

django-unicorn's Issues

Move the Javascript code into namespace

Test that `radio` buttons work

Handle custom X-CSRFToken header

Django setting: https://docs.djangoproject.com/en/3.0/ref/settings/#std:setting-CSRF_HEADER_NAME

Use msgpack to reduce the size of the payload

https://msgpack.org/index.html

Javascript: https://github.com/kawanet/msgpack-lite
Python: https://github.com/vsergeev/u-msgpack-python

Looks promising

How can I help? I’m a web designer/developer (HTML + CSS) and haven’t taken the leap into the front-end frameworks.

I like the idea of components but all of the overhead in the front-end frameworks is overwhelmingly complex and changes far too often to keep up with a small team.

We have a couple of projects which use Django with templates.

This project looks like something we would be interested in.

How can we help?

[Bug] Documentation install missing add the csrf_token templatetag

CSRF token is missing. Do you need to add {% csrf_token %}?

Fix Github actions error

Cast to a particular property type

Strings and booleans get cast as expected, but it'd be nice to have a mechanism to cast to a particular type inside the component. The canonical example would be a datetime coming from a HTML input and getting parsed to be a datetime` object inside the component.

Meta.updates_querystring to provide property information in the querystring

Model bind to a nested property

Either a property array, dictionary or object. Probably should use dot notation to access.

e.g. <input type="text" unicorn:model="blog.author.name">

[Feature] add the posibility of move unicorn/components/<module>.py to a custom place like myapp/views.py

you can define:

# settings.py
UNICORN_COMPONENTS_PREFIX  = [
'myapp.views','unicorn.components',
]

The locations where the UnicornCompornent will import.

Add unit tests around the javascript

Potentially use https://github.com/avajs/ava?

CSRF token can't be found

If {% csrf_token %} is on the page after {% unicorn_scripts %} nothing works.

Extra examples (upvote and chat)

Not sure if it is possible yet but the ability to upvote on multiple tabs/browsers and chat.

Handle kwargs in method calls

`prevent` modifier on actions

loading delay modifier

To prevent flicker only show/remove unicorn:loading when the action takes longer than 200ms.

`event` variable for use in actions

Possible directory error in default examples

Hi. I've created an empty django project to test unicorn. But somehow the default instructions don't seem to work and cause a template not found error. Here's what I've done:

1. Created a new django project in pycharm
2. pip install django-unicorn
3. Added "django_unicorn", to the INSTALLED_APPS
4. Created an empty base.html file and made it viewable in the browser
5. Added path("unicorn/", include("django_unicorn.urls"))
6. Added {% load unicorn %} to the top of base.html
7. Added {% unicorn_scripts %} right underneath in base.html
8. Ran python manage.py startunicorn hello-world
9. Added {% unicorn 'hello-world' %} at the bottom of base.html

After this last step 9 it starts to break and throws a TemplateDoesNotExist error:
django.template.loaders.filesystem.Loader: /home/user/uniplayground/templates/unicorn/hello-world.html (Source does not exist)

In my project folder the hello-world.html file generated by step 8 is located under:
/home/user/uniplayground/unicorn/templates/unicorn/hello-world.html

Am I doing something wrong or does the startunicorn command not generate the files into the right structure?

Edit: Moving the HTML file to the template folder that django is looking in seems to work. While leaving the python file in the generated folder structure.

[Feature] posibility of change of unicorn: prefix by one custom like uni: on JS

Set property shortcut

Instead of having to create set_name() methods, support something like name='World'.

Handle component actions/methods

Similar to https://laravel-livewire.com/screencasts/actions.

Textarea is not keeping input updates

Updating class variables from outside

HI Adam!

It would be useful to be able to update the unicorn component class variables from another Django app.
You mentioned an API call or database hookup on the page refresh.
How would this be done?

Would this also be possible via AJAX or a Javascript hook?

Thanks!

Ashirvad

Investigate using async view for message endpoint

Once Django 3.1 and async views are available, see how hard it would be to use an async view if configured.

Add the possibility to set django variables as action parameters.

Listen for all events, not just `click`

Test that `textarea` works

Handle multiple actions on the same element

For example:
<input unicorn:keyup.enter="add" unicorn:keyup.escape="clear"></input>

Django model on property doesn't reset as expected

When using a Django model as a property, if a field is updated as part of unicorn:model, the model will not get reset as expected.

class HelloWorldView(UnicornView):
    book = Book(title="The Sandman")

<input unicorn:model="book.title" type="text" id="bookId">

Model binding to queryset doesn't propogate the change to the model as expected

Reduce lag with keeping text input up to date

Example:

Not sure if this is related to morphdom updating the DOM in a way not expected. Maybe need to prevent the current model name from being updated by morphdom? Or maybe just reduce the debounce timeout might make it work a little better?

Investigate using class-based view instead of the custom Component class

Maybe there is a way to reuse a class-based view instead of the custom Component does now.

Setting to define applications to look in for components

Instead of only looking in the unicorn app, be able to set an array of apps to check for components.

Handle `lazy` modifier

Add support for unicorn:model.lazy to change the event listener to be blur instead of input.

Handle multiple of the same components when loaded on the same page

Add checksum to verify that forms don't change mid-flight

The Component class generates a checksum based on the attribute names which could be used to verify that the component gets updated in the message view code.

`defer` modifier on models

$model special action variable

It would be useful to handle the special action argument $model being passed into an action. Probably only useful for db models since normal models can just do self.whatever in the component view code.

<div>
  {% for book in books %}
  <div u:db="book" u:pk="{{ book.id }}">
    <button u:click="delete($model)`>
    <!-- <button u:click="delete({{ book.id }})`> -->
  </div>
  {% endfor %}
</div>

from django_unicorn.components import UnicornView
from books.models import Book

class DbModelView(UnicornView):
    # magically instantiate the appropriate book instance object here based on model class and pk
    def delete(book):
         book.delete()

    # normal way call action with a model requires passing around an id/pk/slug and looking it up
    # def delete(book_id):
    #    book = Book.objects.get(id=book_id)
    #    book.delete()

    class Meta:
        db_models = [DbModel("book", Book)]

Investigate pysimdjson instead of orjson

https://github.com/TkTech/pysimdjson

Validation on models

Investigate alternative Python parsers

https://github.com/pyparsing/pyparsing might be saner than the string parsing done in https://github.com/adamghill/django-unicorn/blob/master/django_unicorn/call_method_parser.py.

GitHub action to run unittests on PRs

Passing arguments to the unicorn view

Being able to send arguments from the parent django template to the unicorn view.

To be able to do something like :

class TestView(UnicornView):
    name = "hello-world"
    def __init__(self, var):
         self.var = var
    def set_var(self, var):
         self.var = var

{% unicorn 'hello-world' with var=var %}      (django {% include %} like )

Or to be able to send arguments to Unicorn.call :

{% unicorn 'hello-world' %}

<button onclick="Unicorn.call('hello-world', 'set_var', 'var_value');">Set the name from outside the component</button>

Even if it's just sending a one-shot primitives it will be very helpful to give some context to the unicorn view.

When a model and action fire at the same time, the sync input can be lost

I was not seeing this on local dev with 0.6.0, but it happens when deployed. I am now able to replicate it on local by throttling network responses.

I think I need to merge the syncInput and callMethod actions that fire "at the same time" into the payload array so that the syncInput doesn't get lost.

Computed property

Interaction glitch w/ BitWarden

hello Adam, long time no talk!

I was trying out the demo on the website and something BitWarden is doing to the input box, I think added it's own attribute to the html, causes the input to be redrawn empty but if you click the button add it will still load something but not everything.

Video:
django-unicorn-glitch.mov.zip

If I disable BitWarden and reload the page, the interaction works fine.

Handle `debounce` modifier

Add support for something like unicorn:model.debounce.1000ms to set debounce timeout.

Split up unicorn.js into separate files

Handle basic Python types in action method calls

Ideally these types would be supported passed into a method call: string, int, decimal, uuid, datetime, dict, list, tuple, set.