@gradio/code 0.2.0-beta.5 → 0.2.0-beta.6

package/CHANGELOG.md

@@ -1,52 +1,46 @@
 # @gradio/code
 
-## 0.2.0-beta.5
+## 0.2.0-beta.6
 
 ### Features
 
-- [#5648](https://github.com/gradio-app/gradio/pull/5648) [`c573e2339`](https://github.com/gradio-app/gradio/commit/c573e2339b86c85b378dc349de5e9223a3c3b04a) - Publish all components to npm.  Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
+- [#5960](https://github.com/gradio-app/gradio/pull/5960) [`319c30f3f`](https://github.com/gradio-app/gradio/commit/319c30f3fccf23bfe1da6c9b132a6a99d59652f7) - rererefactor frontend files.  Thanks [@pngwn](https://github.com/pngwn)!
+- [#5938](https://github.com/gradio-app/gradio/pull/5938) [`13ed8a485`](https://github.com/gradio-app/gradio/commit/13ed8a485d5e31d7d75af87fe8654b661edcca93) - V4: Use beta release versions for '@gradio' packages.  Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
 
-## 0.2.0-beta.4
+## 0.2.3
 
 ### Patch Changes
 
-- Updated dependencies [[`0b4fd5b6d`](https://github.com/gradio-app/gradio/commit/0b4fd5b6db96fc95a155e5e935e17e1ab11d1161)]:
-  - @gradio/utils@0.2.0-beta.3
-  - @gradio/atoms@0.2.0-beta.3
-  - @gradio/statustracker@0.3.0-beta.4
-  - @gradio/upload@0.3.0-beta.3
+- Updated dependencies [[`e70805d54`](https://github.com/gradio-app/gradio/commit/e70805d54cc792452545f5d8eccc1aa0212a4695)]:
+  - @gradio/atoms@0.2.0
+  - @gradio/statustracker@0.2.3
+  - @gradio/upload@0.3.3
 
-## 0.2.0-beta.3
+## 0.2.2
 
 ### Patch Changes
 
-- Updated dependencies [[`14fc612d8`](https://github.com/gradio-app/gradio/commit/14fc612d84bf6b1408eccd3a40fab41f25477571)]:
-  - @gradio/utils@0.2.0-beta.2
-  - @gradio/atoms@0.2.0-beta.2
-  - @gradio/statustracker@0.3.0-beta.3
-  - @gradio/upload@0.3.0-beta.2
-
-## 0.2.0-beta.2
-
-### Features
-
-- [#5620](https://github.com/gradio-app/gradio/pull/5620) [`c4c25ecdf`](https://github.com/gradio-app/gradio/commit/c4c25ecdf8c2fab5e3c41b519564e3b6a9ebfce3) - fix build and broken imports. Thanks [@pngwn](https://github.com/pngwn)!
+- Updated dependencies []:
+  - @gradio/utils@0.1.2
+  - @gradio/atoms@0.1.4
+  - @gradio/statustracker@0.2.2
+  - @gradio/upload@0.3.2
 
-## 0.2.0-beta.1
+## 0.2.1
 
 ### Patch Changes
 
-- Updated dependencies []:
-  - @gradio/utils@0.2.0-beta.1
-  - @gradio/atoms@0.2.0-beta.1
-  - @gradio/statustracker@0.3.0-beta.1
-  - @gradio/upload@0.3.0-beta.1
+- Updated dependencies [[`8f0fed857`](https://github.com/gradio-app/gradio/commit/8f0fed857d156830626eb48b469d54d211a582d2)]:
+  - @gradio/icons@0.2.0
+  - @gradio/atoms@0.1.3
+  - @gradio/statustracker@0.2.1
+  - @gradio/upload@0.3.1
 
-## 0.2.0-beta.0
+## 0.2.0
 
 ### Features
 
-- [#5507](https://github.com/gradio-app/gradio/pull/5507) [`1385dc688`](https://github.com/gradio-app/gradio/commit/1385dc6881f2d8ae7a41106ec21d33e2ef04d6a9) - Custom components. Thanks [@pngwn](https://github.com/pngwn)!
+- [#5554](https://github.com/gradio-app/gradio/pull/5554) [`75ddeb390`](https://github.com/gradio-app/gradio/commit/75ddeb390d665d4484667390a97442081b49a423) - Accessibility Improvements. Thanks [@hannahblair](https://github.com/hannahblair)!
 
 ## 0.1.2
 

package/{static/StaticCode.svelte → Index.svelte}

@@ -4,7 +4,8 @@
 
 	import type { LoadingStatus } from "@gradio/statustracker";
 
-	import Code, { Widget } from "../shared";
+	import Code from "./shared/Code.svelte";
+	import Widget from "./shared/Widgets.svelte";
 	import { StatusTracker } from "@gradio/statustracker";
 	import { Block, BlockLabel, Empty } from "@gradio/atoms";
 	import { Code as CodeIcon } from "@gradio/icons";
@@ -24,6 +25,9 @@
 	export let label = gradio.i18n("code.code");
 	export let show_label = true;
 	export let loading_status: LoadingStatus;
+	export let scale: number | null = null;
+
+	export let mode: "static" | "interactive";
 
 	let dark_mode = target.classList.contains("dark");
 
@@ -39,7 +43,14 @@
 	$: value, handle_change();
 </script>
 
-<Block variant={"solid"} padding={false} {elem_id} {elem_classes} {visible}>
+<Block
+	variant={"solid"}
+	padding={false}
+	{elem_id}
+	{elem_classes}
+	{visible}
+	{scale}
+>
 	<StatusTracker
 		autoscroll={gradio.autoscroll}
 		i18n={gradio.i18n}
@@ -55,6 +66,12 @@
 	{:else}
 		<Widget {language} {value} />
 
-		<Code bind:value {language} {lines} {dark_mode} readonly />
+		<Code
+			bind:value
+			{language}
+			{lines}
+			{dark_mode}
+			readonly={mode === "static"}
+		/>
 	{/if}
 </Block>

package/package.json

@@ -1,9 +1,8 @@
 {
   "name": "@gradio/code",
-  "version": "0.2.0-beta.5",
+  "version": "0.2.0-beta.6",
   "description": "Gradio UI packages",
   "type": "module",
-  "main": "./index.svelte",
   "author": "",
   "license": "ISC",
   "private": false,
@@ -28,17 +27,16 @@
     "cm6-theme-basic-dark": "^0.2.0",
     "cm6-theme-basic-light": "^0.2.0",
     "codemirror": "^6.0.1",
-    "@gradio/atoms": "^0.2.0-beta.3",
-    "@gradio/icons": "^0.2.0-beta.0",
-    "@gradio/statustracker": "^0.3.0-beta.5",
-    "@gradio/upload": "^0.3.0-beta.3",
-    "@gradio/utils": "^0.2.0-beta.3"
+    "@gradio/atoms": "^0.2.0-beta.4",
+    "@gradio/icons": "^0.2.0-beta.1",
+    "@gradio/statustracker": "^0.3.0-beta.6",
+    "@gradio/upload": "^0.3.0-beta.4",
+    "@gradio/utils": "^0.2.0-beta.4"
   },
   "main_changeset": true,
   "exports": {
-    "./package.json": "./package.json",
-    "./interactive": "./interactive/index.ts",
-    "./static": "./static/index.ts",
-    "./example": "./example/index.ts"
+    ".": "./Index.svelte",
+    "./example": "./Example.svelte",
+    "./package.json": "./package.json"
   }
 }

package/shared/Code.svelte

@@ -4,7 +4,7 @@
 	import {
 		EditorView,
 		keymap,
-		placeholder as placeholderExt
+		placeholder as placeholderExt,
 	} from "@codemirror/view";
 	import { StateEffect, EditorState, type Extension } from "@codemirror/state";
 	import { indentWithTab } from "@codemirror/commands";
@@ -42,7 +42,7 @@
 
 	$: reconfigure(), lang_extension;
 	$: setDoc(value);
-	$: updateLines(lines);
+	$: updateLines();
 
 	function setDoc(newDoc: string): void {
 		if (view && newDoc !== view.state.doc.toString()) {
@@ -50,13 +50,13 @@
 				changes: {
 					from: 0,
 					to: view.state.doc.length,
-					insert: newDoc
-				}
+					insert: newDoc,
+				},
 			});
 		}
 	}
 
-	function updateLines(newLines: number): void {
+	function updateLines(): void {
 		if (view) {
 			view.requestMeasure({ read: updateGutters });
 		}
@@ -65,7 +65,7 @@
 	function createEditorView(): EditorView {
 		return new EditorView({
 			parent: element,
-			state: createEditorState(value)
+			state: createEditorState(value),
 		});
 	}
 
@@ -119,7 +119,7 @@
 			),
 			FontTheme,
 			...getTheme(),
-			...extensions
+			...extensions,
 		];
 		return stateExtensions;
 	}
@@ -127,36 +127,36 @@
 	const FontTheme = EditorView.theme({
 		"&": {
 			fontSize: "var(--text-sm)",
-			backgroundColor: "var(--border-color-secondary)"
+			backgroundColor: "var(--border-color-secondary)",
 		},
 		".cm-content": {
 			paddingTop: "5px",
 			paddingBottom: "5px",
 			color: "var(--body-text-color)",
 			fontFamily: "var(--font-mono)",
-			minHeight: "100%"
+			minHeight: "100%",
 		},
 		".cm-gutters": {
 			marginRight: "1px",
 			borderRight: "1px solid var(--border-color-primary)",
 			backgroundColor: "transparent",
-			color: "var(--body-text-color-subdued)"
+			color: "var(--body-text-color-subdued)",
 		},
 		".cm-focused": {
-			outline: "none"
+			outline: "none",
 		},
 		".cm-scroller": {
-			height: "auto"
+			height: "auto",
 		},
 		".cm-cursor": {
-			borderLeftColor: "var(--body-text-color)"
-		}
+			borderLeftColor: "var(--body-text-color)",
+		},
 	});
 
 	function createEditorState(_value: string | null | undefined): EditorState {
 		return EditorState.create({
 			doc: _value ?? undefined,
-			extensions: getExtensions()
+			extensions: getExtensions(),
 		});
 	}
 
@@ -169,7 +169,8 @@
 	): Extension[] {
 		const extensions: Extension[] = [
 			EditorView.editable.of(!readonly),
-			EditorState.readOnly.of(readonly)
+			EditorState.readOnly.of(readonly),
+			EditorView.contentAttributes.of({ "aria-label": "Code input container" }),
 		];
 
 		if (basic) {
@@ -202,7 +203,7 @@
 
 	function reconfigure(): void {
 		view?.dispatch({
-			effects: StateEffect.reconfigure.of(getExtensions())
+			effects: StateEffect.reconfigure.of(getExtensions()),
 		});
 	}
 

package/shared/Copy.svelte

@@ -27,12 +27,21 @@
 	});
 </script>
 
-<button on:click={handle_copy} title="copy">
-	<!-- {#if !copied} -->
-	<span class="copy-text" class:copied><Copy /> </span>
-	<!-- {/if} -->
+<button
+	on:click={handle_copy}
+	title="copy"
+	class:copied
+	aria-roledescription="Copy value"
+	aria-label="Copy"
+>
+	<Copy />
 	{#if copied}
-		<span class="check" transition:fade><Check /></span>
+		<span
+			class="check"
+			transition:fade
+			aria-roledescription="Value copied"
+			aria-label="Copied"><Check /></span
+		>
 	{/if}
 </button>
 

package/example/index.ts

@@ -1 +0,0 @@
-export { default } from "./Code.svelte";

package/interactive/InteractiveCode.svelte

@@ -1,52 +0,0 @@
-<script lang="ts">
-	import type { Gradio } from "@gradio/utils";
-	import { afterUpdate } from "svelte";
-
-	import type { LoadingStatus } from "@gradio/statustracker";
-
-	import Code from "../shared";
-	import { StatusTracker } from "@gradio/statustracker";
-	import { Block, BlockLabel } from "@gradio/atoms";
-	import { Code as CodeIcon } from "@gradio/icons";
-
-	export let gradio: Gradio<{
-		change: typeof value;
-		input: never;
-	}>;
-	export let value = "";
-	export let value_is_output = false;
-	export let language = "";
-	export let lines = 5;
-	export let target: HTMLElement;
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible = true;
-	export let label = gradio.i18n("code.code");
-	export let show_label = true;
-	export let loading_status: LoadingStatus;
-
-	let dark_mode = target.classList.contains("dark");
-
-	function handle_change(): void {
-		gradio.dispatch("change", value);
-		if (!value_is_output) {
-			gradio.dispatch("input");
-		}
-	}
-	afterUpdate(() => {
-		value_is_output = false;
-	});
-	$: value, handle_change();
-</script>
-
-<Block variant={"solid"} padding={false} {elem_id} {elem_classes} {visible}>
-	<StatusTracker
-		autoscroll={gradio.autoscroll}
-		i18n={gradio.i18n}
-		{...loading_status}
-	/>
-
-	<BlockLabel Icon={CodeIcon} {show_label} {label} float={false} />
-
-	<Code bind:value {language} {lines} {dark_mode} />
-</Block>

package/interactive/index.ts

@@ -1 +0,0 @@
-export { default } from "./InteractiveCode.svelte";

package/shared/index.ts

@@ -1,2 +0,0 @@
-export { default } from "./Code.svelte";
-export { default as Widget } from "./Widgets.svelte";

package/static/index.ts

@@ -1 +0,0 @@
-export { default } from "./StaticCode.svelte";