@guardian/commercial-core 0.23.0 → 0.26.1

package/dist/cjs/ad-targeting-youtube.d.ts

@@ -0,0 +1,6 @@
+import type { ConsentState } from '@guardian/consent-management-platform/dist/types';
+import type { AdsConfig, AdsConfigDisabled, MaybeArray } from './types';
+declare type CustomParams = Record<string, MaybeArray<string | number | boolean>>;
+declare const disabledAds: AdsConfigDisabled;
+declare const buildAdsConfigWithConsent: (isAdFreeUser: boolean, adUnit: string, customParamsToMerge: CustomParams, consentState: ConsentState) => AdsConfig;
+export { buildAdsConfigWithConsent, disabledAds };

package/dist/cjs/ad-targeting-youtube.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.disabledAds = exports.buildAdsConfigWithConsent = void 0;
+const libs_1 = require("@guardian/libs");
+const can_use_dom_1 = require("./lib/can-use-dom");
+const construct_query_1 = require("./lib/construct-query");
+const permutive_1 = require("./permutive");
+const buildCustomParamsFromCookies = () => (0, can_use_dom_1.canUseDom)()
+    ? {
+        permutive: (0, permutive_1.getPermutivePFPSegments)(),
+        si: (0, libs_1.getCookie)({ name: 'GU_U' }) ? 't' : 'f',
+    }
+    : {};
+const buildAdsConfig = (cmpConsent, adUnit, customParams) => {
+    const mergedCustomParams = {
+        ...customParams,
+        ...buildCustomParamsFromCookies(),
+    };
+    const defaultAdsConfig = {
+        adTagParameters: {
+            iu: adUnit,
+            // TODO: Why are we double encoding? Following Frontend process for now
+            cust_params: encodeURIComponent((0, construct_query_1.constructQuery)(mergedCustomParams)),
+        },
+    };
+    if (cmpConsent.ccpa) {
+        const canTarget = !cmpConsent.ccpa.doNotSell;
+        return {
+            ...defaultAdsConfig,
+            restrictedDataProcessor: !canTarget,
+        };
+    }
+    if (cmpConsent.aus) {
+        const canTarget = cmpConsent.aus.personalisedAdvertising;
+        return {
+            ...defaultAdsConfig,
+            restrictedDataProcessor: !canTarget,
+        };
+    }
+    if (cmpConsent.tcfv2) {
+        const tcfData = cmpConsent.tcfv2;
+        const canTarget = Object.values(tcfData.consents).every(Boolean);
+        const mergedAdTagParameters = {
+            ...defaultAdsConfig.adTagParameters,
+            cmpGdpr: tcfData.gdprApplies ? 1 : 0,
+            cmpGvcd: tcfData.addtlConsent,
+            cmpVcd: tcfData.tcString,
+        };
+        return {
+            adTagParameters: mergedAdTagParameters,
+            nonPersonalizedAd: !canTarget,
+        };
+    }
+    // Shouldn't happen but handle if no matching framework
+    return disabledAds;
+};
+const disabledAds = { disableAds: true };
+exports.disabledAds = disabledAds;
+const buildAdsConfigWithConsent = (isAdFreeUser, adUnit, customParamsToMerge, consentState) => {
+    if (isAdFreeUser) {
+        return disabledAds;
+    }
+    return buildAdsConfig(consentState, adUnit, customParamsToMerge);
+};
+exports.buildAdsConfigWithConsent = buildAdsConfigWithConsent;

package/dist/cjs/constants/index.d.ts

@@ -0,0 +1,2 @@
+export { PREBID_TIMEOUT } from './prebidTimeout';
+export { TOP_ABOVE_NAV_HEIGHT } from './topAboveNavHeight';

package/dist/cjs/constants/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TOP_ABOVE_NAV_HEIGHT = exports.PREBID_TIMEOUT = void 0;
+var prebidTimeout_1 = require("./prebidTimeout");
+Object.defineProperty(exports, "PREBID_TIMEOUT", { enumerable: true, get: function () { return prebidTimeout_1.PREBID_TIMEOUT; } });
+var topAboveNavHeight_1 = require("./topAboveNavHeight");
+Object.defineProperty(exports, "TOP_ABOVE_NAV_HEIGHT", { enumerable: true, get: function () { return topAboveNavHeight_1.TOP_ABOVE_NAV_HEIGHT; } });

package/dist/cjs/constants/prebidTimeout.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Unit: milliseconds.
+ *
+ * This value is currently being investigated.
+ */
+export declare const PREBID_TIMEOUT = 1500;

package/dist/cjs/constants/prebidTimeout.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREBID_TIMEOUT = void 0;
+/**
+ * Unit: milliseconds.
+ *
+ * This value is currently being investigated.
+ */
+exports.PREBID_TIMEOUT = 1500;
+/*
+
+cc @chrislomaxjones
+
+*/

package/dist/cjs/constants/topAboveNavHeight.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Unit: pixels.
+ *
+ * The majority of ads in the top banner are 250px high. We ran an experiment
+ * in October 2021 to set the minimum height to 250, and let smaller ads be
+ * centred in the space. We did not process with this option, as it had a
+ * negative impact on viewability and revenue.
+ *
+ */
+export declare const TOP_ABOVE_NAV_HEIGHT = 90;

package/dist/cjs/constants/topAboveNavHeight.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TOP_ABOVE_NAV_HEIGHT = void 0;
+/**
+ * Unit: pixels.
+ *
+ * The majority of ads in the top banner are 250px high. We ran an experiment
+ * in October 2021 to set the minimum height to 250, and let smaller ads be
+ * centred in the space. We did not process with this option, as it had a
+ * negative impact on viewability and revenue.
+ *
+ */
+exports.TOP_ABOVE_NAV_HEIGHT = 90;
+/*
+Further Notes
+=============
+
+There was a very positive impact on CLS (Cumulative Layout Shift), which is good
+for UX. However, the negative commercial impact meant we kept a height of 90px.
+
+We ran a 1% server-side experiment to measure CLS when dedicating 250px for the
+topAboveNav. The experiment showed this change has a significant positive impact
+on CLS, and moves average CLS for the page from 0.09 to 0.07 (a 26% improvement
+from this one change). The other way we sliced the data was to look at the
+percent of pages that Google categorised as having 'good', 'needs improvement'
+or 'poor' CLS scores. The viewability for the page dropped by about 1%, and for
+that specific slot, by 4-6%.
+
+When the experiment ran, the breakdown was as follows:
+
+- 74% of our pages have a “good” CLS score
+- 12% have a “poor” CLS score.
+- 70% viewability for top-above-nav
+
+This change resulted in:
+
+- 84% “good”
+- 4% “poor”
+- 64% viewability for top-above-nav
+
+Relevant Pull Requests
+----------------------
+
+- https://github.com/guardian/frontend/pull/24095
+- https://github.com/guardian/dotcom-rendering/pull/3497
+- https://github.com/guardian/dotcom-rendering/pull/3340
+
+*/

package/dist/cjs/index.d.ts

@@ -11,3 +11,5 @@ export { adSizes } from './ad-sizes';
 export type { SizeKeys, AdSizeString, AdSize } from './ad-sizes';
 export { isAdBlockInUse } from './detectAdBlocker';
 export { clearPermutiveSegments, getPermutiveSegments, getPermutivePFPSegments, } from './permutive';
+export { buildAdsConfigWithConsent, disabledAds } from './ad-targeting-youtube';
+export type { AdsConfig, AdsConfigBasic, AdsConfigDisabled, AdTargetingBuilder, CustomParams, } from './types';

package/dist/cjs/index.js

@@ -1,7 +1,7 @@
 "use strict";
 /* istanbul ignore file -- there's no point check this for test coverage */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getPermutivePFPSegments = exports.getPermutiveSegments = exports.clearPermutiveSegments = exports.isAdBlockInUse = exports.adSizes = exports.sendCommercialMetrics = exports.EventTimer = exports.remarketing = exports.inizio = exports.twitter = exports.fbPixel = exports.permutive = exports.ias = void 0;
+exports.disabledAds = exports.buildAdsConfigWithConsent = exports.getPermutivePFPSegments = exports.getPermutiveSegments = exports.clearPermutiveSegments = exports.isAdBlockInUse = exports.adSizes = exports.sendCommercialMetrics = exports.EventTimer = exports.remarketing = exports.inizio = exports.twitter = exports.fbPixel = exports.permutive = exports.ias = void 0;
 var ias_1 = require("./third-party-tags/ias");
 Object.defineProperty(exports, "ias", { enumerable: true, get: function () { return ias_1.ias; } });
 var permutive_1 = require("./third-party-tags/permutive");
@@ -26,3 +26,6 @@ var permutive_2 = require("./permutive");
 Object.defineProperty(exports, "clearPermutiveSegments", { enumerable: true, get: function () { return permutive_2.clearPermutiveSegments; } });
 Object.defineProperty(exports, "getPermutiveSegments", { enumerable: true, get: function () { return permutive_2.getPermutiveSegments; } });
 Object.defineProperty(exports, "getPermutivePFPSegments", { enumerable: true, get: function () { return permutive_2.getPermutivePFPSegments; } });
+var ad_targeting_youtube_1 = require("./ad-targeting-youtube");
+Object.defineProperty(exports, "buildAdsConfigWithConsent", { enumerable: true, get: function () { return ad_targeting_youtube_1.buildAdsConfigWithConsent; } });
+Object.defineProperty(exports, "disabledAds", { enumerable: true, get: function () { return ad_targeting_youtube_1.disabledAds; } });

package/dist/cjs/lib/can-use-dom.d.ts

@@ -0,0 +1,2 @@
+declare const canUseDom: () => boolean;
+export { canUseDom };

package/dist/cjs/lib/can-use-dom.js

@@ -0,0 +1,9 @@
+"use strict";
+// Based on https://github.com/JedWatson/exenv
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.canUseDom = void 0;
+const canUseDom = () => !!(typeof window !== 'undefined' &&
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- ensure we check at runtime
+    window.document &&
+    window.document.createElement);
+exports.canUseDom = canUseDom;

package/dist/cjs/lib/construct-query.d.ts

@@ -0,0 +1,3 @@
+import type { MaybeArray } from '../types';
+declare const constructQuery: (query: Record<string, MaybeArray<string | number | boolean>>) => string;
+export { constructQuery };

package/dist/cjs/lib/construct-query.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.constructQuery = void 0;
+const constructQuery = (query) => Object.entries(query)
+    .map(([key, value]) => {
+    const queryValue = Array.isArray(value)
+        ? value.map((v) => encodeURIComponent(v)).join(',')
+        : encodeURIComponent(value);
+    return `${key}=${queryValue}`;
+})
+    .join('&');
+exports.constructQuery = constructQuery;

package/dist/cjs/permutive.js

@@ -6,13 +6,19 @@ const PERMUTIVE_KEY = `_papns`;
 const PERMUTIVE_PFP_KEY = `_pdfps`;
 const getSegments = (key) => {
     try {
-        return JSON.parse(libs_1.storage.local.getRaw(key) ?? '[]')
+        const rawSegments = libs_1.storage.local.getRaw(key);
+        const segments = rawSegments
+            ? JSON.parse(rawSegments)
+            : null;
+        if (!Array.isArray(segments))
+            return [];
+        return segments
             .slice(0, 250)
             .map((s) => Number.parseInt(s, 10))
             .filter((n) => typeof n === 'number' && !Number.isNaN(n))
             .map(String);
     }
-    catch (e) {
+    catch (err) {
         return [];
     }
 };

package/dist/cjs/types.d.ts

@@ -29,3 +29,28 @@ export declare type GoogleTrackConversionObject = {
     google_custom_params: GoogleTagParams;
     google_remarketing_only: boolean;
 };
+export declare type MaybeArray<T> = T | T[];
+export declare type CustomParams = Record<string, MaybeArray<string | number | boolean>>;
+export declare type AdsConfigDisabled = {
+    disableAds: true;
+};
+export declare type AdsConfigBasic = {
+    adTagParameters: {
+        iu: string;
+        cust_params: string;
+    };
+};
+export declare type AdsConfigCCPAorAus = AdsConfigBasic & {
+    restrictedDataProcessor: boolean;
+};
+export declare type AdsConfigTCFV2 = AdsConfigBasic & {
+    adTagParameters: {
+        cmpGdpr: number;
+        cmpVcd: string;
+        cmpGvcd: string;
+    };
+    nonPersonalizedAd: boolean;
+};
+export declare type AdsConfigEnabled = AdsConfigBasic | AdsConfigCCPAorAus | AdsConfigTCFV2;
+export declare type AdsConfig = AdsConfigEnabled | AdsConfigDisabled;
+export declare type AdTargetingBuilder = () => Promise<AdsConfig>;

package/dist/esm/ad-targeting-youtube.d.ts

@@ -0,0 +1,6 @@
+import type { ConsentState } from '@guardian/consent-management-platform/dist/types';
+import type { AdsConfig, AdsConfigDisabled, MaybeArray } from './types';
+declare type CustomParams = Record<string, MaybeArray<string | number | boolean>>;
+declare const disabledAds: AdsConfigDisabled;
+declare const buildAdsConfigWithConsent: (isAdFreeUser: boolean, adUnit: string, customParamsToMerge: CustomParams, consentState: ConsentState) => AdsConfig;
+export { buildAdsConfigWithConsent, disabledAds };

package/dist/esm/ad-targeting-youtube.js

@@ -0,0 +1,61 @@
+import { getCookie } from '@guardian/libs';
+import { canUseDom } from './lib/can-use-dom';
+import { constructQuery } from './lib/construct-query';
+import { getPermutivePFPSegments } from './permutive';
+const buildCustomParamsFromCookies = () => canUseDom()
+    ? {
+        permutive: getPermutivePFPSegments(),
+        si: getCookie({ name: 'GU_U' }) ? 't' : 'f',
+    }
+    : {};
+const buildAdsConfig = (cmpConsent, adUnit, customParams) => {
+    const mergedCustomParams = {
+        ...customParams,
+        ...buildCustomParamsFromCookies(),
+    };
+    const defaultAdsConfig = {
+        adTagParameters: {
+            iu: adUnit,
+            // TODO: Why are we double encoding? Following Frontend process for now
+            cust_params: encodeURIComponent(constructQuery(mergedCustomParams)),
+        },
+    };
+    if (cmpConsent.ccpa) {
+        const canTarget = !cmpConsent.ccpa.doNotSell;
+        return {
+            ...defaultAdsConfig,
+            restrictedDataProcessor: !canTarget,
+        };
+    }
+    if (cmpConsent.aus) {
+        const canTarget = cmpConsent.aus.personalisedAdvertising;
+        return {
+            ...defaultAdsConfig,
+            restrictedDataProcessor: !canTarget,
+        };
+    }
+    if (cmpConsent.tcfv2) {
+        const tcfData = cmpConsent.tcfv2;
+        const canTarget = Object.values(tcfData.consents).every(Boolean);
+        const mergedAdTagParameters = {
+            ...defaultAdsConfig.adTagParameters,
+            cmpGdpr: tcfData.gdprApplies ? 1 : 0,
+            cmpGvcd: tcfData.addtlConsent,
+            cmpVcd: tcfData.tcString,
+        };
+        return {
+            adTagParameters: mergedAdTagParameters,
+            nonPersonalizedAd: !canTarget,
+        };
+    }
+    // Shouldn't happen but handle if no matching framework
+    return disabledAds;
+};
+const disabledAds = { disableAds: true };
+const buildAdsConfigWithConsent = (isAdFreeUser, adUnit, customParamsToMerge, consentState) => {
+    if (isAdFreeUser) {
+        return disabledAds;
+    }
+    return buildAdsConfig(consentState, adUnit, customParamsToMerge);
+};
+export { buildAdsConfigWithConsent, disabledAds };

package/dist/esm/constants/index.d.ts

@@ -0,0 +1,2 @@
+export { PREBID_TIMEOUT } from './prebidTimeout';
+export { TOP_ABOVE_NAV_HEIGHT } from './topAboveNavHeight';

package/dist/esm/constants/index.js

@@ -0,0 +1,2 @@
+export { PREBID_TIMEOUT } from './prebidTimeout';
+export { TOP_ABOVE_NAV_HEIGHT } from './topAboveNavHeight';

package/dist/esm/constants/prebidTimeout.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Unit: milliseconds.
+ *
+ * This value is currently being investigated.
+ */
+export declare const PREBID_TIMEOUT = 1500;

package/dist/esm/constants/prebidTimeout.js

@@ -0,0 +1,11 @@
+/**
+ * Unit: milliseconds.
+ *
+ * This value is currently being investigated.
+ */
+export const PREBID_TIMEOUT = 1500;
+/*
+
+cc @chrislomaxjones
+
+*/

package/dist/esm/constants/topAboveNavHeight.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Unit: pixels.
+ *
+ * The majority of ads in the top banner are 250px high. We ran an experiment
+ * in October 2021 to set the minimum height to 250, and let smaller ads be
+ * centred in the space. We did not process with this option, as it had a
+ * negative impact on viewability and revenue.
+ *
+ */
+export declare const TOP_ABOVE_NAV_HEIGHT = 90;

package/dist/esm/constants/topAboveNavHeight.js

@@ -0,0 +1,45 @@
+/**
+ * Unit: pixels.
+ *
+ * The majority of ads in the top banner are 250px high. We ran an experiment
+ * in October 2021 to set the minimum height to 250, and let smaller ads be
+ * centred in the space. We did not process with this option, as it had a
+ * negative impact on viewability and revenue.
+ *
+ */
+export const TOP_ABOVE_NAV_HEIGHT = 90;
+/*
+Further Notes
+=============
+
+There was a very positive impact on CLS (Cumulative Layout Shift), which is good
+for UX. However, the negative commercial impact meant we kept a height of 90px.
+
+We ran a 1% server-side experiment to measure CLS when dedicating 250px for the
+topAboveNav. The experiment showed this change has a significant positive impact
+on CLS, and moves average CLS for the page from 0.09 to 0.07 (a 26% improvement
+from this one change). The other way we sliced the data was to look at the
+percent of pages that Google categorised as having 'good', 'needs improvement'
+or 'poor' CLS scores. The viewability for the page dropped by about 1%, and for
+that specific slot, by 4-6%.
+
+When the experiment ran, the breakdown was as follows:
+
+- 74% of our pages have a “good” CLS score
+- 12% have a “poor” CLS score.
+- 70% viewability for top-above-nav
+
+This change resulted in:
+
+- 84% “good”
+- 4% “poor”
+- 64% viewability for top-above-nav
+
+Relevant Pull Requests
+----------------------
+
+- https://github.com/guardian/frontend/pull/24095
+- https://github.com/guardian/dotcom-rendering/pull/3497
+- https://github.com/guardian/dotcom-rendering/pull/3340
+
+*/

package/dist/esm/index.d.ts

@@ -11,3 +11,5 @@ export { adSizes } from './ad-sizes';
 export type { SizeKeys, AdSizeString, AdSize } from './ad-sizes';
 export { isAdBlockInUse } from './detectAdBlocker';
 export { clearPermutiveSegments, getPermutiveSegments, getPermutivePFPSegments, } from './permutive';
+export { buildAdsConfigWithConsent, disabledAds } from './ad-targeting-youtube';
+export type { AdsConfig, AdsConfigBasic, AdsConfigDisabled, AdTargetingBuilder, CustomParams, } from './types';

package/dist/esm/index.js

@@ -10,3 +10,4 @@ export { sendCommercialMetrics } from './sendCommercialMetrics';
 export { adSizes } from './ad-sizes';
 export { isAdBlockInUse } from './detectAdBlocker';
 export { clearPermutiveSegments, getPermutiveSegments, getPermutivePFPSegments, } from './permutive';
+export { buildAdsConfigWithConsent, disabledAds } from './ad-targeting-youtube';

package/dist/esm/lib/can-use-dom.d.ts

@@ -0,0 +1,2 @@
+declare const canUseDom: () => boolean;
+export { canUseDom };

package/dist/esm/lib/can-use-dom.js

@@ -0,0 +1,6 @@
+// Based on https://github.com/JedWatson/exenv
+const canUseDom = () => !!(typeof window !== 'undefined' &&
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- ensure we check at runtime
+    window.document &&
+    window.document.createElement);
+export { canUseDom };

package/dist/esm/lib/construct-query.d.ts

@@ -0,0 +1,3 @@
+import type { MaybeArray } from '../types';
+declare const constructQuery: (query: Record<string, MaybeArray<string | number | boolean>>) => string;
+export { constructQuery };

package/dist/esm/lib/construct-query.js

@@ -0,0 +1,9 @@
+const constructQuery = (query) => Object.entries(query)
+    .map(([key, value]) => {
+    const queryValue = Array.isArray(value)
+        ? value.map((v) => encodeURIComponent(v)).join(',')
+        : encodeURIComponent(value);
+    return `${key}=${queryValue}`;
+})
+    .join('&');
+export { constructQuery };

package/dist/esm/permutive.js

@@ -3,13 +3,19 @@ const PERMUTIVE_KEY = `_papns`;
 const PERMUTIVE_PFP_KEY = `_pdfps`;
 const getSegments = (key) => {
     try {
-        return JSON.parse(storage.local.getRaw(key) ?? '[]')
+        const rawSegments = storage.local.getRaw(key);
+        const segments = rawSegments
+            ? JSON.parse(rawSegments)
+            : null;
+        if (!Array.isArray(segments))
+            return [];
+        return segments
             .slice(0, 250)
             .map((s) => Number.parseInt(s, 10))
             .filter((n) => typeof n === 'number' && !Number.isNaN(n))
             .map(String);
     }
-    catch (e) {
+    catch (err) {
         return [];
     }
 };

package/dist/esm/types.d.ts

@@ -29,3 +29,28 @@ export declare type GoogleTrackConversionObject = {
     google_custom_params: GoogleTagParams;
     google_remarketing_only: boolean;
 };
+export declare type MaybeArray<T> = T | T[];
+export declare type CustomParams = Record<string, MaybeArray<string | number | boolean>>;
+export declare type AdsConfigDisabled = {
+    disableAds: true;
+};
+export declare type AdsConfigBasic = {
+    adTagParameters: {
+        iu: string;
+        cust_params: string;
+    };
+};
+export declare type AdsConfigCCPAorAus = AdsConfigBasic & {
+    restrictedDataProcessor: boolean;
+};
+export declare type AdsConfigTCFV2 = AdsConfigBasic & {
+    adTagParameters: {
+        cmpGdpr: number;
+        cmpVcd: string;
+        cmpGvcd: string;
+    };
+    nonPersonalizedAd: boolean;
+};
+export declare type AdsConfigEnabled = AdsConfigBasic | AdsConfigCCPAorAus | AdsConfigTCFV2;
+export declare type AdsConfig = AdsConfigEnabled | AdsConfigDisabled;
+export declare type AdTargetingBuilder = () => Promise<AdsConfig>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardian/commercial-core",
-  "version": "0.23.0",
+  "version": "0.26.1",
   "description": "Guardian advertising business logic",
   "homepage": "https://github.com/guardian/commercial-core#readme",
   "bugs": {
@@ -42,6 +42,7 @@
   "devDependencies": {
     "@commitlint/cli": "^13",
     "@commitlint/config-conventional": "^13",
+    "@guardian/consent-management-platform": "^8",
     "@guardian/eslint-config-typescript": "^0.7",
     "@guardian/libs": "^3",
     "@guardian/prettier": "^0.7",
@@ -58,7 +59,7 @@
     "eslint-config-prettier": "^8",
     "eslint-plugin-eslint-comments": "^3",
     "eslint-plugin-import": "^2",
-    "eslint-plugin-jest": "^24",
+    "eslint-plugin-jest": "^25",
     "eslint-plugin-prettier": "^4",
     "husky": "^7",
     "jest": "^27",