update livewire

Author: Andres Vargas

livewire/static/livewire/MessageBag.js

@@ -0,0 +1,46 @@
+
+export default class MessageBag {
+    constructor() {
+        this.bag = {}
+    }
+
+    add(name, thing) {
+        if (! this.bag[name]) {
+            this.bag[name] = []
+        }
+
+        this.bag[name].push(thing)
+    }
+
+    push(name, thing) {
+        this.add(name, thing)
+    }
+
+    first(name) {
+        if (! this.bag[name]) return null
+
+        return this.bag[name][0]
+    }
+
+    last(name) {
+        return this.bag[name].slice(-1)[0]
+    }
+
+    get(name) {
+        return this.bag[name]
+    }
+
+    shift(name) {
+        return this.bag[name].shift()
+    }
+
+    call(name, ...params) {
+        (this.listeners[name] || []).forEach(callback => {
+            callback(...params)
+        })
+    }
+
+    has(name) {
+        return Object.keys(this.listeners).includes(name)
+    }
+}

livewire/static/livewire/component/DisableForms.js

@@ -13,11 +13,21 @@ export default function () {
 
                 if (! el.el.contains(node)) return
 
-                if (node.tagName.toLowerCase() === 'button' && node.type === 'submit') {
-                    // Disabled submit button.
+                if (
+                    // <button type="submit">
+                    (node.tagName.toLowerCase() === 'button' && node.type === 'submit')
+                    // <select>
+                    || (node.tagName.toLowerCase() === 'select')
+                    // <input type="checkbox|radio">
+                    || (node.tagName.toLowerCase() === 'input' && (node.type === 'checkbox' || node.type === 'radio'))
+                ) {
                     node.disabled = true
-                } else if (node.tagName.toLowerCase() === 'input') {
-                    // Set any inputs to "read only".
+                } else if (
+                    // <input type="text">
+                    node.tagName.toLowerCase() === 'input'
+                    // <textarea>
+                    || node.tagName.toLowerCase() === 'textarea'
+                ) {
                     node.readOnly = true
                 }
             })

livewire/static/livewire/component/FileUploads.js

@@ -0,0 +1,38 @@
+import store from '@/Store'
+
+export default function () {
+    store.registerHook('interceptWireModelAttachListener', (el, directive, component) => {
+        if (! (el.rawNode().tagName.toLowerCase() === 'input' && el.rawNode().type === 'file')) return
+
+        let start = () => el.rawNode().dispatchEvent(new CustomEvent('livewire-upload-start', { bubbles: true }))
+        let finish = () => el.rawNode().dispatchEvent(new CustomEvent('livewire-upload-finish', { bubbles: true }))
+        let error = () => el.rawNode().dispatchEvent(new CustomEvent('livewire-upload-error', { bubbles: true }))
+        let progress = (progressEvent) => {
+            var percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total )
+
+            el.rawNode().dispatchEvent(
+                new CustomEvent('livewire-upload-progress', {
+                    bubbles: true, detail: { progress: percentCompleted }
+                })
+            )
+        }
+
+        let eventHandler = e => {
+            if (e.target.files.length === 0) return
+
+            start()
+
+            if (e.target.multiple) {
+                component.uploadMultiple(directive.value, e.target.files, finish, error, progress)
+            } else {
+                component.upload(directive.value, e.target.files[0], finish, error, progress)
+            }
+        }
+
+        el.addEventListener('change', eventHandler)
+
+        component.addListenerForTeardown(() => {
+            el.removeEventListener('change', eventHandler)
+        })
+    })
+}

livewire/static/livewire/component/LoadingStates.js

@@ -5,6 +5,7 @@ export default function () {
         component.targetedLoadingElsByAction = {}
         component.genericLoadingEls = []
         component.currentlyActiveLoadingEls = []
+        component.currentlyActiveUploadLoadingEls = []
     })
 
     store.registerHook('elementInitialized', (el, component) => {
@@ -105,13 +106,41 @@ function setLoading(component, actions) {
 
     const allEls = component.genericLoadingEls.concat(actionTargetedEls)
 
-    allEls.forEach(({ el, directive }) => {
+    startLoading(allEls)
+
+    component.currentlyActiveLoadingEls = allEls
+}
+
+export function setUploadLoading(component, modelName) {
+    const actionTargetedEls = component.targetedLoadingElsByAction[modelName] || []
+
+    const allEls = component.genericLoadingEls.concat(actionTargetedEls)
+
+    startLoading(allEls)
+
+    component.currentlyActiveUploadLoadingEls = allEls
+}
+
+export function unsetUploadLoading(component) {
+    endLoading(component.currentlyActiveUploadLoadingEls)
+
+    component.currentlyActiveUploadLoadingEls = []
+}
+
+function unsetLoading(component) {
+    endLoading(component.currentlyActiveLoadingEls)
+
+    component.currentlyActiveLoadingEls = []
+}
+
+function startLoading(els) {
+    els.forEach(({ el, directive }) => {
         el = el.el // I'm so sorry @todo
 
         if (directive.modifiers.includes('class')) {
             // This is because wire:loading.class="border border-red"
             // wouldn't work with classList.add.
-            const classes = directive.value.split(' ')
+            const classes = directive.value.split(' ').filter(Boolean)
 
             if (directive.modifiers.includes('remove')) {
                 el.classList.remove(...classes)
@@ -132,16 +161,14 @@ function setLoading(component, actions) {
             }
         }
     })
-
-    component.currentlyActiveLoadingEls = allEls
 }
 
-function unsetLoading(component) {
-    component.currentlyActiveLoadingEls.forEach(({ el, directive }) => {
+function endLoading(els) {
+    els.forEach(({ el, directive }) => {
         el = el.el // I'm so sorry @todo
 
         if (directive.modifiers.includes('class')) {
-            const classes = directive.value.split(' ')
+            const classes = directive.value.split(' ').filter(Boolean)
 
             if (directive.modifiers.includes('remove')) {
                 el.classList.add(...classes)
@@ -158,6 +185,4 @@ function unsetLoading(component) {
             el.style.display = 'none'
         }
     })
-
-    component.currentlyActiveLoadingEls = []
 }

livewire/static/livewire/component/Polling.js

@@ -1,19 +1,54 @@
 import MethodAction from '@/action/method'
+import DOMElement from '@/dom/dom_element'
 import store from '@/Store'
 
 export default function () {
     store.registerHook('elementInitialized', (el, component) => {
         if (el.directives.missing('poll')) return
 
-        fireActionOnInterval(el, component)
+        let intervalId = fireActionOnInterval(el.el, component)
+
+        component.addListenerForTeardown(() => {
+            clearInterval(intervalId)
+        })
+
+        el.el.__livewire_polling_interval = intervalId
+    })
+
+    store.registerHook('beforeElementUpdate', (from, to, component) => {
+        if (from.__livewire_polling_interval !== undefined) return
+
+        let fromEl = new DOMElement(from)
+        let toEl = new DOMElement(to)
+
+        if (fromEl.directives.missing('poll') && toEl.directives.has('poll')) {
+            setTimeout(() => {
+                let intervalId = fireActionOnInterval(fromEl.el, component)
+
+                component.addListenerForTeardown(() => {
+                    clearInterval(intervalId)
+                })
+
+                from.__livewire_polling_interval = intervalId
+            }, 0)
+        }
     })
 }
 
-function fireActionOnInterval(el, component) {
-    const directive = el.directives.get('poll')
-    const method = directive.method || '$refresh'
+function fireActionOnInterval(node, component) {
+    let interval = (new DOMElement(node)).directives.get('poll').durationOr(2000);
+
+    return setInterval(() => {
+        if (node.isConnected === false) return
+
+        let el = new DOMElement(node);
+
+        // Don't poll when directive is removed from element.
+        if (el.directives.missing('poll')) return
+
+        const directive = el.directives.get('poll')
+        const method = directive.method || '$refresh'
 
-    setInterval(() => {
         // Don't poll when the tab is in the background.
         // The "Math.random" business effectivlly prevents 95% of requests
         // from executing. We still want "some" requests to get through.
@@ -23,5 +58,5 @@ function fireActionOnInterval(el, component) {
         if (store.livewireIsOffline) return
 
         component.addAction(new MethodAction(method, directive.params, el))
-    }, directive.durationOr(2000));
+    }, interval);
 }

livewire/static/livewire/component/UpdateQueryString.js

@@ -43,6 +43,6 @@ export default function () {
 
         var stringifiedQueryString = queryString.stringify(queryData)
 
-        history.replaceState({turbolinks: {}}, "", window.location.pathname + '?' + stringifiedQueryString)
+        history.replaceState({turbolinks: {}}, "", [window.location.pathname, stringifiedQueryString].filter(Boolean).join('?'))
     })
 }