@gradio/button 0.6.1 → 0.6.2

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @gradio/button
 
+## 0.6.2
+
+### Fixes
+
+- [#12681](https://github.com/gradio-app/gradio/pull/12681) [`ba46c2d`](https://github.com/gradio-app/gradio/commit/ba46c2df1405c11e495304af8f91acfdf69d0b18) - Migrate Button to Svelte 5.  Thanks @freddyaboulton!
+
+### Dependency updates
+
+- @gradio/utils@0.11.1
+- @gradio/client@2.0.2
+
 ## 0.6.1
 
 ### Dependency updates

package/Index.svelte

@@ -7,9 +7,21 @@
 	import type { SharedProps } from "@gradio/utils";
 
 	import Button from "./shared/Button.svelte";
+	import type { FileData } from "client/js/src";
+	interface ButtonProps {
+		value: string | null;
+		variant: "primary" | "secondary" | "stop";
+		size: "sm" | "md" | "lg";
+		scale: number;
+		link: string | null;
+		icon: FileData | null;
+		link_target: "_self" | "_blank";
+		elem_id: string | null;
+		elem_classes?: string[];
+	}
 
-	let _props: { shared_props: SharedProps; props: {} } = $props();
-	const gradio = new Gradio<never, {}>(_props);
+	let _props: { shared_props: SharedProps; props: ButtonProps } = $props();
+	const gradio = new Gradio<never, ButtonProps>(_props);
 
 	function handle_click() {
 		gradio.dispatch("click");
@@ -29,7 +41,7 @@
 	visible={gradio.shared.visible}
 	disabled={!gradio.shared.interactive}
 	link_target={gradio.props.link_target}
-	on:click={handle_click}
+	onclick={handle_click}
 >
 	{gradio.props.value ?? ""}
 </Button>

package/dist/Index.svelte

@@ -7,9 +7,21 @@
 	import type { SharedProps } from "@gradio/utils";
 
 	import Button from "./shared/Button.svelte";
+	import type { FileData } from "client/js/src";
+	interface ButtonProps {
+		value: string | null;
+		variant: "primary" | "secondary" | "stop";
+		size: "sm" | "md" | "lg";
+		scale: number;
+		link: string | null;
+		icon: FileData | null;
+		link_target: "_self" | "_blank";
+		elem_id: string | null;
+		elem_classes?: string[];
+	}
 
-	let _props: { shared_props: SharedProps; props: {} } = $props();
-	const gradio = new Gradio<never, {}>(_props);
+	let _props: { shared_props: SharedProps; props: ButtonProps } = $props();
+	const gradio = new Gradio<never, ButtonProps>(_props);
 
 	function handle_click() {
 		gradio.dispatch("click");
@@ -29,7 +41,7 @@
 	visible={gradio.shared.visible}
 	disabled={!gradio.shared.interactive}
 	link_target={gradio.props.link_target}
-	on:click={handle_click}
+	onclick={handle_click}
 >
 	{gradio.props.value ?? ""}
 </Button>

package/dist/Index.svelte.d.ts

@@ -1,8 +1,20 @@
 export { default as BaseButton } from "./shared/Button.svelte";
 import type { SharedProps } from "@gradio/utils";
+import type { FileData } from "client/js/src";
+interface ButtonProps {
+    value: string | null;
+    variant: "primary" | "secondary" | "stop";
+    size: "sm" | "md" | "lg";
+    scale: number;
+    link: string | null;
+    icon: FileData | null;
+    link_target: "_self" | "_blank";
+    elem_id: string | null;
+    elem_classes?: string[];
+}
 type $$ComponentProps = {
     shared_props: SharedProps;
-    props: {};
+    props: ButtonProps;
 };
 declare const Index: import("svelte").Component<$$ComponentProps, {}, "">;
 type Index = ReturnType<typeof Index>;

package/dist/shared/Button.svelte

@@ -1,20 +1,39 @@
 <script lang="ts">
 	import { type FileData } from "@gradio/client";
 	import { Image } from "@gradio/image/shared";
-
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible: boolean | "hidden" = true;
-	export let variant: "primary" | "secondary" | "stop" | "huggingface" =
-		"secondary";
-	export let size: "sm" | "md" | "lg" = "lg";
-	export let value: string | null = null;
-	export let link: string | null = null;
-	export let link_target: "_self" | "_blank" | "_parent" | "_top" = "_self";
-	export let icon: FileData | null = null;
-	export let disabled = false;
-	export let scale: number | null = null;
-	export let min_width: number | undefined = undefined;
+	import { type Snippet } from "svelte";
+
+	let {
+		elem_id,
+		elem_classes = [],
+		visible,
+		variant,
+		size,
+		value,
+		link,
+		link_target,
+		icon,
+		disabled,
+		scale,
+		min_width,
+		onclick = () => {},
+		children
+	}: {
+		elem_id: string | null;
+		elem_classes: string[] | null;
+		visible: boolean | "hidden";
+		variant: "primary" | "secondary" | "stop" | "huggingface";
+		size: "sm" | "md" | "lg";
+		value: string | null;
+		link: string | null;
+		link_target: "_self" | "_blank" | "_parent" | "_top";
+		icon: FileData | null;
+		disabled: boolean;
+		scale: number | null;
+		min_width: number | undefined;
+		onclick: () => void;
+		children?: Snippet;
+	} = $props();
 </script>
 
 {#if link && link.length > 0}
@@ -40,11 +59,13 @@
 				restProps={{ alt: `${value} icon`, class: "button-icon" }}
 			/>
 		{/if}
-		<slot />
+		{#if children}
+			{@render children()}
+		{/if}
 	</a>
 {:else}
 	<button
-		on:click
+		{onclick}
 		class:hidden={visible === false || visible === "hidden"}
 		class="{size} {variant} {elem_classes.join(' ')}"
 		style:flex-grow={scale}
@@ -62,7 +83,9 @@
 				src={icon.url}
 			/>
 		{/if}
-		<slot />
+		{#if children}
+			{@render children()}
+		{/if}
 	</button>
 {/if}
 

package/dist/shared/Button.svelte.d.ts

@@ -1,43 +1,21 @@
 import { type FileData } from "@gradio/client";
-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: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const Button: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    elem_id?: string;
-    elem_classes?: string[];
-    visible?: boolean | "hidden";
-    variant?: "primary" | "secondary" | "stop" | "huggingface";
-    size?: "sm" | "md" | "lg";
-    value?: string | null;
-    link?: string | null;
-    link_target?: "_self" | "_blank" | "_parent" | "_top";
-    icon?: FileData | null;
-    disabled?: boolean;
-    scale?: number | null;
-    min_width?: number | undefined;
-}, {
-    default: {};
-}>, {
-    click: PointerEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type Button = InstanceType<typeof Button>;
+import { type Snippet } from "svelte";
+type $$ComponentProps = {
+    elem_id: string | null;
+    elem_classes: string[] | null;
+    visible: boolean | "hidden";
+    variant: "primary" | "secondary" | "stop" | "huggingface";
+    size: "sm" | "md" | "lg";
+    value: string | null;
+    link: string | null;
+    link_target: "_self" | "_blank" | "_parent" | "_top";
+    icon: FileData | null;
+    disabled: boolean;
+    scale: number | null;
+    min_width: number | undefined;
+    onclick: () => void;
+    children?: Snippet;
+};
+declare const Button: import("svelte").Component<$$ComponentProps, {}, "">;
+type Button = ReturnType<typeof Button>;
 export default Button;

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@gradio/button",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
   "license": "ISC",
   "private": false,
   "dependencies": {
-    "@gradio/client": "^2.0.1",
-    "@gradio/utils": "^0.11.0",
     "@gradio/upload": "^0.17.3",
-    "@gradio/image": "^0.25.0"
+    "@gradio/image": "^0.25.0",
+    "@gradio/client": "^2.0.2",
+    "@gradio/utils": "^0.11.1"
   },
   "devDependencies": {
     "@gradio/preview": "^0.15.1"

package/shared/Button.svelte

@@ -1,20 +1,39 @@
 <script lang="ts">
 	import { type FileData } from "@gradio/client";
 	import { Image } from "@gradio/image/shared";
-
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible: boolean | "hidden" = true;
-	export let variant: "primary" | "secondary" | "stop" | "huggingface" =
-		"secondary";
-	export let size: "sm" | "md" | "lg" = "lg";
-	export let value: string | null = null;
-	export let link: string | null = null;
-	export let link_target: "_self" | "_blank" | "_parent" | "_top" = "_self";
-	export let icon: FileData | null = null;
-	export let disabled = false;
-	export let scale: number | null = null;
-	export let min_width: number | undefined = undefined;
+	import { type Snippet } from "svelte";
+
+	let {
+		elem_id,
+		elem_classes = [],
+		visible,
+		variant,
+		size,
+		value,
+		link,
+		link_target,
+		icon,
+		disabled,
+		scale,
+		min_width,
+		onclick = () => {},
+		children
+	}: {
+		elem_id: string | null;
+		elem_classes: string[] | null;
+		visible: boolean | "hidden";
+		variant: "primary" | "secondary" | "stop" | "huggingface";
+		size: "sm" | "md" | "lg";
+		value: string | null;
+		link: string | null;
+		link_target: "_self" | "_blank" | "_parent" | "_top";
+		icon: FileData | null;
+		disabled: boolean;
+		scale: number | null;
+		min_width: number | undefined;
+		onclick: () => void;
+		children?: Snippet;
+	} = $props();
 </script>
 
 {#if link && link.length > 0}
@@ -40,11 +59,13 @@
 				restProps={{ alt: `${value} icon`, class: "button-icon" }}
 			/>
 		{/if}
-		<slot />
+		{#if children}
+			{@render children()}
+		{/if}
 	</a>
 {:else}
 	<button
-		on:click
+		{onclick}
 		class:hidden={visible === false || visible === "hidden"}
 		class="{size} {variant} {elem_classes.join(' ')}"
 		style:flex-grow={scale}
@@ -62,7 +83,9 @@
 				src={icon.url}
 			/>
 		{/if}
-		<slot />
+		{#if children}
+			{@render children()}
+		{/if}
 	</button>
 {/if}