@gradio/code 0.3.8 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @gradio/code
 
+## 0.5.0
+
+### Features
+
+- [#7328](https://github.com/gradio-app/gradio/pull/7328) [`c1a7ea7`](https://github.com/gradio-app/gradio/commit/c1a7ea7c0c294aa970624f02225717c12bcf9b58) - Add SQL Support for gr.Code.  Thanks [@aersam](https://github.com/aersam)!
+
+## 0.4.0
+
+### Features
+
+- [#7240](https://github.com/gradio-app/gradio/pull/7240) [`1893756`](https://github.com/gradio-app/gradio/commit/18937564ab8906710549d5bccc48f7188c836f38) - Small cleanups of `Code` component.  Thanks [@abidlabs](https://github.com/abidlabs)!
+
+### Fixes
+
+- [#7192](https://github.com/gradio-app/gradio/pull/7192) [`8dd6f4b`](https://github.com/gradio-app/gradio/commit/8dd6f4bc1901792f05cd59e86df7b1dbab692739) - Handle the case where examples is `null` for all components.  Thanks [@abidlabs](https://github.com/abidlabs)!
+
 ## 0.3.8
 
 ### Patch Changes
@@ -265,4 +281,4 @@ Thanks [@pngwn](https://github.com/pngwn)!
 
 - Updated dependencies []:
   - @gradio/atoms@0.0.2
-  - @gradio/upload@0.0.2
+  - @gradio/upload@0.0.2

package/Example.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	export let value: string;
+	export let value: string | null;
 	export let type: "gallery" | "table";
 	export let selected = false;
 </script>
@@ -7,7 +7,7 @@
 <pre
 	class:table={type === "table"}
 	class:gallery={type === "gallery"}
-	class:selected>{value}</pre>
+	class:selected>{value ? value : ""}</pre>
 
 <style>
 	pre {

package/README.md

@@ -8,17 +8,14 @@
 
 BaseCode
 ```javascript
-	export let classNames = "";
+	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 extensions: Extension[] = [];
-
-	export let useTab = true;
-
+	export let use_tab = true;
 	export let readonly = false;
 	export let placeholder: string | HTMLElement | null | undefined = undefined;
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/code",
-  "version": "0.3.8",
+  "version": "0.5.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -28,11 +28,11 @@
     "cm6-theme-basic-light": "^0.2.0",
     "codemirror": "^6.0.1",
     "@gradio/icons": "^0.3.2",
-    "@gradio/upload": "^0.7.0",
-    "@gradio/atoms": "^0.5.0",
-    "@gradio/statustracker": "^0.4.4",
-    "@gradio/utils": "^0.2.1",
-    "@gradio/wasm": "^0.5.1"
+    "@gradio/upload": "^0.7.2",
+    "@gradio/statustracker": "^0.4.5",
+    "@gradio/wasm": "^0.6.0",
+    "@gradio/atoms": "^0.5.1",
+    "@gradio/utils": "^0.2.2"
   },
   "main_changeset": true,
   "main": "./Index.svelte",

package/shared/Code.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import type { ViewUpdate } from "@codemirror/view";
 	import { createEventDispatcher, onMount } from "svelte";
 	import {
 		EditorView,
+		ViewUpdate,
 		keymap,
 		placeholder as placeholderExt
 	} from "@codemirror/view";
@@ -14,17 +14,14 @@
 	import { basicSetup } from "./extensions";
 	import { getLanguageExtension } from "./language";
 
-	export let classNames = "";
+	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 extensions: Extension[] = [];
-
-	export let useTab = true;
-
+	export let use_tab = true;
 	export let readonly = false;
 	export let placeholder: string | HTMLElement | null | undefined = undefined;
 
@@ -45,42 +42,42 @@
 	}
 
 	$: reconfigure(), lang_extension;
-	$: setDoc(value);
-	$: updateLines();
+	$: set_doc(value);
+	$: update_lines();
 
-	function setDoc(newDoc: string): void {
-		if (view && newDoc !== view.state.doc.toString()) {
+	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: newDoc
+					insert: new_doc
 				}
 			});
 		}
 	}
 
-	function updateLines(): void {
+	function update_lines(): void {
 		if (view) {
-			view.requestMeasure({ read: updateGutters });
+			view.requestMeasure({ read: update_gutters });
 		}
 	}
 
-	function createEditorView(): EditorView {
+	function create_editor_view(): EditorView {
 		const editorView = new EditorView({
 			parent: element,
-			state: createEditorState(value)
+			state: create_editor_state(value)
 		});
-		editorView.dom.addEventListener("focus", handleFocus, true);
-		editorView.dom.addEventListener("blur", handleBlur, true);
+		editorView.dom.addEventListener("focus", handle_focus, true);
+		editorView.dom.addEventListener("blur", handle_blur, true);
 		return editorView;
 	}
 
-	function handleFocus(): void {
+	function handle_focus(): void {
 		dispatch("focus");
 	}
 
-	function handleBlur(): void {
+	function handle_blur(): void {
 		dispatch("blur");
 	}
 
@@ -99,7 +96,7 @@
 		return null;
 	}
 
-	function updateGutters(_view: EditorView): any {
+	function update_gutters(_view: EditorView): any {
 		let gutters = _view.dom.querySelectorAll<HTMLElement>(".cm-gutter");
 		let _lines = lines + 1;
 		let lineHeight = getGutterLineHeight(_view);
@@ -113,27 +110,27 @@
 		return null;
 	}
 
-	function handleChange(vu: ViewUpdate): void {
+	function handle_change(vu: ViewUpdate): void {
 		if (vu.docChanged) {
 			const doc = vu.state.doc;
 			const text = doc.toString();
 			value = text;
 			dispatch("change", text);
 		}
-		view.requestMeasure({ read: updateGutters });
+		view.requestMeasure({ read: update_gutters });
 	}
 
-	function getExtensions(): Extension[] {
+	function get_extensions(): Extension[] {
 		const stateExtensions = [
-			...getBaseExtensions(
+			...get_base_extensions(
 				basic,
-				useTab,
+				use_tab,
 				placeholder,
 				readonly,
 				lang_extension
 			),
 			FontTheme,
-			...getTheme(),
+			...get_theme(),
 			...extensions
 		];
 		return stateExtensions;
@@ -168,16 +165,16 @@
 		}
 	});
 
-	function createEditorState(_value: string | null | undefined): EditorState {
+	function create_editor_state(_value: string | null | undefined): EditorState {
 		return EditorState.create({
 			doc: _value ?? undefined,
-			extensions: getExtensions()
+			extensions: get_extensions()
 		});
 	}
 
-	function getBaseExtensions(
+	function get_base_extensions(
 		basic: boolean,
-		useTab: boolean,
+		use_tab: boolean,
 		placeholder: string | HTMLElement | null | undefined,
 		readonly: boolean,
 		lang: Extension | null | undefined
@@ -191,7 +188,7 @@
 		if (basic) {
 			extensions.push(basicSetup);
 		}
-		if (useTab) {
+		if (use_tab) {
 			extensions.push(keymap.of([indentWithTab]));
 		}
 		if (placeholder) {
@@ -201,11 +198,11 @@
 			extensions.push(lang);
 		}
 
-		extensions.push(EditorView.updateListener.of(handleChange));
+		extensions.push(EditorView.updateListener.of(handle_change));
 		return extensions;
 	}
 
-	function getTheme(): Extension[] {
+	function get_theme(): Extension[] {
 		const extensions: Extension[] = [];
 
 		if (dark_mode) {
@@ -218,18 +215,18 @@
 
 	function reconfigure(): void {
 		view?.dispatch({
-			effects: StateEffect.reconfigure.of(getExtensions())
+			effects: StateEffect.reconfigure.of(get_extensions())
 		});
 	}
 
 	onMount(() => {
-		view = createEditorView();
+		view = create_editor_view();
 		return () => view?.destroy();
 	});
 </script>
 
 <div class="wrap">
-	<div class="codemirror-wrapper {classNames}" bind:this={element} />
+	<div class="codemirror-wrapper {class_names}" bind:this={element} />
 </div>
 
 <style>

package/shared/language.ts

@@ -1,5 +1,6 @@
 import type { Extension } from "@codemirror/state";
 import { StreamLanguage } from "@codemirror/language";
+import { sql } from "@codemirror/legacy-modes/mode/sql";
 
 const possible_langs = [
 	"python",
@@ -12,9 +13,26 @@ const possible_langs = [
 	"yaml",
 	"dockerfile",
 	"shell",
-	"r"
+	"r",
+	"sql"
 ];
 
+const sql_dialects = [
+	"standardSQL",
+	"msSQL",
+	"mySQL",
+	"mariaDB",
+	"sqlite",
+	"cassandra",
+	"plSQL",
+	"hive",
+	"pgSQL",
+	"gql",
+	"gpSQL",
+	"sparkSQL",
+	"esper"
+] as const;
+
 const lang_map: Record<string, (() => Promise<Extension>) | undefined> = {
 	python: () => import("@codemirror/lang-python").then((m) => m.python()),
 	markdown: async () => {
@@ -48,7 +66,20 @@ const lang_map: Record<string, (() => Promise<Extension>) | undefined> = {
 	r: () =>
 		import("@codemirror/legacy-modes/mode/r").then((m) =>
 			StreamLanguage.define(m.r)
-		)
+		),
+	sql: () =>
+		import("@codemirror/legacy-modes/mode/sql").then((m) =>
+			StreamLanguage.define(m.standardSQL)
+		),
+	...Object.fromEntries(
+		sql_dialects.map((dialect) => [
+			"sql-" + dialect,
+			() =>
+				import("@codemirror/legacy-modes/mode/sql").then((m) =>
+					StreamLanguage.define(m[dialect])
+				)
+		])
+	)
 } as const;
 
 const alias_map: Record<string, string> = {