Spaces:
Sleeping
Sleeping
File size: 2,157 Bytes
be5030f |
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 69 70 71 72 |
<script lang="ts">
import { onMount, afterUpdate, onDestroy } from "svelte";
import { Streamlit } from "./streamlit";
import type { RenderData } from "./streamlit";
/**
* Custom Streamlit component
*/
export let component: any;
/**
* Set to false if you want `args` (the named dictionary of arguments passed
* from Python) to be passed as a dictionary to your component.
*
* Default is `true`.
*/
export let spreadArgs: boolean = true;
// State
let renderData: RenderData;
// Props passed to custom Streamlit components.
/** Named dictionary of arguments passed from Python.
* Arguments will be passed directly if `spreadArgs=true`
*/
let args: any;
/** The component's width. */
let width: number;
/**
* True if the component should be disabled.
* All components get disabled while the app is being re-run,
* and become re-enabled when the re-run has finished.
*/
let disabled: boolean;
/**
* Streamlit is telling this component to redraw.
* We save the render data in State, so that it can be passed to the
* component.
*/
const onRenderEvent = (event: Event): void => {
// Update our state with the newest render data
renderData = (event as CustomEvent<RenderData>).detail;
args = renderData.args;
disabled = renderData.disabled;
};
onMount((): void => {
// Set up event listeners, and signal to Streamlit that we're ready.
// We won't render the component until we receive the first RENDER_EVENT.
Streamlit.events.addEventListener(Streamlit.RENDER_EVENT, onRenderEvent);
Streamlit.setComponentReady();
});
onDestroy((): void => {
// Remove our `onRender` handler to Streamlit's render event.
Streamlit.events.removeEventListener(Streamlit.RENDER_EVENT, onRenderEvent);
});
</script>
<svelte:window bind:innerWidth={width} />
<!-- Don't render until we've gotten our first RENDER_EVENT from Streamlit. -->
{#if renderData}
{#if spreadArgs}
<svelte:component this={component} {...args} {disabled} {width} />
{:else}
<svelte:component this={component} {args} {disabled} {width} />
{/if}
{/if}
|