fix(useCookie): Cookie code should not be imported when useCookie is not used

Author: microcipcip

package-lock.json

@@ -10,6 +10,7 @@
     "vue-hooks",
     "vue-use-hooks"
   ],
+  "main": "dist/vue-use-kit.umd.js",
   "module": "dist/vue-use-kit.es5.js",
   "typings": "dist/types/vue-use-kit.d.ts",
   "files": [
@@ -27,7 +28,8 @@
   "scripts": {
     "lint": "eslint 'src/**/*.ts'",
     "prebuild": "rimraf dist && rimraf docs",
-    "build": "npm run storybook:build && tsc --module commonjs -p ./tsconfig.build.json && rollup -c rollup.config.ts && npm run build:clean",
+    "build": "npm run storybook:build && npm run build:code && npm run build:clean",
+    "build:code": "tsc --module commonjs -p ./tsconfig.build.json && rollup -c rollup.config.ts",
     "build:clean": "ts-node tools/build-clean",
     "dev": "start-storybook -p 3000 -s ./public",
     "storybook:build": "build-storybook --quiet -c .storybook -s ./public -o docs",
@@ -91,6 +93,7 @@
     "@storybook/addon-viewport": "^5.3.13",
     "@storybook/theming": "^5.3.13",
     "@storybook/vue": "^5.3.13",
+    "@types/cookie": "^0.3.3",
     "@types/jest": "^23.3.2",
     "@types/node": "^10.11.0",
     "@types/throttle-debounce": "^2.1.0",
@@ -103,7 +106,6 @@
     "bulma": "^0.8.0",
     "colors": "^1.3.2",
     "commitizen": "^3.0.0",
-    "cookie-universal": "^2.1.3",
     "cross-env": "^5.2.0",
     "cz-conventional-changelog": "^2.1.0",
     "eslint": "^6.8.0",
@@ -140,6 +142,7 @@
     "vue-template-compiler": "^2.6.11"
   },
   "dependencies": {
+    "cookie": "^0.4.0",
     "throttle-debounce": "^2.1.0"
   }
 }

package.json

@@ -1,6 +1,7 @@
 /* eslint-disable */
 import resolve from 'rollup-plugin-node-resolve'
 import commonjs from 'rollup-plugin-commonjs'
+import camelCase from 'lodash.camelcase'
 import typescript from 'rollup-plugin-typescript2'
 import json from 'rollup-plugin-json'
 import ttypescript from 'ttypescript'
@@ -24,16 +25,29 @@ const banner = `/**
 
 export default {
   input: `src/${libraryName}.ts`,
-  output: [{ banner, file: pkg.module, format: 'es' }],
+  output: [
+    {
+      banner,
+      file: pkg.main,
+      name: camelCase(libraryName),
+      format: 'umd',
+      globals: {
+        vue: 'Vue',
+        '@vue/composition-api': 'vueCompositionApi'
+      }
+    },
+    { banner, file: pkg.module, format: 'es' }
+  ],
   // Indicate here external modules you don't wanna include in your bundle (i.e.: 'lodash')
-  external: ['vue', '@vue/composition-api', 'cookie-universal'],
+  external: ['vue', '@vue/composition-api'],
   watch: { include: 'src/**' },
   plugins: [
     // Allow json resolution
     json(),
     // Compile TypeScript files
     typescript({
-      // Fix typescript definition paths
+      // Transform typescript aliases because otherwise type definitions
+      // will have the wrong import path
       typescript: ttypescript,
       tsconfigDefaults: {
         compilerOptions: {

rollup.config.ts

@@ -1,5 +1,5 @@
-import Cookies from 'cookie-universal'
 import { CookieSerializeOptions } from 'cookie'
+import { Cookies } from '@src/shared/cookies'
 import {
   createSerializer,
   createDeserializer,
@@ -30,7 +30,7 @@ export function useCookie(
   const serializer = createSerializer(opts.serializer)
   const deserializer = createDeserializer(opts.deserializer)
 
-  const cookieLib = Cookies(undefined, undefined, false)
+  const cookieLib = Cookies()
   const cookie: Ref<any> = ref(null)
 
   const getCookie = () => {

src/functions/useCookie/useCookie.ts

@@ -0,0 +1,24 @@
+import Cookie from 'cookie'
+
+export const Cookies = () => {
+  const state: any = {
+    set(name = '', value = '', opts = { path: '/' }) {
+      value = typeof value === 'object' ? JSON.stringify(value) : value
+      document.cookie = Cookie.serialize(name, value, opts)
+    },
+
+    get(name = '') {
+      const cookies = Cookie.parse(document.cookie)
+      const cookie = cookies[name]
+      return cookie
+    },
+
+    remove(name = '', opts = { path: '/', expires: new Date(0) }) {
+      const cookie = state.get(name)
+      opts.expires = new Date(0)
+      if (typeof cookie !== 'undefined') state.set(name, '', opts)
+    }
+  }
+
+  return state
+}

src/shared/cookies.ts

@@ -6,6 +6,9 @@ const handleError = (err: Error) => {
   if (err) return console.log(err)
 }
 
+// Remove lib folder
+rimraf(`${distDir}/lib`, handleError)
+
 // Remove stories folder
 rimraf(`${distDir}/**/stories/**`, handleError)