[Draft] feat: partial switch to use client script proxy

package.json

@@ -23,12 +23,18 @@
     "prettier": "prettier '{src,spec}/**' --list-different",
     "prettier:fix": "prettier '{src,spec}/**' --write",
     "test": "vitest run --silent",
+    "test-loud": "vitest run",
     "typedoc": "typedoc src/index.ts"
   },
   "files": [
     "dist",
     "src"
   ],
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "@nosto/nosto-js": "*"
+  },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^16.0.0",
@@ -43,8 +49,6 @@
     "eslint-plugin-promise": "^7.1.0",
     "eslint-plugin-react": "^7.33.2",
     "prettier": "^3.3.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
     "react-router": "^6.25.1",
     "react-router-dom": "^6.25.1",
     "rimraf": "^6.0.1",
@@ -61,8 +65,7 @@
     ".": {
       "import": "./dist/index.es.js",
       "require": "./dist/index.umd.js"
-    },
-    "./shopify-hydrogen": "./dist/index.es.js"
+    }
   },
   "bugs": {
     "url": "https://github.com/Nosto/nosto-react/issues"

spec/category.spec.tsx

@@ -4,11 +4,12 @@ import { NostoProvider, NostoCategory, NostoPlacement } from "../src/index"
 import RecommendationComponent from "./renderer"
 import { waitForRecommendations } from "./utils"
 import mockApi from "./mocks/mock-api"
+import { mockNostojs } from "@nosto/nosto-js/testing"
 
 test("Category page render", async () => {
   const placements = ["categorypage-nosto-1", "categorypage-nosto-2"]
   const mocked = mockApi(placements)
-  window.nostojs = cb => cb(mocked)
+  mockNostojs(mocked)
 
   render(
     <NostoProvider account="dummy-account" recommendationComponent={<RecommendationComponent />} loadScript={false}>

spec/checkout.spec.tsx

@@ -4,11 +4,12 @@ import { NostoProvider, NostoCheckout, NostoPlacement } from "../src/index"
 import RecommendationComponent from "./renderer"
 import { waitForRecommendations } from "./utils"
 import mockApi from "./mocks/mock-api"
+import { mockNostojs } from "@nosto/nosto-js/testing"
 
 test("Checkout page render", async () => {
   const placements = ["cartpage-nosto-1", "cartpage-nosto-2", "cartpage-nosto-3"]
   const mocked = mockApi(placements)
-   window.nostojs = cb => cb(mocked)
+  mockNostojs(mocked)
 
   render(
     <NostoProvider

spec/events.ts

@@ -12,9 +12,6 @@ interface Event {
 
 function createEvent(event: Event): Event {
   return {
-    cart_popup: false,
-    preview: false,
-    skipcache: false,
     elements: [],
     events: [],
     response_mode: "JSON_ORIGINAL",

spec/fohofo.spec.tsx

@@ -4,11 +4,12 @@ import { NostoProvider, Nosto404, NostoPlacement } from "../src/index"
 import RecommendationComponent from "./renderer"
 import { waitForRecommendations } from "./utils"
 import mockApi from "./mocks/mock-api"
+import { mockNostojs } from "@nosto/nosto-js/testing"
 
 test("404 page render", async () => {
   const placements = ["notfound-nosto-1", "notfound-nosto-2"]
   const mocked = mockApi(placements)
-  window.nostojs = cb => cb(mocked)
+  mockNostojs(mocked)
 
   render(
     <NostoProvider account="dummy-account" recommendationComponent={<RecommendationComponent />} loadScript={false}>

spec/home.spec.tsx

@@ -1,14 +1,15 @@
-import { test, expect, vi } from "vitest"
+import { test, expect } from "vitest"
 import { render, screen } from "@testing-library/react"
 import { NostoProvider, NostoHome, NostoPlacement } from "../src/index"
 import RecommendationComponent from "./renderer"
 import { waitForRecommendations } from "./utils"
 import mockApi from "./mocks/mock-api"
+import { mockNostojs } from "@nosto/nosto-js/testing"
 
 test("Home page render", async () => {
   const placements = ["frontpage-nosto-1", "frontpage-nosto-2"]
   const mocked = mockApi(placements)
-  window.nostojs = cb => cb(mocked)
+  mockNostojs(mocked)
 
   render(
     <NostoProvider account="dummy-account" recommendationComponent={<RecommendationComponent />} loadScript={false}>

spec/mocks/mock-api.ts

@@ -1,18 +1,18 @@
 import { vi } from "vitest"
 import { jsonMockData } from "./mock-data"
 import { Product } from "../../src"
-import { Action, Data, NostoClient, PageType, Session } from "../../src/types"
+import { API, Session, Action, PageType, TaggingData } from "@nosto/nosto-js/client"
 
 function normalizeProduct(data: Product | string) {
   return typeof data === "string" ? { product_id: data } : data
 }
 
-let latestActionData: Partial<Data>
+let latestActionData: Partial<TaggingData>
 
 function newSession(placements: string[]) {
-  const data: Partial<Data> & { responseMode?: string} = {}
+  const data: Partial<TaggingData> & { responseMode?: string} = {}
 
-  function newAction(pageType: PageType, overrides?: Partial<Data>) {
+  function newAction(pageType: PageType, overrides?: Partial<TaggingData>) {
     const actionData = { ...data, ...overrides,  pageType }
     latestActionData = actionData
 
@@ -53,14 +53,15 @@ function newSession(placements: string[]) {
 export default function (placements: string[]) {
   const session = newSession(placements)
 
+  // TODO: Fix mock
   return {
     setAutoLoad: vi.fn(),
     listen: vi.fn(),
     placements: {
       injectCampaigns: vi.fn(),
-      getPlacements: () => placements
-    },
+      getPlacements: () => placements,
+    } as unknown as API["placements"],
     defaultSession: () => session,
     getData: () =>  latestActionData,
-  } satisfies NostoClient & { getData: () => Partial<Data> }
+  }
 }

spec/other.spec.tsx

@@ -4,11 +4,12 @@ import { NostoProvider, NostoOther, NostoPlacement } from "../src/index"
 import RecommendationComponent from "./renderer"
 import { waitForRecommendations } from "./utils"
 import mockApi from "./mocks/mock-api"
+import { mockNostojs } from "@nosto/nosto-js/testing"
 
 test("Other page render", async () => {
   const placements = ["cartpage-nosto-1", "categorypage-nosto-1", "productpage-nosto-1", "productpage-nosto-2"]
   const mocked = mockApi(placements)
-  window.nostojs = cb => cb(mocked)
+  mockNostojs(mocked)
 
   render(
     <NostoProvider account="dummy-account" recommendationComponent={<RecommendationComponent />} loadScript={false}>

spec/product.sku.spec.tsx

@@ -5,6 +5,7 @@ import { NostoProvider, NostoPlacement, NostoProduct } from "../src/index"
 import RecommendationComponent from "./renderer"
 import { waitForRecommendations } from "./utils"
 import mockApi from "./mocks/mock-api"
+import { mockNostojs } from "@nosto/nosto-js/testing"
 
 function ProductPage() {
   const productId = "dummy-product-id"
@@ -45,7 +46,7 @@ function ProductPage() {
 test("Product page with SKU id", async () => {
   const placements = ["productpage-nosto-1"]
   const mocked = mockApi(placements)
-  window.nostojs = cb => cb(mocked)
+  mockNostojs(mocked)
 
   render(
     <NostoProvider account="dummy-account" recommendationComponent={<RecommendationComponent />} loadScript={false}>

spec/product.spec.tsx

@@ -4,11 +4,12 @@ import { NostoProvider, NostoPlacement, NostoProduct, useNostoProduct } from "..
 import RecommendationComponent from "./renderer"
 import { waitForRecommendations } from "./utils"
 import mockApi from "./mocks/mock-api"
+import { mockNostojs } from "@nosto/nosto-js/testing"
 
 test("Product page render", async () => {
   const placements = ["productpage-nosto-1", "productpage-nosto-2"]
   const mocked = mockApi(placements)
-  window.nostojs = cb => cb(mocked)
+  mockNostojs(mocked)
 
   render(
     <NostoProvider account="dummy-account" recommendationComponent={<RecommendationComponent />} loadScript={false}>
@@ -46,7 +47,7 @@ test("useNostoProduct validation", async () => {
 test("Product Page with ref", async () => {
   const placements = ["productpage-nosto-1", "productpage-nosto-2"]
   const mocked = mockApi(placements)
-  window.nostojs = cb => cb(mocked)
+  mockNostojs(mocked)
 
   render(
     <NostoProvider account="dummy-account" recommendationComponent={<RecommendationComponent />} loadScript={false}>

spec/search.spec.tsx

@@ -4,11 +4,12 @@ import { NostoProvider, NostoSearch, NostoPlacement } from "../src/index"
 import RecommendationComponent from "./renderer"
 import { waitForRecommendations } from "./utils"
 import mockApi from "./mocks/mock-api"
+import { mockNostojs } from "@nosto/nosto-js/testing"
 
 test("Search page render", async () => {
   const placements = ["searchpage-nosto-1", "searchpage-nosto-2"]
   const mocked = mockApi(placements)
-  window.nostojs = cb => cb(mocked)
+  mockNostojs(mocked)
 
   render(
     <NostoProvider account="dummy-account" recommendationComponent={<RecommendationComponent />} loadScript={false}>

spec/session.spec.tsx

@@ -4,11 +4,12 @@ import { NostoHome, NostoPlacement, NostoProvider, NostoSession } from "../src/i
 import RecommendationComponent from "./renderer"
 import { waitForRecommendations } from "./utils"
 import mockApi from "./mocks/mock-api"
+import { mockNostojs } from "@nosto/nosto-js/testing"
 
 test("Session render", async () => {
   const placements = ["frontpage-nosto-1", "frontpage-nosto-3", "frontpage-nosto-4"]
   const mocked = mockApi(placements)
-  window.nostojs = cb => cb(mocked)
+  mockNostojs(mocked)
 
   const customer = {
     firstName: "John",

spec/setup.js

@@ -1,5 +1,6 @@
 import { JSDOM } from "jsdom"
 import { afterEach } from "vitest"
+import { clearNostoGlobals } from "@nosto/nosto-js/testing"
 
 const { window } = new JSDOM("<html></html>", {
   url: "http://localhost",
@@ -16,12 +17,7 @@ global.navigator = window.navigator
 global.window.nostoReactTest = true
 
 afterEach(() => {
-  // clearing Nosto iframe window handle
-  window.nosto = undefined
-  // clearing nostojs stub
-  window.nostojs = undefined
-  // clearing Shopify specific Nosto namespace
-  window.Nosto = undefined
+  clearNostoGlobals()
   document.head.innerHTML = ""
   document.body.innerHTML = ""
 })

spec/useLoadClientScript.spec.tsx

@@ -3,6 +3,8 @@ import { renderHook } from "@testing-library/react"
 import { useLoadClientScript } from "../src/hooks/useLoadClientScript"
 import scriptLoader from "../src/hooks/scriptLoader"
 import "@testing-library/jest-dom/vitest"
+import { nostojs, getNostoWindow, isNostoLoaded } from "@nosto/nosto-js"
+import { reloadNosto } from "@nosto/nosto-js/testing"
 
 function loadClientScript(merchant: string) {
   const script = document.createElement("script")
@@ -12,7 +14,7 @@ function loadClientScript(merchant: string) {
   script.async = true
   const promise = new Promise<void>(resolve => {
     script.onload = () => {
-      window.nosto?.reload({ site: "localhost" })
+      reloadNosto({ site: "localhost" })
       resolve()
     }
   })
@@ -29,21 +31,21 @@ describe("useLoadClientScript", () => {
 
   it("loads client script", async () => {
     const hook = renderHook(() => useLoadClientScript({ account: testAccount }))
-    await new Promise(window.nostojs)
+    await new Promise(nostojs)
 
     hook.rerender()
     expect(hook.result.current.clientScriptLoaded).toBe(true)
-    expect(window.nosto).toBeDefined()
-    expect(getScriptSources()).toEqual([`http://connect.nosto.com/include/${testAccount}`])
+    expect(isNostoLoaded()).toBeTruthy()
+    expect(getScriptSources()).toEqual([`https://connect.nosto.com/include/${testAccount}`])
   })
 
   it("support custom script loaders", async () => {
     const customScriptLoader = vi.fn(scriptLoader)
     const hook = renderHook(() => useLoadClientScript({ account: testAccount, scriptLoader: customScriptLoader }))
-    await new Promise(window.nostojs)
+    await new Promise(nostojs)
 
     hook.rerender()
-    expect(customScriptLoader).toHaveBeenLastCalledWith(`//connect.nosto.com/include/${testAccount}`, {
+    expect(customScriptLoader).toHaveBeenLastCalledWith(`https://connect.nosto.com/include/${testAccount}`, {
       attributes: { "nosto-client-script": "" }
     })
   })
@@ -53,7 +55,7 @@ describe("useLoadClientScript", () => {
     expect(hook.result.current.clientScriptLoaded).toBe(false)
 
     await loadClientScript(testAccount)
-    expect(window.nosto).toBeDefined()
+    expect(isNostoLoaded()).toBeTruthy()
 
     hook.rerender()
     expect(hook.result.current.clientScriptLoaded).toBe(true)
@@ -62,7 +64,7 @@ describe("useLoadClientScript", () => {
 
   it("set loaded state to true when client is loaded externally before", async () => {
     await loadClientScript(testAccount)
-    expect(window.nosto).toBeDefined()
+    expect(isNostoLoaded()).toBeTruthy()
 
     const { result } = renderHook(() => useLoadClientScript({ loadScript: false, account: testAccount }))
     expect(result.current.clientScriptLoaded).toBe(true)
@@ -71,7 +73,7 @@ describe("useLoadClientScript", () => {
 
   it("reloads client script once with loadScript=false", async () => {
     await loadClientScript(testAccount)
-    const reloadSpy = vi.spyOn(window.nosto!, "reload")
+    const reloadSpy = vi.spyOn(getNostoWindow()!, "reload")
 
     const hook = renderHook(() => useLoadClientScript({ loadScript: false, account: testAccount }))
     expect(reloadSpy).toHaveBeenCalledTimes(1)