state-to-url-index.js

import { isEmpty } from 'lodash'
import { makeWatch, makeCallback, parseDump } from './utils'

const extractDump = context => {
  const dump = context.$route.query.dump
  return dump
    ? parseDump(dump)
    : {}
}

export default keys => {
  const watch = makeWatch(keys)
  const __updateRouteQuery = makeCallback(keys)

  return {
    watch,
    methods: {
      __updateRouteQuery,
      __routeInit () {
        const data = extractDump(this)

        if (this.routeInit) {
          this.routeInit(data)
        } else {
          console.warn('component no provide a "routeInit" function')
        }

        this.$onIdle(() => {
          const data = extractDump(this)
          if (isEmpty(data)) {
            this.__updateRouteQuery()
          }
        })
      }
    },
    beforeRouteEnter (to, from, next) {
      next(vm => {
        vm.__routeInit()
      })
    }
  }
}

state-to-url-utils.js

import msgpack5 from 'msgpack5'
import BufferList from 'bl'
import { Buffer } from 'buffer'
import { debounce } from 'lodash'
import { onIdle } from '../../on-idle/utils'

const pack = msgpack5()

/**
 * @method generateDump
 * @param  {Array<String>}  keys
 * @return {Object}
 */
const generateDump = function generateDump (keys) {
  const data = keys.reduce((acc, key) => {
    const value = this[key]

    acc[key] = value

    return acc
  }, {})

  const encoded = pack.encode(data)
    .toString('base64')

  return encoded
}

/**
 *
 * @param {string} dump
 * @returns {object}
 */
const parseDump = dump => {
  try {
    const bl = new BufferList()
    bl.append(Buffer.from(dump, 'base64'))

    return pack.decode(bl)
  } catch (e) {
    console.warn('Fail to parse dump "%s"', e.message)
    if (process.env.NODE_ENV !== 'production') {
      console.error(e)
    }

    return {}
  }
}

/**
 * @method makeRouteData
 * @param  {Object}      $route
 * @param  {Object}      data
 * @return {Object}
 */
const makeRouteData = ($route, dump) => {
  const { name, params, query } = $route
  return {
    name,
    params,
    query: { ...query, dump }
  }
}

/**
 * @method makeWatch
 * @param  {Array<String>} keys
 * @return {Object}
 */
const makeWatch = keys => keys
  .reduce((acc, key) => {
    acc[key] = '__updateRouteQuery'
    return acc
  }, {})

const makeCallback = keys => debounce(function __updateRouteQuery () {
  onIdle(() => {
    const data = generateDump.call(this, keys)
    const route = makeRouteData(this.$route, data)
    this.$router.replace(route)
  })
}, 1500)

export { makeCallback, makeWatch, generateDump, parseDump }