@surfside/ads-core-web 0.1.21 → 0.1.23

package/README.md

@@ -1,15 +1,15 @@
-# @surfside/ads-core-web
-
-To install dependencies:
-
-```bash
-bun install
-```
-
-To run:
-
-```bash
-bun run src/index.ts
-```
-
-This project was created using `bun init` in bun v1.2.10. [Bun](https://bun.sh) is a fast all-in-one JavaScript runtime.
+# @surfside/ads-core-web
+
+To install dependencies:
+
+```bash
+bun install
+```
+
+To run:
+
+```bash
+bun run src/index.ts
+```
+
+This project was created using `bun init` in bun v1.2.10. [Bun](https://bun.sh) is a fast all-in-one JavaScript runtime.

package/lib/cjs/BuildInfo.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SurfsideAdsCoreWebVersionInfo = void 0;
-exports.SurfsideAdsCoreWebVersionInfo = { buildBranch: 'master', buildHash: '204013e', buildVer: '0.1.20' };
+exports.SurfsideAdsCoreWebVersionInfo = { buildBranch: 'hotfix-0.1.23', buildHash: 'f4f4536', buildVer: '0.1.23' };
 //# sourceMappingURL=BuildInfo.js.map

package/lib/cjs/BuildInfo.js.map

@@ -1 +1 @@
-{"version":3,"file":"BuildInfo.js","sourceRoot":"src/","sources":["BuildInfo.ts"],"names":[],"mappings":";;;AAAa,QAAA,6BAA6B,GAAG,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAC,CAAC"}
+{"version":3,"file":"BuildInfo.js","sourceRoot":"src/","sources":["BuildInfo.ts"],"names":[],"mappings":";;;AAAa,QAAA,6BAA6B,GAAG,EAAE,WAAW,EAAE,eAAe,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAC,CAAC"}

package/lib/cjs/Init.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoadSurfAdsWebSimple = exports.LoadSurfAdsWeb = exports.LoadSurfAdsWebDependencies = exports.CreateSurfAdsWeb = void 0;
+const ads_core_client_1 = require("@surfside/ads-core-client");
+const _1 = require(".");
+const helpers_1 = require("./helpers");
+const TLS = (url) => 'https:' + url;
+;
+const CreateSurfAdsWeb = (config) => {
+    const clientApiRes = (0, ads_core_client_1.CreateSurfAdsClient)(config);
+    if (!clientApiRes.ok) {
+        return clientApiRes;
+    }
+    const clientApi = clientApiRes.value;
+    const { logger, mobile } = config;
+    const { evaluateProductCardTemplate } = clientApi;
+    const { configuration, device, geo, navigator } = config;
+    const renderBanner = _1.RenderBanner.bind(undefined, logger, mobile);
+    const renderProductCard = _1.RenderProductCard.bind(undefined, logger, configuration.templates.productCardStylesheet, configuration.templates.javascriptCallbacks, evaluateProductCardTemplate);
+    const renderCarousel = _1.RenderCarousel.bind(undefined, logger, evaluateProductCardTemplate, configuration.settings.sponsoredByEnabled === true, configuration.templates.productCardStylesheet, configuration.templates.carouselStylesheet, configuration.templates.javascriptCallbacks);
+    const renderVideo = _1.RenderVideo.bind(undefined, logger, device, geo, navigator.userAgent);
+    return (0, ads_core_client_1.Ok)({
+        ...clientApi,
+        renderBanner,
+        renderProductCard,
+        renderCarousel,
+        renderVideo
+    });
+};
+exports.CreateSurfAdsWeb = CreateSurfAdsWeb;
+const LoadSurfAdsWebDependencies = (config) => {
+    const { overrides, accountId, siteId, locationId, telemetry } = config;
+    const createTelemetryCollector = overrides?.services?.createTelemetryCollector ?? ((config) => (0, ads_core_client_1.Ok)(telemetry === true
+        ? new helpers_1.WebTelemetryCollector({
+            accountId: config.accountId,
+            siteId: config.siteId,
+            channelId: config.channelId,
+            locationId: config.locationId,
+            endpoint: TLS(ads_core_client_1.PROD_TELEMETRY_SERVICE),
+            tags: { accountId, siteId, locationId },
+            device: (0, ads_core_client_1.DeviceToTelemetryDevice)(config.device)
+        })
+        : undefined));
+    return (0, ads_core_client_1.LoadSurfAdsClientDependencies)({
+        ...config,
+        overrides: {
+            ...config.overrides,
+            services: {
+                ...config.overrides?.services,
+                createTelemetryCollector,
+            }
+        }
+    });
+};
+exports.LoadSurfAdsWebDependencies = LoadSurfAdsWebDependencies;
+const LoadSurfAdsWeb = async (config) => {
+    const dependenciesRes = await (0, exports.LoadSurfAdsWebDependencies)(config);
+    if (!dependenciesRes.ok) {
+        return dependenciesRes;
+    }
+    const dependencies = dependenciesRes.value;
+    const result = (0, exports.CreateSurfAdsWeb)({
+        ...config,
+        ...dependencies,
+    });
+    return result;
+};
+exports.LoadSurfAdsWeb = LoadSurfAdsWeb;
+const LoadSurfAdsWebSimple = async (accountId, siteId, channelId, locationId, userId, logger, telemetry, overrides) => {
+    const browserInfo = (0, ads_core_client_1.GetBrowserInfo)();
+    if (!browserInfo.ok) {
+        return browserInfo;
+    }
+    const { windowInfo, navigator, isMobile, screen } = browserInfo.value;
+    return await (0, exports.LoadSurfAdsWeb)({
+        logger,
+        accountId,
+        channelId,
+        siteId,
+        locationId,
+        userId,
+        windowInfo,
+        navigator,
+        mobile: isMobile,
+        screen,
+        ip: undefined,
+        overrides,
+        telemetry
+    });
+};
+exports.LoadSurfAdsWebSimple = LoadSurfAdsWebSimple;
+//# sourceMappingURL=Init.js.map

package/lib/cjs/Init.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Init.js","sourceRoot":"../@surfside-ads-core-web/","sources":["Init.ts"],"names":[],"mappings":"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"}

package/lib/cjs/helpers/WebTelemetryCollector.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WebTelemetryCollector = void 0;
+const ads_core_client_1 = require("@surfside/ads-core-client");
+class WebTelemetryCollector extends ads_core_client_1.ITelemetryCollector {
+    _endpoint;
+    _tags;
+    _batchIntervalMs;
+    _pageUrl;
+    _queue = [];
+    _flushTimer;
+    _device;
+    constructor(options) {
+        super(options.accountId, options.siteId, options.channelId, options.locationId, options.device);
+        this._endpoint = options.endpoint;
+        this._tags = { pageSessionId: crypto.randomUUID(), ...(options.tags ?? {}) };
+        this._batchIntervalMs = options.batchIntervalMs ?? 1000;
+        this._pageUrl = options.url ?? globalThis.location?.href;
+    }
+    record(entry) {
+        this._queue.push({
+            device: this.device,
+            pageUrl: this._pageUrl ?? globalThis?.window?.location?.href,
+            ...entry,
+            tags: { ...this._tags, ...(entry.tags ?? {}) },
+        });
+        if (this._batchIntervalMs === 0) {
+            this.flush();
+            return;
+        }
+        clearTimeout(this._flushTimer);
+        this._flushTimer = setTimeout(() => this.flush(), this._batchIntervalMs);
+        if (this._queue.length >= 100) {
+            this.flush();
+        }
+    }
+    flush() {
+        if (this._queue.length === 0) {
+            return;
+        }
+        const payload = JSON.stringify(this._queue.splice(0));
+        clearTimeout(this._flushTimer);
+        this._flushTimer = undefined;
+        const sent = globalThis.navigator.sendBeacon(this._endpoint, new Blob([payload], { type: 'application/json' }));
+        if (!sent) {
+            fetch(this._endpoint, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: payload,
+                keepalive: true,
+            }).catch(() => { });
+        }
+    }
+}
+exports.WebTelemetryCollector = WebTelemetryCollector;
+//# sourceMappingURL=WebTelemetryCollector.js.map

package/lib/cjs/helpers/WebTelemetryCollector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WebTelemetryCollector.js","sourceRoot":"../@surfside-ads-core-web/","sources":["helpers/WebTelemetryCollector.ts"],"names":[],"mappings":";;;AAAA,+DAImC;AAcnC,MAAa,qBAAsB,SAAQ,qCAAmB;IACzC,SAAS,CAAS;IAClB,KAAK,CAAyB;IAC9B,gBAAgB,CAAS;IACzB,QAAQ,CAAqB;IACtC,MAAM,GAAsB,EAAE,CAAC;IAC/B,WAAW,CAA4C;IACvD,OAAO,CAA+B;IAE9C,YAAY,OAAsC;QAC9C,KAAK,CACD,OAAO,CAAC,SAAS,EACjB,OAAO,CAAC,MAAM,EACd,OAAO,CAAC,SAAS,EACjB,OAAO,CAAC,UAAU,EAClB,OAAO,CAAC,MAAM,CACjB,CAAC;QACF,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,QAAQ,CAAC;QAClC,IAAI,CAAC,KAAK,GAAG,EAAE,aAAa,EAAE,MAAM,CAAC,UAAU,EAAE,EAAE,GAAG,CAAC,OAAO,CAAC,IAAI,IAAI,EAAE,CAAC,EAAE,CAAC;QAC7E,IAAI,CAAC,gBAAgB,GAAG,OAAO,CAAC,eAAe,IAAI,IAAI,CAAC;QACxD,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,GAAG,IAAI,UAAU,CAAC,QAAQ,EAAE,IAAI,CAAC;IAC7D,CAAC;IAED,MAAM,CAAC,KAAsB;QACzB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;YACb,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,OAAO,EAAE,IAAI,CAAC,QAAQ,IAAI,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI;YAC5D,GAAG,KAAK;YACR,IAAI,EAAE,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,KAAK,CAAC,IAAI,IAAI,EAAE,CAAC,EAAE;SACjD,CAAC,CAAC;QACH,IAAI,IAAI,CAAC,gBAAgB,KAAK,CAAC,EAAE,CAAC;YAC9B,IAAI,CAAC,KAAK,EAAE,CAAC;YACb,OAAO;QACX,CAAC;QACD,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC/B,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACzE,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,IAAI,GAAG,EAAE,CAAC;YAC5B,IAAI,CAAC,KAAK,EAAE,CAAC;QACjB,CAAC;IACL,CAAC;IAED,KAAK;QACD,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC3B,OAAO;QACX,CAAC;QACD,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QACtD,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC/B,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC;QAC7B,MAAM,IAAI,GAAG,UAAU,CAAC,SAAS,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,IAAI,CAAC,CAAC,OAAO,CAAC,EAAE,EAAE,IAAI,EAAE,kBAAkB,EAAE,CAAC,CAAC,CAAC;QAChH,IAAI,CAAC,IAAI,EAAE,CAAC;YACR,KAAK,CAAC,IAAI,CAAC,SAAS,EAAE;gBAClB,MAAM,EAAE,MAAM;gBACd,OAAO,EAAE,EAAE,cAAc,EAAE,kBAAkB,EAAE;gBAC/C,IAAI,EAAE,OAAO;gBACb,SAAS,EAAE,IAAI;aAClB,CAAC,CAAC,KAAK,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;QACvB,CAAC;IACL,CAAC;CACJ;AA1DD,sDA0DC"}

package/lib/cjs/rendering/Banner.js

@@ -62,34 +62,34 @@ class MissingNurlError extends Error {
 }
 exports.MissingNurlError = MissingNurlError;
 ;
-const template = `<div>
-    <div class="surfside-banner-adm">
-
-    </div>
-    <div class="surfside-banner-watermark">
-
-    </div>
-</div>
+const template = `<div>
+    <div class="surfside-banner-adm">
+
+    </div>
+    <div class="surfside-banner-watermark">
+
+    </div>
+</div>
 `;
-const style = `.surfside-banner {
-    position: relative;
-    display: inline-block;
-    overflow: hidden;
-    max-width: 100%;
-    height: auto;
-    width: 100%;
-}
-
-.surfside-banner-adm {
-    display: flex;
-
-    a {
-        width: 100%;
-
-        img {
-            width: 100%;
-            height: auto;
-        }
-    }
+const style = `.surfside-banner {
+    position: relative;
+    display: inline-block;
+    overflow: hidden;
+    max-width: 100%;
+    height: auto;
+    width: 100%;
+}
+
+.surfside-banner-adm {
+    display: flex;
+
+    a {
+        width: 100%;
+
+        img {
+            width: 100%;
+            height: auto;
+        }
+    }
 }`;
 //# sourceMappingURL=Banner.js.map

package/lib/cjs/rendering/Carousel.js

@@ -285,126 +285,126 @@ class EmptyFirstPageError extends Error {
 }
 exports.EmptyFirstPageError = EmptyFirstPageError;
 ;
-const template = `<div class="carousel-wrapper">
-    <div class="sponsored-carousel"></div>
-    <div class="surf-carousel">
-        <div class="items"></div>
-        <div class="arrows">
-            <div class="arrow left"></div>
-            <div class="arrow right"></div>
-        </div>
-    </div>
+const template = `<div class="carousel-wrapper">
+    <div class="sponsored-carousel"></div>
+    <div class="surf-carousel">
+        <div class="items"></div>
+        <div class="arrows">
+            <div class="arrow left"></div>
+            <div class="arrow right"></div>
+        </div>
+    </div>
 </div>`;
-const style = `
-.surf-carousel {
-    display: flex;
-    position: relative;
-    flex-grow: 1;
-
-    .sponsored-carousel {
-        font-family: 'Helvetica', Verdana, Geneva, Tahoma, sans-serif;
-        margin: 10px 0;
-        font-size: 24px;
-
-        &::before {
-            content: 'For you';
-        }
-
-        &.sponsoredByOne::before {
-            content: 'Sponsored by ';
-        }
-
-        &.recommended::before {
-            content: 'Recommended';
-        }
-
-        &.sponsoredByMany::before {
-            content: 'Sponsored';
-        }
-    }
-
-    .carousel-wrapper {
-        width: 100%;
-        overflow-x: clip;
-        position: relative;
-    }
-
-    .items {
-        z-index: 1;
-        display: flex;
-        flex-direction: row;
-        flex-grow: 1;
-        flex-wrap: nowrap;
-        align-items: stretch;
-        padding: 0 37px;
-        box-sizing: border-box;
-        transition: transform 0.4s ease-out;
-        width: 100%;
-
-        .surf-product-card {
-            flex: 1;
-            display: flex;
-            padding: 5px;
-            box-sizing: border-box;
-        }
-    }
-
-    
-}
-
-.arrows {
-
-    .arrow {
-        z-index: 2;
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-        width: 40px;
-        height: 40px;
-        display: flex;
-        background-color: rgba(0, 0, 0, 0.5);
-        margin: 0 1rem;
-        justify-content: center;
-        align-items: center;
-        border-radius: 50%;
-        cursor: pointer;
-        box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2),
-                    0 2px 8px 0 rgba(0, 0, 0, 0.2);
-
-        &:hover {
-            background-color: rgba(0, 0, 0, 0.6);
-        }
-
-        &.disabled {
-            cursor: not-allowed;
-            filter: grayscale(100%);
-            opacity: 0.2;
-        }
-
-        &.left {
-            left: -10px;
-
-            &:before {
-                content: "";
-                background: url('//cdn.surfside.io/icons/left-arrow.svg')
-                no-repeat center;
-                width: 40px;
-                height: 40px;
-            }
-        }
-
-        &.right {
-            right: 0;
-
-            &:before {
-                content: "";
-                background: url('//cdn.surfside.io/icons/right-arrow.svg')
-                no-repeat center;
-                width: 40px;
-                height: 40px;
-            }
-
-        }
-    }
+const style = `
+.surf-carousel {
+    display: flex;
+    position: relative;
+    flex-grow: 1;
+
+    .sponsored-carousel {
+        font-family: 'Helvetica', Verdana, Geneva, Tahoma, sans-serif;
+        margin: 10px 0;
+        font-size: 24px;
+
+        &::before {
+            content: 'For you';
+        }
+
+        &.sponsoredByOne::before {
+            content: 'Sponsored by ';
+        }
+
+        &.recommended::before {
+            content: 'Recommended';
+        }
+
+        &.sponsoredByMany::before {
+            content: 'Sponsored';
+        }
+    }
+
+    .carousel-wrapper {
+        width: 100%;
+        overflow-x: clip;
+        position: relative;
+    }
+
+    .items {
+        z-index: 1;
+        display: flex;
+        flex-direction: row;
+        flex-grow: 1;
+        flex-wrap: nowrap;
+        align-items: stretch;
+        padding: 0 37px;
+        box-sizing: border-box;
+        transition: transform 0.4s ease-out;
+        width: 100%;
+
+        .surf-product-card {
+            flex: 1;
+            display: flex;
+            padding: 5px;
+            box-sizing: border-box;
+        }
+    }
+
+    
+}
+
+.arrows {
+
+    .arrow {
+        z-index: 2;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 40px;
+        height: 40px;
+        display: flex;
+        background-color: rgba(0, 0, 0, 0.5);
+        margin: 0 1rem;
+        justify-content: center;
+        align-items: center;
+        border-radius: 50%;
+        cursor: pointer;
+        box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2),
+                    0 2px 8px 0 rgba(0, 0, 0, 0.2);
+
+        &:hover {
+            background-color: rgba(0, 0, 0, 0.6);
+        }
+
+        &.disabled {
+            cursor: not-allowed;
+            filter: grayscale(100%);
+            opacity: 0.2;
+        }
+
+        &.left {
+            left: -10px;
+
+            &:before {
+                content: "";
+                background: url('//cdn.surfside.io/icons/left-arrow.svg')
+                no-repeat center;
+                width: 40px;
+                height: 40px;
+            }
+        }
+
+        &.right {
+            right: 0;
+
+            &:before {
+                content: "";
+                background: url('//cdn.surfside.io/icons/right-arrow.svg')
+                no-repeat center;
+                width: 40px;
+                height: 40px;
+            }
+
+        }
+    }
 }`;
 //# sourceMappingURL=Carousel.js.map

package/lib/cjs/rendering/ProductCard.js

@@ -110,24 +110,24 @@ class MissingTrackersError extends Error {
 }
 exports.MissingTrackersError = MissingTrackersError;
 ;
-const style = `.surf-product-card {
-    width: 100%;
-
-    &.sponsored {
-        position: relative;
-
-        &::after {
-            content: 'Sponsored';
-            position: absolute;
-            font-family: Verdana, Helvetica, 'sans-serif';
-            font-weight: 100;
-            color: #e0e0e0;
-            font-size: 12px;
-            box-sizing: border-box;
-            bottom: 0px;
-            width: 100%;
-            text-align: center;
-        }
-    }
+const style = `.surf-product-card {
+    width: 100%;
+
+    &.sponsored {
+        position: relative;
+
+        &::after {
+            content: 'Sponsored';
+            position: absolute;
+            font-family: Verdana, Helvetica, 'sans-serif';
+            font-weight: 100;
+            color: #e0e0e0;
+            font-size: 12px;
+            box-sizing: border-box;
+            bottom: 0px;
+            width: 100%;
+            text-align: center;
+        }
+    }
 }`;
 //# sourceMappingURL=ProductCard.js.map