@gradio/code 0.15.1-dev.0 → 0.16.0

package/dist/shared/Code.svelte

@@ -1,228 +1,284 @@
-<script>import { createEventDispatcher, onMount } from "svelte";
-import {
-  EditorView,
-  ViewUpdate,
-  keymap,
-  placeholder as placeholderExt,
-  lineNumbers
-} from "@codemirror/view";
-import { StateEffect, EditorState } from "@codemirror/state";
-import { indentWithTab } from "@codemirror/commands";
-import { autocompletion, acceptCompletion } from "@codemirror/autocomplete";
-import { basicDark } from "cm6-theme-basic-dark";
-import { basicLight } from "cm6-theme-basic-light";
-import { basicSetup } from "./extensions";
-import { getLanguageExtension } from "./language";
-export let class_names = "";
-export let value = "";
-export let dark_mode;
-export let basic = true;
-export let language;
-export let lines = 5;
-export let max_lines = null;
-export let extensions = [];
-export let use_tab = true;
-export let readonly = false;
-export let placeholder = void 0;
-export let wrap_lines = false;
-export let show_line_numbers = true;
-export let autocomplete = false;
-const dispatch = createEventDispatcher();
-let lang_extension;
-let element;
-let view;
-$: get_lang(language);
-async function get_lang(val) {
-  const ext = await getLanguageExtension(val);
-  lang_extension = ext;
-}
-$: reconfigure(), lang_extension, readonly;
-$: set_doc(value);
-$: update_lines();
-function set_doc(new_doc) {
-  if (view && new_doc !== view.state.doc.toString()) {
-    view.dispatch({
-      changes: {
-        from: 0,
-        to: view.state.doc.length,
-        insert: new_doc
-      }
-    });
-  }
-}
-function update_lines() {
-  if (view) {
-    view.requestMeasure({ read: resize });
-  }
-}
-function create_editor_view() {
-  const editorView = new EditorView({
-    parent: element,
-    state: create_editor_state(value)
-  });
-  editorView.dom.addEventListener("focus", handle_focus, true);
-  editorView.dom.addEventListener("blur", handle_blur, true);
-  return editorView;
-}
-function handle_focus() {
-  dispatch("focus");
-}
-function handle_blur() {
-  dispatch("blur");
-}
-function getGutterLineHeight(_view) {
-  let elements = _view.dom.querySelectorAll(".cm-gutterElement");
-  if (elements.length === 0) {
-    return null;
-  }
-  for (var i = 0; i < elements.length; i++) {
-    let node = elements[i];
-    let height = getComputedStyle(node)?.height ?? "0px";
-    if (height != "0px") {
-      return height;
-    }
-  }
-  return null;
-}
-function resize(_view) {
-  let scroller = _view.dom.querySelector(".cm-scroller");
-  if (!scroller) {
-    return null;
-  }
-  const lineHeight = getGutterLineHeight(_view);
-  if (!lineHeight) {
-    return null;
-  }
-  const minLines = lines == 1 ? 1 : lines + 1;
-  scroller.style.minHeight = `calc(${lineHeight} * ${minLines})`;
-  if (max_lines)
-    scroller.style.maxHeight = `calc(${lineHeight} * ${max_lines + 1})`;
-}
-function handle_change(vu) {
-  if (vu.docChanged) {
-    const doc = vu.state.doc;
-    const text = doc.toString();
-    value = text;
-    dispatch("change", text);
-  }
-  view.requestMeasure({ read: resize });
-}
-function get_extensions() {
-  const stateExtensions = [
-    ...get_base_extensions(
-      basic,
-      use_tab,
-      placeholder,
-      readonly,
-      lang_extension,
-      show_line_numbers
-    ),
-    FontTheme,
-    ...get_theme(),
-    ...extensions
-  ];
-  return stateExtensions;
-}
-const FontTheme = EditorView.theme({
-  "&": {
-    fontSize: "var(--text-sm)",
-    backgroundColor: "var(--border-color-secondary)"
-  },
-  ".cm-content": {
-    paddingTop: "5px",
-    paddingBottom: "5px",
-    color: "var(--body-text-color)",
-    fontFamily: "var(--font-mono)",
-    minHeight: "100%"
-  },
-  ".cm-gutterElement": {
-    marginRight: "var(--spacing-xs)"
-  },
-  ".cm-gutters": {
-    marginRight: "1px",
-    borderRight: "1px solid var(--border-color-primary)",
-    backgroundColor: "var(--block-background-fill);",
-    color: "var(--body-text-color-subdued)"
-  },
-  ".cm-focused": {
-    outline: "none"
-  },
-  ".cm-scroller": {
-    height: "auto"
-  },
-  ".cm-cursor": {
-    borderLeftColor: "var(--body-text-color)"
-  }
-});
-const AutocompleteTheme = EditorView.theme({
-  ".cm-tooltip-autocomplete": {
-    "& > ul": {
-      backgroundColor: "var(--background-fill-primary)",
-      color: "var(--body-text-color)"
-    },
-    "& > ul > li[aria-selected]": {
-      backgroundColor: "var(--color-accent-soft)",
-      color: "var(--body-text-color)"
-    }
-  }
-});
-function create_editor_state(_value) {
-  return EditorState.create({
-    doc: _value ?? void 0,
-    extensions: get_extensions()
-  });
-}
-function get_base_extensions(basic2, use_tab2, placeholder2, readonly2, lang, show_line_numbers2) {
-  const extensions2 = [
-    EditorView.editable.of(!readonly2),
-    EditorState.readOnly.of(readonly2),
-    EditorView.contentAttributes.of({ "aria-label": "Code input container" })
-  ];
-  if (basic2) {
-    extensions2.push(basicSetup);
-  }
-  if (use_tab2) {
-    extensions2.push(
-      keymap.of([{ key: "Tab", run: acceptCompletion }, indentWithTab])
-    );
-  }
-  if (placeholder2) {
-    extensions2.push(placeholderExt(placeholder2));
-  }
-  if (lang) {
-    extensions2.push(lang);
-  }
-  if (show_line_numbers2) {
-    extensions2.push(lineNumbers());
-  }
-  if (autocomplete) {
-    extensions2.push(autocompletion());
-    extensions2.push(AutocompleteTheme);
-  }
-  extensions2.push(EditorView.updateListener.of(handle_change));
-  if (wrap_lines) {
-    extensions2.push(EditorView.lineWrapping);
-  }
-  return extensions2;
-}
-function get_theme() {
-  const extensions2 = [];
-  if (dark_mode) {
-    extensions2.push(basicDark);
-  } else {
-    extensions2.push(basicLight);
-  }
-  return extensions2;
-}
-function reconfigure() {
-  view?.dispatch({
-    effects: StateEffect.reconfigure.of(get_extensions())
-  });
-}
-onMount(() => {
-  view = create_editor_view();
-  return () => view?.destroy();
-});
+<script lang="ts">
+	import { createEventDispatcher, onMount } from "svelte";
+	import {
+		EditorView,
+		ViewUpdate,
+		keymap,
+		placeholder as placeholderExt,
+		lineNumbers
+	} from "@codemirror/view";
+	import { StateEffect, EditorState, type Extension } from "@codemirror/state";
+	import { indentWithTab } from "@codemirror/commands";
+	import { autocompletion, acceptCompletion } from "@codemirror/autocomplete";
+
+	import { basicDark } from "cm6-theme-basic-dark";
+	import { basicLight } from "cm6-theme-basic-light";
+	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;
+	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();
+
+	function set_doc(new_doc: string): void {
+		if (view && new_doc !== view.state.doc.toString()) {
+			view.dispatch({
+				changes: {
+					from: 0,
+					to: view.state.doc.length,
+					insert: new_doc
+				}
+			});
+		}
+	}
+
+	function update_lines(): void {
+		if (view) {
+			view.requestMeasure({ read: resize });
+		}
+	}
+
+	function create_editor_view(): EditorView {
+		const editorView = new EditorView({
+			parent: element,
+			state: create_editor_state(value)
+		});
+		editorView.dom.addEventListener("focus", handle_focus, true);
+		editorView.dom.addEventListener("blur", handle_blur, true);
+		return editorView;
+	}
+
+	function handle_focus(): void {
+		dispatch("focus");
+	}
+
+	function handle_blur(): void {
+		dispatch("blur");
+	}
+
+	function getGutterLineHeight(_view: EditorView): string | null {
+		let elements = _view.dom.querySelectorAll<HTMLElement>(".cm-gutterElement");
+		if (elements.length === 0) {
+			return null;
+		}
+		for (var i = 0; i < elements.length; i++) {
+			let node = elements[i];
+			let height = getComputedStyle(node)?.height ?? "0px";
+			if (height != "0px") {
+				return height;
+			}
+		}
+		return null;
+	}
+
+	function resize(_view: EditorView): any {
+		let scroller = _view.dom.querySelector<HTMLElement>(".cm-scroller");
+		if (!scroller) {
+			return null;
+		}
+		const lineHeight = getGutterLineHeight(_view);
+		if (!lineHeight) {
+			return null;
+		}
+
+		const minLines = lines == 1 ? 1 : lines + 1;
+		scroller.style.minHeight = `calc(${lineHeight} * ${minLines})`;
+		if (max_lines)
+			scroller.style.maxHeight = `calc(${lineHeight} * ${max_lines + 1})`;
+	}
+
+	import { Transaction } from "@codemirror/state";
+
+	function is_user_input(update: ViewUpdate): boolean {
+		return update.transactions.some(
+			(tr) => tr.annotation(Transaction.userEvent) != null
+		);
+	}
+
+	function handle_change(vu: ViewUpdate): void {
+		if (!vu.docChanged) return;
+
+		const doc = vu.state.doc;
+		const text = doc.toString();
+		value = text;
+
+		const user_change = is_user_input(vu);
+		if (user_change) {
+			dispatch("change", text);
+			dispatch("input");
+		} else {
+			dispatch("change", text);
+		}
+
+		view.requestMeasure({ read: resize });
+	}
+
+	function get_extensions(): Extension[] {
+		const stateExtensions = [
+			...get_base_extensions(
+				basic,
+				use_tab,
+				placeholder,
+				readonly,
+				lang_extension,
+				show_line_numbers
+			),
+			FontTheme,
+			...get_theme(),
+			...extensions
+		];
+		return stateExtensions;
+	}
+
+	const FontTheme = EditorView.theme({
+		"&": {
+			fontSize: "var(--text-sm)",
+			backgroundColor: "var(--border-color-secondary)"
+		},
+		".cm-content": {
+			paddingTop: "5px",
+			paddingBottom: "5px",
+			color: "var(--body-text-color)",
+			fontFamily: "var(--font-mono)",
+			minHeight: "100%"
+		},
+		".cm-gutterElement": {
+			marginRight: "var(--spacing-xs)"
+		},
+		".cm-gutters": {
+			marginRight: "1px",
+			borderRight: "1px solid var(--border-color-primary)",
+			backgroundColor: "var(--block-background-fill);",
+			color: "var(--body-text-color-subdued)"
+		},
+		".cm-focused": {
+			outline: "none"
+		},
+		".cm-scroller": {
+			height: "auto"
+		},
+		".cm-cursor": {
+			borderLeftColor: "var(--body-text-color)"
+		}
+	});
+
+	const AutocompleteTheme = EditorView.theme({
+		".cm-tooltip-autocomplete": {
+			"& > ul": {
+				backgroundColor: "var(--background-fill-primary)",
+				color: "var(--body-text-color)"
+			},
+			"& > ul > li[aria-selected]": {
+				backgroundColor: "var(--color-accent-soft)",
+				color: "var(--body-text-color)"
+			}
+		}
+	});
+
+	function create_editor_state(_value: string | null | undefined): EditorState {
+		return EditorState.create({
+			doc: _value ?? undefined,
+			extensions: get_extensions()
+		});
+	}
+
+	function get_base_extensions(
+		basic: boolean,
+		use_tab: boolean,
+		placeholder: string | HTMLElement | null | undefined,
+		readonly: boolean,
+		lang: Extension | null | undefined,
+		show_line_numbers: boolean
+	): Extension[] {
+		const extensions: Extension[] = [
+			EditorView.editable.of(!readonly),
+			EditorState.readOnly.of(readonly),
+			EditorView.contentAttributes.of({ "aria-label": "Code input container" })
+		];
+
+		if (basic) {
+			extensions.push(basicSetup);
+		}
+		if (use_tab) {
+			extensions.push(
+				keymap.of([{ key: "Tab", run: acceptCompletion }, indentWithTab])
+			);
+		}
+		if (placeholder) {
+			extensions.push(placeholderExt(placeholder));
+		}
+		if (lang) {
+			extensions.push(lang);
+		}
+		if (show_line_numbers) {
+			extensions.push(lineNumbers());
+		}
+		if (autocomplete) {
+			extensions.push(autocompletion());
+			extensions.push(AutocompleteTheme);
+		}
+
+		extensions.push(EditorView.updateListener.of(handle_change));
+		if (wrap_lines) {
+			extensions.push(EditorView.lineWrapping);
+		}
+
+		return extensions;
+	}
+
+	function get_theme(): Extension[] {
+		const extensions: Extension[] = [];
+
+		if (dark_mode) {
+			extensions.push(basicDark);
+		} else {
+			extensions.push(basicLight);
+		}
+		return extensions;
+	}
+
+	function reconfigure(): void {
+		view?.dispatch({
+			effects: StateEffect.reconfigure.of(get_extensions())
+		});
+	}
+
+	onMount(() => {
+		view = create_editor_view();
+		return () => view?.destroy();
+	});
 </script>
 
 <div class="wrap">

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

@@ -1,36 +1,39 @@
-import { SvelteComponent } from "svelte";
 import { type Extension } from "@codemirror/state";
-declare const __propDef: {
-    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;
+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: {
-        change: CustomEvent<string>;
-        blur: CustomEvent<undefined>;
-        focus: CustomEvent<undefined>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type CodeProps = typeof __propDef.props;
-export type CodeEvents = typeof __propDef.events;
-export type CodeSlots = typeof __propDef.slots;
-export default class Code extends SvelteComponent<CodeProps, CodeEvents, CodeSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Code: $$__sveltets_2_IsomorphicComponent<{
+    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;
+}, {
+    change: CustomEvent<string>;
+    blur: CustomEvent<undefined>;
+    focus: CustomEvent<undefined>;
+    input: CustomEvent<undefined>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Code = InstanceType<typeof Code>;
+export default Code;

package/dist/shared/Copy.svelte

@@ -1,25 +1,30 @@
-<script>import { onDestroy } from "svelte";
-import { Copy, Check } from "@gradio/icons";
-import { IconButton } from "@gradio/atoms";
-let copied = false;
-export let value;
-let timer;
-function copy_feedback() {
-  copied = true;
-  if (timer) clearTimeout(timer);
-  timer = setTimeout(() => {
-    copied = false;
-  }, 2e3);
-}
-async function handle_copy() {
-  if ("clipboard" in navigator) {
-    await navigator.clipboard.writeText(value);
-    copy_feedback();
-  }
-}
-onDestroy(() => {
-  if (timer) clearTimeout(timer);
-});
+<script lang="ts">
+	import { onDestroy } from "svelte";
+	import { Copy, Check } from "@gradio/icons";
+	import { IconButton } from "@gradio/atoms";
+
+	let copied = false;
+	export let value: string;
+	let timer: NodeJS.Timeout;
+
+	function copy_feedback(): void {
+		copied = true;
+		if (timer) clearTimeout(timer);
+		timer = setTimeout(() => {
+			copied = false;
+		}, 2000);
+	}
+
+	async function handle_copy(): Promise<void> {
+		if ("clipboard" in navigator) {
+			await navigator.clipboard.writeText(value);
+			copy_feedback();
+		}
+	}
+
+	onDestroy(() => {
+		if (timer) clearTimeout(timer);
+	});
 </script>
 
 <IconButton Icon={copied ? Check : Copy} on:click={handle_copy} />