improvement(useLocalStorage): Improve useLocalStorage typescript types

Author: microcipcip

src/components/useCookie/stories/useCookie.md

@@ -6,9 +6,9 @@ Vue function that provides way to read, set and remove a cookie.
 
 ```typescript
 interface UseCookieOptions {
-    isParsing: boolean;
-    serializer?: (value: any) => string;
-    deserializer?: (value: string) => any;
+  isParsing: boolean
+  serializer?: SerializerFunction
+  deserializer?: DeserializerFunction
 }
 ```
 
@@ -30,8 +30,8 @@ function useCookie(
 - `cookieName: string` the cookie name you wish to get/set/remove
 - `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
+  - `serializer: SerializerFunction` a custom serializer, `JSON.stringify` by default
+  - `deserializer: DeserializerFunction` a custom deserializer, `JSON.parse` by default
 - `runOnMount: boolean` whether to get the cookie on mount or not, `true` by default
 
 ### Returns
@@ -49,32 +49,31 @@ function useCookie(
 ```html
 <template>
   <div>
-    Cookie: {{ cookie }}
-
+    <div>Cookie: {{ cookie }}</div>
     <button @click="getCookie">Get cookie</button>
     <button @click="setCookie('Value here')">Set cookie</button>
     <button @click="removeCookie">Remove cookie</button>
   </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue'
-import { useCookie } from 'vue-use-kit'
+  import Vue from 'vue'
+  import { useCookie } from 'vue-use-kit'
 
-export default Vue.extend({
-  name: 'UseCookieDemo',
-  setup() {
-    const {
-      cookie, getCookie, setCookie, removeCookie
-    } = useCookie('i_love_cookies')
+  export default Vue.extend({
+    name: 'UseCookieDemo',
+    setup() {
+      const { cookie, getCookie, setCookie, removeCookie } = useCookie(
+        'i_love_cookies'
+      )
 
-    return {
-      cookie,
-      getCookie,
-      setCookie,
-      removeCookie,
+      return {
+        cookie,
+        getCookie,
+        setCookie,
+        removeCookie
+      }
     }
-  }
-})
+  })
 </script>
 ```

src/components/useCookie/useCookie.ts

@@ -3,6 +3,8 @@ import { CookieSerializeOptions } from 'cookie'
 import {
   createSerializer,
   createDeserializer,
+  SerializerFunction,
+  DeserializerFunction,
   trySerialize,
   tryDeserialize,
   isNullOrUndefined
@@ -11,8 +13,8 @@ import { ref, onMounted, Ref } from '@src/api'
 
 export interface UseCookieOptions {
   isParsing: boolean
-  serializer?: (value: any) => string
-  deserializer?: (value: string) => any
+  serializer?: SerializerFunction
+  deserializer?: DeserializerFunction
 }
 
 const defaultOptions = {

src/components/useLocalStorage/stories/useLocalStorage.md

@@ -1,23 +1,77 @@
 # useLocalStorage
 
-Vue function that...
+Vue function that provides way to read, update and delete a localStorage key
 
 ## Reference
 
 ```typescript
-// function useLocalStorage()
+interface UseLocalStorageOptions {
+  isParsing: boolean
+  serializer?: SerializerFunction
+  deserializer?: DeserializerFunction
+}
+```
+
+```typescript
+function useLocalStorage(
+  key: string,
+  options?: UseLocalStorageOptions,
+  runOnMount?: boolean
+): {
+  item: Ref<any>
+  getItem: () => void
+  setItem: (newVal: any) => void
+  removeItem: () => void
+}
 ```
 
 ### Parameters
 
-- `value: string` lorem ipsa
+- `key: string` the localstorage key you wish to get/set/remove
+- `options: UseLocalStorageOptions`
+  - `isParsing: boolean` whether to enable parsing the localstorage key value or not, `false` by default
+  - `serializer: SerializerFunction` a custom serializer, `JSON.stringify` by default
+  - `deserializer: DeserializerFunction` a custom deserializer, `JSON.parse` by default
+- `runOnMount: boolean` whether to get the localstorage key on mount or not, `true` by default
 
 ### Returns
 
-- `value: Ref<string>` lorem ipsa
+- `item: Ref<any>` the localstorage key value, it can be null, a string or a JSON object/array
+- `getItem: Function` get the localstorage key value
+- `setItem: Function` set the localstorage key value
+  - `newVal: any`: the value to set, can be a string or an object/array
+- `removeItem: Function` delete the localstorage key
 
 ## Usage
 
 ```html
-<template></template>
+<template>
+  <div>
+    <div>Item: {{ item }}</div>
+    <button @click="getItem">Get item</button>
+    <button @click="setItem('Value here')">Set item</button>
+    <button @click="removeItem">Remove item</button>
+  </div>
+</template>
+
+<script lang="ts">
+  import Vue from 'vue'
+  import { useLocalStorage } from 'vue-use-kit'
+
+  export default Vue.extend({
+    name: 'UseLocalStorageDemo',
+    setup() {
+      const { item, getItem, setItem, removeItem } = useLocalStorage(
+        'i_love_local_storage'
+      )
+
+      return {
+        item,
+        getItem,
+        setItem,
+        removeItem
+      }
+    }
+  })
+</script>
 ```

src/components/useLocalStorage/useLocalStorage.ts

@@ -1,6 +1,8 @@
 import {
   createSerializer,
   createDeserializer,
+  SerializerFunction,
+  DeserializerFunction,
   trySerialize,
   tryDeserialize,
   isNullOrUndefined
@@ -9,8 +11,8 @@ import { ref, onMounted, Ref } from '@src/api'
 
 export interface UseLocalStorageOptions {
   isParsing: boolean
-  serializer?: (value: any) => string
-  deserializer?: (value: string) => any
+  serializer?: SerializerFunction
+  deserializer?: DeserializerFunction
 }
 
 const defaultOptions = {

src/utils.ts

@@ -44,16 +44,20 @@ export const normalizeEntriesData = (data: [any, any][]) =>
     return acc
   }, {} as { [key: string]: any })
 
-export const createSerializer = (serializer?: Function) =>
+export type SerializerFunction = (value: any) => string
+
+export type DeserializerFunction = (value: string) => any
+
+export const createSerializer = (serializer?: SerializerFunction) =>
   serializer || JSON.stringify
 
-export const createDeserializer = (deserializer?: Function) =>
+export const createDeserializer = (deserializer?: DeserializerFunction) =>
   deserializer || JSON.parse
 
 const fallbackToString = (val: any) => (isString(val) ? val : String(val))
 export const trySerialize = (
   val: any,
-  serializer: Function,
+  serializer: SerializerFunction,
   shouldSerialize?: boolean
 ) => {
   if (!shouldSerialize) return fallbackToString(val)
@@ -66,7 +70,7 @@ export const trySerialize = (
 
 export const tryDeserialize = (
   val: any,
-  deserializer: Function,
+  deserializer: DeserializerFunction,
   shouldDeserialize?: boolean
 ) => {
   if (!shouldDeserialize) return val