@beyonk/svelte-facebook-pixel - npm Package Compare versions

Comparing version 1.0.1 to 2.0.1

index.js

 (function (global, factory) {
-	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
-	typeof define === 'function' && define.amd ? define(factory) :
-	(global.FacebookPixel = factory());
-}(this, (function () { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('svelte/internal'), require('svelte')) :
+  typeof define === 'function' && define.amd ? define(['svelte/internal', 'svelte'], factory) :
+  (global = global || self, global.FacebookPixel = factory(global.internal, global.svelte));
+}(this, function (internal, svelte) { 'use strict';
 
-	function noop() {}
+  /* src/FacebookPixel.svelte generated by Svelte v3.5.4 */
 
-	function assign(tar, src) {
-		for (var k in src) tar[k] = src[k];
-		return tar;
-	}
+  function create_fragment(ctx) {
+  	return {
+  		c: internal.noop,
+  		m: internal.noop,
+  		p: internal.noop,
+  		i: internal.noop,
+  		o: internal.noop,
+  		d: internal.noop
+  	};
+  }
 
-	function blankObject() {
-		return Object.create(null);
-	}
+  function instance($$self, $$props, $$invalidate) {
+  	let { id, enabled = true, version = 'v3.1' } = $$props;
+    let pixels;
+    let _fbq;
 
-	function destroy(detach) {
-		this.destroy = noop;
-		this.fire('destroy');
-		this.set = this.get = noop;
+    svelte.onMount(() => {
+      if (!id) {
+        throw new Error(
+          `id configuration parameter is required, try <FacebookPixel id="12345" /> or <FacebookPixel id="['12345', '67890']" /> for multiple pixels`
+        )
+      }
 
-		if (detach !== false) this._fragment.u();
-		this._fragment.d();
-		this._fragment = this._state = null;
-	}
+      pixels = Array.isArray(id) ? id : [ id ];
 
-	function _differs(a, b) {
-		return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
-	}
+      if (window['fbq']) {
+        _fbq = window['fbq'];
+        return
+      }
 
-	function fire(eventName, data) {
-		var handlers =
-			eventName in this._handlers && this._handlers[eventName].slice();
-		if (!handlers) return;
+      /* eslint-disable */
+      const scr = (f, b, e, v, n, t, s) => {
+        if (f.fbq) return; n = f.fbq = function () {
+          n.callMethod ?
+            n.callMethod.apply(n, arguments) : n.queue.push(arguments);
+        };
+        if (!f._fbq) f._fbq = n; n.push = n; n.loaded = !0; n.version = version;
+        n.queue = [];
+        t = b.createElement(e);
+        t.async = true;
+        t.defer = true;
+        t.src = v;
+        s = b.getElementsByTagName('body')[0];
+        s.parentNode.appendChild(t, s);
+      };
+      
+      scr(window, document, 'script', 'https://connect.facebook.net/en_US/fbevents.js');
+      /* eslint-enable */
 
-		for (var i = 0; i < handlers.length; i += 1) {
-			var handler = handlers[i];
+      _fbq = window['fbq'];
+      
+      if (enabled) {
+        enable();
+      }
+    });
 
-			if (!handler.__calling) {
-				handler.__calling = true;
-				handler.call(this, data);
-				handler.__calling = false;
-			}
-		}
-	}
+    function enable () {
+      init();
+      track();
+    }
 
-	function get(key) {
-		return key ? this._state[key] : this._state;
-	}
+    function init () {
+      pixels.forEach(id => {
+        query('init', id);
+      });
+    }
 
-	function init(component, options) {
-		component._handlers = blankObject();
-		component._bind = options._bind;
+    function track (event = 'PageView', data = undefined, id = undefined) {
+      if (id) {
+        if (pixels.includes(id)) {
+          query('trackSingle', id, event, data);
+        } else {
+          console.warn('Attempted to send event to unknown pixel', id);
+        }
+      } else {
+        query('track', event, data);
+      }
+    }
 
-		component.options = options;
-		component.root = options.root || component;
-		component.store = component.root.store || options.store;
-	}
+    function query (cmd, ...option) {
+      _fbq(cmd, ...option);
+    }
 
-	function observe(key, callback, options) {
-		var fn = callback.bind(this);
+  	$$self.$set = $$props => {
+  		if ('id' in $$props) $$invalidate('id', id = $$props.id);
+  		if ('enabled' in $$props) $$invalidate('enabled', enabled = $$props.enabled);
+  		if ('version' in $$props) $$invalidate('version', version = $$props.version);
+  	};
 
-		if (!options || options.init !== false) {
-			fn(this.get()[key], undefined);
-		}
+  	return {
+  		id,
+  		enabled,
+  		version,
+  		enable,
+  		track,
+  		query
+  	};
+  }
 
-		return this.on(options && options.defer ? 'update' : 'state', function(event) {
-			if (event.changed[key]) fn(event.current[key], event.previous && event.previous[key]);
-		});
-	}
+  class FacebookPixel extends internal.SvelteComponent {
+  	constructor(options) {
+  		super();
+  		internal.init(this, options, instance, create_fragment, internal.safe_not_equal, ["id", "enabled", "version", "enable", "track", "query"]);
+  	}
 
-	function on(eventName, handler) {
-		if (eventName === 'teardown') return this.on('destroy', handler);
+  	get enable() {
+  		return this.$$.ctx.enable;
+  	}
 
-		var handlers = this._handlers[eventName] || (this._handlers[eventName] = []);
-		handlers.push(handler);
+  	get track() {
+  		return this.$$.ctx.track;
+  	}
 
-		return {
-			cancel: function() {
-				var index = handlers.indexOf(handler);
-				if (~index) handlers.splice(index, 1);
-			}
-		};
-	}
+  	get query() {
+  		return this.$$.ctx.query;
+  	}
+  }
 
-	function set(newState) {
-		this._set(assign({}, newState));
-		if (this.root._lock) return;
-		this.root._lock = true;
-		callAll(this.root._beforecreate);
-		callAll(this.root._oncreate);
-		callAll(this.root._aftercreate);
-		this.root._lock = false;
-	}
+  return FacebookPixel;
 
-	function _set(newState) {
-		var oldState = this._state,
-			changed = {},
-			dirty = false;
-
-		for (var key in newState) {
-			if (this._differs(newState[key], oldState[key])) changed[key] = dirty = true;
-		}
-		if (!dirty) return;
-
-		this._state = assign(assign({}, oldState), newState);
-		this._recompute(changed, this._state);
-		if (this._bind) this._bind(changed, this._state);
-
-		if (this._fragment) {
-			this.fire("state", { changed: changed, current: this._state, previous: oldState });
-			this._fragment.p(changed, this._state);
-			this.fire("update", { changed: changed, current: this._state, previous: oldState });
-		}
-	}
-
-	function callAll(fns) {
-		while (fns && fns.length) fns.shift()();
-	}
-
-	function _mount(target, anchor) {
-		this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
-	}
-
-	function _unmount() {
-		if (this._fragment) this._fragment.u();
-	}
-
-	var proto = {
-		destroy: destroy,
-		get: get,
-		fire: fire,
-		observe: observe,
-		on: on,
-		set: set,
-		teardown: destroy,
-		_recompute: noop,
-		_set: _set,
-		_mount: _mount,
-		_unmount: _unmount,
-		_differs: _differs
-	};
-
-	/* src/FacebookPixel.html generated by Svelte v1.64.1 */
-
-	function data() {
-	  return {
-	    enabled: true,
-	    version: 'v3.1'
-	  }
-	}
-	var methods = {
-	  enable () {
-	    this.init();
-	    this.track();
-	  },
-
-	  init () {
-	    const { pixels } = this.get();
-	    pixels.forEach(id => {
-	      this.query('init', id);
-	    });
-	  },
-
-	  track (event = 'PageView', data = undefined, id = undefined) {
-	    if (id) {
-	      const { pixels } = this.get();
-	      if (pixels.includes(id)) {
-	        this.query('trackSingle', id, event, data);
-	      } else {
-	        console.warn('Attempted to send event to unknown pixel', id);
-	      }
-	    } else {
-	      this.query('track', event, data);
-	    }
-	  },
-
-	  query (cmd, ...option) {
-	    const { fbq } = this.get();
-	    fbq(cmd, ...option);
-	  }
-	};
-
-	function oncreate() {
-	  const { id } = this.get();
-
-	  if (!id) {
-	    throw new Error(
-	      `id configuration parameter is required, try <FacebookPixel id="12345" /> or <FacebookPixel id="['12345', '67890']" /> for multiple pixels`
-	    )
-	  }
-
-	  const pixels = Array.isArray(id) ? id : [ id ];
-	  this.set({ pixels });
-
-	  if (window['fbq']) {
-					this.set({ fbq: window['fbq']});
-	    return
-	  }
-				
-	  const { version, track, enabled } = this.get();
-
-	  /* eslint-disable */
-	  const scr = (f, b, e, v, n, t, s) => {
-	    if (f.fbq) return; n = f.fbq = function () {
-	      n.callMethod ?
-	        n.callMethod.apply(n, arguments) : n.queue.push(arguments);
-	    };
-	    if (!f._fbq) f._fbq = n; n.push = n; n.loaded = !0; n.version = version;
-	    n.queue = [];
-	    t = b.createElement(e);
-	    t.async = true;
-	    t.defer = true;
-	    t.src = v;
-	    s = b.getElementsByTagName('body')[0];
-	    s.parentNode.appendChild(t, s);
-	  };
-				
-				scr(window, document, 'script', 'https://connect.facebook.net/en_US/fbevents.js');
-	  /* eslint-enable */
-
-				this.set({ fbq: window['fbq'] });
-				
-	  if (enabled) {
-	    this.enable();
-	  }
-	}
-	function create_main_fragment(component, state) {
-
-		return {
-			c: noop,
-
-			m: noop,
-
-			p: noop,
-
-			u: noop,
-
-			d: noop
-		};
-	}
-
-	function FacebookPixel(options) {
-		init(this, options);
-		this._state = assign(data(), options.data);
-
-		var self = this;
-		var _oncreate = function() {
-			var changed = {  };
-			oncreate.call(self);
-			self.fire("update", { changed: changed, current: self._state });
-		};
-
-		if (!options.root) {
-			this._oncreate = [];
-		}
-
-		this._fragment = create_main_fragment(this, this._state);
-
-		this.root._oncreate.push(_oncreate);
-
-		if (options.target) {
-			this._fragment.c();
-			this._mount(options.target, options.anchor);
-
-			callAll(this._oncreate);
-		}
-	}
-
-	assign(FacebookPixel.prototype, proto);
-	assign(FacebookPixel.prototype, methods);
-
-	return FacebookPixel;
-
-})));
+}));

package.json

 {
   "name": "@beyonk/svelte-facebook-pixel",
-  "version": "1.0.1",
-  "svelte": "src/FacebookPixel.html",
+  "version": "2.0.1",
+  "svelte": "src/FacebookPixel.svelte",
   "module": "index.mjs",
@@ -12,8 +12,10 @@ "main": "index.js",
   "devDependencies": {
-    "rollup": "^0.57.1",
-    "rollup-plugin-svelte": "^4.1.0",
-    "svelte": "^1.60.0"
+    "rollup": "^1.16.2",
+    "rollup-plugin-svelte": "^5.1.0",
+    "svelte": "^3.5.4"
   },
   "keywords": [
-    "svelte"
+    "svelte",
+    "facebook",
+    "tracking"
   ],
@@ -20,0 +22,0 @@ "files": [

README.md

@@ -7,3 +7,3 @@ <p align="center">
 
-[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com) [![CircleCI](https://circleci.com/gh/beyonk-adventures/svelte-facebook-pixel.svg?style=shield)](https://circleci.com/gh/beyonk-adventures/svelte-facebook-pixel)
+[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com) [![CircleCI](https://circleci.com/gh/beyonk-adventures/svelte-facebook-pixel.svg?style=shield)](https://circleci.com/gh/beyonk-adventures/svelte-facebook-pixel) [![Svelte v3](https://img.shields.io/badge/svelte-v2-orange.svg)](https://v2.svelte.dev) [![Svelte v3](https://img.shields.io/badge/svelte-v3-blueviolet.svg)](https://svelte.dev)
 
@@ -22,20 +22,6 @@
 ```html
-<FacebookPixel ref:fb {...fbOptions} />
+<FacebookPixel bind:this={fb} id={123} />
 
 <script>
   import FacebookPixel from '@beyonk/svelte-facebook-pixel'
-
-	export default {
-		data () {
-			return {
-				fbOptions: {
-					id: '123'
-				}
-			}
-		},
-		
-		components: {
-			FacebookPixel
-		}
-	}
 </script>
@@ -52,16 +38,13 @@ ```
 ```html
-<FacebookPixel ref:fb />
+<FacebookPixel bind:this={fb} />
 
 <script>
-  import FacebookPixel from '@beyonk/svelte-facebook-pixel'
+	import FacebookPixel from '@beyonk/svelte-facebook-pixel'
+	import { onMount } from 'svelte
+	
+	let fb
 
-	export default {
-		components: {
-			FacebookPixel
-    }
-    
-    oncreate () {
-      this.refs.fb.track('SomeEvent', { some: 'data' })
-    }
-	}
+	onMount(() => {
+		fb.track('SomeEvent', { some: 'data' })
+	})
 </script>
@@ -75,21 +58,20 @@ ```
 ```html
-<FacebookPixel ref:fb {...fbOptions} />
+<FacebookPixel bind:this={fb} />
 
 <script>
-  import FacebookPixel from '@beyonk/svelte-facebook-pixel'
+	import FacebookPixel from '@beyonk/svelte-facebook-pixel'
+	import { onMount } from 'svelte
+	
+	let fb
 
-	export default {
-		data () {
-			return {
-				fbOptions: {
-					id: ['123', '456']
-				}
-			}
-		},
-		
-		components: {
-			FacebookPixel
-		}
-	}
+	onMount(() => {
+		fb.track('SomeEvent', { some: 'data' })
+	})
 </script>
+
+<FacebookPixel ref:fb id={['123', '456']} />
+
+<script>
+  import FacebookPixel from '@beyonk/svelte-facebook-pixel'
+</script>
 ```
@@ -104,3 +86,3 @@
 ```js
-this.refs.fb.track('SomeEvent', { some: 'data' })
+fb.track('SomeEvent', { some: 'data' })
 ```
@@ -113,3 +95,3 @@
 ```js
-this.refs.fb.track('SomeEvent', { some: 'data' }, '456')
+fb.track('SomeEvent', { some: 'data' }, '456')
 ```
@@ -121,7 +103,4 @@
 
-```js
-fbOptions: {
-  id: 123,
-  enabled: false
-}
+```html
+<FacebookPixel bind:this={fb} enabled={false} />
 ```
@@ -132,3 +111,3 @@
 ```js
-this.refs.fb.enable()
+fb.enable()
 ```
@@ -135,0 +114,0 @@

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

11959

decreased by-34.73%

Lines of code

210

decreased by-51.61%

Number of lines in readme file

123

decreased by-14.58%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes