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

Comparing version 2.1.1 to 3.0.1

package.json

 {
   "name": "@beyonk/svelte-facebook-pixel",
-  "version": "2.1.1",
-  "svelte": "src/FacebookPixel.svelte",
-  "module": "index.mjs",
-  "main": "index.js",
+  "svelte": "src/index.js",
+  "module": "dist/index.mjs",
+  "main": "dist/index.js",
   "scripts": {
+    "dev": "WATCH=true nollup -c --hot --port 5000 --content-base ./public -s",
     "build": "rollup -c",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "lint": "eslint . --ext .svelte,.html,.js"
   },
   "devDependencies": {
-    "rollup": "^2.0.5",
-    "rollup-plugin-svelte": "^5.1.1",
-    "svelte": "^3.19.2"
+    "@beyonk/eslint-config": "^4.2.0",
+    "@rollup/plugin-node-resolve": "^9.0.0",
+    "cheerio": "^1.0.0-rc.3",
+    "eslint": "^7.9.0",
+    "eslint-plugin-svelte3": "^2.7.3",
+    "just-camel-case": "^4.0.2",
+    "just-flatten": "^1.0.0",
+    "node-fetch": "^2.6.1",
+    "nollup": "^0.13.9",
+    "rollup": "^2.26.6",
+    "rollup-plugin-hot": "^0.1.0",
+    "rollup-plugin-svelte": "^6.0.0",
+    "rollup-plugin-svelte-hot": "^0.10.0",
+    "svelte": "^3.24.1",
+    "svelte-feather-icons": "^3.2.2",
+    "svelte-routing": "^1.4.2"
   },
+  "eslintConfig": {
+    "extends": "@beyonk/eslint-config/svelte"
+  },
   "keywords": [
-    "svelte",
-    "facebook",
-    "tracking"
+    "svelte"
   ],
   "files": [
     "src",
-    "index.mjs",
-    "index.js"
-  ]
+    "dist"
+  ],
+  "version": "3.0.1"
 }

README.md

@@ -1,4 +0,8 @@
-<p align="center">
-  <img width="186" height="90" src="https://user-images.githubusercontent.com/218949/44782765-377e7c80-ab80-11e8-9dd8-fce0e37c235b.png" alt="Beyonk" />
-</p>
+<a href="https://beyonk.com">
+    <br />
+    <br />
+    <img src="https://user-images.githubusercontent.com/218949/144224348-1b3a20d5-d68e-4a7a-b6ac-6946f19f4a86.png" width="198" />
+    <br />
+    <br />
+</a>
 
@@ -21,3 +25,3 @@ ## Svelte Facebook Pixel Component
 ```html
-<FacebookPixel bind:this={fb} id={123} />
+<FacebookPixel pixels={[ 'ABC123', '123ABC' ]} />
 
@@ -37,9 +41,7 @@ <script>
 ```html
-<FacebookPixel bind:this={fb} />
+<FacebookPixel />
 
 <script>
-	import FacebookPixel from '@beyonk/svelte-facebook-pixel'
+	import { FacebookPixel, fb } from '@beyonk/svelte-facebook-pixel'
 	import { onMount } from 'svelte
-	
-	let fb
 
@@ -57,9 +59,8 @@ onMount(() => {
 ```html
-<FacebookPixel bind:this={fb} />
+<!-- __layout.svelte -->
+<FacebookPixel />
 
 <script>
-	import FacebookPixel from '@beyonk/svelte-facebook-pixel'
+	import { FacebookPixel, fb } from '@beyonk/svelte-facebook-pixel'
 	import { onMount } from 'svelte
-	
-	let fb
 
@@ -71,6 +72,10 @@ onMount(() => {
 
-<FacebookPixel ref:fb id={['123', '456']} />
+<!-- page.svelte -->
 
 <script>
-  import FacebookPixel from '@beyonk/svelte-facebook-pixel'
+  import { fb } from '@beyonk/svelte-facebook-pixel'
+
+	onMount(() => {
+		fb.track('AnotherEvent', { some: 'data' })
+	})
 </script>
@@ -91,6 +96,6 @@ ```
 
-If you have multiple pixels on your page and want to send an event to only one of them, specify the pixel's id as the last parameter:
+If you have multiple pixels on your page and want to send an event to only one of them use `trackSingle` and pass the pixel's ID as the first argument:
 
 ```js
-fb.track('SomeEvent', { some: 'data' }, '456')
+fb.trackSingle('ABC123', 'SomeEvent', { some: 'data' })
 ```
@@ -103,3 +108,3 @@
 ```html
-<FacebookPixel bind:this={fb} enabled={false} />
+<FacebookPixel enabled={false} />
 ```
@@ -109,15 +114,17 @@
 
-```js
-fb.enable()
-```
+```html
+<FacebookPixel bind:this={_fb} {enabled} />
 
-## Module options
+<script>
+  import { fb } from '@beyonk/svelte-facebook-pixel'
 
-List of possible options in the module:
+	let _fb = null
+	let enabled = false
 
-| Option   | Default  | Required | Description                                                                               |
-|----------|----------|----------|-------------------------------------------------------------------------------------------|
-| id  | null     | true     | The unique pixel identifier provided by Facebook.                                         |
-| version  | v3.1     | false    | Tracking version.                                                                         |
-| enabled  | true     | false    | Disable the Pixel by default when initialized. Can be enabled later through `<component>.enable()`. |
+	onMount(() => {
+		enabled = true
+		_fb.init()
+	})
+</script>
+```
 
@@ -130,2 +137,2 @@ ## License
 
-Thanks to [William DASILVA](https://github.com/WilliamDASILVA/nuxt-facebook-pixel-module) for his original Nuxt facebook pixel module which inspired this project.
+Thanks to [William DASILVA](https://github.com/WilliamDASILVA/nuxt-facebook-pixel-module) for his original Nuxt facebook pixel module which inspired this project.

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

Improved metrics

Total package byte prevSize

33808

increased by198.97%

Number of package files

8

increased by60%

Lines of code

810

increased by302.99%

Number of lines in readme file

131

increased by6.5%

Worsened metrics

Dev dependency count

16

increased by433.33%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes