@gradio/code 0.17.1 → 0.17.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @gradio/code
 
+## 0.17.2
+
+### Fixes
+
+- [#12809](https://github.com/gradio-app/gradio/pull/12809) [`8409b7a`](https://github.com/gradio-app/gradio/commit/8409b7ab51fb36d8973d2a3f1bc3557489f7e1c5) - Migrate js/code.  Thanks @aliabid94!
+
+### Dependency updates
+
+- @gradio/atoms@0.21.0
+- @gradio/statustracker@0.12.3
+- @gradio/upload@0.17.5
+
 ## 0.17.1
 
 ### Fixes

package/Example.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
-	export let value: string | null;
-	export let type: "gallery" | "table";
-	export let selected = false;
+	interface Props {
+		value: string | null;
+		type: "gallery" | "table";
+		selected?: boolean;
+	}
+
+	let { value, type, selected = false }: Props = $props();
 
 	function truncate_text(text: string | null, max_length = 60): string {
 		if (!text) return "";

package/Index.svelte

@@ -88,9 +88,9 @@
 			show_line_numbers={gradio.props.show_line_numbers}
 			autocomplete={gradio.props.autocomplete}
 			readonly={!gradio.shared.interactive}
-			on:blur={() => gradio.dispatch("blur")}
-			on:focus={() => gradio.dispatch("focus")}
-			on:input={() => gradio.dispatch("input")}
+			onblur={() => gradio.dispatch("blur")}
+			onfocus={() => gradio.dispatch("focus")}
+			oninput={() => gradio.dispatch("input")}
 		/>
 	{/if}
 </Block>

package/dist/Example.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
-	export let value: string | null;
-	export let type: "gallery" | "table";
-	export let selected = false;
+	interface Props {
+		value: string | null;
+		type: "gallery" | "table";
+		selected?: boolean;
+	}
+
+	let { value, type, selected = false }: Props = $props();
 
 	function truncate_text(text: string | null, max_length = 60): string {
 		if (!text) return "";

package/dist/Example.svelte.d.ts

@@ -1,22 +1,8 @@
-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;
-}
-declare const Example: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     value: string | null;
     type: "gallery" | "table";
     selected?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Example = InstanceType<typeof Example>;
+}
+declare const Example: import("svelte").Component<Props, {}, "">;
+type Example = ReturnType<typeof Example>;
 export default Example;

package/dist/Index.svelte

@@ -88,9 +88,9 @@
 			show_line_numbers={gradio.props.show_line_numbers}
 			autocomplete={gradio.props.autocomplete}
 			readonly={!gradio.shared.interactive}
-			on:blur={() => gradio.dispatch("blur")}
-			on:focus={() => gradio.dispatch("focus")}
-			on:input={() => gradio.dispatch("input")}
+			onblur={() => gradio.dispatch("blur")}
+			onfocus={() => gradio.dispatch("focus")}
+			oninput={() => gradio.dispatch("input")}
 		/>
 	{/if}
 </Block>

package/dist/shared/Code.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createEventDispatcher, onMount } from "svelte";
+	import { onMount } from "svelte";
 	import {
 		EditorView,
 		ViewUpdate,
@@ -16,41 +16,72 @@
 	import { basicSetup } from "./extensions";
 	import { getLanguageExtension } from "./language";
 
-	export let class_names = "";
-	export let value = "";
-	export let dark_mode: boolean;
-	export let basic = true;
-	export let language: string;
-	export let lines = 5;
-	export let max_lines: number | null = null;
-	export let extensions: Extension[] = [];
-	export let use_tab = true;
-	export let readonly = false;
-	export let placeholder: string | HTMLElement | null | undefined = undefined;
-	export let wrap_lines = false;
-	export let show_line_numbers = true;
-	export let autocomplete = false;
-
-	const dispatch = createEventDispatcher<{
-		change: string;
-		blur: undefined;
-		focus: undefined;
-		input: undefined;
-	}>();
-	let lang_extension: Extension | undefined;
+	interface Props {
+		class_names?: string;
+		value?: string;
+		dark_mode: boolean;
+		basic?: boolean;
+		language: string;
+		lines?: number;
+		max_lines?: number | null;
+		extensions?: Extension[];
+		use_tab?: boolean;
+		readonly?: boolean;
+		placeholder?: string | HTMLElement | null | undefined;
+		wrap_lines?: boolean;
+		show_line_numbers?: boolean;
+		autocomplete?: boolean;
+		onchange?: (value: string) => void;
+		onblur?: () => void;
+		onfocus?: () => void;
+		oninput?: () => void;
+	}
+
+	let {
+		class_names = "",
+		value = $bindable(),
+		dark_mode,
+		basic = true,
+		language,
+		lines = 5,
+		max_lines = null,
+		extensions = [],
+		use_tab = true,
+		readonly = false,
+		placeholder = undefined,
+		wrap_lines = false,
+		show_line_numbers = true,
+		autocomplete = false,
+		onchange,
+		onblur,
+		onfocus,
+		oninput
+	}: Props = $props();
+
+	let lang_extension: Extension | undefined = $state();
 	let element: HTMLDivElement;
 	let view: EditorView;
 
-	$: get_lang(language);
-
 	async function get_lang(val: string): Promise<void> {
 		const ext = await getLanguageExtension(val);
 		lang_extension = ext;
 	}
 
-	$: (reconfigure(), lang_extension, readonly);
-	$: set_doc(value);
-	$: update_lines();
+	$effect(() => {
+		get_lang(language);
+	});
+
+	$effect(() => {
+		lang_extension;
+		readonly;
+		reconfigure();
+	});
+
+	$effect(() => {
+		set_doc(value);
+	});
+
+	update_lines();
 
 	function set_doc(new_doc: string): void {
 		if (view && new_doc !== view.state.doc.toString()) {
@@ -81,11 +112,11 @@
 	}
 
 	function handle_focus(): void {
-		dispatch("focus");
+		onfocus?.();
 	}
 
 	function handle_blur(): void {
-		dispatch("blur");
+		onblur?.();
 	}
 
 	function getGutterLineHeight(_view: EditorView): string | null {
@@ -136,10 +167,10 @@
 
 		const user_change = is_user_input(vu);
 		if (user_change) {
-			dispatch("change", text);
-			dispatch("input");
+			onchange?.(text);
+			oninput?.();
 		} else {
-			dispatch("change", text);
+			onchange?.(text);
 		}
 
 		view.requestMeasure({ read: resize });

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

@@ -1,18 +1,5 @@
 import { type Extension } from "@codemirror/state";
-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;
-}
-declare const Code: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     class_names?: string;
     value?: string;
     dark_mode: boolean;
@@ -27,13 +14,11 @@ declare const Code: $$__sveltets_2_IsomorphicComponent<{
     wrap_lines?: boolean;
     show_line_numbers?: boolean;
     autocomplete?: boolean;
-}, {
-    change: CustomEvent<string>;
-    blur: CustomEvent<undefined>;
-    focus: CustomEvent<undefined>;
-    input: CustomEvent<undefined>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Code = InstanceType<typeof Code>;
+    onchange?: (value: string) => void;
+    onblur?: () => void;
+    onfocus?: () => void;
+    oninput?: () => void;
+}
+declare const Code: import("svelte").Component<Props, {}, "value">;
+type Code = ReturnType<typeof Code>;
 export default Code;

package/dist/shared/Copy.svelte

@@ -3,8 +3,13 @@
 	import { Copy, Check } from "@gradio/icons";
 	import { IconButton } from "@gradio/atoms";
 
-	let copied = false;
-	export let value: string;
+	interface Props {
+		value: string;
+	}
+
+	let { value }: Props = $props();
+
+	let copied = $state(false);
 	let timer: NodeJS.Timeout;
 
 	function copy_feedback(): void {

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

@@ -1,21 +1,7 @@
 import { Copy } from "@gradio/icons";
-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;
-}
-declare const Copy: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     value: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Copy = InstanceType<typeof Copy>;
+}
+declare const Copy: import("svelte").Component<Props, {}, "">;
+type Copy = ReturnType<typeof Copy>;
 export default Copy;

package/dist/shared/Download.svelte

@@ -4,10 +4,14 @@
 	import { DownloadLink } from "@gradio/atoms";
 	import { IconButton } from "@gradio/atoms";
 
-	export let value: string;
-	export let language: string;
+	interface Props {
+		value: string;
+		language: string;
+	}
+
+	let { value, language }: Props = $props();
 
-	$: ext = get_ext_for_type(language);
+	let ext = $derived(get_ext_for_type(language));
 
 	function get_ext_for_type(type: string): string {
 		const exts: Record<string, string> = {
@@ -36,7 +40,7 @@
 		return exts[type] || "txt";
 	}
 
-	let copied = false;
+	let copied = $state(false);
 	let timer: NodeJS.Timeout;
 
 	function copy_feedback(): void {
@@ -47,7 +51,7 @@
 		}, 2000);
 	}
 
-	$: download_value = URL.createObjectURL(new Blob([value]));
+	let download_value = $derived(URL.createObjectURL(new Blob([value])));
 
 	onDestroy(() => {
 		if (timer) clearTimeout(timer);
@@ -57,7 +61,7 @@
 <DownloadLink
 	download="file.{ext}"
 	href={download_value}
-	on:click={copy_feedback}
+	onclick={copy_feedback}
 >
 	<IconButton Icon={copied ? Check : Download} />
 </DownloadLink>

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

@@ -1,22 +1,8 @@
 import { Download } from "@gradio/icons";
-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;
-}
-declare const Download: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     value: string;
     language: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Download = InstanceType<typeof Download>;
+}
+declare const Download: import("svelte").Component<Props, {}, "">;
+type Download = ReturnType<typeof Download>;
 export default Download;

package/dist/shared/Widgets.svelte

@@ -4,10 +4,19 @@
 	import { IconButtonWrapper } from "@gradio/atoms";
 	import type { CustomButton as CustomButtonType } from "@gradio/utils";
 
-	export let value: string;
-	export let language: string;
-	export let buttons: (string | CustomButtonType)[] | null = null;
-	export let on_custom_button_click: ((id: number) => void) | null = null;
+	interface Props {
+		value: string;
+		language: string;
+		buttons?: (string | CustomButtonType)[] | null;
+		on_custom_button_click?: ((id: number) => void) | null;
+	}
+
+	let {
+		value,
+		language,
+		buttons = null,
+		on_custom_button_click = null
+	}: Props = $props();
 </script>
 
 <IconButtonWrapper {buttons} {on_custom_button_click}>

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

@@ -1,24 +1,10 @@
 import type { CustomButton as CustomButtonType } from "@gradio/utils";
-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;
-}
-declare const Widgets: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     value: string;
     language: string;
     buttons?: (string | CustomButtonType)[] | null;
     on_custom_button_click?: ((id: number) => void) | null;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Widgets = InstanceType<typeof Widgets>;
+}
+declare const Widgets: import("svelte").Component<Props, {}, "">;
+type Widgets = ReturnType<typeof Widgets>;
 export default Widgets;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/code",
-  "version": "0.17.1",
+  "version": "0.17.2",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -27,11 +27,11 @@
     "cm6-theme-basic-dark": "^0.2.0",
     "cm6-theme-basic-light": "^0.2.0",
     "codemirror": "^6.0.2",
-    "@gradio/atoms": "^0.20.1",
-    "@gradio/statustracker": "^0.12.2",
-    "@gradio/icons": "^0.15.1",
-    "@gradio/upload": "^0.17.4",
-    "@gradio/utils": "^0.11.2"
+    "@gradio/atoms": "^0.21.0",
+    "@gradio/statustracker": "^0.12.3",
+    "@gradio/upload": "^0.17.5",
+    "@gradio/utils": "^0.11.2",
+    "@gradio/icons": "^0.15.1"
   },
   "main_changeset": true,
   "main": "./Index.svelte",

package/shared/Code.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createEventDispatcher, onMount } from "svelte";
+	import { onMount } from "svelte";
 	import {
 		EditorView,
 		ViewUpdate,
@@ -16,41 +16,72 @@
 	import { basicSetup } from "./extensions";
 	import { getLanguageExtension } from "./language";
 
-	export let class_names = "";
-	export let value = "";
-	export let dark_mode: boolean;
-	export let basic = true;
-	export let language: string;
-	export let lines = 5;
-	export let max_lines: number | null = null;
-	export let extensions: Extension[] = [];
-	export let use_tab = true;
-	export let readonly = false;
-	export let placeholder: string | HTMLElement | null | undefined = undefined;
-	export let wrap_lines = false;
-	export let show_line_numbers = true;
-	export let autocomplete = false;
-
-	const dispatch = createEventDispatcher<{
-		change: string;
-		blur: undefined;
-		focus: undefined;
-		input: undefined;
-	}>();
-	let lang_extension: Extension | undefined;
+	interface Props {
+		class_names?: string;
+		value?: string;
+		dark_mode: boolean;
+		basic?: boolean;
+		language: string;
+		lines?: number;
+		max_lines?: number | null;
+		extensions?: Extension[];
+		use_tab?: boolean;
+		readonly?: boolean;
+		placeholder?: string | HTMLElement | null | undefined;
+		wrap_lines?: boolean;
+		show_line_numbers?: boolean;
+		autocomplete?: boolean;
+		onchange?: (value: string) => void;
+		onblur?: () => void;
+		onfocus?: () => void;
+		oninput?: () => void;
+	}
+
+	let {
+		class_names = "",
+		value = $bindable(),
+		dark_mode,
+		basic = true,
+		language,
+		lines = 5,
+		max_lines = null,
+		extensions = [],
+		use_tab = true,
+		readonly = false,
+		placeholder = undefined,
+		wrap_lines = false,
+		show_line_numbers = true,
+		autocomplete = false,
+		onchange,
+		onblur,
+		onfocus,
+		oninput
+	}: Props = $props();
+
+	let lang_extension: Extension | undefined = $state();
 	let element: HTMLDivElement;
 	let view: EditorView;
 
-	$: get_lang(language);
-
 	async function get_lang(val: string): Promise<void> {
 		const ext = await getLanguageExtension(val);
 		lang_extension = ext;
 	}
 
-	$: (reconfigure(), lang_extension, readonly);
-	$: set_doc(value);
-	$: update_lines();
+	$effect(() => {
+		get_lang(language);
+	});
+
+	$effect(() => {
+		lang_extension;
+		readonly;
+		reconfigure();
+	});
+
+	$effect(() => {
+		set_doc(value);
+	});
+
+	update_lines();
 
 	function set_doc(new_doc: string): void {
 		if (view && new_doc !== view.state.doc.toString()) {
@@ -81,11 +112,11 @@
 	}
 
 	function handle_focus(): void {
-		dispatch("focus");
+		onfocus?.();
 	}
 
 	function handle_blur(): void {
-		dispatch("blur");
+		onblur?.();
 	}
 
 	function getGutterLineHeight(_view: EditorView): string | null {
@@ -136,10 +167,10 @@
 
 		const user_change = is_user_input(vu);
 		if (user_change) {
-			dispatch("change", text);
-			dispatch("input");
+			onchange?.(text);
+			oninput?.();
 		} else {
-			dispatch("change", text);
+			onchange?.(text);
 		}
 
 		view.requestMeasure({ read: resize });

package/shared/Copy.svelte

@@ -3,8 +3,13 @@
 	import { Copy, Check } from "@gradio/icons";
 	import { IconButton } from "@gradio/atoms";
 
-	let copied = false;
-	export let value: string;
+	interface Props {
+		value: string;
+	}
+
+	let { value }: Props = $props();
+
+	let copied = $state(false);
 	let timer: NodeJS.Timeout;
 
 	function copy_feedback(): void {

package/shared/Download.svelte

@@ -4,10 +4,14 @@
 	import { DownloadLink } from "@gradio/atoms";
 	import { IconButton } from "@gradio/atoms";
 
-	export let value: string;
-	export let language: string;
+	interface Props {
+		value: string;
+		language: string;
+	}
+
+	let { value, language }: Props = $props();
 
-	$: ext = get_ext_for_type(language);
+	let ext = $derived(get_ext_for_type(language));
 
 	function get_ext_for_type(type: string): string {
 		const exts: Record<string, string> = {
@@ -36,7 +40,7 @@
 		return exts[type] || "txt";
 	}
 
-	let copied = false;
+	let copied = $state(false);
 	let timer: NodeJS.Timeout;
 
 	function copy_feedback(): void {
@@ -47,7 +51,7 @@
 		}, 2000);
 	}
 
-	$: download_value = URL.createObjectURL(new Blob([value]));
+	let download_value = $derived(URL.createObjectURL(new Blob([value])));
 
 	onDestroy(() => {
 		if (timer) clearTimeout(timer);
@@ -57,7 +61,7 @@
 <DownloadLink
 	download="file.{ext}"
 	href={download_value}
-	on:click={copy_feedback}
+	onclick={copy_feedback}
 >
 	<IconButton Icon={copied ? Check : Download} />
 </DownloadLink>

package/shared/Widgets.svelte

@@ -4,10 +4,19 @@
 	import { IconButtonWrapper } from "@gradio/atoms";
 	import type { CustomButton as CustomButtonType } from "@gradio/utils";
 
-	export let value: string;
-	export let language: string;
-	export let buttons: (string | CustomButtonType)[] | null = null;
-	export let on_custom_button_click: ((id: number) => void) | null = null;
+	interface Props {
+		value: string;
+		language: string;
+		buttons?: (string | CustomButtonType)[] | null;
+		on_custom_button_click?: ((id: number) => void) | null;
+	}
+
+	let {
+		value,
+		language,
+		buttons = null,
+		on_custom_button_click = null
+	}: Props = $props();
 </script>
 
 <IconButtonWrapper {buttons} {on_custom_button_click}>