npm - judgeme-hydrogen-fixed - Versions diffs - 1.0.0 → 1.0.2 - Mend

judgeme-hydrogen-fixed 1.0.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/CHANGELOG.md ADDED Viewed

@@ -0,0 +1,46 @@
+# Changelog
+All notable changes to this project will be documented in this file.
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+## [1.0.2] - 2026-01-06
+### Fixed
+- Fixed duplicate widgets appearing on initial page load
+- Route change effect now skips first render to avoid double initialization
+- Initial refresh is now only triggered by the script loading effect
+- Fixed widgets not displaying on initial page load
+- Added retry mechanism to wait for widget elements in DOM before initializing
+## [1.0.1] - 2026-01-06
+### Changed
+- Updated documentation and GitHub repository links
+## [1.0.0] - 2026-01-06
+### Added
+- Initial release
+- `useJudgeme` hook with proper dependency arrays (fixing the infinite render loop bug from the original package)
+- All Judge.me widget components:
+  - `JudgemePreviewBadge` - Star rating badge for product cards
+  - `JudgemeReviewWidget` - Full review widget for product pages
+  - `JudgemeCarousel` - Review carousel widget
+  - `JudgemeReviewsTab` - Reviews tab widget
+  - `JudgemeAllReviewsRating` - Overall rating display
+  - `JudgemeVerifiedBadge` - Verified badge widget
+  - `JudgemeAllReviewsCount` - Total reviews count
+  - `JudgemeMedals` - Medals/badges widget
+- Full TypeScript support
+- Proper cleanup of timeouts to prevent memory leaks
+### Fixed
+- Fixed infinite render loop caused by `useEffect` with no dependency array in original `@judgeme/shopify-hydrogen` package
+- Fixed infinite refresh loops caused by `installed.js` when deployed to Shopify Oxygen
+- Widgets now initialize by calling `jdgm_preloader()` directly instead of relying on problematic bootstrap script

package/README.md CHANGED Viewed

@@ -1,21 +1,15 @@
 # judgeme-hydrogen-fixed
-A fixed version of the official `@judgeme/shopify-hydrogen` package for integrating Judge.me reviews into Shopify Hydrogen stores.
+A fixed version of `@judgeme/shopify-hydrogen` for Shopify Hydrogen/Oxygen that eliminates infinite refresh loops and improper React hook usage.
-## Why this package?
+## Why This Package?
-The official `@judgeme/shopify-hydrogen` package has a bug in its `useJudgeme` hook - it contains a `useEffect` with **no dependency array**, which causes it to run on every render. This can lead to:
+The official `@judgeme/shopify-hydrogen` package has critical bugs that make it unusable in production:
-- Infinite refresh loops
-- Performance issues
-- Memory leaks from uncleaned timeouts
+1. **Infinite render loop** - `useEffect` with no dependency array runs on every render
+2. **Refresh loop on Oxygen** - `installed.js` causes page refreshes in production deployments
-This package provides a properly implemented version that:
-- ✅ Loads Judge.me scripts only once on mount
-- ✅ Re-renders widgets only on route changes (not every render)
-- ✅ Properly cleans up timeouts to prevent memory leaks
-- ✅ Includes proper TypeScript types
+This package fixes both issues while maintaining full compatibility with Judge.me widgets.
 ## Installation
@@ -25,130 +19,138 @@ npm install judgeme-hydrogen-fixed
 ## Usage
-### 1. Initialize Judge.me in your root component
+### 1. Add the Hook to Your Root Component
+Add `useJudgeme` to your root layout or App component:
 ```tsx
 // app/root.tsx
-import { useJudgeme } from "judgeme-hydrogen-fixed";
+import { useJudgeme } from 'judgeme-hydrogen-fixed';
 export default function App() {
   useJudgeme({
-    shopDomain: "your-store.myshopify.com",
-    publicToken: "your-judge-me-public-token",
-    cdnHost: "https://cdn.judge.me",
+    shopDomain: 'your-store.myshopify.com',
+    publicToken: 'your-judge-me-public-token',
+    cdnHost: 'https://cdn.judge.me',
     delay: 500, // optional, defaults to 500ms
   });
-  return <Outlet />;
+  return (
+    <html>
+      {/* ... */}
+    </html>
+  );
 }
 ```
-### 2. Add widgets to your product pages
+### 2. Add Widget Components
-```tsx
-// app/routes/products.$handle.tsx
-import {
-  JudgemePreviewBadge,
-  JudgemeReviewWidget,
-} from "judgeme-hydrogen-fixed";
+#### Preview Badge (Star Rating)
-function ProductPage({ product }) {
-  const productId = product.id.replace("gid://shopify/Product/", "");
+Display star ratings on product cards or near product titles:
+```tsx
+import { JudgemePreviewBadge } from 'judgeme-hydrogen-fixed';
+function ProductCard({ product }) {
   return (
     <div>
-      <h1>{product.title}</h1>
+      <h2>{product.title}</h2>
+      <JudgemePreviewBadge
+        id={product.id}
+        productTitle={product.title}
+        productHandle={product.handle}
+      />
+    </div>
+  );
+}
+```
+#### Review Widget (Full Reviews Section)
-      {/* Star rating badge - place near title */}
-      <JudgemePreviewBadge id={productId} template="product" />
+Display the complete reviews section on product pages:
-      {/* Product details... */}
+```tsx
+import { JudgemeReviewWidget } from 'judgeme-hydrogen-fixed';
-      {/* Full review widget - place at bottom */}
-      <JudgemeReviewWidget id={productId} />
+function ProductPage({ product }) {
+  return (
+    <div>
+      {/* Product content */}
+      <JudgemeReviewWidget
+        id={product.id}
+        productTitle={product.title}
+        productHandle={product.handle}
+        productImageUrl={product.featuredImage?.url}
+        productDescription={product.description}
+      />
     </div>
   );
 }
 ```
-## Available Components
-| Component                 | Description                              |
-| ------------------------- | ---------------------------------------- |
-| `JudgemePreviewBadge`     | Star rating badge for product pages      |
-| `JudgemeReviewWidget`     | Full reviews list with write review form |
-| `JudgemeCarousel`         | Carousel of recent reviews               |
-| `JudgemeReviewsTab`       | Reviews tab for tabbed layouts           |
-| `JudgemeAllReviewsRating` | Overall store rating                     |
-| `JudgemeVerifiedBadge`    | Verified store badge                     |
-| `JudgemeAllReviewsCount`  | Total review count                       |
-| `JudgemeMedals`           | Store medals/achievements                |
-## Configuration
-### useJudgeme Options
-| Option        | Type     | Required | Default | Description                                        |
-| ------------- | -------- | -------- | ------- | -------------------------------------------------- |
-| `shopDomain`  | `string` | Yes      | -       | Your Shopify store domain                          |
-| `publicToken` | `string` | Yes      | -       | Your Judge.me public token                         |
-| `cdnHost`     | `string` | Yes      | -       | Judge.me CDN host (usually `https://cdn.judge.me`) |
-| `delay`       | `number` | No       | `500`   | Delay before re-rendering widgets on route change  |
-## CSP Configuration
-If you're using Content Security Policy, add these domains:
-```typescript
-// entry.server.tsx
-const scriptSrc = [
-  // ... other sources
-  "https://cdn.judge.me",
-  "https://cdnwidget.judge.me",
-  "https://*.judge.me",
-];
-const connectSrc = [
-  // ... other sources
-  "https://cdn.judge.me",
-  "https://*.judge.me",
-];
-const styleSrc = [
-  // ... other sources
-  "https://*.judge.me",
-];
-const imgSrc = [
-  // ... other sources
-  "https://*.judge.me",
-];
-```
+### Available Components
-## The Bug Fix Explained
+| Component | Description |
+|-----------|-------------|
+| `JudgemePreviewBadge` | Star rating badge for product cards |
+| `JudgemeReviewWidget` | Full review widget with reviews list and write review form |
+| `JudgemeCarousel` | Review carousel widget |
+| `JudgemeReviewsTab` | Reviews tab widget |
+| `JudgemeAllReviewsRating` | Overall rating display across all products |
+| `JudgemeVerifiedBadge` | Verified badge for social proof |
+| `JudgemeAllReviewsCount` | Total reviews count across all products |
+| `JudgemeMedals` | Store medals/badges widget |
-The original package has this code:
+## How It Works
-```javascript
-// ❌ Original (buggy) - runs on EVERY render
-useEffect(() => {
-  // Widget re-render logic...
-}); // No dependency array!
-```
+### The Problem with installed.js
+The official Judge.me package loads `installed.js` which performs automatic initialization. On Shopify Oxygen (and other edge deployments), this script causes infinite page refresh loops.
+### Our Solution
-This package fixes it:
+1. **No installed.js** - We don't load the problematic bootstrap script
+2. **Direct preloader call** - Widgets are initialized by calling `jdgm_preloader()` directly
+3. **Smart retry mechanism** - Waits for widget elements to appear in DOM before initializing
+4. **Proper React hooks** - Correct dependency arrays prevent infinite render loops
+5. **Route change handling** - Widgets re-initialize on client-side navigation
-```javascript
-// ✅ Fixed - runs only on route changes
-useEffect(() => {
-  // Widget re-render logic...
-}, [location.pathname, location.search, delay]);
+## Configuration Options
+| Option | Type | Required | Default | Description |
+|--------|------|----------|---------|-------------|
+| `shopDomain` | `string` | Yes | - | Your Shopify store domain |
+| `publicToken` | `string` | Yes | - | Your Judge.me public token |
+| `cdnHost` | `string` | Yes | - | Judge.me CDN host (usually `https://cdn.judge.me`) |
+| `delay` | `number` | No | `500` | Delay (ms) before re-rendering widgets on route change |
+## TypeScript Support
+Full TypeScript support is included. All components and the hook are fully typed.
+```tsx
+import type {
+  UseJudgemeConfig,
+  JudgemePreviewBadgeProps,
+  JudgemeReviewWidgetProps,
+} from 'judgeme-hydrogen-fixed';
 ```
+## Finding Your Judge.me Credentials
+1. Log in to your [Judge.me dashboard](https://judge.me/dashboard)
+2. Go to **Settings** > **Technical**
+3. Find your **Public Token** and **Shop Domain**
+4. The CDN host is typically `https://cdn.judge.me`
 ## License
-MIT
+MIT © Ben Goodman
-## Contributing
+## Links
-Issues and PRs welcome! If Judge.me fixes the official package, this one will be deprecated.
+- [GitHub Repository](https://github.com/ben-goodman-uk/judgeme-hydrogen-fixed)
+- [Report Issues](https://github.com/ben-goodman-uk/judgeme-hydrogen-fixed/issues)
+- [npm Package](https://www.npmjs.com/package/judgeme-hydrogen-fixed)

package/dist/index.d.mts CHANGED Viewed

@@ -6,13 +6,26 @@ declare global {
             SHOP_DOMAIN?: string;
             PLATFORM?: string;
             PUBLIC_TOKEN?: string;
-            productData?: unknown;
+            productData?: {
+                id: string;
+                title: string;
+                handle: string;
+                description?: string;
+                image?: string;
+            };
         };
         jdgm_preloader?: () => void;
         jdgmCacheServer?: {
             reloadAll: () => void;
         };
         jdgm_rerender?: ReturnType<typeof setTimeout>;
+        JDGM_PRODUCT?: {
+            id: string;
+            title: string;
+            handle: string;
+            description?: string;
+            url?: string;
+        };
     }
 }
 interface UseJudgemeConfig {
@@ -44,12 +57,40 @@ interface JudgemePreviewBadgeProps {
      * @default 'product'
      */
     template?: 'product' | 'collection';
+    /**
+     * Product title - needed for the review modal
+     */
+    productTitle?: string;
+    /**
+     * Product handle/slug
+     */
+    productHandle?: string;
+    /**
+     * Product image URL
+     */
+    productImageUrl?: string;
 }
 interface JudgemeReviewWidgetProps {
     /**
      * Shopify product ID (numeric ID only, not the full GID)
      */
     id: string;
+    /**
+     * Product title - needed for the review modal
+     */
+    productTitle?: string;
+    /**
+     * Product handle/slug
+     */
+    productHandle?: string;
+    /**
+     * Product image URL
+     */
+    productImageUrl?: string;
+    /**
+     * Product description
+     */
+    productDescription?: string;
 }
 interface JudgemeCarouselProps {
 }
@@ -65,20 +106,25 @@ interface JudgemeMedalsProps {
 }
 /**
- * Fixed version of useJudgeme that properly handles React's render cycle.
+ * Fixed version of useJudgeme for Shopify Hydrogen/Oxygen.
+ *
+ * ## Problems with the official @judgeme/shopify-hydrogen package:
  *
- * The original @judgeme/shopify-hydrogen package has a useEffect with no
- * dependency array that runs on every render, causing infinite refresh loops.
+ * 1. **Infinite render loop**: useEffect with no dependency array runs on every render
+ * 2. **Refresh loop on Oxygen**: installed.js causes page refreshes in production
  *
- * This fixed version:
- * 1. Loads Judge.me scripts only once on mount
- * 2. Re-renders widgets only on route changes (not every render)
- * 3. Properly cleans up timeouts to prevent memory leaks
+ * ## How this version fixes it:
+ *
+ * 1. **No installed.js** - Does not load installed.js which causes refresh loops on Oxygen
+ * 2. **Direct preloader call** - Calls jdgm_preloader() directly to initialize widgets
+ * 3. **Proper dependencies** - Re-renders widgets only on actual route changes
+ * 4. **Global deduplication** - Prevents double-loading across component remounts
+ * 5. **Proper cleanup** - Cleans up timeouts to prevent memory leaks
  *
  * @example
  * ```tsx
  * // In your root.tsx or App component
- * import { useJudgeme } from '@judgeme/hydrogen-fixed';
+ * import { useJudgeme } from 'judgeme-hydrogen-fixed';
  *
  * function App() {
  *   useJudgeme({
@@ -91,6 +137,12 @@ interface JudgemeMedalsProps {
  *   return <Outlet />;
  * }
  * ```
+ *
+ * @param config - Configuration options
+ * @param config.shopDomain - Your Shopify store domain (e.g., 'your-store.myshopify.com')
+ * @param config.publicToken - Your Judge.me public token
+ * @param config.cdnHost - Judge.me CDN host (usually 'https://cdn.judge.me')
+ * @param config.delay - Delay before re-rendering widgets on route change (default: 500ms)
  */
 declare function useJudgeme({ shopDomain, publicToken, cdnHost, delay, }: UseJudgemeConfig): void;
@@ -98,12 +150,12 @@ declare function useJudgeme({ shopDomain, publicToken, cdnHost, delay, }: UseJud
  * Preview badge showing star rating for a product
  * Place this near the product title on product pages
  */
-declare function JudgemePreviewBadge({ id, template, }: JudgemePreviewBadgeProps): React.ReactElement;
+declare function JudgemePreviewBadge({ id, template, productTitle, productHandle, productImageUrl, }: JudgemePreviewBadgeProps): React.ReactElement;
 /**
  * Full review widget with reviews list and write review form
  * Place this at the bottom of product pages
  */
-declare function JudgemeReviewWidget({ id, }: JudgemeReviewWidgetProps): React.ReactElement;
+declare function JudgemeReviewWidget({ id, productTitle, productHandle, productImageUrl, productDescription, }: JudgemeReviewWidgetProps): React.ReactElement;
 /**
  * Carousel showing recent reviews across all products
  */

package/dist/index.d.ts CHANGED Viewed

@@ -6,13 +6,26 @@ declare global {
             SHOP_DOMAIN?: string;
             PLATFORM?: string;
             PUBLIC_TOKEN?: string;
-            productData?: unknown;
+            productData?: {
+                id: string;
+                title: string;
+                handle: string;
+                description?: string;
+                image?: string;
+            };
         };
         jdgm_preloader?: () => void;
         jdgmCacheServer?: {
             reloadAll: () => void;
         };
         jdgm_rerender?: ReturnType<typeof setTimeout>;
+        JDGM_PRODUCT?: {
+            id: string;
+            title: string;
+            handle: string;
+            description?: string;
+            url?: string;
+        };
     }
 }
 interface UseJudgemeConfig {
@@ -44,12 +57,40 @@ interface JudgemePreviewBadgeProps {
      * @default 'product'
      */
     template?: 'product' | 'collection';
+    /**
+     * Product title - needed for the review modal
+     */
+    productTitle?: string;
+    /**
+     * Product handle/slug
+     */
+    productHandle?: string;
+    /**
+     * Product image URL
+     */
+    productImageUrl?: string;
 }
 interface JudgemeReviewWidgetProps {
     /**
      * Shopify product ID (numeric ID only, not the full GID)
      */
     id: string;
+    /**
+     * Product title - needed for the review modal
+     */
+    productTitle?: string;
+    /**
+     * Product handle/slug
+     */
+    productHandle?: string;
+    /**
+     * Product image URL
+     */
+    productImageUrl?: string;
+    /**
+     * Product description
+     */
+    productDescription?: string;
 }
 interface JudgemeCarouselProps {
 }
@@ -65,20 +106,25 @@ interface JudgemeMedalsProps {
 }
 /**
- * Fixed version of useJudgeme that properly handles React's render cycle.
+ * Fixed version of useJudgeme for Shopify Hydrogen/Oxygen.
+ *
+ * ## Problems with the official @judgeme/shopify-hydrogen package:
  *
- * The original @judgeme/shopify-hydrogen package has a useEffect with no
- * dependency array that runs on every render, causing infinite refresh loops.
+ * 1. **Infinite render loop**: useEffect with no dependency array runs on every render
+ * 2. **Refresh loop on Oxygen**: installed.js causes page refreshes in production
  *
- * This fixed version:
- * 1. Loads Judge.me scripts only once on mount
- * 2. Re-renders widgets only on route changes (not every render)
- * 3. Properly cleans up timeouts to prevent memory leaks
+ * ## How this version fixes it:
+ *
+ * 1. **No installed.js** - Does not load installed.js which causes refresh loops on Oxygen
+ * 2. **Direct preloader call** - Calls jdgm_preloader() directly to initialize widgets
+ * 3. **Proper dependencies** - Re-renders widgets only on actual route changes
+ * 4. **Global deduplication** - Prevents double-loading across component remounts
+ * 5. **Proper cleanup** - Cleans up timeouts to prevent memory leaks
  *
  * @example
  * ```tsx
  * // In your root.tsx or App component
- * import { useJudgeme } from '@judgeme/hydrogen-fixed';
+ * import { useJudgeme } from 'judgeme-hydrogen-fixed';
  *
  * function App() {
  *   useJudgeme({
@@ -91,6 +137,12 @@ interface JudgemeMedalsProps {
  *   return <Outlet />;
  * }
  * ```
+ *
+ * @param config - Configuration options
+ * @param config.shopDomain - Your Shopify store domain (e.g., 'your-store.myshopify.com')
+ * @param config.publicToken - Your Judge.me public token
+ * @param config.cdnHost - Judge.me CDN host (usually 'https://cdn.judge.me')
+ * @param config.delay - Delay before re-rendering widgets on route change (default: 500ms)
  */
 declare function useJudgeme({ shopDomain, publicToken, cdnHost, delay, }: UseJudgemeConfig): void;
@@ -98,12 +150,12 @@ declare function useJudgeme({ shopDomain, publicToken, cdnHost, delay, }: UseJud
  * Preview badge showing star rating for a product
  * Place this near the product title on product pages
  */
-declare function JudgemePreviewBadge({ id, template, }: JudgemePreviewBadgeProps): React.ReactElement;
+declare function JudgemePreviewBadge({ id, template, productTitle, productHandle, productImageUrl, }: JudgemePreviewBadgeProps): React.ReactElement;
 /**
  * Full review widget with reviews list and write review form
  * Place this at the bottom of product pages
  */
-declare function JudgemeReviewWidget({ id, }: JudgemeReviewWidgetProps): React.ReactElement;
+declare function JudgemeReviewWidget({ id, productTitle, productHandle, productImageUrl, productDescription, }: JudgemeReviewWidgetProps): React.ReactElement;
 /**
  * Carousel showing recent reviews across all products
  */

package/dist/index.js CHANGED Viewed

@@ -35,6 +35,7 @@ module.exports = __toCommonJS(index_exports);
 // src/useJudgeme.ts
 var import_react = require("react");
 var import_react2 = require("@remix-run/react");
+var globalScriptsLoaded = false;
 function useJudgeme({
   shopDomain,
   publicToken,
@@ -42,75 +43,98 @@ function useJudgeme({
   delay = 500
 }) {
   const location = (0, import_react2.useLocation)();
-  const isLoadedRef = (0, import_react.useRef)(false);
+  const lastPathnameRef = (0, import_react.useRef)("");
   const rerenderTimeoutRef = (0, import_react.useRef)(null);
+  const isInitializedRef = (0, import_react.useRef)(false);
+  const initialRefreshDoneRef = (0, import_react.useRef)(false);
+  const refreshWidgets = (0, import_react.useCallback)(() => {
+    if (typeof window === "undefined") return;
+    const attemptRefresh = (retriesLeft) => {
+      const widgets = document.querySelectorAll(".jdgm-widget");
+      if (widgets.length === 0 && retriesLeft > 0) {
+        setTimeout(() => attemptRefresh(retriesLeft - 1), 200);
+        return;
+      }
+      try {
+        if (typeof window.jdgm_preloader === "function" && !window.jdgmCacheServer) {
+          window.jdgm_preloader();
+        } else if (window.jdgmCacheServer) {
+          window.jdgmCacheServer.reloadAll();
+        }
+      } catch (e) {
+        console.warn("Judge.me: Error refreshing widgets", e);
+      }
+    };
+    attemptRefresh(10);
+  }, []);
   (0, import_react.useEffect)(() => {
-    if (isLoadedRef.current) return;
+    if (typeof window === "undefined") return;
+    if (globalScriptsLoaded || isInitializedRef.current) return;
     if (!shopDomain || !publicToken || !cdnHost) {
       console.warn(
         "Judge.me: Missing config values for store domain, store public token, or cdn host"
       );
       return;
     }
-    const shopCredentials = `
-      if (typeof window.jdgm === 'undefined') {
-        window.jdgm = {};
-        window.jdgm.SHOP_DOMAIN = '${shopDomain}';
-        window.jdgm.PLATFORM = 'shopify';
-        window.jdgm.PUBLIC_TOKEN = '${publicToken}';
-      }
-    `;
+    globalScriptsLoaded = true;
+    isInitializedRef.current = true;
+    window.jdgm = window.jdgm || {};
+    window.jdgm.SHOP_DOMAIN = shopDomain;
+    window.jdgm.PLATFORM = "shopify";
+    window.jdgm.PUBLIC_TOKEN = publicToken;
     fetch(`${cdnHost}/widget_preloader.js`).then((res) => {
       if (!res.ok) throw new Error(`HTTP ${res.status}`);
       return res.text();
     }).then((text) => {
-      const preloaderFunction = `function jdgm_preloader(){${text}}`;
-      const shopCredentialsScript = document.createElement("script");
       const preloaderScript = document.createElement("script");
-      const installedScript = document.createElement("script");
-      shopCredentialsScript.innerText = shopCredentials;
-      preloaderScript.innerText = preloaderFunction;
-      installedScript.src = `${cdnHost}/assets/installed.js`;
-      document.head.append(
-        shopCredentialsScript,
-        preloaderScript,
-        installedScript
-      );
-      isLoadedRef.current = true;
-      console.log("Judge.me scripts loaded");
+      preloaderScript.innerText = `function jdgm_preloader(){${text}}`;
+      document.head.appendChild(preloaderScript);
+      console.log("Judge.me preloader script loaded, initializing widgets...");
+      initialRefreshDoneRef.current = true;
+      refreshWidgets();
     }).catch((error) => {
       console.error("Judge.me: Failed to load scripts", error);
+      globalScriptsLoaded = false;
+      isInitializedRef.current = false;
     });
     return () => {
       if (rerenderTimeoutRef.current) {
         clearTimeout(rerenderTimeoutRef.current);
       }
     };
-  }, [shopDomain, publicToken, cdnHost]);
+  }, [shopDomain, publicToken, cdnHost, refreshWidgets]);
   (0, import_react.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    const normalizedPathname = location.pathname.replace(/\/$/, "") || "/";
+    if (lastPathnameRef.current === "") {
+      lastPathnameRef.current = normalizedPathname;
+      return;
+    }
+    if (lastPathnameRef.current === normalizedPathname) {
+      return;
+    }
+    lastPathnameRef.current = normalizedPathname;
     if (rerenderTimeoutRef.current) {
       clearTimeout(rerenderTimeoutRef.current);
     }
-    rerenderTimeoutRef.current = setTimeout(() => {
-      if (window.jdgm_preloader && !window.jdgmCacheServer) {
-        window.jdgm_preloader();
-      } else if (window.jdgmCacheServer) {
-        window.jdgmCacheServer.reloadAll();
-      }
-    }, delay);
+    rerenderTimeoutRef.current = setTimeout(refreshWidgets, delay);
     return () => {
       if (rerenderTimeoutRef.current) {
         clearTimeout(rerenderTimeoutRef.current);
       }
     };
-  }, [location.pathname, location.search, delay]);
+  }, [location.pathname, delay, refreshWidgets]);
 }
 // src/components.tsx
+var import_react3 = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
 function JudgemePreviewBadge({
   id,
-  template = "product"
+  template = "product",
+  productTitle,
+  productHandle,
+  productImageUrl
 }) {
   const shopifyId = id ? id.replace("gid://shopify/Product/", "") : "";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -119,15 +143,61 @@ function JudgemePreviewBadge({
       className: "jdgm-widget jdgm-preview-badge",
       "data-id": shopifyId,
       "data-template": template,
-      "data-auto-install": "false"
+      "data-auto-install": "false",
+      ...productTitle && { "data-product-title": productTitle },
+      ...productHandle && { "data-product-handle": productHandle },
+      ...productImageUrl && { "data-product-url": productImageUrl }
     }
   );
 }
 function JudgemeReviewWidget({
-  id
+  id,
+  productTitle,
+  productHandle,
+  productImageUrl,
+  productDescription
 }) {
   const shopifyId = id ? id.replace("gid://shopify/Product/", "") : "";
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "jdgm-widget jdgm-review-widget", "data-id": shopifyId });
+  (0, import_react3.useEffect)(() => {
+    if (typeof window !== "undefined" && productTitle) {
+      if (!window.jdgm) {
+        window.jdgm = {};
+      }
+      window.jdgm.productData = {
+        id: shopifyId,
+        title: productTitle,
+        handle: productHandle || "",
+        description: productDescription || "",
+        image: productImageUrl || ""
+      };
+      window.JDGM_PRODUCT = {
+        id: shopifyId,
+        title: productTitle,
+        handle: productHandle || "",
+        description: productDescription || "",
+        url: productImageUrl || ""
+      };
+    }
+  }, [
+    shopifyId,
+    productTitle,
+    productHandle,
+    productImageUrl,
+    productDescription
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: "jdgm-widget jdgm-review-widget",
+      "data-id": shopifyId,
+      ...productTitle && { "data-product-title": productTitle },
+      ...productHandle && { "data-product-handle": productHandle },
+      ...productImageUrl && { "data-product-url": productImageUrl },
+      ...productDescription && {
+        "data-product-description": productDescription
+      }
+    }
+  );
 }
 function JudgemeCarousel() {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "jdgm-widget jdgm-carousel-widget" });

package/dist/index.mjs CHANGED Viewed

@@ -1,6 +1,7 @@
 // src/useJudgeme.ts
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useCallback } from "react";
 import { useLocation } from "@remix-run/react";
+var globalScriptsLoaded = false;
 function useJudgeme({
   shopDomain,
   publicToken,
@@ -8,75 +9,98 @@ function useJudgeme({
   delay = 500
 }) {
   const location = useLocation();
-  const isLoadedRef = useRef(false);
+  const lastPathnameRef = useRef("");
   const rerenderTimeoutRef = useRef(null);
+  const isInitializedRef = useRef(false);
+  const initialRefreshDoneRef = useRef(false);
+  const refreshWidgets = useCallback(() => {
+    if (typeof window === "undefined") return;
+    const attemptRefresh = (retriesLeft) => {
+      const widgets = document.querySelectorAll(".jdgm-widget");
+      if (widgets.length === 0 && retriesLeft > 0) {
+        setTimeout(() => attemptRefresh(retriesLeft - 1), 200);
+        return;
+      }
+      try {
+        if (typeof window.jdgm_preloader === "function" && !window.jdgmCacheServer) {
+          window.jdgm_preloader();
+        } else if (window.jdgmCacheServer) {
+          window.jdgmCacheServer.reloadAll();
+        }
+      } catch (e) {
+        console.warn("Judge.me: Error refreshing widgets", e);
+      }
+    };
+    attemptRefresh(10);
+  }, []);
   useEffect(() => {
-    if (isLoadedRef.current) return;
+    if (typeof window === "undefined") return;
+    if (globalScriptsLoaded || isInitializedRef.current) return;
     if (!shopDomain || !publicToken || !cdnHost) {
       console.warn(
         "Judge.me: Missing config values for store domain, store public token, or cdn host"
       );
       return;
     }
-    const shopCredentials = `
-      if (typeof window.jdgm === 'undefined') {
-        window.jdgm = {};
-        window.jdgm.SHOP_DOMAIN = '${shopDomain}';
-        window.jdgm.PLATFORM = 'shopify';
-        window.jdgm.PUBLIC_TOKEN = '${publicToken}';
-      }
-    `;
+    globalScriptsLoaded = true;
+    isInitializedRef.current = true;
+    window.jdgm = window.jdgm || {};
+    window.jdgm.SHOP_DOMAIN = shopDomain;
+    window.jdgm.PLATFORM = "shopify";
+    window.jdgm.PUBLIC_TOKEN = publicToken;
     fetch(`${cdnHost}/widget_preloader.js`).then((res) => {
       if (!res.ok) throw new Error(`HTTP ${res.status}`);
       return res.text();
     }).then((text) => {
-      const preloaderFunction = `function jdgm_preloader(){${text}}`;
-      const shopCredentialsScript = document.createElement("script");
       const preloaderScript = document.createElement("script");
-      const installedScript = document.createElement("script");
-      shopCredentialsScript.innerText = shopCredentials;
-      preloaderScript.innerText = preloaderFunction;
-      installedScript.src = `${cdnHost}/assets/installed.js`;
-      document.head.append(
-        shopCredentialsScript,
-        preloaderScript,
-        installedScript
-      );
-      isLoadedRef.current = true;
-      console.log("Judge.me scripts loaded");
+      preloaderScript.innerText = `function jdgm_preloader(){${text}}`;
+      document.head.appendChild(preloaderScript);
+      console.log("Judge.me preloader script loaded, initializing widgets...");
+      initialRefreshDoneRef.current = true;
+      refreshWidgets();
     }).catch((error) => {
       console.error("Judge.me: Failed to load scripts", error);
+      globalScriptsLoaded = false;
+      isInitializedRef.current = false;
     });
     return () => {
       if (rerenderTimeoutRef.current) {
         clearTimeout(rerenderTimeoutRef.current);
       }
     };
-  }, [shopDomain, publicToken, cdnHost]);
+  }, [shopDomain, publicToken, cdnHost, refreshWidgets]);
   useEffect(() => {
+    if (typeof window === "undefined") return;
+    const normalizedPathname = location.pathname.replace(/\/$/, "") || "/";
+    if (lastPathnameRef.current === "") {
+      lastPathnameRef.current = normalizedPathname;
+      return;
+    }
+    if (lastPathnameRef.current === normalizedPathname) {
+      return;
+    }
+    lastPathnameRef.current = normalizedPathname;
     if (rerenderTimeoutRef.current) {
       clearTimeout(rerenderTimeoutRef.current);
     }
-    rerenderTimeoutRef.current = setTimeout(() => {
-      if (window.jdgm_preloader && !window.jdgmCacheServer) {
-        window.jdgm_preloader();
-      } else if (window.jdgmCacheServer) {
-        window.jdgmCacheServer.reloadAll();
-      }
-    }, delay);
+    rerenderTimeoutRef.current = setTimeout(refreshWidgets, delay);
     return () => {
       if (rerenderTimeoutRef.current) {
         clearTimeout(rerenderTimeoutRef.current);
       }
     };
-  }, [location.pathname, location.search, delay]);
+  }, [location.pathname, delay, refreshWidgets]);
 }
 // src/components.tsx
+import { useEffect as useEffect2 } from "react";
 import { jsx } from "react/jsx-runtime";
 function JudgemePreviewBadge({
   id,
-  template = "product"
+  template = "product",
+  productTitle,
+  productHandle,
+  productImageUrl
 }) {
   const shopifyId = id ? id.replace("gid://shopify/Product/", "") : "";
   return /* @__PURE__ */ jsx(
@@ -85,15 +109,61 @@ function JudgemePreviewBadge({
       className: "jdgm-widget jdgm-preview-badge",
       "data-id": shopifyId,
       "data-template": template,
-      "data-auto-install": "false"
+      "data-auto-install": "false",
+      ...productTitle && { "data-product-title": productTitle },
+      ...productHandle && { "data-product-handle": productHandle },
+      ...productImageUrl && { "data-product-url": productImageUrl }
     }
   );
 }
 function JudgemeReviewWidget({
-  id
+  id,
+  productTitle,
+  productHandle,
+  productImageUrl,
+  productDescription
 }) {
   const shopifyId = id ? id.replace("gid://shopify/Product/", "") : "";
-  return /* @__PURE__ */ jsx("div", { className: "jdgm-widget jdgm-review-widget", "data-id": shopifyId });
+  useEffect2(() => {
+    if (typeof window !== "undefined" && productTitle) {
+      if (!window.jdgm) {
+        window.jdgm = {};
+      }
+      window.jdgm.productData = {
+        id: shopifyId,
+        title: productTitle,
+        handle: productHandle || "",
+        description: productDescription || "",
+        image: productImageUrl || ""
+      };
+      window.JDGM_PRODUCT = {
+        id: shopifyId,
+        title: productTitle,
+        handle: productHandle || "",
+        description: productDescription || "",
+        url: productImageUrl || ""
+      };
+    }
+  }, [
+    shopifyId,
+    productTitle,
+    productHandle,
+    productImageUrl,
+    productDescription
+  ]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "jdgm-widget jdgm-review-widget",
+      "data-id": shopifyId,
+      ...productTitle && { "data-product-title": productTitle },
+      ...productHandle && { "data-product-handle": productHandle },
+      ...productImageUrl && { "data-product-url": productImageUrl },
+      ...productDescription && {
+        "data-product-description": productDescription
+      }
+    }
+  );
 }
 function JudgemeCarousel() {
   return /* @__PURE__ */ jsx("div", { className: "jdgm-widget jdgm-carousel-widget" });

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "judgeme-hydrogen-fixed",
-  "version": "1.0.0",
-  "description": "Fixed version of @judgeme/shopify-hydrogen with proper React hooks implementation. Fixes infinite refresh loop bug.",
+  "version": "1.0.2",
+  "description": "Fixed version of @judgeme/shopify-hydrogen for Hydrogen/Oxygen. Fixes infinite refresh loops caused by installed.js and improper React hooks.",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -15,6 +15,7 @@
   "files": [
     "dist",
     "README.md",
+    "CHANGELOG.md",
     "LICENSE"
   ],
   "scripts": {
@@ -27,13 +28,23 @@
     "judge.me",
     "shopify",
     "hydrogen",
+    "oxygen",
     "react",
     "reviews",
     "remix",
-    "bug-fix"
+    "bug-fix",
+    "refresh-loop-fix"
   ],
   "author": "Ben Goodman",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ben-goodman-uk/judgeme-hydrogen-fixed"
+  },
+  "bugs": {
+    "url": "https://github.com/ben-goodman-uk/judgeme-hydrogen-fixed/issues"
+  },
+  "homepage": "https://github.com/ben-goodman-uk/judgeme-hydrogen-fixed#readme",
   "peerDependencies": {
     "react": ">=18.0.0",
     "@remix-run/react": ">=2.0.0"