fix: uses same unload method, does not reference window object

sashamilenkovic · sashamilenkovic · commit e8caa5226c48 · 2025-09-30T17:22:21.000-04:00
diff --git a/frameworks/angular/TS/src/nutrient/custom-overlays/implementation.ts b/frameworks/angular/TS/src/nutrient/custom-overlays/implementation.ts
@@ -39,7 +39,7 @@ export async function loadCustomOverlaysViewer(
  * @param defaultConfiguration - Base configuration object
  */
 function load(
-  nutrientViewer: NonNullable<typeof window.NutrientViewer>,
+  nutrientViewer: typeof NutrientViewer,
   defaultConfiguration: Configuration,
 ) {
   return nutrientViewer.load(defaultConfiguration).then((instance) => {
@@ -61,9 +61,7 @@ function load(
   });
 }
 
-function getOverlayItemForPage1(
-  nutrientViewer: NonNullable<typeof window.NutrientViewer>,
-) {
+function getOverlayItemForPage1(nutrientViewer: typeof NutrientViewer) {
   // We create a div element with an emoji and a short text.
   const overlayElement = document.createElement("div");
 
@@ -81,9 +79,7 @@ function getOverlayItemForPage1(
   });
 }
 
-function getOverlayItemForPage2(
-  nutrientViewer: NonNullable<typeof window.NutrientViewer>,
-) {
+function getOverlayItemForPage2(nutrientViewer: typeof NutrientViewer) {
   const overlayElement = document.createElement("div");
 
   // In this case we embed a video to the page
diff --git a/frameworks/next/TS/nutrient/custom-overlays/implementation.ts b/frameworks/next/TS/nutrient/custom-overlays/implementation.ts
@@ -39,7 +39,7 @@ export async function loadCustomOverlaysViewer(
  * @param defaultConfiguration - Base configuration object
  */
 function load(
-  nutrientViewer: NonNullable<typeof window.NutrientViewer>,
+  nutrientViewer: typeof NutrientViewer,
   defaultConfiguration: Configuration,
 ) {
   return nutrientViewer.load(defaultConfiguration).then((instance) => {
@@ -61,9 +61,7 @@ function load(
   });
 }
 
-function getOverlayItemForPage1(
-  nutrientViewer: NonNullable<typeof window.NutrientViewer>,
-) {
+function getOverlayItemForPage1(nutrientViewer: typeof NutrientViewer) {
   // We create a div element with an emoji and a short text.
   const overlayElement = document.createElement("div");
 
@@ -81,9 +79,7 @@ function getOverlayItemForPage1(
   });
 }
 
-function getOverlayItemForPage2(
-  nutrientViewer: NonNullable<typeof window.NutrientViewer>,
-) {
+function getOverlayItemForPage2(nutrientViewer: typeof NutrientViewer) {
   const overlayElement = document.createElement("div");
 
   // In this case we embed a video to the page
diff --git a/frameworks/next/TS/tsconfig.json b/frameworks/next/TS/tsconfig.json
@@ -17,8 +17,9 @@
         "name": "next"
       }
     ],
+    "baseUrl": ".",
     "paths": {
-      "@/*": ["*"]
+      "@/*": ["./*"]
     },
     "target": "ES2017"
   },
diff --git a/frameworks/nuxt/TS/nutrient/custom-overlays/implementation.ts b/frameworks/nuxt/TS/nutrient/custom-overlays/implementation.ts
@@ -39,7 +39,7 @@ export async function loadCustomOverlaysViewer(
  * @param defaultConfiguration - Base configuration object
  */
 function load(
-  nutrientViewer: NonNullable<typeof window.NutrientViewer>,
+  nutrientViewer: typeof NutrientViewer,
   defaultConfiguration: Configuration,
 ) {
   return nutrientViewer.load(defaultConfiguration).then((instance) => {
@@ -61,9 +61,7 @@ function load(
   });
 }
 
-function getOverlayItemForPage1(
-  nutrientViewer: NonNullable<typeof window.NutrientViewer>,
-) {
+function getOverlayItemForPage1(nutrientViewer: typeof NutrientViewer) {
   // We create a div element with an emoji and a short text.
   const overlayElement = document.createElement("div");
 
@@ -81,9 +79,7 @@ function getOverlayItemForPage1(
   });
 }
 
-function getOverlayItemForPage2(
-  nutrientViewer: NonNullable<typeof window.NutrientViewer>,
-) {
+function getOverlayItemForPage2(nutrientViewer: typeof NutrientViewer) {
   const overlayElement = document.createElement("div");
 
   // In this case we embed a video to the page
diff --git a/frameworks/nuxt/TS/package.json b/frameworks/nuxt/TS/package.json
@@ -24,6 +24,7 @@
   "devDependencies": {
     "@nuxt/devtools": "^2.6.5",
     "nuxt": "^3.17.4",
+    "typescript": "^5.6.0",
     "vue-tsc": "^2.0.0"
   }
 }
diff --git a/frameworks/nuxt/TS/pages/custom-overlays.vue b/frameworks/nuxt/TS/pages/custom-overlays.vue
@@ -35,10 +35,9 @@ onMounted(async () => {
 
 onUnmounted(() => {
   const container = containerRef.value;
-  const { NutrientViewer } = window;
 
-  if (container && NutrientViewer) {
-    unloadCustomOverlaysViewer(NutrientViewer, container);
+  if (nutrientViewer && container) {
+    unloadCustomOverlaysViewer(nutrientViewer, container);
   }
 });
 </script>
diff --git a/frameworks/nuxt/TS/pages/magazine-mode.vue b/frameworks/nuxt/TS/pages/magazine-mode.vue
@@ -35,10 +35,9 @@ onMounted(async () => {
 
 onUnmounted(() => {
   const container = containerRef.value;
-  const { NutrientViewer } = window;
 
-  if (container && NutrientViewer) {
-    unloadMagazineViewer(NutrientViewer, container);
+  if (nutrientViewer && container) {
+    unloadMagazineViewer(nutrientViewer, container);
   }
 });
 </script>
diff --git a/frameworks/react/TS/src/nutrient/custom-overlays/implementation.ts b/frameworks/react/TS/src/nutrient/custom-overlays/implementation.ts
@@ -39,7 +39,7 @@ export async function loadCustomOverlaysViewer(
  * @param defaultConfiguration - Base configuration object
  */
 async function load(
-  nutrientViewer: NonNullable<typeof window.NutrientViewer>,
+  nutrientViewer: typeof NutrientViewer,
   defaultConfiguration: Configuration,
 ) {
   return nutrientViewer.load(defaultConfiguration).then((instance) => {
@@ -61,9 +61,7 @@ async function load(
   });
 }
 
-function getOverlayItemForPage1(
-  nutrientViewer: NonNullable<typeof window.NutrientViewer>,
-) {
+function getOverlayItemForPage1(nutrientViewer: typeof NutrientViewer) {
   // We create a div element with an emoji and a short text.
   const overlayElement = document.createElement("div");
 
@@ -81,9 +79,7 @@ function getOverlayItemForPage1(
   });
 }
 
-function getOverlayItemForPage2(
-  nutrientViewer: NonNullable<typeof window.NutrientViewer>,
-) {
+function getOverlayItemForPage2(nutrientViewer: typeof NutrientViewer) {
   const overlayElement = document.createElement("div");
 
   // In this case we embed a video to the page
diff --git a/frameworks/svelte/TS/src/nutrient/custom-overlays/implementation.ts b/frameworks/svelte/TS/src/nutrient/custom-overlays/implementation.ts
@@ -39,7 +39,7 @@ export async function loadCustomOverlaysViewer(
  * @param defaultConfiguration - Base configuration object
  */
 function load(
-  nutrientViewer: NonNullable<typeof window.NutrientViewer>,
+  nutrientViewer: typeof NutrientViewer,
   defaultConfiguration: Configuration,
 ) {
   return nutrientViewer.load(defaultConfiguration).then((instance) => {
@@ -61,9 +61,7 @@ function load(
   });
 }
 
-function getOverlayItemForPage1(
-  nutrientViewer: NonNullable<typeof window.NutrientViewer>,
-) {
+function getOverlayItemForPage1(nutrientViewer: typeof NutrientViewer) {
   // We create a div element with an emoji and a short text.
   const overlayElement = document.createElement("div");
 
@@ -81,9 +79,7 @@ function getOverlayItemForPage1(
   });
 }
 
-function getOverlayItemForPage2(
-  nutrientViewer: NonNullable<typeof window.NutrientViewer>,
-) {
+function getOverlayItemForPage2(nutrientViewer: typeof NutrientViewer) {
   const overlayElement = document.createElement("div");
 
   // In this case we embed a video to the page
diff --git a/frameworks/sveltekit/ts/src/lib/nutrient/custom-overlays/implementation.ts b/frameworks/sveltekit/ts/src/lib/nutrient/custom-overlays/implementation.ts
@@ -39,7 +39,7 @@ export async function loadCustomOverlaysViewer(
  * @param defaultConfiguration - Base configuration object
  */
 function load(
-  nutrientViewer: NonNullable<typeof window.NutrientViewer>,
+  nutrientViewer: typeof NutrientViewer,
   defaultConfiguration: Configuration,
 ) {
   return nutrientViewer.load(defaultConfiguration).then((instance) => {
@@ -61,9 +61,7 @@ function load(
   });
 }
 
-function getOverlayItemForPage1(
-  nutrientViewer: NonNullable<typeof window.NutrientViewer>,
-) {
+function getOverlayItemForPage1(nutrientViewer: typeof NutrientViewer) {
   // We create a div element with an emoji and a short text.
   const overlayElement = document.createElement("div");
 
@@ -81,9 +79,7 @@ function getOverlayItemForPage1(
   });
 }
 
-function getOverlayItemForPage2(
-  nutrientViewer: NonNullable<typeof window.NutrientViewer>,
-) {
+function getOverlayItemForPage2(nutrientViewer: typeof NutrientViewer) {
   const overlayElement = document.createElement("div");
 
   // In this case we embed a video to the page
diff --git a/frameworks/vue/TS/src/nutrient/custom-overlays/implementation.ts b/frameworks/vue/TS/src/nutrient/custom-overlays/implementation.ts
@@ -39,7 +39,7 @@ export async function loadCustomOverlaysViewer(
  * @param defaultConfiguration - Base configuration object
  */
 async function load(
-  nutrientViewer: NonNullable<typeof window.NutrientViewer>,
+  nutrientViewer: typeof NutrientViewer,
   defaultConfiguration: Configuration,
 ) {
   return nutrientViewer.load(defaultConfiguration).then((instance) => {
@@ -61,9 +61,7 @@ async function load(
   });
 }
 
-function getOverlayItemForPage1(
-  nutrientViewer: NonNullable<typeof window.NutrientViewer>,
-) {
+function getOverlayItemForPage1(nutrientViewer: typeof NutrientViewer) {
   // We create a div element with an emoji and a short text.
   const overlayElement = document.createElement("div");
 
@@ -81,9 +79,7 @@ function getOverlayItemForPage1(
   });
 }
 
-function getOverlayItemForPage2(
-  nutrientViewer: NonNullable<typeof window.NutrientViewer>,
-) {
+function getOverlayItemForPage2(nutrientViewer: typeof NutrientViewer) {
   const overlayElement = document.createElement("div");
 
   // In this case we embed a video to the page
diff --git a/frameworks/vue/TS/src/pages/CustomOverlayPage.vue b/frameworks/vue/TS/src/pages/CustomOverlayPage.vue
@@ -35,10 +35,9 @@ onMounted(async () => {
 
 onUnmounted(() => {
   const container = containerRef.value;
-  const { NutrientViewer } = window;
 
-  if (container && NutrientViewer) {
-    unloadCustomOverlaysViewer(NutrientViewer, container);
+  if (nutrientViewer && container) {
+    unloadCustomOverlaysViewer(nutrientViewer, container);
   }
 });
 </script>
diff --git a/frameworks/vue/TS/src/pages/MagazineModePage.vue b/frameworks/vue/TS/src/pages/MagazineModePage.vue
@@ -35,10 +35,9 @@ onMounted(async () => {
 
 onUnmounted(() => {
   const container = containerRef.value;
-  const { NutrientViewer } = window;
 
-  if (container && NutrientViewer) {
-    unloadMagazineViewer(NutrientViewer, container);
+  if (nutrientViewer && container) {
+    unloadMagazineViewer(nutrientViewer, container);
   }
 });
 </script>

Original file line number	Diff line number	Diff line change
`@@ -24,6 +24,7 @@`
`24`	`24`	`"devDependencies": {`
`25`	`25`	`"@nuxt/devtools": "^2.6.5",`
`26`	`26`	`"nuxt": "^3.17.4",`
	`27`	`+ "typescript": "^5.6.0",`
`27`	`28`	`"vue-tsc": "^2.0.0"`
`28`	`29`	`}`
`29`	`30`	`}`