improvement(useCookie): Adding ability to define serializer and deserializer

BREAKING CHANGE: The options object has changed radically

Author: microcipcip

README.md

@@ -107,6 +107,8 @@ Vue.use(VueCompositionAPI);
     [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/side-effects-usebeforeunload--demo)
   - [`useCookie`](./src/components/useCookie/stories/useCookie.md) — provides way to read, update and delete a cookie.
     [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/side-effects-usecookie--demo)
+  - [`useLocalStorage`](./src/components/useLocalStorage/stories/useLocalStorage.md) — provides way to read, update and delete a localStorage key.
+    [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/side-effects-uselocalstorage--demo)
 - UI
   - [`useClickAway`](./src/components/useClickAway/stories/useClickAway.md) — triggers callback when user clicks outside target area.
     [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/ui-useclickaway--demo)

src/components/useCookie/stories/UseCookieDemo.vue

@@ -52,7 +52,9 @@ export default Vue.extend({
       cookie: jsonCookie,
       setCookie: jsonSetCookie,
       removeCookie: jsonRemoveCookie
-    } = useCookie('jsonCookie')
+    } = useCookie('jsonCookie', {
+      isParsing: true
+    })
 
     let counter = 0
     const handleSetCookie = () => {

src/components/useCookie/stories/useCookie.md

@@ -4,10 +4,18 @@ Vue function that provides way to read, set and remove a cookie.
 
 ## Reference
 
+```typescript
+interface UseCookieOptions {
+    isParsing: boolean;
+    serializer?: (value: any) => string;
+    deserializer?: (value: string) => any;
+}
+```
+
 ```typescript
 function useCookie(
   cookieName: string,
-  enableParseJSON?: boolean,
+  options?: UseCookieOptions,
   runOnMount?: boolean
 ): {
   cookie: Ref<any>
@@ -20,7 +28,10 @@ function useCookie(
 ### Parameters
 
 - `cookieName: string` the cookie name you wish to get/set/remove
-- `enableParseJSON: boolean` whether to enable JSON parsing or not, `false` by default
+- `options: UseCookieOptions`
+  - `isParsing: boolean` whether to enable parsing the cookie value or not, `false` by default
+  - `serializer: Function` a custom serializer, `JSON.stringify` by default
+  - `deserializer: Function` a custom deserializer, `JSON.parse` by default
 - `runOnMount: boolean` whether to get the cookie on mount or not, `true` by default
 
 ### Returns
@@ -65,4 +76,5 @@ export default Vue.extend({
     }
   }
 })
+</script>
 ```

src/components/useCookie/useCookie.spec.ts

@@ -9,7 +9,7 @@ afterEach(() => {
 const testComponent = (
   cookieName = 'cookieName',
   cookieValue: any = '',
-  parseJson = false,
+  opts = { isParsing: false } as any,
   onMount = true
 ) => ({
   template: `
@@ -26,7 +26,7 @@ const testComponent = (
   setup() {
     const { cookie, getCookie, setCookie, removeCookie } = useCookie(
       cookieName,
-      parseJson,
+      opts,
       onMount
     )
 
@@ -75,7 +75,9 @@ describe('useCookie', () => {
   it('should correctly get and set the parseToJson object', async () => {
     const cookieName = 'cookieName'
     const cookieValue = { value1: 'testValue1', value2: 'testValue2' }
-    const wrapper = mount(testComponent(cookieName, cookieValue, true))
+    const wrapper = mount(
+      testComponent(cookieName, cookieValue, { isParsing: true })
+    )
     wrapper.find('#setCookie').trigger('click')
     await wrapper.vm.$nextTick()
     expect(wrapper.find('#cookieJson').html()).toContain(cookieValue.value1)
@@ -87,4 +89,85 @@ describe('useCookie', () => {
     expect(wrapper.find('#cookieJson').html()).toContain(cookieValue.value1)
     expect(wrapper.find('#cookieJson').html()).toContain(cookieValue.value2)
   })
+
+  it('should correctly get using the deserializer', async () => {
+    const cookieName = 'cookieName'
+    const cookieValue = { value1: 'testValue1', value2: 'testValue2' }
+    const deserializerVal = { value1: 'gatto', value2: 'topo' }
+    const wrapper = mount(
+      testComponent(cookieName, cookieValue, {
+        isParsing: true,
+        deserializer: () => deserializerVal
+      })
+    )
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('#cookieJson').html()).toContain(deserializerVal.value1)
+    expect(wrapper.find('#cookieJson').html()).toContain(deserializerVal.value2)
+  })
+
+  it('should ignore deserializer when isParsing is false', async () => {
+    const cookieName = 'cookieName'
+    const cookieValue = { value1: 'testValue1', value2: 'testValue2' }
+    const deserializerVal = { value1: 'gatto', value2: 'topo' }
+    const wrapper = mount(
+      testComponent(cookieName, cookieValue, {
+        isParsing: false,
+        deserializer: () => deserializerVal
+      })
+    )
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('#cookie').html()).toContain(cookieValue.value1)
+    expect(wrapper.find('#cookie').html()).toContain(cookieValue.value2)
+    expect(wrapper.find('#cookieJson').html()).not.toContain(
+      deserializerVal.value1
+    )
+    expect(wrapper.find('#cookieJson').html()).not.toContain(
+      deserializerVal.value2
+    )
+  })
+
+  it('should correctly set using the serializer', async () => {
+    const cookieName = 'cookieName'
+    const cookieValue = { value1: 'testValue1', value2: 'testValue2' }
+    const serializerVal = { value1: 'testValue1+1', value2: 'testValue2+1' }
+    const wrapper = mount(
+      testComponent(cookieName, cookieValue, {
+        isParsing: true,
+        serializer: (obj: any) => ({
+          value1: `${obj.value1}+1`,
+          value2: `${obj.value2}+1`
+        })
+      })
+    )
+    wrapper.find('#setCookie').trigger('click')
+    wrapper.find('#getCookie').trigger('click')
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('#cookieJson').html()).toContain(serializerVal.value1)
+    expect(wrapper.find('#cookieJson').html()).toContain(serializerVal.value2)
+  })
+
+  it('should ignore serializer when isParsing is false', async () => {
+    const cookieName = 'cookieName'
+    const cookieValue = { value1: 'testValue1', value2: 'testValue2' }
+    const serializerVal = { value1: 'testValue1+1', value2: 'testValue2+1' }
+    const wrapper = mount(
+      testComponent(cookieName, cookieValue, {
+        isParsing: false,
+        serializer: (obj: any) => ({
+          value1: `${obj.value1}+1`,
+          value2: `${obj.value2}+1`
+        })
+      })
+    )
+    wrapper.find('#setCookie').trigger('click')
+    wrapper.find('#getCookie').trigger('click')
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('#cookie').html()).toContain('[object Object]')
+    expect(wrapper.find('#cookieJson').html()).not.toContain(
+      serializerVal.value1
+    )
+    expect(wrapper.find('#cookieJson').html()).not.toContain(
+      serializerVal.value2
+    )
+  })
 })

src/components/useCookie/useCookie.ts

@@ -1,28 +1,54 @@
 import Cookies from 'cookie-universal'
 import { CookieSerializeOptions } from 'cookie'
+import {
+  createSerializer,
+  createDeserializer,
+  trySerialize,
+  tryDeserialize
+} from '@src/utils'
 import { ref, onMounted, Ref } from '@src/api'
 
+export interface UseCookieOptions {
+  isParsing: boolean
+  serializer?: (value: any) => string
+  deserializer?: (value: string) => any
+}
+
+const defaultOptions = {
+  isParsing: false
+}
+
 export function useCookie(
   cookieName: string,
-  enableParseJSON = false,
+  options?: UseCookieOptions,
   runOnMount = true
 ) {
-  const cookieLib = Cookies(undefined, undefined, enableParseJSON)
+  const { isParsing, ...opts } = Object.assign({}, defaultOptions, options)
+  const cookieLib = Cookies(undefined, undefined, false)
   const cookie: Ref<any> = ref(null)
 
+  const serializer = createSerializer(opts.serializer)
+  const deserializer = createDeserializer(opts.deserializer)
+
   const getCookie = () => {
-    const cookieVal = cookieLib.get(cookieName)
+    const cookieVal = tryDeserialize(
+      cookieLib.get(cookieName),
+      deserializer,
+      isParsing
+    )
     if (typeof cookieVal !== 'undefined') cookie.value = cookieVal
   }
 
   const setCookie = (
-    // The user may pass a 'string', a 'number', or a valid JSON object/array
+    // The user may pass a 'string', a 'number', a valid JSON object/array
+    // or even a custom object when serializer/deserializer are defined
     // so it is better to set allowed cookie value as 'any'
     newVal: any,
     options?: CookieSerializeOptions
   ) => {
-    cookieLib.set(cookieName, newVal, options)
-    cookie.value = newVal
+    const newCookieVal = trySerialize(newVal, serializer, isParsing)
+    cookieLib.set(cookieName, newCookieVal, options)
+    cookie.value = tryDeserialize(newCookieVal, deserializer, isParsing)
   }
 
   const removeCookie = (options?: CookieSerializeOptions) => {

src/components/useGeolocation/useGeolocation.ts

@@ -23,7 +23,7 @@ export function useGeolocation(
   options: PositionOptions = {},
   runOnMount = true
 ) {
-  options = Object.assign(defaultOpts, options)
+  options = Object.assign({}, defaultOpts, options)
 
   // Note: surprisingly the watchId can be 0 (not positive) so
   // we have to check if watchId !== null every time

src/components/useLocalStorage/index.ts

@@ -0,0 +1 @@
+export * from './useLocalStorage'

src/components/useLocalStorage/stories/UseLocalStorageDemo.vue

@@ -0,0 +1,28 @@
+<template>
+  <table class="table is-fullwidth">
+    <thead>
+      <tr>
+        <th>Prop</th>
+        <th>Value</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Sample</td>
+        <td>{{ sample }}</td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+// import { useLocalStorage } from '@src/vue-use-kit'
+
+export default Vue.extend({
+  name: 'UseLocalStorageDemo',
+  setup() {
+    return { sample: 'sample' }
+  }
+})
+</script>

src/components/useLocalStorage/stories/useLocalStorage.md

@@ -0,0 +1,23 @@
+# useLocalStorage
+
+Vue function that...
+
+## Reference
+
+```typescript
+// function useLocalStorage()
+```
+
+### Parameters
+
+- `value: string` lorem ipsa
+
+### Returns
+
+- `value: Ref<string>` lorem ipsa
+
+## Usage
+
+```html
+<template></template>
+```

src/components/useLocalStorage/stories/useLocalStorage.story.ts

@@ -0,0 +1,28 @@
+import { storiesOf } from '@storybook/vue'
+import path from 'path'
+import StoryTitle from '@src/helpers/StoryTitle.vue'
+import UseLocalStorageDemo from './UseLocalStorageDemo.vue'
+
+const functionName = 'useLocalStorage'
+const functionPath = path.resolve(__dirname, '..')
+const notes = require(`./${functionName}.md`).default
+
+const basicDemo = () => ({
+  components: { StoryTitle, demo: UseLocalStorageDemo },
+  template: `
+    <div class="container">
+      <story-title 
+        function-path="${functionPath}" 
+        source-name="${functionName}" 
+        demo-name="UseLocalStorageDemo.vue"
+      >
+        <template v-slot:title></template>
+        <template v-slot:intro></template>
+      </story-title>
+      <demo />
+    </div>`
+})
+
+storiesOf('side effects|useLocalStorage', module)
+  .addParameters({ notes })
+  .add('Demo', basicDemo)