Rewrote code to use tiny-cookie for handling cookies

alfhen · alfhen · commit 556c2fb1114a · 2016-11-07T10:41:19.000+01:00
- Cookie domain is now supported
- Updated tests with a cookie-domain case
- Added build folder and changed main file to be compiled minified
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 # vue-cookie
-A Vue.js plugin for manipulating cookies
+A Vue.js plugin for manipulating cookies tested up to ```Vue v2.0.5```
 
 ## Installation
 
@@ -13,7 +13,7 @@ npm install vue-cookie --save
 Include in ```<body>``` after loading Vue and it will automatically hook into Vue
 
 ``` html
-<script src="/node_modules/vue-cookie/src/vue-cookie.js'"></script>
+<script src="/node_modules/vue-cookie/build/vue-cookie.js'"></script>
 
  ```
 
@@ -29,7 +29,10 @@ Vue.use(VueCookie);
 ```
 
 ### Usage
-The plugin is available through ```this.$cookie``` in components
+The plugin is available through ```this.$cookie``` in components or ```Vue.cookie```
+
+Rather than implementing my own Cookie handling logic the plugin now wraps the awesome
+[tiny-cookie](https://github.com/Alex1990/tiny-cookie "Tiny cookie documentation") package
 
 ###### Example
 ``` javascript
@@ -45,12 +48,37 @@ this.$cookie.delete('test');
 
 ```
 
+###### Advanced examples
+``` javascript
+
+// Setting the cookie Domain
+this.$cookie.set('test', 'Random value', {expires: 1, domain: 'localhost'});
+
+// As this cookie is set with a domain then if you wish to delete it you have to provide the domain when calling delete
+this.$cookie.delete('test', {domain: 'localhost'});
+
+// Customizing expires
+var date = new Date;
+date.setDate(date.getDate() + 21);
+
+Cookie.set('dateObject', 'A date object', { expires: date });
+Cookie.set('dateString', 'A parsable date string', { expires: date.toGMTString() });
+Cookie.set('integer', 'Seven days later', { expires: 7 });
+Cookie.set('stringSuffixY', 'One year later', { expires: '1Y' });
+Cookie.set('stringSuffixM', 'One month later', { expires: '1M' });
+Cookie.set('stringSuffixD', 'One day later', { expires: '1D' });
+Cookie.set('stringSuffixh', 'One hour later', { expires: '1h' });
+Cookie.set('stringSuffixm', 'Ten minutes later', { expires: '10m' });
+Cookie.set('stringSuffixs', 'Thirty seconds later', { expires: '30s' });
+
+```
+
 Thanks for using the plugin, I am happy to accept feedback/pull requests, do not forget to star if you like it!
 
 Happy Coding! :D
 
 ### Tests
-This packacge uses the ´´´testem``` framework and jasmine assertion library
+This packacge uses the ´´´testem``` framework and ```jasmine``` assertion library
 
 ``` bash
 # Run npm install to fetch dependencies
diff --git a/build/vue-cookie.js b/build/vue-cookie.js
diff --git a/gulpfile.js b/gulpfile.js
@@ -3,19 +3,9 @@ var elixir = require('laravel-elixir');
 require('laravel-elixir-webpack-official');
 
 require('laravel-elixir-vue');
-/*
- |--------------------------------------------------------------------------
- | Elixir Asset Management
- |--------------------------------------------------------------------------
- |
- | Elixir provides a clean, fluent API for defining some basic Gulp tasks
- | for your Laravel application. By default, we are compiling the Sass
- | file for our application, as well as publishing vendor resources.
- |
- */
 
 elixir(function(mix) {
 
-    mix.webpack('vue-cookie-spec.js', 'test/bundle.js', 'test/spec');
+    mix.webpack('vue-cookie.js', 'build', 'src');
 
 });
diff --git a/package.json b/package.json
@@ -4,10 +4,11 @@
   "description": "A Vue.js plugin for manipulating cookies",
   "author": "Alf Henderson <alfhenderson@gmail.com>",
   "private": false,
-  "main": "src/vue-cookie.js",
+  "main": "build/vue-cookie.js",
   "license": "MIT",
   "scripts": {
-    "test": "./node_modules/testem/testem.js ci"
+    "test": "./node_modules/testem/testem.js ci",
+    "build": "gulp --production"
   },
   "repository": {
     "type": "git",
@@ -18,7 +19,8 @@
     "laravel-elixir": "^6.0.0-13",
     "laravel-elixir-vue": "^0.1.8",
     "laravel-elixir-webpack-official": "^1.0.9",
-    "testem": "^1.13.0",
+    "testem": "~1.8",
+    "tiny-cookie": "^1.0",
     "vue": "^2.0.5"
   },
   "devDependencies": {}
diff --git a/src/vue-cookie.js b/src/vue-cookie.js
@@ -1,41 +1,32 @@
 (function () {
 
-    var VueCookie = {
+    var Cookie = require('tiny-cookie');
 
-        config: {
-            domain: null
-        },
+    var VueCookie = {
 
         install: function (Vue) {
             Vue.prototype.$cookie = this;
             Vue.cookie = this;
         },
-
-        set: function (name, value, days, domain) {
-            let d = new Date;
-            let cookieDomain = typeof domain !== 'undefined' ? domain : this.getCookieDomain();
-            let domainString = cookieDomain !== null ? ";domain=" + cookieDomain : '';
-            d.setTime(d.getTime() + 24*60*60*1000*days);
-            window.document.cookie = name + "=" + value + domainString + ";path=/;expires=" + d.toGMTString();
+        set: function (name, value, daysOrOptions) {
+            let opts = daysOrOptions;
+            if(Number.isInteger(daysOrOptions)) {
+                opts = {expires: daysOrOptions};
+            }
+            return Cookie.set(name, value, opts);
         },
 
         get: function (name) {
-            var v = window.document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
-            return v ? v[2] : null;
+            return Cookie.get(name);
         },
 
-        delete: function (name) {
-            this.set(name, '', -1);
-        },
-
-        setCookieDomain: function (domain) {
-            this.config.cookieDomain = domain;
-        },
-
-        getCookieDomain: function () {
-            return this.config.cookieDomain;
+        delete: function (name, options) {
+            let opts = {expires: -1};
+            if(options !== undefined) {
+                opts = Object.assign(options, opts);
+            }
+            this.set(name, '', opts);
         }
-
     };
 
     if (typeof exports == "object") {
diff --git a/test.gulpfile.js b/test.gulpfile.js
@@ -0,0 +1,11 @@
+var elixir = require('laravel-elixir');
+
+require('laravel-elixir-webpack-official');
+
+require('laravel-elixir-vue');
+
+elixir(function(mix) {
+
+    mix.webpack('vue-cookie-spec.js', 'test/bundle.js', 'test/spec');
+
+});
diff --git a/test/spec/vue-cookie-spec.js b/test/spec/vue-cookie-spec.js
@@ -11,14 +11,6 @@ describe('VueCookie', function(){
         this.cookieDomain = 'localhost';
     });
 
-    it('Should set cookie domain config and validate that it is set', function(){
-
-        Vue.cookie.setCookieDomain(this.cookieDomain);
-
-        expect(Vue.cookie.getCookieDomain())
-          .toBe(this.cookieDomain);
-    });
-
     it('Should set and retrieve a Cookie with given value', function(){
 
         Vue.cookie.set(this.cookieKey, this.cookieValue, 1);
@@ -38,12 +30,20 @@ describe('VueCookie', function(){
 
     it('Should set and retrieve a Cookie with given value from a domain', function(){
 
-        Vue.cookie.set(this.cookieKey, this.cookieValue, 1, 'test' + this.cookieDomain);
+        Vue.cookie.set(this.cookieKey, this.cookieValue, {expires: 1, domain: this.cookieDomain});
 
         expect(Vue.cookie.get(this.cookieKey))
             .toBe(this.cookieValue);
     });
 
+    it('Should delete existing cookie with a domain and get null when fetching deleted cookie', function(){
+
+        Vue.cookie.delete(this.cookieKey, {domain: this.cookieDomain});
+
+        expect(Vue.cookie.get(this.cookieKey))
+            .toBe(null);
+    });
+
 
 });
 
diff --git a/testem.json b/testem.json
@@ -7,7 +7,7 @@
   "serve_files": [
     "test/bundle.js"
   ],
-  "before_tests" : "gulp",
+  "before_tests" : "gulp --gulpfile test.gulpfile.js",
   "after_tests" : "rm test/bundle.js",
   "launch_in_dev" : ["Chrome"]
 }
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,7 @@`
`7`	`7`	`"serve_files": [`
`8`	`8`	`"test/bundle.js"`
`9`	`9`	`],`
`10`		`- "before_tests" : "gulp",`
	`10`	`+ "before_tests" : "gulp --gulpfile test.gulpfile.js",`
`11`	`11`	`"after_tests" : "rm test/bundle.js",`
`12`	`12`	`"launch_in_dev" : ["Chrome"]`
`13`	`13`	`}`