@gradio/code 0.12.0 → 0.13.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @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

package/dist/shared/Code.svelte

@@ -9,10 +9,12 @@ import {
 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;
@@ -33,8 +35,14 @@ 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;
 }
 $:

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,6 +1,6 @@
 {
   "name": "@gradio/code",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -27,12 +27,12 @@
     "cm6-theme-basic-dark": "^0.2.0",
     "cm6-theme-basic-light": "^0.2.0",
     "codemirror": "^6.0.1",
-    "@gradio/atoms": "^0.14.0",
-    "@gradio/upload": "^0.15.5",
+    "@gradio/atoms": "^0.14.1",
+    "@gradio/statustracker": "^0.10.6",
     "@gradio/icons": "^0.10.0",
     "@gradio/utils": "^0.10.1",
-    "@gradio/wasm": "^0.17.4",
-    "@gradio/statustracker": "^0.10.5"
+    "@gradio/upload": "^0.15.6",
+    "@gradio/wasm": "^0.18.0"
   },
   "main_changeset": true,
   "main": "./Index.svelte",

package/shared/Code.svelte

@@ -10,11 +10,13 @@
 	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 = "";
@@ -42,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;
 	}
 

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",