@depict-ai/js-ui - npm Package Compare versions

Comparing version 0.0.31 to 0.0.32

dist/index.d.ts

 import { BaseProviderConfig, BaseSearchProviderConfig, SearchFilter, BaseProductListingConfig, BaseSearchPageConfig, BaseCategoryPageConfig, ImagePlaceholderProps, TextPlaceholderProps } from "@depict-ai/ui";
 import { search_i18n, category_i18n } from "@depict-ai/ui/locales";
 import { Display } from "@depict-ai/utilishared";
-export const version = "0.0.31";
+export const version = "0.0.32";
 interface SearchProviderConfig extends BaseProviderConfig, BaseSearchProviderConfig {
@@ -83,3 +83,5 @@ locale?: search_i18n;
 export function SetupPageReplacer({ isPageToReplace, selectorToReplace, renderContent, renderMode, documentTitle, }: PageReplacerConfig): () => void;
-export function RecommendationSlider<T extends Display>({ recommendations, productCard, columnsAtSize, gridSpacing, }: RecommendationRenderingConfig<T>): Promise<HTMLElement>;
+interface SliderConfig<T extends Display> extends RecommendationRenderingConfig<T> {
+}
+export function RecommendationSlider<T extends Display>({ recommendations, productCard, columnsAtSize, gridSpacing, }: SliderConfig<T>): Promise<HTMLElement>;
 interface RecommendationGridConfig<T extends Display> extends RecommendationRenderingConfig<T> {
@@ -154,1 +156,2 @@ maxRows?: number;
 export { fetchDepictRecommendations } from "@depict-ai/ui";
+export { DPC } from "@depict-ai/dpc";

dist/main.js

 var $kJ2V0$depictaiutilishared = require("@depict-ai/utilishared");
 var $kJ2V0$depictaiui = require("@depict-ai/ui");
+var $kJ2V0$depictaidpc = require("@depict-ai/dpc");
 var $kJ2V0$depictaiuilocales = require("@depict-ai/ui/locales");
@@ -24,4 +25,5 @@ var $kJ2V0$solidjsweb = require("solid-js/web");
 $parcel$export(module.exports, "QuickLinks", () => $d07ce77d2b358a8b$export$466cdc317043f6cb);
+$parcel$export(module.exports, "DPC", () => $05c934aa8b1a01c6$re_export$DPC);
 $parcel$export(module.exports, "version", () => $98b48f9e57507434$export$83d89fbfd8236492);
-const $98b48f9e57507434$export$83d89fbfd8236492 = "0.0.31";
+const $98b48f9e57507434$export$83d89fbfd8236492 = "0.0.32";
 
@@ -142,15 +144,3 @@
                 grid_spacing: gridSpacing ?? "2%",
-                // Todo: Do we need this?
-                get_product_id: ()=>"",
-                // Todo: find the most optimized way to do this optional array wrapping (maybe do it inside ui instead?)
-                product_card_template: (display)=>{
-                    try {
-                        const card = productCard(display);
-                        return Array.isArray(card) ? card : [
-                            card
-                        ];
-                    } catch (e) {
-                        throw new (0, $kJ2V0$depictaiui.ProductCardError)(e);
-                    }
-                }
+                product_card_template: productCard
             }));
@@ -205,15 +195,3 @@ return _el$;
                 category_title: (0, $kJ2V0$depictaiui.CategoryTitle),
-                // Todo: Do we need this?
-                get_product_id: ()=>"",
-                // Todo: find the most optimized way to do this optional array wrapping (maybe do it inside ui instead?)
-                product_card_template: (display)=>{
-                    try {
-                        const card = productCard(display);
-                        return Array.isArray(card) ? card : [
-                            card
-                        ];
-                    } catch (e) {
-                        throw new (0, $kJ2V0$depictaiui.ProductCardError)(e);
-                    }
-                }
+                product_card_template: productCard
             }));
@@ -252,14 +230,29 @@ return _el$;
 
+
+function $b973814dfb05001b$export$8faccc89a7bf2729(productCard) {
+    return (display, info)=>{
+        try {
+            // Todo: Remove when RecommendationRenderer doesn't send fake displays for placeholder rendering anymore
+            display = display && info?.rendering_options?.type !== "placeholder" ? display : null;
+            // Todo: find the most optimized way to do this optional array wrapping (maybe do it inside ui instead?)
+            const card = productCard(display);
+            const card_array = Array.isArray(card) ? card : [
+                card
+            ];
+            // Placeholder rendering doesn't need tracking
+            if (!display) return card_array;
+            if (display.search_result_id) card_array[0].setAttribute("data-search-result-id", display.search_result_id);
+            else if (display.product_listing_result_id) card_array[0].setAttribute("data-product-listing-result-id", display.product_listing_result_id);
+            else if (display.recommendation_id) card_array[0].setAttribute("data-recommendation-id", display.recommendation_id);
+            return card_array;
+        } catch (e) {
+            throw new (0, $kJ2V0$depictaiui.ProductCardError)(e);
+        }
+    };
+}
+
+
 const $ecd5f9114a690359$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$kJ2V0$solidjsweb.template)(`<div class="depict recommendations"><div class="slider"></div></div>`, 4);
 async function $ecd5f9114a690359$export$82cfdc85a4d15688(_ref) {
     let { recommendations: recommendations , productCard: productCard , columnsAtSize: columnsAtSize , gridSpacing: gridSpacing  } = _ref;
-    // Todo: Avoid setting the tenant and market here. The only thing we really need it for at this point, given that we already have the recommendations promise,
-    // is having the values to send for tracking. What we could do instead is to set the data-recommendation-id attribute on the rendered product cards,
-    // then activate DPC with auto tracking. Because we will need DPC active regardless, to get A2C + purchase tracking. Ping Sverre about the plans for this.
-    const void_tenant = new (0, $kJ2V0$depictaiutilishared.Tenant)({
-        TENANT: "depict",
-        MARKET: "se",
-        get_product_id: ()=>"",
-        GA_ID: ""
-    });
     // Todo: shared defaults with react-ui
@@ -291,11 +284,5 @@ const cols_at_size = (0, $kJ2V0$depictaiui.convert_sdk_cols_at_size_to_layout)(columnsAtSize ?? [
     };
-    const rendered_slider = await (0, $kJ2V0$depictaiutilishared.RecommendationSlider)(void_tenant, {
+    const rendered_slider = await (0, $kJ2V0$depictaiutilishared.RecommendationSlider)(null, {
         recs: recommendations,
-        // Todo: find the most optimized way to do this optional array wrapping (maybe do it inside ui instead?)
-        template: (display, info)=>{
-            const card = productCard(info.rendering_options.type == "placeholder" ? null : display);
-            return Array.isArray(card) ? card : [
-                card
-            ];
-        },
+        template: (0, $b973814dfb05001b$export$8faccc89a7bf2729)(productCard),
         type: "slider",
@@ -349,14 +336,6 @@ view_tracking: [],
 
+
 const $51540102ff67e854$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$kJ2V0$solidjsweb.template)(`<div class="depict recommendations"><div class="grid"></div></div>`, 4);
 async function $51540102ff67e854$export$b0a773486c1c2312(_ref) {
     let { recommendations: recommendations , productCard: productCard , columnsAtSize: columnsAtSize , gridSpacing: gridSpacing , maxRows: maxRows  } = _ref;
-    // Todo: Avoid setting the tenant and market here. The only thing we really need it for at this point, given that we already have the recommendations promise,
-    // is having the values to send for tracking. What we could do instead is to set the data-recommendation-id attribute on the rendered product cards,
-    // then activate DPC with auto tracking. Because we will need DPC active regardless, to get A2C + purchase tracking. Ping Sverre about the plans for this.
-    const void_tenant = new (0, $kJ2V0$depictaiutilishared.Tenant)({
-        TENANT: "depict",
-        MARKET: "se",
-        get_product_id: ()=>"",
-        GA_ID: ""
-    });
     // Todo: shared defaults with react-ui
@@ -384,11 +363,5 @@ const cols_at_size = (0, $kJ2V0$depictaiui.convert_sdk_cols_at_size_to_layout)(columnsAtSize ?? [
     };
-    const rendered_grid = await (0, $kJ2V0$depictaiutilishared.RecommendationGrid)(void_tenant, {
+    const rendered_grid = await (0, $kJ2V0$depictaiutilishared.RecommendationGrid)(null, {
         recs: recommendations,
-        // Todo: find the most optimized way to do this optional array wrapping (maybe do it inside ui instead?)
-        template: (display, info)=>{
-            const card = productCard(info.rendering_options.type == "placeholder" ? null : display);
-            return Array.isArray(card) ? card : [
-                card
-            ];
-        },
+        template: (0, $b973814dfb05001b$export$8faccc89a7bf2729)(productCard),
         type: "grid",
@@ -472,4 +445,5 @@ view_tracking: [],
 
+
 (0, $kJ2V0$depictaiutilishared.add_to_version_info)("js-ui", (0, $98b48f9e57507434$export$83d89fbfd8236492));
 
 

dist/module.js

@@ -1,7 +0,8 @@
-import {add_to_version_info as $gXbnb$add_to_version_info, catchify as $gXbnb$catchify, href_change_ipns as $gXbnb$href_change_ipns, Tenant as $gXbnb$Tenant, RecommendationSlider as $gXbnb$RecommendationSlider, make_placeholder_rr as $gXbnb$make_placeholder_rr, GenericSliderArrowButton as $gXbnb$GenericSliderArrowButton, RecommendationGrid as $gXbnb$RecommendationGrid, Placeholder as $gXbnb$Placeholder, ContainedPlaceholderImage as $gXbnb$ContainedPlaceholderImage, observer as $gXbnb$observer} from "@depict-ai/utilishared";
-import {fetchDepictRecommendations as $b9ade2e31ecd6301$re_export$fetchDepictRecommendations, DepictCategory as $gXbnb$DepictCategory, open_modal_with_alignment as $gXbnb$open_modal_with_alignment, DepictSearch as $gXbnb$DepictSearch, SearchPage as $gXbnb$SearchPage, ProductCardError as $gXbnb$ProductCardError, SearchField as $gXbnb$SearchField, CategoryPage as $gXbnb$CategoryPage, CategoryTitle as $gXbnb$CategoryTitle, PageReplacer as $gXbnb$PageReplacer, convert_sdk_cols_at_size_to_layout as $gXbnb$convert_sdk_cols_at_size_to_layout, BreadCrumbs as $gXbnb$BreadCrumbs, QuickLinks as $gXbnb$QuickLinks} from "@depict-ai/ui";
+import {add_to_version_info as $gXbnb$add_to_version_info, catchify as $gXbnb$catchify, href_change_ipns as $gXbnb$href_change_ipns, RecommendationSlider as $gXbnb$RecommendationSlider, make_placeholder_rr as $gXbnb$make_placeholder_rr, GenericSliderArrowButton as $gXbnb$GenericSliderArrowButton, RecommendationGrid as $gXbnb$RecommendationGrid, Placeholder as $gXbnb$Placeholder, ContainedPlaceholderImage as $gXbnb$ContainedPlaceholderImage, observer as $gXbnb$observer} from "@depict-ai/utilishared";
+import {fetchDepictRecommendations as $b9ade2e31ecd6301$re_export$fetchDepictRecommendations, DepictCategory as $gXbnb$DepictCategory, open_modal_with_alignment as $gXbnb$open_modal_with_alignment, DepictSearch as $gXbnb$DepictSearch, SearchPage as $gXbnb$SearchPage, SearchField as $gXbnb$SearchField, CategoryPage as $gXbnb$CategoryPage, CategoryTitle as $gXbnb$CategoryTitle, PageReplacer as $gXbnb$PageReplacer, convert_sdk_cols_at_size_to_layout as $gXbnb$convert_sdk_cols_at_size_to_layout, ProductCardError as $gXbnb$ProductCardError, BreadCrumbs as $gXbnb$BreadCrumbs, QuickLinks as $gXbnb$QuickLinks} from "@depict-ai/ui";
+import {DPC as $b9ade2e31ecd6301$re_export$DPC} from "@depict-ai/dpc";
 import {en as $gXbnb$en} from "@depict-ai/ui/locales";
 import {template as $gXbnb$template, insert as $gXbnb$insert} from "solid-js/web";
 
-const $384f36a64c74679e$export$83d89fbfd8236492 = "0.0.31";
+const $384f36a64c74679e$export$83d89fbfd8236492 = "0.0.32";
 
@@ -122,15 +123,3 @@
                 grid_spacing: gridSpacing ?? "2%",
-                // Todo: Do we need this?
-                get_product_id: ()=>"",
-                // Todo: find the most optimized way to do this optional array wrapping (maybe do it inside ui instead?)
-                product_card_template: (display)=>{
-                    try {
-                        const card = productCard(display);
-                        return Array.isArray(card) ? card : [
-                            card
-                        ];
-                    } catch (e) {
-                        throw new (0, $gXbnb$ProductCardError)(e);
-                    }
-                }
+                product_card_template: productCard
             }));
@@ -185,15 +174,3 @@ return _el$;
                 category_title: (0, $gXbnb$CategoryTitle),
-                // Todo: Do we need this?
-                get_product_id: ()=>"",
-                // Todo: find the most optimized way to do this optional array wrapping (maybe do it inside ui instead?)
-                product_card_template: (display)=>{
-                    try {
-                        const card = productCard(display);
-                        return Array.isArray(card) ? card : [
-                            card
-                        ];
-                    } catch (e) {
-                        throw new (0, $gXbnb$ProductCardError)(e);
-                    }
-                }
+                product_card_template: productCard
             }));
@@ -232,14 +209,29 @@ return _el$;
 
+
+function $3c3d64f906c93338$export$8faccc89a7bf2729(productCard) {
+    return (display, info)=>{
+        try {
+            // Todo: Remove when RecommendationRenderer doesn't send fake displays for placeholder rendering anymore
+            display = display && info?.rendering_options?.type !== "placeholder" ? display : null;
+            // Todo: find the most optimized way to do this optional array wrapping (maybe do it inside ui instead?)
+            const card = productCard(display);
+            const card_array = Array.isArray(card) ? card : [
+                card
+            ];
+            // Placeholder rendering doesn't need tracking
+            if (!display) return card_array;
+            if (display.search_result_id) card_array[0].setAttribute("data-search-result-id", display.search_result_id);
+            else if (display.product_listing_result_id) card_array[0].setAttribute("data-product-listing-result-id", display.product_listing_result_id);
+            else if (display.recommendation_id) card_array[0].setAttribute("data-recommendation-id", display.recommendation_id);
+            return card_array;
+        } catch (e) {
+            throw new (0, $gXbnb$ProductCardError)(e);
+        }
+    };
+}
+
+
 const $88e8b83d93cbcc2a$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$gXbnb$template)(`<div class="depict recommendations"><div class="slider"></div></div>`, 4);
 async function $88e8b83d93cbcc2a$export$82cfdc85a4d15688(_ref) {
     let { recommendations: recommendations , productCard: productCard , columnsAtSize: columnsAtSize , gridSpacing: gridSpacing  } = _ref;
-    // Todo: Avoid setting the tenant and market here. The only thing we really need it for at this point, given that we already have the recommendations promise,
-    // is having the values to send for tracking. What we could do instead is to set the data-recommendation-id attribute on the rendered product cards,
-    // then activate DPC with auto tracking. Because we will need DPC active regardless, to get A2C + purchase tracking. Ping Sverre about the plans for this.
-    const void_tenant = new (0, $gXbnb$Tenant)({
-        TENANT: "depict",
-        MARKET: "se",
-        get_product_id: ()=>"",
-        GA_ID: ""
-    });
     // Todo: shared defaults with react-ui
@@ -271,11 +263,5 @@ const cols_at_size = (0, $gXbnb$convert_sdk_cols_at_size_to_layout)(columnsAtSize ?? [
     };
-    const rendered_slider = await (0, $gXbnb$RecommendationSlider)(void_tenant, {
+    const rendered_slider = await (0, $gXbnb$RecommendationSlider)(null, {
         recs: recommendations,
-        // Todo: find the most optimized way to do this optional array wrapping (maybe do it inside ui instead?)
-        template: (display, info)=>{
-            const card = productCard(info.rendering_options.type == "placeholder" ? null : display);
-            return Array.isArray(card) ? card : [
-                card
-            ];
-        },
+        template: (0, $3c3d64f906c93338$export$8faccc89a7bf2729)(productCard),
         type: "slider",
@@ -329,14 +315,6 @@ view_tracking: [],
 
+
 const $4c2205960ebe8b64$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$gXbnb$template)(`<div class="depict recommendations"><div class="grid"></div></div>`, 4);
 async function $4c2205960ebe8b64$export$b0a773486c1c2312(_ref) {
     let { recommendations: recommendations , productCard: productCard , columnsAtSize: columnsAtSize , gridSpacing: gridSpacing , maxRows: maxRows  } = _ref;
-    // Todo: Avoid setting the tenant and market here. The only thing we really need it for at this point, given that we already have the recommendations promise,
-    // is having the values to send for tracking. What we could do instead is to set the data-recommendation-id attribute on the rendered product cards,
-    // then activate DPC with auto tracking. Because we will need DPC active regardless, to get A2C + purchase tracking. Ping Sverre about the plans for this.
-    const void_tenant = new (0, $gXbnb$Tenant)({
-        TENANT: "depict",
-        MARKET: "se",
-        get_product_id: ()=>"",
-        GA_ID: ""
-    });
     // Todo: shared defaults with react-ui
@@ -364,11 +342,5 @@ const cols_at_size = (0, $gXbnb$convert_sdk_cols_at_size_to_layout)(columnsAtSize ?? [
     };
-    const rendered_grid = await (0, $gXbnb$RecommendationGrid)(void_tenant, {
+    const rendered_grid = await (0, $gXbnb$RecommendationGrid)(null, {
         recs: recommendations,
-        // Todo: find the most optimized way to do this optional array wrapping (maybe do it inside ui instead?)
-        template: (display, info)=>{
-            const card = productCard(info.rendering_options.type == "placeholder" ? null : display);
-            return Array.isArray(card) ? card : [
-                card
-            ];
-        },
+        template: (0, $3c3d64f906c93338$export$8faccc89a7bf2729)(productCard),
         type: "grid",
@@ -452,5 +424,6 @@ view_tracking: [],
 
+
 (0, $gXbnb$add_to_version_info)("js-ui", (0, $384f36a64c74679e$export$83d89fbfd8236492));
 
 
-export {$2d74c140fd7068d0$export$5d13af1f32ae532e as DepictCategoryProvider, $140f992baa1081ff$export$9aa84a6b7bde7bae as DepictSearchProvider, $0fcd5f18160cc39d$export$a54ec244c8863715 as SearchPage, $bae8104bbb62fa4a$export$b94867ecbd698f21 as SearchField, $fb06f2a0e9f40e9f$export$f7d2f673fc2f091d as CategoryPage, $0821002aa3b2b433$export$64e18aecaa12222c as SetupPageReplacer, $b9ade2e31ecd6301$re_export$fetchDepictRecommendations as fetchDepictRecommendations, $88e8b83d93cbcc2a$export$82cfdc85a4d15688 as RecommendationSlider, $4c2205960ebe8b64$export$b0a773486c1c2312 as RecommendationGrid, $fca29229130cb86d$export$89c6019e4baa40b1 as TextPlaceholder, $fca29229130cb86d$export$3f37af283f8fb843 as ImagePlaceholder, $ffa68e12dba2c222$export$7278f0e6b349961b as onExistsObserver, $02ba3093945b70b6$export$5646050d516e06bc as BreadCrumbs, $02ba3093945b70b6$export$466cdc317043f6cb as QuickLinks, $384f36a64c74679e$export$83d89fbfd8236492 as version};
+export {$2d74c140fd7068d0$export$5d13af1f32ae532e as DepictCategoryProvider, $140f992baa1081ff$export$9aa84a6b7bde7bae as DepictSearchProvider, $0fcd5f18160cc39d$export$a54ec244c8863715 as SearchPage, $bae8104bbb62fa4a$export$b94867ecbd698f21 as SearchField, $fb06f2a0e9f40e9f$export$f7d2f673fc2f091d as CategoryPage, $0821002aa3b2b433$export$64e18aecaa12222c as SetupPageReplacer, $b9ade2e31ecd6301$re_export$fetchDepictRecommendations as fetchDepictRecommendations, $88e8b83d93cbcc2a$export$82cfdc85a4d15688 as RecommendationSlider, $4c2205960ebe8b64$export$b0a773486c1c2312 as RecommendationGrid, $fca29229130cb86d$export$89c6019e4baa40b1 as TextPlaceholder, $fca29229130cb86d$export$3f37af283f8fb843 as ImagePlaceholder, $ffa68e12dba2c222$export$7278f0e6b349961b as onExistsObserver, $02ba3093945b70b6$export$5646050d516e06bc as BreadCrumbs, $02ba3093945b70b6$export$466cdc317043f6cb as QuickLinks, $b9ade2e31ecd6301$re_export$DPC as DPC, $384f36a64c74679e$export$83d89fbfd8236492 as version};

package.json

 {
   "name": "@depict-ai/js-ui",
-  "version": "0.0.31",
+  "version": "0.0.32",
   "packageManager": "yarn@3.2.2",
@@ -60,5 +60,6 @@ "source": "src/index.ts",
   "dependencies": {
-    "@depict-ai/plp-styling": "^0.0.42",
-    "@depict-ai/ui": "^0.0.80",
-    "@depict-ai/utilishared": "^0.0.84",
+    "@depict-ai/dpc": "^0.0.10",
+    "@depict-ai/plp-styling": "^0.0.43",
+    "@depict-ai/ui": "^0.0.81",
+    "@depict-ai/utilishared": "^0.0.85",
     "solid-js": "^1.7.3"
@@ -65,0 +66,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

Worsened metrics

Total package byte prevSize

100839

decreased by-2.96%

Dependency count

5

increased by25%

Lines of code

901

decreased by-6.24%

Dependency changes

• + Added@depict-ai/dpc@^0.0.10

• + Added@depict-ai/dpc@0.0.10(transitive)

• + Added@depict-ai/plp-styling@0.0.43(transitive)

• + Added@depict-ai/types@0.0.240.0.33(transitive)

• + Added@depict-ai/ui@0.0.81(transitive)

• + Added@depict-ai/utilishared@0.0.760.0.85(transitive)

• - Removed@depict-ai/plp-styling@0.0.42(transitive)

• - Removed@depict-ai/types@0.0.32(transitive)

• - Removed@depict-ai/ui@0.0.80(transitive)

• - Removed@depict-ai/utilishared@0.0.84(transitive)

• Updated@depict-ai/plp-styling@^0.0.43

• Updated@depict-ai/ui@^0.0.81

• Updated@depict-ai/utilishared@^0.0.85