@vue-widget/hooks/lib/useUrlState/index.js

hooks from react to vue

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useUrlState = void 0;
var _tslib = require("tslib");
var _qs = _interopRequireDefault(require("qs"));
var _useMemo = require("../useMemo");
var _useMemoizedFn = require("../useMemoizedFn");
var _vue = require("vue");
var _isDev = _interopRequireDefault(require("../utils/isDev"));
var _isBrowser = _interopRequireDefault(require("../utils/isBrowser"));
var _rins = null;
var baseParseConfig = {};
var baseStringifyConfig = {};
var w = typeof window !== "undefined" ? window : null;
var globalQuery = (0, _vue.ref)(getQuery());
function getQuery() {
  return ((w === null || w === void 0 ? void 0 : w.location.search) || "").replace(/^\?/, "");
}
var useUrlState = exports.useUrlState = function useUrlState(initialState, options) {
  if (_isDev["default"] && !_isBrowser["default"]) {
    console.error("useUrlState expected to used in browser");
  }
  var _a = options || {},
    _b = _a.navigateMode,
    navigateMode = _b === void 0 ? "push" : _b,
    parseOptions = _a.parseOptions,
    stringifyOptions = _a.stringifyOptions;
  var mergedParseOptions = (0, _tslib.__assign)((0, _tslib.__assign)({}, baseParseConfig), parseOptions);
  var mergedStringifyOptions = (0, _tslib.__assign)((0, _tslib.__assign)({}, baseStringifyConfig), stringifyOptions);
  var initialStateRef = (0, _vue.ref)(typeof initialState === "function" ? initialState() : initialState || {});
  var _route = _rins === null || _rins === void 0 ? void 0 : _rins.useRoute();
  var _router = _rins === null || _rins === void 0 ? void 0 : _rins.useRouter();
  var queryFromUrl = (0, _useMemo.useMemo)(function () {
    var query = getQuery();
    if (_rins) query = _qs["default"].stringify(_route === null || _route === void 0 ? void 0 : _route.query, mergedStringifyOptions);
    return _qs["default"].parse(query, mergedParseOptions);
  }, [globalQuery, function () {
    return _route === null || _route === void 0 ? void 0 : _route.query;
  }]);
  var targetQuery = (0, _useMemo.useMemo)(function () {
    return (0, _tslib.__assign)((0, _tslib.__assign)({}, initialStateRef.value), queryFromUrl.value);
  }, [queryFromUrl]);
  var setState = function setState(s) {
    var newQuery = typeof s === "function" ? s(targetQuery.value) : s;
    var urlObj = new URL((w === null || w === void 0 ? void 0 : w.location.href) || "");
    var mergedParams = (0, _tslib.__assign)((0, _tslib.__assign)({}, queryFromUrl.value), newQuery);
    var queryString = _qs["default"].stringify(mergedParams, mergedStringifyOptions) || "";
    urlObj.search = queryString;
    globalQuery.value = queryString;
    // 替换当前窗口的URL
    if (_rins) {
      _router[navigateMode === "replace" ? "replace" : "push"]({
        path: _route.path,
        query: mergedParams
      });
    } else if (w) {
      w.history[navigateMode === "replace" ? "replaceState" : "pushState"](w.history.state, document.title, urlObj.toString());
    }
  };
  return [targetQuery, (0, _useMemoizedFn.useMemoizedFn)(setState)];
};
useUrlState.use = function (regist) {
  return _rins = regist;
};