@gradio/dataset 0.5.5 → 0.5.6

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.
Files changed (7) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/Dataset.svelte +23 -10
  3. package/MountExample.svelte +40 -0
  4. package/dist/Dataset.svelte +23 -10
  5. package/dist/MountExample.svelte +40 -0
  6. package/dist/MountExample.svelte.d.ts +10 -0
  7. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,16 @@
1
1
  # @gradio/dataset
2
2
 
3
+ ## 0.5.6
4
+
5
+ ### Fixes
6
+
7
+ - [#12566](https://github.com/gradio-app/gradio/pull/12566) [`7760161`](https://github.com/gradio-app/gradio/commit/7760161258abe6329b754dd6d2511fc3b61fed95) - Fix custom components in SSR Mode + Custom Component Examples. Thanks @freddyaboulton!
8
+
9
+ ### Dependency updates
10
+
11
+ - @gradio/utils@0.12.1
12
+ - @gradio/textbox@0.13.6
13
+
3
14
  ## 0.5.5
4
15
 
5
16
  ### Dependency updates
package/Dataset.svelte CHANGED
@@ -2,7 +2,11 @@
2
2
  import type { SvelteComponent, ComponentType } from "svelte";
3
3
  import type { SelectData } from "@gradio/utils";
4
4
  import { BaseExample } from "@gradio/textbox";
5
- import type { load_component as load_component_type } from "@gradio/utils";
5
+ import type {
6
+ load_component as load_component_type,
7
+ LoadingComponent
8
+ } from "@gradio/utils";
9
+ import MountExample from "./MountExample.svelte";
6
10
 
7
11
  interface Props {
8
12
  components: string[];
@@ -104,7 +108,8 @@
104
108
 
105
109
  let component_meta: {
106
110
  value: any;
107
- component: ComponentType<SvelteComponent>;
111
+ component: LoadingComponent;
112
+ runtime: false | typeof import("svelte");
108
113
  }[][] = [];
109
114
 
110
115
  async function get_component_meta(
@@ -119,9 +124,15 @@
119
124
  async (sample_row) =>
120
125
  await Promise.all(
121
126
  sample_row.map(async (sample_cell, j) => {
127
+ const loaded = load_component(
128
+ components[j].name,
129
+ "example",
130
+ components[j].class_id
131
+ );
122
132
  return {
123
133
  value: sample_cell,
124
- component: load_component(components[j], "example")
134
+ component: loaded.component,
135
+ runtime: loaded.runtime
125
136
  };
126
137
  })
127
138
  )
@@ -156,10 +167,11 @@
156
167
  type="gallery"
157
168
  />
158
169
  {:else if component_meta.length}
159
- {#await component_meta[0][0].component then component}
170
+ {#await Promise.all( [component_meta[0][0].component, component_meta[0][0].runtime] ) then [component, runtime]}
160
171
  {#key sample_row[0]}
161
- <svelte:component
162
- this={component.default}
172
+ <MountExample
173
+ {component}
174
+ {runtime}
163
175
  {...component_props[0]}
164
176
  value={sample_row[0]}
165
177
  {samples_dir}
@@ -202,7 +214,7 @@
202
214
  onmouseenter={() => handle_mouseenter(i)}
203
215
  onmouseleave={() => handle_mouseleave()}
204
216
  >
205
- {#each sample_row as { value, component }, j}
217
+ {#each sample_row as { value, component, runtime }, j}
206
218
  {@const component_name = components[j]}
207
219
 
208
220
  {#if component_name !== undefined}
@@ -212,9 +224,10 @@
212
224
  : 'auto'}"
213
225
  class={component_name}
214
226
  >
215
- {#await component then component}
216
- <svelte:component
217
- this={component.default}
227
+ {#await Promise.all( [component, runtime] ) then [component, runtime]}
228
+ <MountExample
229
+ {component}
230
+ {runtime}
218
231
  {...component_props[j]}
219
232
  {value}
220
233
  {samples_dir}
package/MountExample.svelte ADDED
@@ -0,0 +1,40 @@
1
+ <script lang="ts">
2
+ import { mount, unmount } from "svelte";
3
+
4
+ interface Props {
5
+ component: { default: any };
6
+ runtime: false | typeof import("svelte");
7
+ [key: string]: any;
8
+ }
9
+
10
+ let { component, runtime, ...rest }: Props = $props();
11
+ let el: HTMLElement = $state(null);
12
+
13
+ $effect(() => {
14
+ if (!el || !component) return;
15
+
16
+ const _component = component;
17
+ const _runtime = runtime;
18
+ const _rest = rest;
19
+
20
+ if (_runtime) {
21
+ const mounted = _runtime.mount(_component.default, {
22
+ target: el,
23
+ props: _rest
24
+ });
25
+ return () => {
26
+ _runtime.unmount(mounted);
27
+ };
28
+ } else {
29
+ const mounted = mount(_component.default, {
30
+ target: el,
31
+ props: _rest
32
+ });
33
+ return () => {
34
+ unmount(mounted);
35
+ };
36
+ }
37
+ });
38
+ </script>
39
+
40
+ <span bind:this={el}></span>
package/dist/Dataset.svelte CHANGED
@@ -2,7 +2,11 @@
2
2
  import type { SvelteComponent, ComponentType } from "svelte";
3
3
  import type { SelectData } from "@gradio/utils";
4
4
  import { BaseExample } from "@gradio/textbox";
5
- import type { load_component as load_component_type } from "@gradio/utils";
5
+ import type {
6
+ load_component as load_component_type,
7
+ LoadingComponent
8
+ } from "@gradio/utils";
9
+ import MountExample from "./MountExample.svelte";
6
10
 
7
11
  interface Props {
8
12
  components: string[];
@@ -104,7 +108,8 @@
104
108
 
105
109
  let component_meta: {
106
110
  value: any;
107
- component: ComponentType<SvelteComponent>;
111
+ component: LoadingComponent;
112
+ runtime: false | typeof import("svelte");
108
113
  }[][] = [];
109
114
 
110
115
  async function get_component_meta(
@@ -119,9 +124,15 @@
119
124
  async (sample_row) =>
120
125
  await Promise.all(
121
126
  sample_row.map(async (sample_cell, j) => {
127
+ const loaded = load_component(
128
+ components[j].name,
129
+ "example",
130
+ components[j].class_id
131
+ );
122
132
  return {
123
133
  value: sample_cell,
124
- component: load_component(components[j], "example")
134
+ component: loaded.component,
135
+ runtime: loaded.runtime
125
136
  };
126
137
  })
127
138
  )
@@ -156,10 +167,11 @@
156
167
  type="gallery"
157
168
  />
158
169
  {:else if component_meta.length}
159
- {#await component_meta[0][0].component then component}
170
+ {#await Promise.all( [component_meta[0][0].component, component_meta[0][0].runtime] ) then [component, runtime]}
160
171
  {#key sample_row[0]}
161
- <svelte:component
162
- this={component.default}
172
+ <MountExample
173
+ {component}
174
+ {runtime}
163
175
  {...component_props[0]}
164
176
  value={sample_row[0]}
165
177
  {samples_dir}
@@ -202,7 +214,7 @@
202
214
  onmouseenter={() => handle_mouseenter(i)}
203
215
  onmouseleave={() => handle_mouseleave()}
204
216
  >
205
- {#each sample_row as { value, component }, j}
217
+ {#each sample_row as { value, component, runtime }, j}
206
218
  {@const component_name = components[j]}
207
219
 
208
220
  {#if component_name !== undefined}
@@ -212,9 +224,10 @@
212
224
  : 'auto'}"
213
225
  class={component_name}
214
226
  >
215
- {#await component then component}
216
- <svelte:component
217
- this={component.default}
227
+ {#await Promise.all( [component, runtime] ) then [component, runtime]}
228
+ <MountExample
229
+ {component}
230
+ {runtime}
218
231
  {...component_props[j]}
219
232
  {value}
220
233
  {samples_dir}
package/dist/MountExample.svelte ADDED
@@ -0,0 +1,40 @@
1
+ <script lang="ts">
2
+ import { mount, unmount } from "svelte";
3
+
4
+ interface Props {
5
+ component: { default: any };
6
+ runtime: false | typeof import("svelte");
7
+ [key: string]: any;
8
+ }
9
+
10
+ let { component, runtime, ...rest }: Props = $props();
11
+ let el: HTMLElement = $state(null);
12
+
13
+ $effect(() => {
14
+ if (!el || !component) return;
15
+
16
+ const _component = component;
17
+ const _runtime = runtime;
18
+ const _rest = rest;
19
+
20
+ if (_runtime) {
21
+ const mounted = _runtime.mount(_component.default, {
22
+ target: el,
23
+ props: _rest
24
+ });
25
+ return () => {
26
+ _runtime.unmount(mounted);
27
+ };
28
+ } else {
29
+ const mounted = mount(_component.default, {
30
+ target: el,
31
+ props: _rest
32
+ });
33
+ return () => {
34
+ unmount(mounted);
35
+ };
36
+ }
37
+ });
38
+ </script>
39
+
40
+ <span bind:this={el}></span>
package/dist/MountExample.svelte.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ interface Props {
2
+ component: {
3
+ default: any;
4
+ };
5
+ runtime: false | typeof import("svelte");
6
+ [key: string]: any;
7
+ }
8
+ declare const MountExample: import("svelte").Component<Props, {}, "">;
9
+ type MountExample = ReturnType<typeof MountExample>;
10
+ export default MountExample;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gradio/dataset",
3
- "version": "0.5.5",
3
+ "version": "0.5.6",
4
4
  "description": "Gradio UI packages",
5
5
  "type": "module",
6
6
  "author": "",
@@ -17,13 +17,13 @@
17
17
  },
18
18
  "dependencies": {
19
19
  "@gradio/client": "^2.1.0",
20
+ "@gradio/utils": "^0.12.1",
21
+ "@gradio/textbox": "^0.13.6",
20
22
  "@gradio/upload": "^0.17.7",
21
- "@gradio/textbox": "^0.13.5",
22
- "@gradio/atoms": "^0.22.2",
23
- "@gradio/utils": "^0.12.0"
23
+ "@gradio/atoms": "^0.22.2"
24
24
  },
25
25
  "devDependencies": {
26
- "@gradio/preview": "^0.16.0"
26
+ "@gradio/preview": "^0.16.1"
27
27
  },
28
28
  "peerDependencies": {
29
29
  "svelte": "^5.48.0"