Adding non-serialisable metadata to toState

This is a follow up of https://github.com/router5/router5/issues/60#issuecomment-233296870

@troch I’m hitting the issue that @iotch mentioned… I would like to attach non-serializable stuff into toState:

// getComponentMiddleware.js
export default (routes) => (router) => (toState, fromState) => {
    const { toActivate } = transitionPath(toState, fromState);

    // Get the routes involved in the transition
    const routesToActivate = toActivate.map((segment) => routes.find((route) => route.name === segment));

    // Build a map in which keys are the route names and values that resolve to their components
    const promisesMap = fromPairs(routesToActivate.map((route) => [route.name, route.component || route.getComponent()]));

    return pProps(promisesMap)
    .then((components) => ({ ...toState, components }));
};

DOMException: Failed to execute 'pushState' on 'History': An object could not be cloned.

So here are a few questions:

• Do we really have to persist the state to the history api? browser.getState is only used here. Isn’t it more correct to compare the URLs instead of comparing states? In my opinion, the browser plugin is just a way to set and react to URL changes, it shouldn’t be storing nor handling states. Also, this would remove the inconsistency that exists now between using history API or hashbangs.
• If you would like to keep it like this, could we have field that would not be included in the history state? This would allow us to add big data structures (big structures generate QUOTA errors) or unserializable data to be added to toState.

Thanks in advance.

[troch]

@satazor this has been fixed with v4.7.1: only base state properties (meta, name, path and params) are pushed to history.

[motet-a]

Yes. I think the best is to allow the user to customize entirely the way the state is stored with simple options. I think something in the spirit of react-redux could be suitable:

let savedBigData

function mapRouterStateToBrowserState({ bigData, ...state }) {
    savedBigData = bigData
    return state // Will be saved in window.history.state (bigData has been extracted)
}

function mapBrowserStateToRouterState(browserState) {
    return {
        ...browserState, 
        bigData: savedBigData,
    }
}

router.usePlugin(
    browserPlugin({
        mapRouterStateToBrowserState,
        mapBrowserStateToRouterState,
    })
)

mapRouterStateToBrowserState and mapBrowserStateToRouterState can both default to an identity function, s => s. This is not breaking changes.