windmill-components 1.21.0 → 1.28.1

package/components/ScriptEditor.svelte

@@ -1,26 +1,22 @@
-<script>import { JobService, Job, CompletedJob, VariableService, ResourceService, ScriptService } from '../gen';
-import { sendUserToast, emptySchema, displayDate } from '../utils';
-import { fade } from 'svelte/transition';
-import Icon from 'svelte-awesome';
-import { faCheck, faChevronDown, faChevronUp, faExclamationTriangle, faMagic, faSearch, faSpinner, faTimes } from '@fortawesome/free-solid-svg-icons';
-import Editor from './Editor.svelte';
-import Tooltip from './Tooltip.svelte';
-import { onDestroy, onMount } from 'svelte';
+<script>import { CompletedJob, Job, JobService } from '../gen';
 import { userStore, workspaceStore } from '../stores';
-import TableCustom from './TableCustom.svelte';
+import { displayDate, emptySchema } from '../utils';
+import { faCheck, faChevronDown, faChevronUp, faExclamationTriangle, faSpinner, faTimes } from '@fortawesome/free-solid-svg-icons';
+import { onDestroy, onMount } from 'svelte';
+import Icon from 'svelte-awesome';
 import { check } from 'svelte-awesome/icons';
+import { fade } from 'svelte/transition';
+import Editor from './Editor.svelte';
 import Modal from './Modal.svelte';
+import TableCustom from './TableCustom.svelte';
+import Tooltip from './Tooltip.svelte';
+import { inferArgs } from '../infer';
 import { Highlight } from 'svelte-highlight';
 import { json, python, typescript } from 'svelte-highlight/languages';
-import github from 'svelte-highlight/styles/github';
-import ItemPicker from './ItemPicker.svelte';
-import VariableEditor from './VariableEditor.svelte';
-import ResourceEditor from './ResourceEditor.svelte';
-import { inferArgs } from '../infer';
-// @ts-ignore
 import { VSplitPane } from 'svelte-split-pane';
-import SchemaForm from './SchemaForm.svelte';
 import DisplayResult from './DisplayResult.svelte';
+import EditorBar from './EditorBar.svelte';
+import SchemaForm from './SchemaForm.svelte';
 // Exported
 export let schema = emptySchema();
 export let code;
@@ -30,6 +26,9 @@ export let lang;
 export let viewPreview = true;
 export let previewTab = 'logs';
 let websocketAlive = { pyright: false, black: false, deno: false };
+let modalViewerTitle = '';
+let modalViewerContent;
+let modalViewerMode = 'logs';
 // Internal state
 let editor;
 // Preview args input
@@ -41,14 +40,6 @@ let previewIntervalId;
 let previewJob;
 let pastPreviews = [];
 let modalViewer;
-let modalViewerTitle = '';
-let modalViewerContent;
-let modalViewerMode = 'logs';
-let variablePicker;
-let resourcePicker;
-let scriptPicker;
-let variableEditor;
-let resourceEditor;
 let syncIteration = 0;
 let ITERATIONS_BEFORE_SLOW_REFRESH = 100;
 let lastSave;
@@ -56,6 +47,7 @@ $: lastSave = localStorage.getItem(path ?? 'last_save');
 export function getEditor() {
     return editor;
 }
+let div = null;
 export async function runPreview() {
     try {
         if (previewIntervalId) {
@@ -124,6 +116,7 @@ async function loadPreviewJob(id) {
             previewIsLoading = false;
             loadPastPreviews();
         }
+        div?.scroll({ top: div?.scrollHeight, behavior: 'smooth' });
     }
     catch (err) {
         console.error(err);
@@ -158,20 +151,6 @@ function syncer(id) {
         loadPreviewJob(id);
     }
 }
-async function loadVariables() {
-    let r = [];
-    const variables = (await VariableService.listVariable({ workspace: $workspaceStore ?? 'NO_W' })).map((x) => {
-        return { name: x.path, ...x };
-    });
-    const rvariables = await VariableService.listContextualVariables({
-        workspace: $workspaceStore ?? 'NO_W'
-    });
-    r = r.concat(variables).concat(rvariables);
-    return r;
-}
-async function loadScripts() {
-    return await ScriptService.listScripts({ workspace: $workspaceStore ?? 'NO_W' });
-}
 let syncCode;
 onMount(() => {
     syncCode = setInterval(() => {
@@ -194,29 +173,6 @@ onDestroy(() => {
 });
 </script>
 
-<svelte:head>
-	{@html github}
-</svelte:head>
-
-<ItemPicker
-	bind:this={scriptPicker}
-	pickCallback={async (path, _) => {
-		modalViewerMode = 'code'
-		modalViewerTitle = 'Script ' + path
-		modalViewerContent = (
-			await ScriptService.getScriptByPath({
-				workspace: $workspaceStore ?? '',
-				path
-			})
-		).content
-		modalViewer.openModal()
-	}}
-	closeOnClick={false}
-	itemName="script"
-	extraField="summary"
-	loadItems={loadScripts}
-/>
-
 <Modal bind:this={modalViewer}>
 	<div slot="title">{modalViewerTitle}</div>
 	<div slot="content">
@@ -236,101 +192,7 @@ onDestroy(() => {
 	</div></Modal
 >
 
-<ItemPicker
-	bind:this={variablePicker}
-	pickCallback={(path, name) => {
-		if (!path) {
-			if (lang == 'deno') {
-				getEditor().insertAtCursor(`Deno.env.get('${name}')`)
-			} else {
-				if (!getEditor().getCode().includes('import os')) {
-					getEditor().insertAtBeginning('import os\n')
-				}
-				getEditor().insertAtCursor(`os.environ.get("${name}")`)
-			}
-			sendUserToast(`${name} inserted at cursor`)
-		} else {
-			if (lang == 'deno') {
-				if (!getEditor().getCode().includes('import * as wmill from')) {
-					getEditor().insertAtBeginning(
-						`import * as wmill from 'https://deno.land/x/windmill@v${__pkg__.version}/index.ts'\n`
-					)
-				}
-				getEditor().insertAtCursor(`(await wmill.getVariable('${path}'))`)
-			} else {
-				if (!getEditor().getCode().includes('import wmill')) {
-					getEditor().insertAtBeginning('import wmill\n')
-				}
-				getEditor().insertAtCursor(`wmill.get_variable("${path}")`)
-			}
-			sendUserToast(`${name} inserted at cursor`)
-		}
-	}}
-	itemName="Variable"
-	extraField="name"
-	loadItems={loadVariables}
->
-	<div slot="submission" class="flex flex-row">
-		<div class="text-xs mr-2 align-middle">
-			The variable you were looking for does not exist yet?
-		</div>
-		<button
-			class="default-button-secondary"
-			type="button"
-			on:click={() => {
-				variableEditor.initNew()
-			}}
-		>
-			Create a new variable
-		</button>
-	</div>
-</ItemPicker>
-
-<ItemPicker
-	bind:this={resourcePicker}
-	pickCallback={(path, _) => {
-		if (lang == 'deno') {
-			if (!getEditor().getCode().includes('import * as wmill from')) {
-				getEditor().insertAtBeginning(
-					`import * as wmill from 'https://deno.land/x/windmill@v${__pkg__.version}/index.ts'\n`
-				)
-			}
-			getEditor().insertAtCursor(`(await wmill.getResource('${path}'))`)
-		} else {
-			if (!getEditor().getCode().includes('import wmill')) {
-				getEditor().insertAtBeginning('import wmill\n')
-			}
-			getEditor().insertAtCursor(`wmill.get_resource("${path}")`)
-		}
-		sendUserToast(`${path} inserted at cursor`)
-	}}
-	itemName="Resource"
-	extraField="resource_type"
-	loadItems={async () =>
-		await ResourceService.listResource({ workspace: $workspaceStore ?? 'NO_W' })}
->
-	<div slot="submission" class="flex flex-row">
-		<div class="text-xs mr-2 align-middle">
-			The resource you were looking for does not exist yet?
-		</div>
-		<button
-			class="default-button-secondary"
-			type="button"
-			on:click={() => {
-				resourceEditor.initNew()
-			}}
-		>
-			Create a new resource
-		</button>
-	</div>
-</ItemPicker>
-
-<ResourceEditor bind:this={resourceEditor} on:refresh={resourcePicker.openModal} />
-
-<VariableEditor bind:this={variableEditor} on:create={variablePicker.openModal} />
-
 <VSplitPane
-	class="h-full"
 	topPanelSize={viewPreview ? '75%' : '90%'}
 	downPanelSize={viewPreview ? '25%' : '10%'}
 	updateCallback={() => {
@@ -342,48 +204,9 @@ onDestroy(() => {
 	<top slot="top">
 		<div class="flex flex-col h-full">
 			<div class="header">
-				<div class="flex flex-row justify-around w-full">
-					<button
-						class="default-button-secondary font-semibold py-px mr-2 text-xs align-middle max-h-8"
-						on:click|stopPropagation={() => {
-							variablePicker.openModal()
-						}}
-						>Variable picker <Icon data={faSearch} scale={0.7} />
-					</button>
-
-					<button
-						class="default-button-secondary font-semibold py-px text-xs mr-2 align-middle max-h-8"
-						on:click|stopPropagation={() => {
-							resourcePicker.openModal()
-						}}
-						>Resource picker <Icon data={faSearch} scale={0.7} />
-					</button>
-					<button
-						class="default-button-secondary font-semibold py-px text-xs mr-2 align-middle max-h-8"
-						on:click|stopPropagation={() => {
-							scriptPicker.openModal()
-						}}
-						>Script explorer <Icon data={faSearch} scale={0.7} />
-					</button>
-
-					<button
-						class="default-button-secondary py-px max-h-8 text-xs"
-						on:click|stopPropagation={() => {
-							editor.reloadWebsocket()
-						}}
-					>
-						Reload assistants (status: {#if lang == 'deno'}<span
-								class={websocketAlive.deno ? 'text-green-600' : 'text-red-600'}>deno</span
-							>{:else if lang == 'python3'}<span
-								class={websocketAlive.pyright ? 'text-green-600' : 'text-red-600'}>pyright</span
-							>
-							<span class={websocketAlive.black ? 'text-green-600' : 'text-red-600'}>
-								black</span
-							>{/if})
-					</button>
-				</div>
+				<EditorBar {editor} {lang} {websocketAlive} />
 			</div>
-			<div class="flex-1 overflow-hidden">
+			<div class="flex-1 overflow-hidden border p-2 rounded">
 				<Editor
 					{code}
 					bind:websocketAlive
@@ -392,9 +215,15 @@ onDestroy(() => {
 						runPreview()
 						viewPreview = true
 					}}
-					formatAction={() => {
+					formatAction={async () => {
 						code = getEditor().getCode()
+						await inferSchema()
 						localStorage.setItem(path ?? 'last_save', code)
+						lastSave = code
+					}}
+					on:blur={() => {
+						code = getEditor().getCode()
+						inferSchema()
 					}}
 					class="h-full"
 					deno={lang == 'deno'}
@@ -411,8 +240,8 @@ onDestroy(() => {
 					viewPreview = !viewPreview
 				}}
 			>
-				<div class="flex flex-row items-baseline">
-					<div class="font-base py-0 mr-6">
+				<div class="flex flex-row flex-wrap items-baseline">
+					<div class="font-base py-0 mr-6 hidden md:block">
 						Preview <Tooltip
 							><span class="font-normal"
 								>Test your script by running a preview, passing inputs as if you were a user</span
@@ -499,7 +328,7 @@ onDestroy(() => {
 						}}
 						>Run preview
 					</button>
-					<div class="text-xs text-gray-700 min-w-max mx-2">
+					<div class="text-xs text-gray-700 min-w-max hidden md:block mx-2">
 						Shortcuts: <Tooltip>
 							Cmd/Ctrl+S: autoformat code and overwrite local save <br />
 							Cmd/Ctrl+Enter: run preview</Tooltip
@@ -508,7 +337,7 @@ onDestroy(() => {
 				</div>
 			</div>
 		</div>
-		<div class="preview flex-1 overflow-hidden p-3">
+		<div bind:this={div} class="preview flex-1 p-3">
 			{#if previewTab === 'logs'}
 				<pre
 					class="break-all relative h-full mx-2">{#if previewJob && previewJob.logs}{previewJob.logs}
@@ -516,21 +345,20 @@ onDestroy(() => {
 					{:else}No preview is available yet{/if}
 			</pre>
 			{:else if previewTab === 'input'}
-				<div class="break-all relative h-full font-sans">
-					<div class="p-2 w-full">
-						<button class="default-button w-full mb-4" on:click|stopPropagation={inferSchema}
-							><Icon data={faMagic} scale={0.7} /><span class="pl-1"
-								>Infer schema from main parameters</span
-							>
-						</button>
-					</div>
-					<div class="flex flex-row items-baseline text-2xs text-gray-700 p-2 ml-8 italic">
-						{#if isValid}
-							<Icon data={faCheck} class="text-green-600 mr-1" scale={0.6} /> The current preview input
-							matches requirements defined in arguments
-						{:else}
-							<Icon data={faExclamationTriangle} class="text-yellow-500 mr-1" scale={0.6} />The
-							current preview input doesn't match requirements defined in arguments. Are you sure?{/if}
+				<div class="break-all relative h-full font-sans -mt-2">
+					<div class="items-baseline text-xs text-gray-700 px-2 ml-8 italic hidden md:block">
+						<p>
+							Move the focus outside of the text editor to recompute the input schema from main
+							signature or press Ctrl/Cmd+S
+						</p>
+						<p class="">
+							{#if isValid}
+								<Icon data={faCheck} class="text-green-600 mr-1" scale={0.6} /> The current preview input
+								matches requirements defined in arguments
+							{:else}
+								<Icon data={faExclamationTriangle} class="text-yellow-500 mr-1" scale={0.6} />The
+								current preview input doesn't match requirements defined in arguments{/if}
+						</p>
 					</div>
 					<div class="sm:px-8">
 						<SchemaForm {schema} bind:args bind:isValid />
@@ -561,7 +389,7 @@ onDestroy(() => {
 					{:else}No local save{/if}
 				</div>
 			{:else if previewTab === 'history'}
-				<TableCustom paginated={false}>
+				<TableCustom>
 					<tr slot="header-row">
 						<th class="text-xs">id</th>
 						<th class="text-xs">created at</th>
@@ -571,11 +399,11 @@ onDestroy(() => {
 						<th class="text-xs">logs</th>
 					</tr>
 					<tbody slot="body">
-						{#each pastPreviews as { id, created_at, success, result, logs }}
+						{#each pastPreviews as { id, created_at, success, result }}
 							<tr class="">
-								<td class="text-xs"
-									><a class="pr-3" href="/run/{id}" target="_blank">{id.substring(30)}</a></td
-								>
+								<td class="text-xs">
+									<a class="pr-3" href="/run/{id}" target="_blank">{id.substring(30)}</a>
+								</td>
 								<td class="text-xs">{displayDate(created_at)}</td>
 								<td class="text-xs">
 									{#if success}
@@ -592,9 +420,10 @@ onDestroy(() => {
 											modalViewerContent = result
 											modalViewerMode = 'result'
 											modalViewer.openModal()
-										}}>{JSON.stringify(result).substring(0, 30)}...</a
-									></td
-								>
+										}}
+										>{JSON.stringify(result).substring(0, 30)}...
+									</a>
+								</td>
 								<td class="text-xs"
 									><a
 										href="#code"
@@ -640,30 +469,29 @@ onDestroy(() => {
 
 <style>
 	.header {
-		max-height: 28px;
-		border-width: 1px;
-		padding-left: 0.5rem;
-		padding-right: 0.5rem;
-		padding-top: 0.25rem;
-		padding-bottom: 0.25rem;
-		border-left-width: 1px;
-		border-right-width: 1px;
-		--tw-bg-opacity: 1;
-		background-color: rgb(243 244 246 / var(--tw-bg-opacity));
-		font-size: 0.75rem;
-		line-height: 1rem;
-		--tw-text-opacity: 1;
-		color: rgb(55 65 81 / var(--tw-text-opacity));
-	}
+
+    padding-top: 0.5rem;
+
+    padding-bottom: 0.5rem
+}
 
 	.preview {
-		border-width: 1px;
-		overflow: auto;
-		border-left-width: 1px;
-		border-right-width: 1px;
-		--tw-bg-opacity: 1;
-		background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-		font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-		font-size: 0.75rem;
-		line-height: 1rem;
+
+    border-width: 1px;
+
+    overflow: auto;
+
+    border-left-width: 1px;
+
+    border-right-width: 1px;
+
+    --tw-bg-opacity: 1;
+
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+
+    font-size: 0.75rem;
+
+    line-height: 1rem
 }</style>

package/components/ScriptPicker.svelte

@@ -1,14 +1,15 @@
-<script>import { ScriptService, FlowService, Script } from '../gen';
+<script>import { ScriptService, FlowService } from '../gen';
 import Icon from 'svelte-awesome';
 import { faSearch } from '@fortawesome/free-solid-svg-icons';
 import { hubScripts, workspaceStore } from '../stores';
 import { createEventDispatcher } from 'svelte';
 import ItemPicker from './ItemPicker.svelte';
-import RadioButton from './RadioButton.svelte';
 import Modal from './Modal.svelte';
 import { Highlight } from 'svelte-highlight';
-import { python, typescript } from 'svelte-highlight/languages';
-import github from 'svelte-highlight/styles/github';
+import typescript from 'svelte-highlight/languages/typescript';
+import python from 'svelte-highlight/languages/python';
+import { getScriptByPath } from '../utils';
+import RadioButton from './RadioButton.svelte';
 export let scriptPath = undefined;
 export let allowFlow = false;
 export let allowHub = false;
@@ -23,20 +24,6 @@ let options = [['Script', 'script']];
 allowHub && options.unshift(['Hub', 'hub']);
 allowFlow && options.push(['Flow', 'flow']);
 const dispatch = createEventDispatcher();
-async function getScript() {
-    if (itemKind == 'hub') {
-        code = await ScriptService.getHubScriptContentByPath({ path: scriptPath });
-        lang = Script.language.DENO;
-    }
-    else {
-        const script = await ScriptService.getScriptByPath({
-            workspace: $workspaceStore,
-            path: scriptPath
-        });
-        code = script.content;
-        lang = script.language;
-    }
-}
 async function loadItems() {
     if (itemKind == 'flow') {
         items = await FlowService.listFlows({ workspace: $workspaceStore });
@@ -55,10 +42,6 @@ $: {
 }
 </script>
 
-<svelte:head>
-	{@html github}
-</svelte:head>
-
 <ItemPicker
 	bind:this={itemPicker}
 	pickCallback={(path, _) => {
@@ -74,9 +57,11 @@ $: {
 />
 
 <div class="flex flex-row items-center space-x-5">
-	{#if options.length > 1}
-		<RadioButton bind:value={itemKind} {options} />
-	{/if}
+	<div class="w-80">
+		{#if options.length > 1}
+			<RadioButton bind:value={itemKind} {options} />
+		{/if}
+	</div>
 
 	<input type="text" value={scriptPath ?? 'No path chosen yet'} disabled />
 	<button class="default-button text-gray-100" on:click={() => itemPicker.openModal()}
@@ -86,7 +71,9 @@ $: {
 		<button
 			class="text-xs text-blue-500"
 			on:click={async () => {
-				await getScript()
+				const { language, content } = await getScriptByPath(scriptPath ?? '')
+				code = content
+				lang = language
 				modalViewer.openModal()
 			}}>show code</button
 		>

package/components/ScriptPicker.svelte.d.ts

@@ -4,7 +4,7 @@ declare const __propDef: {
         scriptPath?: string | undefined;
         allowFlow?: boolean | undefined;
         allowHub?: boolean | undefined;
-        itemKind?: "script" | "flow" | "hub" | undefined;
+        itemKind?: "flow" | "script" | "hub" | undefined;
         isTrigger?: boolean | undefined;
     };
     events: {

package/components/ScriptSchema.svelte

@@ -3,7 +3,6 @@ import SchemaForm from './SchemaForm.svelte';
 import Tabs from './Tabs.svelte';
 import Highlight from 'svelte-highlight';
 import json from 'svelte-highlight/languages/json';
-import github from 'svelte-highlight/styles/github';
 import SvelteMarkdown from 'svelte-markdown';
 export let schema;
 export let summary;
@@ -15,10 +14,6 @@ export function setSchema(newSchema) {
 }
 </script>
 
-<svelte:head>
-	{@html github}
-</svelte:head>
-
 <div class="w-full">
 	<PageHeader title="UI customisation" />
 	<Tabs

package/components/ShareModal.svelte

@@ -86,7 +86,7 @@ async function addAcl(owner, write) {
 					<option>group</option>
 				</select>
 			</label>
-			<label class="block grow mx-2">
+			<label class="block grow mx-2" for="inp">
 				<span class="text-sm text-gray-700">Owner</span>
 				<div class="block mt-1">
 					<div class="static z-50">

package/components/SharedBadge.svelte

@@ -20,13 +20,13 @@ $: {
     }
     else {
         let writeGroup = pgroups.find((x) => extraPermsKeys.includes(x) && extraPerms[x]);
-        if (pgroups.find((x) => x in extraPermsKeys && extraPerms[x])) {
+        if (writeGroup) {
             kind = 'write';
             reason = `This item was write shared to the group ${writeGroup} which you are a member of`;
         }
         else {
-            let readGroup = pgroups.find((x) => extraPermsKeys.includes(x) && extraPerms[x]);
-            if (pgroups.find((x) => extraPermsKeys.includes(x))) {
+            let readGroup = pgroups.find((x) => extraPermsKeys.includes(x));
+            if (readGroup) {
                 kind = 'read';
                 reason = `This item was read-only shared to the group ${readGroup} which you are a member of`;
             }
@@ -45,10 +45,12 @@ $: {
 }
 </script>
 
-<span>
-	{#if kind == 'read'}
-		<Badge tooltip={reason}>shared to you (read-only)</Badge>
-	{:else if kind == 'write'}
-		<Badge tooltip={reason}>shared to you</Badge>
-	{/if}
-</span>
+{#if kind == 'read' || kind == 'write'}
+	<span class="mr-1">
+		{#if kind == 'read'}
+			<Badge tooltip={reason}>shared to you (read-only)</Badge>
+		{:else if kind == 'write'}
+			<Badge tooltip={reason}>shared to you</Badge>
+		{/if}
+	</span>
+{/if}

package/components/StringTypeNarrowing.svelte

@@ -3,6 +3,7 @@ import ResourceTypePicker from './ResourceTypePicker.svelte';
 export let pattern;
 export let enum_;
 export let format;
+export let contentEncoding;
 let kind = 'none';
 let patternStr = pattern ?? '';
 let resource;
@@ -21,13 +22,14 @@ const FORMATS = [
 $: format =
     kind == 'resource' ? (resource != undefined ? `resource-${resource}` : 'resource') : undefined;
 $: pattern = patternStr == '' ? undefined : patternStr;
+$: contentEncoding = kind == 'base64' ? 'base64' : undefined;
 </script>
 
 <RadioButton
 	label="Kind"
-	small={true}
 	options={[
 		['None', 'none'],
+		['File (base64)', 'base64'],
 		['Enum', 'enum'],
 		['Resource Path', 'resource'],
 		['Format', 'format'],
@@ -35,12 +37,14 @@ $: pattern = patternStr == '' ? undefined : patternStr;
 	]}
 	bind:value={kind}
 />
+<div class="my-2" />
 
 {#if kind == 'pattern'}
-	<label class="mb-2 text-gray-700 text-xs"
+	<label for="input" class="mb-2 text-gray-700 text-xs"
 		>Pattern (Regex)
 		<div class="flex flex-row">
 			<input
+				id="input"
 				type="text"
 				placeholder="^(\\([0-9]{3}\\))?[0-9]{3}-[0-9]{4}$"
 				bind:value={patternStr}
@@ -54,11 +58,11 @@ $: pattern = patternStr == '' ? undefined : patternStr;
 		</div>
 	</label>
 {:else if kind == 'enum'}
-	<label class="mb-2 text-gray-700 text-xs"
+	<label for="input" class="mb-2 text-gray-700 text-xs"
 		>Enums
 		{#each enum_ ?? [] as e}
 			<div class="flex flex-row max-w-md">
-				<input type="text" bind:value={e} />
+				<input id="input" type="text" bind:value={e} />
 				<button
 					class="default-button mx-6"
 					on:click={() => {

package/components/StringTypeNarrowing.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         pattern: string | undefined;
         enum_: string[] | undefined;
         format: string | undefined;
+        contentEncoding: 'base64' | 'binary' | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;