windmill-components 1.448.50 → 1.472.2

package/package/components/apps/components/display/AppCarouselList.svelte

@@ -20,6 +20,8 @@ export let render;
 export let initializing;
 export let componentContainerHeight;
 const { app, focusedGrid, selectedComponent, worldStore, connectingInput } = getContext('AppViewerContext');
+let everRender = render;
+$: render && !everRender && (everRender = true);
 const outputs = initOutput($worldStore, id, {
     result: undefined,
     loading: false,
@@ -75,117 +77,123 @@ let currentPageIndex = 0;
 	bind:initializing
 	bind:result
 >
-	<div class="w-full flex flex-wrap overflow-auto divide-y max-h-full">
-		{#if $app.subgrids?.[`${id}-0`]}
-			{#if Array.isArray(result) && result.length > 0}
-				{#key result}
-					<Carousel
-						particlesToShow={1}
-						particlesToScroll={1}
-						autoplay={false}
-						autoplayProgressVisible={false}
-						timingFunction={resolvedConfig.timingFunction}
-						dots={true}
-						arrows={true}
-						swiping={false}
-						bind:this={carousel}
-						on:pageChange={(event) => {
-							currentPageIndex = event.detail
-							$focusedGrid = {
-								parentComponentId: id,
-								subGridIndex: event.detail
-							}
-						}}
-					>
-						<div slot="prev" class="h-full flex justify-center flex-col p-2">
-							<div>
-								<Button
-									color="light"
-									on:click={() => {
-										const pagesCount = result?.length ?? 0
+	{#if everRender}
+		<div class="w-full flex flex-wrap overflow-auto divide-y max-h-full">
+			{#if $app.subgrids?.[`${id}-0`]}
+				{#if Array.isArray(result) && result.length > 0}
+					{#key result}
+						<Carousel
+							particlesToShow={1}
+							particlesToScroll={1}
+							autoplay={false}
+							autoplayProgressVisible={false}
+							timingFunction={resolvedConfig.timingFunction}
+							dots={true}
+							arrows={true}
+							swiping={false}
+							bind:this={carousel}
+							on:pageChange={(event) => {
+								currentPageIndex = event.detail
+								$focusedGrid = {
+									parentComponentId: id,
+									subGridIndex: event.detail
+								}
+							}}
+						>
+							<div slot="prev" class="h-full flex justify-center flex-col p-2">
+								<div>
+									<Button
+										color="light"
+										on:click={() => {
+											const pagesCount = result?.length ?? 0
 
-										if (currentPageIndex > 0) {
-											carousel.goTo(currentPageIndex - 1)
-										} else {
-											carousel.goTo(pagesCount - 1)
-										}
-									}}
-								>
-									<ArrowLeftCircle size={16} />
-								</Button>
-							</div>
-						</div>
-						<div slot="next" class="h-full flex justify-center flex-col p-2">
-							<div>
-								<Button
-									color="light"
-									on:click={() => {
-										const pagesCount = result?.length ?? 0
-										if (currentPageIndex < pagesCount - 1) {
-											carousel.goTo(currentPageIndex + 1)
-										} else {
-											carousel.goTo(0)
-										}
-									}}
-								>
-									<ArrowRightCircle size={16} />
-								</Button>
+											if (currentPageIndex > 0) {
+												carousel.goTo(currentPageIndex - 1)
+											} else {
+												carousel.goTo(pagesCount - 1)
+											}
+										}}
+									>
+										<ArrowLeftCircle size={16} />
+									</Button>
+								</div>
 							</div>
-						</div>
-						{#each result ?? [] as value, index}
-							<div class="overflow-auto w-full">
-								<ListWrapper
-									onSet={(id, value) => {
-										if (!inputs[id]) {
-											inputs[id] = { [index]: value }
-										} else {
-											inputs[id] = { ...inputs[id], [index]: value }
-										}
-										outputs?.inputs.set(inputs, true)
-									}}
-									onRemove={(id) => {
-										if (inputs?.[id] == undefined) {
-											return
-										}
-										if (index == 0) {
-											delete inputs[id]
-											inputs = { ...inputs }
-										} else {
-											delete inputs[id][index]
-											inputs[id] = { ...inputs[id] }
-										}
-										outputs?.inputs.set(inputs, true)
-									}}
-									{value}
-									{index}
-								>
-									<SubGridEditor
-										{id}
-										visible={render}
-										class={twMerge(css?.container?.class, 'wm-carousel')}
-										style={css?.container?.style}
-										subGridId={`${id}-0`}
-										containerHeight={componentContainerHeight - 40}
-										on:focus={() => {
-											if (!$connectingInput.opened) {
-												$selectedComponent = [id]
+							<div slot="next" class="h-full flex justify-center flex-col p-2">
+								<div>
+									<Button
+										color="light"
+										on:click={() => {
+											const pagesCount = result?.length ?? 0
+											if (currentPageIndex < pagesCount - 1) {
+												carousel.goTo(currentPageIndex + 1)
+											} else {
+												carousel.goTo(0)
 											}
-											onFocus()
 										}}
-									/>
-								</ListWrapper>
+									>
+										<ArrowRightCircle size={16} />
+									</Button>
+								</div>
 							</div>
-						{/each}
-					</Carousel>
-				{/key}
-			{:else}
-				<ListWrapper disabled value={undefined} index={0}>
-					<SubGridEditor visible={false} {id} subGridId={`${id}-0`} />
-				</ListWrapper>
-				{#if !Array.isArray(result)}
-					<div class="text-center text-tertiary">Input data is not an array</div>
+							{#each result ?? [] as value, index}
+								<div class="overflow-auto w-full">
+									<ListWrapper
+										onSet={(id, value) => {
+											if (!inputs[id]) {
+												inputs[id] = { [index]: value }
+											} else {
+												inputs[id] = { ...inputs[id], [index]: value }
+											}
+											outputs?.inputs.set(inputs, true)
+										}}
+										onRemove={(id) => {
+											if (inputs?.[id] == undefined) {
+												return
+											}
+											if (index == 0) {
+												delete inputs[id]
+												inputs = { ...inputs }
+											} else {
+												delete inputs[id][index]
+												inputs[id] = { ...inputs[id] }
+											}
+											outputs?.inputs.set(inputs, true)
+										}}
+										{value}
+										{index}
+									>
+										<SubGridEditor
+											{id}
+											visible={render}
+											class={twMerge(css?.container?.class, 'wm-carousel')}
+											style={css?.container?.style}
+											subGridId={`${id}-0`}
+											containerHeight={componentContainerHeight - 40}
+											on:focus={() => {
+												if (!$connectingInput.opened) {
+													$selectedComponent = [id]
+												}
+												onFocus()
+											}}
+										/>
+									</ListWrapper>
+								</div>
+							{/each}
+						</Carousel>
+					{/key}
+				{:else}
+					<ListWrapper disabled value={undefined} index={0}>
+						<SubGridEditor visible={false} {id} subGridId={`${id}-0`} />
+					</ListWrapper>
+					{#if !Array.isArray(result)}
+						<div class="text-center text-tertiary">Input data is not an array</div>
+					{/if}
 				{/if}
 			{/if}
-		{/if}
-	</div>
+		</div>
+	{:else if $app.subgrids}
+		<ListWrapper disabled value={undefined} index={0}>
+			<SubGridEditor visible={false} {id} subGridId={`${id}-0`} />
+		</ListWrapper>
+	{/if}
 </RunnableWrapper>

package/package/components/apps/components/display/AppCustomComponent.svelte

@@ -29,6 +29,7 @@ let ccProps = {
     }
 };
 let loaded = false;
+let renderer = undefined;
 // $: renderer && divEl && renderer(ccProps)
 onMount(async () => {
     // //@ts-ignore
@@ -54,7 +55,7 @@ onMount(async () => {
     `/api/w/${workspace ?? 'NO_W'}/resources_u/custom_component/${customComponent.name}`);
     loaded = true;
     try {
-        let renderer = globalThis.windmill[customComponent?.name ?? 'no_name'];
+        renderer = globalThis.windmill[customComponent?.name ?? 'no_name'];
         if (!renderer) {
             sendUserToast('Custom Component seem to be ill-defined (renderer missing). is COMPONENT_NAME in vite.config.ts matching the name of the custom component?', true);
             return;
@@ -65,13 +66,14 @@ onMount(async () => {
         sendUserToast('Custom Component seem to be ill-defined', true);
         console.error(e);
     }
+    console.log('mounted', render, setRender);
 });
 let result;
-$: render != undefined && handleRender();
+$: render != undefined && setRender && handleRender();
 function handleRender() {
     setRender?.(render);
 }
-$: result != undefined && handleResult();
+$: result != undefined && setInput && handleResult();
 function handleResult() {
     setInput?.(result);
 }
@@ -79,13 +81,11 @@ function handleResult() {
 </script>
 
 <InitializeComponent {id} />
-{#if render}
-	<div class="w-full h-full overflow-auto {customComponent?.name ?? 'no_name'}">
-		<RunnableWrapper {outputs} {render} autoRefresh {componentInput} {id} bind:result>
-			{#if !loaded}
-				<Loader2 class="animate-spin" />
-			{/if}
-			<div id={divId} />
-		</RunnableWrapper>
-	</div>
-{/if}
+<div class="w-full h-full overflow-auto {customComponent?.name ?? 'no_name'}">
+	<RunnableWrapper {outputs} render autoRefresh {componentInput} {id} bind:result>
+		{#if !loaded}
+			<Loader2 class="animate-spin" />
+		{/if}
+		<div id={divId} />
+	</RunnableWrapper>
+</div>

package/package/components/apps/components/display/AppDisplayComponent.svelte

@@ -8,6 +8,7 @@ import { initCss } from '../../utils';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
 import { components } from '../../editor/component';
 import ResolveConfig from '../helpers/ResolveConfig.svelte';
+import { userStore } from '../../../../stores';
 export let id;
 export let componentInput;
 export let initializing = undefined;
@@ -78,7 +79,7 @@ let css = initCss($app.css?.displaycomponent, customCss);
 				{result}
 				{requireHtmlApproval}
 				disableExpand={resolvedConfig?.hideDetails}
-				appPath={$appPath}
+				appPath={$userStore ? undefined : $appPath}
 			/>
 		</div>
 	</div>

package/package/components/apps/components/display/AppDisplayComponentByJobId.svelte

@@ -9,12 +9,13 @@ import ResolveConfig from '../helpers/ResolveConfig.svelte';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
 import InitializeComponent from '../helpers/InitializeComponent.svelte';
 import DisplayResult from '../../../DisplayResult.svelte';
+import { userStore } from '../../../../stores';
 export let id;
 export let initializing = false;
 export let customCss = undefined;
 export let configuration;
 export let render;
-const { app, worldStore, workspace } = getContext('AppViewerContext');
+const { app, worldStore, workspace, appPath } = getContext('AppViewerContext');
 const requireHtmlApproval = getContext(IS_APP_PUBLIC_CONTEXT_KEY);
 let resolvedConfig = initConfig(components['jobiddisplaycomponent'].initialData.configuration, configuration);
 const outputs = initOutput($worldStore, id, {
@@ -96,6 +97,7 @@ let result = undefined;
 				{result}
 				{requireHtmlApproval}
 				disableExpand={resolvedConfig?.hideDetails}
+				appPath={$userStore ? undefined : $appPath}
 			/>
 		</div>
 	</div>

package/package/components/apps/components/display/AppHtml.svelte

@@ -8,7 +8,7 @@ export let componentInput;
 export let initializing = undefined;
 export let customCss = undefined;
 export let render;
-const { app, worldStore } = getContext('AppViewerContext');
+const { app, worldStore, mode } = getContext('AppViewerContext');
 const outputs = initOutput($worldStore, id, {
     result: undefined,
     loading: false
@@ -27,25 +27,31 @@ let css = initCss($app.css?.htmlcomponent, customCss);
 	/>
 {/each}
 
-<div
-	on:pointerdown={(e) => {
-		e?.preventDefault()
-	}}
-	class="h-full w-full"
->
-	<RunnableWrapper
-		{outputs}
-		{render}
-		autoRefresh
-		{componentInput}
-		{id}
-		bind:initializing
-		bind:result
+{#if render}
+	<div
+		on:pointerdown={(e) => {
+			if ($mode !== 'preview') {
+				e?.preventDefault()
+			}
+		}}
+		class="h-full w-full"
 	>
-		<div class="w-full h-full overflow-auto">
-			{#key result}
-				{@html result}
-			{/key}
-		</div>
-	</RunnableWrapper>
-</div>
+		<RunnableWrapper
+			{outputs}
+			{render}
+			autoRefresh
+			{componentInput}
+			{id}
+			bind:initializing
+			bind:result
+		>
+			<div class="w-full h-full overflow-auto">
+				{#key result}
+					{@html result}
+				{/key}
+			</div>
+		</RunnableWrapper>
+	</div>
+{:else}
+	<RunnableWrapper {outputs} render={false} autoRefresh {componentInput} {id} />
+{/if}

package/package/components/apps/components/display/AppMarkdown.svelte

@@ -2,19 +2,26 @@
 import { initConfig, initOutput } from '../../editor/appUtils';
 import { initCss } from '../../utils';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
-import Markdown from 'svelte-exmarkdown';
+import { Markdown } from 'svelte-exmarkdown';
+import { gfmPlugin } from 'svelte-exmarkdown/gfm';
+import rehypeRaw from 'rehype-raw';
+import { rehypeGithubAlerts } from 'rehype-github-alerts';
 import { classNames } from '../../../../utils';
 import { components } from '../../editor/component';
 import ResolveConfig from '../helpers/ResolveConfig.svelte';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
-import { gfmPlugin } from 'svelte-exmarkdown/gfm';
 export let id;
 export let componentInput;
 export let initializing = undefined;
 export let customCss = undefined;
 export let render;
 export let configuration;
-const { app, worldStore } = getContext('AppViewerContext');
+const plugins = [
+    gfmPlugin(),
+    { rehypePlugin: [rehypeRaw] },
+    { rehypePlugin: [rehypeGithubAlerts] }
+];
+const { app, worldStore, mode } = getContext('AppViewerContext');
 const resolvedConfig = initConfig(components['mardowncomponent'].initialData.configuration, configuration);
 const outputs = initOutput($worldStore, id, {
     result: undefined,
@@ -50,32 +57,92 @@ const proseMapping = {
 	/>
 {/each}
 
-<div
-	on:pointerdown={(e) => {
-		e?.preventDefault()
-	}}
-	class={classNames(
-		'h-full w-full overflow-y-auto prose max-w-full',
-		resolvedConfig?.size ? proseMapping[resolvedConfig.size] : '',
-		css?.container?.class,
-		' dark:prose-invert',
-		'wm-markdown'
-	)}
-	style={css?.container?.style}
->
-	<RunnableWrapper
-		{outputs}
-		{render}
-		autoRefresh
-		{componentInput}
-		{id}
-		bind:initializing
-		bind:result
+{#if render}
+	<div
+		on:pointerdown={(e) => {
+			if ($mode != 'preview') {
+				e?.preventDefault()
+			}
+		}}
+		class={classNames(
+			'h-full w-full overflow-y-auto prose max-w-full',
+			resolvedConfig?.size ? proseMapping[resolvedConfig.size] : '',
+			css?.container?.class,
+			'dark:prose-invert',
+			'wm-markdown'
+		)}
+		style={css?.container?.style}
 	>
-		{#if result}
-			{#key result}
-				<Markdown md={result} plugins={[gfmPlugin()]} />
-			{/key}
-		{/if}
-	</RunnableWrapper>
-</div>
+		<RunnableWrapper
+			{outputs}
+			render={true}
+			autoRefresh
+			{componentInput}
+			{id}
+			bind:initializing
+			bind:result
+			>{#if result}{#key result}<Markdown md={result} {plugins} />{/key}{/if}
+		</RunnableWrapper>
+	</div>
+{:else}
+	<RunnableWrapper {outputs} render={false} autoRefresh {componentInput} {id} />
+{/if}
+
+<style global>
+	:global(.wm-markdown) :global(p:first-child) {
+		margin-top: 0;
+	}
+	:global(.wm-markdown) :global(p:last-child) {
+		margin-bottom: 0;
+	}
+
+	:global(.wm-markdown) :global(ol:first-child) {
+		margin-top: 0;
+	}
+	:global(.wm-markdown) :global(ol:last-child) {
+		margin-bottom: 0;
+	}
+	:global(.wm-markdown) :global(ul:first-child) {
+		margin-top: 0;
+	}
+	:global(.wm-markdown) :global(ul:last-child) {
+		margin-bottom: 0;
+	}
+	:global(.wm-markdown) :global(li:first-child) {
+		margin-top: 0;
+	}
+	:global(.wm-markdown) :global(li:last-child) {
+		margin-bottom: 0;
+	}
+	:global(.wm-markdown) :global(h1:first-child) {
+		margin-top: 0;
+	}
+	:global(.wm-markdown) :global(h1:last-child) {
+		margin-bottom: 0;
+	}
+	:global(.wm-markdown) :global(h2:first-child) {
+		margin-top: 0;
+	}
+	:global(.wm-markdown) :global(h2:last-child) {
+		margin-bottom: 0;
+	}
+	:global(.wm-markdown) :global(h3:first-child) {
+		margin-top: 0;
+	}
+	:global(.wm-markdown) :global(h3:last-child) {
+		margin-bottom: 0;
+	}
+	:global(.wm-markdown) :global(h4:first-child) {
+		margin-top: 0;
+	}
+	:global(.wm-markdown) :global(h4:last-child) {
+		margin-bottom: 0;
+	}
+	:global(.wm-markdown) :global(code:not([class~="not-prose"]):not(.not-prose) :global(*)::before),
+	:global(.wm-markdown) :global(code:not([class~="not-prose"]):not(.not-prose) :global(*)::after) {
+		content: none !important;
+	}
+	:global(.wm-markdown.prose) :global(code::before),
+	:global(.wm-markdown.prose) :global(code::after) {
+		content: none !important;
+	}</style>