File size: 1,681 Bytes
0ad74ed |
1 2 3 4 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 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
<svelte:options immutable={true} />
<script lang="ts">
import type { Gradio } from "./gradio_helper";
import type { ComponentMeta, ThemeMode } from "./types";
import type { SvelteComponent, ComponentType } from "svelte";
// @ts-ignore
import { bind, binding_callbacks } from "svelte/internal";
export let root: string;
export let component: ComponentMeta["component"];
export let target: HTMLElement;
export let theme_mode: ThemeMode;
export let instance: ComponentMeta["instance"];
export let value: any;
// export let gradio: Gradio;
export let elem_id: string;
export let elem_classes: string[];
export let _id: number;
const s = (id: number, p: string, v: any): CustomEvent =>
new CustomEvent("prop_change", { detail: { id, prop: p, value: v } });
function wrap(
component: ComponentType<SvelteComponent>
): ComponentType<SvelteComponent> {
const ProxiedMyClass = new Proxy(component, {
construct(_target, args: Record<string, any>[]) {
//@ts-ignore
const instance = new _target(...args);
const props = Object.keys(instance.$$.props);
function report(props: string) {
return function (propargs: any) {
if (!target) return;
const ev = s(_id, props, propargs);
target.dispatchEvent(ev);
};
}
props.forEach((v) => {
binding_callbacks.push(() => bind(instance, v, report(v)));
});
return instance;
}
});
return ProxiedMyClass;
}
const _component = wrap(component);
</script>
<svelte:component
this={_component}
bind:this={instance}
bind:value
on:prop_change
{elem_id}
{elem_classes}
{target}
{...$$restProps}
{theme_mode}
{root}
>
<slot />
</svelte:component>
|