@guardian/commercial-core 4.0.0 → 4.1.0

package/dist/cjs/ad-sizes.d.ts

@@ -1,30 +1,45 @@
 declare type AdSizeString = 'fluid' | `${number},${number}`;
-declare type AdSize = Readonly<{
-    width: number;
-    height: number;
-    toString: () => AdSizeString;
-}>;
-declare type SizeKeys = '160x600' | '300x1050' | '300x250' | '300x600' | '728x90' | '970x250' | 'billboard' | 'empty' | 'fabric' | 'fluid' | 'googleCard' | 'halfPage' | 'inlineMerchandising' | 'leaderboard' | 'merchandising' | 'merchandisingHigh' | 'merchandisingHighAdFeature' | 'mobilesticky' | 'mpu' | 'outOfPage' | 'outstreamDesktop' | 'outstreamGoogleDesktop' | 'outstreamMobile' | 'portrait' | 'skyscraper';
-interface SizeMapping {
-    mobile?: AdSize[];
-    desktop?: AdSize[];
-    phablet?: AdSize[];
-    tablet?: AdSize[];
-}
-interface SlotSizeMappings {
-    right: SizeMapping;
-    comments: SizeMapping;
-    'top-above-nav': SizeMapping;
-    mostpop: SizeMapping;
-    'merchandising-high': SizeMapping;
-    merchandising: SizeMapping;
-    survey: SizeMapping;
+/**
+ * Store ad sizes in a way that is compatible with google-tag but also accessible via
+ * more semantic `width`/`height` properties and keep things readonly.
+ *
+ * example:
+ * const size = new AdSize([300, 250]);
+ *
+ * size.width === 300; // true
+ * size[0] === 300; // true
+ *
+ * size.height === 250; // true
+ * size[1] === 250; // true
+ *
+ * size[0] = 200; // throws error
+ * size.width = 200; // throws error
+ *
+ */
+declare class AdSize extends Array<number> {
+    readonly [0]: number;
+    readonly [1]: number;
+    constructor([width, height]: [number, number]);
+    toString(): AdSizeString;
+    get width(): number;
+    get height(): number;
 }
+declare type SizeKeys = '160x600' | '300x1050' | '300x250' | '300x600' | '728x90' | '970x250' | 'billboard' | 'empty' | 'fabric' | 'fluid' | 'googleCard' | 'halfPage' | 'inlineMerchandising' | 'leaderboard' | 'merchandising' | 'merchandisingHigh' | 'merchandisingHighAdFeature' | 'mobilesticky' | 'mpu' | 'outOfPage' | 'outstreamDesktop' | 'outstreamGoogleDesktop' | 'outstreamMobile' | 'portrait' | 'skyscraper';
+declare type SlotName = 'right' | 'comments' | 'top-above-nav' | 'mostpop' | 'merchandising' | 'merchandising-high' | 'survey';
+declare type Breakpoint = 'mobile' | 'desktop' | 'phablet' | 'tablet';
+declare type SizeMapping = Partial<Record<Breakpoint, AdSize[]>>;
+declare type SlotSizeMappings = Record<SlotName, SizeMapping>;
+declare const createAdSize: (width: number, height: number) => AdSize;
 declare const adSizes: Record<SizeKeys, AdSize>;
+/**
+ * mark: 432b3a46-90c1-4573-90d3-2400b51af8d0
+ * Some of these may or may not need to be synced for with the sizes in ./create-ad-slot.ts
+ * these were originally from DCR, create-ad-slot.ts ones were in frontend.
+ **/
 declare const slotSizeMappings: SlotSizeMappings;
 declare const getAdSize: (size: SizeKeys) => AdSize;
 export declare const _: {
     createAdSize: (width: number, height: number) => AdSize;
 };
-export type { AdSizeString, AdSize, SizeKeys, SizeMapping };
-export { adSizes, getAdSize, slotSizeMappings };
+export type { AdSizeString, AdSize, SizeKeys, SizeMapping, SlotSizeMappings, SlotName, };
+export { adSizes, getAdSize, slotSizeMappings, createAdSize };

package/dist/cjs/ad-sizes.js

@@ -1,14 +1,44 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.slotSizeMappings = exports.getAdSize = exports.adSizes = exports._ = void 0;
+exports.createAdSize = exports.slotSizeMappings = exports.getAdSize = exports.adSizes = exports._ = void 0;
+/**
+ * Store ad sizes in a way that is compatible with google-tag but also accessible via
+ * more semantic `width`/`height` properties and keep things readonly.
+ *
+ * example:
+ * const size = new AdSize([300, 250]);
+ *
+ * size.width === 300; // true
+ * size[0] === 300; // true
+ *
+ * size.height === 250; // true
+ * size[1] === 250; // true
+ *
+ * size[0] = 200; // throws error
+ * size.width = 200; // throws error
+ *
+ */
+class AdSize extends Array {
+    constructor([width, height]) {
+        super();
+        this.push(width, height);
+    }
+    toString() {
+        return this.width === 0 && this.height === 0
+            ? 'fluid'
+            : `${this.width},${this.height}`;
+    }
+    get width() {
+        return this[0];
+    }
+    get height() {
+        return this[1];
+    }
+}
 const createAdSize = (width, height) => {
-    const toString = () => width === 0 && height === 0 ? 'fluid' : `${width},${height}`;
-    return Object.freeze({
-        width,
-        height,
-        toString,
-    });
+    return new AdSize([width, height]);
 };
+exports.createAdSize = createAdSize;
 const adSizesPartial = {
     // standard ad sizes
     billboard: createAdSize(970, 250),
@@ -43,6 +73,11 @@ const adSizes = {
     '160x600': adSizesPartial.skyscraper,
 };
 exports.adSizes = adSizes;
+/**
+ * mark: 432b3a46-90c1-4573-90d3-2400b51af8d0
+ * Some of these may or may not need to be synced for with the sizes in ./create-ad-slot.ts
+ * these were originally from DCR, create-ad-slot.ts ones were in frontend.
+ **/
 const slotSizeMappings = {
     right: {
         mobile: [

package/dist/cjs/create-ad-slot.js

@@ -28,18 +28,11 @@ const commonSizeMappings = {
         ad_sizes_1.adSizes.fluid,
     ],
 };
-/*
-
-    mark: 432b3a46-90c1-4573-90d3-2400b51af8d0
-
-    The ad sizes which are hardcoded here are also hardcoded in the source code of
-    dotcom-rendering.
-
-    If/when this file is modified, please make sure that updates, if any, are reported to DCR.
-
-    TODO use a map type??
-    want to assert that values are of type AdSlotConfig
- */
+/**
+ * mark: 432b3a46-90c1-4573-90d3-2400b51af8d0
+ * Some of these may or may not need to be synced for with the sizes in ./ad-sizes.ts
+ * these were originally from frontend, ad-sizes.ts ones were in DCR.
+ **/
 const adSlotConfigs = {
     im: {
         label: false,

package/dist/cjs/index.d.ts

@@ -7,8 +7,8 @@ export { remarketing } from './third-party-tags/remarketing';
 export { EventTimer } from './event-timer';
 export { bypassCommercialMetricsSampling, initCommercialMetrics, } from './send-commercial-metrics';
 export type { ThirdPartyTag } from './types';
-export { adSizes, getAdSize, slotSizeMappings } from './ad-sizes';
-export type { SizeKeys, AdSizeString, AdSize } from './ad-sizes';
+export { adSizes, getAdSize, slotSizeMappings, createAdSize } from './ad-sizes';
+export type { SizeKeys, AdSizeString, AdSize, SizeMapping, SlotSizeMappings, SlotName, } from './ad-sizes';
 export { isAdBlockInUse } from './detect-ad-blocker';
 export { clearPermutiveSegments, getPermutiveSegments, getPermutivePFPSegments, } from './permutive';
 export { initTrackScrollDepth } from './track-scroll-depth';

package/dist/cjs/index.js

@@ -24,7 +24,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.pickTargetingValues = exports.getViewportTargeting = exports.getSharedTargeting = exports.getSessionTargeting = exports.getPersonalisedTargeting = exports.getContentTargeting = exports.constants = exports.disabledAds = exports.buildAdsConfigWithConsent = exports.initTrackGpcSignal = exports.initTrackScrollDepth = exports.getPermutivePFPSegments = exports.getPermutiveSegments = exports.clearPermutiveSegments = exports.isAdBlockInUse = exports.slotSizeMappings = exports.getAdSize = exports.adSizes = exports.initCommercialMetrics = exports.bypassCommercialMetricsSampling = exports.EventTimer = exports.remarketing = exports.inizio = exports.twitter = exports.fbPixel = exports.permutive = exports.ias = void 0;
+exports.pickTargetingValues = exports.getViewportTargeting = exports.getSharedTargeting = exports.getSessionTargeting = exports.getPersonalisedTargeting = exports.getContentTargeting = exports.constants = exports.disabledAds = exports.buildAdsConfigWithConsent = exports.initTrackGpcSignal = exports.initTrackScrollDepth = exports.getPermutivePFPSegments = exports.getPermutiveSegments = exports.clearPermutiveSegments = exports.isAdBlockInUse = exports.createAdSize = exports.slotSizeMappings = exports.getAdSize = exports.adSizes = exports.initCommercialMetrics = exports.bypassCommercialMetricsSampling = 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");
@@ -46,6 +46,7 @@ var ad_sizes_1 = require("./ad-sizes");
 Object.defineProperty(exports, "adSizes", { enumerable: true, get: function () { return ad_sizes_1.adSizes; } });
 Object.defineProperty(exports, "getAdSize", { enumerable: true, get: function () { return ad_sizes_1.getAdSize; } });
 Object.defineProperty(exports, "slotSizeMappings", { enumerable: true, get: function () { return ad_sizes_1.slotSizeMappings; } });
+Object.defineProperty(exports, "createAdSize", { enumerable: true, get: function () { return ad_sizes_1.createAdSize; } });
 var detect_ad_blocker_1 = require("./detect-ad-blocker");
 Object.defineProperty(exports, "isAdBlockInUse", { enumerable: true, get: function () { return detect_ad_blocker_1.isAdBlockInUse; } });
 var permutive_2 = require("./permutive");

package/dist/esm/ad-sizes.d.ts

@@ -1,30 +1,45 @@
 declare type AdSizeString = 'fluid' | `${number},${number}`;
-declare type AdSize = Readonly<{
-    width: number;
-    height: number;
-    toString: () => AdSizeString;
-}>;
-declare type SizeKeys = '160x600' | '300x1050' | '300x250' | '300x600' | '728x90' | '970x250' | 'billboard' | 'empty' | 'fabric' | 'fluid' | 'googleCard' | 'halfPage' | 'inlineMerchandising' | 'leaderboard' | 'merchandising' | 'merchandisingHigh' | 'merchandisingHighAdFeature' | 'mobilesticky' | 'mpu' | 'outOfPage' | 'outstreamDesktop' | 'outstreamGoogleDesktop' | 'outstreamMobile' | 'portrait' | 'skyscraper';
-interface SizeMapping {
-    mobile?: AdSize[];
-    desktop?: AdSize[];
-    phablet?: AdSize[];
-    tablet?: AdSize[];
-}
-interface SlotSizeMappings {
-    right: SizeMapping;
-    comments: SizeMapping;
-    'top-above-nav': SizeMapping;
-    mostpop: SizeMapping;
-    'merchandising-high': SizeMapping;
-    merchandising: SizeMapping;
-    survey: SizeMapping;
+/**
+ * Store ad sizes in a way that is compatible with google-tag but also accessible via
+ * more semantic `width`/`height` properties and keep things readonly.
+ *
+ * example:
+ * const size = new AdSize([300, 250]);
+ *
+ * size.width === 300; // true
+ * size[0] === 300; // true
+ *
+ * size.height === 250; // true
+ * size[1] === 250; // true
+ *
+ * size[0] = 200; // throws error
+ * size.width = 200; // throws error
+ *
+ */
+declare class AdSize extends Array<number> {
+    readonly [0]: number;
+    readonly [1]: number;
+    constructor([width, height]: [number, number]);
+    toString(): AdSizeString;
+    get width(): number;
+    get height(): number;
 }
+declare type SizeKeys = '160x600' | '300x1050' | '300x250' | '300x600' | '728x90' | '970x250' | 'billboard' | 'empty' | 'fabric' | 'fluid' | 'googleCard' | 'halfPage' | 'inlineMerchandising' | 'leaderboard' | 'merchandising' | 'merchandisingHigh' | 'merchandisingHighAdFeature' | 'mobilesticky' | 'mpu' | 'outOfPage' | 'outstreamDesktop' | 'outstreamGoogleDesktop' | 'outstreamMobile' | 'portrait' | 'skyscraper';
+declare type SlotName = 'right' | 'comments' | 'top-above-nav' | 'mostpop' | 'merchandising' | 'merchandising-high' | 'survey';
+declare type Breakpoint = 'mobile' | 'desktop' | 'phablet' | 'tablet';
+declare type SizeMapping = Partial<Record<Breakpoint, AdSize[]>>;
+declare type SlotSizeMappings = Record<SlotName, SizeMapping>;
+declare const createAdSize: (width: number, height: number) => AdSize;
 declare const adSizes: Record<SizeKeys, AdSize>;
+/**
+ * mark: 432b3a46-90c1-4573-90d3-2400b51af8d0
+ * Some of these may or may not need to be synced for with the sizes in ./create-ad-slot.ts
+ * these were originally from DCR, create-ad-slot.ts ones were in frontend.
+ **/
 declare const slotSizeMappings: SlotSizeMappings;
 declare const getAdSize: (size: SizeKeys) => AdSize;
 export declare const _: {
     createAdSize: (width: number, height: number) => AdSize;
 };
-export type { AdSizeString, AdSize, SizeKeys, SizeMapping };
-export { adSizes, getAdSize, slotSizeMappings };
+export type { AdSizeString, AdSize, SizeKeys, SizeMapping, SlotSizeMappings, SlotName, };
+export { adSizes, getAdSize, slotSizeMappings, createAdSize };

package/dist/esm/ad-sizes.js

@@ -1,10 +1,39 @@
+/**
+ * Store ad sizes in a way that is compatible with google-tag but also accessible via
+ * more semantic `width`/`height` properties and keep things readonly.
+ *
+ * example:
+ * const size = new AdSize([300, 250]);
+ *
+ * size.width === 300; // true
+ * size[0] === 300; // true
+ *
+ * size.height === 250; // true
+ * size[1] === 250; // true
+ *
+ * size[0] = 200; // throws error
+ * size.width = 200; // throws error
+ *
+ */
+class AdSize extends Array {
+    constructor([width, height]) {
+        super();
+        this.push(width, height);
+    }
+    toString() {
+        return this.width === 0 && this.height === 0
+            ? 'fluid'
+            : `${this.width},${this.height}`;
+    }
+    get width() {
+        return this[0];
+    }
+    get height() {
+        return this[1];
+    }
+}
 const createAdSize = (width, height) => {
-    const toString = () => width === 0 && height === 0 ? 'fluid' : `${width},${height}`;
-    return Object.freeze({
-        width,
-        height,
-        toString,
-    });
+    return new AdSize([width, height]);
 };
 const adSizesPartial = {
     // standard ad sizes
@@ -39,6 +68,11 @@ const adSizes = {
     '300x1050': adSizesPartial.portrait,
     '160x600': adSizesPartial.skyscraper,
 };
+/**
+ * mark: 432b3a46-90c1-4573-90d3-2400b51af8d0
+ * Some of these may or may not need to be synced for with the sizes in ./create-ad-slot.ts
+ * these were originally from DCR, create-ad-slot.ts ones were in frontend.
+ **/
 const slotSizeMappings = {
     right: {
         mobile: [
@@ -155,4 +189,4 @@ const slotSizeMappings = {
 const getAdSize = (size) => adSizes[size];
 // Export for testing
 export const _ = { createAdSize };
-export { adSizes, getAdSize, slotSizeMappings };
+export { adSizes, getAdSize, slotSizeMappings, createAdSize };

package/dist/esm/create-ad-slot.js

@@ -25,18 +25,11 @@ const commonSizeMappings = {
         adSizes.fluid,
     ],
 };
-/*
-
-    mark: 432b3a46-90c1-4573-90d3-2400b51af8d0
-
-    The ad sizes which are hardcoded here are also hardcoded in the source code of
-    dotcom-rendering.
-
-    If/when this file is modified, please make sure that updates, if any, are reported to DCR.
-
-    TODO use a map type??
-    want to assert that values are of type AdSlotConfig
- */
+/**
+ * mark: 432b3a46-90c1-4573-90d3-2400b51af8d0
+ * Some of these may or may not need to be synced for with the sizes in ./ad-sizes.ts
+ * these were originally from frontend, ad-sizes.ts ones were in DCR.
+ **/
 const adSlotConfigs = {
     im: {
         label: false,

package/dist/esm/index.d.ts

@@ -7,8 +7,8 @@ export { remarketing } from './third-party-tags/remarketing';
 export { EventTimer } from './event-timer';
 export { bypassCommercialMetricsSampling, initCommercialMetrics, } from './send-commercial-metrics';
 export type { ThirdPartyTag } from './types';
-export { adSizes, getAdSize, slotSizeMappings } from './ad-sizes';
-export type { SizeKeys, AdSizeString, AdSize } from './ad-sizes';
+export { adSizes, getAdSize, slotSizeMappings, createAdSize } from './ad-sizes';
+export type { SizeKeys, AdSizeString, AdSize, SizeMapping, SlotSizeMappings, SlotName, } from './ad-sizes';
 export { isAdBlockInUse } from './detect-ad-blocker';
 export { clearPermutiveSegments, getPermutiveSegments, getPermutivePFPSegments, } from './permutive';
 export { initTrackScrollDepth } from './track-scroll-depth';

package/dist/esm/index.js

@@ -7,7 +7,7 @@ export { inizio } from './third-party-tags/inizio';
 export { remarketing } from './third-party-tags/remarketing';
 export { EventTimer } from './event-timer';
 export { bypassCommercialMetricsSampling, initCommercialMetrics, } from './send-commercial-metrics';
-export { adSizes, getAdSize, slotSizeMappings } from './ad-sizes';
+export { adSizes, getAdSize, slotSizeMappings, createAdSize } from './ad-sizes';
 export { isAdBlockInUse } from './detect-ad-blocker';
 export { clearPermutiveSegments, getPermutiveSegments, getPermutivePFPSegments, } from './permutive';
 export { initTrackScrollDepth } from './track-scroll-depth';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardian/commercial-core",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "Guardian advertising business logic",
   "homepage": "https://github.com/guardian/commercial-core#readme",
   "bugs": {