@gradio/code 0.15.1-dev.0 → 0.16.0-dev.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +24 -0
- package/Index.svelte +45 -59
- package/dist/Example.svelte +11 -9
- package/dist/Example.svelte.d.ts +20 -18
- package/dist/Index.svelte +63 -61
- package/dist/Index.svelte.d.ts +3 -42
- package/dist/shared/Code.svelte +281 -225
- package/dist/shared/Code.svelte.d.ts +36 -33
- package/dist/shared/Copy.svelte +27 -22
- package/dist/shared/Copy.svelte.d.ts +19 -16
- package/dist/shared/Download.svelte +54 -45
- package/dist/shared/Download.svelte.d.ts +20 -17
- package/dist/shared/Widgets.svelte +7 -5
- package/dist/shared/Widgets.svelte.d.ts +19 -17
- package/dist/types.d.ts +16 -0
- package/dist/types.js +1 -0
- package/package.json +22 -22
- package/shared/Code.svelte +22 -5
- package/types.ts +17 -0
|
@@ -1,18 +1,21 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
import { Copy } from "@gradio/icons";
|
|
2
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
3
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
4
|
+
$$bindings?: Bindings;
|
|
5
|
+
} & Exports;
|
|
6
|
+
(internal: unknown, props: Props & {
|
|
7
|
+
$$events?: Events;
|
|
8
|
+
$$slots?: Slots;
|
|
9
|
+
}): Exports & {
|
|
10
|
+
$set?: any;
|
|
11
|
+
$on?: any;
|
|
5
12
|
};
|
|
6
|
-
|
|
7
|
-
[evt: string]: CustomEvent<any>;
|
|
8
|
-
};
|
|
9
|
-
slots: {};
|
|
10
|
-
exports?: {} | undefined;
|
|
11
|
-
bindings?: string | undefined;
|
|
12
|
-
};
|
|
13
|
-
export type CopyProps = typeof __propDef.props;
|
|
14
|
-
export type CopyEvents = typeof __propDef.events;
|
|
15
|
-
export type CopySlots = typeof __propDef.slots;
|
|
16
|
-
export default class Copy extends SvelteComponent<CopyProps, CopyEvents, CopySlots> {
|
|
13
|
+
z_$$bindings?: Bindings;
|
|
17
14
|
}
|
|
18
|
-
|
|
15
|
+
declare const Copy: $$__sveltets_2_IsomorphicComponent<{
|
|
16
|
+
value: string;
|
|
17
|
+
}, {
|
|
18
|
+
[evt: string]: CustomEvent<any>;
|
|
19
|
+
}, {}, {}, string>;
|
|
20
|
+
type Copy = InstanceType<typeof Copy>;
|
|
21
|
+
export default Copy;
|
|
@@ -1,48 +1,57 @@
|
|
|
1
|
-
<script
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { onDestroy } from "svelte";
|
|
3
|
+
import { Download, Check } from "@gradio/icons";
|
|
4
|
+
import { DownloadLink } from "@gradio/atoms";
|
|
5
|
+
import { IconButton } from "@gradio/atoms";
|
|
6
|
+
|
|
7
|
+
export let value: string;
|
|
8
|
+
export let language: string;
|
|
9
|
+
|
|
10
|
+
$: ext = get_ext_for_type(language);
|
|
11
|
+
|
|
12
|
+
function get_ext_for_type(type: string): string {
|
|
13
|
+
const exts: Record<string, string> = {
|
|
14
|
+
py: "py",
|
|
15
|
+
python: "py",
|
|
16
|
+
md: "md",
|
|
17
|
+
markdown: "md",
|
|
18
|
+
json: "json",
|
|
19
|
+
html: "html",
|
|
20
|
+
css: "css",
|
|
21
|
+
js: "js",
|
|
22
|
+
javascript: "js",
|
|
23
|
+
ts: "ts",
|
|
24
|
+
typescript: "ts",
|
|
25
|
+
yaml: "yaml",
|
|
26
|
+
yml: "yml",
|
|
27
|
+
dockerfile: "dockerfile",
|
|
28
|
+
sh: "sh",
|
|
29
|
+
shell: "sh",
|
|
30
|
+
r: "r",
|
|
31
|
+
c: "c",
|
|
32
|
+
cpp: "cpp",
|
|
33
|
+
latex: "tex"
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
return exts[type] || "txt";
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
let copied = false;
|
|
40
|
+
let timer: NodeJS.Timeout;
|
|
41
|
+
|
|
42
|
+
function copy_feedback(): void {
|
|
43
|
+
copied = true;
|
|
44
|
+
if (timer) clearTimeout(timer);
|
|
45
|
+
timer = setTimeout(() => {
|
|
46
|
+
copied = false;
|
|
47
|
+
}, 2000);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
$: download_value = URL.createObjectURL(new Blob([value]));
|
|
51
|
+
|
|
52
|
+
onDestroy(() => {
|
|
53
|
+
if (timer) clearTimeout(timer);
|
|
54
|
+
});
|
|
46
55
|
</script>
|
|
47
56
|
|
|
48
57
|
<DownloadLink
|
|
@@ -1,19 +1,22 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
import { Download } from "@gradio/icons";
|
|
2
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
3
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
4
|
+
$$bindings?: Bindings;
|
|
5
|
+
} & Exports;
|
|
6
|
+
(internal: unknown, props: Props & {
|
|
7
|
+
$$events?: Events;
|
|
8
|
+
$$slots?: Slots;
|
|
9
|
+
}): Exports & {
|
|
10
|
+
$set?: any;
|
|
11
|
+
$on?: any;
|
|
6
12
|
};
|
|
7
|
-
|
|
8
|
-
[evt: string]: CustomEvent<any>;
|
|
9
|
-
};
|
|
10
|
-
slots: {};
|
|
11
|
-
exports?: {} | undefined;
|
|
12
|
-
bindings?: string | undefined;
|
|
13
|
-
};
|
|
14
|
-
export type DownloadProps = typeof __propDef.props;
|
|
15
|
-
export type DownloadEvents = typeof __propDef.events;
|
|
16
|
-
export type DownloadSlots = typeof __propDef.slots;
|
|
17
|
-
export default class Download extends SvelteComponent<DownloadProps, DownloadEvents, DownloadSlots> {
|
|
13
|
+
z_$$bindings?: Bindings;
|
|
18
14
|
}
|
|
19
|
-
|
|
15
|
+
declare const Download: $$__sveltets_2_IsomorphicComponent<{
|
|
16
|
+
value: string;
|
|
17
|
+
language: string;
|
|
18
|
+
}, {
|
|
19
|
+
[evt: string]: CustomEvent<any>;
|
|
20
|
+
}, {}, {}, string>;
|
|
21
|
+
type Download = InstanceType<typeof Download>;
|
|
22
|
+
export default Download;
|
|
@@ -1,8 +1,10 @@
|
|
|
1
|
-
<script
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import Copy from "./Copy.svelte";
|
|
3
|
+
import Download from "./Download.svelte";
|
|
4
|
+
import { IconButtonWrapper } from "@gradio/atoms";
|
|
5
|
+
|
|
6
|
+
export let value: string;
|
|
7
|
+
export let language: string;
|
|
6
8
|
</script>
|
|
7
9
|
|
|
8
10
|
<IconButtonWrapper>
|
|
@@ -1,19 +1,21 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
2
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
3
|
+
$$bindings?: Bindings;
|
|
4
|
+
} & Exports;
|
|
5
|
+
(internal: unknown, props: Props & {
|
|
6
|
+
$$events?: Events;
|
|
7
|
+
$$slots?: Slots;
|
|
8
|
+
}): Exports & {
|
|
9
|
+
$set?: any;
|
|
10
|
+
$on?: any;
|
|
6
11
|
};
|
|
7
|
-
|
|
8
|
-
[evt: string]: CustomEvent<any>;
|
|
9
|
-
};
|
|
10
|
-
slots: {};
|
|
11
|
-
exports?: {} | undefined;
|
|
12
|
-
bindings?: string | undefined;
|
|
13
|
-
};
|
|
14
|
-
export type WidgetsProps = typeof __propDef.props;
|
|
15
|
-
export type WidgetsEvents = typeof __propDef.events;
|
|
16
|
-
export type WidgetsSlots = typeof __propDef.slots;
|
|
17
|
-
export default class Widgets extends SvelteComponent<WidgetsProps, WidgetsEvents, WidgetsSlots> {
|
|
12
|
+
z_$$bindings?: Bindings;
|
|
18
13
|
}
|
|
19
|
-
|
|
14
|
+
declare const Widgets: $$__sveltets_2_IsomorphicComponent<{
|
|
15
|
+
value: string;
|
|
16
|
+
language: string;
|
|
17
|
+
}, {
|
|
18
|
+
[evt: string]: CustomEvent<any>;
|
|
19
|
+
}, {}, {}, string>;
|
|
20
|
+
type Widgets = InstanceType<typeof Widgets>;
|
|
21
|
+
export default Widgets;
|
package/dist/types.d.ts
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export interface CodeProps {
|
|
2
|
+
value: string;
|
|
3
|
+
language: string;
|
|
4
|
+
max_lines: number;
|
|
5
|
+
wrap_lines: boolean;
|
|
6
|
+
show_line_numbers: boolean;
|
|
7
|
+
autocomplete: boolean;
|
|
8
|
+
lines: number;
|
|
9
|
+
}
|
|
10
|
+
export interface CodeEvents {
|
|
11
|
+
change: any;
|
|
12
|
+
input: any;
|
|
13
|
+
focus: any;
|
|
14
|
+
blur: any;
|
|
15
|
+
clear_status: any;
|
|
16
|
+
}
|
package/dist/types.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,37 +1,37 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gradio/code",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.16.0-dev.3",
|
|
4
4
|
"description": "Gradio UI packages",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": "",
|
|
7
7
|
"license": "ISC",
|
|
8
8
|
"private": false,
|
|
9
9
|
"dependencies": {
|
|
10
|
-
"@codemirror/autocomplete": "^6.
|
|
11
|
-
"@codemirror/commands": "^6.
|
|
10
|
+
"@codemirror/autocomplete": "^6.19.0",
|
|
11
|
+
"@codemirror/commands": "^6.9.0",
|
|
12
12
|
"@codemirror/lang-css": "^6.3.1",
|
|
13
|
-
"@codemirror/lang-html": "^6.4.
|
|
14
|
-
"@codemirror/lang-javascript": "^6.2.
|
|
15
|
-
"@codemirror/lang-json": "^6.0.
|
|
16
|
-
"@codemirror/lang-markdown": "^6.
|
|
17
|
-
"@codemirror/lang-python": "^6.1
|
|
18
|
-
"@codemirror/language": "^6.
|
|
19
|
-
"@codemirror/legacy-modes": "^6.
|
|
20
|
-
"@codemirror/lint": "^6.
|
|
21
|
-
"@codemirror/search": "^6.5.
|
|
13
|
+
"@codemirror/lang-html": "^6.4.11",
|
|
14
|
+
"@codemirror/lang-javascript": "^6.2.4",
|
|
15
|
+
"@codemirror/lang-json": "^6.0.2",
|
|
16
|
+
"@codemirror/lang-markdown": "^6.4.0",
|
|
17
|
+
"@codemirror/lang-python": "^6.2.1",
|
|
18
|
+
"@codemirror/language": "^6.11.3",
|
|
19
|
+
"@codemirror/legacy-modes": "^6.5.2",
|
|
20
|
+
"@codemirror/lint": "^6.9.0",
|
|
21
|
+
"@codemirror/search": "^6.5.11",
|
|
22
22
|
"@codemirror/state": "^6.5.2",
|
|
23
|
-
"@codemirror/view": "^6.
|
|
23
|
+
"@codemirror/view": "^6.38.5",
|
|
24
24
|
"@lezer/common": "^1.2.3",
|
|
25
25
|
"@lezer/highlight": "^1.2.1",
|
|
26
|
-
"@lezer/markdown": "^1.4.
|
|
26
|
+
"@lezer/markdown": "^1.4.3",
|
|
27
27
|
"cm6-theme-basic-dark": "^0.2.0",
|
|
28
28
|
"cm6-theme-basic-light": "^0.2.0",
|
|
29
|
-
"codemirror": "^6.0.
|
|
30
|
-
"@gradio/atoms": "^0.
|
|
31
|
-
"@gradio/
|
|
32
|
-
"@gradio/upload": "^0.17.2-dev.
|
|
33
|
-
"@gradio/
|
|
34
|
-
"@gradio/utils": "^0.10.
|
|
29
|
+
"codemirror": "^6.0.2",
|
|
30
|
+
"@gradio/atoms": "^0.19.0-dev.1",
|
|
31
|
+
"@gradio/statustracker": "^0.12.0-dev.1",
|
|
32
|
+
"@gradio/upload": "^0.17.2-dev.2",
|
|
33
|
+
"@gradio/icons": "^0.15.0-dev.0",
|
|
34
|
+
"@gradio/utils": "^0.10.3-dev.0"
|
|
35
35
|
},
|
|
36
36
|
"main_changeset": true,
|
|
37
37
|
"main": "./Index.svelte",
|
|
@@ -51,10 +51,10 @@
|
|
|
51
51
|
"./package.json": "./package.json"
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
54
|
-
"@gradio/preview": "^0.
|
|
54
|
+
"@gradio/preview": "^0.15.0-dev.0"
|
|
55
55
|
},
|
|
56
56
|
"peerDependencies": {
|
|
57
|
-
"svelte": "^
|
|
57
|
+
"svelte": "^5.43.4"
|
|
58
58
|
},
|
|
59
59
|
"repository": {
|
|
60
60
|
"type": "git",
|
package/shared/Code.svelte
CHANGED
|
@@ -35,6 +35,7 @@
|
|
|
35
35
|
change: string;
|
|
36
36
|
blur: undefined;
|
|
37
37
|
focus: undefined;
|
|
38
|
+
input: undefined;
|
|
38
39
|
}>();
|
|
39
40
|
let lang_extension: Extension | undefined;
|
|
40
41
|
let element: HTMLDivElement;
|
|
@@ -47,7 +48,7 @@
|
|
|
47
48
|
lang_extension = ext;
|
|
48
49
|
}
|
|
49
50
|
|
|
50
|
-
$: reconfigure(), lang_extension, readonly;
|
|
51
|
+
$: (reconfigure(), lang_extension, readonly);
|
|
51
52
|
$: set_doc(value);
|
|
52
53
|
$: update_lines();
|
|
53
54
|
|
|
@@ -118,13 +119,29 @@
|
|
|
118
119
|
scroller.style.maxHeight = `calc(${lineHeight} * ${max_lines + 1})`;
|
|
119
120
|
}
|
|
120
121
|
|
|
122
|
+
import { Transaction } from "@codemirror/state";
|
|
123
|
+
|
|
124
|
+
function is_user_input(update: ViewUpdate): boolean {
|
|
125
|
+
return update.transactions.some(
|
|
126
|
+
(tr) => tr.annotation(Transaction.userEvent) != null
|
|
127
|
+
);
|
|
128
|
+
}
|
|
129
|
+
|
|
121
130
|
function handle_change(vu: ViewUpdate): void {
|
|
122
|
-
if (vu.docChanged)
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
131
|
+
if (!vu.docChanged) return;
|
|
132
|
+
|
|
133
|
+
const doc = vu.state.doc;
|
|
134
|
+
const text = doc.toString();
|
|
135
|
+
value = text;
|
|
136
|
+
|
|
137
|
+
const user_change = is_user_input(vu);
|
|
138
|
+
if (user_change) {
|
|
139
|
+
dispatch("change", text);
|
|
140
|
+
dispatch("input");
|
|
141
|
+
} else {
|
|
126
142
|
dispatch("change", text);
|
|
127
143
|
}
|
|
144
|
+
|
|
128
145
|
view.requestMeasure({ read: resize });
|
|
129
146
|
}
|
|
130
147
|
|
package/types.ts
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
export interface CodeProps {
|
|
2
|
+
value: string;
|
|
3
|
+
language: string;
|
|
4
|
+
max_lines: number;
|
|
5
|
+
wrap_lines: boolean;
|
|
6
|
+
show_line_numbers: boolean;
|
|
7
|
+
autocomplete: boolean;
|
|
8
|
+
lines: number;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
export interface CodeEvents {
|
|
12
|
+
change: any;
|
|
13
|
+
input: any;
|
|
14
|
+
focus: any;
|
|
15
|
+
blur: any;
|
|
16
|
+
clear_status: any;
|
|
17
|
+
}
|