refactor: updates vue examples

Author: sashamilenkovic

frameworks/next/JS/app/components/logos/NextLogo.jsx

@@ -0,0 +1,12 @@
+const NextLogo = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 128 128"
+    aria-label="Next.js"
+    role="img"
+  >
+    <path d="M64 0C28.7 0 0 28.7 0 64s28.7 64 64 64c11.2 0 21.7-2.9 30.8-7.9L48.4 55.3v36.6h-6.8V41.8h6.8l50.5 75.8C116.4 106.2 128 86.5 128 64c0-35.3-28.7-64-64-64zm22.1 84.6l-7.5-11.3V41.8h7.5v42.8z" />
+  </svg>
+);
+
+export default NextLogo;

frameworks/next/JS/app/components/logos/ReactLogo.jsx

@@ -1,7 +1,7 @@
 import Link from "next/link";
 import "./page.css";
+import NextLogo from "./components/logos/NextLogo";
 import { NutrientLogo } from "./components/logos/NutrientLogo";
-import ReactLogo from "./components/logos/ReactLogo";
 
 function HomePage() {
   const examples = [
@@ -58,7 +58,7 @@ function HomePage() {
                 rel="noopener noreferrer"
                 className="link-no-style"
               >
-                <ReactLogo />
+                <NextLogo />
               </a>
             </div>
           </div>

frameworks/next/JS/app/page.jsx

@@ -0,0 +1,12 @@
+const NextLogo = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 128 128"
+    aria-label="Next.js"
+    role="img"
+  >
+    <path d="M64 0C28.7 0 0 28.7 0 64s28.7 64 64 64c11.2 0 21.7-2.9 30.8-7.9L48.4 55.3v36.6h-6.8V41.8h6.8l50.5 75.8C116.4 106.2 128 86.5 128 64c0-35.3-28.7-64-64-64zm22.1 84.6l-7.5-11.3V41.8h7.5v42.8z" />
+  </svg>
+);
+
+export default NextLogo;

frameworks/next/TS/app/components/logos/NextLogo.tsx

@@ -1,7 +1,7 @@
 import Link from "next/link";
 import "./page.css";
+import NextLogo from "./components/logos/NextLogo";
 import { NutrientLogo } from "./components/logos/NutrientLogo";
-import ReactLogo from "./components/logos/ReactLogo";
 
 interface Example {
   path: string;
@@ -65,7 +65,7 @@ function HomePage() {
                 rel="noopener noreferrer"
                 className="link-no-style"
               >
-                <ReactLogo />
+                <NextLogo />
               </a>
             </div>
           </div>

frameworks/next/TS/app/components/logos/ReactLogo.tsx

@@ -4,21 +4,29 @@ import {
   loadCustomOverlaysViewer,
   unloadCustomOverlaysViewer,
 } from "../examples/custom-overlays/implementation";
+import { loadNutrientViewer } from "../utils/loadNutrientViewer";
 
 function CustomOverlaysPage() {
   const containerRef = useRef(null);
 
   useEffect(() => {
     const container = containerRef.current;
-    const { NutrientViewer } = window;
 
-    if (container && NutrientViewer) {
-      loadCustomOverlaysViewer(NutrientViewer, container);
+    if (!container) return;
+
+    let nutrientViewer;
+
+    try {
+      nutrientViewer = loadNutrientViewer();
+
+      loadCustomOverlaysViewer(nutrientViewer, container);
+    } catch (error) {
+      console.error("Failed to load Nutrient Viewer:", error);
     }
 
     return () => {
-      if (NutrientViewer && container) {
-        unloadCustomOverlaysViewer(NutrientViewer, container);
+      if (nutrientViewer && container) {
+        unloadCustomOverlaysViewer(nutrientViewer, container);
       }
     };
   }, []);

frameworks/next/TS/app/page.tsx

@@ -4,21 +4,29 @@ import {
   loadCustomOverlaysViewer,
   unloadCustomOverlaysViewer,
 } from "../examples/custom-overlays/implementation";
+import { loadNutrientViewer } from "../utils/loadNutrientViewer";
 
 function CustomOverlaysPage() {
   const containerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     const container = containerRef.current;
-    const { NutrientViewer } = window;
 
-    if (container && NutrientViewer) {
-      loadCustomOverlaysViewer(NutrientViewer, container);
+    if (!container) return;
+
+    let nutrientViewer: ReturnType<typeof loadNutrientViewer>;
+
+    try {
+      nutrientViewer = loadNutrientViewer();
+
+      loadCustomOverlaysViewer(nutrientViewer, container);
+    } catch (error) {
+      console.error("Failed to load Nutrient Viewer:", error);
     }
 
     return () => {
-      if (NutrientViewer && container) {
-        unloadCustomOverlaysViewer(NutrientViewer, container);
+      if (nutrientViewer && container) {
+        unloadCustomOverlaysViewer(nutrientViewer, container);
       }
     };
   }, []);

frameworks/react/JS/src/pages/CustomOverlaysPage.jsx

@@ -19,8 +19,6 @@ function MagazineModePage() {
     try {
       nutrientViewer = loadNutrientViewer();
 
-      nutrientViewer.unload(container);
-
       loadMagazineViewer(nutrientViewer, container);
     } catch (error) {
       console.error("Failed to load Nutrient Viewer:", error);