Merge branch 'main' into rf/cc

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

@@ -0,0 +1,98 @@
+<script lang="ts">
+	import { getContext, onMount } from 'svelte'
+	import { initOutput } from '../../editor/appUtils'
+	import type { AppViewerContext, RichConfigurations } from '../../types'
+
+	type CCProps<Input> = {
+		id: string
+		render: boolean
+		passSetters: (setter: Setter<Input>) => void
+		setOutput: (output: any) => void
+	}
+
+	interface Setter<Input> {
+		onRender(bool: boolean): void
+		onInput(input: Input): 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
+
+	const COMPONENT_NAME = 'mycomponent'
+
+	let divId = `custom-component-${id}`
+	const { worldStore } = getContext<AppViewerContext>('AppViewerContext')
+
+	const outputs = initOutput($worldStore, id, {
+		result: undefined,
+		ccOutput: undefined,
+		loading: false
+	})
+
+	let setInput
+	let setRender
+	let ccProps: CCProps<any> = {
+		render,
+		id: divId,
+		passSetters: (setter) => {
+			setInput = setter.onInput
+			setRender = setter.onRender
+		},
+		setOutput: (output) => {
+			outputs.ccOutput.set(output)
+			console.log('setOutput', output)
+		}
+	}
+	let loaded = false
+
+	// $: renderer && divEl && renderer(ccProps)
+	onMount(async () => {
+		// //@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')
+		loaded = true
+		try {
+			let renderer: (props: CCProps<number>) => void = globalThis.windmill[COMPONENT_NAME]
+			renderer?.(ccProps)
+		} catch (e) {
+			sendUserToast('Custom Component seem to be ill-defined', true)
+			console.error(e)
+		}
+	})
+	let result
+
+	$: render != undefined && handleRender()
+	function handleRender() {
+		setRender?.(render)
+	}
+	$: result != undefined && handleResult()
+	function handleResult() {
+		setInput?.(result)
+	}
+	// $: result && setInput && setInput(result)
+</script>
+
+<InitializeComponent {id} />
+
+{#if render}
+	<div class="w-full h-full overflow-auto {COMPONENT_NAME}">
+		<RunnableWrapper {outputs} {render} autoRefresh {componentInput} {id} bind:result>
+			<div id={divId} />
+		</RunnableWrapper>
+	</div>
+{/if}

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

@@ -61,6 +61,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'
 	import AppAggridTableEe from '../../components/display/table/AppAggridTableEe.svelte'
 
 	export let component: AppComponent
@@ -231,6 +232,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

@@ -75,6 +75,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'>
@@ -173,6 +174,7 @@ export type TypedComponent =
 	| BarChartComponent
 	| TimeseriesComponent
 	| HtmlComponent
+	| CustomComponent
 	| MarkdownComponent
 	| TableComponent
 	| TextComponent
@@ -1198,6 +1200,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

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

frontend/static/cc.iife.js

@@ -0,0 +1,2 @@
+(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode(".mycomponent{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.mycomponent .card{padding:2em}.mycomponent{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}.mycomponent a{font-weight:500;color:#646cff;text-decoration:inherit}.mycomponent a:hover{color:#535bf2}.mycomponent h1{font-size:3.2em;line-height:1.1}.mycomponent button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}.mycomponent button:hover{border-color:#646cff}.mycomponent>button:focus,.mycomponent>button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){.mycomponent{color:#213547;background-color:#fff}.mycomponent a:hover{color:#747bff}.mycomponent button{background-color:#f9f9f9}}")),document.head.appendChild(o)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+var wmc=function(n,e,i){"use strict";const w="";function m({passSetters:t,setOutput:d,renderInit:c}){const[s,r]=e.useState(c),[o,l]=e.useState(0);return e.useEffect(()=>{t({onInput:l,onRender:r})},[l,r,t]),s?e.createElement(e.Fragment,null,e.createElement("h1",null,"Windmill Custom Component"),e.createElement("div",{className:"card"},e.createElement("button",{className:"mr-4",onClick:()=>l(a=>a+1)},"input count is ",o),e.createElement("button",{onClick:()=>d(o)},"Setting output to ",o))):e.createElement(e.Fragment,null)}const E="";function u(t){i.createRoot(document.getElementById(t.id)).render(e.createElement(e.StrictMode,null,e.createElement(m,{passSetters:t.passSetters,setOutput:t.setOutput,renderInit:t.render})))}return window.windmill===void 0&&(window.windmill={}),window.windmill.mycomponent=u,n.customComponent=u,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),n}({},React,ReactDOM);