update livewire

Author: Andres Vargas

.coveragerc

@@ -0,0 +1,9 @@
+[run]
+branch = true
+source = .
+omit = */tests/*, */migrations/*, */urls.py, */settings/*
+       */asgi.py, */wsgi.py, manage.py, fabfile.py, */apps.py, populate.py
+
+[report]
+show_missing = true
+skip_covered = true

livewire/static/livewire/HookManager.js

@@ -9,6 +9,8 @@ export default {
         'messageFailed',
         'responseReceived',
         'beforeDomUpdate',
+        'beforeElementUpdate',
+        'afterElementUpdate',
         'afterDomUpdate',
         'interceptWireModelSetValue',
         'interceptWireModelAttachListener',

livewire/static/livewire/Store.js

@@ -25,6 +25,13 @@ const store = {
         return this.componentsById[id]
     },
 
+    getComponentsByName(name) {
+        return this.components()
+            .filter(component => {
+                return component.name === name
+            })
+    },
+
     hasComponent(id) {
         return !! this.componentsById[id]
     },
@@ -57,6 +64,28 @@ const store = {
         )
     },
 
+    emitSelf(componentId, event, ...params) {
+        let component = this.findComponent(componentId)
+
+        if (component.events.includes(event)) {
+            component.addAction(new EventAction(
+                event, params
+            ))
+        }
+    },
+
+    emitTo(componentName, event, ...params) {
+        let components = this.getComponentsByName(componentName)
+
+        components.forEach(component => {
+            if (component.events.includes(event)) {
+                component.addAction(new EventAction(
+                    event, params
+                ))
+            }
+        })
+    },
+
     componentsListeningForEventThatAreTreeAncestors(el, event) {
         var parentIds = []
 

livewire/static/livewire/index.js

@@ -1,17 +1,17 @@
+import '@/dom/polyfills/index';
 import componentStore from '@/Store'
 import DOM from "@/dom/dom";
 import Component from "@/component/index";
 import Connection from '@/connection'
 import drivers from '@/connection/drivers'
-import '@/dom/polyfills/index';
 import { dispatch } from './util';
+import FileUploads from '@/component/FileUploads'
 import LoadingStates from '@/component/LoadingStates'
 import DisableForms from '@/component/DisableForms'
 import DirtyStates from '@/component/DirtyStates'
 import OfflineStates from '@/component/OfflineStates'
 import Polling from '@/component/Polling'
 import UpdateQueryString from '@/component/UpdateQueryString'
-import SupportVueJs from '@/component/SupportVueJs'
 
 class Livewire {
     constructor(options = {}) {
@@ -50,6 +50,10 @@ class Livewire {
         this.components.emit(event, ...params)
     }
 
+    emitTo(name, event, ...params) {
+        this.components.emitTo(name, event, ...params)
+    }
+
     on(event, callback) {
         this.components.on(event, callback)
     }
@@ -73,10 +77,6 @@ class Livewire {
         this.onLoadCallback()
         dispatch('livewire:load')
 
-        window.addEventListener('beforeunload', () => {
-            this.components.tearDownComponents()
-        })
-
         document.addEventListener('visibilitychange', () => {
             this.components.livewireIsInBackground = document.hidden
         }, false);
@@ -103,11 +103,11 @@ if (! window.Livewire) {
 }
 
 UpdateQueryString()
-SupportVueJs()
+OfflineStates()
 LoadingStates()
 DisableForms()
+FileUploads()
 DirtyStates()
-OfflineStates()
 Polling()
 
 dispatch('livewire:available')

livewire/static/livewire/node_initializer.js

@@ -1,4 +1,4 @@
-import { kebabCase } from '@/util'
+import { kebabCase, debounce } from '@/util'
 import ModelAction from '@/action/model'
 import MethodAction from '@/action/method'
 import DOMElement from '@/dom/dom_element'
@@ -50,16 +50,20 @@ export default {
 
         store.callHook('interceptWireModelAttachListener', el, directive, component, debounceIf)
 
+        // File uploads are handled by UploadFiles.js.
+        if (el.rawNode().tagName.toLowerCase() === 'input' && el.rawNode().type === 'file') return
+
         const event = (el.rawNode().tagName.toLowerCase() === 'select')
             || ['checkbox', 'radio'].includes(el.rawNode().type)
             || directive.modifiers.includes('lazy')
             ? 'change' : 'input'
 
         // If it's a text input and not .lazy, debounce, otherwise fire immediately.
-        const handler = debounceIf(hasDebounceModifier || (el.isTextInput() && ! isLazy), e => {
+        let handler = debounceIf(hasDebounceModifier || (el.isTextInput() && ! isLazy), e => {
             const model = directive.value
             const el = new DOMElement(e.target)
-            const value = e instanceof CustomEvent
+            // We have to check for typeof e.detail here for IE 11.
+            const value = e instanceof CustomEvent && typeof e.detail != 'undefined'
                 ? e.detail
                 : el.valueFromInput(component)
 
@@ -93,9 +97,15 @@ export default {
                         if (selectedButNotPressedKeyModifiers.length > 0) return false;
                     }
 
+                    // Strip 'debounce' modifier and time modifiers from modifiers list
+                    let modifiers = directive.modifiers.filter(modifier => {
+                        return ! modifier.match(/debounce/)
+                            && ! modifier.match(/[0-9ms]/)
+                            && ! modifier.match(/[0-9s]/)
+                    })
+
                     // Only handle listener if no, or matching key modifiers are passed.
-                    return (directive.modifiers.length === 0
-                        || directive.modifiers.includes(kebabCase(e.key)))
+                    return modifiers.length === 0 || modifiers.includes(kebabCase(e.key))
                 })
                 break;
             case 'click':
@@ -155,16 +165,35 @@ export default {
                     return
                 }
 
+                if (method === '$emitSelf') {
+                    store.emitSelf(component.id, ...params)
+                    return
+                }
+
+                if (method === '$emitTo') {
+                    store.emitTo(...params)
+                    return
+                }
+
                 if (directive.value) {
                     component.addAction(new MethodAction(method, params, el))
                 }
             })
         }
 
-        el.addEventListener(event, handler)
+        const debounceIf = (condition, callback, time) => {
+            return condition
+                ? debounce(callback, time)
+                : callback
+        }
+
+        const hasDebounceModifier = directive.modifiers.includes('debounce')
+        const debouncedHandler = debounceIf(hasDebounceModifier, handler, directive.durationOr(150))
+
+        el.addEventListener(event, debouncedHandler)
 
         component.addListenerForTeardown(() => {
-            el.removeEventListener(event, handler)
+            el.removeEventListener(event, debouncedHandler)
         })
     },
 

updatelivewire.sh

@@ -0,0 +1,6 @@
+set -x 
+TMPDIR=$(mktemp -d )
+wget https://github.com/livewire/livewire/archive/master.zip -O $TMPDIR/master.zip
+
+7z x $TMPDIR/master.zip -o$TMPDIR
+cp $TMPDIR/livewire-master/js/* livewire/static/livewire/