@sumup/collector - npm Package Compare versions

Comparing version 1.1.1 to 1.2.0

build/index.d.ts

@@ -22,6 +22,7 @@ /**
 import usePageActiveTrigger from './hooks/usePageActiveTrigger';
+import getFlushedPayload from './plugins/getFlushedPayload';
 import * as Types from './types';
-export { TrackingRoot, TrackingView, TrackingElement, useClickTrigger, useSubmitTrigger, usePageViewTrigger, usePageActiveTrigger };
+export { TrackingRoot, TrackingView, TrackingElement, useClickTrigger, useSubmitTrigger, usePageViewTrigger, usePageActiveTrigger, getFlushedPayload };
 export declare type Dispatch = Types.Dispatch;
 export declare type Events = Types.Events;
 export declare type Payload = Types.Payload;

build/index.es.js

@@ -1,1 +0,1 @@
-import*as e from"react";var t=e.createContext({app:void 0,view:void 0,elementTree:[]}),n=function(n){var r=n.name,a=n.onDispatch,i=n.children,o=e.useMemo((function(){return{app:r,dispatch:a,elementTree:[]}}),[r,a]);return e.createElement(t.Provider,{value:o},i)},r=function(){return(r=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var a in t=arguments[n])Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a]);return e}).apply(this,arguments)};function a(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var r,a,i=n.call(e),o=[];try{for(;(void 0===t||t-- >0)&&!(r=i.next()).done;)o.push(r.value)}catch(e){a={error:e}}finally{try{r&&!r.done&&(n=i.return)&&n.call(i)}finally{if(a)throw a.error}}return o}function i(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(a(arguments[t]));return e}var o,u=function(n){var a=n.name,i=n.children,o=e.useContext(t),u=e.useMemo((function(){return r(r({},o),{view:a})}),[o,a]);return e.createElement(t.Provider,{value:u},i)},c=function(n){var a=n.name,o=n.children,u=e.useContext(t),c=e.useMemo((function(){return r(r({},u),{elementTree:i(u.elementTree,[a])})}),[u,a]);return e.createElement(t.Provider,{value:c},o)},l=function(n){var r=e.useContext(t),a=r.dispatch,i=r.app,o=r.view,u=r.elementTree;return e.useCallback((function(e){var t=e.component,r=e.label,c=e.customParameters;return a&&a({app:i,view:o,elementTree:u,event:n,component:t,label:r,timestamp:Date.now(),customParameters:c})}),[i,a,u,n,o])};!function(e){e.click="click",e.view="view",e.load="load",e.pageView="page-view",e.pageReactivated="page-reactivated",e.submit="submit",e.browserBack="browser-back"}(o||(o={}));var v=function(){return l(o.click)},f=function(){return l(o.submit)},s=function(){var t=l(o.pageView);return e.useCallback((function(){return t({})}),[t])},m=function(t,n){void 0===n&&(n=!0);var r,i,o=a(e.useState(n),2),u=o[0],c=o[1],l=(r=u,i=e.useRef(r),e.useEffect((function(){i.current=r}),[r]),i.current);e.useEffect((function(){var e=function(){c(!document.hidden)};return document.addEventListener("visibilitychange",e),function(){document.removeEventListener("visibilitychange",e)}}),[]),l!==u&&t(u)},p=function(e){var t=l(o.pageReactivated);m((function(e){return e&&t({})}),e)};export{c as TrackingElement,n as TrackingRoot,u as TrackingView,v as useClickTrigger,p as usePageActiveTrigger,s as usePageViewTrigger,f as useSubmitTrigger};
+import*as e from"react";var t=e.createContext({app:void 0,view:void 0,elementTree:[]}),r=function(r){var n=r.name,a=r.onDispatch,u=r.children,i=e.useMemo((function(){return{app:n,dispatch:a,elementTree:[]}}),[n,a]);return e.createElement(t.Provider,{value:i},u)},n=function(){return(n=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var a in t=arguments[r])Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a]);return e}).apply(this,arguments)};function a(e,t){var r="function"==typeof Symbol&&e[Symbol.iterator];if(!r)return e;var n,a,u=r.call(e),i=[];try{for(;(void 0===t||t-- >0)&&!(n=u.next()).done;)i.push(n.value)}catch(e){a={error:e}}finally{try{n&&!n.done&&(r=u.return)&&r.call(u)}finally{if(a)throw a.error}}return i}function u(e,t){for(var r=0,n=t.length,a=e.length;r<n;r++,a++)e[a]=t[r];return e}var i,o=function(r){var a=r.name,u=r.children,i=e.useContext(t),o=e.useMemo((function(){return n(n({},i),{view:a})}),[i,a]);return e.createElement(t.Provider,{value:o},u)},c=function(r){var i=r.name,o=r.children,c=e.useContext(t),l=e.useMemo((function(){return n(n({},c),{elementTree:u(u([],a(c.elementTree)),[i])})}),[c,i]);return e.createElement(t.Provider,{value:l},o)},l=function(r){var n=e.useContext(t),a=n.dispatch,u=n.app,i=n.view,o=n.elementTree;return e.useCallback((function(e){var t=e.component,n=e.label,c=e.customParameters;return a&&a({app:u,view:i,elementTree:o,event:r,component:t,label:n,timestamp:Date.now(),customParameters:c})}),[u,a,o,r,i])};!function(e){e.click="click",e.view="view",e.load="load",e.pageView="page-view",e.pageReactivated="page-reactivated",e.submit="submit",e.browserBack="browser-back"}(i||(i={}));var v=function(){return l(i.click)},f=function(){return l(i.submit)},s=function(){var t=l(i.pageView);return e.useCallback((function(){return t({})}),[t])},m=function(t,r){void 0===r&&(r=!0);var n,u,i=a(e.useState(r),2),o=i[0],c=i[1],l=(n=o,u=e.useRef(n),e.useEffect((function(){u.current=n}),[n]),u.current);e.useEffect((function(){var e=function(){c(!document.hidden)};return document.addEventListener("visibilitychange",e),function(){document.removeEventListener("visibilitychange",e)}}),[]),l!==o&&t(o)},d=function(e){var t=l(i.pageReactivated);m((function(e){return e&&t({})}),e)},p=function(e,t){var r=e.reduce((function(e,t){var r=t.customParameters||{};return n(n({},e),r)}),{}),a=Object.keys(r).reduce((function(e,t){var r;return n(n({},e),((r={})[t]=void 0,r))}),{});return n(n({},t),{customParameters:n(n({},a),t.customParameters),_clear:!0})};export{c as TrackingElement,r as TrackingRoot,o as TrackingView,p as getFlushedPayload,v as useClickTrigger,d as usePageActiveTrigger,s as usePageViewTrigger,f as useSubmitTrigger};

build/index.js

@@ -1,1 +0,1 @@
-"use strict";function e(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("react")),r=t.createContext({app:void 0,view:void 0,elementTree:[]}),n=function(){return(n=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var i in t=arguments[r])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e}).apply(this,arguments)};function i(e,t){var r="function"==typeof Symbol&&e[Symbol.iterator];if(!r)return e;var n,i,a=r.call(e),o=[];try{for(;(void 0===t||t-- >0)&&!(n=a.next()).done;)o.push(n.value)}catch(e){i={error:e}}finally{try{n&&!n.done&&(r=a.return)&&r.call(a)}finally{if(i)throw i.error}}return o}function a(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(i(arguments[t]));return e}var o,u=function(e){var n=t.useContext(r),i=n.dispatch,a=n.app,o=n.view,u=n.elementTree;return t.useCallback((function(t){var r=t.component,n=t.label,c=t.customParameters;return i&&i({app:a,view:o,elementTree:u,event:e,component:r,label:n,timestamp:Date.now(),customParameters:c})}),[a,i,u,e,o])};!function(e){e.click="click",e.view="view",e.load="load",e.pageView="page-view",e.pageReactivated="page-reactivated",e.submit="submit",e.browserBack="browser-back"}(o||(o={}));var c=function(e,r){void 0===r&&(r=!0);var n,a,o=i(t.useState(r),2),u=o[0],c=o[1],l=(n=u,a=t.useRef(n),t.useEffect((function(){a.current=n}),[n]),a.current);t.useEffect((function(){var e=function(){c(!document.hidden)};return document.addEventListener("visibilitychange",e),function(){document.removeEventListener("visibilitychange",e)}}),[]),l!==u&&e(u)};exports.TrackingElement=function(e){var i=e.name,o=e.children,u=t.useContext(r),c=t.useMemo((function(){return n(n({},u),{elementTree:a(u.elementTree,[i])})}),[u,i]);return t.createElement(r.Provider,{value:c},o)},exports.TrackingRoot=function(e){var n=e.name,i=e.onDispatch,a=e.children,o=t.useMemo((function(){return{app:n,dispatch:i,elementTree:[]}}),[n,i]);return t.createElement(r.Provider,{value:o},a)},exports.TrackingView=function(e){var i=e.name,a=e.children,o=t.useContext(r),u=t.useMemo((function(){return n(n({},o),{view:i})}),[o,i]);return t.createElement(r.Provider,{value:u},a)},exports.useClickTrigger=function(){return u(o.click)},exports.usePageActiveTrigger=function(e){var t=u(o.pageReactivated);c((function(e){return e&&t({})}),e)},exports.usePageViewTrigger=function(){var e=u(o.pageView);return t.useCallback((function(){return e({})}),[e])},exports.useSubmitTrigger=function(){return u(o.submit)};
+"use strict";function e(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}Object.defineProperty(exports,"__esModule",{value:!0});var r=e(require("react")),t=r.createContext({app:void 0,view:void 0,elementTree:[]}),n=function(){return(n=Object.assign||function(e){for(var r,t=1,n=arguments.length;t<n;t++)for(var u in r=arguments[t])Object.prototype.hasOwnProperty.call(r,u)&&(e[u]=r[u]);return e}).apply(this,arguments)};function u(e,r){var t="function"==typeof Symbol&&e[Symbol.iterator];if(!t)return e;var n,u,a=t.call(e),i=[];try{for(;(void 0===r||r-- >0)&&!(n=a.next()).done;)i.push(n.value)}catch(e){u={error:e}}finally{try{n&&!n.done&&(t=a.return)&&t.call(a)}finally{if(u)throw u.error}}return i}function a(e,r){for(var t=0,n=r.length,u=e.length;t<n;t++,u++)e[u]=r[t];return e}var i,o=function(e){var n=r.useContext(t),u=n.dispatch,a=n.app,i=n.view,o=n.elementTree;return r.useCallback((function(r){var t=r.component,n=r.label,c=r.customParameters;return u&&u({app:a,view:i,elementTree:o,event:e,component:t,label:n,timestamp:Date.now(),customParameters:c})}),[a,u,o,e,i])};!function(e){e.click="click",e.view="view",e.load="load",e.pageView="page-view",e.pageReactivated="page-reactivated",e.submit="submit",e.browserBack="browser-back"}(i||(i={}));var c=function(e,t){void 0===t&&(t=!0);var n,a,i=u(r.useState(t),2),o=i[0],c=i[1],s=(n=o,a=r.useRef(n),r.useEffect((function(){a.current=n}),[n]),a.current);r.useEffect((function(){var e=function(){c(!document.hidden)};return document.addEventListener("visibilitychange",e),function(){document.removeEventListener("visibilitychange",e)}}),[]),s!==o&&e(o)};exports.TrackingElement=function(e){var i=e.name,o=e.children,c=r.useContext(t),s=r.useMemo((function(){return n(n({},c),{elementTree:a(a([],u(c.elementTree)),[i])})}),[c,i]);return r.createElement(t.Provider,{value:s},o)},exports.TrackingRoot=function(e){var n=e.name,u=e.onDispatch,a=e.children,i=r.useMemo((function(){return{app:n,dispatch:u,elementTree:[]}}),[n,u]);return r.createElement(t.Provider,{value:i},a)},exports.TrackingView=function(e){var u=e.name,a=e.children,i=r.useContext(t),o=r.useMemo((function(){return n(n({},i),{view:u})}),[i,u]);return r.createElement(t.Provider,{value:o},a)},exports.getFlushedPayload=function(e,r){var t=e.reduce((function(e,r){var t=r.customParameters||{};return n(n({},e),t)}),{}),u=Object.keys(t).reduce((function(e,r){var t;return n(n({},e),((t={})[r]=void 0,t))}),{});return n(n({},r),{customParameters:n(n({},u),r.customParameters),_clear:!0})},exports.useClickTrigger=function(){return o(i.click)},exports.usePageActiveTrigger=function(e){var r=o(i.pageReactivated);c((function(e){return e&&r({})}),e)},exports.usePageViewTrigger=function(){var e=o(i.pageView);return r.useCallback((function(){return e({})}),[e])},exports.useSubmitTrigger=function(){return o(i.submit)};

package.json

 {
   "name": "@sumup/collector",
   "sideEffects": false,
-  "version": "1.1.1",
+  "version": "1.2.0",
   "main": "build/index.js",
@@ -26,30 +26,26 @@ "module": "build/index.es.js",
   },
+  "dependencies": {
+    "tti-polyfill": "^0.2.2"
+  },
   "devDependencies": {
-    "@sumup/foundry": "^3.1.3",
-    "@testing-library/jest-dom": "^5.11.9",
-    "@testing-library/react": "^11.2.5",
-    "@testing-library/react-hooks": "^5.1.0",
-    "@types/jest": "^26.0.21",
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.2",
+    "@sumup/foundry": "^3.5.1",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^11.2.7",
+    "@testing-library/react-hooks": "^7.0.0",
+    "@types/jest": "^26.0.23",
+    "@types/react": "^17.0.11",
+    "@types/react-dom": "^17.0.8",
     "cz-conventional-changelog": "3.3.0",
     "jest": "^26.6.3",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-test-renderer": "^17.0.1",
-    "rollup": "^2.42.2",
-    "rollup-plugin-commonjs": "^10.0.2",
-    "rollup-plugin-json": "^4.0.0",
-    "rollup-plugin-node-resolve": "^5.2.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-test-renderer": "^17.0.2",
+    "rollup": "^2.52.2",
     "rollup-plugin-peer-deps-external": "^2.2.0",
-    "rollup-plugin-polyfill": "^3.0.0",
-    "rollup-plugin-replace": "^2.2.0",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.30.0",
-    "ts-jest": "^26.5.4",
-    "typescript": "^4.1.5"
+    "ts-jest": "^26.5.6",
+    "tslib": "^2.3.0",
+    "typescript": "^4.3.4"
   },
-  "dependencies": {
-    "tti-polyfill": "^0.2.2"
-  },
   "peerDependencies": {
@@ -56,0 +52,0 @@ "react": ">=16.8.0 <18.0.0",

README.md

@@ -26,2 +26,4 @@ <div align="center">
   - [usePageViewTrigger](#usepageviewtrigger)
+- [Plugin](#plugin)
+  - [getFlushedPayload](#getflushedpayload)
 - [Code of Conduct (CoC)](#code-of-conduct-coc)
@@ -377,2 +379,31 @@ - [Maintainers](#maintainers)
 
+## Plugin
+
+Helpers for specific issue.
+
+### getFlushedPayLoad
+
+If you are using Google Tag Manager(GTM) as your dispatch consumer, there is a known behaviour that GTM persists variables until they got flushed. For a non-nested event, a fixed schema with default undefined value flushes unused variable thus they don't pollute states for the next event. For a designed nested variable, eg, `customParameters` in Collector, a nested flush helps to keep states clean. In this plugin, an aggregated custom parameters based on payload history will be set as undefined and flushed by GTM.
+
+You can find an example code here.
+
+```jsx
+import React from 'react';
+import { getFlushedPayload } from '@sumup/collector';
+
+function App() {
+ const handleDispatch = React.useCallback((event) => {
+   // getFlushedPayload return a new event with flushed payload
+   const flushedEvent = getFlushedPayload(window.dataLayer, event);
+   window.dataLayer.push(flushedEvent)
+ }, []);
+
+ return (
+   <TrackingRoot name="app" onDispatch={handleDispatch}>
+     ...
+   <TrackingRoot>
+ );
+}
+```
+
 ## Code of Conduct (CoC)
@@ -379,0 +410,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

60605

increased by7.31%

Dev dependency count

19

decreased by-17.39%

Number of package files

42

increased by7.69%

Lines of code

678

increased by9.89%

Number of lines in readme file

426

increased by7.85%

No dependency changes