refactor: adds configuration for each examples directory for base url and assets path, makes loadNutrient util async

Author: sashamilenkovic

frameworks/angular/TS/src/app/utils/loadNutrientViewer.ts

@@ -1,6 +1,6 @@
 import type NutrientViewer from "@nutrient-sdk/viewer";
 
-export function loadNutrientViewer(): typeof NutrientViewer {
+export async function loadNutrientViewer(): Promise<typeof NutrientViewer> {
   if (!window.NutrientViewer) {
     throw new Error("NutrientViewer not found on window object");
   }

frameworks/angular/TS/src/examples/basic-viewer/implementation.ts

@@ -5,23 +5,27 @@
  */
 
 import type NutrientViewer from "@nutrient-sdk/viewer";
+import { nutrientConfig } from "../nutrient-config";
 
 /**
  * Load a basic PDF viewer
- * @param nutrientViewer - The NutrientViewer object (from CDN)
+ * @param nutrientViewer - The NutrientViewer object (from CDN or package)
  * @param container - The container element to mount the viewer
  * @param document - URL to the PDF document
  * @returns Promise that resolves when the viewer is loaded
  */
 export function loadBasicViewer(
   nutrientViewer: typeof NutrientViewer,
   container: HTMLElement,
-  document = "https://www.nutrient.io/downloads/nutrient-web-demo.pdf",
+  document = nutrientConfig.documentUrl,
 ) {
-  return nutrientViewer.load({
+  const config = {
     container,
     document,
-  });
+    ...(nutrientConfig.baseUrl && { baseUrl: nutrientConfig.baseUrl }),
+  };
+
+  return nutrientViewer.load(config);
 }
 
 /**

frameworks/angular/TS/src/examples/custom-overlays/implementation.ts

@@ -1,5 +1,6 @@
 import type NutrientViewer from "@nutrient-sdk/viewer";
 import type { Configuration } from "@nutrient-sdk/viewer";
+import { nutrientConfig } from "../nutrient-config";
 
 /**
  * Load a PDF viewer with custom overlays functionality
@@ -12,7 +13,7 @@ import type { Configuration } from "@nutrient-sdk/viewer";
 export async function loadCustomOverlaysViewer(
   nutrientViewer: typeof NutrientViewer,
   container: HTMLElement,
-  document = "https://www.nutrient.io/downloads/nutrient-web-demo.pdf",
+  document = nutrientConfig.documentUrl,
 ) {
   if (!nutrientViewer) {
     throw new Error("NutrientViewer is required");
@@ -21,11 +22,14 @@ export async function loadCustomOverlaysViewer(
   // Ensure there's only one NutrientViewer instance
   nutrientViewer.unload(container);
 
-  // Load the viewer with custom overlays configuration
-  return load(nutrientViewer, {
+  const config = {
     container,
     document,
-  });
+    ...(nutrientConfig.baseUrl && { baseUrl: nutrientConfig.baseUrl }),
+  };
+
+  // Load the viewer with custom overlays configuration
+  return load(nutrientViewer, config);
 }
 
 /**

frameworks/angular/TS/src/examples/magazine-mode/implementation.ts

@@ -1,5 +1,6 @@
 import type NutrientViewer from "@nutrient-sdk/viewer";
 import type { Configuration } from "@nutrient-sdk/viewer";
+import { nutrientConfig } from "../nutrient-config";
 
 type ToolbarItem =
   | { type: "sidebar-bookmarks" }
@@ -40,13 +41,16 @@ interface ExtendedHTMLElement extends HTMLElement {
 export function loadMagazineViewer(
   nutrientViewer: typeof NutrientViewer,
   container: HTMLElement,
-  document = "https://www.nutrient.io/downloads/nutrient-web-demo.pdf",
+  document = nutrientConfig.documentUrl,
 ) {
-  // Load the viewer with magazine-specific configuration
-  return load(nutrientViewer, {
+  const config = {
     container,
     document,
-  });
+    ...(nutrientConfig.baseUrl && { baseUrl: nutrientConfig.baseUrl }),
+  };
+
+  // Load the viewer with magazine-specific configuration
+  return load(nutrientViewer, config);
 }
 
 /**

frameworks/angular/TS/src/examples/nutrient-config.ts

@@ -0,0 +1,22 @@
+/**
+ * Nutrient Web SDK Configuration
+ */
+
+export interface NutrientConfig {
+  /** Base URL for Nutrient Web SDK assets */
+  baseUrl?: string;
+  /** Default document URL for examples */
+  documentUrl: string;
+}
+
+/**
+ * Default configuration for Nutrient Web SDK
+ */
+export const nutrientConfig: NutrientConfig = {
+  // For CDN installations, this should be undefined
+  // For package installations, this will be set to your local asset path
+  baseUrl: undefined,
+
+  // Default document for examples - you can change this to your own PDF
+  documentUrl: "https://www.nutrient.io/downloads/nutrient-web-demo.pdf",
+};

frameworks/next/JS/app/basic-viewer/page.jsx

@@ -17,15 +17,15 @@ function BasicViewerPage() {
 
     if (!container) return;
 
-    let nutrientViewer;
+    let nutrientViewer = null;
 
-    try {
-      nutrientViewer = loadNutrientViewer();
+    (async () => {
+      nutrientViewer = await loadNutrientViewer();
 
-      loadBasicViewer(nutrientViewer, container);
-    } catch (error) {
-      console.error("Failed to load Nutrient Viewer:", error);
-    }
+      if (container && nutrientViewer) {
+        loadBasicViewer(nutrientViewer, container);
+      }
+    })();
 
     return () => {
       if (nutrientViewer && container) {

frameworks/next/JS/app/custom-overlays/page.jsx

@@ -18,15 +18,15 @@ function CustomOverlaysPage() {
 
     let nutrientViewer = null;
 
-    try {
-      nutrientViewer = loadNutrientViewer();
+    (async () => {
+      nutrientViewer = await loadNutrientViewer();
 
-      nutrientViewer.unload(container);
+      if (container && nutrientViewer) {
+        unloadCustomOverlaysViewer(nutrientViewer, container);
 
-      loadCustomOverlaysViewer(nutrientViewer, container);
-    } catch (error) {
-      console.error("Failed to load Nutrient Viewer:", error);
-    }
+        loadCustomOverlaysViewer(nutrientViewer, container);
+      }
+    })();
 
     return () => {
       if (nutrientViewer && container) {
@@ -44,7 +44,6 @@ function CustomOverlaysPage() {
           borderBottom: "1px solid #ddd",
           display: "flex",
           alignItems: "center",
-          gap: "1rem",
         }}
       >
         <Link

frameworks/next/JS/app/magazine-mode/page.jsx

@@ -16,17 +16,17 @@ function MagazineModePage() {
 
     if (!container) return;
 
-    let nutrientViewer;
+    let nutrientViewer = null;
 
-    try {
-      nutrientViewer = loadNutrientViewer();
+    (async () => {
+      nutrientViewer = await loadNutrientViewer();
 
-      nutrientViewer.unload(container);
+      if (container && nutrientViewer) {
+        unloadMagazineViewer(nutrientViewer, container);
 
-      loadMagazineViewer(nutrientViewer, container);
-    } catch (error) {
-      console.error("Failed to load Nutrient Viewer:", error);
-    }
+        loadMagazineViewer(nutrientViewer, container);
+      }
+    })();
 
     return () => {
       if (nutrientViewer && container) {

frameworks/next/JS/app/utils/loadNutrientViewer.js

@@ -1,4 +1,4 @@
-export function loadNutrientViewer() {
+export async function loadNutrientViewer() {
   if (!window.NutrientViewer) {
     throw new Error("NutrientViewer not found on window object");
   }

frameworks/next/JS/examples/basic-viewer/implementation.js

@@ -1,25 +1,34 @@
 /**
- * Basic Nutrient Viewer Implementation for React (TypeScript)
+ * Basic Nutrient Viewer Implementation for React (JavaScript)
  *
  * This is the simplest way to load a PDF document with Nutrient Web SDK.
  */
 
+import { nutrientConfig } from "../nutrient-config.js";
+
 /**
  * Load a basic PDF viewer
- * @param nutrientViewer - The NutrientViewer object (from CDN)
+ * @param nutrientViewer - The NutrientViewer object (from CDN or package)
  * @param container - The container element to mount the viewer
  * @param document - URL to the PDF document
  * @returns Promise that resolves when the viewer is loaded
  */
 export function loadBasicViewer(
   nutrientViewer,
   container,
-  document = "https://www.nutrient.io/downloads/nutrient-web-demo.pdf",
+  document = nutrientConfig.documentUrl,
 ) {
-  return nutrientViewer.load({
+  const config = {
     container,
     document,
-  });
+  };
+
+  // Add baseUrl if configured (for package installations)
+  if (nutrientConfig.baseUrl) {
+    config.baseUrl = nutrientConfig.baseUrl;
+  }
+
+  return nutrientViewer.load(config);
 }
 
 /**