add typescript (#521)

2025-02-17 11:29:58 +08:00 · 2022-02-02 14:02:09 +00:00 · 2022-02-02 14:02:09 +00:00 · dd94a47f59
commit dd94a47f59
parent e3c613af68
8 changed files with 221 additions and 22 deletions
--- a/ui/.editorconfig
+++ b/ui/.editorconfig
@ -0,0 +1,7 @@
+
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+indent_style = tab
--- a/ui/.prettierrc.json
+++ b/ui/.prettierrc.json
@ -2,5 +2,5 @@
 	"useTabs": true,
 	"singleQuote": false,
 	"trailingComma": "none",
-	"printWidth": 100
+	"printWidth": 80
 }
--- a/ui/package.json
+++ b/ui/package.json
@ -6,7 +6,8 @@
 		"dev": "pnpm dev --filter @gradio/app",
 		"build": "pnpm build --filter @gradio/app",
 		"format:check": "prettier --check --plugin-search-dir=. .",
-		"format:write": "prettier --write --plugin-search-dir=. ."
+		"format:write": "prettier --write --plugin-search-dir=. .",
+		"check": "svelte-check --tsconfig tsconfig.json"
 	},
 	"author": "",
 	"license": "ISC",
@ -14,6 +15,7 @@
 	"dependencies": {
 		"prettier": "^2.5.1",
 		"prettier-plugin-svelte": "^2.6.0",
-		"svelte": "^3.46.3"
+		"svelte": "^3.46.3",
+		"svelte-check": "^2.4.1"
 	}
 }
--- a/ui/packages/app/src/components/input/Checkbox/Component.svelte
+++ b/ui/packages/app/src/components/input/Checkbox/Component.svelte
@ -1,9 +1,18 @@
-<script>
-	export let value, setValue, theme;
+<script lang="ts">
+	export let value: boolean;
+	export let setValue: (val: typeof value) => typeof value;
+	export let theme: string;
 </script>

-<div class="input-checkbox inline-block" {theme} on:click={() => setValue(!value)}>
-	<button class="checkbox-item py-2 px-3 rounded cursor-pointer" class:selected={value}>
+<div
+	class="input-checkbox inline-block"
+	{theme}
+	on:click={() => setValue(!value)}
+>
+	<button
+		class="checkbox-item py-2 px-3 rounded cursor-pointer"
+		class:selected={value}
+	>
 		<div class="checkbox w-4 h-4 bg-white flex items-center justify-center">
 			<svg class="check opacity-0 h-3 w-4" viewBox="-10 -10 20 20">
 				<line
--- a/ui/packages/app/src/components/utils/Chart.svelte
+++ b/ui/packages/app/src/components/utils/Chart.svelte
@ -4,7 +4,7 @@
 	import { line as _line, curveLinear } from "d3-shape";
 	import { createEventDispatcher, onMount } from "svelte";

-	import { get_domains, transform_values, get_color } from "./utils.js";
+	import { get_domains, transform_values, get_color } from "./utils";
 	import { tooltip } from "./tooltip.js";

 	export let value;
@ -16,7 +16,9 @@
 	const dispatch = createEventDispatcher();

 	$: ({ x, y } =
-		type === "csv" ? transform_values(csvParse(value), x, y) : transform_values(value, x, y));
+		type === "csv"
+			? transform_values(csvParse(value), x, y)
+			: transform_values(value, x, y));

 	$: x_domain = get_domains(x);
 	$: y_domain = get_domains(y);
@ -26,7 +28,10 @@
 	$: x_ticks = scale_x.ticks(8);
 	$: y_ticks = scale_y.ticks(y_domain[1] < 10 ? y_domain[1] : 8);

-	$: colors = y.reduce((acc, next) => ({ ...acc, [next.name]: get_color() }), {});
+	$: colors = y.reduce(
+		(acc, next) => ({ ...acc, [next.name]: get_color() }),
+		{}
+	);

 	onMount(() => {
 		dispatch("process", { x, y });
@ -37,7 +42,10 @@
 	<div class="flex justify-center align-items-center text-sm">
 		{#each y as { name }}
 			<div class="mx-2">
-				<span class="inline-block w-[10px] h-[10px]" style="background-color: {colors[name]}" />
+				<span
+					class="inline-block w-[10px] h-[10px]"
+					style="background-color: {colors[name]}"
+				/>
 				{name}
 			</div>
 		{/each}
@ -51,7 +59,9 @@
 					x2={scale_x(tick)}
 					y1={scale_y(y_ticks[0] < y_domain[0] ? y_ticks[0] : y_domain[0]) + 10}
 					y2={scale_y(
-						y_domain[1] > y_ticks[y_ticks.length - 1] ? y_domain[1] : y_ticks[y_ticks.length - 1]
+						y_domain[1] > y_ticks[y_ticks.length - 1]
+							? y_domain[1]
+							: y_ticks[y_ticks.length - 1]
 					)}
 					stroke="#aaa"
 				/>
@ -72,7 +82,9 @@
 					y2={scale_y(tick)}
 					x1={scale_x(x_ticks[0] < x_domain[0] ? x_ticks[0] : x_domain[0]) - 10}
 					x2={scale_x(
-						x_domain[1] > x_ticks[x_ticks.length - 1] ? x_domain[1] : x_ticks[x_ticks.length - 1]
+						x_domain[1] > x_ticks[x_ticks.length - 1]
+							? x_domain[1]
+							: x_ticks[x_ticks.length - 1]
 					)}
 					stroke="#aaa"
 				/>
@ -120,7 +132,9 @@
 				/>
 			{/each}
 			<path
-				d={_line().curve(curveLinear)(values.map(({ x, y }) => [scale_x(x), scale_y(y)]))}
+				d={_line().curve(curveLinear)(
+					values.map(({ x, y }) => [scale_x(x), scale_y(y)])
+				)}
 				fill="none"
 				stroke={color}
 				stroke-width="3"
--- a/ui/packages/app/src/components/utils/utils.ts
+++ b/ui/packages/app/src/components/utils/utils.ts
@ -1,7 +1,18 @@
-export function get_domains(values) {
-	let _vs;
+interface XYValue {
+	x: number;
+	y: number;
+}
+
+interface ObjectValue {
+	values: XYValue[];
+}
+
+export function get_domains(
+	values: ObjectValue[] | { values: number[] }
+): [number, number] {
+	let _vs: number[];
 	if (Array.isArray(values)) {
-		_vs = values.reduce((acc, { values }) => {
+		_vs = values.reduce<number[]>((acc, { values }) => {
 			return [...acc, ...values.map(({ x, y }) => y)];
 		}, []);
 	} else {
@ -10,8 +21,30 @@ export function get_domains(values) {
 	return [Math.min(..._vs), Math.max(..._vs)];
 }

-export function transform_values(values, x, y) {
-	const transformed_values = Object.entries(values[0]).reduce(
+interface Row {
+	name: string;
+	values: number[];
+}
+
+interface RowPoint {
+	name: string;
+	values: Array<{ x: number; y: number }>;
+}
+
+interface TransformedValues {
+	x: Row;
+	y: Array<RowPoint>;
+}
+
+export function transform_values(
+	values: Array<Record<string, string>>,
+	x?: string,
+	y?: string[]
+) {
+	console.log(values);
+	const transformed_values = Object.entries(
+		values[0]
+	).reduce<TransformedValues>(
 		(acc, next, i) => {
 			if ((!x && i === 0) || (x && next[0] === x)) {
 				acc.x.name = next[0];
@ -28,9 +61,12 @@ export function transform_values(values, x, y) {
 		for (let j = 0; j < _a.length; j++) {
 			let [name, x] = _a[j];
 			if (name === transformed_values.x.name) {
-				transformed_values.x.values.push(x);
+				transformed_values.x.values.push(parseInt(x, 10));
 			} else {
-				transformed_values.y[j - 1].values.push({ y: _a[j][1], x: _a[0][1] });
+				transformed_values.y[j - 1].values.push({
+					y: parseInt(_a[j][1], 10),
+					x: parseInt(_a[0][1], 10)
+				});
 			}
 		}
 	}
@ -39,7 +75,7 @@ export function transform_values(values, x, y) {
 }

 let c = 0;
-export function get_color() {
+export function get_color(): string {
 	let default_colors = [
 		[255, 99, 132],
 		[54, 162, 235],
--- a/ui/pnpm-lock.yaml
+++ b/ui/pnpm-lock.yaml
@ -7,10 +7,12 @@ importers:
      prettier: ^2.5.1
      prettier-plugin-svelte: ^2.6.0
      svelte: ^3.46.3
+      svelte-check: ^2.4.1
    dependencies:
      prettier: 2.5.1
      prettier-plugin-svelte: 2.6.0_prettier@2.5.1+svelte@3.46.3
      svelte: 3.46.3
+      svelte-check: 2.4.1_svelte@3.46.3

  packages/app:
    specifiers:
@ -1600,6 +1602,11 @@ packages:
    engines: {node: '>=6'}
    dev: false

+  /mri/1.2.0:
+    resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
+    engines: {node: '>=4'}
+    dev: false
+
  /ms/2.1.2:
    resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}

@ -2052,6 +2059,13 @@ packages:
    resolution: {integrity: sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q=}
    dev: false

+  /sade/1.8.1:
+    resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==}
+    engines: {node: '>=6'}
+    dependencies:
+      mri: 1.2.0
+    dev: false
+
  /safe-buffer/5.2.1:
    resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
    dev: false
@ -2142,6 +2156,11 @@ packages:
    engines: {node: '>=0.10.0'}
    dev: false

+  /source-map/0.7.3:
+    resolution: {integrity: sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==}
+    engines: {node: '>= 8'}
+    dev: false
+
  /sourcemap-codec/1.4.8:
    resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}

@ -2218,6 +2237,35 @@ packages:
    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
    engines: {node: '>= 0.4'}

+  /svelte-check/2.4.1_svelte@3.46.3:
+    resolution: {integrity: sha512-xhf3ShP5rnRwBokrgTBJ/0cO9QIc1DAVu1NWNRTfCDsDBNjGmkS3HgitgUadRuoMKj1+irZR/yHJ+Uqobnkbrw==}
+    hasBin: true
+    peerDependencies:
+      svelte: ^3.24.0
+    dependencies:
+      chokidar: 3.5.3
+      fast-glob: 3.2.11
+      import-fresh: 3.3.0
+      minimist: 1.2.5
+      picocolors: 1.0.0
+      sade: 1.8.1
+      source-map: 0.7.3
+      svelte: 3.46.3
+      svelte-preprocess: 4.10.2_svelte@3.46.3+typescript@4.5.5
+      typescript: 4.5.5
+    transitivePeerDependencies:
+      - '@babel/core'
+      - coffeescript
+      - less
+      - node-sass
+      - postcss
+      - postcss-load-config
+      - pug
+      - sass
+      - stylus
+      - sugarss
+    dev: false
+
  /svelte-hmr/0.14.9_svelte@3.46.3:
    resolution: {integrity: sha512-bKE9+4qb4sAnA+TKHiYurUl970rjA0XmlP9TEP7K/ncyWz3m81kA4HOgmlZK/7irGK7gzZlaPDI3cmf8fp/+tg==}
    peerDependencies:
@ -2277,6 +2325,57 @@ packages:
      svelte: 3.46.3
    dev: false

+  /svelte-preprocess/4.10.2_svelte@3.46.3+typescript@4.5.5:
+    resolution: {integrity: sha512-aPpkCreSo8EL/y8kJSa1trhiX0oyAtTjlNNM7BNjRAsMJ8Yy2LtqHt0zyd4pQPXt+D4PzbO3qTjjio3kwOxDlA==}
+    engines: {node: '>= 9.11.2'}
+    requiresBuild: true
+    peerDependencies:
+      '@babel/core': ^7.10.2
+      coffeescript: ^2.5.1
+      less: ^3.11.3 || ^4.0.0
+      node-sass: '*'
+      postcss: ^7 || ^8
+      postcss-load-config: ^2.1.0 || ^3.0.0
+      pug: ^3.0.0
+      sass: ^1.26.8
+      stylus: ^0.55.0
+      sugarss: ^2.0.0
+      svelte: ^3.23.0
+      typescript: ^4.5.2
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+      coffeescript:
+        optional: true
+      less:
+        optional: true
+      node-sass:
+        optional: true
+      postcss:
+        optional: true
+      postcss-load-config:
+        optional: true
+      pug:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      typescript:
+        optional: true
+    dependencies:
+      '@types/pug': 2.0.6
+      '@types/sass': 1.43.1
+      detect-indent: 6.1.0
+      magic-string: 0.25.7
+      sorcery: 0.10.0
+      strip-indent: 3.0.0
+      svelte: 3.46.3
+      typescript: 4.5.5
+    dev: false
+
  /svelte-range-slider-pips/2.0.2:
    resolution: {integrity: sha512-VTWHOdwDyWbndGZnI0PQJY9DO7hgQlNubtCcCL6Wlypv5dU4vEsc4A1sX9TWMuvebEe4332SgsQQHzOdZ+guhQ==}
    dev: false
@ -2389,6 +2488,12 @@ packages:
    dev: false
    optional: true

+  /typescript/4.5.5:
+    resolution: {integrity: sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==}
+    engines: {node: '>=4.2.0'}
+    hasBin: true
+    dev: false
+
  /universalify/2.0.0:
    resolution: {integrity: sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==}
    engines: {node: '>= 10.0.0'}
--- a/ui/tsconfig.json
+++ b/ui/tsconfig.json
@ -0,0 +1,26 @@
+{
+	"compilerOptions": {
+		"moduleResolution": "node",
+		"module": "es2020",
+		"lib": ["es2020", "DOM"],
+		"target": "es2020",
+		/**
+			svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
+			to enforce using \`import type\` instead of \`import\` for Types.
+			*/
+		"importsNotUsedAsValues": "error",
+		"isolatedModules": true,
+		"resolveJsonModule": true,
+    "strict": true,
+		"sourceMap": true,
+		"esModuleInterop": true,
+		"skipLibCheck": true,
+		"forceConsistentCasingInFileNames": true,
+		"baseUrl": ".",
+		"allowJs": true,
+		"checkJs": true,
+    "outDir": "dist"
+	},
+  "exclude": ["**/dist/**/*", "**/public/**/*", "**/*.config.js", "dist"],
+	"include": ["**/*.d.ts", "**/*.js", "**/*.ts", "**/*.svelte"],
+}