Edit File - File Manager

Edit File: SyncBrowserHistory.js

import store from '@/Store'
import Message from '@/Message';

export default function () {

let initializedPath = false

let componentIdsThatAreWritingToHistoryState = new Set

LivewireStateManager.clearState()

store.registerHook('component.initialized', component => {
        if (! component.effects.path) return

// We are using setTimeout() to make sure all the components on the page have
        // loaded before we store anything in the history state (because the position
        // of a component on a page matters for generating its state signature).
        setTimeout(() => {
            let url = onlyChangeThePathAndQueryString(initializedPath ? undefined : component.effects.path)

// Generate faux response.
            let response = {
                serverMemo: component.serverMemo,
                effects: component.effects,
            }

normalizeResponse(response, component)

LivewireStateManager.replaceState(url, response, component)

componentIdsThatAreWritingToHistoryState.add(component.id)

initializedPath = true
        })
    })

store.registerHook('message.processed', (message, component) => {
        // Preventing a circular dependancy.
        if (message.replaying) return

let { response } = message

let effects = response.effects || {}

normalizeResponse(response, component)

if ('path' in effects && effects.path !== window.location.href) {
            let url = onlyChangeThePathAndQueryString(effects.path)

LivewireStateManager.pushState(url, response, component)

componentIdsThatAreWritingToHistoryState.add(component.id)
        } else {
            // If the current component has changed it's state, but hasn't written
            // anything new to the URL, we still need to update it's data in the
            // history state so that when a back button is hit, it is caught
            // up to the most recent known data state.
            if (componentIdsThatAreWritingToHistoryState.has(component.id)) {
                LivewireStateManager.replaceState(window.location.href, response, component)
            }
        }
    })

window.addEventListener('popstate', event => {
        if (LivewireStateManager.missingState(event)) return

LivewireStateManager.replayResponses(event, (response, component) => {
            let message = new Message(component, [])

message.storeResponse(response)

message.replaying = true

component.handleResponse(message)
        })
    })

function normalizeResponse(response, component) {
        // Add ALL properties as "dirty" so that when the back button is pressed,
        // they ALL are forced to refresh on the page (even if the HTML didn't change).
        response.effects.dirty = Object.keys(response.serverMemo.data)

// Sometimes Livewire doesn't return html from the server to save on bandwidth.
        // So we need to set the HTML no matter what.
        response.effects.html = component.lastFreshHtml
    }

function onlyChangeThePathAndQueryString(url) {
        if (! url) return

let destination = new URL(url)

let afterOrigin = destination.href.replace(destination.origin, '').replace(/\?$/, '')

return window.location.origin + afterOrigin + window.location.hash
    }

store.registerHook('element.updating', (from, to, component) => {
        // It looks like the element we are about to update is the root
        // element of the component. Let's store this knowledge to
        // reference after update in the "element.updated" hook.
        if (from.getAttribute('wire:id') === component.id) {
            component.lastKnownDomId = component.id
        }
    })

store.registerHook('element.updated', (node, component) => {
        // If the element that was just updated was the root DOM element.
        if (component.lastKnownDomId) {
            // Let's check and see if the wire:id was the thing that changed.
            if (node.getAttribute('wire:id') !== component.lastKnownDomId) {
                // If so, we need to change this ID globally everwhere it's referenced.
                store.changeComponentId(component, node.getAttribute('wire:id'))
            }

// Either way, we'll unset this for the next update.
            delete component.lastKnownDomId
        }

// We have to update the component ID because we are replaying responses
        // from similar components but with completely different IDs. If didn't
        // update the component ID, the checksums would fail.
    })
}

let LivewireStateManager = {
    replaceState(url, response, component) {
        this.updateState('replaceState', url, response, component)
    },

pushState(url, response, component) {
        this.updateState('pushState', url, response, component)
    },

updateState(method, url, response, component) {
        let state = this.currentState()

state.storeResponse(response, component)

let stateArray = state.toStateArray()

// Copy over existing history state if it's an object, so we don't overwrite it.
        let fullstateObject = Object.assign(history.state || {}, { livewire: stateArray })

let capitalize = subject => subject.charAt(0).toUpperCase() + subject.slice(1)

store.callHook('before'+capitalize(method), fullstateObject, url, component)

try {
            if (decodeURI(url) != 'undefined') {
                url = decodeURI(url).replaceAll(' ', '+').replaceAll('\\', '%5C')
            }

history[method](fullstateObject, '', url)
        } catch (error) {
            // Firefox has a 160kb limit to history state entries.
            // If that limit is reached, we'll instead put it in
            // sessionStorage and store a reference to it.
            if (error.name === 'NS_ERROR_ILLEGAL_VALUE') {
                let key = this.storeInSession(stateArray)

fullstateObject.livewire = key

history[method](fullstateObject, '', url)
            }
        }
    },

replayResponses(event, callback) {
        if (! event.state.livewire) return

let state = typeof event.state.livewire === 'string'
            ? new LivewireState(this.getFromSession(event.state.livewire))
            : new LivewireState(event.state.livewire)

state.replayResponses(callback)
    },

currentState() {
        if (! history.state) return new LivewireState
        if (! history.state.livewire) return new LivewireState

let state = typeof history.state.livewire === 'string'
            ? new LivewireState(this.getFromSession(history.state.livewire))
            : new LivewireState(history.state.livewire)

return state
    },

missingState(event) {
        return ! (event.state && event.state.livewire)
    },

clearState() {
        // This is to prevent exponentially increasing the size of our state on page refresh.
        if (window.history.state) window.history.state.livewire = (new LivewireState).toStateArray();
    },

storeInSession(value) {
        let key = 'livewire:'+(new Date).getTime()

let stringifiedValue = JSON.stringify(value)

this.tryToStoreInSession(key, stringifiedValue)

return key
    },

tryToStoreInSession(key, value) {
        // sessionStorage has a max storage limit (usally 5MB).
        // If we meet that limit, we'll start removing entries
        // (oldest first), until there's enough space to store
        // the new one.
        try {
            sessionStorage.setItem(key, value)
        } catch (error) {
            // 22 is Chrome, 1-14 is other browsers.
            if (! [22, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14].includes(error.code)) return

let oldestTimestamp = Object.keys(sessionStorage)
                .map(key => Number(key.replace('livewire:', '')))
                .sort()
                .shift()

if (! oldestTimestamp) return

sessionStorage.removeItem('livewire:'+oldestTimestamp)

this.tryToStoreInSession(key, value)
        }
    },

getFromSession(key) {
        let item = sessionStorage.getItem(key)

if (! item) return

return JSON.parse(item)
    },
}

class LivewireState
{
    constructor(stateArray = []) { this.items = stateArray }

toStateArray() { return this.items }

pushItemInProperOrder(signature, response, component) {
        let targetItem = { signature, response }

// First, we'll check if this signature already has an entry, if so, replace it.
        let existingIndex = this.items.findIndex(item => item.signature === signature)

if (existingIndex !== -1) return this.items[existingIndex] = targetItem

// If it doesn't already exist, we'll add it, but we MUST first see if any of its
        // parents components have entries, and insert it immediately before them.
        // This way, when we replay responses, we will always start with the most
        // inward components and go outwards.

let closestParentId = store.getClosestParentId(component.id, this.componentIdsWithStoredResponses())

if (! closestParentId) return this.items.unshift(targetItem)

let closestParentIndex = this.items.findIndex(item => {
            let { originalComponentId } = this.parseSignature(item.signature)

if (originalComponentId === closestParentId) return true
        })

this.items.splice(closestParentIndex, 0, targetItem);
    }

storeResponse(response, component) {
        let signature = this.getComponentNameBasedSignature(component)

this.pushItemInProperOrder(signature, response, component)
    }

replayResponses(callback) {
        this.items.forEach(({ signature, response }) => {
            let component = this.findComponentBySignature(signature)

if (! component) return

callback(response, component)
        })
    }

// We can't just store component reponses by their id because
    // ids change on every refresh, so history state won't have
    // a component to apply it's changes to. Instead we must
    // generate a unique id based on the components name
    // and it's relative position amongst others with
    // the same name that are loaded on the page.
    getComponentNameBasedSignature(component) {
        let componentName = component.fingerprint.name
        let sameNamedComponents = store.getComponentsByName(componentName)
        let componentIndex = sameNamedComponents.indexOf(component)

return `${component.id}:${componentName}:${componentIndex}`
    }

findComponentBySignature(signature) {
        let { componentName, componentIndex } = this.parseSignature(signature)

let sameNamedComponents = store.getComponentsByName(componentName)

// If we found the component in the proper place, return it,
        // otherwise return the first one.
        return sameNamedComponents[componentIndex] || sameNamedComponents[0] || console.warn(`Livewire: couldn't find component on page: ${componentName}`)
    }

parseSignature(signature) {
        let [originalComponentId, componentName, componentIndex] = signature.split(':')

return { originalComponentId, componentName, componentIndex }
    }

componentIdsWithStoredResponses() {
        return this.items.map(({ signature }) => {
            let { originalComponentId } = this.parseSignature(signature)

return originalComponentId
        })
    }
}

Back to File Manager