render function for list of posts

Author: Andres Vargas

app/settings.py

@@ -129,3 +129,6 @@
 
 CSRF_HEADER_NAME="HTTP_X_CSRF_TOKEN"
 
+LIVEWIRE_COMPONENTS_PREFIX="core.views"
+
+

app/urls.py

@@ -2,10 +2,12 @@
 from django.urls import path, include
 from django.contrib.staticfiles.urls import staticfiles_urlpatterns
 from django.views.generic import TemplateView as TV
+from core.views import posts
 
 urlpatterns = [
     path('admin/', admin.site.urls),
     path('', include("livewire.urls")),
     path('counter', TV.as_view(template_name="counter.html"), name="counter"),
+    path('posts', posts , name='posts'),
     path('', TV.as_view(template_name="index.html"), name="index"),
 ] + staticfiles_urlpatterns()

core/migrations/0001_initial.py

@@ -1,4 +1,4 @@
-# Generated by Django 3.0.4 on 2020-03-22 06:03
+# Generated by Django 3.0.4 on 2020-03-22 07:12
 
 from django.db import migrations, models
 
@@ -16,7 +16,7 @@ class Migration(migrations.Migration):
             fields=[
                 ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
                 ('title', models.CharField(max_length=100)),
-                ('context', models.TextField()),
+                ('content', models.TextField()),
                 ('created_at', models.DateTimeField(auto_now_add=True)),
                 ('updated_at', models.DateTimeField(auto_now=True)),
             ],

core/models.py

@@ -3,7 +3,7 @@
 
 class Post(models.Model):
     title = models.CharField(max_length=100)
-    context = models.TextField()
+    content = models.TextField()
 
     created_at = models.DateTimeField(auto_now_add=True)
     updated_at = models.DateTimeField(auto_now=True)

core/templates/base.html

@@ -12,12 +12,13 @@
   <section class="section">
     <div class="container">
       <h1 class="title">
-        Hello livewire
+          <a href="{% url 'index' %}">  Hello livewire</a>
       </h1>
       <p class="subtitle">
         My first website with <strong>django-livewire</strong>!
       </p>
 
+
     {% block content %}
     {% endblock %}
     </div>

core/templates/counter.html

@@ -2,6 +2,6 @@
 {% load livewire_tags %}
 {% block content %}
 
-{% livewire "counter" %}
+    {% livewire "counter" %}
 
 {% endblock content %}

core/templates/delete_post.livewire.html

@@ -8,6 +8,9 @@
         <li>
             <a href=" {% url 'counter' %}" >counter</a>
         </li>
+        <li>
+            <a href=" {% url 'posts' %}" >posts</a>
+        </li>
     </ul>
     </div>
 {% endblock content %}

core/templates/index.html

@@ -0,0 +1,7 @@
+{% extends "base.html" %}
+{% load livewire_tags %}
+{% block content %}
+    
+    {% livewire "posts" posts=posts %}
+
+{% endblock content %}

core/templates/posts.html

@@ -0,0 +1,22 @@
+<div>
+    
+<h1 class="title">Posts</h1>
+
+<table class="table">
+    <tr>
+        <th>Title</th>
+        <th> Content </th>
+    </tr>
+
+
+{% for post in posts  %}
+<tr>
+    <td> {{post.title}}</td>
+    <td>{{post.content}}</td>
+</tr>
+
+{% endfor %}
+
+
+</table>
+</div>

core/templates/posts.livewire.html

@@ -1,17 +1,36 @@
 from django.shortcuts import render
 from livewire.views import LivewireComponent
 
+from core.models import Post
+
+
+def posts(request):
+    context={
+        'posts': list(Post.objects.all().values("id", "title", "content"))
+     }
+    return render(request, "posts.html", context)
+
+
+
+class PostsLivewire(LivewireComponent):
+
+    def mount(self, **kwargs):
+        posts = kwargs.get("posts")
+        return {
+            'posts':posts
+        }
+
+
 
 class CounterLivewire(LivewireComponent):
-    component_name = "counter"
     count = 2
     def decrement(self, *args):
         self.count -=1
 
     def increment(self, *args):
         self.count +=1
 
-    def get_context(self):
+    def mount(self, **kwargs):
         return {
             'count': self.count
         }

core/views.py

@@ -1,7 +1,10 @@
 <script src="{{STATIC_URL}}dist/livewire.js?id=c6f7d3682bc8d847a034" data-turbolinks-eval="false"></script>
 <script data-turbolinks-eval="false">
     window.livewire = new Livewire();
-    window.livewire_app_url = '';
+    window.livewire_app_url = ""; 
+    {% comment %}
+        TODO: livewire_app_url prefix by settings
+    {% endcomment %} 
     window.livewire_token = '{{ csrf_token }}';
 
     document.addEventListener("DOMContentLoaded", function() {

livewire/templates/livewire_scripts.html

@@ -1,5 +1,6 @@
 from django import template
 from livewire.views import LivewireComponent
+from livewire.utils import instance_class
 register = template.Library()
 
 @register.inclusion_tag("livewire_scripts.html", takes_context=True)
@@ -8,8 +9,5 @@ def livewire_scripts(context):
 
 @register.simple_tag
 def livewire(component,**kwargs):
-    # TODO: register Components by livewire.register(ComponentLivewire)
-    from core.views import CounterLivewire
-    livewire_component = CounterLivewire()
-    print(livewire_component.get_context())
+    livewire_component = instance_class(component, **kwargs)
     return livewire_component.render_initial()

livewire/templatetags/livewire_tags.py

@@ -3,6 +3,6 @@
 from .views import livewire_message
 
 urlpatterns = [
-    path('livewire/message/<component_name>', livewire_message),
+    path('livewire/message/<component_name>', livewire_message, name='livewire_app_url'),
 ]
 

livewire/urls.py

@@ -0,0 +1,32 @@
+from django.shortcuts import render
+from django.template.loader import render_to_string
+from django.utils.encoding import smart_str
+from django.utils.safestring import mark_safe
+from django.http import JsonResponse
+from django.conf import settings
+import random
+import string
+import json
+import importlib
+import htmlement
+import xml.etree.ElementTree as ET
+
+
+def get_id():
+    return ''.join(random.choice(string.ascii_lowercase) for i in range(20))
+
+def get_component_name(name):
+    name = name.replace("_", " ")
+    return name.title().replace(" ","")
+
+def instance_class(component_name, **kwargs):
+    path = getattr(settings,"LIVEWIRE_COMPONENTS_PREFIX")
+    if not path:
+        assert False, "LIVEWIRE_COMPONENTS_PREFIX missing"
+    module = importlib.import_module(path)
+    class_name = get_component_name(component_name)
+    class_livewire = getattr(module, '{}Livewire'.format(class_name))
+    inst = class_livewire(**kwargs)
+    return inst
+
+

livewire/utils.py

@@ -3,36 +3,41 @@
 from django.utils.encoding import smart_str
 from django.utils.safestring import mark_safe
 from django.http import JsonResponse
+from django.conf import settings
 import random
 import string
 import json
 import importlib
 import htmlement
 import xml.etree.ElementTree as ET
+from .utils import get_id, get_component_name, instance_class
 
 def livewire_message(request, component_name):
-    
-    # TODO: change for load the component dynamic
-    from core.views import CounterLivewire
-    inst = CounterLivewire()
+    inst = instance_class(component_name)
     if request.method == "POST":
         body = json.loads(request.body)
         inst.parser_payload(body)
     return JsonResponse(inst.render(), safe=False)
 
-def get_id():
-    return ''.join(random.choice(string.ascii_lowercase) for i in range(20))
 
 class LivewireComponent(object):
     id = None
 
+    def __init__(self, **kwargs):
+        self.kwargs = kwargs
+
     def get_component_name(self):
-        return self.component_name.lower()
+        name = self.__class__.__name__.lower()
+        return name.replace("livewire","")
 
     def get_dom(self):
         context = self.get_context()
         return self._render_component(context)
 
+    def get_context(self):
+        kwargs = self.kwargs
+        return self.mount(**kwargs)
+
     def get_response(self):
         dom = self.get_dom()
         return {