@gradio/code 0.11.2 → 0.13.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @gradio/code
 
+## 0.13.0
+
+### Features
+
+- [#10812](https://github.com/gradio-app/gradio/pull/10812) [`6384bcc`](https://github.com/gradio-app/gradio/commit/6384bcc11f13d22f4480e7ad7213486fecec8936) - Jedi-based Python code completion on `gr.Code`.  Thanks @whitphx!
+
+### Dependency updates
+
+- @gradio/atoms@0.14.1
+- @gradio/statustracker@0.10.6
+- @gradio/wasm@0.18.0
+- @gradio/upload@0.15.6
+
+## 0.12.0
+
+### Features
+
+- [#10733](https://github.com/gradio-app/gradio/pull/10733) [`731ab92`](https://github.com/gradio-app/gradio/commit/731ab92001c88d4cf1062acf0a4f1108a4513014) - Autocompletion on code editor component.  Thanks @whitphx!
+
+### Dependency updates
+
+- @gradio/upload@0.15.5
+- @gradio/statustracker@0.10.5
+- @gradio/atoms@0.14.0
+
 ## 0.11.2
 
 ### Dependency updates

package/Index.svelte

@@ -40,6 +40,7 @@
 	export let min_width: number | undefined = undefined;
 	export let wrap_lines = false;
 	export let show_line_numbers = true;
+	export let autocomplete = false;
 
 	export let interactive: boolean;
 
@@ -93,6 +94,7 @@
 			{dark_mode}
 			{wrap_lines}
 			{show_line_numbers}
+			{autocomplete}
 			readonly={!interactive}
 			on:blur={() => gradio.dispatch("blur")}
 			on:focus={() => gradio.dispatch("focus")}

package/dist/Index.svelte

@@ -27,6 +27,7 @@ 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() {
@@ -78,6 +79,7 @@ $:
 			{dark_mode}
 			{wrap_lines}
 			{show_line_numbers}
+			{autocomplete}
 			readonly={!interactive}
 			on:blur={() => gradio.dispatch("blur")}
 			on:focus={() => gradio.dispatch("focus")}

package/dist/Index.svelte.d.ts

@@ -30,6 +30,7 @@ declare const __propDef: {
         min_width?: number | undefined;
         wrap_lines?: boolean | undefined;
         show_line_numbers?: boolean | undefined;
+        autocomplete?: boolean | undefined;
         interactive: boolean;
     };
     events: {

package/dist/shared/Code.svelte

@@ -8,10 +8,13 @@ import {
 } from "@codemirror/view";
 import { StateEffect, EditorState } from "@codemirror/state";
 import { indentWithTab } from "@codemirror/commands";
+import { autocompletion, acceptCompletion } from "@codemirror/autocomplete";
+import { LanguageSupport } from "@codemirror/language";
 import { basicDark } from "cm6-theme-basic-dark";
 import { basicLight } from "cm6-theme-basic-light";
 import { basicSetup } from "./extensions";
 import { getLanguageExtension } from "./language";
+import { create_pyodide_autocomplete } from "./autocomplete";
 export let class_names = "";
 export let value = "";
 export let dark_mode;
@@ -25,14 +28,21 @@ 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);
+const pyodide_autocomplete = create_pyodide_autocomplete();
 async function get_lang(val) {
   const ext = await getLanguageExtension(val);
+  if (pyodide_autocomplete && val === "python" && ext instanceof LanguageSupport) {
+    ext.support.push(
+      ext.language.data.of({ autocomplete: pyodide_autocomplete })
+    );
+  }
   lang_extension = ext;
 }
 $:
@@ -156,6 +166,18 @@ const FontTheme = EditorView.theme({
     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,
@@ -172,7 +194,9 @@ function get_base_extensions(basic2, use_tab2, placeholder2, readonly2, lang, sh
     extensions2.push(basicSetup);
   }
   if (use_tab2) {
-    extensions2.push(keymap.of([indentWithTab]));
+    extensions2.push(
+      keymap.of([{ key: "Tab", run: acceptCompletion }, indentWithTab])
+    );
   }
   if (placeholder2) {
     extensions2.push(placeholderExt(placeholder2));
@@ -183,6 +207,10 @@ function get_base_extensions(basic2, use_tab2, placeholder2, readonly2, lang, sh
   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);

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

@@ -15,6 +15,7 @@ declare const __propDef: {
         placeholder?: string | HTMLElement | null | undefined;
         wrap_lines?: boolean | undefined;
         show_line_numbers?: boolean | undefined;
+        autocomplete?: boolean | undefined;
     };
     events: {
         change: CustomEvent<string>;

package/dist/shared/autocomplete.d.ts

@@ -0,0 +1,4 @@
+import type { CompletionContext, CompletionResult } from "@codemirror/autocomplete";
+type CodeMirrorAutocompleteAsyncFn = (context: CompletionContext) => Promise<CompletionResult | null>;
+export declare function create_pyodide_autocomplete(): CodeMirrorAutocompleteAsyncFn | null;
+export {};

package/dist/shared/autocomplete.js

@@ -0,0 +1,49 @@
+import { getWorkerProxyContext } from "@gradio/wasm/svelte";
+// Jedi's completion types to CodeMirror's completion types.
+// If not defined here, Jedi's completion types will be used.
+const completion_type_map = {
+    module: "namespace"
+};
+export function create_pyodide_autocomplete() {
+    let maybe_worker_proxy;
+    try {
+        maybe_worker_proxy = getWorkerProxyContext();
+    }
+    catch (e) {
+        console.debug("Not in the Wasm env. Context-aware autocomplete disabled.");
+        return null;
+    }
+    if (!maybe_worker_proxy) {
+        return null;
+    }
+    const worker_proxy = maybe_worker_proxy;
+    return async function pyodide_autocomplete(context) {
+        try {
+            const completions = await worker_proxy.getCodeCompletions({
+                code: context.state.doc.toString(),
+                line: context.state.doc.lineAt(context.state.selection.main.head)
+                    .number,
+                column: context.state.selection.main.head -
+                    context.state.doc.lineAt(context.state.selection.main.head).from
+            });
+            if (completions.length === 0) {
+                return null;
+            }
+            return {
+                from: context.state.selection.main.head -
+                    completions[0].completion_prefix_length,
+                options: completions.map((completion) => ({
+                    label: completion.label,
+                    type: completion_type_map[completion.type] ?? completion.type,
+                    documentation: completion.docstring,
+                    // Items starting with "_" are private attributes and should be sorted last.
+                    boost: completion.label.startsWith("_") ? -1 : 0
+                }))
+            };
+        }
+        catch (e) {
+            console.error("Error getting completions", e);
+            return null;
+        }
+    };
+}

package/dist/shared/language.js

@@ -1,23 +1,5 @@
 import { StreamLanguage } from "@codemirror/language";
-import { sql } from "@codemirror/legacy-modes/mode/sql";
 import { _ } from "svelte-i18n";
-const possible_langs = [
-    "python",
-    "c",
-    "cpp",
-    "markdown",
-    "json",
-    "html",
-    "css",
-    "javascript",
-    "jinja2",
-    "typescript",
-    "yaml",
-    "dockerfile",
-    "shell",
-    "r",
-    "sql"
-];
 const sql_dialects = [
     "standardSQL",
     "msSQL",

package/package.json

@@ -1,38 +1,38 @@
 {
   "name": "@gradio/code",
-  "version": "0.11.2",
+  "version": "0.13.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
   "license": "ISC",
   "private": false,
   "dependencies": {
-    "@codemirror/autocomplete": "^6.3.0",
-    "@codemirror/commands": "^6.1.2",
-    "@codemirror/lang-css": "^6.1.0",
-    "@codemirror/lang-html": "^6.4.2",
-    "@codemirror/lang-javascript": "^6.1.4",
+    "@codemirror/autocomplete": "^6.18.6",
+    "@codemirror/commands": "^6.8.0",
+    "@codemirror/lang-css": "^6.3.1",
+    "@codemirror/lang-html": "^6.4.9",
+    "@codemirror/lang-javascript": "^6.2.3",
     "@codemirror/lang-json": "^6.0.1",
-    "@codemirror/lang-markdown": "^6.1.0",
-    "@codemirror/lang-python": "^6.0.4",
-    "@codemirror/language": "^6.6.0",
-    "@codemirror/legacy-modes": "^6.3.1",
-    "@codemirror/lint": "^6.0.0",
-    "@codemirror/search": "^6.2.2",
-    "@codemirror/state": "^6.1.2",
-    "@codemirror/view": "^6.4.1",
-    "@lezer/common": "^1.0.2",
-    "@lezer/highlight": "^1.1.3",
-    "@lezer/markdown": "^1.0.2",
+    "@codemirror/lang-markdown": "^6.3.2",
+    "@codemirror/lang-python": "^6.1.7",
+    "@codemirror/language": "^6.10.8",
+    "@codemirror/legacy-modes": "^6.4.3",
+    "@codemirror/lint": "^6.8.4",
+    "@codemirror/search": "^6.5.10",
+    "@codemirror/state": "^6.5.2",
+    "@codemirror/view": "^6.36.3",
+    "@lezer/common": "^1.2.3",
+    "@lezer/highlight": "^1.2.1",
+    "@lezer/markdown": "^1.4.2",
     "cm6-theme-basic-dark": "^0.2.0",
     "cm6-theme-basic-light": "^0.2.0",
     "codemirror": "^6.0.1",
-    "@gradio/atoms": "^0.13.3",
+    "@gradio/atoms": "^0.14.1",
+    "@gradio/statustracker": "^0.10.6",
     "@gradio/icons": "^0.10.0",
-    "@gradio/upload": "^0.15.4",
-    "@gradio/statustracker": "^0.10.4",
     "@gradio/utils": "^0.10.1",
-    "@gradio/wasm": "^0.17.4"
+    "@gradio/upload": "^0.15.6",
+    "@gradio/wasm": "^0.18.0"
   },
   "main_changeset": true,
   "main": "./Index.svelte",

package/shared/Code.svelte

@@ -9,11 +9,14 @@
 	} from "@codemirror/view";
 	import { StateEffect, EditorState, type Extension } from "@codemirror/state";
 	import { indentWithTab } from "@codemirror/commands";
+	import { autocompletion, acceptCompletion } from "@codemirror/autocomplete";
+	import { LanguageSupport } from "@codemirror/language";
 
 	import { basicDark } from "cm6-theme-basic-dark";
 	import { basicLight } from "cm6-theme-basic-light";
 	import { basicSetup } from "./extensions";
 	import { getLanguageExtension } from "./language";
+	import { create_pyodide_autocomplete } from "./autocomplete";
 
 	export let class_names = "";
 	export let value = "";
@@ -28,6 +31,7 @@
 	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;
@@ -40,8 +44,19 @@
 
 	$: get_lang(language);
 
+	const pyodide_autocomplete = create_pyodide_autocomplete();
+
 	async function get_lang(val: string): Promise<void> {
 		const ext = await getLanguageExtension(val);
+		if (
+			pyodide_autocomplete &&
+			val === "python" &&
+			ext instanceof LanguageSupport
+		) {
+			(ext.support as Extension[]).push(
+				ext.language.data.of({ autocomplete: pyodide_autocomplete })
+			);
+		}
 		lang_extension = ext;
 	}
 
@@ -175,6 +190,19 @@
 		}
 	});
 
+	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,
@@ -200,7 +228,9 @@
 			extensions.push(basicSetup);
 		}
 		if (use_tab) {
-			extensions.push(keymap.of([indentWithTab]));
+			extensions.push(
+				keymap.of([{ key: "Tab", run: acceptCompletion }, indentWithTab])
+			);
 		}
 		if (placeholder) {
 			extensions.push(placeholderExt(placeholder));
@@ -208,10 +238,13 @@
 		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) {

package/shared/autocomplete.ts

@@ -0,0 +1,63 @@
+import type {
+	CompletionContext,
+	CompletionResult
+} from "@codemirror/autocomplete";
+import { getWorkerProxyContext } from "@gradio/wasm/svelte";
+import type { WorkerProxy } from "@gradio/wasm";
+
+// Jedi's completion types to CodeMirror's completion types.
+// If not defined here, Jedi's completion types will be used.
+const completion_type_map: Record<string, string> = {
+	module: "namespace"
+};
+
+type CodeMirrorAutocompleteAsyncFn = (
+	context: CompletionContext
+) => Promise<CompletionResult | null>;
+
+export function create_pyodide_autocomplete(): CodeMirrorAutocompleteAsyncFn | null {
+	let maybe_worker_proxy: WorkerProxy | undefined;
+	try {
+		maybe_worker_proxy = getWorkerProxyContext();
+	} catch (e) {
+		console.debug("Not in the Wasm env. Context-aware autocomplete disabled.");
+		return null;
+	}
+	if (!maybe_worker_proxy) {
+		return null;
+	}
+	const worker_proxy = maybe_worker_proxy;
+
+	return async function pyodide_autocomplete(
+		context: CompletionContext
+	): Promise<CompletionResult | null> {
+		try {
+			const completions = await worker_proxy.getCodeCompletions({
+				code: context.state.doc.toString(),
+				line: context.state.doc.lineAt(context.state.selection.main.head)
+					.number,
+				column:
+					context.state.selection.main.head -
+					context.state.doc.lineAt(context.state.selection.main.head).from
+			});
+			if (completions.length === 0) {
+				return null;
+			}
+			return {
+				from:
+					context.state.selection.main.head -
+					completions[0].completion_prefix_length,
+				options: completions.map((completion) => ({
+					label: completion.label,
+					type: completion_type_map[completion.type] ?? completion.type,
+					documentation: completion.docstring,
+					// Items starting with "_" are private attributes and should be sorted last.
+					boost: completion.label.startsWith("_") ? -1 : 0
+				}))
+			};
+		} catch (e) {
+			console.error("Error getting completions", e);
+			return null;
+		}
+	};
+}

package/shared/language.ts

@@ -1,26 +1,7 @@
 import type { Extension } from "@codemirror/state";
 import { StreamLanguage } from "@codemirror/language";
-import { sql } from "@codemirror/legacy-modes/mode/sql";
 import { _ } from "svelte-i18n";
 
-const possible_langs = [
-	"python",
-	"c",
-	"cpp",
-	"markdown",
-	"json",
-	"html",
-	"css",
-	"javascript",
-	"jinja2",
-	"typescript",
-	"yaml",
-	"dockerfile",
-	"shell",
-	"r",
-	"sql"
-];
-
 const sql_dialects = [
 	"standardSQL",
 	"msSQL",