zustand-querystring 0.0.10 → 0.0.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/lib/middleware.js +41 -23
  2. package/package.json +2 -2
package/lib/middleware.js CHANGED
@@ -47,9 +47,10 @@ const queryStringImpl = (fn, options) => (set, get, api) => {
47
47
  key: '$',
48
48
  ...options,
49
49
  };
50
- const matcher = new RegExp(`${escapeStringRegexp(defaultedOptions.key)}=(.*);;`);
50
+ const stateMatcher = new RegExp(`${escapeStringRegexp(defaultedOptions.key)}=(.*);;`);
51
+ const matcher = new RegExp(`[&\?]?${escapeStringRegexp(defaultedOptions.key)}=(.*);;&?`);
51
52
  const parseQueryString = querystring => {
52
- const match = querystring.match(matcher);
53
+ const match = querystring.match(stateMatcher);
53
54
  if (match) {
54
55
  let m = match[1];
55
56
  if (!m.startsWith('$')) {
@@ -73,13 +74,15 @@ const queryStringImpl = (fn, options) => (set, get, api) => {
73
74
  const initialize = (url, _set = set) => {
74
75
  const fallback = () => fn(_set, get, api);
75
76
  try {
76
- const splitUrl = url.split('?');
77
- let queryString = splitUrl[1];
78
- const pathname = splitUrl[0];
77
+ const queryString = url.search.substring(1);
78
+ const pathname = url.pathname;
79
79
  if (!queryString) {
80
80
  return fallback();
81
81
  }
82
82
  const parsed = parseQueryString(queryString);
83
+ if (!parsed) {
84
+ return fallback();
85
+ }
83
86
  const currentValue = get() ?? fn(_set, get, api);
84
87
  const merged = mergeWith(currentValue, getSelectedState(parsed, pathname));
85
88
  set(merged, true);
@@ -92,45 +95,60 @@ const queryStringImpl = (fn, options) => (set, get, api) => {
92
95
  };
93
96
  if (typeof window !== 'undefined') {
94
97
  const setQuery = () => {
95
- const selectedState = getSelectedState(get(), window.location.pathname);
96
- const currentQueryString = window.location.search.slice(1);
98
+ const selectedState = getSelectedState(get(), location.pathname);
99
+ const currentQueryString = location.search.slice(1);
97
100
  const currentParsed = parseQueryString(currentQueryString);
98
101
  const newMerged = {
99
102
  ...currentParsed,
100
103
  ...selectedState,
101
104
  };
105
+ const ignored = currentQueryString.replace(matcher, '');
102
106
  const newCompacted = compact(newMerged, initialState);
103
107
  if (Object.keys(newCompacted).length) {
104
108
  const stringified = stringify(newCompacted).substring(1);
105
- const newQueryString = `${defaultedOptions.key}=${stringified};;`;
106
- window.history.replaceState(null, '', `?${currentParsed
107
- ? currentQueryString.replace(matcher, newQueryString)
108
- : newQueryString}`);
109
+ const newQueryState = `${defaultedOptions.key}=${stringified};;`;
110
+ let newQueryString = '';
111
+ if (currentParsed) {
112
+ newQueryString = currentQueryString.replace(stateMatcher, newQueryState);
113
+ }
114
+ else if (ignored) {
115
+ newQueryString = ignored + '&' + newQueryState;
116
+ }
117
+ else {
118
+ newQueryString = newQueryState;
119
+ }
120
+ history.replaceState(history.state, '', location.pathname + (newQueryString ? '?' + newQueryString : ''));
109
121
  }
110
122
  else {
111
- window.history.replaceState(null, '', window.location.pathname);
123
+ history.replaceState(history.state, '', location.pathname + (ignored ? '?' + ignored : ''));
112
124
  }
113
125
  };
114
- //TODO: find a better way to do this
115
- let previousPathname = '';
116
- setInterval(() => {
117
- if (window.location.pathname !== previousPathname) {
118
- previousPathname = window.location.pathname;
119
- setQuery();
120
- }
121
- }, 50);
126
+ // @ts-ignore
127
+ if (!api.__ZUSTAND_QUERYSTRING_INIT__) {
128
+ // @ts-ignore
129
+ api.__ZUSTAND_QUERYSTRING_INIT__ = true;
130
+ let previousPathname = '';
131
+ const cb = () => {
132
+ if (location.pathname !== previousPathname) {
133
+ previousPathname = location.pathname;
134
+ setQuery();
135
+ }
136
+ requestAnimationFrame(cb);
137
+ };
138
+ requestAnimationFrame(cb);
139
+ }
122
140
  const originalSetState = api.setState;
123
141
  api.setState = (...args) => {
124
142
  originalSetState(...args);
125
143
  setQuery();
126
144
  };
127
- return initialize(window.location.pathname + window.location.search, (...args) => {
145
+ return initialize(new URL(location.href), (...args) => {
128
146
  set(...args);
129
147
  setQuery();
130
148
  });
131
149
  }
132
- if (url) {
133
- return initialize(url);
150
+ else if (url) {
151
+ return initialize(new URL(decodeURIComponent(url), 'http://localhost'));
134
152
  }
135
153
  return fn(set, get, api);
136
154
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "zustand-querystring",
3
- "version": "0.0.10",
3
+ "version": "0.0.11",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "keywords": [
@@ -35,7 +35,7 @@
35
35
  "@types/lodash-es": "^4.17.6",
36
36
  "rimraf": "^3.0.2",
37
37
  "typescript": "^4.9.3",
38
- "zustand": "^4.1.4"
38
+ "zustand": "^4.3.2"
39
39
  },
40
40
  "scripts": {
41
41
  "build": "rimraf lib && tsc -b"