@okendo/shopify-hydrogen 1.2.1 → 1.2.3

package/dist/esnext/client-components/OkendoClientStarRating.client.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FC } from 'react';
 import type { OkendoClientStarRatingProps } from '../models/starRating';
-export declare const OkendoClientStarRating: React.FunctionComponent<OkendoClientStarRatingProps>;
+export declare const OkendoClientStarRating: FC<OkendoClientStarRatingProps>;
 export default OkendoClientStarRating;

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

@@ -2,15 +2,15 @@ import React from 'react';
 import { OkendoWidgetClient } from './OkendoWidget.client';
 import { getOkendoProductId } from '../shared/productUtils';
 import { widgetConfigurationError, widgetMetafieldError } from '../shared/errorUtils';
-export const OkendoClientStarRating = (props) => {
-    const { productId, okendoStarRatingSnippet } = props;
+import { logger } from '../shared/logger';
+export const OkendoClientStarRating = ({ productId, okendoStarRatingSnippet }) => {
     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': '',

package/dist/esnext/client-components/OkendoWidget.client.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
+import { FC } from 'react';
 import type { ReviewsWidgetPlus } from '@okendo/reviews-widget-plus/dist-utils/ReviewsWidgetPlus';
 import type { SKO } from '../shared/sharedTypes';
-export declare const OkendoWidgetClient: React.FunctionComponent<OkendoWidgetClientProps>;
+export declare const OkendoWidgetClient: FC<OkendoWidgetClientProps>;
 export interface OkendoWidgetClientProps {
     dataAttributes: SKO;
     metafieldContent?: string;

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

@@ -1,22 +1,23 @@
 import React, { useEffect, useRef } from 'react';
-export const OkendoWidgetClient = (props) => {
-    const { dataAttributes, metafieldContent = '' } = props;
+export const OkendoWidgetClient = ({ dataAttributes, metafieldContent = '' }) => {
     const widgetContainer = useRef(null);
-    const initializeReviewsWidget = () => {
+    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 && widgetContainer.current) {
-            initializeReviewsWidget();
+            initializeWidget();
         }
         else {
-            document.addEventListener('oke-script-loaded', initializeReviewsWidget);
+            document.addEventListener('oke-script-loaded', initializeWidget);
         }
         return () => {
-            document.removeEventListener('oke-script-loaded', initializeReviewsWidget);
+            document.removeEventListener('oke-script-loaded', initializeWidget);
         };
-    }, []);
+    }, [dataAttributes]);
     return (React.createElement("div", { ref: widgetContainer, ...dataAttributes, dangerouslySetInnerHTML: { __html: metafieldContent } }));
 };

package/dist/esnext/components/OkendoProvider.server.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-export declare const OkendoProvider: React.FunctionComponent<OkendoProviderProps>;
+import React, { FC } from 'react';
+export declare const OkendoProvider: FC<OkendoProviderProps>;
 interface OkendoProviderProps {
     apiDomain?: string;
     cdnDomain?: string;

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

@@ -2,17 +2,18 @@ import React from 'react';
 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 { useOkendoRequestContext } 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) => {
-    const { apiDomain, cdnDomain, children, productUrlFormatOverride, subscriberId } = props;
+export const OkendoProvider = ({ apiDomain, cdnDomain, children, productUrlFormatOverride, subscriberId }) => {
+    const okendoRequestContext = useOkendoRequestContext();
     // Download subscriber widget plus settings.
     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.'));
-        setInOkendoRequestContext('setupFailed', true);
+        logger.error(okendoError('Failed to retrieve subscriber settings. Please check your environment variables.'));
+        okendoRequestContext.setupFailed = true;
         return null;
     }
     const { cssVariables, customCss, reviewsHeaderConfig, starSymbols } = settingsResponse.json();
@@ -24,11 +25,14 @@ export const OkendoProvider = (props) => {
         preload: true
     });
     if (!initScriptResponse.ok) {
-        console.error(okendoError('Failed to retrieve widget initialization script.'));
-        setInOkendoRequestContext('setupFailed', true);
+        logger.error(okendoError('Failed to retrieve widget initialization script.'));
+        okendoRequestContext.setupFailed = true;
         return null;
     }
     const initScriptContents = initScriptResponse.text();
+    return React.createElement(OkendoProviderContent, { productUrlFormatOverride: productUrlFormatOverride, subscriberId: subscriberId, reviewsHeaderConfig: reviewsHeaderConfig, starSymbols: starSymbols, cssVariablesNormalized: cssVariablesNormalized, customCssNormalized: customCssNormalized, initScriptContents: initScriptContents }, children);
+};
+const OkendoProviderContent = ({ children, productUrlFormatOverride, subscriberId, reviewsHeaderConfig, starSymbols, cssVariablesNormalized, customCssNormalized, initScriptContents, }) => {
     // Set up product URL formatter.
     const productUrlFormatter = typeof productUrlFormatOverride === 'function'
         ? productUrlFormatOverride
@@ -36,22 +40,22 @@ export const OkendoProvider = (props) => {
             ? `/products/${product.productHandle}/${product.variantId ? '?variantId=' + product.variantId : ''}`
             : undefined;
     // Get pre-rendered style settings.
-    const query = gql `
-        query metafields {
-            shop {
-                widgetPreRenderStyleTags: metafield(namespace: "okendo", key: "WidgetPreRenderStyleTags") {
-                    value
-                }
-            }
-        }
-    `;
+    const query = gql `
+            query metafields {
+                shop {
+                    widgetPreRenderStyleTags: metafield(namespace: "okendo", key: "WidgetPreRenderStyleTags") {
+                        value
+                    }
+                }
+            }
+        `;
     const { data: { shop: { widgetPreRenderStyleTags } } } = useShopQuery({
-        query: query,
+        query,
         preload: true
     });
     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,

package/dist/esnext/components/OkendoReviewsWidget.server.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-export declare const OkendoReviewsWidget: React.FunctionComponent<OkendoReviewsWidgetProps>;
+import { FC } from 'react';
+export declare const OkendoReviewsWidget: FC<OkendoReviewsWidgetProps>;
 interface OkendoReviewsWidgetProps {
     productId?: string;
 }

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

@@ -4,43 +4,46 @@ 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) {
         return null;
     }
-    const { productId } = props;
+    return React.createElement(OkendoReviewsWidgetContent, { ...props });
+};
+const OkendoReviewsWidgetContent = ({ productId }) => {
     const productQuery = productId
-        ? `
-            product(id: $productId) {
-                reviewsWidgetSnippet: metafield(namespace: "okendo", key: "ReviewsWidgetSnippet") {
-                    value
-                }
-            }
+        ? `
+            product(id: $productId) {
+                reviewsWidgetSnippet: metafield(namespace: "okendo", key: "ReviewsWidgetSnippet") {
+                    value
+                }
+            }
         `
         : '';
-    const query = gql `
-        query metafields${productId ? '($productId: ID!)' : ''} {
-            ${productQuery}
-            shop {
-                widgetPreRenderBodyStyleTags: metafield(namespace: "okendo", key: "WidgetPreRenderBodyStyleTags") {
-                    value
-                }
-            }
-        }
+    const query = gql `
+        query metafields${productId ? '($productId: ID!)' : ''} {
+            ${productQuery}
+            shop {
+                widgetPreRenderBodyStyleTags: metafield(namespace: "okendo", key: "WidgetPreRenderBodyStyleTags") {
+                    value
+                }
+            }
+        }
     `;
     const { data: { product, shop } } = useShopQuery({
-        query: query,
+        query,
         preload: true,
         variables: {
             productId
         }
     });
     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': ''

package/dist/esnext/components/OkendoStarRating.server.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FC } from 'react';
 import type { OkendoStarRatingProps } from '../models/starRating';
-export declare const OkendoStarRating: React.FunctionComponent<OkendoStarRatingProps>;
+export declare const OkendoStarRating: FC<OkendoStarRatingProps>;
 export default OkendoStarRating;

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

@@ -4,35 +4,38 @@ 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) {
         return null;
     }
-    const { productId } = props;
-    const okendoProductId = getOkendoProductId(productId);
+    const okendoProductId = getOkendoProductId(props.productId);
     if (!okendoProductId) {
-        console.error(widgetConfigurationError('OkendoStarRating', 'productId was not provided'));
+        logger.error(widgetConfigurationError('OkendoStarRating', 'productId was not provided'));
         return null;
     }
-    const query = gql `
-        query metafields($productId: ID!) {
-            product(id: $productId) {
-                starRatingSnippet: metafield(namespace: "okendo", key: "StarRatingSnippet") {
-                    value
-                }
-            }
-        }
+    return React.createElement(OkendoStarRatingContent, { ...props, okendoProductId: okendoProductId });
+};
+const OkendoStarRatingContent = ({ productId, okendoProductId }) => {
+    const query = gql `
+        query metafields($productId: ID!) {
+            product(id: $productId) {
+                starRatingSnippet: metafield(namespace: "okendo", key: "StarRatingSnippet") {
+                    value
+                }
+            }
+        }
     `;
     const { data: { product: { starRatingSnippet } } } = useShopQuery({
-        query: query,
+        query,
         preload: true,
         variables: {
             productId
         }
     });
     if (!starRatingSnippet?.value) {
-        console.warn(widgetMetafieldError('OkendoStarRating', 'StarRatingSnippet'));
+        logger.warn(widgetMetafieldError('OkendoStarRating', 'StarRatingSnippet'));
     }
     const dataAttributes = {
         'data-oke-star-rating': '',

package/dist/esnext/fragments/index.js

@@ -1,11 +1,11 @@
 import { gql } from '@shopify/hydrogen';
-export const OKENDO_PRODUCT_STAR_RATING_FRAGMENT = gql `
-  fragment OkendoStarRatingSnippet on Product {
-    okendoStarRatingSnippet: metafield(
-      namespace: "okendo"
-      key: "StarRatingSnippet"
-    ) {
-      value
-    }
-  }
+export const OKENDO_PRODUCT_STAR_RATING_FRAGMENT = gql `
+  fragment OkendoStarRatingSnippet on Product {
+    okendoStarRatingSnippet: metafield(
+      namespace: "okendo"
+      key: "StarRatingSnippet"
+    ) {
+      value
+    }
+  }
 `;

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.info,
+    warn: isProduction ? noop : console.warn,
+    error: console.error
+};

package/dist/esnext/shared/server/requestUtils.d.ts

@@ -1,11 +1,7 @@
-import type { SKO } from '../sharedTypes';
-export declare function setInOkendoRequestContext(key: keyof OkendoRequestContextKeys, value: RequestContextSafeType | RequestContextSafeType[]): void;
 export declare function useOkendoRequestContext(): OkendoRequestContext;
-interface OkendoRequestContextKeys {
+declare type RequestContextSafeType = string | number | boolean;
+declare type RequestContext = Record<string, RequestContextSafeType>;
+export interface OkendoRequestContext extends RequestContext {
     setupFailed: boolean;
 }
-export interface OkendoRequestContext extends OkendoRequestContextKeysWithSKO {
-}
-declare type OkendoRequestContextKeysWithSKO = OkendoRequestContextKeys & SKO;
-declare type RequestContextSafeType = string | number | boolean;
 export {};

package/dist/esnext/shared/server/requestUtils.js

@@ -1,8 +1,4 @@
 import { useRequestContext } from '@shopify/hydrogen';
-export function setInOkendoRequestContext(key, value) {
-    const okendoRequestContext = useOkendoRequestContext();
-    okendoRequestContext[key] = value;
-}
 export function useOkendoRequestContext() {
     return useRequestContext('okendo');
 }

package/package.json

@@ -1,58 +1,65 @@
-{
-    "name": "@okendo/shopify-hydrogen",
-    "version": "1.2.1",
-    "description": "A component library containing Okendo Reviews React components.",
-    "main": "dist/esnext/index.js",
-    "engines": {
-        "node": ">=14"
-    },
-    "exports": {
-        ".": "./dist/esnext/index.js",
-        "./plugin": {
-            "import": "./dist/esnext/framework/plugins/plugin.js",
-            "require": "./dist/node/framework/plugins/plugin.js"
-        },
-        "./client": {
-            "import": {
-                "types": "./dist/esnext/client.d.ts",
-                "default": "./dist/esnext/client.js"
-            },
-            "node": {
-                "types": "./dist/esnext/client.d.ts",
-                "default": "./dist/esnext/client.js"
-            }
-        },
-        "./plugin.cjs": "./plugin.cjs",
-        "./package.json": "./package.json",
-        "./*": "./dist/esnext/*.js"
-    },
-    "types": "dist/esnext/index.d.ts",
-    "files": [
-        "dist",
-        "plugin.cjs"
-    ],
-    "scripts": {
-        "build": "rimraf dist/ && npm run build:esm && npm run build:plugin:cjs",
-        "build:plugin:cjs": "tsc --p tsconfig.plugin.cjs.json",
-        "build:esm": "tsc --p tsconfig.esm.json",
-        "prepublishOnly": "npm run build"
-    },
-    "author": "Okendo",
-    "license": "SEE LICENSE IN LICENSE.txt",
-    "devDependencies": {
-        "@okendo/reviews-widget-plus": "^0.49.0",
-        "@okendo/tsconfig": "0.0.2",
-        "@shopify/hydrogen": "^1.2.0",
-        "@types/node": "^17.0.35",
-        "@types/react": "^18.0.14",
-        "@types/react-dom": "^18.0.5",
-        "dotenv": "^16.0.1",
-        "ncp": "^2.0.0",
-        "rimraf": "^3.0.2",
-        "typescript": "^4.7.4",
-        "vite": "^2.9.0"
-    },
-    "peerDependencies": {
-        "@shopify/hydrogen": "1.2.x"
-    }
-}
+{
+    "name": "@okendo/shopify-hydrogen",
+    "version": "1.2.3",
+    "description": "A component library containing Okendo Reviews React components.",
+    "main": "dist/esnext/index.js",
+    "engines": {
+        "node": ">=14"
+    },
+    "exports": {
+        ".": "./dist/esnext/index.js",
+        "./plugin": {
+            "import": "./dist/esnext/framework/plugins/plugin.js",
+            "require": "./dist/node/framework/plugins/plugin.js"
+        },
+        "./client": {
+            "import": {
+                "types": "./dist/esnext/client.d.ts",
+                "default": "./dist/esnext/client.js"
+            },
+            "node": {
+                "types": "./dist/esnext/client.d.ts",
+                "default": "./dist/esnext/client.js"
+            }
+        },
+        "./plugin.cjs": "./plugin.cjs",
+        "./package.json": "./package.json",
+        "./*": "./dist/esnext/*.js"
+    },
+    "types": "dist/esnext/index.d.ts",
+    "files": [
+        "dist",
+        "plugin.cjs"
+    ],
+    "scripts": {
+        "build": "rimraf dist/ && npm run build:esm && npm run build:plugin:cjs",
+        "build:plugin:cjs": "tsc --p tsconfig.plugin.cjs.json",
+        "build:esm": "tsc --p tsconfig.esm.json",
+        "prepublishOnly": "npm run build",
+        "eslint": "eslint 'src/**/*.{ts,tsx}'",
+        "eslint-fix": "npm run eslint -- --fix"
+    },
+    "author": "Okendo",
+    "license": "SEE LICENSE IN LICENSE.txt",
+    "devDependencies": {
+        "@okendo/reviews-widget-plus": "^0.53.1",
+        "@okendo/tsconfig": "0.0.2",
+        "@shopify/hydrogen": "^1.2.0",
+        "@types/node": "^17.0.35",
+        "@types/react": "^18.0.14",
+        "@types/react-dom": "^18.0.5",
+        "@typescript-eslint/eslint-plugin": "^5.38.1",
+        "@typescript-eslint/parser": "^5.38.1",
+        "dotenv": "^16.0.1",
+        "eslint": "^8.24.0",
+        "eslint-plugin-react": "^7.31.8",
+        "eslint-plugin-react-hooks": "^4.6.0",
+        "ncp": "^2.0.0",
+        "rimraf": "^3.0.2",
+        "typescript": "^4.7.4",
+        "vite": "^2.9.0"
+    },
+    "peerDependencies": {
+        "@shopify/hydrogen": "1.2.x"
+    }
+}

package/plugin.cjs

@@ -1 +1 @@
-module.exports = require('./dist/node/framework/plugin');
+module.exports = require('./dist/node/framework/plugin');