@liwe3/webcomponents-svelte 1.1.0 → 1.1.11

package/dist/ChunkUploader.svelte

@@ -1,149 +1,211 @@
+<script module lang="ts">
+export type ChunkFileEvent = {
+	id : string;
+	status : string;
+	progress : number;
+	uploadId : string;
+	key : string;
+	originalFileName : string;
+	size : number;
+};
+</script>
 <script lang="ts">
-  import { onMount } from "svelte";
-  import type { HTMLAttributes } from "svelte/elements";
-  import type {
-    ChunkUploaderElement as ChunkUploaderElementType,
-    UploadedFile,
-  } from "@liwe3/webcomponents";
-
-  interface Props extends HTMLAttributes<ChunkUploaderElementType> {
-    serverURL?: string;
-    chunkSize?: number;
-    authToken?: string;
-    validFiletypes?: string[];
-    maxFileSize?: number;
-    onfilecomplete?: (event: CustomEvent<UploadedFile>) => void;
-    onuploadcomplete?: (event: CustomEvent<UploadedFile[]>) => void;
-    onuploadaborted?: (event: CustomEvent<UploadedFile[]>) => void;
-  }
-
-  let {
-    serverURL = "",
-    chunkSize = 5,
-    authToken,
-    validFiletypes,
-    maxFileSize = 5120,
-    onfilecomplete,
-    onuploadcomplete,
-    onuploadaborted,
-    ...restProps
-  }: Props = $props();
-
-  let uploaderElement: ChunkUploaderElementType;
-  let isReady = false;
-  let removeListeners: (() => void) | null = null;
-
-  /**
-   * Syncs the latest prop values down to the underlying web component.
-   */
-  const syncProps = () => {
-    if (!isReady || !uploaderElement) return;
-
-    uploaderElement.serverURL = serverURL ?? "";
-    uploaderElement.chunkSize = chunkSize;
-    uploaderElement.authToken = authToken;
-    uploaderElement.validFiletypes = validFiletypes?.length
-      ? [...validFiletypes]
-      : undefined;
-    uploaderElement.maxFileSize = maxFileSize;
-  };
-
-  /**
-   * Forwards custom events emitted by the web component to Svelte callbacks.
-   */
-  const bindEvents = () => {
-    if (!uploaderElement) return;
-
-    const handleFileComplete = (event: Event) => {
-      onfilecomplete?.(event as CustomEvent<UploadedFile>);
-    };
-
-    const handleUploadComplete = (event: Event) => {
-      onuploadcomplete?.(event as CustomEvent<UploadedFile[]>);
-    };
-
-    const handleUploadAborted = (event: Event) => {
-      onuploadaborted?.(event as CustomEvent<UploadedFile[]>);
-    };
-
-    uploaderElement.addEventListener(
-      "filecomplete",
-      handleFileComplete as EventListener
-    );
-    uploaderElement.addEventListener(
-      "uploadcomplete",
-      handleUploadComplete as EventListener
-    );
-    uploaderElement.addEventListener(
-      "uploadaborted",
-      handleUploadAborted as EventListener
-    );
-
-    removeListeners = () => {
-      uploaderElement.removeEventListener(
-        "filecomplete",
-        handleFileComplete as EventListener
-      );
-      uploaderElement.removeEventListener(
-        "uploadcomplete",
-        handleUploadComplete as EventListener
-      );
-      uploaderElement.removeEventListener(
-        "uploadaborted",
-        handleUploadAborted as EventListener
-      );
-    };
-  };
-
-  onMount(() => {
-    let isMounted = true;
-
-    const setup = async () => {
-      await import("@liwe3/webcomponents/chunk-uploader");
-      await customElements.whenDefined("liwe3-chunk-uploader");
-
-      if (!isMounted) return;
-      isReady = true;
-      syncProps();
-      bindEvents();
-    };
-
-    void setup();
-
-    return () => {
-      isMounted = false;
-      removeListeners?.();
-      removeListeners = null;
-    };
-  });
-
-  $effect(() => {
-    if (!isReady || !uploaderElement) return;
-    uploaderElement.serverURL = serverURL ?? "";
-  });
-
-  $effect(() => {
-    if (!isReady || !uploaderElement) return;
-    uploaderElement.chunkSize = chunkSize;
-  });
-
-  $effect(() => {
-    if (!isReady || !uploaderElement) return;
-    uploaderElement.authToken = authToken;
-  });
-
-  $effect(() => {
-    if (!isReady || !uploaderElement) return;
-    uploaderElement.validFiletypes = validFiletypes?.length
-      ? [...validFiletypes]
-      : undefined;
-  });
-
-  $effect(() => {
-    if (!isReady || !uploaderElement) return;
-    uploaderElement.maxFileSize = maxFileSize;
-  });
+import { onMount } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type {
+	ChunkUploaderElement as ChunkUploaderElementType,
+	UploadedFile,
+} from '@liwe3/webcomponents';
+
+interface Props extends HTMLAttributes<ChunkUploaderElementType> {
+	serverURL? : string;
+	chunkSize? : number;
+	authToken? : string;
+	validFiletypes? : string[];
+	maxFileSize? : number;
+	labelDropFiles? : string;
+	labelBrowse? : string;
+	folder? : string;
+	onfilecomplete? : ( event : ChunkFileEvent ) => void;
+	onuploadcomplete? : ( events : ChunkFileEvent[] ) => void;
+	onuploadaborted? : ( events : ChunkFileEvent[] ) => void;
+	parseResponse? : ( response : any, endpoint : 'initiate' | 'part' | 'complete' ) => any;
+}
+
+let {
+	serverURL = '',
+	chunkSize = 5,
+	authToken,
+	validFiletypes,
+	maxFileSize = 5120,
+	labelDropFiles,
+	labelBrowse,
+	folder,
+	onfilecomplete,
+	onuploadcomplete,
+	onuploadaborted,
+	parseResponse,
+	...restProps
+} : Props = $props();
+
+let uploaderElement : ChunkUploaderElementType;
+let isReady = $state( false );
+let removeListeners : (() => void) | null = null;
+
+/**
+ * Syncs the latest prop values down to the underlying web component.
+ */
+const syncProps = () => {
+	if ( !isReady || !uploaderElement ) return;
+
+	uploaderElement.serverURL = serverURL ?? '';
+	uploaderElement.chunkSize = chunkSize;
+	uploaderElement.authToken = authToken;
+	uploaderElement.validFiletypes = validFiletypes?.length
+		? [ ...validFiletypes ]
+		: undefined;
+	uploaderElement.maxFileSize = maxFileSize;
+	uploaderElement.labelDropFiles = labelDropFiles;
+	uploaderElement.labelBrowse = labelBrowse;
+	uploaderElement.folder = folder;
+	uploaderElement.parseResponse = parseResponse;
+};
+
+const _mapEvent = ( dets : any ) : ChunkFileEvent => {
+	return {
+		id: dets.id,
+		originalFileName: dets.file.name,
+		status: dets.status,
+		progress: dets.progress,
+		size: dets.uploadedBytes,
+		uploadId: dets.uploadId,
+		key: dets.key,
+	};
+};
+
+/**
+ * Forwards custom events emitted by the web component to Svelte callbacks.
+ */
+const bindEvents = () => {
+	if ( !uploaderElement ) return;
+
+	const handleFileComplete = ( event : Event ) => {
+		const data : ChunkFileEvent = _mapEvent( event.detail );
+		onfilecomplete?.( data );
+	};
+
+	const handleUploadComplete = ( event : Event ) => {
+		const res : ChunkFileEvent[] = ( event as any ).detail.map( ( det ) => _mapEvent( det ) );
+		onuploadcomplete?.( res );
+	};
+
+	const handleUploadAborted = ( event : Event ) => {
+		const res : ChunkFileEvent[] = ( event as any ).detail.map( ( det ) => _mapEvent( det ) );
+		onuploadaborted?.( res );
+	};
+
+	uploaderElement.addEventListener(
+		'filecomplete',
+		handleFileComplete as EventListener,
+	);
+	uploaderElement.addEventListener(
+		'uploadcomplete',
+		handleUploadComplete as EventListener,
+	);
+	uploaderElement.addEventListener(
+		'uploadaborted',
+		handleUploadAborted as EventListener,
+	);
+
+	removeListeners = () => {
+		uploaderElement.removeEventListener(
+			'filecomplete',
+			handleFileComplete as EventListener,
+		);
+		uploaderElement.removeEventListener(
+			'uploadcomplete',
+			handleUploadComplete as EventListener,
+		);
+		uploaderElement.removeEventListener(
+			'uploadaborted',
+			handleUploadAborted as EventListener,
+		);
+	};
+};
+
+onMount( () => {
+	let isMounted = true;
+
+	const setup = async () => {
+		await import( '@liwe3/webcomponents/chunk-uploader' );
+		await customElements.whenDefined( 'liwe3-chunk-uploader' );
+
+		if ( !isMounted ) return;
+		isReady = true;
+		syncProps();
+		bindEvents();
+	};
+
+	void setup();
+
+	return () => {
+		isMounted = false;
+		removeListeners?.();
+		removeListeners = null;
+	};
+} );
+
+$effect( () => {
+	if ( !isReady || !uploaderElement ) return;
+	uploaderElement.serverURL = serverURL ?? '';
+} );
+
+$effect( () => {
+	if ( !isReady || !uploaderElement ) return;
+	uploaderElement.chunkSize = chunkSize;
+} );
+
+$effect( () => {
+	if ( !isReady || !uploaderElement ) return;
+	uploaderElement.authToken = authToken;
+} );
+
+$effect( () => {
+	if ( !isReady || !uploaderElement ) return;
+	uploaderElement.validFiletypes = validFiletypes?.length
+		? [ ...validFiletypes ]
+		: undefined;
+} );
+
+$effect( () => {
+	if ( !isReady || !uploaderElement ) return;
+	uploaderElement.maxFileSize = maxFileSize;
+} );
+
+$effect( () => {
+	if ( !isReady || !uploaderElement ) return;
+	uploaderElement.labelDropFiles = labelDropFiles;
+} );
+
+$effect( () => {
+	if ( !isReady || !uploaderElement ) return;
+	uploaderElement.labelBrowse = labelBrowse;
+} );
+
+$effect( () => {
+	if ( !isReady || !uploaderElement ) return;
+	uploaderElement.folder = folder;
+} );
+
+$effect( () => {
+	if ( !isReady || !uploaderElement ) return;
+	uploaderElement.parseResponse = parseResponse;
+} );
+
+$effect( () => {
+	if ( !uploaderElement ) return;
+	uploaderElement.setAttribute( 'folder', folder! );
+} );
 </script>
 
-<liwe3-chunk-uploader bind:this={uploaderElement} {...restProps}
-></liwe3-chunk-uploader>
+<liwe3-chunk-uploader bind:this={uploaderElement} {...restProps}></liwe3-chunk-uploader>

package/dist/ChunkUploader.svelte.d.ts

@@ -1,14 +1,27 @@
-import type { HTMLAttributes } from "svelte/elements";
-import type { ChunkUploaderElement as ChunkUploaderElementType, UploadedFile } from "@liwe3/webcomponents";
+export type ChunkFileEvent = {
+    id: string;
+    status: string;
+    progress: number;
+    uploadId: string;
+    key: string;
+    originalFileName: string;
+    size: number;
+};
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ChunkUploaderElement as ChunkUploaderElementType } from '@liwe3/webcomponents';
 interface Props extends HTMLAttributes<ChunkUploaderElementType> {
     serverURL?: string;
     chunkSize?: number;
     authToken?: string;
     validFiletypes?: string[];
     maxFileSize?: number;
-    onfilecomplete?: (event: CustomEvent<UploadedFile>) => void;
-    onuploadcomplete?: (event: CustomEvent<UploadedFile[]>) => void;
-    onuploadaborted?: (event: CustomEvent<UploadedFile[]>) => void;
+    labelDropFiles?: string;
+    labelBrowse?: string;
+    folder?: string;
+    onfilecomplete?: (event: ChunkFileEvent) => void;
+    onuploadcomplete?: (events: ChunkFileEvent[]) => void;
+    onuploadaborted?: (events: ChunkFileEvent[]) => void;
+    parseResponse?: (response: any, endpoint: 'initiate' | 'part' | 'complete') => any;
 }
 declare const ChunkUploader: import("svelte").Component<Props, {}, "">;
 type ChunkUploader = ReturnType<typeof ChunkUploader>;

package/dist/ChunkUploader.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChunkUploader.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ChunkUploader.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EACR,oBAAoB,IAAI,wBAAwB,EAChD,YAAY,EACb,MAAM,sBAAsB,CAAC;AAG9B,UAAU,KAAM,SAAQ,cAAc,CAAC,wBAAwB,CAAC;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;IAC5D,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,YAAY,EAAE,CAAC,KAAK,IAAI,CAAC;IAChE,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,YAAY,EAAE,CAAC,KAAK,IAAI,CAAC;CAChE;AA2IH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ChunkUploader.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ChunkUploader.svelte.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,cAAc,GAAG;IAC5B,EAAE,EAAG,MAAM,CAAC;IACZ,MAAM,EAAG,MAAM,CAAC;IAChB,QAAQ,EAAG,MAAM,CAAC;IAClB,QAAQ,EAAG,MAAM,CAAC;IAClB,GAAG,EAAG,MAAM,CAAC;IACb,gBAAgB,EAAG,MAAM,CAAC;IAC1B,IAAI,EAAG,MAAM,CAAC;CACd,CAAC;AAIF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EACX,oBAAoB,IAAI,wBAAwB,EAEhD,MAAM,sBAAsB,CAAC;AAG9B,UAAU,KAAM,SAAQ,cAAc,CAAC,wBAAwB,CAAC;IAC/D,SAAS,CAAC,EAAG,MAAM,CAAC;IACpB,SAAS,CAAC,EAAG,MAAM,CAAC;IACpB,SAAS,CAAC,EAAG,MAAM,CAAC;IACpB,cAAc,CAAC,EAAG,MAAM,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAG,MAAM,CAAC;IACtB,cAAc,CAAC,EAAG,MAAM,CAAC;IACzB,WAAW,CAAC,EAAG,MAAM,CAAC;IACtB,MAAM,CAAC,EAAG,MAAM,CAAC;IACjB,cAAc,CAAC,EAAG,CAAE,KAAK,EAAG,cAAc,KAAM,IAAI,CAAC;IACrD,gBAAgB,CAAC,EAAG,CAAE,MAAM,EAAG,cAAc,EAAE,KAAM,IAAI,CAAC;IAC1D,eAAe,CAAC,EAAG,CAAE,MAAM,EAAG,cAAc,EAAE,KAAM,IAAI,CAAC;IACzD,aAAa,CAAC,EAAG,CAAE,QAAQ,EAAG,GAAG,EAAE,QAAQ,EAAG,UAAU,GAAG,MAAM,GAAG,UAAU,KAAM,GAAG,CAAC;CACxF;AA4LD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/Dialogs.svelte

@@ -0,0 +1,82 @@
+<script module lang="ts">
+import type { DialogConfig, DialogElement } from '@liwe3/webcomponents';
+
+// Re-export types for convenience
+export type { DialogConfig, DialogElement };
+
+/**
+ * Shows a dialog with the given configuration.
+ *
+ * IMPORTANT: Make sure to add the <Dialogs /> component to your layout first!
+ * The <Dialogs /> component initializes the dialog web component system.
+ *
+ * @param config - The dialog configuration
+ * @returns The dialog element instance (or undefined if called during SSR)
+ *
+ * @example
+ * ```typescript
+ * // In your +layout.svelte
+ * import { Dialogs } from '@liwe3/webcomponents-svelte';
+ * <Dialogs />
+ *
+ * // In any component
+ * import { dialogAdd } from '@liwe3/webcomponents-svelte';
+ *
+ * const dialog = dialogAdd({
+ *   title: 'Delete File',
+ *   body: '<p>Are you sure you want to delete this file?</p>',
+ *   buttons: [
+ *     {
+ *       label: 'Delete',
+ *       backgroundColor: '#dc3545',
+ *       onclick: () => {
+ *         console.log('File deleted');
+ *         dialog?.close();
+ *       }
+ *     },
+ *     {
+ *       label: 'Cancel',
+ *       onclick: () => {
+ *         dialog?.close();
+ *       }
+ *     }
+ *   ],
+ *   modal: true,
+ *   escToClose: true,
+ *   clickToClose: true
+ * });
+ * ```
+ */
+export const dialogAdd = ( config : DialogConfig ) : DialogElement | undefined => {
+	// Only run on client side
+	if ( typeof window === 'undefined' ) return undefined;
+
+	// Get the dialogAdd function from window (set by the web component)
+	// The <Dialogs /> component should have already loaded the web component
+	const globalDialogAdd = ( window as any ).__liwe3_dialogAdd;
+
+	if ( !globalDialogAdd ) {
+		console.error(
+			'dialogAdd: Dialog web component not initialized. Did you forget to add <Dialogs /> to your layout?',
+		);
+		return undefined;
+	}
+
+	return globalDialogAdd( config );
+};
+</script>
+
+<script lang="ts">
+import { onMount } from 'svelte';
+
+onMount( async () => {
+	// Only run on the client side (onMount only runs in browser)
+	// Import and initialize the Dialog web component
+	const { dialogAdd: coreDialogAdd } = await import( '@liwe3/webcomponents/dialog' );
+
+	// Expose dialogAdd on window so the wrapper can access it
+	( window as any ).__liwe3_dialogAdd = coreDialogAdd;
+} );
+</script>
+
+<!-- This component doesn't render anything, it just loads the web component -->

package/dist/Dialogs.svelte.d.ts

@@ -0,0 +1,65 @@
+import type { DialogConfig, DialogElement } from '@liwe3/webcomponents';
+export type { DialogConfig, DialogElement };
+/**
+ * Shows a dialog with the given configuration.
+ *
+ * IMPORTANT: Make sure to add the <Dialogs /> component to your layout first!
+ * The <Dialogs /> component initializes the dialog web component system.
+ *
+ * @param config - The dialog configuration
+ * @returns The dialog element instance (or undefined if called during SSR)
+ *
+ * @example
+ * ```typescript
+ * // In your +layout.svelte
+ * import { Dialogs } from '@liwe3/webcomponents-svelte';
+ * <Dialogs />
+ *
+ * // In any component
+ * import { dialogAdd } from '@liwe3/webcomponents-svelte';
+ *
+ * const dialog = dialogAdd({
+ *   title: 'Delete File',
+ *   body: '<p>Are you sure you want to delete this file?</p>',
+ *   buttons: [
+ *     {
+ *       label: 'Delete',
+ *       backgroundColor: '#dc3545',
+ *       onclick: () => {
+ *         console.log('File deleted');
+ *         dialog?.close();
+ *       }
+ *     },
+ *     {
+ *       label: 'Cancel',
+ *       onclick: () => {
+ *         dialog?.close();
+ *       }
+ *     }
+ *   ],
+ *   modal: true,
+ *   escToClose: true,
+ *   clickToClose: true
+ * });
+ * ```
+ */
+export declare const dialogAdd: (config: DialogConfig) => DialogElement | undefined;
+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;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Dialogs: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Dialogs = InstanceType<typeof Dialogs>;
+export default Dialogs;
+//# sourceMappingURL=Dialogs.svelte.d.ts.map

package/dist/Dialogs.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialogs.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Dialogs.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAGxE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,CAAC;AAE5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,eAAO,MAAM,SAAS,GAAK,QAAS,YAAY,KAAK,aAAa,GAAG,SAgBpE,CAAC;AAwBF,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,OAAO;;kBAA+E,CAAC;AAC3E,KAAK,OAAO,GAAG,YAAY,CAAC,OAAO,OAAO,CAAC,CAAC;AAC9C,eAAe,OAAO,CAAC"}

package/dist/MarkdownPreview.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  interface Props {
+    value?: string;
+    libUrl?: string;
+    onlibraryloaded?: () => void;
+  }
+
+  let {
+    value = "",
+    libUrl = "https://cdn.jsdelivr.net/npm/marked@4.3.0/marked.min.js",
+    onlibraryloaded,
+  }: Props = $props();
+
+  let elementRef: HTMLElement;
+  let webComponent = $state<any>(null);
+
+  $effect(() => {
+    if (webComponent) {
+      if (webComponent.libUrl !== libUrl) {
+        webComponent.libUrl = libUrl;
+      }
+      if (webComponent.value !== value) {
+        webComponent.value = value;
+      }
+    }
+  });
+
+  onMount(async (): Promise<any> => {
+    // Dynamically import the web component
+    await import("@liwe3/webcomponents/markdown-preview");
+
+    // Get reference to the web component
+    webComponent = elementRef;
+
+    const handleLibraryLoaded = () => {
+      onlibraryloaded?.();
+    };
+
+    webComponent.addEventListener("library-loaded", handleLibraryLoaded);
+
+    // Cleanup
+    return () => {
+      webComponent?.removeEventListener("library-loaded", handleLibraryLoaded);
+    };
+  });
+</script>
+
+<liwe3-markdown-preview bind:this={elementRef}></liwe3-markdown-preview>

package/dist/MarkdownPreview.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    value?: string;
+    libUrl?: string;
+    onlibraryloaded?: () => void;
+}
+declare const MarkdownPreview: import("svelte").Component<Props, {}, "">;
+type MarkdownPreview = ReturnType<typeof MarkdownPreview>;
+export default MarkdownPreview;
+//# sourceMappingURL=MarkdownPreview.svelte.d.ts.map

package/dist/MarkdownPreview.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownPreview.svelte.d.ts","sourceRoot":"","sources":["../src/lib/MarkdownPreview.svelte.ts"],"names":[],"mappings":"AAME,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;CAC9B;AAiDH,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}