fix: adjust biome.json for solid, makes fixes to implementation in solid and solid start

Author: sashamilenkovic

biome.json

@@ -21,5 +21,17 @@
     "enabled": true,
     "clientKind": "git",
     "useIgnoreFile": true
-  }
+  },
+  "overrides": [
+    {
+      "include": ["frameworks/solid/**", "frameworks/solidstart/**"],
+      "linter": {
+        "rules": {
+          "correctness": {
+            "useJsxKeyInIterable": "off"
+          }
+        }
+      }
+    }
+  ]
 }

frameworks/solid/js/biome.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "correctness": {
+        "useJsxKeyInIterable": "off"
+      }
+    }
+  }
+}

frameworks/solid/js/src/nutrient/basic-viewer/implementation.js

@@ -1,5 +1,5 @@
 /**
- * Basic Nutrient Viewer Implementation for SolidJS (JavaScript)
+ * Basic Nutrient Viewer Implementation for React (JavaScript)
  *
  * This is the simplest way to load a PDF document with Nutrient Web SDK.
  */
@@ -21,9 +21,13 @@ export function loadBasicViewer(
   const config = {
     container,
     document,
-    ...(nutrientConfig.baseUrl && { baseUrl: nutrientConfig.baseUrl }),
   };
 
+  // Add baseUrl if configured (for package installations)
+  if (nutrientConfig.baseUrl) {
+    config.baseUrl = nutrientConfig.baseUrl;
+  }
+
   return nutrientViewer.load(config);
 }
 

frameworks/solid/js/src/nutrient/custom-overlays/implementation.js

@@ -1,70 +1,104 @@
-/**
- * Custom Overlays Implementation for SolidJS (JavaScript)
- *
- * Demonstrates interactive overlays that appear on page clicks
- */
-
 import { nutrientConfig } from "../nutrient-config.js";
 
 /**
- * Load the viewer with custom overlay functionality
- * @param nutrientViewer - The NutrientViewer object
- * @param container - The container element
+ * Load a PDF viewer with custom overlays functionality
+ * @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 async function loadCustomOverlaysViewer(
   nutrientViewer,
   container,
   document = nutrientConfig.documentUrl,
 ) {
+  if (!nutrientViewer) {
+    throw new Error("NutrientViewer is required");
+  }
+
+  // Ensure there's only one NutrientViewer instance
+  nutrientViewer.unload(container);
+
   const config = {
     container,
     document,
     ...(nutrientConfig.baseUrl && { baseUrl: nutrientConfig.baseUrl }),
   };
 
-  const instance = await nutrientViewer.load(config);
+  // Load the viewer with custom overlays configuration
+  return load(nutrientViewer, config);
+}
 
-  // Add click event listener for custom overlays
-  instance.addEventListener("page.click", (event) => {
-    const { pageIndex, point } = event;
+/**
+ * Internal load function with custom overlays configuration
+ * @param nutrientViewer - The NutrientViewer object
+ * @param defaultConfiguration - Base configuration object
+ */
+function load(nutrientViewer, defaultConfiguration) {
+  return nutrientViewer.load(defaultConfiguration).then((instance) => {
+    console.log("Nutrient Web SDK successfully loaded!!", instance);
 
-    // Create overlay content
-    const overlayElement = document.createElement("div");
-    overlayElement.innerHTML = `
-      <div style="background: white; padding: 15px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.2);">
-        <h3 style="margin: 0 0 10px 0;">Page ${pageIndex + 1}</h3>
-        <p style="margin: 0;">Clicked at: (${Math.round(point.x)}, ${Math.round(point.y)})</p>
-        <button id="close-overlay" style="margin-top: 10px; padding: 5px 10px;">Close</button>
-      </div>
-    `;
+    // Every time a user clicks on the page, we show a custom overlay item on
+    // this page.
+    instance.addEventListener("page.press", (event) => {
+      if (event.pageIndex === 0) {
+        instance.setCustomOverlayItem(getOverlayItemForPage1(nutrientViewer));
+      }
 
-    // Add overlay to the instance
-    const overlay = new nutrientViewer.Overlay({
-      element: overlayElement,
-      pageIndex,
-      position: point,
-      onDisappear: () => overlay.remove(),
+      if (event.pageIndex === 1) {
+        instance.setCustomOverlayItem(getOverlayItemForPage2(nutrientViewer));
+      }
     });
 
-    // Close button handler
-    overlayElement
-      .querySelector("#close-overlay")
-      .addEventListener("click", () => {
-        overlay.remove();
-      });
+    return instance;
+  });
+}
+
+function getOverlayItemForPage1(nutrientViewer) {
+  // We create a div element with an emoji and a short text.
+  const overlayElement = document.createElement("div");
+
+  overlayElement.style.cssText =
+    "width: 300px;background: #FFF; border: 1px #333 solid; font-family: sans-serif; font-size: 14px; padding: 20px;";
+  overlayElement.innerHTML =
+    "<p>👋 This is an overlay item that appears when clicking on the first page. Find out what happens when you click on the second page.";
 
-    instance.setCustomOverlayItem(overlay);
+  // Then we return a NutrientViewer.CustomOverlayItem which uses the overlayElement
+  // that we created above as a node, the pageIndex we get from our onPress
+  // event and define the position on the page.
+  return new nutrientViewer.CustomOverlayItem({
+    id: "overlay-item-first-page",
+    node: overlayElement,
+    pageIndex: 0,
+    position: new nutrientViewer.Geometry.Point({ x: 300, y: 50 }),
   });
+}
 
-  return instance;
+function getOverlayItemForPage2(nutrientViewer) {
+  const overlayElement = document.createElement("div");
+
+  // In this case we embed a video to the page
+  overlayElement.innerHTML =
+    '<iframe src="https://player.vimeo.com/video/227250697" width="500" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
+
+  // Then we return a NutrientViewer.CustomOverlayItem which uses the overlayElement
+  // that we created above as a node, the pageIndex we get from our onPress
+  // event and define the position on the page.
+  return new nutrientViewer.CustomOverlayItem({
+    id: "overlay-item-second-page",
+    node: overlayElement,
+    pageIndex: 1,
+    position: new nutrientViewer.Geometry.Point({ x: 55, y: 220 }),
+  });
 }
 
 /**
- * Unload the viewer from a container
- * @param nutrientViewer - The NutrientViewer object
+ * Unload the custom overlays viewer from a container
+ * @param nutrientViewer - The NutrientViewer object (from CDN)
  * @param container - The container element
  */
-export function unloadCustomOverlaysViewer(nutrientViewer, container) {
-  nutrientViewer.unload(container);
+export async function unloadCustomOverlaysViewer(nutrientViewer, container) {
+  if (nutrientViewer) {
+    nutrientViewer.unload(container);
+  }
 }