docuseal-svelte 0.0.4 → 0.1.1

package/README.md

@@ -26,6 +26,18 @@ This package supports:
 - Svelte 4.x
 - Svelte 5.x
 
+## Development
+
+```bash
+npm test        # run the test suite once
+npm run test:watch  # re-run tests as you edit
+npm run check   # type-check the library and the tests
+```
+
+Tests live in the top-level `tests/` directory rather than beside the source, because
+`svelte-package` copies everything under `src/lib` into `dist`. `npm run prepack` fails if a
+test file ever reaches the built package.
+
 ## How to Contribute
 
 Contributions are welcome! Please fork the repository and create a pull request with your changes. Make sure to create a changeset for any significant updates.

package/dist/components/DocuSealBuilder.svelte

@@ -14,7 +14,12 @@
     withTitle = true,
     withDocumentsList = true,
     withFieldsList = true,
+    withFieldsDetection = false,
     withFieldPlaceholder = false,
+    withDynamicDocuments = false,
+    withPrefillable = false,
+    withCustomFieldsTab = false,
+    withRevisions = false,
     onlyDefinedFields = false,
     preview = false,
     previewMode = false,
@@ -27,6 +32,7 @@
     fields = [],
     submitters = [],
     requiredFields = [],
+    dateFormats = [],
     i18n = {},
     withSignYourselfButton = true,
     withUploadButton = true,
@@ -45,6 +51,7 @@
     onSend = undefined,
     onSave = undefined,
     onChange = undefined,
+    onError = undefined,
   }: {
     token: string
     host?: string
@@ -53,7 +60,12 @@
     withTitle?: boolean
     withDocumentsList?: boolean
     withFieldsList?: boolean
+    withFieldsDetection?: boolean
     withFieldPlaceholder?: boolean
+    withDynamicDocuments?: boolean
+    withPrefillable?: boolean
+    withCustomFieldsTab?: boolean
+    withRevisions?: boolean
     onlyDefinedFields?: boolean
     preview?: boolean
     previewMode?: boolean
@@ -66,6 +78,7 @@
     fields?: DocuSealBuilderField[]
     submitters?: DocuSealBuilderSubmitter[]
     requiredFields?: DocuSealBuilderField[]
+    dateFormats?: string[]
     i18n?: object
     withSignYourselfButton?: boolean
     withUploadButton?: boolean
@@ -84,6 +97,7 @@
     onSend?: ((detail: any) => void) | undefined
     onSave?: ((detail: any) => void) | undefined
     onChange?: ((detail: any) => void) | undefined
+    onError?: ((error: DocuSealError) => void) | undefined
   } = $props()
 
   let el = $state<HTMLElement | null>(null)
@@ -108,7 +122,6 @@
       const scriptId = "docuseal-builder-script"
       const scriptSrc = `https://${host}/js/builder.js`
 
-      // Check if script already exists
       const existingScript = document.getElementById(scriptId)
       if (existingScript) {
         resolve()
@@ -125,8 +138,8 @@
         reject(
           new DocuSealError(
             `Failed to load DocuSeal builder script from ${scriptSrc}`,
-            "SCRIPT_LOAD_ERROR"
-          )
+            "SCRIPT_LOAD_ERROR",
+          ),
         )
 
       document.head.appendChild(script)
@@ -134,55 +147,39 @@
   }
 
   const setupEventListeners = (element: HTMLElement): (() => void) => {
-    const handleLoad = (e: Event) => {
-      if (onLoad && e instanceof CustomEvent) {
-        onLoad(e.detail)
-      }
-    }
-
-    const handleUpload = (e: Event) => {
-      if (onUpload && e instanceof CustomEvent) {
-        onUpload(e.detail)
-      }
-    }
-
-    const handleSend = (e: Event) => {
-      if (onSend && e instanceof CustomEvent) {
-        onSend(e.detail)
-      }
-    }
-
-    const handleSave = (e: Event) => {
-      if (onSave && e instanceof CustomEvent) {
-        onSave(e.detail)
-      }
+    const handlers: Record<string, ((detail: any) => void) | undefined> = {
+      load: onLoad,
+      upload: onUpload,
+      send: onSend,
+      save: onSave,
+      change: onChange,
     }
 
-    const handleChange = (e: Event) => {
-      if (onChange && e instanceof CustomEvent) {
-        onChange(e.detail)
+    const removers = Object.entries(handlers).map(([eventName, handler]) => {
+      const listener = (e: Event) => {
+        if (handler && e instanceof CustomEvent) {
+          handler(e.detail)
+        }
       }
-    }
 
-    element.addEventListener("load", handleLoad)
-    element.addEventListener("upload", handleUpload)
-    element.addEventListener("send", handleSend)
-    element.addEventListener("save", handleSave)
-    element.addEventListener("change", handleChange)
+      element.addEventListener(eventName, listener)
+      return () => element.removeEventListener(eventName, listener)
+    })
 
-    // Return cleanup function
-    return () => {
-      element.removeEventListener("load", handleLoad)
-      element.removeEventListener("upload", handleUpload)
-      element.removeEventListener("send", handleSend)
-      element.removeEventListener("save", handleSave)
-      element.removeEventListener("change", handleChange)
-    }
+    return () => removers.forEach((remove) => remove())
   }
 
+  const asDocuSealError = (error: unknown): DocuSealError =>
+    error instanceof DocuSealError
+      ? error
+      : new DocuSealError(
+          "Failed to initialize DocuSeal Builder",
+          "INIT_ERROR",
+          error,
+        )
+
   onMount(() => {
     let cleanup: (() => void) | undefined
-
     ;(async () => {
       try {
         validateHost(host)
@@ -191,15 +188,12 @@
           cleanup = setupEventListeners(el)
         }
       } catch (error) {
-        console.error("DocuSeal Builder initialization error:", error)
-        if (error instanceof DocuSealError) {
-          throw error
+        const initError = asDocuSealError(error)
+        if (onError) {
+          onError(initError)
+        } else {
+          console.error("DocuSeal Builder initialization error:", initError)
         }
-        throw new DocuSealError(
-          "Failed to initialize DocuSeal Builder",
-          "INIT_ERROR",
-          error
-        )
       }
     })()
 
@@ -213,7 +207,7 @@
   bind:this={el}
   data-token={token}
   data-preview={booleanToAttr(preview || previewMode)}
-  data-input-mode={inputMode}
+  data-input-mode={booleanToAttr(inputMode)}
   data-language={language}
   data-autosave={booleanToAttr(autosave)}
   data-send-button-text={sendButtonText}
@@ -224,6 +218,7 @@
   data-fields={JSON.stringify(fields)}
   data-submitters={JSON.stringify(submitters)}
   data-required-fields={JSON.stringify(requiredFields)}
+  data-date-formats={dateFormats.join(",")}
   data-i18n={JSON.stringify(i18n)}
   data-custom-button-title={customButton.title}
   data-custom-button-url={customButton.url}
@@ -232,9 +227,14 @@
   data-with-recipients-button={booleanToAttr(withRecipientsButton)}
   data-with-send-button={booleanToAttr(withSendButton)}
   data-with-documents-list={booleanToAttr(withDocumentsList)}
+  data-with-dynamic-documents={booleanToAttr(withDynamicDocuments)}
   data-with-fields-list={booleanToAttr(withFieldsList)}
+  data-with-fields-detection={booleanToAttr(withFieldsDetection)}
   data-with-field-placeholder={booleanToAttr(withFieldPlaceholder)}
+  data-with-prefillable={booleanToAttr(withPrefillable)}
+  data-with-custom-fields-tab={booleanToAttr(withCustomFieldsTab)}
   data-with-signature-id={booleanToAttr(withSignatureId)}
+  data-with-revisions={booleanToAttr(withRevisions)}
   data-with-title={booleanToAttr(withTitle)}
   data-only-defined-fields={booleanToAttr(onlyDefinedFields)}
   data-with-upload-button={booleanToAttr(withUploadButton)}

package/dist/components/DocuSealBuilder.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { DocuSealBuilderField, DocuSealBuilderSubmitter } from "../types/index.js";
+import { DocuSealError } from "../utils/docuseal.js";
 type $$ComponentProps = {
     token: string;
     host?: string;
@@ -7,7 +8,12 @@ type $$ComponentProps = {
     withTitle?: boolean;
     withDocumentsList?: boolean;
     withFieldsList?: boolean;
+    withFieldsDetection?: boolean;
     withFieldPlaceholder?: boolean;
+    withDynamicDocuments?: boolean;
+    withPrefillable?: boolean;
+    withCustomFieldsTab?: boolean;
+    withRevisions?: boolean;
     onlyDefinedFields?: boolean;
     preview?: boolean;
     previewMode?: boolean;
@@ -20,6 +26,7 @@ type $$ComponentProps = {
     fields?: DocuSealBuilderField[];
     submitters?: DocuSealBuilderSubmitter[];
     requiredFields?: DocuSealBuilderField[];
+    dateFormats?: string[];
     i18n?: object;
     withSignYourselfButton?: boolean;
     withUploadButton?: boolean;
@@ -44,6 +51,7 @@ type $$ComponentProps = {
     onSend?: ((detail: any) => void) | undefined;
     onSave?: ((detail: any) => void) | undefined;
     onChange?: ((detail: any) => void) | undefined;
+    onError?: ((error: DocuSealError) => void) | undefined;
 };
 declare const DocuSealBuilder: import("svelte").Component<$$ComponentProps, {}, "">;
 type DocuSealBuilder = ReturnType<typeof DocuSealBuilder>;

package/dist/components/DocuSealForm.svelte

@@ -37,6 +37,7 @@
   export let withFieldNames: boolean = true
   export let withFieldPlaceholder: boolean = false
   export let withDownloadButton: boolean = true
+  export let onlyRequiredFields: boolean = false
   export let allowToResubmit: boolean = true
   export let allowTypedSignature: boolean = true
   export let signature: string = ""
@@ -76,32 +77,25 @@
       document.head.appendChild(script)
     }
 
-    const handleCompleted = (e: Event) =>
-      onComplete && onComplete((e as CustomEvent).detail)
-    const handleInit = (e: Event) => onInit && onInit((e as CustomEvent).detail)
-    const handleDecline = (e: Event) =>
-      onDecline && onDecline((e as CustomEvent).detail)
-    const handleLoad = (e: Event) => onLoad && onLoad((e as CustomEvent).detail)
-    const handleError = (e: Event) =>
-      onError && onError((e as CustomEvent).detail)
-
-    if (el) {
-      el.addEventListener("completed", handleCompleted)
-      el.addEventListener("init", handleInit)
-      el.addEventListener("declined", handleDecline)
-      el.addEventListener("load", handleLoad)
-      el.addEventListener("error", handleError)
+    const handlers: Record<string, ((detail: any) => void) | undefined> = {
+      completed: onComplete,
+      init: onInit,
+      declined: onDecline,
+      load: onLoad,
+      error: onError,
     }
 
-    return () => {
-      if (el) {
-        el.removeEventListener("completed", handleCompleted)
-        el.removeEventListener("init", handleInit)
-        el.removeEventListener("declined", handleDecline)
-        el.removeEventListener("load", handleLoad)
-        el.removeEventListener("error", handleError)
-      }
-    }
+    const element = el
+    if (!element) return
+
+    const removers = Object.entries(handlers).map(([eventName, handler]) => {
+      const listener = (e: Event) => handler && handler((e as CustomEvent).detail)
+
+      element.addEventListener(eventName, listener)
+      return () => element.removeEventListener(eventName, listener)
+    })
+
+    return () => removers.forEach((remove) => remove())
   })
 </script>
 
@@ -115,7 +109,7 @@
   data-external-id={externalId || applicationKey}
   data-expand={booleanToAttr(expand)}
   data-minimize={booleanToAttr(minimize)}
-  data-order-as-on-page={orderAsOnPage}
+  data-order-as-on-page={booleanToAttr(orderAsOnPage)}
   data-preview={booleanToAttr(preview)}
   data-dry-run={booleanToAttr(dryRun)}
   data-go-to-last={booleanToAttr(goToLast)}
@@ -129,6 +123,7 @@
   data-with-field-names={booleanToAttr(withFieldNames)}
   data-with-field-placeholder={booleanToAttr(withFieldPlaceholder)}
   data-with-download-button={booleanToAttr(withDownloadButton)}
+  data-only-required-fields={booleanToAttr(onlyRequiredFields)}
   data-allow-to-resubmit={booleanToAttr(allowToResubmit)}
   data-allow-typed-signature={booleanToAttr(allowTypedSignature)}
   data-signature={signature}

package/dist/components/DocuSealForm.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { DocuSealFormField } from "../types/index.ts";
+import type { DocuSealFormField } from "../types/index.js";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -48,6 +48,7 @@ declare const DocuSealForm: $$__sveltets_2_IsomorphicComponent<{
     withFieldNames?: boolean;
     withFieldPlaceholder?: boolean;
     withDownloadButton?: boolean;
+    onlyRequiredFields?: boolean;
     allowToResubmit?: boolean;
     allowTypedSignature?: boolean;
     signature?: string;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { default as DocuSealForm } from './components/DocuSealForm.svelte';
-export { default as DocuSealBuilder } from './components/DocuSealBuilder.svelte';
-export type { DocuSealFormProps, DocuSealFormField, DocuSealBuilderField, DocuSealBuilderSubmitter, } from './types/index.js';
-export { isValidDocuSealUrl, buildFormUrl, DocuSealEventType, DocuSealError } from './utils/docuseal.js';
+export { default as DocuSealForm } from "./components/DocuSealForm.svelte";
+export { default as DocuSealBuilder } from "./components/DocuSealBuilder.svelte";
+export type { DocuSealFormProps, DocuSealFormField, DocuSealBuilderField, DocuSealBuilderSubmitter, } from "./types/index.js";
+export { isValidDocuSealUrl, buildFormUrl, DocuSealEventType, DocuSealError, } from "./utils/docuseal.js";

package/dist/index.js

@@ -1,6 +1,3 @@
-// Reexport your entry components here
-// Re-export components
-export { default as DocuSealForm } from './components/DocuSealForm.svelte';
-export { default as DocuSealBuilder } from './components/DocuSealBuilder.svelte';
-// Re-export utilities (optional - if you want users to access them)
-export { isValidDocuSealUrl, buildFormUrl, DocuSealEventType, DocuSealError } from './utils/docuseal.js';
+export { default as DocuSealForm } from "./components/DocuSealForm.svelte";
+export { default as DocuSealBuilder } from "./components/DocuSealBuilder.svelte";
+export { isValidDocuSealUrl, buildFormUrl, DocuSealEventType, DocuSealError, } from "./utils/docuseal.js";

package/dist/types/index.d.ts

@@ -65,6 +65,7 @@ export interface DocuSealFormProps {
     withDownloadButton?: boolean;
     withSendCopyButton?: boolean;
     withCompleteButton?: boolean;
+    onlyRequiredFields?: boolean;
     allowToResubmit?: boolean;
     allowTypedSignature?: boolean;
     signature?: string;

package/dist/utils/docuseal.d.ts

@@ -1,19 +1,10 @@
-/**
- * Validates if a URL is a valid DocuSeal URL
- */
 export declare function isValidDocuSealUrl(url: string): boolean;
-/**
- * Builds a DocuSeal form URL with query parameters
- */
 export declare function buildFormUrl(baseUrl: string, params?: {
     email?: string;
     name?: string;
     phone?: string;
     [key: string]: string | undefined;
 }): string;
-/**
- * Message types from DocuSeal iframe
- */
 export declare enum DocuSealEventType {
     COMPLETED = "completed",
     DECLINED = "declined",
@@ -21,49 +12,8 @@ export declare enum DocuSealEventType {
     LOADED = "loaded",
     RESIZE = "resize"
 }
-/**
- * Type guard for DocuSeal messages
- */
-export declare function isDocuSealMessage(event: MessageEvent): boolean;
-/**
- * Parse DocuSeal postMessage events
- */
-export declare function parseDocuSealEvent(event: MessageEvent): {
-    type: DocuSealEventType;
-    data?: any;
-} | null;
-/**
- * Create an iframe element with DocuSeal configuration
- */
-export declare function createDocuSealIframe(src: string, options?: {
-    title?: string;
-    className?: string;
-    allowFullscreen?: boolean;
-}): HTMLIFrameElement;
-/**
- * Send a message to DocuSeal iframe
- */
-export declare function sendToDocuSeal(iframe: HTMLIFrameElement | null, message: {
-    type: string;
-    data?: any;
-}): void;
-/**
- * Calculates optimal iframe height based on content
- */
-export declare function calculateIframeHeight(contentHeight?: number, minHeight?: number, maxHeight?: number): number;
-/**
- * Error types that can occur with DocuSeal
- */
 export declare class DocuSealError extends Error {
     code?: string | undefined;
     details?: any | undefined;
     constructor(message: string, code?: string | undefined, details?: any | undefined);
 }
-/**
- * Retry logic for failed operations
- */
-export declare function retryOperation<T>(operation: () => Promise<T>, maxRetries?: number, delayMs?: number): Promise<T>;
-/**
- * Prefetch DocuSeal resources for faster loading
- */
-export declare function prefetchDocuSeal(url: string): void;

package/dist/utils/docuseal.js

@@ -1,19 +1,13 @@
-/**
- * Validates if a URL is a valid DocuSeal URL
- */
+const DOCUSEAL_DOMAINS = ["docuseal.co", "docuseal.com", "docuseal.eu"];
 export function isValidDocuSealUrl(url) {
     try {
-        const parsed = new URL(url);
-        return parsed.hostname.includes('docuseal.co') ||
-            parsed.hostname.includes('docuseal.com');
+        const { hostname } = new URL(url);
+        return DOCUSEAL_DOMAINS.some((domain) => hostname === domain || hostname.endsWith(`.${domain}`));
     }
     catch {
         return false;
     }
 }
-/**
- * Builds a DocuSeal form URL with query parameters
- */
 export function buildFormUrl(baseUrl, params) {
     const url = new URL(baseUrl);
     if (params) {
@@ -25,9 +19,6 @@ export function buildFormUrl(baseUrl, params) {
     }
     return url.toString();
 }
-/**
- * Message types from DocuSeal iframe
- */
 export var DocuSealEventType;
 (function (DocuSealEventType) {
     DocuSealEventType["COMPLETED"] = "completed";
@@ -36,61 +27,6 @@ export var DocuSealEventType;
     DocuSealEventType["LOADED"] = "loaded";
     DocuSealEventType["RESIZE"] = "resize";
 })(DocuSealEventType || (DocuSealEventType = {}));
-/**
- * Type guard for DocuSeal messages
- */
-export function isDocuSealMessage(event) {
-    return event.data?.source === 'docuseal' ||
-        event.data?.type?.startsWith('docuseal.');
-}
-/**
- * Parse DocuSeal postMessage events
- */
-export function parseDocuSealEvent(event) {
-    if (!isDocuSealMessage(event)) {
-        return null;
-    }
-    const { type, data } = event.data;
-    return { type, data };
-}
-/**
- * Create an iframe element with DocuSeal configuration
- */
-export function createDocuSealIframe(src, options) {
-    const iframe = document.createElement('iframe');
-    iframe.src = src;
-    iframe.title = options?.title || 'DocuSeal Form';
-    iframe.className = options?.className || '';
-    iframe.setAttribute('frameborder', '0');
-    iframe.setAttribute('allow', 'camera; microphone; clipboard-write');
-    if (options?.allowFullscreen) {
-        iframe.setAttribute('allowfullscreen', 'true');
-    }
-    iframe.style.width = '100%';
-    iframe.style.height = '100%';
-    return iframe;
-}
-/**
- * Send a message to DocuSeal iframe
- */
-export function sendToDocuSeal(iframe, message) {
-    if (!iframe?.contentWindow) {
-        console.warn('DocuSeal iframe not ready');
-        return;
-    }
-    iframe.contentWindow.postMessage({ source: 'parent', ...message }, '*');
-}
-/**
- * Calculates optimal iframe height based on content
- */
-export function calculateIframeHeight(contentHeight, minHeight = 400, maxHeight = 1200) {
-    if (!contentHeight)
-        return minHeight;
-    return Math.min(Math.max(contentHeight, minHeight), maxHeight);
-}
-/**
- * Error types that can occur with DocuSeal
- */
 export class DocuSealError extends Error {
     code;
     details;
@@ -98,33 +34,6 @@ export class DocuSealError extends Error {
         super(message);
         this.code = code;
         this.details = details;
-        this.name = 'DocuSealError';
-    }
-}
-/**
- * Retry logic for failed operations
- */
-export async function retryOperation(operation, maxRetries = 3, delayMs = 1000) {
-    let lastError = new Error();
-    for (let i = 0; i < maxRetries; i++) {
-        try {
-            return await operation();
-        }
-        catch (error) {
-            lastError = error;
-            if (i < maxRetries - 1) {
-                await new Promise(resolve => setTimeout(resolve, delayMs * (i + 1)));
-            }
-        }
+        this.name = "DocuSealError";
     }
-    throw new DocuSealError(`Operation failed after ${maxRetries} retries`, 'RETRY_EXCEEDED', lastError);
-}
-/**
- * Prefetch DocuSeal resources for faster loading
- */
-export function prefetchDocuSeal(url) {
-    const link = document.createElement('link');
-    link.rel = 'prefetch';
-    link.href = url;
-    document.head.appendChild(link);
 }

package/package.json

@@ -1,20 +1,23 @@
 {
 	"name": "docuseal-svelte",
-	"version": "0.0.4",
+	"version": "0.1.1",
 	"description": "Docuseal Svelte component library for document signing and management.",
 	"license": "MIT",
 	"repository": {
 		"type": "git",
-		"url": "https://github.com/SirCen/docuseal-svelte.git"
+		"url": "git+https://github.com/SirCen/docuseal-svelte.git"
 	},
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
+		"release": "npm stage publish",
 		"preview": "vite preview",
 		"prepare": "svelte-kit sync || echo ''",
-		"prepack": "svelte-kit sync && svelte-package && publint",
+		"prepack": "svelte-kit sync && svelte-package && node scripts/assert-no-tests-in-dist.js && publint",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"test": "vitest run",
+		"test:watch": "vitest"
 	},
 	"files": [
 		"dist",
@@ -42,11 +45,14 @@
 		"@sveltejs/kit": "^2.49.1",
 		"@sveltejs/package": "^2.5.7",
 		"@sveltejs/vite-plugin-svelte": "^6.2.1",
+		"@testing-library/svelte": "^5.4.2",
+		"jsdom": "^30.0.1",
 		"publint": "^0.3.15",
 		"svelte": "^5.45.6",
 		"svelte-check": "^4.3.4",
 		"typescript": "^5.9.3",
-		"vite": "^7.2.6"
+		"vite": "^7.2.6",
+		"vitest": "^4.1.11"
 	},
 	"keywords": [
 		"svelte",