@dmitryvim/form-builder 0.2.0 → 0.2.2

package/dist/esm/index.js

@@ -1496,6 +1496,14 @@ function renderResourcePills(container, rids, state, onRemove) {
     container.appendChild(slot);
   }
 }
+function renderThumbnailError(slot, iconSize = "w-12 h-12") {
+  slot.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400">
+    <svg class="${iconSize} text-red-400" fill="currentColor" viewBox="0 0 24 24">
+      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
+    </svg>
+    <div class="text-xs mt-1 text-red-600">Preview error</div>
+  </div>`;
+}
 async function renderThumbnailForResource(slot, rid, meta, state) {
   if (meta && meta.type?.startsWith("image/")) {
     if (meta.file && meta.file instanceof File) {
@@ -1509,19 +1517,27 @@ async function renderThumbnailForResource(slot, rid, meta, state) {
       reader.readAsDataURL(meta.file);
       slot.appendChild(img);
     } else if (state.config.getThumbnail) {
-      const url = await state.config.getThumbnail(rid);
-      if (url) {
-        const img = document.createElement("img");
-        img.className = "w-full h-full object-contain";
-        img.alt = meta.name;
-        img.src = url;
-        slot.appendChild(img);
-      } else {
-        slot.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400">
-          <svg class="w-12 h-12" fill="currentColor" viewBox="0 0 24 24">
-            <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
-          </svg>
-        </div>`;
+      try {
+        const url = await state.config.getThumbnail(rid);
+        if (url) {
+          const img = document.createElement("img");
+          img.className = "w-full h-full object-contain";
+          img.alt = meta.name;
+          img.src = url;
+          slot.appendChild(img);
+        } else {
+          slot.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400">
+            <svg class="w-12 h-12" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
+            </svg>
+          </div>`;
+        }
+      } catch (error) {
+        const err = error instanceof Error ? error : new Error(String(error));
+        if (state.config.onThumbnailError) {
+          state.config.onThumbnailError(err, rid);
+        }
+        renderThumbnailError(slot);
       }
     } else {
       slot.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400">
@@ -1548,29 +1564,37 @@ async function renderThumbnailForResource(slot, rid, meta, state) {
         </div>
       `;
     } else if (state.config.getThumbnail) {
-      const videoUrl = await state.config.getThumbnail(rid);
-      if (videoUrl) {
-        slot.innerHTML = `
-          <div class="relative group h-full w-full">
-            <video class="w-full h-full object-contain" preload="metadata" muted>
-              <source src="${videoUrl}" type="${meta.type}">
-            </video>
-            <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
-              <div class="bg-white bg-opacity-90 rounded-full p-1">
-                <svg class="w-4 h-4 text-gray-800" fill="currentColor" viewBox="0 0 24 24">
-                  <path d="M8 5v14l11-7z"/>
-                </svg>
+      try {
+        const videoUrl = await state.config.getThumbnail(rid);
+        if (videoUrl) {
+          slot.innerHTML = `
+            <div class="relative group h-full w-full">
+              <video class="w-full h-full object-contain" preload="metadata" muted>
+                <source src="${videoUrl}" type="${meta.type}">
+              </video>
+              <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
+                <div class="bg-white bg-opacity-90 rounded-full p-1">
+                  <svg class="w-4 h-4 text-gray-800" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M8 5v14l11-7z"/>
+                  </svg>
+                </div>
               </div>
             </div>
-          </div>
-        `;
-      } else {
-        slot.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400">
-          <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
-            <path d="M8 5v14l11-7z"/>
-          </svg>
-          <div class="text-xs mt-1">${meta?.name || "Video"}</div>
-        </div>`;
+          `;
+        } else {
+          slot.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400">
+            <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M8 5v14l11-7z"/>
+            </svg>
+            <div class="text-xs mt-1">${meta?.name || "Video"}</div>
+          </div>`;
+        }
+      } catch (error) {
+        const err = error instanceof Error ? error : new Error(String(error));
+        if (state.config.onThumbnailError) {
+          state.config.onThumbnailError(err, rid);
+        }
+        renderThumbnailError(slot, "w-8 h-8");
       }
     } else {
       slot.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400">
@@ -1606,7 +1630,11 @@ async function handleFileSelect(file, container, fieldName, state, deps = null,
         throw new Error("Upload handler must return a string resource ID");
       }
     } catch (error) {
-      throw new Error(`File upload failed: ${error.message}`);
+      const err = error instanceof Error ? error : new Error(String(error));
+      if (state.config.onUploadError) {
+        state.config.onUploadError(err, file);
+      }
+      throw new Error(`File upload failed: ${err.message}`);
     }
   } else {
     throw new Error(
@@ -1683,7 +1711,11 @@ async function uploadSingleFile(file, state) {
       }
       return rid;
     } catch (error) {
-      throw new Error(`File upload failed: ${error.message}`);
+      const err = error instanceof Error ? error : new Error(String(error));
+      if (state.config.onUploadError) {
+        state.config.onUploadError(err, file);
+      }
+      throw new Error(`File upload failed: ${err.message}`);
     }
   } else {
     throw new Error(
@@ -1692,26 +1724,31 @@ async function uploadSingleFile(file, state) {
   }
 }
 async function forceDownload(resourceId, fileName, state) {
-  let fileUrl = null;
-  if (state.config.getDownloadUrl) {
-    fileUrl = state.config.getDownloadUrl(resourceId);
-  } else if (state.config.getThumbnail) {
-    fileUrl = await state.config.getThumbnail(resourceId);
-  }
-  if (fileUrl) {
-    const finalUrl = fileUrl.startsWith("http") ? fileUrl : new URL(fileUrl, window.location.href).href;
-    fetch(finalUrl).then((response) => {
+  try {
+    let fileUrl = null;
+    if (state.config.getDownloadUrl) {
+      fileUrl = state.config.getDownloadUrl(resourceId);
+    } else if (state.config.getThumbnail) {
+      fileUrl = await state.config.getThumbnail(resourceId);
+    }
+    if (fileUrl) {
+      const finalUrl = fileUrl.startsWith("http") ? fileUrl : new URL(fileUrl, window.location.href).href;
+      const response = await fetch(finalUrl);
       if (!response.ok) {
         throw new Error(`HTTP error! status: ${response.status}`);
       }
-      return response.blob();
-    }).then((blob) => {
+      const blob = await response.blob();
       downloadBlob(blob, fileName);
-    }).catch((error) => {
-      throw new Error(`File download failed: ${error.message}`);
-    });
-  } else {
-    console.warn("No download URL available for resource:", resourceId);
+    } else {
+      throw new Error("No download URL available for resource");
+    }
+  } catch (error) {
+    const err = error instanceof Error ? error : new Error(String(error));
+    if (state.config.onDownloadError) {
+      state.config.onDownloadError(err, resourceId, fileName);
+    }
+    console.error(`File download failed for ${fileName}:`, err);
+    throw err;
   }
 }
 function downloadBlob(blob, fileName) {
@@ -1737,7 +1774,14 @@ function addPrefillFilesToIndex(initialFiles, state) {
       if (!state.resourceIndex.has(resourceId)) {
         const filename = resourceId.split("/").pop() || "file";
         const extension = filename.split(".").pop()?.toLowerCase();
-        const fileType = extension && ["jpg", "jpeg", "png", "gif", "webp"].includes(extension) ? `image/${extension === "jpg" ? "jpeg" : extension}` : "application/octet-stream";
+        let fileType = "application/octet-stream";
+        if (extension) {
+          if (["jpg", "jpeg", "png", "gif", "webp"].includes(extension)) {
+            fileType = `image/${extension === "jpg" ? "jpeg" : extension}`;
+          } else if (["mp4", "webm", "mov", "avi"].includes(extension)) {
+            fileType = `video/${extension === "mov" ? "quicktime" : extension}`;
+          }
+        }
         state.resourceIndex.set(resourceId, {
           name: filename,
           type: fileType,
@@ -2670,6 +2714,9 @@ var defaultConfig = {
   actionHandler: null,
   onChange: null,
   onFieldChange: null,
+  onThumbnailError: null,
+  onUploadError: null,
+  onDownloadError: null,
   debounceMs: 300,
   enableFilePreview: true,
   maxPreviewSize: "200px",
@@ -2970,6 +3017,25 @@ var FormBuilderInstance = class {
   constructor(config) {
     this.instanceId = generateInstanceId();
     this.state = createInstanceState(config);
+    if (typeof process !== "undefined" && process.env.NODE_ENV === "development") {
+      if (config?.getThumbnail) {
+        const testResult = config.getThumbnail("test-id");
+        if (!(testResult instanceof Promise)) {
+          console.warn(
+            "[form-builder] getThumbnail must be async (return Promise). Wrap your function: async (id) => { ... }"
+          );
+        }
+      }
+      if (!globalThis.__formBuilderInstances) {
+        globalThis.__formBuilderInstances = /* @__PURE__ */ new Set();
+      }
+      globalThis.__formBuilderInstances.add(this.instanceId);
+      if (globalThis.__formBuilderInstances.size > 10) {
+        console.warn(
+          `[form-builder] ${globalThis.__formBuilderInstances.size} instances active. Possible memory leak - ensure you call destroy() when done.`
+        );
+      }
+    }
   }
   /**
    * Get instance ID (useful for debugging and resource prefixing)
@@ -3515,6 +3581,9 @@ var FormBuilderInstance = class {
     this.state.formRoot = null;
     this.state.schema = null;
     this.state.externalActions = null;
+    if (typeof process !== "undefined" && process.env.NODE_ENV === "development") {
+      globalThis.__formBuilderInstances?.delete(this.instanceId);
+    }
   }
 };