rfcc

frontend/src/lib/components/apps/components/display/AppCustomComponent.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	import { getContext, onMount } from 'svelte'
+	import { initOutput } from '../../editor/appUtils'
+	import type { AppViewerContext, RichConfigurations } from '../../types'
+
+	type CCProps<Init, Output> = {
+		initState: Init | undefined
+		id: string
+		saveInitState: (state: Init) => void
+		setOutput: (output: Output) => void
+	}
+
+	import InitializeComponent from '../helpers/InitializeComponent.svelte'
+	import { sendUserToast } from '$lib/toast'
+	import type { AppInput } from '../../inputType'
+	import { RunnableWrapper } from '../helpers'
+
+	export let id: string
+	export let configuration: RichConfigurations
+	export let render: boolean
+	export let componentInput: AppInput | undefined
+
+	let divId = 'custom-component-{id}'
+	const { worldStore } = getContext<AppViewerContext>('AppViewerContext')
+
+	let divEl: HTMLDivElement
+	const outputs = initOutput($worldStore, id, {
+		result: undefined,
+		ccOutput: undefined,
+		loading: false
+	})
+
+	let ccProps: CCProps<any, any> = {
+		initState: undefined,
+		id: divId,
+		saveInitState: (state) => {
+			console.log('saveInitState', state)
+		},
+		setOutput: (output) => {
+			outputs.ccOutput.set(output)
+			console.log('setOutput', output)
+		}
+	}
+
+	let renderer: (props: CCProps<any, any>) => void
+
+	// $: renderer && divEl && renderer(ccProps)
+
+	o{
+		// //@ts-ignore
+		// await import('http://localhost:3000/app.iife.js')
+		/* @vite-ignore */
+
+		//@ts-ignore
+		await import('https://unpkg.com/react@18.2.0/umd/react.development.js')
+
+		//@ts-ignore
+		await import('https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js')
+		//@ts-ignore
+		await import('http://localhost:3000/cc.iife.js')
+
+		try {
+			renderer = globalThis.windmill['foo']
+			renderer(ccProps)
+		} catch (e) {
+			sendUserToast('Custom Component seem to be ill-defined', true)
+			console.error(e)
+		}
+	})
+</script>
+
+<InitializeComponent {id} />
+
+{#if render}
+	<RunnableWrapper
+		{outputs}
+		{render}
+		autoRefresh
+		{componentInput}
+		{id}
+		bind:result={ccProps.initState}
+	>
+		<div bind:this={divEl} id={divId} />
+	</RunnableWrapper>
+{/if}

frontend/src/lib/components/apps/editor/component/Component.svelte

@@ -55,6 +55,7 @@
 	import AppJobIdLogComponent from '../../components/display/AppJobIdLogComponent.svelte'
 	import AppJobIdFlowStatus from '../../components/display/AppJobIdFlowStatus.svelte'
 	import AppCarouselList from '../../components/display/AppCarouselList.svelte'
+	import AppCustomComponent from '../../components/display/AppCustomComponent.svelte'
 
 	export let component: AppComponent
 	export let selected: boolean
@@ -207,6 +208,13 @@
 				componentInput={component.componentInput}
 				{render}
 			/>
+		{:else if component.type === 'customcomponent'}
+			<AppCustomComponent
+				configuration={component.configuration}
+				id={component.id}
+				componentInput={component.componentInput}
+				{render}
+			/>
 		{:else if component.type === 'mardowncomponent'}
 			<AppMarkdown
 				id={component.id}

frontend/src/lib/components/apps/editor/component/components.ts

@@ -74,6 +74,7 @@ export type CurrencyComponent = BaseComponent<'currencycomponent'>
 export type SliderComponent = BaseComponent<'slidercomponent'>
 export type RangeComponent = BaseComponent<'rangecomponent'>
 export type HtmlComponent = BaseComponent<'htmlcomponent'>
+export type CustomComponent = BaseComponent<'customcomponent'>
 export type MarkdownComponent = BaseComponent<'mardowncomponent'>
 export type VegaLiteComponent = BaseComponent<'vegalitecomponent'>
 export type PlotlyComponent = BaseComponent<'plotlycomponent'>
@@ -158,6 +159,7 @@ export type TypedComponent =
 	| BarChartComponent
 	| TimeseriesComponent
 	| HtmlComponent
+	| CustomComponent
 	| MarkdownComponent
 	| TableComponent
 	| TextComponent
@@ -1035,6 +1037,23 @@ Hello \${ctx.username}
 			configuration: {}
 		}
 	},
+	customcomponent: {
+		name: 'Custom',
+		icon: Code2,
+		documentationLink: `${documentationBaseUrl}#custom`,
+		dims: '1:2-1:2' as AppComponentDimensions,
+		customCss: {
+			container: { class: '', style: '' }
+		},
+		initialData: {
+			componentInput: {
+				type: 'static',
+				fieldType: 'object',
+				value: {}
+			},
+			configuration: {}
+		}
+	},
 	mardowncomponent: {
 		name: 'Markdown',
 		icon: Heading1,

frontend/src/lib/components/apps/editor/component/sets.ts

@@ -63,7 +63,8 @@ const display: ComponentSet = {
 		'pdfcomponent',
 		'displaycomponent',
 		'jobidlogcomponent',
-		'jobidflowstatuscomponent'
+		'jobidflowstatuscomponent',
+		'customcomponent'
 	]
 } as const
 

frontend/src/lib/components/apps/editor/componentsPanel/quickStyleProperties.ts

@@ -560,6 +560,7 @@ export const quickStyleProperties: Record<
 		container: containerDefaultProps,
 		button: buttonDefaultProps
 	},
+	customcomponent: {},
 	htmlcomponent: {
 		container: [
 			layoutGrouping,