@gradio/code 0.15.1-dev.0 → 0.16.0-dev.3

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @gradio/code
 
+## 0.16.0-dev.3
+
+### Dependency updates
+
+- @gradio/atoms@0.19.0-dev.1
+- @gradio/statustracker@0.12.0-dev.1
+- @gradio/upload@0.17.2-dev.2
+
+## 0.16.0-dev.2
+
+### Features
+
+- [#12357](https://github.com/gradio-app/gradio/pull/12357) [`c9cf634`](https://github.com/gradio-app/gradio/commit/c9cf634a9cd34b4adadde1a6a98d60faf732639a) - Fix various event issues.  Thanks @pngwn!
+
+## 0.15.1-dev.1
+
+### Dependency updates
+
+- @gradio/atoms@0.18.2-dev.0
+- @gradio/upload@0.17.2-dev.1
+- @gradio/utils@0.10.3-dev.0
+- @gradio/statustracker@0.12.0-dev.0
+- @gradio/icons@0.15.0-dev.0
+
 ## 0.15.1-dev.0
 
 ### Dependency updates

package/Index.svelte

@@ -7,97 +7,83 @@
 </script>
 
 <script lang="ts">
-	import type { Gradio } from "@gradio/utils";
-	import { afterUpdate } from "svelte";
-
-	import type { LoadingStatus } from "@gradio/statustracker";
+	import { Gradio } from "@gradio/utils";
+	import type { CodeProps, CodeEvents } from "./types";
+	import { StatusTracker } from "@gradio/statustracker";
 
 	import Code from "./shared/Code.svelte";
 	import Widget from "./shared/Widgets.svelte";
-	import { StatusTracker } from "@gradio/statustracker";
 	import { Block, BlockLabel, Empty } from "@gradio/atoms";
 	import { Code as CodeIcon } from "@gradio/icons";
 
-	export let gradio: Gradio<{
-		change: typeof value;
-		input: never;
-		blur: never;
-		focus: never;
-		clear_status: LoadingStatus;
-	}>;
-	export let value = "";
-	export let value_is_output = false;
-	export let language = "";
-	export let lines = 5;
-	export let max_lines: number | undefined = undefined;
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible: boolean | "hidden" = true;
-	export let label = gradio.i18n("code.code");
-	export let show_label = true;
-	export let loading_status: LoadingStatus;
-	export let scale: number | null = null;
-	export let min_width: number | undefined = undefined;
-	export let wrap_lines = false;
-	export let show_line_numbers = true;
-	export let autocomplete = false;
+	const props = $props();
+	const gradio = new Gradio<CodeEvents, CodeProps>(props);
 
-	export let interactive: boolean;
+	let dark_mode = gradio.shared.theme === "dark";
 
-	let dark_mode = gradio.theme === "dark";
+	let label = $derived(gradio.shared.label || gradio.i18n("code.code"));
+	let old_value = $state(gradio.props.value);
+	let first_change = true;
 
-	function handle_change(): void {
-		gradio.dispatch("change", value);
-		if (!value_is_output) {
-			gradio.dispatch("input");
+	$effect(() => {
+		if (first_change) {
+			first_change = false;
+			return;
+		}
+		if (old_value != gradio.props.value) {
+			old_value = gradio.props.value;
+			gradio.dispatch("change");
 		}
-	}
-	afterUpdate(() => {
-		value_is_output = false;
 	});
-	$: value, handle_change();
 </script>
 
 <Block
-	height={max_lines && "fit-content"}
+	height={gradio.props.max_lines && "fit-content"}
 	variant={"solid"}
 	padding={false}
-	{elem_id}
-	{elem_classes}
-	{visible}
-	{scale}
-	{min_width}
+	elem_id={gradio.shared.elem_id}
+	elem_classes={gradio.shared.elem_classes}
+	visible={gradio.shared.visible}
+	scale={gradio.shared.scale}
+	min_width={gradio.shared.min_width}
 >
 	<StatusTracker
-		autoscroll={gradio.autoscroll}
+		autoscroll={gradio.shared.autoscroll}
 		i18n={gradio.i18n}
-		{...loading_status}
-		on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
+		{...gradio.shared.loading_status}
+		on:clear_status={() =>
+			gradio.dispatch("clear_status", gradio.shared.loading_status)}
 	/>
 
-	{#if show_label}
-		<BlockLabel Icon={CodeIcon} {show_label} {label} float={false} />
+	{#if gradio.shared.show_label}
+		<BlockLabel
+			Icon={CodeIcon}
+			show_label={gradio.shared.show_label}
+			{label}
+			float={false}
+		/>
 	{/if}
 
-	{#if !value && !interactive}
+	{#if !gradio.props.value && !gradio.shared.interactive}
 		<Empty unpadded_box={true} size="large">
 			<CodeIcon />
 		</Empty>
 	{:else}
-		<Widget {language} {value} />
+		<Widget language={gradio.props.language} value={gradio.props.value} />
 
 		<Code
-			bind:value
-			{language}
-			{lines}
-			{max_lines}
+			bind:value={gradio.props.value}
+			language={gradio.props.language}
+			lines={gradio.props.lines}
+			max_lines={gradio.props.max_lines}
 			{dark_mode}
-			{wrap_lines}
-			{show_line_numbers}
-			{autocomplete}
-			readonly={!interactive}
+			wrap_lines={gradio.props.wrap_lines}
+			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")}
 		/>
 	{/if}
 </Block>

package/dist/Example.svelte

@@ -1,12 +1,14 @@
-<script>export let value;
-export let type;
-export let selected = false;
-function truncate_text(text, max_length = 60) {
-  if (!text) return "";
-  const str = String(text);
-  if (str.length <= max_length) return str;
-  return str.slice(0, max_length) + "...";
-}
+<script lang="ts">
+	export let value: string | null;
+	export let type: "gallery" | "table";
+	export let selected = false;
+
+	function truncate_text(text: string | null, max_length = 60): string {
+		if (!text) return "";
+		const str = String(text);
+		if (str.length <= max_length) return str;
+		return str.slice(0, max_length) + "...";
+	}
 </script>
 
 <pre

package/dist/Example.svelte.d.ts

@@ -1,20 +1,22 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        value: string | null;
-        type: "gallery" | "table";
-        selected?: boolean;
+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;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ExampleProps = typeof __propDef.props;
-export type ExampleEvents = typeof __propDef.events;
-export type ExampleSlots = typeof __propDef.slots;
-export default class Example extends SvelteComponent<ExampleProps, ExampleEvents, ExampleSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Example: $$__sveltets_2_IsomorphicComponent<{
+    value: string | null;
+    type: "gallery" | "table";
+    selected?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Example = InstanceType<typeof Example>;
+export default Example;

package/dist/Index.svelte

@@ -1,87 +1,89 @@
-<script context="module">export { default as BaseCode } from "./shared/Code.svelte";
-export { default as BaseCopy } from "./shared/Copy.svelte";
-export { default as BaseDownload } from "./shared/Download.svelte";
-export { default as BaseWidget } from "./shared/Widgets.svelte";
-export { default as BaseExample } from "./Example.svelte";
+<script context="module" lang="ts">
+	export { default as BaseCode } from "./shared/Code.svelte";
+	export { default as BaseCopy } from "./shared/Copy.svelte";
+	export { default as BaseDownload } from "./shared/Download.svelte";
+	export { default as BaseWidget } from "./shared/Widgets.svelte";
+	export { default as BaseExample } from "./Example.svelte";
 </script>
 
-<script>import { afterUpdate } from "svelte";
-import Code from "./shared/Code.svelte";
-import Widget from "./shared/Widgets.svelte";
-import { StatusTracker } from "@gradio/statustracker";
-import { Block, BlockLabel, Empty } from "@gradio/atoms";
-import { Code as CodeIcon } from "@gradio/icons";
-export let gradio;
-export let value = "";
-export let value_is_output = false;
-export let language = "";
-export let lines = 5;
-export let max_lines = void 0;
-export let elem_id = "";
-export let elem_classes = [];
-export let visible = true;
-export let label = gradio.i18n("code.code");
-export let show_label = true;
-export let loading_status;
-export let scale = null;
-export let min_width = void 0;
-export let wrap_lines = false;
-export let show_line_numbers = true;
-export let autocomplete = false;
-export let interactive;
-let dark_mode = gradio.theme === "dark";
-function handle_change() {
-  gradio.dispatch("change", value);
-  if (!value_is_output) {
-    gradio.dispatch("input");
-  }
-}
-afterUpdate(() => {
-  value_is_output = false;
-});
-$: value, handle_change();
+<script lang="ts">
+	import { Gradio } from "@gradio/utils";
+	import type { CodeProps, CodeEvents } from "./types";
+	import { StatusTracker } from "@gradio/statustracker";
+
+	import Code from "./shared/Code.svelte";
+	import Widget from "./shared/Widgets.svelte";
+	import { Block, BlockLabel, Empty } from "@gradio/atoms";
+	import { Code as CodeIcon } from "@gradio/icons";
+
+	const props = $props();
+	const gradio = new Gradio<CodeEvents, CodeProps>(props);
+
+	let dark_mode = gradio.shared.theme === "dark";
+
+	let label = $derived(gradio.shared.label || gradio.i18n("code.code"));
+	let old_value = $state(gradio.props.value);
+	let first_change = true;
+
+	$effect(() => {
+		if (first_change) {
+			first_change = false;
+			return;
+		}
+		if (old_value != gradio.props.value) {
+			old_value = gradio.props.value;
+			gradio.dispatch("change");
+		}
+	});
 </script>
 
 <Block
-	height={max_lines && "fit-content"}
+	height={gradio.props.max_lines && "fit-content"}
 	variant={"solid"}
 	padding={false}
-	{elem_id}
-	{elem_classes}
-	{visible}
-	{scale}
-	{min_width}
+	elem_id={gradio.shared.elem_id}
+	elem_classes={gradio.shared.elem_classes}
+	visible={gradio.shared.visible}
+	scale={gradio.shared.scale}
+	min_width={gradio.shared.min_width}
 >
 	<StatusTracker
-		autoscroll={gradio.autoscroll}
+		autoscroll={gradio.shared.autoscroll}
 		i18n={gradio.i18n}
-		{...loading_status}
-		on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
+		{...gradio.shared.loading_status}
+		on:clear_status={() =>
+			gradio.dispatch("clear_status", gradio.shared.loading_status)}
 	/>
 
-	{#if show_label}
-		<BlockLabel Icon={CodeIcon} {show_label} {label} float={false} />
+	{#if gradio.shared.show_label}
+		<BlockLabel
+			Icon={CodeIcon}
+			show_label={gradio.shared.show_label}
+			{label}
+			float={false}
+		/>
 	{/if}
 
-	{#if !value && !interactive}
+	{#if !gradio.props.value && !gradio.shared.interactive}
 		<Empty unpadded_box={true} size="large">
 			<CodeIcon />
 		</Empty>
 	{:else}
-		<Widget {language} {value} />
+		<Widget language={gradio.props.language} value={gradio.props.value} />
 
 		<Code
-			bind:value
-			{language}
-			{lines}
-			{max_lines}
+			bind:value={gradio.props.value}
+			language={gradio.props.language}
+			lines={gradio.props.lines}
+			max_lines={gradio.props.max_lines}
 			{dark_mode}
-			{wrap_lines}
-			{show_line_numbers}
-			{autocomplete}
-			readonly={!interactive}
+			wrap_lines={gradio.props.wrap_lines}
+			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")}
 		/>
 	{/if}
 </Block>

package/dist/Index.svelte.d.ts

@@ -1,47 +1,8 @@
-import { SvelteComponent } from "svelte";
 export { default as BaseCode } from "./shared/Code.svelte";
 export { default as BaseCopy } from "./shared/Copy.svelte";
 export { default as BaseDownload } from "./shared/Download.svelte";
 export { default as BaseWidget } from "./shared/Widgets.svelte";
 export { default as BaseExample } from "./Example.svelte";
-import type { Gradio } from "@gradio/utils";
-import type { LoadingStatus } from "@gradio/statustracker";
-declare const __propDef: {
-    props: {
-        gradio: Gradio<{
-            change: string;
-            input: never;
-            blur: never;
-            focus: never;
-            clear_status: LoadingStatus;
-        }>;
-        value?: string;
-        value_is_output?: boolean;
-        language?: string;
-        lines?: number;
-        max_lines?: number | undefined;
-        elem_id?: string;
-        elem_classes?: string[];
-        visible?: boolean | "hidden";
-        label?: any;
-        show_label?: boolean;
-        loading_status: LoadingStatus;
-        scale?: number | null;
-        min_width?: number | undefined;
-        wrap_lines?: boolean;
-        show_line_numbers?: boolean;
-        autocomplete?: boolean;
-        interactive: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type IndexProps = typeof __propDef.props;
-export type IndexEvents = typeof __propDef.events;
-export type IndexSlots = typeof __propDef.slots;
-export default class Index extends SvelteComponent<IndexProps, IndexEvents, IndexSlots> {
-}
+declare const Index: import("svelte").Component<$$ComponentProps, {}, "">;
+type Index = ReturnType<typeof Index>;
+export default Index;