Edit File - File Manager

Edit File: SupportAlpine.js

import { walk } from './../util/walk'
import store from '@/Store'

export default function () {
    window.addEventListener('livewire:load', () => {
        if (! window.Alpine) return

refreshAlpineAfterEveryLivewireRequest()

addDollarSignWire()

supportEntangle()
    })
}

function refreshAlpineAfterEveryLivewireRequest() {
    if (isV3()) {
        store.registerHook('message.processed', (message, livewireComponent) => {
            walk(livewireComponent.el, el => {
                if (el._x_hidePromise) return
                if (el._x_runEffects) el._x_runEffects()
            })
        })

return
    }

if (! window.Alpine.onComponentInitialized) return

window.Alpine.onComponentInitialized(component => {
        let livewireEl = component.$el.closest('[wire\\:id]')

if (livewireEl && livewireEl.__livewire) {
            store.registerHook('message.processed', (message, livewireComponent) => {
                if (livewireComponent === livewireEl.__livewire) {
                    component.updateElements(component.$el)
                }
            })
        }
    })
}

function addDollarSignWire() {
    if (isV3()) {
        window.Alpine.magic('wire', function (el) {
            let wireEl = el.closest('[wire\\:id]')

if (! wireEl)
                console.warn(
                    'Alpine: Cannot reference "$wire" outside a Livewire component.'
                )

let component = wireEl.__livewire

return component.$wire
        })
        return
    }

if (! window.Alpine.addMagicProperty) return

window.Alpine.addMagicProperty('wire', function (componentEl) {
        let wireEl = componentEl.closest('[wire\\:id]')

if (!wireEl)
            console.warn(
                'Alpine: Cannot reference "$wire" outside a Livewire component.'
            )

let component = wireEl.__livewire

return component.$wire
    })
}

function supportEntangle() {
    if (isV3()) return

if (! window.Alpine.onBeforeComponentInitialized) return

window.Alpine.onBeforeComponentInitialized(component => {
        let livewireEl = component.$el.closest('[wire\\:id]')

if (livewireEl && livewireEl.__livewire) {
            Object.entries(component.unobservedData).forEach(
                ([key, value]) => {
                    if (
                        !!value &&
                        typeof value === 'object' &&
                        value.livewireEntangle
                    ) {
                        // Ok, it looks like someone set an Alpine property to $wire.entangle or @entangle.
                        let livewireProperty = value.livewireEntangle
                        let isDeferred = value.isDeferred
                        let livewireComponent = livewireEl.__livewire

let livewirePropertyValue = livewireEl.__livewire.get(livewireProperty)

// Check to see if the Livewire property exists and if not log a console error
                        // and return so everything else keeps running.
                        if (typeof livewirePropertyValue === 'undefined') {
                            console.error(`Livewire Entangle Error: Livewire property '${livewireProperty}' cannot be found`)
                            return
                        }

// Let's set the initial value of the Alpine prop to the Livewire prop's value.
                        component.unobservedData[key]
                            // We need to stringify and parse it though to get a deep clone.
                            = JSON.parse(JSON.stringify(livewirePropertyValue))

let blockAlpineWatcher = false

// Now, we'll watch for changes to the Alpine prop, and fire the update to Livewire.
                        component.unobservedData.$watch(key, value => {
                            // Let's also make sure that this watcher isn't a result of a Livewire response.
                            // If it is, we don't need to "re-update" Livewire. (sending an extra useless) request.
                            if (blockAlpineWatcher === true) {
                                blockAlpineWatcher = false
                                return
                            }

// If the Alpine value is the same as the Livewire value, we'll skip the update for 2 reasons:
                            // - It's just more efficient, why send needless requests.
                            // - This prevents a circular dependancy with the other watcher below.
                            // - Due to the deep clone using stringify, we need to do the same here to compare.
                            if (
                                JSON.stringify(value) ==
                                JSON.stringify(
                                    livewireEl.__livewire.getPropertyValueIncludingDefers(
                                        livewireProperty
                                    )
                                )
                            ) return

// We'll tell Livewire to update the property, but we'll also tell Livewire
                            // to not call the normal property watchers on the way back to prevent another
                            // circular dependancy.
                            livewireComponent.set(
                                livewireProperty,
                                value,
                                isDeferred,
                                // Block firing of Livewire watchers for this data key when the request comes back.
                                // Unless it is deferred, in which cause we don't know if the state will be the same, so let it run.
                                isDeferred ? false : true
                            )
                        })

// We'll also listen for changes to the Livewire prop, and set them in Alpine.
                        livewireComponent.watch(
                            livewireProperty,
                            value => {
                                // Ensure data is deep cloned otherwise Alpine mutates Livewire data
                                component.$data[key] = typeof value !== 'undefined' ? JSON.parse(JSON.stringify(value)) : value
                            }
                        )
                    }
                }
            )
        }
    })
}

export function getEntangleFunction(component) {
    if (isV3()) {
        return (name, defer = false) => {
            let isDeferred = defer
            let livewireProperty = name
            let livewireComponent = component
            let livewirePropertyValue = component.get(livewireProperty)

let interceptor = Alpine.interceptor((initialValue, getter, setter, path, key) => {
                // Check to see if the Livewire property exists and if not log a console error
                // and return so everything else keeps running.
                if (typeof livewirePropertyValue === 'undefined') {
                    console.error(`Livewire Entangle Error: Livewire property '${livewireProperty}' cannot be found`)
                    return
                }

// Let's set the initial value of the Alpine prop to the Livewire prop's value.
                let value
                    // We need to stringify and parse it though to get a deep clone.
                    = JSON.parse(JSON.stringify(livewirePropertyValue))

setter(value)

// Now, we'll watch for changes to the Alpine prop, and fire the update to Livewire.
                window.Alpine.effect(() => {
                    let value = getter()

if (
                        JSON.stringify(value) ==
                        JSON.stringify(
                            livewireComponent.getPropertyValueIncludingDefers(
                                livewireProperty
                            )
                        )
                    ) return

// We'll tell Livewire to update the property, but we'll also tell Livewire
                    // to not call the normal property watchers on the way back to prevent another
                    // circular dependancy.
                    livewireComponent.set(
                        livewireProperty,
                        value,
                        isDeferred,
                        // Block firing of Livewire watchers for this data key when the request comes back.
                        // Unless it is deferred, in which cause we don't know if the state will be the same, so let it run.
                        isDeferred ? false : true
                    )
                })

// We'll also listen for changes to the Livewire prop, and set them in Alpine.
                livewireComponent.watch(
                    livewireProperty,
                    value => {
                        // Ensure data is deep cloned otherwise Alpine mutates Livewire data
                        window.Alpine.disableEffectScheduling(() => {
                            setter(typeof value !== 'undefined' ? JSON.parse(JSON.stringify(value)) : value)
                        })
                    }
                )

return value
            }, obj => {
                Object.defineProperty(obj, 'defer', {
                    get() {
                        isDeferred = true

return obj
                    }
                })
            })

return interceptor(livewirePropertyValue)
        }
    }

return (name, defer = false) => ({
        isDeferred: defer,
        livewireEntangle: name,
        get defer() {
            this.isDeferred = true
            return this
        },
    })
}

export function alpinifyElementsForMorphdom(from, to) {
    if (isV3()) {
        return alpinifyElementsForMorphdomV3(from, to)
    }

// If the element we are updating is an Alpine component...
    if (from.__x) {
        // Then temporarily clone it (with it's data) to the "to" element.
        // This should simulate backend Livewire being aware of Alpine changes.
        window.Alpine.clone(from.__x, to)
    }

// x-show elements require care because of transitions.
    if (
        Array.from(from.attributes)
            .map(attr => attr.name)
            .some(name => /x-show/.test(name))
    ) {
        if (from.__x_transition) {
            // This covers @entangle('something')
            from.skipElUpdatingButStillUpdateChildren = true
        } else {
            // This covers x-show="$wire.something"
            //
            // If the element has x-show, we need to "reverse" the damage done by "clone",
            // so that if/when the element has a transition on it, it will occur naturally.
            if (isHiding(from, to)) {
                let style = to.getAttribute('style')

if (style) {
                    to.setAttribute('style', style.replace('display: none;', ''))
                }
            } else if (isShowing(from, to)) {
                to.style.display = from.style.display
            }
        }
    }
}

function alpinifyElementsForMorphdomV3(from, to) {
    if (from.nodeType !== 1) return

// If the element we are updating is an Alpine component...
    if (from._x_dataStack) {
        // Then temporarily clone it (with it's data) to the "to" element.
        // This should simulate backend Livewire being aware of Alpine changes.
        window.Alpine.clone(from, to)
    }
}

function isHiding(from, to) {
    if (beforeAlpineTwoPointSevenPointThree()) {
        return from.style.display === '' && to.style.display === 'none'
    }

return from.__x_is_shown && ! to.__x_is_shown
}

function isShowing(from, to) {
    if (beforeAlpineTwoPointSevenPointThree()) {
        return from.style.display === 'none' && to.style.display === ''
    }

return ! from.__x_is_shown && to.__x_is_shown
}

function beforeAlpineTwoPointSevenPointThree() {
    let [major, minor, patch] = window.Alpine.version.split('.').map(i => Number(i))

return major <= 2 && minor <= 7 && patch <= 2
}

function isV3() {
    return window.Alpine && window.Alpine.version && /^3\..+\..+$/.test(window.Alpine.version)
}

Back to File Manager