npm installs wrong version

[GoodBoyNinja]

Hey. I have been trying to create a Rich Content toast and had troubles passing down props, like so:

toast(RichComponent, { props: { someProp: "⭐" } });

I got type errors saying that props does not exist in Partial<Pick<Toast, "id" | "icon" | "duration"... and in my project, RichComponent did show up inside the toast but someProp resolved as undefined.

I dived into the package dist folder and couldn't quite figure out what's wrong, so I cloned the entire repo and have built the package using npm run package. I then copied the newly created dist folder into my project, essentially overriding the one installed from npm, and...

... everything seems to work, except I am still getting type errors, but I can deal with those.

There are certainly some differences between the version I have built myself and the one coming from npm, unless I have done something incredibly stupid (which is likely)

[GoodBoyNinja]

After using patch package this is the patch file I got, if that helps

diff --git a/node_modules/svelte-french-toast/dist/components/ToastBar.svelte.d.ts b/node_modules/svelte-french-toast/dist/components/ToastBar.svelte.d.ts
index c4734e0..54b0f7b 100644
--- a/node_modules/svelte-french-toast/dist/components/ToastBar.svelte.d.ts
+++ b/node_modules/svelte-french-toast/dist/components/ToastBar.svelte.d.ts
@@ -17,7 +17,7 @@ declare const __propDef: {
         default: {
             ToastIcon: typeof ToastIcon;
             ToastMessage: typeof ToastMessage;
-            toast: Toast;
+            toast: Toast<Record<string, any>>;
         };
     };
 };
diff --git a/node_modules/svelte-french-toast/dist/components/ToastMessage.svelte b/node_modules/svelte-french-toast/dist/components/ToastMessage.svelte
index 79217d7..cb54284 100644
--- a/node_modules/svelte-french-toast/dist/components/ToastMessage.svelte
+++ b/node_modules/svelte-french-toast/dist/components/ToastMessage.svelte
@@ -5,7 +5,7 @@
    {#if typeof toast.message === 'string'}
        {toast.message}
    {:else}
-       <svelte:component this={toast.message} {toast} />
+       <svelte:component this={toast.message} {toast} {...toast.props} />
    {/if}
 </div>

diff --git a/node_modules/svelte-french-toast/dist/core/toast.d.ts b/node_modules/svelte-french-toast/dist/core/toast.d.ts
index 6f96c6b..7c6c3dd 100644
--- a/node_modules/svelte-french-toast/dist/core/toast.d.ts
+++ b/node_modules/svelte-french-toast/dist/core/toast.d.ts
@@ -1,17 +1,18 @@
-import { type Renderable, type DefaultToastOptions, type ToastOptions, type ValueOrFunction } from './types';
-type ToastHandler = (message: Renderable, options?: ToastOptions) => string;
+import { type Toast, type Renderable, type DefaultToastOptions, type ToastOptions, type ValueOrFunction } from './types';
+type Message<T extends Record<string, any> = Record<string, any>> = Renderable<T>;
+type ToastHandler = <T extends Record<string, any> = Record<string, any>>(message: Message<T>, options?: ToastOptions<T>) => string;
 declare const toast: {
-    (message: Renderable, opts?: ToastOptions): string;
+    <T extends Record<string, any> = Record<string, any>>(message: Message<T>, opts?: Partial<Pick<Toast<T>, "id" | "icon" | "duration" | "ariaProps" | "className" | "style" | "position" | "iconTheme" | "props">> | undefined): string;
     error: ToastHandler;
     success: ToastHandler;
     loading: ToastHandler;
     custom: ToastHandler;
     dismiss(toastId?: string): void;
     remove(toastId?: string): void;
-    promise<T>(promise: Promise<T>, msgs: {
+    promise<T_1>(promise: Promise<T_1>, msgs: {
         loading: Renderable;
-        success: ValueOrFunction<Renderable, T>;
+        success: ValueOrFunction<Renderable, T_1>;
         error: ValueOrFunction<Renderable, any>;
-    }, opts?: DefaultToastOptions): Promise<T>;
+    }, opts?: DefaultToastOptions): Promise<T_1>;
 };
 export default toast;
diff --git a/node_modules/svelte-french-toast/dist/core/toast.js b/node_modules/svelte-french-toast/dist/core/toast.js
index 53f4139..9effa0d 100644
--- a/node_modules/svelte-french-toast/dist/core/toast.js
+++ b/node_modules/svelte-french-toast/dist/core/toast.js
@@ -11,7 +11,11 @@ const createToast = (message, type = 'blank', opts) => ({
     },
     message,
     pauseDuration: 0,
-    ...opts,
+    icon: opts?.icon,
+    duration: opts?.duration,
+    iconTheme: opts?.iconTheme,
+    position: opts?.position,
+    props: opts?.props,
     id: opts?.id || genId()
 });
 const createHandler = (type) => (message, options) => {
diff --git a/node_modules/svelte-french-toast/dist/core/types.d.ts b/node_modules/svelte-french-toast/dist/core/types.d.ts
index 14d2859..3146478 100644
--- a/node_modules/svelte-french-toast/dist/core/types.d.ts
+++ b/node_modules/svelte-french-toast/dist/core/types.d.ts
@@ -8,7 +8,7 @@ export type ToastType = 'success' | 'error' | 'loading' | 'blank' | 'custom';
  * - Use `top-start` instead of `top-left`.
  * - Use `top-end` instead of `top-right`. */
 export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
-export type Renderable = typeof SvelteComponent<any> | string | null;
+export type Renderable<T extends Record<string, any> = Record<string, any>> = typeof SvelteComponent<T> | string | null;
 export interface IconTheme {
     primary: string;
     secondary: string;
@@ -16,14 +16,15 @@ export interface IconTheme {
 export type ValueFunction<TValue, TArg> = (arg: TArg) => TValue;
 export type ValueOrFunction<TValue, TArg> = TValue | ValueFunction<TValue, TArg>;
 export declare const resolveValue: <TValue, TArg>(valOrFunction: ValueOrFunction<TValue, TArg>, arg: TArg) => TValue;
-export interface Toast {
+export interface Toast<T extends Record<string, any> = Record<string, any>> {
     type: ToastType;
     id: string;
-    message: Renderable;
+    message: Renderable<T>;
     icon?: Renderable;
     duration?: number;
     pauseDuration: number;
     position?: ToastPosition;
+    props?: Omit<T, 'toast'>;
     ariaProps: {
         role: 'status' | 'alert';
         'aria-live': 'assertive' | 'off' | 'polite';
@@ -35,10 +36,10 @@ export interface Toast {
     visible: boolean;
     height?: number;
 }
-export type DOMToast = Toast & {
+export type DOMToast<T extends Record<string, any> = Record<string, any>> = Toast<T> & {
     offset: number;
 };
-export type ToastOptions = Partial<Pick<Toast, 'id' | 'icon' | 'duration' | 'ariaProps' | 'className' | 'style' | 'position' | 'iconTheme'>>;
+export type ToastOptions<T extends Record<string, any> = Record<string, any>> = Partial<Pick<Toast<T>, 'id' | 'icon' | 'duration' | 'ariaProps' | 'className' | 'style' | 'position' | 'iconTheme' | 'props'>>;
 export type DefaultToastOptions = ToastOptions & {
     [key in ToastType]?: ToastOptions;
 };
diff --git a/node_modules/svelte-french-toast/dist/core/use-toaster.d.ts b/node_modules/svelte-french-toast/dist/core/use-toaster.d.ts
index 0460c99..15c6f62 100644
--- a/node_modules/svelte-french-toast/dist/core/use-toaster.d.ts
+++ b/node_modules/svelte-french-toast/dist/core/use-toaster.d.ts
@@ -6,7 +6,7 @@ declare function calculateOffset(toast: Toast, $toasts: Toast[], opts?: {
     defaultPosition?: ToastPosition;
 }): number;
 export default function useToaster(toastOptions?: ToastOptions): {
-    toasts: import("svelte/store").Writable<Toast[]>;
+    toasts: import("svelte/store").Writable<Toast<Record<string, any>>[]>;
     handlers: {
         startPause(): void;
         endPause(): void;

[binury]

https://github.com/kbrgl/svelte-french-toast/issues/64#issuecomment-1953048823

[LeoDog896]

Till the new package is published, I've published 1.3.1 at @leodog896/svelte-french-toast.

[LeoDog896]

I also make a small change (https://github.com/LeoDog896/svelte-french-toast/commit/b68c8675b7562522509e95e55559ef9afd96ae9a) to fix style and className propagation.