update the livewire

Author: zodman

livewire/static/livewire/src/Message.js

@@ -1,42 +1,58 @@
+import store from '@/Store'
+
 export default class {
-    constructor(component, updateQueue) {
+    constructor(component, actionQueue) {
         this.component = component
-        this.updateQueue = updateQueue
-    }
-
-    payload() {
-        return {
-            fingerprint: this.component.fingerprint,
-            serverMemo: this.component.serverMemo,
-            // This ensures only the type & payload properties only get sent over.
-            updates: this.updateQueue.map(update => ({
-                type: update.type,
-                payload: update.payload,
-            })),
-        }
+        this.actionQueue = actionQueue
     }
 
-    storeResponse(payload) {
-        return (this.response = payload)
+    get refs() {
+        return this.actionQueue
+            .map(action => {
+                return action.ref
+            })
+            .filter(ref => ref)
     }
 
-    resolve() {
-        let returns = this.response.effects.returns || []
+    payload() {
+        let payload = {
+            id: this.component.id,
+            data: this.component.data,
+            name: this.component.name,
+            checksum: this.component.checksum,
+            locale: this.component.locale,
+            children: this.component.children,
+            actionQueue: this.actionQueue.map(action => {
+                // This ensures only the type & payload properties only get sent over.
+                return {
+                    type: action.type,
+                    payload: action.payload,
+                }
+            }),
+        }
 
-        this.updateQueue.forEach(update => {
-            if (update.type !== 'callMethod') return
+        if (Object.keys(this.component.errorBag).length > 0) {
+            payload.errorBag = this.component.errorBag
+        }
 
-            update.resolve(
-                returns[update.method] !== undefined
-                    ? returns[update.method]
-                    : null
-            )
-        })
+        return payload
     }
 
-    reject() {
-        this.updateQueue.forEach(update => {
-            update.reject()
-        })
+    storeResponse(payload) {
+        return this.response = {
+            id: payload.id,
+            dom: payload.dom,
+            checksum: payload.checksum,
+            locale: payload.locale,
+            children: payload.children,
+            dirtyInputs: payload.dirtyInputs,
+            eventQueue: payload.eventQueue,
+            dispatchQueue: payload.dispatchQueue,
+            events: payload.events,
+            data: payload.data,
+            redirectTo: payload.redirectTo,
+            errorBag: payload.errorBag || {},
+            updatesQueryString: payload.updatesQueryString,
+        }
     }
 }

livewire/static/livewire/src/PrefetchMessage.js

@@ -6,6 +6,21 @@ export default class extends Message {
     }
 
     get prefetchId() {
-        return this.updateQueue[0].toId()
+        return this.actionQueue[0].toId()
+    }
+
+    payload() {
+        return {
+            fromPrefetch: this.prefetchId,
+            ...super.payload()
+        }
+    }
+
+    storeResponse(payload) {
+        super.storeResponse(payload)
+
+        this.response.fromPrefetch = payload.fromPrefetch
+
+        return this.response
     }
 }

livewire/static/livewire/src/Store.js

@@ -10,7 +10,6 @@ const store = {
     livewireIsInBackground: false,
     livewireIsOffline: false,
     sessionHasExpired: false,
-    requestIsOut: false,
     hooks: HookManager,
     directives: DirectiveManager,
     onErrorCallback: () => {},
@@ -69,7 +68,7 @@ const store = {
     emitSelf(componentId, event, ...params) {
         let component = this.findComponent(componentId)
 
-        if (component.listeners.includes(event)) {
+        if (component.events.includes(event)) {
             component.addAction(new EventAction(event, params))
         }
     },
@@ -78,7 +77,7 @@ const store = {
         let components = this.getComponentsByName(componentName)
 
         components.forEach(component => {
-            if (component.listeners.includes(event)) {
+            if (component.events.includes(event)) {
                 component.addAction(new EventAction(event, params))
             }
         })
@@ -97,15 +96,15 @@ const store = {
 
         return this.components().filter(component => {
             return (
-                component.listeners.includes(event) &&
+                component.events.includes(event) &&
                 parentIds.includes(component.id)
             )
         })
     },
 
     componentsListeningForEvent(event) {
         return this.components().filter(component => {
-            return component.listeners.includes(event)
+            return component.events.includes(event)
         })
     },
 

livewire/static/livewire/src/action/deferred-model.js

@@ -2,8 +2,6 @@
 export default class {
     constructor(el) {
         this.el = el
-        this.resolveCallback = () => {}
-        this.rejectCallback = () => {}
     }
 
     get ref() {
@@ -13,20 +11,4 @@ export default class {
     toId() {
         return btoa(encodeURIComponent(this.el.el.outerHTML))
     }
-
-    onResolve(callback) {
-        this.resolveCallback = callback
-    }
-
-    onReject(callback) {
-        this.rejectCallback = callback
-    }
-
-    resolve(thing) {
-        this.resolveCallback(thing)
-    }
-
-    reject(thing) {
-        this.rejectCallback(thing)
-    }
 }

livewire/static/livewire/src/action/index.js

@@ -5,7 +5,6 @@ export default class extends Action {
         super(el)
 
         this.type = 'callMethod'
-        this.method = method
         this.payload = {
             method,
             params,

livewire/static/livewire/src/action/method.js

@@ -5,7 +5,6 @@ export default class extends Action {
         super(el)
 
         this.type = 'syncInput'
-        this.name = name
         this.payload = {
             name,
             value,

livewire/static/livewire/src/action/model.js

@@ -1,88 +1,103 @@
+import DOMElement from '@/dom/dom_element'
 import store from '@/Store'
 
 export default function () {
     store.registerHook('componentInitialized', component => {
-        component.dirtyEls = []
+        component.targetedDirtyElsByProperty = {}
+        component.genericDirtyEls = []
+
+        registerListener(component)
     })
 
     store.registerHook('elementInitialized', (el, component) => {
         if (el.directives.missing('dirty')) return
 
-        component.dirtyEls.push(el)
+        const propertyNames = el.directives.has('target')
+            && el.directives.get('target').value.split(',').map(s => s.trim())
+
+        addDirtyEls(
+            component,
+            el,
+            propertyNames,
+        )
     })
 
-    store.registerHook(
-        'interceptWireModelAttachListener',
-        (el, directive, component) => {
-            let property = directive.value
-
-            el.el.addEventListener('input', () => {
-                component.dirtyEls.forEach(dirtyEl => {
-                    if (
-                        (dirtyEl.directives.has('model') &&
-                            dirtyEl.directives.get('model').value ===
-                                property) ||
-                        (dirtyEl.directives.has('target') &&
-                            dirtyEl.directives
-                                .get('target')
-                                .value.split(',')
-                                .map(s => s.trim())
-                                .includes(property))
-                    ) {
-                        let isDirty =
-                            el.valueFromInput(component) !=
-                            component.get(property)
-
-                        setDirtyState(dirtyEl, isDirty)
-                    }
-                })
+    store.registerHook('elementRemoved', (el, component) => {
+        // Look through the targeted elements to remove.
+        Object.keys(component.targetedDirtyElsByProperty).forEach(key => {
+            component.targetedDirtyElsByProperty[key] = component.targetedDirtyElsByProperty[key].filter(element => {
+                return ! element.isSameNode(el)
             })
-        }
-    )
-
-    store.registerHook('responseReceived', component => {
-        component.dirtyEls.forEach(element => {
-            if (element.__livewire_dirty_cleanup) {
-                element.__livewire_dirty_cleanup()
-                delete element.__livewire_dirty_cleanup
-            }
         })
-    })
 
-    store.registerHook('elementRemoved', (el, component) => {
-        component.dirtyEls.forEach((element, index) => {
+        // Look through the global/generic elements for the element to remove.
+        component.genericDirtyEls.forEach((element, index) => {
             if (element.isSameNode(el)) {
-                component.dirtyEls.splice(index, 1)
+                component.genericDirtyEls.splice(index, 1)
             }
         })
     })
 }
 
+function addDirtyEls(component, el, targetProperties) {
+        if (targetProperties) {
+            targetProperties.forEach(targetProperty => {
+                if (component.targetedDirtyElsByProperty[targetProperty]) {
+                    component.targetedDirtyElsByProperty[targetProperty].push(el)
+                } else {
+                    component.targetedDirtyElsByProperty[targetProperty] = [el]
+                }
+            })
+        } else {
+            component.genericDirtyEls.push(el)
+        }
+    }
+
+function registerListener(component) {
+    component.el.addEventListener('input', (e) => {
+        const el = new DOMElement(e.target)
+
+        let allEls = []
+
+        if (el.directives.has('model') && component.targetedDirtyElsByProperty[el.directives.get('model').value]) {
+            allEls.push(...component.targetedDirtyElsByProperty[el.directives.get('model').value])
+        }
+
+        if (el.directives.has('dirty')) {
+            allEls.push(...component.genericDirtyEls.filter(dirtyEl => dirtyEl.directives.get('model').value === el.directives.get('model').value))
+        }
+
+        if (allEls.length < 1) return
+
+        if (el.directives.missing('model')) {
+            console.warn('`wire:model` must be present on any element that uses `wire:dirty` or is a `wire:dirty` target.')
+        }
+
+        const isDirty = el.valueFromInput(component) != component.data[el.directives.get('model').value]
+
+        allEls.forEach(el => {
+            setDirtyState(el, isDirty)
+        });
+    })
+}
+
 function setDirtyState(el, isDirty) {
     const directive = el.directives.get('dirty')
 
     if (directive.modifiers.includes('class')) {
         const classes = directive.value.split(' ')
         if (directive.modifiers.includes('remove') !== isDirty) {
             el.classList.add(...classes)
-            el.__livewire_dirty_cleanup = () => el.classList.remove(...classes)
         } else {
             el.classList.remove(...classes)
-            el.__livewire_dirty_cleanup = () => el.classList.add(...classes)
         }
     } else if (directive.modifiers.includes('attr')) {
         if (directive.modifiers.includes('remove') !== isDirty) {
             el.setAttribute(directive.value, true)
-            el.__livewire_dirty_cleanup = () =>
-                el.removeAttribute(directive.value)
         } else {
-            el.removeAttribute(directive.value)
-            el.__livewire_dirty_cleanup = () =>
-                el.setAttribute(directive.value, true)
+            el.removeAttrsibute(directive.value)
         }
-    } else if (!el.directives.get('model')) {
+    } else if (! el.directives.get('model')) {
         el.el.style.display = isDirty ? 'inline-block' : 'none'
-        el.__livewire_dirty_cleanup = () =>
-            (el.el.style.display = isDirty ? 'none' : 'inline-block')
     }
 }