refactor: adds loader module for normalization purposes

sashamilenkovic · sashamilenkovic · commit 49ab94979d87 · 2025-09-24T20:18:48.000-04:00
diff --git a/frameworks/nextjs/JS/app/utils/loadNutrientViewer.js b/frameworks/nextjs/JS/app/utils/loadNutrientViewer.js
@@ -0,0 +1,25 @@
+/**
+ * Nutrient Viewer Loader Abstraction
+ *
+ * This utility provides a consistent way to load NutrientViewer regardless of installation method.
+ * For CDN installations, it retrieves from window object.
+ * For package installations, it imports from @nutrient-sdk/viewer.
+ */
+
+/**
+ * Load NutrientViewer instance
+ * @returns Promise that resolves to NutrientViewer instance
+ * @throws Error if NutrientViewer cannot be loaded
+ */
+export async function loadNutrientViewer() {
+  // For CDN installation: get from window object
+  const { NutrientViewer } = window;
+
+  if (!NutrientViewer) {
+    throw new Error(
+      "NutrientViewer is not available. Make sure the Nutrient Web SDK is properly loaded via CDN.",
+    );
+  }
+
+  return NutrientViewer;
+}
diff --git a/frameworks/nextjs/JS/package.json b/frameworks/nextjs/JS/package.json
@@ -18,6 +18,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@nutrient-sdk/viewer": "^1.7.0",
     "next": "^15.3.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
diff --git a/frameworks/nextjs/TS/app/utils/loadNutrientViewer.ts b/frameworks/nextjs/TS/app/utils/loadNutrientViewer.ts
@@ -0,0 +1,27 @@
+/**
+ * Nutrient Viewer Loader Abstraction
+ *
+ * This utility provides a consistent way to load NutrientViewer regardless of installation method.
+ * For CDN installations, it retrieves from window object.
+ * For package installations, it imports from @nutrient-sdk/viewer.
+ */
+
+import type NutrientViewer from "@nutrient-sdk/viewer";
+
+/**
+ * Load NutrientViewer instance
+ * @returns Promise that resolves to NutrientViewer instance
+ * @throws Error if NutrientViewer cannot be loaded
+ */
+export async function loadNutrientViewer(): Promise<typeof NutrientViewer> {
+  // For CDN installation: get from window object
+  const { NutrientViewer } = window;
+
+  if (!NutrientViewer) {
+    throw new Error(
+      "NutrientViewer is not available. Make sure the Nutrient Web SDK is properly loaded via CDN.",
+    );
+  }
+
+  return NutrientViewer;
+}
diff --git a/frameworks/nextjs/TS/package.json b/frameworks/nextjs/TS/package.json
@@ -18,12 +18,12 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@nutrient-sdk/viewer": "^1.7.0",
     "next": "^15.3.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@nutrient-sdk/viewer": "^1.7.0",
     "@types/node": "^20.0.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
diff --git a/frameworks/nuxtjs/JS/package.json b/frameworks/nuxtjs/JS/package.json
@@ -18,6 +18,9 @@
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare"
   },
+  "dependencies": {
+    "@nutrient-sdk/viewer": "^1.7.0"
+  },
   "devDependencies": {
     "@nuxt/devtools": "latest",
     "nuxt": "^3.17.4"
diff --git a/frameworks/nuxtjs/JS/utils/loadNutrientViewer.js b/frameworks/nuxtjs/JS/utils/loadNutrientViewer.js
@@ -0,0 +1,25 @@
+/**
+ * Nutrient Viewer Loader Abstraction
+ *
+ * This utility provides a consistent way to load NutrientViewer regardless of installation method.
+ * For CDN installations, it retrieves from window object.
+ * For package installations, it imports from @nutrient-sdk/viewer.
+ */
+
+/**
+ * Load NutrientViewer instance
+ * @returns Promise that resolves to NutrientViewer instance
+ * @throws Error if NutrientViewer cannot be loaded
+ */
+export async function loadNutrientViewer() {
+  // For CDN installation: get from window object
+  const { NutrientViewer } = window;
+
+  if (!NutrientViewer) {
+    throw new Error(
+      "NutrientViewer is not available. Make sure the Nutrient Web SDK is properly loaded via CDN.",
+    );
+  }
+
+  return NutrientViewer;
+}
diff --git a/frameworks/nuxtjs/TS/package.json b/frameworks/nuxtjs/TS/package.json
@@ -18,8 +18,10 @@
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare"
   },
+  "dependencies": {
+    "@nutrient-sdk/viewer": "^1.7.0"
+  },
   "devDependencies": {
-    "@nutrient-sdk/viewer": "^1.7.0",
     "@nuxt/devtools": "latest",
     "nuxt": "^3.17.4",
     "vue-tsc": "^2.0.0"
diff --git a/frameworks/nuxtjs/TS/utils/loadNutrientViewer.ts b/frameworks/nuxtjs/TS/utils/loadNutrientViewer.ts
@@ -0,0 +1,27 @@
+/**
+ * Nutrient Viewer Loader Abstraction
+ *
+ * This utility provides a consistent way to load NutrientViewer regardless of installation method.
+ * For CDN installations, it retrieves from window object.
+ * For package installations, it imports from @nutrient-sdk/viewer.
+ */
+
+import type NutrientViewer from "@nutrient-sdk/viewer";
+
+/**
+ * Load NutrientViewer instance
+ * @returns Promise that resolves to NutrientViewer instance
+ * @throws Error if NutrientViewer cannot be loaded
+ */
+export async function loadNutrientViewer(): Promise<typeof NutrientViewer> {
+  // For CDN installation: get from window object
+  const { NutrientViewer } = window;
+
+  if (!NutrientViewer) {
+    throw new Error(
+      "NutrientViewer is not available. Make sure the Nutrient Web SDK is properly loaded via CDN.",
+    );
+  }
+
+  return NutrientViewer;
+}
diff --git a/frameworks/react/JS/package.json b/frameworks/react/JS/package.json
@@ -19,6 +19,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@nutrient-sdk/viewer": "^1.7.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-router-dom": "^6.0.0"
diff --git a/frameworks/react/JS/src/utils/loadNutrientViewer.js b/frameworks/react/JS/src/utils/loadNutrientViewer.js
@@ -0,0 +1,25 @@
+/**
+ * Nutrient Viewer Loader Abstraction
+ *
+ * This utility provides a consistent way to load NutrientViewer regardless of installation method.
+ * For CDN installations, it retrieves from window object.
+ * For package installations, it imports from @nutrient-sdk/viewer.
+ */
+
+/**
+ * Load NutrientViewer instance
+ * @returns Promise that resolves to NutrientViewer instance
+ * @throws Error if NutrientViewer cannot be loaded
+ */
+export async function loadNutrientViewer() {
+  // For CDN installation: get from window object
+  const { NutrientViewer } = window;
+
+  if (!NutrientViewer) {
+    throw new Error(
+      "NutrientViewer is not available. Make sure the Nutrient Web SDK is properly loaded via CDN.",
+    );
+  }
+
+  return NutrientViewer;
+}
diff --git a/frameworks/react/TS/package.json b/frameworks/react/TS/package.json
@@ -19,12 +19,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@nutrient-sdk/viewer": "^1.7.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-router-dom": "^6.0.0"
   },
   "devDependencies": {
-    "@nutrient-sdk/viewer": "^1.7.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@vitejs/plugin-react": "^4.0.0",
diff --git a/frameworks/react/TS/src/examples/basic-viewer/implementation.ts b/frameworks/react/TS/src/examples/basic-viewer/implementation.ts
@@ -18,10 +18,6 @@ export async function loadBasicViewer(
   container: HTMLElement,
   document = "https://www.nutrient.io/downloads/nutrient-web-demo.pdf",
 ) {
-  if (!nutrientViewer) {
-    throw new Error("nutrientViewer is required");
-  }
-
   // Ensure there's only one nutrientViewer instance
   nutrientViewer.unload(container);
 
diff --git a/frameworks/react/TS/src/pages/BasicViewerPage.tsx b/frameworks/react/TS/src/pages/BasicViewerPage.tsx
@@ -4,21 +4,31 @@ import {
   loadBasicViewer,
   unloadBasicViewer,
 } from "../examples/basic-viewer/implementation";
+import { loadNutrientViewer } from "../utils/loadNutrientViewer";
 
 function BasicViewerPage() {
   const containerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     const container = containerRef.current;
-    const { NutrientViewer } = window;
+    if (!container) return;
 
-    if (container && NutrientViewer) {
-      loadBasicViewer(NutrientViewer, container);
-    }
+    let nutrientViewer: Awaited<ReturnType<typeof loadNutrientViewer>>;
+
+    const initViewer = async () => {
+      try {
+        nutrientViewer = await loadNutrientViewer();
+        await loadBasicViewer(nutrientViewer, container);
+      } catch (error) {
+        console.error("Failed to load Nutrient Viewer:", error);
+      }
+    };
+
+    initViewer();
 
     return () => {
-      if (NutrientViewer && container) {
-        unloadBasicViewer(NutrientViewer, container);
+      if (nutrientViewer && container) {
+        unloadBasicViewer(nutrientViewer, container);
       }
     };
   }, []);
diff --git a/frameworks/react/TS/src/utils/loadNutrientViewer.ts b/frameworks/react/TS/src/utils/loadNutrientViewer.ts
@@ -0,0 +1,27 @@
+/**
+ * Nutrient Viewer Loader Abstraction
+ *
+ * This utility provides a consistent way to load NutrientViewer regardless of installation method.
+ * For CDN installations, it retrieves from window object.
+ * For package installations, it imports from @nutrient-sdk/viewer.
+ */
+
+import type NutrientViewer from "@nutrient-sdk/viewer";
+
+/**
+ * Load NutrientViewer instance
+ * @returns Promise that resolves to NutrientViewer instance
+ * @throws Error if NutrientViewer cannot be loaded
+ */
+export async function loadNutrientViewer(): Promise<typeof NutrientViewer> {
+  // For CDN installation: get from window object
+  const { NutrientViewer } = window;
+
+  if (!NutrientViewer) {
+    throw new Error(
+      "NutrientViewer is not available. Make sure the Nutrient Web SDK is properly loaded via CDN.",
+    );
+  }
+
+  return NutrientViewer;
+}
diff --git a/frameworks/vue/JS/package.json b/frameworks/vue/JS/package.json
@@ -18,6 +18,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@nutrient-sdk/viewer": "^1.7.0",
     "vue": "^3.5.0",
     "vue-router": "^4.2.0"
   },
diff --git a/frameworks/vue/JS/src/utils/loadNutrientViewer.js b/frameworks/vue/JS/src/utils/loadNutrientViewer.js
@@ -0,0 +1,25 @@
+/**
+ * Nutrient Viewer Loader Abstraction
+ *
+ * This utility provides a consistent way to load NutrientViewer regardless of installation method.
+ * For CDN installations, it retrieves from window object.
+ * For package installations, it imports from @nutrient-sdk/viewer.
+ */
+
+/**
+ * Load NutrientViewer instance
+ * @returns Promise that resolves to NutrientViewer instance
+ * @throws Error if NutrientViewer cannot be loaded
+ */
+export async function loadNutrientViewer() {
+  // For CDN installation: get from window object
+  const { NutrientViewer } = window;
+
+  if (!NutrientViewer) {
+    throw new Error(
+      "NutrientViewer is not available. Make sure the Nutrient Web SDK is properly loaded via CDN.",
+    );
+  }
+
+  return NutrientViewer;
+}
diff --git a/frameworks/vue/TS/package.json b/frameworks/vue/TS/package.json
@@ -18,11 +18,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@nutrient-sdk/viewer": "^1.7.0",
     "vue": "^3.5.0",
     "vue-router": "^4.2.0"
   },
   "devDependencies": {
-    "@nutrient-sdk/viewer": "^1.7.0",
     "@vitejs/plugin-vue": "^5.0.0",
     "@vue/tsconfig": "^0.5.1",
     "typescript": "^5.0.0",
diff --git a/frameworks/vue/TS/src/utils/loadNutrientViewer.ts b/frameworks/vue/TS/src/utils/loadNutrientViewer.ts
@@ -0,0 +1,27 @@
+/**
+ * Nutrient Viewer Loader Abstraction
+ *
+ * This utility provides a consistent way to load NutrientViewer regardless of installation method.
+ * For CDN installations, it retrieves from window object.
+ * For package installations, it imports from @nutrient-sdk/viewer.
+ */
+
+import type NutrientViewer from "@nutrient-sdk/viewer";
+
+/**
+ * Load NutrientViewer instance
+ * @returns Promise that resolves to NutrientViewer instance
+ * @throws Error if NutrientViewer cannot be loaded
+ */
+export async function loadNutrientViewer(): Promise<typeof NutrientViewer> {
+  // For CDN installation: get from window object
+  const { NutrientViewer } = window;
+
+  if (!NutrientViewer) {
+    throw new Error(
+      "NutrientViewer is not available. Make sure the Nutrient Web SDK is properly loaded via CDN.",
+    );
+  }
+
+  return NutrientViewer;
+}
