set up component workbench

ui/package.json

@@ -3,6 +3,7 @@
 	"version": "0.0.1",
 	"description": "Gradio UI packages",
 	"scripts": {
+		"workbench": "pnpm dev --filter @gradio/workbench",
 		"dev": "pnpm dev --filter @gradio/app",
 		"build": "pnpm build --filter @gradio/app",
 		"format:check": "prettier --check --plugin-search-dir=. .",
@@ -15,11 +16,16 @@
 	"license": "ISC",
 	"private": true,
 	"dependencies": {
+		"autoprefixer": "^9.8.8",
+		"postcss": "^8.4.5",
+		"postcss-nested": "^5.0.6",
 		"prettier": "^2.5.1",
 		"prettier-plugin-svelte": "^2.6.0",
 		"svelte": "^3.46.3",
 		"svelte-check": "^2.4.1",
 		"svelte-i18n": "^3.3.13",
+		"svelte-preprocess": "^4.10.1",
+		"tailwindcss": "^3.0.23",
 		"vitest": "^0.3.2"
 	}
 }

ui/packages/app/package.json

@@ -9,11 +9,6 @@
 	},
 	"devDependencies": {
 		"@sveltejs/vite-plugin-svelte": "^1.0.0-next.36",
-		"mime-types": "^2.1.34",
-		"postcss": "^8.4.5",
-		"postcss-nested": "^5.0.6",
-		"svelte": "^3.46.3",
-		"tailwindcss": "^3.0.19",
 		"vite": "^2.7.13"
 	},
 	"dependencies": {
@@ -28,7 +23,7 @@
 		"lazy-brush": "^1.0.1",
 		"mime-types": "^2.1.34",
 		"resize-observer-polyfill": "^1.5.1",
-		"svelte-preprocess": "^4.10.1",
+		"svelte-i18n": "^3.3.13",
 		"svelte-range-slider-pips": "^2.0.1",
 		"tui-image-editor": "^3.15.2"
 	}

ui/packages/app/src/Blocks.svelte

@@ -30,6 +30,8 @@
 	export let theme: string;
 	export let static_src: string;
 
+	$: console.log(components, layout, dependencies);
+
 	let values: Record<string, unknown> = {};
 	let component_id_map: Record<string, Component> = {};
 	let event_listener_map: Record<string, Array<number>> = {};
@@ -56,13 +58,10 @@
 	const triggerTarget = (i: string) => {
 		event_listener_map[i].forEach((fn_index: number) => {
 			let dependency = dependencies[fn_index];
-			fn(
-				"predict",
-				{
-					"fn_index": fn_index,
-					"data": dependency.inputs.map((i) => values[i])
-				}
-			).then((output) => {
+			fn("predict", {
+				fn_index: fn_index,
+				data: dependency.inputs.map((i) => values[i])
+			}).then((output) => {
 				output["data"].forEach((value, i) => {
 					values[dependency.outputs[i]] = value;
 				});

ui/packages/audio/package.json

@@ -0,0 +1,10 @@
+{
+	"name": "~name~",
+	"version": "0.0.1",
+	"description": "Gradio UI packages",
+	"type": "module",
+	"main": "src/index.ts",
+	"author": "",
+	"license": "ISC",
+	"private": true
+}

ui/packages/audio/src/index.ts

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

ui/packages/components/package.json

@@ -1,8 +1,9 @@
 {
-	"name": "gradio-ui",
+	"name": "~name~",
 	"version": "0.0.1",
 	"description": "Gradio UI packages",
-	"scripts": {},
+	"type": "module",
+	"main": "src/index.ts",
 	"author": "",
 	"license": "ISC",
 	"private": true

ui/packages/workbench/.gitignore

@@ -0,0 +1,8 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example

ui/packages/workbench/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

ui/packages/workbench/README.md

@@ -0,0 +1,40 @@
+# create-svelte
+
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm init svelte@next
+
+# create a new project in my-app
+npm init svelte@next my-app
+```
+
+> Note: the `@next` is temporary
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

ui/packages/workbench/package.json

@@ -0,0 +1,25 @@
+{
+	"name": "@gradio/workbench",
+	"version": "0.0.1",
+	"scripts": {
+		"dev": "svelte-kit dev",
+		"build": "svelte-kit build",
+		"preview": "svelte-kit preview",
+		"check": "svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "next",
+		"@sveltejs/kit": "next",
+		"svelte": "^3.44.0",
+		"svelte-check": "^2.2.6",
+		"svelte-preprocess": "^4.10.1",
+		"tslib": "^2.3.1",
+		"typescript": "~4.5.4",
+		"postcss": "^8.4.5",
+		"postcss-load-config": "^3.1.1",
+		"autoprefixer": "^10.4.2",
+		"tailwindcss": "^3.0.12"
+	},
+	"type": "module"
+}

ui/packages/workbench/postcss.config.cjs

@@ -0,0 +1,13 @@
+const tailwindcss = require("tailwindcss");
+const autoprefixer = require("autoprefixer");
+
+const config = {
+	plugins: [
+		//Some plugins, like tailwindcss/nesting, need to run before Tailwind,
+		tailwindcss(),
+		//But others, like autoprefixer, need to run after,
+		autoprefixer
+	]
+};
+
+module.exports = config;

ui/packages/workbench/src/app.css

@@ -0,0 +1,7 @@
+/* Write your global styles here, in PostCSS syntax */
+@tailwind base;
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@tailwind components;
+@tailwind utilities;

ui/packages/workbench/src/app.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="@sveltejs/kit" />
+
+// See https://kit.svelte.dev/docs/typescript
+// for information about these interfaces
+declare namespace App {
+	interface Locals {}
+
+	interface Platform {}
+
+	interface Session {}
+
+	interface Stuff {}
+}

ui/packages/workbench/src/app.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="description" content="" />
+		<link rel="icon" href="%svelte.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%svelte.head%
+	</head>
+	<body>
+		<div>%svelte.body%</div>
+	</body>
+</html>

ui/packages/workbench/src/index.ts

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

ui/packages/workbench/src/routes/__layout.svelte

@@ -0,0 +1,5 @@
+<script>
+	import "../app.css";
+</script>
+
+<slot />

ui/packages/workbench/src/routes/index.svelte

@@ -0,0 +1 @@
+<h1 class="font-mono">workbench</h1>

ui/packages/workbench/svelte.config.js

@@ -0,0 +1,23 @@
+import adapter from "@sveltejs/adapter-auto";
+import svelte_preprocess from "svelte-preprocess";
+
+import tailwind from "tailwindcss";
+import nested from "postcss-nested";
+import autoprefix from "autoprefixer";
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://github.com/sveltejs/svelte-preprocess
+	// for more information about preprocessors
+	preprocess: [
+		svelte_preprocess({
+			postcss: true
+		})
+	],
+
+	kit: {
+		adapter: adapter()
+	}
+};
+
+export default config;

ui/packages/workbench/tailwind.config.cjs

@@ -0,0 +1,11 @@
+const config = {
+	content: ["./src/**/*.{html,js,svelte,ts}"],
+
+	theme: {
+		extend: {}
+	},
+
+	plugins: []
+};
+
+module.exports = config;

ui/packages/workbench/tsconfig.json

@@ -0,0 +1,36 @@
+{
+	"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",
+		/**
+			TypeScript doesn't know about import usages in the template because it only sees the
+			script of a Svelte file. Therefore preserve all value imports. Requires TS 4.5 or higher.
+		*/
+		"preserveValueImports": true,
+		"isolatedModules": true,
+		"resolveJsonModule": true,
+		/**
+			To have warnings/errors of the Svelte compiler at the correct position,
+			enable source maps by default.
+		*/
+		"sourceMap": true,
+		"esModuleInterop": true,
+		"skipLibCheck": true,
+		"forceConsistentCasingInFileNames": true,
+		"baseUrl": ".",
+		"allowJs": true,
+		"checkJs": true,
+		"paths": {
+			"$lib": ["src/lib"],
+			"$lib/*": ["src/lib/*"]
+		}
+	},
+	"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]
+}