@okendo/shopify-hydrogen 1.1.0 → 1.2.2

package/dist/esnext/client-components/OkendoClientStarRating.client.js

@@ -2,23 +2,23 @@ import React from 'react';
 import { OkendoWidgetClient } from './OkendoWidget.client';
 import { getOkendoProductId } from '../shared/productUtils';
 import { widgetConfigurationError, widgetMetafieldError } from '../shared/errorUtils';
+import { logger } from '../shared/logger';
 export const OkendoClientStarRating = (props) => {
     const { productId, okendoStarRatingSnippet } = props;
     const okendoProductId = getOkendoProductId(productId);
     if (!okendoProductId) {
-        console.error(widgetConfigurationError('OkendoClientStarRating', 'productId was not provided'));
+        logger.error(widgetConfigurationError('OkendoClientStarRating', 'productId was not provided'));
         return null;
     }
     if (!okendoStarRatingSnippet?.value) {
-        console.warn(widgetMetafieldError('OkendoStarRating', 'StarRatingSnippet'));
+        logger.warn(widgetMetafieldError('OkendoStarRating', 'StarRatingSnippet'));
     }
     const dataAttributes = {
         'data-oke-star-rating': '',
-        'data-oke-reviews-product-id': okendoProductId,
-        'data-oke-scroll-disabled': 'true'
+        'data-oke-reviews-product-id': okendoProductId
     };
     if (okendoStarRatingSnippet?.value) {
-        dataAttributes['data-oke-rendered'] = okendoStarRatingSnippet.value;
+        dataAttributes['data-oke-rendered'] = '';
     }
     return (React.createElement(OkendoWidgetClient, { dataAttributes: dataAttributes, metafieldContent: okendoStarRatingSnippet?.value }));
 };

package/dist/esnext/client-components/OkendoWidget.client.js

@@ -2,18 +2,23 @@ import React, { useEffect, useRef } from 'react';
 export const OkendoWidgetClient = (props) => {
     const { dataAttributes, metafieldContent = '' } = props;
     const widgetContainer = useRef(null);
-    const initialiseReviewsWidget = () => {
+    const initializeWidget = () => {
         if (widgetContainer.current) {
-            window.okeWidgetApi.initWidget(widgetContainer.current);
+            // `forceReinitialisation` must be true because we can expect `data-oke-rendered`
+            // to be present on already-initialised widget snippets.
+            window.okeWidgetApi.initWidget(widgetContainer.current, true);
         }
     };
     useEffect(() => {
-        if (window.okeWidgetApi) {
-            initialiseReviewsWidget();
+        if (window.okeWidgetApi && widgetContainer.current) {
+            initializeWidget();
         }
         else {
-            window.addEventListener('oke-script-loaded', initialiseReviewsWidget);
+            document.addEventListener('oke-script-loaded', initializeWidget);
         }
-    }, []);
+        return () => {
+            document.removeEventListener('oke-script-loaded', initializeWidget);
+        };
+    }, [dataAttributes]);
     return (React.createElement("div", { ref: widgetContainer, ...dataAttributes, dangerouslySetInnerHTML: { __html: metafieldContent } }));
 };

package/dist/esnext/components/OkendoProvider.server.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import parse from 'html-react-parser';
 import { fetchSync, useShopQuery, gql, CacheShort } from '@shopify/hydrogen';
 import { Head } from '@shopify/hydrogen';
 import { okendoError } from '../shared/errorUtils';
 import { setInOkendoRequestContext } from '../shared/server/requestUtils';
+import { logger } from '../shared/logger';
 const kDefaultOkendoApiDomain = 'api.okendo.io/v1';
 const kDefaultOkendoCdnDomain = 'cdn-static.okendo.io';
 export const OkendoProvider = (props) => {
@@ -12,7 +12,7 @@ export const OkendoProvider = (props) => {
     const url = `https://${apiDomain ?? kDefaultOkendoApiDomain}/stores/${subscriberId}/widget_plus_settings`;
     const settingsResponse = fetchSync(url, { preload: true });
     if (!settingsResponse.ok) {
-        console.error(okendoError('Failed to retrieve subscriber settings. Please check your environment variables.'));
+        logger.error(okendoError('Failed to retrieve subscriber settings. Please check your environment variables.'));
         setInOkendoRequestContext('setupFailed', true);
         return null;
     }
@@ -25,7 +25,7 @@ export const OkendoProvider = (props) => {
         preload: true
     });
     if (!initScriptResponse.ok) {
-        console.error(okendoError('Failed to retrieve widget initialization script.'));
+        logger.error(okendoError('Failed to retrieve widget initialization script.'));
         setInOkendoRequestContext('setupFailed', true);
         return null;
     }
@@ -50,9 +50,9 @@ export const OkendoProvider = (props) => {
         query: query,
         preload: true
     });
-    const preRenderStyleTags = widgetPreRenderStyleTags?.value ? parse(widgetPreRenderStyleTags.value) : '';
+    const preRenderStyleTags = widgetPreRenderStyleTags?.value ?? '';
     if (!preRenderStyleTags) {
-        console.warn(okendoError('Failed to retrieve pre-rendered widget style settings.'));
+        logger.warn(okendoError('Failed to retrieve pre-rendered widget style settings.'));
     }
     return (React.createElement(React.Fragment, null,
         React.createElement(Head, null,
@@ -62,7 +62,7 @@ export const OkendoProvider = (props) => {
             React.createElement("meta", { name: "oke:subscriber_id", content: subscriberId }),
             React.createElement("script", null, initScriptContents),
             productUrlFormatter && React.createElement("script", { type: "text/javascript" }, `window.okeProductUrlFormatter = ${productUrlFormatter}`)),
-        preRenderStyleTags,
-        parse(starSymbols),
+        preRenderStyleTags && React.createElement("div", { dangerouslySetInnerHTML: { __html: preRenderStyleTags } }),
+        React.createElement("div", { dangerouslySetInnerHTML: { __html: starSymbols } }),
         children));
 };

package/dist/esnext/components/OkendoReviewsWidget.server.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import parse from 'html-react-parser';
 import { useShopQuery, gql } from '@shopify/hydrogen';
 import { OkendoWidgetClient } from '../client-components/OkendoWidget.client';
 import { widgetMetafieldError } from '../shared/errorUtils';
 import { getOkendoProductId } from '../shared/productUtils';
 import { useOkendoRequestContext } from '../shared/server/requestUtils';
+import { logger } from '../shared/logger';
 export const OkendoReviewsWidget = (props) => {
     const { setupFailed } = useOkendoRequestContext();
     if (setupFailed) {
@@ -38,10 +38,10 @@ export const OkendoReviewsWidget = (props) => {
         }
     });
     if (productId && !product?.reviewsWidgetSnippet?.value) {
-        console.warn(widgetMetafieldError('OkendoReviewsWidget', 'ReviewsWidgetSnippet'));
+        logger.warn(widgetMetafieldError('OkendoReviewsWidget', 'ReviewsWidgetSnippet'));
     }
     if (!shop?.widgetPreRenderBodyStyleTags?.value) {
-        console.warn(widgetMetafieldError('OkendoReviewsWidget', 'WidgetPreRenderBodyStyleTags'));
+        logger.warn(widgetMetafieldError('OkendoReviewsWidget', 'WidgetPreRenderBodyStyleTags'));
     }
     const dataAttributes = {
         'data-oke-widget': ''
@@ -53,7 +53,7 @@ export const OkendoReviewsWidget = (props) => {
         }
     }
     return (React.createElement(React.Fragment, null,
-        parse(shop?.widgetPreRenderBodyStyleTags?.value ?? ''),
+        React.createElement("div", { dangerouslySetInnerHTML: { __html: shop?.widgetPreRenderBodyStyleTags?.value ?? '' } }),
         React.createElement(OkendoWidgetClient, { dataAttributes: dataAttributes, metafieldContent: product?.reviewsWidgetSnippet?.value ?? '' })));
 };
 export default OkendoReviewsWidget;

package/dist/esnext/components/OkendoStarRating.server.js

@@ -4,6 +4,7 @@ import { OkendoWidgetClient } from '../client-components/OkendoWidget.client';
 import { widgetConfigurationError, widgetMetafieldError } from '../shared/errorUtils';
 import { getOkendoProductId } from '../shared/productUtils';
 import { useOkendoRequestContext } from '../shared/server/requestUtils';
+import { logger } from '../shared/logger';
 export const OkendoStarRating = (props) => {
     const { setupFailed } = useOkendoRequestContext();
     if (setupFailed) {
@@ -12,7 +13,7 @@ export const OkendoStarRating = (props) => {
     const { productId } = props;
     const okendoProductId = getOkendoProductId(productId);
     if (!okendoProductId) {
-        console.error(widgetConfigurationError('OkendoStarRating', 'productId was not provided'));
+        logger.error(widgetConfigurationError('OkendoStarRating', 'productId was not provided'));
         return null;
     }
     const query = gql `
@@ -32,12 +33,11 @@ export const OkendoStarRating = (props) => {
         }
     });
     if (!starRatingSnippet?.value) {
-        console.warn(widgetMetafieldError('OkendoStarRating', 'StarRatingSnippet'));
+        logger.warn(widgetMetafieldError('OkendoStarRating', 'StarRatingSnippet'));
     }
     const dataAttributes = {
         'data-oke-star-rating': '',
-        'data-oke-reviews-product-id': okendoProductId,
-        'data-oke-scroll-disabled': 'true'
+        'data-oke-reviews-product-id': okendoProductId
     };
     return (React.createElement(OkendoWidgetClient, { dataAttributes: dataAttributes, metafieldContent: starRatingSnippet?.value }));
 };

package/dist/esnext/framework/plugins/plugin.js

@@ -1,8 +1,6 @@
-import { extendViteOptimizeDeps } from './extendViteOptimizeDeps';
 import suppressModuleWarning from './suppressModuleWarning';
 const okendoPlugin = () => {
     return [
-        extendViteOptimizeDeps(),
         suppressModuleWarning()
     ];
 };

package/dist/esnext/shared/logger.d.ts

@@ -0,0 +1,14 @@
+export declare const logger: {
+    log: {
+        (...data: any[]): void;
+        (message?: any, ...optionalParams: any[]): void;
+    };
+    warn: {
+        (...data: any[]): void;
+        (message?: any, ...optionalParams: any[]): void;
+    };
+    error: {
+        (...data: any[]): void;
+        (message?: any, ...optionalParams: any[]): void;
+    };
+};

package/dist/esnext/shared/logger.js

@@ -0,0 +1,7 @@
+const isProduction = process.env.NODE_ENV === 'production';
+const noop = () => undefined;
+export const logger = {
+    log: isProduction ? noop : console.log,
+    warn: isProduction ? noop : console.warn,
+    error: console.error
+};

package/dist/node/framework/plugins/plugin.js

@@ -2,11 +2,9 @@
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
-const extendViteOptimizeDeps_1 = require("./extendViteOptimizeDeps");
 const suppressModuleWarning_1 = __importDefault(require("./suppressModuleWarning"));
 const okendoPlugin = () => {
     return [
-        (0, extendViteOptimizeDeps_1.extendViteOptimizeDeps)(),
         (0, suppressModuleWarning_1.default)()
     ];
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@okendo/shopify-hydrogen",
-    "version": "1.1.0",
+    "version": "1.2.2",
     "description": "A component library containing Okendo Reviews React components.",
     "main": "dist/esnext/index.js",
     "engines": {
@@ -39,13 +39,10 @@
     },
     "author": "Okendo",
     "license": "SEE LICENSE IN LICENSE.txt",
-    "dependencies": {
-        "html-react-parser": "^1.4.13"
-    },
     "devDependencies": {
-        "@okendo/reviews-widget-plus": "^0.49.0",
+        "@okendo/reviews-widget-plus": "^0.53.1",
         "@okendo/tsconfig": "0.0.2",
-        "@shopify/hydrogen": "^1.1.0",
+        "@shopify/hydrogen": "^1.2.0",
         "@types/node": "^17.0.35",
         "@types/react": "^18.0.14",
         "@types/react-dom": "^18.0.5",
@@ -56,6 +53,6 @@
         "vite": "^2.9.0"
     },
     "peerDependencies": {
-        "@shopify/hydrogen": "1.1.x"
+        "@shopify/hydrogen": "1.2.x"
     }
 }

package/dist/esnext/framework/plugins/extendViteOptimizeDeps.d.ts

@@ -1,2 +0,0 @@
-import type { Plugin } from 'vite';
-export declare const extendViteOptimizeDeps: () => Plugin;

package/dist/esnext/framework/plugins/extendViteOptimizeDeps.js

@@ -1,10 +0,0 @@
-export const extendViteOptimizeDeps = () => ({
-    name: 'vite-plugin-okendo-extend-optimize-deps',
-    config: () => ({
-        optimizeDeps: {
-            include: [
-                '@okendo/shopify-hydrogen > html-react-parser'
-            ]
-        }
-    })
-});

package/dist/node/framework/plugins/extendViteOptimizeDeps.d.ts

@@ -1,2 +0,0 @@
-import type { Plugin } from 'vite';
-export declare const extendViteOptimizeDeps: () => Plugin;

package/dist/node/framework/plugins/extendViteOptimizeDeps.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.extendViteOptimizeDeps = void 0;
-const extendViteOptimizeDeps = () => ({
-    name: 'vite-plugin-okendo-extend-optimize-deps',
-    config: () => ({
-        optimizeDeps: {
-            include: [
-                '@okendo/shopify-hydrogen > html-react-parser'
-            ]
-        }
-    })
-});
-exports.extendViteOptimizeDeps = extendViteOptimizeDeps;