@gradio/code 0.9.0 → 0.9.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @gradio/code
 
+## 0.9.1
+
+### Features
+
+- [#9187](https://github.com/gradio-app/gradio/pull/9187) [`5bf00b7`](https://github.com/gradio-app/gradio/commit/5bf00b7524ebf399b48719120a49d15bb21bd65c) - make all component SSR compatible.  Thanks @pngwn!
+
+### Fixes
+
+- [#9163](https://github.com/gradio-app/gradio/pull/9163) [`2b6cbf2`](https://github.com/gradio-app/gradio/commit/2b6cbf25908e42cf027324e54ef2cc0baad11a91) - fix exports and generate types.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/utils@0.6.1
+- @gradio/statustracker@0.7.6
+- @gradio/atoms@0.8.1
+- @gradio/icons@0.7.2
+- @gradio/wasm@0.13.1
+- @gradio/upload@0.12.4
+
 ## 0.9.0
 
 ### Features

package/Index.svelte

@@ -29,7 +29,6 @@
 	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;
@@ -40,7 +39,7 @@
 
 	export let interactive: boolean;
 
-	let dark_mode = target.classList.contains("dark");
+	let dark_mode = gradio.theme === "dark";
 
 	function handle_change(): void {
 		gradio.dispatch("change", value);
@@ -52,9 +51,13 @@
 		value_is_output = false;
 	});
 	$: value, handle_change();
+
+	const is_browser = typeof window !== "undefined";
+	const default_lines = interactive ? lines : 10.35;
 </script>
 
 <Block
+	height={is_browser ? undefined : default_lines * 25 + 4}
 	variant={"solid"}
 	padding={false}
 	{elem_id}

package/dist/Example.svelte

@@ -0,0 +1,18 @@
+<script>export let value;
+export let type;
+export let selected = false;
+</script>
+
+<pre
+	class:table={type === "table"}
+	class:gallery={type === "gallery"}
+	class:selected>{value ? value : ""}</pre>
+
+<style>
+	pre {
+		text-align: left;
+	}
+	.gallery {
+		padding: var(--size-1) var(--size-2);
+	}
+</style>

package/dist/Example.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        value: string | null;
+        type: "gallery" | "table";
+        selected?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ExampleProps = typeof __propDef.props;
+export type ExampleEvents = typeof __propDef.events;
+export type ExampleSlots = typeof __propDef.slots;
+export default class Example extends SvelteComponent<ExampleProps, ExampleEvents, ExampleSlots> {
+}
+export {};

package/dist/Index.svelte

@@ -0,0 +1,78 @@
+<script context="module">export { default as BaseCode } from "./shared/Code.svelte";
+export { default as BaseCopy } from "./shared/Copy.svelte";
+export { default as BaseDownload } from "./shared/Download.svelte";
+export { default as BaseWidget } from "./shared/Widgets.svelte";
+export { default as BaseExample } from "./Example.svelte";
+</script>
+
+<script>import { afterUpdate } from "svelte";
+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";
+export let gradio;
+export let value = "";
+export let value_is_output = false;
+export let language = "";
+export let lines = 5;
+export let elem_id = "";
+export let elem_classes = [];
+export let visible = true;
+export let label = gradio.i18n("code.code");
+export let show_label = true;
+export let loading_status;
+export let scale = null;
+export let interactive;
+let dark_mode = gradio.theme === "dark";
+function handle_change() {
+  gradio.dispatch("change", value);
+  if (!value_is_output) {
+    gradio.dispatch("input");
+  }
+}
+afterUpdate(() => {
+  value_is_output = false;
+});
+$:
+  value, handle_change();
+const is_browser = typeof window !== "undefined";
+const default_lines = interactive ? lines : 10.35;
+</script>
+
+<Block
+	height={is_browser ? undefined : default_lines * 25 + 4}
+	variant={"solid"}
+	padding={false}
+	{elem_id}
+	{elem_classes}
+	{visible}
+	{scale}
+>
+	<StatusTracker
+		autoscroll={gradio.autoscroll}
+		i18n={gradio.i18n}
+		{...loading_status}
+		on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
+	/>
+
+	<BlockLabel Icon={CodeIcon} {show_label} {label} float={false} />
+
+	{#if !value && !interactive}
+		<Empty unpadded_box={true} size="large">
+			<CodeIcon />
+		</Empty>
+	{:else}
+		<Widget {language} {value} />
+
+		<Code
+			bind:value
+			{language}
+			{lines}
+			{dark_mode}
+			readonly={!interactive}
+			on:blur={() => gradio.dispatch("blur")}
+			on:focus={() => gradio.dispatch("focus")}
+		/>
+	{/if}
+</Block>

package/dist/Index.svelte.d.ts

@@ -0,0 +1,40 @@
+import { SvelteComponent } from "svelte";
+export { default as BaseCode } from "./shared/Code.svelte";
+export { default as BaseCopy } from "./shared/Copy.svelte";
+export { default as BaseDownload } from "./shared/Download.svelte";
+export { default as BaseWidget } from "./shared/Widgets.svelte";
+export { default as BaseExample } from "./Example.svelte";
+import type { Gradio } from "@gradio/utils";
+import type { LoadingStatus } from "@gradio/statustracker";
+declare const __propDef: {
+    props: {
+        gradio: Gradio<{
+            change: string;
+            input: never;
+            blur: never;
+            focus: never;
+            clear_status: LoadingStatus;
+        }>;
+        value?: string | undefined;
+        value_is_output?: boolean | undefined;
+        language?: string | undefined;
+        lines?: number | undefined;
+        elem_id?: string | undefined;
+        elem_classes?: string[] | undefined;
+        visible?: boolean | undefined;
+        label?: any;
+        show_label?: boolean | undefined;
+        loading_status: LoadingStatus;
+        scale?: (number | null) | undefined;
+        interactive: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type IndexProps = typeof __propDef.props;
+export type IndexEvents = typeof __propDef.events;
+export type IndexSlots = typeof __propDef.slots;
+export default class Index extends SvelteComponent<IndexProps, IndexEvents, IndexSlots> {
+}

package/dist/shared/Code.svelte

@@ -0,0 +1,227 @@
+<script>import { createEventDispatcher, onMount } from "svelte";
+import {
+  EditorView,
+  ViewUpdate,
+  keymap,
+  placeholder as placeholderExt
+} from "@codemirror/view";
+import { StateEffect, EditorState } from "@codemirror/state";
+import { indentWithTab } from "@codemirror/commands";
+import { basicDark } from "cm6-theme-basic-dark";
+import { basicLight } from "cm6-theme-basic-light";
+import { basicSetup } from "./extensions";
+import { getLanguageExtension } from "./language";
+export let class_names = "";
+export let value = "";
+export let dark_mode;
+export let basic = true;
+export let language;
+export let lines = 5;
+export let extensions = [];
+export let use_tab = true;
+export let readonly = false;
+export let placeholder = void 0;
+const dispatch = createEventDispatcher();
+let lang_extension;
+let element;
+let view;
+$:
+  get_lang(language);
+async function get_lang(val) {
+  const ext = await getLanguageExtension(val);
+  lang_extension = ext;
+}
+$:
+  reconfigure(), lang_extension, readonly;
+$:
+  set_doc(value);
+$:
+  update_lines();
+function set_doc(new_doc) {
+  if (view && new_doc !== view.state.doc.toString()) {
+    view.dispatch({
+      changes: {
+        from: 0,
+        to: view.state.doc.length,
+        insert: new_doc
+      }
+    });
+  }
+}
+function update_lines() {
+  if (view) {
+    view.requestMeasure({ read: update_gutters });
+  }
+}
+function create_editor_view() {
+  const editorView = new EditorView({
+    parent: element,
+    state: create_editor_state(value)
+  });
+  editorView.dom.addEventListener("focus", handle_focus, true);
+  editorView.dom.addEventListener("blur", handle_blur, true);
+  return editorView;
+}
+function handle_focus() {
+  dispatch("focus");
+}
+function handle_blur() {
+  dispatch("blur");
+}
+function getGutterLineHeight(_view) {
+  let elements = _view.dom.querySelectorAll(".cm-gutterElement");
+  if (elements.length === 0) {
+    return null;
+  }
+  for (var i = 0; i < elements.length; i++) {
+    let node = elements[i];
+    let height = getComputedStyle(node)?.height ?? "0px";
+    if (height != "0px") {
+      return height;
+    }
+  }
+  return null;
+}
+function update_gutters(_view) {
+  let gutters = _view.dom.querySelectorAll(".cm-gutter");
+  let _lines = lines + 1;
+  let lineHeight = getGutterLineHeight(_view);
+  if (!lineHeight) {
+    return null;
+  }
+  for (var i = 0; i < gutters.length; i++) {
+    let node = gutters[i];
+    node.style.minHeight = `calc(${lineHeight} * ${_lines})`;
+  }
+  return null;
+}
+function handle_change(vu) {
+  if (vu.docChanged) {
+    const doc = vu.state.doc;
+    const text = doc.toString();
+    value = text;
+    dispatch("change", text);
+  }
+  view.requestMeasure({ read: update_gutters });
+}
+function get_extensions() {
+  const stateExtensions = [
+    ...get_base_extensions(
+      basic,
+      use_tab,
+      placeholder,
+      readonly,
+      lang_extension
+    ),
+    FontTheme,
+    ...get_theme(),
+    ...extensions
+  ];
+  return stateExtensions;
+}
+const FontTheme = EditorView.theme({
+  "&": {
+    fontSize: "var(--text-sm)",
+    backgroundColor: "var(--border-color-secondary)"
+  },
+  ".cm-content": {
+    paddingTop: "5px",
+    paddingBottom: "5px",
+    color: "var(--body-text-color)",
+    fontFamily: "var(--font-mono)",
+    minHeight: "100%"
+  },
+  ".cm-gutters": {
+    marginRight: "1px",
+    borderRight: "1px solid var(--border-color-primary)",
+    backgroundColor: "var(--block-background-fill);",
+    color: "var(--body-text-color-subdued)"
+  },
+  ".cm-focused": {
+    outline: "none"
+  },
+  ".cm-scroller": {
+    height: "auto"
+  },
+  ".cm-cursor": {
+    borderLeftColor: "var(--body-text-color)"
+  }
+});
+function create_editor_state(_value) {
+  return EditorState.create({
+    doc: _value ?? void 0,
+    extensions: get_extensions()
+  });
+}
+function get_base_extensions(basic2, use_tab2, placeholder2, readonly2, lang) {
+  const extensions2 = [
+    EditorView.editable.of(!readonly2),
+    EditorState.readOnly.of(readonly2),
+    EditorView.contentAttributes.of({ "aria-label": "Code input container" })
+  ];
+  if (basic2) {
+    extensions2.push(basicSetup);
+  }
+  if (use_tab2) {
+    extensions2.push(keymap.of([indentWithTab]));
+  }
+  if (placeholder2) {
+    extensions2.push(placeholderExt(placeholder2));
+  }
+  if (lang) {
+    extensions2.push(lang);
+  }
+  extensions2.push(EditorView.updateListener.of(handle_change));
+  return extensions2;
+}
+function get_theme() {
+  const extensions2 = [];
+  if (dark_mode) {
+    extensions2.push(basicDark);
+  } else {
+    extensions2.push(basicLight);
+  }
+  return extensions2;
+}
+function reconfigure() {
+  view?.dispatch({
+    effects: StateEffect.reconfigure.of(get_extensions())
+  });
+}
+onMount(() => {
+  view = create_editor_view();
+  return () => view?.destroy();
+});
+</script>
+
+<div class="wrap">
+	<div class="codemirror-wrapper {class_names}" bind:this={element} />
+</div>
+
+<style>
+	.wrap {
+		display: flex;
+		flex-direction: column;
+		flex-flow: column;
+		margin: 0;
+		padding: 0;
+		height: 100%;
+	}
+	.codemirror-wrapper {
+		height: 100%;
+		overflow: auto;
+	}
+
+	:global(.cm-editor) {
+		height: 100%;
+	}
+
+	/* Dunno why this doesn't work through the theme API -- don't remove*/
+	:global(.cm-selectionBackground) {
+		background-color: #b9d2ff30 !important;
+	}
+
+	:global(.cm-focused) {
+		outline: none !important;
+	}
+</style>

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

@@ -0,0 +1,30 @@
+import { SvelteComponent } from "svelte";
+import { type Extension } from "@codemirror/state";
+declare const __propDef: {
+    props: {
+        class_names?: string | undefined;
+        value?: string | undefined;
+        dark_mode: boolean;
+        basic?: boolean | undefined;
+        language: string;
+        lines?: number | undefined;
+        extensions?: Extension[] | undefined;
+        use_tab?: boolean | undefined;
+        readonly?: boolean | undefined;
+        placeholder?: string | HTMLElement | null | undefined;
+    };
+    events: {
+        change: CustomEvent<string>;
+        blur: CustomEvent<undefined>;
+        focus: CustomEvent<undefined>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CodeProps = typeof __propDef.props;
+export type CodeEvents = typeof __propDef.events;
+export type CodeSlots = typeof __propDef.slots;
+export default class Code extends SvelteComponent<CodeProps, CodeEvents, CodeSlots> {
+}
+export {};

package/dist/shared/Copy.svelte

@@ -0,0 +1,59 @@
+<script>import { onDestroy } from "svelte";
+import { fade } from "svelte/transition";
+import { Copy, Check } from "@gradio/icons";
+let copied = false;
+export let value;
+let timer;
+function copy_feedback() {
+  copied = true;
+  if (timer)
+    clearTimeout(timer);
+  timer = setTimeout(() => {
+    copied = false;
+  }, 2e3);
+}
+async function handle_copy() {
+  if ("clipboard" in navigator) {
+    await navigator.clipboard.writeText(value);
+    copy_feedback();
+  }
+}
+onDestroy(() => {
+  if (timer)
+    clearTimeout(timer);
+});
+</script>
+
+<button
+	on:click={handle_copy}
+	title="Copy message"
+	class:copied
+	aria-label={copied ? "Message copied" : "Copy Message"}
+>
+	{#if !copied}
+		<Copy />
+	{:else}
+		<span class="check">
+			<Check />
+		</span>
+	{/if}
+</button>
+
+<style>
+	button {
+		position: relative;
+		cursor: pointer;
+		padding: 5px;
+		width: 22px;
+		height: 22px;
+	}
+
+	.check {
+		top: 0;
+		right: 0;
+		z-index: var(--layer-top);
+		background: var(--block-label-background-fill);
+		width: 100%;
+		height: 100%;
+	}
+</style>

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

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        value: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CopyProps = typeof __propDef.props;
+export type CopyEvents = typeof __propDef.events;
+export type CopySlots = typeof __propDef.slots;
+export default class Copy extends SvelteComponent<CopyProps, CopyEvents, CopySlots> {
+}
+export {};

package/dist/shared/Download.svelte

@@ -0,0 +1,85 @@
+<script>import { onDestroy } from "svelte";
+import { fade } from "svelte/transition";
+import { Download, Check } from "@gradio/icons";
+import { DownloadLink } from "@gradio/wasm/svelte";
+export let value;
+export let language;
+$:
+  ext = get_ext_for_type(language);
+function get_ext_for_type(type) {
+  const exts = {
+    py: "py",
+    python: "py",
+    md: "md",
+    markdown: "md",
+    json: "json",
+    html: "html",
+    css: "css",
+    js: "js",
+    javascript: "js",
+    ts: "ts",
+    typescript: "ts",
+    yaml: "yaml",
+    yml: "yml",
+    dockerfile: "dockerfile",
+    sh: "sh",
+    shell: "sh",
+    r: "r",
+    c: "c",
+    cpp: "cpp"
+  };
+  return exts[type] || "txt";
+}
+let copied = false;
+let timer;
+function copy_feedback() {
+  copied = true;
+  if (timer)
+    clearTimeout(timer);
+  timer = setTimeout(() => {
+    copied = false;
+  }, 2e3);
+}
+$:
+  download_value = URL.createObjectURL(new Blob([value]));
+onDestroy(() => {
+  if (timer)
+    clearTimeout(timer);
+});
+</script>
+
+<div class="container">
+	<DownloadLink
+		download="file.{ext}"
+		href={download_value}
+		on:click={copy_feedback}
+	>
+		<Download />
+		{#if copied}
+			<span class="check" transition:fade><Check /></span>
+		{/if}
+	</DownloadLink>
+</div>
+
+<style>
+	.container {
+		position: relative;
+		cursor: pointer;
+		padding: 5px;
+
+		width: 22px;
+		height: 22px;
+	}
+
+	.check {
+		position: absolute;
+		top: 0;
+		right: 0;
+		z-index: var(--layer-top);
+		background: var(--background-fill-primary);
+		padding: var(--size-1);
+		width: 100%;
+		height: 100%;
+		color: var(--body-text-color);
+	}
+</style>

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

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        value: string;
+        language: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DownloadProps = typeof __propDef.props;
+export type DownloadEvents = typeof __propDef.events;
+export type DownloadSlots = typeof __propDef.slots;
+export default class Download extends SvelteComponent<DownloadProps, DownloadEvents, DownloadSlots> {
+}
+export {};

package/dist/shared/Widgets.svelte

@@ -0,0 +1,33 @@
+<script>import Copy from "./Copy.svelte";
+import Download from "./Download.svelte";
+export let value;
+export let language;
+</script>
+
+<div>
+	<Download {value} {language} />
+	<Copy {value} />
+</div>
+
+<style>
+	div {
+		display: flex;
+		position: absolute;
+		top: var(--block-label-margin);
+		right: var(--block-label-margin);
+		align-items: center;
+
+		z-index: var(--layer-2);
+		transition: 150ms;
+		box-shadow: var(--shadow-drop);
+		border: 1px solid var(--border-color-primary);
+		border-top: none;
+		border-right: none;
+		border-radius: var(--block-label-right-radius);
+		background: var(--block-label-background-fill);
+		overflow: hidden;
+		color: var(--block-label-text-color);
+		font: var(--font);
+		font-size: var(--button-small-text-size);
+	}
+</style>

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

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        value: string;
+        language: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type WidgetsProps = typeof __propDef.props;
+export type WidgetsEvents = typeof __propDef.events;
+export type WidgetsSlots = typeof __propDef.slots;
+export default class Widgets extends SvelteComponent<WidgetsProps, WidgetsEvents, WidgetsSlots> {
+}
+export {};

package/dist/shared/extensions.d.ts

@@ -0,0 +1,3 @@
+import type { Extension } from "@codemirror/state";
+export { EditorView } from "@codemirror/view";
+export declare const basicSetup: Extension;

package/dist/shared/extensions.js

@@ -0,0 +1,28 @@
+import { lineNumbers, highlightSpecialChars, drawSelection, rectangularSelection, crosshairCursor, keymap } from "@codemirror/view";
+export { EditorView } from "@codemirror/view";
+import { EditorState } from "@codemirror/state";
+import { foldGutter, indentOnInput, syntaxHighlighting, defaultHighlightStyle, foldKeymap } from "@codemirror/language";
+import { history, defaultKeymap, historyKeymap } from "@codemirror/commands";
+import { closeBrackets, closeBracketsKeymap, completionKeymap } from "@codemirror/autocomplete";
+import { lintKeymap } from "@codemirror/lint";
+export const basicSetup = /*@__PURE__*/ (() => [
+    lineNumbers(),
+    highlightSpecialChars(),
+    history(),
+    foldGutter(),
+    drawSelection(),
+    EditorState.allowMultipleSelections.of(true),
+    indentOnInput(),
+    syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+    closeBrackets(),
+    rectangularSelection(),
+    crosshairCursor(),
+    keymap.of([
+        ...closeBracketsKeymap,
+        ...defaultKeymap,
+        ...historyKeymap,
+        ...foldKeymap,
+        ...completionKeymap,
+        ...lintKeymap
+    ])
+])();

package/dist/shared/frontmatter.d.ts

@@ -0,0 +1,2 @@
+import type { MarkdownExtension } from "@lezer/markdown";
+export declare const frontmatter: MarkdownExtension;

package/dist/shared/frontmatter.js

@@ -0,0 +1,53 @@
+import { parseMixed } from "@lezer/common";
+import { yaml } from "@codemirror/legacy-modes/mode/yaml";
+import { foldInside, foldNodeProp, StreamLanguage } from "@codemirror/language";
+import { styleTags, tags } from "@lezer/highlight";
+const frontMatterFence = /^---\s*$/m;
+export const frontmatter = {
+    defineNodes: [{ name: "Frontmatter", block: true }, "FrontmatterMark"],
+    props: [
+        styleTags({
+            Frontmatter: [tags.documentMeta, tags.monospace],
+            FrontmatterMark: tags.processingInstruction
+        }),
+        foldNodeProp.add({
+            Frontmatter: foldInside,
+            FrontmatterMark: () => null
+        })
+    ],
+    wrap: parseMixed((node) => {
+        const { parser } = StreamLanguage.define(yaml);
+        if (node.type.name === "Frontmatter") {
+            return {
+                parser,
+                overlay: [{ from: node.from + 4, to: node.to - 4 }]
+            };
+        }
+        return null;
+    }),
+    parseBlock: [
+        {
+            name: "Frontmatter",
+            before: "HorizontalRule",
+            parse: (cx, line) => {
+                let end = undefined;
+                const children = new Array();
+                if (cx.lineStart === 0 && frontMatterFence.test(line.text)) {
+                    children.push(cx.elt("FrontmatterMark", 0, 4));
+                    while (cx.nextLine()) {
+                        if (frontMatterFence.test(line.text)) {
+                            end = cx.lineStart + 4;
+                            break;
+                        }
+                    }
+                    if (end !== undefined) {
+                        children.push(cx.elt("FrontmatterMark", end - 4, end));
+                        cx.addElement(cx.elt("Frontmatter", 0, end, children));
+                    }
+                    return true;
+                }
+                return false;
+            }
+        }
+    ]
+};

package/dist/shared/language.d.ts

@@ -0,0 +1,2 @@
+import type { Extension } from "@codemirror/state";
+export declare function getLanguageExtension(lang: string): Promise<Extension | undefined>;

package/dist/shared/language.js

@@ -0,0 +1,74 @@
+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",
+    "typescript",
+    "yaml",
+    "dockerfile",
+    "shell",
+    "r",
+    "sql"
+];
+const sql_dialects = [
+    "standardSQL",
+    "msSQL",
+    "mySQL",
+    "mariaDB",
+    "sqlite",
+    "cassandra",
+    "plSQL",
+    "hive",
+    "pgSQL",
+    "gql",
+    "gpSQL",
+    "sparkSQL",
+    "esper"
+];
+const lang_map = {
+    python: () => import("@codemirror/lang-python").then((m) => m.python()),
+    c: () => import("@codemirror/legacy-modes/mode/clike").then((m) => StreamLanguage.define(m.c)),
+    cpp: () => import("@codemirror/legacy-modes/mode/clike").then((m) => StreamLanguage.define(m.cpp)),
+    markdown: async () => {
+        const [md, frontmatter] = await Promise.all([
+            import("@codemirror/lang-markdown"),
+            import("./frontmatter")
+        ]);
+        return md.markdown({ extensions: [frontmatter.frontmatter] });
+    },
+    json: () => import("@codemirror/lang-json").then((m) => m.json()),
+    html: () => import("@codemirror/lang-html").then((m) => m.html()),
+    css: () => import("@codemirror/lang-css").then((m) => m.css()),
+    javascript: () => import("@codemirror/lang-javascript").then((m) => m.javascript()),
+    typescript: () => import("@codemirror/lang-javascript").then((m) => m.javascript({ typescript: true })),
+    yaml: () => import("@codemirror/legacy-modes/mode/yaml").then((m) => StreamLanguage.define(m.yaml)),
+    dockerfile: () => import("@codemirror/legacy-modes/mode/dockerfile").then((m) => StreamLanguage.define(m.dockerFile)),
+    shell: () => import("@codemirror/legacy-modes/mode/shell").then((m) => StreamLanguage.define(m.shell)),
+    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]))
+    ]))
+};
+const alias_map = {
+    py: "python",
+    md: "markdown",
+    js: "javascript",
+    ts: "typescript",
+    sh: "shell"
+};
+export async function getLanguageExtension(lang) {
+    const _lang = lang_map[lang] || lang_map[alias_map[lang]] || undefined;
+    if (_lang) {
+        return _lang();
+    }
+    return undefined;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/code",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -27,22 +27,33 @@
     "cm6-theme-basic-dark": "^0.2.0",
     "cm6-theme-basic-light": "^0.2.0",
     "codemirror": "^6.0.1",
-    "@gradio/atoms": "^0.8.0",
-    "@gradio/icons": "^0.7.1",
-    "@gradio/statustracker": "^0.7.5",
-    "@gradio/upload": "^0.12.3",
-    "@gradio/wasm": "^0.13.0",
-    "@gradio/utils": "^0.6.0"
+    "@gradio/atoms": "^0.8.1",
+    "@gradio/icons": "^0.7.2",
+    "@gradio/statustracker": "^0.7.6",
+    "@gradio/upload": "^0.12.4",
+    "@gradio/utils": "^0.6.1",
+    "@gradio/wasm": "^0.13.1"
   },
   "main_changeset": true,
   "main": "./Index.svelte",
   "exports": {
-    ".": "./Index.svelte",
-    "./example": "./Example.svelte",
+    ".": {
+      "gradio": "./Index.svelte",
+      "svelte": "./dist/Index.svelte",
+      "types": "./dist/Index.svelte.d.ts"
+    },
+    "./example": {
+      "gradio": "./Example.svelte",
+      "svelte": "./dist/Example.svelte",
+      "types": "./dist/Example.svelte.d.ts"
+    },
     "./package.json": "./package.json"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.11.0"
+    "@gradio/preview": "^0.11.1"
+  },
+  "peerDependencies": {
+    "svelte": "^4.0.0"
   },
   "repository": {
     "type": "git",