Data Binding

Author: Andres Vargas

TODO.md

@@ -0,0 +1 @@
+* ask for how wire:model="parent.message" works ?

app/urls.py

@@ -8,6 +8,7 @@
     path('admin/', admin.site.urls),
     path('', include("livewire.urls")),
     path('counter', TV.as_view(template_name="counter.html"), name="counter"),
+    path('helloworld', TV.as_view(template_name="helloworld.html"), name="helloworld"),
     path('posts', posts , name='posts'),
     path('', TV.as_view(template_name="index.html"), name="index"),
 ] + staticfiles_urlpatterns()

core/templates/counter.html

@@ -1,7 +1,11 @@
 {% extends "base.html" %}
 {% load livewire_tags %}
 {% block content %}
-    
+
+<p>
+The basic example of livewire ... rock yeah!
+</p>
+
     {% livewire "counter" %}
 
 {% endblock content %}

core/templates/counter.livewire.html

@@ -1,4 +1,7 @@
 <div style="text-align: center">
+
+
+
     <button class="button is-primary is-light is-large" wire:click="increment">+</button>
     <h1 class="title" >{{ count }}</h1>
     <button class="button is-primary is-light is-large" wire:click="decrement">-</button>

core/templates/helloworld.html

@@ -0,0 +1,27 @@
+{% extends "base.html" %}
+{% load livewire_tags %}
+{% block content %}
+
+
+<p>
+Module trying to implement the
+
+https://laravel-livewire.com/docs/properties
+
+</p>
+
+{# livewire 'helloworld' #}
+
+
+<hr>
+
+<p>
+
+    Data Binding
+
+</p>
+
+{% livewire 'helloworld_databind' %}
+
+
+{% endblock content %}

core/templates/helloworld.livewire.html

@@ -0,0 +1,4 @@
+<div>
+        <h1>{{ message }}</h1>
+            <!-- Will output "Hello World!" -->
+</div>

core/templates/helloworld_databind.livewire.html

@@ -0,0 +1,5 @@
+<div>
+        <input wire:model="parent.message" type="text">
+
+            <h1>{{ message }}</h1>
+</div>

core/templates/index.html

@@ -11,6 +11,7 @@
         <li>
             <a href=" {% url 'posts' %}" >posts</a>
         </li>
+        <li><a href="{% url 'helloworld' %}"> hello world </a></li>
     </ul>
     </div>
 {% endblock content %}

core/templates/posts.html

@@ -1,7 +1,12 @@
 {% extends "base.html" %}
 {% load livewire_tags %}
 {% block content %}
-    
+
+<p>
+Implementing the https://laravel-livewire.com/docs/mount-method
+
+</p>
+
     {% livewire "posts" posts=posts %}
 
 {% endblock content %}

core/views.py

@@ -10,8 +10,6 @@ def posts(request):
      }
     return render(request, "posts.html", context)
 
-
-
 class PostsLivewire(LivewireComponent):
 
     def mount(self, **kwargs):
@@ -30,8 +28,13 @@ def decrement(self, *args):
     def increment(self, *args):
         self.count +=1
 
-    def mount(self, **kwargs):
-        return {
-            'count': self.count
-        }
+   
+
+class HelloworldLivewire(LivewireComponent):
+    message = "Hellowwwww mundo!"
+    
+
+class HelloworldDatabindLivewire(LivewireComponent):
+    message = "Hellowwwww mundo!"
+
 

fly.toml

@@ -0,0 +1,22 @@
+app = "livewire"
+
+
+[[services]]
+  internal_port = 8080
+  protocol = "tcp"
+
+  [services.concurrency]
+    hard_limit = 25
+    soft_limit = 20
+
+  [[services.ports]]
+    handlers = ["http"]
+    port = "80"
+
+  [[services.ports]]
+    handlers = ["tls", "http"]
+    port = "443"
+
+  [[services.tcp_checks]]
+    interval = 10000
+    timeout = 2000

livewire/utils.py

@@ -10,23 +10,37 @@
 import importlib
 import htmlement
 import xml.etree.ElementTree as ET
+import re
+
+
+def get_vars(instance):
+    props = set()
+    for prop in dir(instance):
+        if not callable(getattr(instance, prop)) and not prop.startswith("__"):
+            props.add(prop)
+    return props
 
 
 def get_id():
     return ''.join(random.choice(string.ascii_lowercase) for i in range(20))
 
+
+def snakecase(name):
+    name = re.sub('(.)([A-Z][a-z]+)', r'\1_\2', name)
+    return re.sub('([a-z0-9])([A-Z])', r'\1_\2', name).lower()
+
+
 def get_component_name(name):
     name = name.replace("_", " ")
-    return name.title().replace(" ","")
+    return name.title().replace(" ", "")
+
 
 def instance_class(component_name, **kwargs):
-    path = getattr(settings,"LIVEWIRE_COMPONENTS_PREFIX")
+    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/views.py

@@ -1,4 +1,3 @@
-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
@@ -11,6 +10,7 @@
 import htmlement
 import xml.etree.ElementTree as ET
 from .utils import get_id, get_component_name, instance_class
+from .utils import get_vars, snakecase
 
 def livewire_message(request, component_name):
     inst = instance_class(component_name)
@@ -21,30 +21,41 @@ def livewire_message(request, component_name):
 
 
 class LivewireComponent(object):
-    id = None
+    __id = None
+
 
     def __init__(self, **kwargs):
-        self.kwargs = kwargs
+        self.__kwargs = kwargs
 
     def get_component_name(self):
-        name = self.__class__.__name__.lower()
-        return name.replace("livewire","")
+        name = self.__class__.__name__.replace("Livewire","")
+        name = snakecase(name)
+        return name
 
     def get_dom(self):
         context = self.get_context()
         return self._render_component(context)
 
+    def fill(self, context):  # Livewire Compatility https://laravel-livewire.com/docs/properties
+        self.update_context(context)
+
     def get_context(self):
-        kwargs = self.kwargs
-        return self.mount(**kwargs)
+        kwargs = self.__kwargs
+        mount_result = {}
+        if hasattr(self, "mount"):   # Livewire Compatility
+            mount_result = self.mount(**kwargs)
+        params = get_vars(self)
+        for property in params:
+            mount_result[property] = getattr(self, property)
+        return mount_result
 
     def get_response(self):
         dom = self.get_dom()
         return {
-            'id': self.id,
+            'id': self.__id,
             'name': self.get_component_name(),
             'dom': dom,
-            'fromPrefetch':'',
+            'fromPrefetch': '',
             'redirectTo': '',
             'children': [],
             'dirtyInputs': [],
@@ -59,20 +70,20 @@ def update_context(self, data_context):
         context = self.get_context()
         context.update(data_context)
         for key, value in context.items():
-            setattr(self, key,value)
+            setattr(self, key, value)
         return context
 
 
     def parser_payload(self, payload):
-        self.id = payload.get("id")
+        self.__id = payload.get("id")
         self.update_context(payload.get("data"))
         action_queue = payload.get("actionQueue", [])
         for action in action_queue:
             action_type = action.get("type")
             payload = action.get("payload")
             if action_type == "callMethod":
                 method = payload.get("method")
-                params = payload.get("params",[])
+                params = payload.get("params", [])
                 """
                 TODO:
                     RUN THIS IT IS REALLY SAFE ???
@@ -81,37 +92,40 @@ def parser_payload(self, payload):
                 """
                 local_method = getattr(self, method)
                 local_method(*params)
+            elif action_type == "syncInput":
+                data = {}
+                data[payload["name"]] = payload["value"]
+                self.update_context(data)
 
     def render(self):
         response = self.get_response()
         return response
 
-    def _render_component(self, context, initial_data={} ):
+    def _render_component(self, context, initial_data={}):
         component_name = self.get_component_name()
         component_render = render_to_string(f'{component_name}.livewire.html',
                                             context=self.get_context())
         root = htmlement.fromstring(component_render).find("div")
-        root.set('wire:id', self.id)
+        root.set('wire:id', self.__id)
         if initial_data:
-            root.set("wire:initial-data",json.dumps(initial_data))
+            root.set("wire:initial-data", json.dumps(initial_data))
         res = ET.tostring(root)
-        return  mark_safe(smart_str(res))
-
+        return mark_safe(smart_str(res))
 
     def render_initial(self):
-        self.id =  get_id()
+        self.__id = get_id()
         component = self.get_component_name()
         context = self.get_context()
         initial_data = {
-            'id': self.id,
+            'id': self.__id,
             'name': component,
             'redirectTo': False,
             "events": [],
             "eventQueue": [],
             "dispatchQueue": [],
-            "data": context, 
+            "data": context,
             "children": {},
-            "checksum": "9e4c194bb6aabf5f1" # TODO: checksum
+            "checksum": "9e4c194bb6aabf5f1"  # TODO: checksum
         }
         return self._render_component(context, initial_data=initial_data)
 

requirements.in

@@ -1,3 +1,4 @@
 django
 django-bsync
 django-seed
+stringcase