@gradio/code 0.3.7 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @gradio/code
 
+## 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
+
+- Updated dependencies [[`5727b92`](https://github.com/gradio-app/gradio/commit/5727b92abc8a00a675bfc0a921b38de771af947b), [`bc2cdc1`](https://github.com/gradio-app/gradio/commit/bc2cdc1df95b38025486cf76df4a494b66d98585), [`c60ad4d`](https://github.com/gradio-app/gradio/commit/c60ad4d34ab5b56a89bf6796822977e51e7a4a32), [`be56c76`](https://github.com/gradio-app/gradio/commit/be56c76c7b5d2814ea8239c7dbeddc4b1d3701c4), [`8c355a4`](https://github.com/gradio-app/gradio/commit/8c355a47844296e3aab250fe61e2ecc706122e78)]:
+  - @gradio/utils@0.2.1
+  - @gradio/upload@0.7.0
+  - @gradio/atoms@0.5.0
+  - @gradio/wasm@0.5.1
+  - @gradio/statustracker@0.4.4
+
 ## 0.3.7
 
 ### Patch Changes
@@ -254,4 +275,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.7",
+  "version": "0.4.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.4.1",
+    "@gradio/atoms": "^0.5.1",
     "@gradio/icons": "^0.3.2",
-    "@gradio/statustracker": "^0.4.3",
-    "@gradio/upload": "^0.6.1",
-    "@gradio/utils": "^0.2.0",
-    "@gradio/wasm": "^0.5.0"
+    "@gradio/statustracker": "^0.4.5",
+    "@gradio/upload": "^0.7.1",
+    "@gradio/wasm": "^0.6.0",
+    "@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>