Merge branch 'custom-components' into cc-fe

gradio/cli/commands/create.py

@@ -25,6 +25,9 @@
     "author": "",
     "license": "ISC",
     "private": True,
+    "dependencies": {
+        "@zerodevx/svelte-json-view": "^1.0",
+    },
     "exports": {
         ".": "./index.svelte",
         "./package.json": "./package.json",
@@ -39,7 +42,8 @@
 
 def _create_frontend_dir(name: str, dir: pathlib.Path):
     dir.mkdir(exist_ok=True)
-    (dir / f"{name}.svelte").write_text("")
+    svelte = pathlib.Path(pathlib.Path(__file__).parent / "files"/ "NoTemplateComponent.svelte").read_text()
+    (dir / f"{name}.svelte").write_text(svelte)
     (dir / "index.ts").write_text(f'export {{ default }} from "./{name}.svelte";')
 
 
@@ -137,17 +141,8 @@ def _create_backend(name: str, template: str, directory: pathlib.Path):
 
     if not template:
         backend = backend / f"{name.lower()}.py"
-        backend.write_text(
-            textwrap.dedent(
-                f"""
-            import gradio as gr
-            
-            class {name}(gr.components.Component):
-                pass
-
-            """
-            )
-        )
+        no_template = (pathlib.Path(__file__).parent / "files" / "NoTemplateComponent.py").read_text().replace("<<name>>", name)
+        backend.write_text(no_template)
     else:
         p = pathlib.Path(inspect.getfile(gradio)).parent
         python_file = backend / f"{name.lower()}.py"

gradio/cli/commands/files/NoTemplateComponent.py

@@ -0,0 +1,21 @@
+import gradio as gr
+
+class <<name>>(gr.components.Component):
+
+    def preprocess(self, x):
+        return x
+
+    def postprocess(self, x):
+        return x
+
+    def get_config(self):
+        return {
+            "value": self.value,
+            **gr.components.Component.get_config(self),
+        }
+
+    def example_inputs(self):
+        return {'foo': 'bar'}
+
+    def api_info(self):
+        return {'type': {}, 'description': 'any valid json'}

gradio/cli/commands/files/NoTemplateComponent.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+    import { JsonView } from '@zerodevx/svelte-json-view'
+  
+    export let value: any = {}
+</script>
+
+<JsonView json={value} />

pyproject.toml

@@ -70,7 +70,8 @@ replacement = 'https://raw.githubusercontent.com/gradio-app/gradio/main/demo/\g<
 artifacts = [
   "/gradio/templates",
   "/gradio/_frontend_code",
-  "*.pyi"
+  "*.pyi",
+  "/gradio/node"
 ]
 
 [tool.hatch.build.targets.wheel.hooks.custom]