feat(quasar): Add reviverFn for getting values from Cookies and Local…

…/SessionStorage See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse#Using_the_reviver_parameter - fix Cookies getAll to parse value - fix Cookies set on SSR to retrieve raw previous value for replacement ref quasarframework#4338
pdanpdan · Jul 9, 2019 · ee3db9f · ee3db9f
1 parent df418f8
commit ee3db9f
Show file tree

Hide file tree

Showing 4 changed files with 176 additions and 24 deletions.
diff --git a/ui/src/plugins/Cookies.js b/ui/src/plugins/Cookies.js
@@ -12,7 +12,7 @@ function stringifyCookieValue (value) {
   return encode(value === Object(value) ? JSON.stringify(value) : '' + value)
 }
 
-function read (string) {
+function read (string, reviverFn) {
   if (string === '') {
     return string
   }
@@ -28,7 +28,7 @@ function read (string) {
   string = decode(string.replace(/\+/g, ' '))
 
   try {
-    string = JSON.parse(string)
+    string = JSON.parse(string, reviverFn)
   }
   catch (e) {}
 
@@ -78,12 +78,13 @@ function set (key, val, opts = {}, ssr) {
     let all = ssr.req.headers.cookie || ''
 
     if (expire !== void 0 && expireValue < 0) {
-      const val = get(key, ssr)
-      if (val !== undefined) {
+      const oldVal = get(key, ssr, void 0, true)
+      if (oldVal !== undefined) {
+        const replaceKeyValue = `${encode(key)}=${stringifyCookieValue(oldVal)}`
         all = all
-          .replace(`${key}=${val}; `, '')
-          .replace(`; ${key}=${val}`, '')
-          .replace(`${key}=${val}`, '')
+          .replace(`${replaceKeyValue}; `, '')
+          .replace(`; ${replaceKeyValue}`, '')
+          .replace(`${replaceKeyValue}`, '')
       }
     }
     else {
@@ -99,7 +100,7 @@ function set (key, val, opts = {}, ssr) {
   }
 }
 
-function get (key, ssr) {
+function get (key, ssr, reviverFn, raw) {
   let
     result = key ? undefined : {},
     cookieSource = ssr ? ssr.req.headers : document,
@@ -116,10 +117,10 @@ function get (key, ssr) {
     cookie = parts.join('=')
 
     if (!key) {
-      result[name] = cookie
+      result[name] = read(cookie, reviverFn)
     }
     else if (key === name) {
-      result = read(cookie)
+      result = raw === true ? cookie : read(cookie, reviverFn)
       break
     }
   }
@@ -136,19 +137,19 @@ function remove (key, options, ssr) {
   )
 }
 
-function has (key, ssr) {
-  return get(key, ssr) !== undefined
+function has (key, ssr, reviverFn) {
+  return get(key, ssr, reviverFn) !== undefined
 }
 
 export function getObject (ctx = {}) {
   const ssr = ctx.ssr
 
   return {
-    get: key => get(key, ssr),
+    get: (key, reviverFn) => get(key, ssr, reviverFn),
     set: (key, val, opts) => set(key, val, opts, ssr),
-    has: key => has(key, ssr),
+    has: (key, reviverFn) => has(key, ssr, reviverFn),
     remove: (key, options) => remove(key, options, ssr),
-    getAll: () => get(null, ssr)
+    getAll: reviverFn => get(null, ssr, reviverFn)
   }
 }
 

diff --git a/ui/src/plugins/Cookies.json b/ui/src/plugins/Cookies.json
@@ -10,6 +10,27 @@
           "desc": "Cookie name",
           "required": true,
           "examples": [ "userId" ]
+        },
+        "reviverFn": {
+          "type": "Function",
+          "desc": "Transformation function to be used for values - see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse#Using_the_reviver_parameter",
+          "params": {
+            "key": {
+              "type": "Any",
+              "desc": "Key in object",
+              "__exemption": [ "examples" ]
+            },
+            "value": {
+              "type": "Any",
+              "desc": "Value in that key",
+              "__exemption": [ "examples" ]
+            }
+          },
+          "returns": {
+            "type": "Any",
+            "desc": "Transformed value",
+            "__exemption": [ "examples" ]
+          }
         }
       },
       "returns": {
@@ -21,6 +42,29 @@
 
     "getAll": {
       "desc": "Get all cookies",
+      "params": {
+        "reviverFn": {
+          "type": "Function",
+          "desc": "Transformation function to be used for values - see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse#Using_the_reviver_parameter",
+          "params": {
+            "key": {
+              "type": "Any",
+              "desc": "Key in object",
+              "__exemption": [ "examples" ]
+            },
+            "value": {
+              "type": "Any",
+              "desc": "Value in that key",
+              "__exemption": [ "examples" ]
+            }
+          },
+          "returns": {
+            "type": "Any",
+            "desc": "Transformed value",
+            "__exemption": [ "examples" ]
+          }
+        }
+      },
       "returns": {
         "type": "Object",
         "desc": "Object with cookie names (as keys) and their values",
@@ -87,6 +131,27 @@
           "desc": "Cookie name",
           "required": true,
           "examples": [ "userId" ]
+        },
+        "reviverFn": {
+          "type": "Function",
+          "desc": "Transformation function to be used for values - see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse#Using_the_reviver_parameter",
+          "params": {
+            "key": {
+              "type": "Any",
+              "desc": "Key in object",
+              "__exemption": [ "examples" ]
+            },
+            "value": {
+              "type": "Any",
+              "desc": "Value in that key",
+              "__exemption": [ "examples" ]
+            }
+          },
+          "returns": {
+            "type": "Any",
+            "desc": "Transformed value",
+            "__exemption": [ "examples" ]
+          }
         }
       },
       "returns": {

diff --git a/ui/src/utils/web-storage.js b/ui/src/utils/web-storage.js
@@ -26,7 +26,7 @@ function encode (value) {
   return value
 }
 
-function decode (value) {
+function decode (value, reviverFn) {
   let type, length, source
 
   length = value.length
@@ -55,7 +55,7 @@ function decode (value) {
       return '' + source
 
     case '__q_objt':
-      return JSON.parse(source)
+      return JSON.parse(source, reviverFn)
 
     default:
       // hmm, we reached here, we don't know the type,
@@ -86,28 +86,28 @@ export function getEmptyStorage () {
 export function getStorage (type) {
   const
     webStorage = window[type + 'Storage'],
-    get = key => {
+    get = (key, reviverFn) => {
       const item = webStorage.getItem(key)
       return item
-        ? decode(item)
+        ? decode(item, reviverFn)
         : null
     }
 
   return {
-    has: key => webStorage.getItem(key) !== null,
+    has: (key, reviverFn) => webStorage.getItem(key, reviverFn) !== null,
     getLength: () => webStorage.length,
     getItem: get,
-    getIndex: index => {
+    getIndex: (index, reviverFn) => {
       if (index < webStorage.length) {
-        return get(webStorage.key(index))
+        return get(webStorage.key(index), reviverFn)
       }
     },
-    getAll: () => {
+    getAll: reviverFn => {
       let result = {}, key, len = webStorage.length
 
       for (let i = 0; i < len; i++) {
         key = webStorage.key(i)
-        result[key] = get(key)
+        result[key] = get(key, reviverFn)
       }
 
       return result

diff --git a/ui/src/utils/web-storage.json b/ui/src/utils/web-storage.json
@@ -8,6 +8,27 @@
           "desc": "Entry key",
           "required": true,
           "examples": [ "userId" ]
+        },
+        "reviverFn": {
+          "type": "Function",
+          "desc": "Transformation function to be used for objects - see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse#Using_the_reviver_parameter",
+          "params": {
+            "key": {
+              "type": "Any",
+              "desc": "Key in object",
+              "__exemption": [ "examples" ]
+            },
+            "value": {
+              "type": "Any",
+              "desc": "Value in that key",
+              "__exemption": [ "examples" ]
+            }
+          },
+          "returns": {
+            "type": "Any",
+            "desc": "Transformed value",
+            "__exemption": [ "examples" ]
+          }
         }
       },
       "returns": {
@@ -33,6 +54,27 @@
           "desc": "Entry key",
           "required": true,
           "examples": [ "userId" ]
+        },
+        "reviverFn": {
+          "type": "Function",
+          "desc": "Transformation function to be used for objects - see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse#Using_the_reviver_parameter",
+          "params": {
+            "key": {
+              "type": "Any",
+              "desc": "Key in object",
+              "__exemption": [ "examples" ]
+            },
+            "value": {
+              "type": "Any",
+              "desc": "Value in that key",
+              "__exemption": [ "examples" ]
+            }
+          },
+          "returns": {
+            "type": "Any",
+            "desc": "Transformed value",
+            "__exemption": [ "examples" ]
+          }
         }
       },
       "returns": {
@@ -50,6 +92,27 @@
           "desc": "Entry index",
           "required": true,
           "examples": [ 5 ]
+        },
+        "reviverFn": {
+          "type": "Function",
+          "desc": "Transformation function to be used for objects - see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse#Using_the_reviver_parameter",
+          "params": {
+            "key": {
+              "type": "Any",
+              "desc": "Key in object",
+              "__exemption": [ "examples" ]
+            },
+            "value": {
+              "type": "Any",
+              "desc": "Value in that key",
+              "__exemption": [ "examples" ]
+            }
+          },
+          "returns": {
+            "type": "Any",
+            "desc": "Transformed value",
+            "__exemption": [ "examples" ]
+          }
         }
       },
       "returns": {
@@ -61,6 +124,29 @@
 
     "getAll": {
       "desc": "Retrieve all items in storage",
+      "params": {
+        "reviverFn": {
+          "type": "Function",
+          "desc": "Transformation function to be used for objects - see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse#Using_the_reviver_parameter",
+          "params": {
+            "key": {
+              "type": "Any",
+              "desc": "Key in object",
+              "__exemption": [ "examples" ]
+            },
+            "value": {
+              "type": "Any",
+              "desc": "Value in that key",
+              "__exemption": [ "examples" ]
+            }
+          },
+          "returns": {
+            "type": "Any",
+            "desc": "Transformed value",
+            "__exemption": [ "examples" ]
+          }
+        }
+      },
       "returns": {
         "type": "Object",
         "desc": "Object syntax: item name as Object key and its value",