Merge pull request #90 from Nosto/nosto-reload-guard

Improve nosto reload guard

spec/nosto.reload.spec.tsx

@@ -0,0 +1,17 @@
+import React from "react"
+import { render } from "@testing-library/react"
+import { NostoProvider, NostoHome } from "../src/index"
+import "@testing-library/jest-dom"
+
+test("verify Nosto is not loaded twice", async () => {
+  // @ts-expect-error dummy placeholder for Nosto iframe window scope  
+  window.nosto = {}
+
+  render(
+    <NostoProvider account="shopify-11368366139">
+      <NostoHome />
+    </NostoProvider>
+  )
+
+  expect(document.querySelector("[nosto-client-script]")).not.toBeInTheDocument()  
+})

src/components/NostoProvider.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, isValidElement } from "react"
 import { NostoContext, RecommendationComponent } from "../context"
 import { NostoClient } from "../types"
+import { isNostoLoaded } from "./helpers"
 
 /**
  * @group Components
@@ -86,7 +87,7 @@ export default function NostoProvider(props: NostoProviderProps) {
       window.nostojs(api => api.setAutoLoad(false))
     }
 
-    if (!document.querySelectorAll("[nosto-client-script]").length && !shopifyMarkets) {
+    if (!isNostoLoaded() && !shopifyMarkets) {
       const script = document.createElement("script")
       script.type = "text/javascript"
       script.src = "//" + (host || "connect.nosto.com") + "/include/" + account

src/components/helpers.ts

@@ -0,0 +1,3 @@
+export function isNostoLoaded() {
+  return typeof window.nosto !== "undefined"    
+}