windmill-components 1.447.8 → 1.448.50

package/package/components/schema/schemaUtils.js

@@ -0,0 +1,185 @@
+function isCompatible(diff) {
+    let compatible = true;
+    Object.values(diff).forEach((diff) => {
+        if (diff.diff === 'added' || diff.diff === 'modified' || diff.diff === 'removed') {
+            compatible = false;
+        }
+        else if (isRecordSchemaDiff(diff.diff)) {
+            compatible = isCompatible(diff.diff);
+        }
+    });
+    return compatible;
+}
+function isCompatibleObject(a, b) {
+    if (!a || !b) {
+        return false;
+    }
+    if (a.type === 'null' || b.type === 'null') {
+        return true;
+    }
+    if (a.type !== b.type) {
+        if ((a.type === 'number' || a.type === 'integer') &&
+            (b.type === 'number' || b.type === 'integer')) {
+            return true;
+        }
+        return false;
+    }
+    switch (a.type) {
+        case 'object':
+            if (a.oneOf || b.oneOf) {
+                //TODO: handle oneOf compatibility. here we assume that only b is oneOf
+                return true;
+            }
+            return a.format === b.format;
+        case 'array':
+            return !a.items || !b.items || a.items?.type === b.items?.type;
+        case 'string':
+            return a.format === b.format;
+        case 'boolean':
+        case 'number':
+        case 'integer':
+            return true;
+        default:
+            return false;
+    }
+}
+export function computeDiff(previewSchema, currentSchema) {
+    if (!previewSchema || !currentSchema) {
+        return {};
+    }
+    const diff = {};
+    if (previewSchema?.properties) {
+        Object.keys(previewSchema.properties).forEach((key) => {
+            if (!currentSchema?.properties?.[key]) {
+                diff[key] = {
+                    diff: 'added',
+                    fullSchema: previewSchema.properties[key]
+                };
+            }
+            else {
+                const previewProp = previewSchema.properties[key];
+                const currentProp = currentSchema.properties[key];
+                if (previewProp.type === 'object' && currentProp.type === 'object') {
+                    if (JSON.stringify(previewProp) === JSON.stringify(currentProp)) {
+                        diff[key] = { diff: 'same', fullSchema: undefined };
+                    }
+                    else if (previewProp.oneOf || currentProp.oneOf) {
+                        if (isCompatibleObject(previewProp, currentProp)) {
+                            diff[key] = { diff: 'same', fullSchema: undefined };
+                        }
+                        else {
+                            diff[key] = { diff: 'modified', fullSchema: previewProp, oldSchema: currentProp };
+                        }
+                    }
+                    else if (previewProp.format || currentProp.format) {
+                        //TODO: handle s3 object compatibility
+                        diff[key] = { diff: 'modified', fullSchema: previewProp, oldSchema: currentProp };
+                    }
+                    else {
+                        const diffProp = computeDiff(previewProp, currentProp);
+                        const checkIfSame = isCompatible(diffProp);
+                        if (checkIfSame) {
+                            diff[key] = { diff: 'same', fullSchema: undefined };
+                        }
+                        else {
+                            diff[key] = {
+                                diff: diffProp,
+                                fullSchema: previewProp,
+                                oldSchema: currentProp
+                            };
+                        }
+                    }
+                }
+                else if (isCompatibleObject(previewProp, currentProp)) {
+                    diff[key] = { diff: 'same', fullSchema: undefined };
+                }
+                else {
+                    diff[key] = { diff: 'modified', fullSchema: previewProp, oldSchema: currentProp };
+                }
+            }
+        });
+    }
+    if (currentSchema?.properties) {
+        Object.keys(currentSchema.properties).forEach((key) => {
+            if (!previewSchema?.properties?.[key]) {
+                diff[key] = { diff: 'removed', fullSchema: undefined };
+            }
+        });
+    }
+    return diff;
+}
+export function schemaFromDiff(diff, schema) {
+    if (!schema) {
+        return undefined;
+    }
+    const newSchema = structuredClone(schema);
+    Object.keys(diff).forEach((key) => {
+        const diffValue = diff[key].diff;
+        if (diffValue === 'added' || diffValue === 'modified') {
+            newSchema.properties[key] = diff[key].fullSchema;
+            if (newSchema.order && !newSchema.order.includes(key)) {
+                newSchema.order.push(key);
+            }
+        }
+        else if (isRecordSchemaDiff(diffValue)) {
+            // Handle nested diffs
+            newSchema.properties[key] = schemaFromDiff(diffValue, schema.properties[key]);
+        }
+    });
+    return newSchema;
+}
+export function getFullPath(arg) {
+    const getPath = (current) => {
+        if (!current.nestedParent) {
+            return [current.label];
+        }
+        return [...getPath(current.nestedParent), current.label];
+    };
+    return getPath(arg);
+}
+export function getNestedProperty(obj, path, field = 'properties') {
+    return path.reduce((curr, key) => curr?.[field]?.[key], obj);
+}
+export function setNestedProperty(obj, path, value, field = 'properties') {
+    const pathCopy = [...path];
+    const lastKey = pathCopy.pop();
+    const target = pathCopy.reduce((curr, key) => {
+        if (!(key in curr[field])) {
+            curr[field][key] = { [field]: {} };
+        }
+        return curr[field][key];
+    }, obj);
+    if (lastKey && value) {
+        const newValue = structuredClone(value);
+        target[field][lastKey] = newValue;
+        return;
+    }
+    else if (lastKey && !value) {
+        delete target[field][lastKey];
+    }
+}
+function isRecordSchemaDiff(value) {
+    return typeof value === 'object' && value !== null;
+}
+export function applyDiff(schema, diff) {
+    if (!diff || !schema) {
+        return;
+    }
+    let newSchema = structuredClone(schema);
+    Object.keys(diff).forEach((key) => {
+        const diffValue = diff[key].diff;
+        if (diffValue === 'removed') {
+            delete newSchema.properties[key];
+            if (newSchema.order) {
+                newSchema.order = newSchema.order.filter((x) => x !== key);
+            }
+        }
+        else if (diffValue === 'added' || diffValue === 'modified' || isRecordSchemaDiff(diffValue)) {
+            newSchema.properties[key] = diff[key].fullSchema;
+            if (newSchema.order && !newSchema.order.includes(key)) {
+                newSchema.order.push(key);
+            }
+        }
+    });
+    return newSchema;
+}

package/package/components/scriptEditor/LogPanel.svelte.d.ts

@@ -4,16 +4,16 @@ import type Editor from '../Editor.svelte';
 import type DiffEditor from '../DiffEditor.svelte';
 declare const __propDef: {
     props: {
-        lang: Preview["language"] | undefined;
-        previewIsLoading?: boolean;
+        lang: Preview['language'] | undefined;
+        previewIsLoading?: boolean | undefined;
         previewJob: Job | undefined;
-        pastPreviews?: CompletedJob[];
+        pastPreviews?: CompletedJob[] | undefined;
         editor?: Editor | undefined;
         diffEditor?: DiffEditor | undefined;
         args?: Record<string, any> | undefined;
         workspace?: string | undefined;
-        showCaptures?: boolean;
-        setFocusToLogs?: () => void;
+        showCaptures?: boolean | undefined;
+        setFocusToLogs?: (() => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -22,8 +22,6 @@ declare const __propDef: {
         default: {};
         capturesTab: {};
     };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
 };
 export type LogPanelProps = typeof __propDef.props;
 export type LogPanelEvents = typeof __propDef.events;

package/package/components/scripts/CreateActionsScript.svelte.d.ts

@@ -5,8 +5,6 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
 };
 export type CreateActionsScriptProps = typeof __propDef.props;
 export type CreateActionsScriptEvents = typeof __propDef.events;

package/package/components/search/GlobalSearchModal.svelte.d.ts

@@ -1,19 +1,17 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        openSearchWithPrefilledText?: (text?: string) => Promise<void>;
+        openSearchWithPrefilledText?: ((text?: string) => Promise<void>) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
 };
 export type GlobalSearchModalProps = typeof __propDef.props;
 export type GlobalSearchModalEvents = typeof __propDef.events;
 export type GlobalSearchModalSlots = typeof __propDef.slots;
 export default class GlobalSearchModal extends SvelteComponent<GlobalSearchModalProps, GlobalSearchModalEvents, GlobalSearchModalSlots> {
-    get openSearchWithPrefilledText(): (text?: string) => Promise<void>;
+    get openSearchWithPrefilledText(): (text?: string | undefined) => Promise<void>;
 }
 export {};

package/package/components/search/QuickMenuItem.svelte.d.ts

@@ -1,15 +1,15 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        hovered?: boolean;
+        hovered?: boolean | undefined;
         id: string;
-        label?: string;
+        label?: string | undefined;
         icon?: any;
         shortcutKey?: string | undefined;
         containerClass?: string | undefined;
-        mouseMoved?: boolean;
-        kbdClass?: string;
-        small?: boolean;
+        mouseMoved?: boolean | undefined;
+        kbdClass?: string | undefined;
+        small?: boolean | undefined;
     };
     events: {
         hover: CustomEvent<any>;
@@ -20,8 +20,6 @@ declare const __propDef: {
     slots: {
         itemReplacement: {};
     };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
 };
 export type QuickMenuItemProps = typeof __propDef.props;
 export type QuickMenuItemEvents = typeof __propDef.events;

package/package/components/settings/ChangeWorkspaceColor.svelte.d.ts

@@ -1,14 +1,12 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        open?: boolean;
+        open?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
 };
 export type ChangeWorkspaceColorProps = typeof __propDef.props;
 export type ChangeWorkspaceColorEvents = typeof __propDef.events;

package/package/components/settings/ChangeWorkspaceId.svelte.d.ts

@@ -1,14 +1,12 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        open?: boolean;
+        open?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
 };
 export type ChangeWorkspaceIdProps = typeof __propDef.props;
 export type ChangeWorkspaceIdEvents = typeof __propDef.events;

package/package/components/settings/ChangeWorkspaceName.svelte.d.ts

@@ -1,14 +1,12 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        open?: boolean;
+        open?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
 };
 export type ChangeWorkspaceNameProps = typeof __propDef.props;
 export type ChangeWorkspaceNameEvents = typeof __propDef.events;

package/package/components/settings/PremiumInfo.svelte

@@ -1,14 +1,19 @@
 <script>import { base } from '../../base';
-import { capitalize, sendUserToast } from '../../utils';
+import { capitalize, pluralize, sendUserToast } from '../../utils';
 import DataTable from '../table/DataTable.svelte';
 import Cell from '../table/Cell.svelte';
 import { WorkspaceService, UserService } from '../../gen';
 import { workspaceStore } from '../../stores';
 import { Button } from '../common';
 import Tooltip from '../Tooltip.svelte';
-import { ExternalLink, Loader2 } from 'lucide-svelte';
+import { ExternalLink, Loader2, Pen, X } from 'lucide-svelte';
 import { twMerge } from 'tailwind-merge';
 import Toggle from '../Toggle.svelte';
+import Section from '../Section.svelte';
+import Range from '../Range.svelte';
+import Label from '../Label.svelte';
+import Modal from '../common/modal/Modal.svelte';
+import { slide } from 'svelte/transition';
 export let plan;
 export let customer_id;
 let users = undefined;
@@ -37,6 +42,7 @@ $: {
     if ($workspaceStore) {
         loadPremiumInfo();
         listUsers();
+        getThresholdAlert();
     }
 }
 async function listUsers() {
@@ -47,16 +53,17 @@ async function loadPremiumInfo() {
     const developerNb = users?.filter((x) => !x.operator)?.length ?? 0;
     const operatorNb = users?.filter((x) => x.operator)?.length ?? 0;
     const seatsFromUsers = Math.ceil(developerNb + operatorNb / 2);
-    const seatsFromComps = Math.ceil((info.usage ?? 0) / 10000);
-    const usedSeats = Math.max(seatsFromUsers, seatsFromComps);
+    const seatsFromExtraComps = Math.max(Math.ceil((info.usage ?? 0) / 10000) - seatsFromUsers, 0);
+    const usedSeats = seatsFromUsers + seatsFromExtraComps;
     premiumInfo = {
         ...info,
         usage: info.usage ?? 0,
         seats: info.seats ?? 1,
+        owner: info.owner,
         developerNb,
         operatorNb,
         seatsFromUsers,
-        seatsFromComps,
+        seatsFromExtraComps,
         usedSeats
     };
 }
@@ -64,7 +71,6 @@ let billingModeLoading = false;
 async function setAutomaticBilling(ev) {
     try {
         billingModeLoading = true;
-        console.log('toggle check', ev.detail);
         await WorkspaceService.setAutomaticBilling({
             workspace: $workspaceStore,
             requestBody: {
@@ -81,15 +87,74 @@ async function setAutomaticBilling(ev) {
         billingModeLoading = false;
     }
 }
+let thresholdAlert = undefined;
+let newThresholdAlertAmount = undefined;
+let thresholdAlertOpen = false;
+async function getThresholdAlert() {
+    thresholdAlert = await WorkspaceService.getThresholdAlert({ workspace: $workspaceStore });
+}
+async function setThresholdAlert() {
+    if (thresholdAlert) {
+        await WorkspaceService.setThresholdAlert({
+            workspace: $workspaceStore,
+            requestBody: {
+                threshold_alert_amount: newThresholdAlertAmount
+            }
+        });
+        await getThresholdAlert();
+        sendUserToast('Threshold alert updated');
+    }
+}
+let estimatedDevs = 1;
+let estimatedOps = 0;
+$: estimatedSeats = estimatedDevs + Math.ceil(estimatedOps / 2);
+let estimatedExecs = 1;
+function updateExecs() {
+    if (estimatedExecs < estimatedSeats) {
+        estimatedExecs = estimatedSeats;
+    }
+}
+$: estimatedSeats && updateExecs();
 </script>
 
-<div class="flex flex-col gap-4 my-8">
+<Modal bind:open={thresholdAlertOpen} title="Threshold alert">
+	<div class="flex flex-col gap-4">
+		<label class="block">
+			<span class="text-secondary text-sm">Threshold amount in $</span>
+			<input type="number" bind:value={newThresholdAlertAmount} />
+		</label>
+	</div>
+
+	<svelte:fragment slot="actions">
+		<Button
+			size="sm"
+			on:click={() => {
+				setThresholdAlert()
+				thresholdAlertOpen = false
+			}}
+		>
+			Save
+		</Button>
+	</svelte:fragment>
+</Modal>
+
+<div class="flex flex-col gap-4 mt-8">
 	<div class="flex flex-col gap-1">
-		<div class=" text-primary text-lg font-semibold">Plans</div>
+		<div class=" text-primary text-lg font-semibold">
+			{#if premiumInfo?.premium && plan}
+				Plan: {capitalize(plan)} plan{plan === 'team' && premiumInfo.automatic_billing
+					? ' (usage-based)'
+					: plan === 'team'
+					? ` (${premiumInfo.seats} seat${premiumInfo.seats > 1 ? 's' : ''})`
+					: ''}
+			{:else}
+				Plan: Free plan
+			{/if}
+		</div>
 	</div>
 </div>
 {#if customer_id}
-	<div class="mt-2 mb-2">
+	<div class="mt-2">
 		<Button
 			endIcon={{ icon: ExternalLink }}
 			color="dark"
@@ -101,19 +166,12 @@ async function setAutomaticBilling(ev) {
 	</div>
 {/if}
 
-<div class="text-xs my-4">
+<div class="text-xs">
 	{#if premiumInfo?.premium}
-		<div class="flex flex-col gap-0.5">
+		<div class="flex flex-col gap-8 my-8">
 			{#if plan}
-				<div class="text-base inline font-bold leading-8 mb-2">
-					Current plan: {capitalize(plan)} plan{plan === 'team' && premiumInfo.automatic_billing
-						? ' (usage-based)'
-						: plan === 'team'
-						? ` (${premiumInfo.seats} seat${premiumInfo.seats > 1 ? 's' : ''})`
-						: ''}
-				</div>
-				{#if plan === 'team'}
-					<div class="flex flex-row items-center gap-2 mb-4">
+				{#if plan === 'team' && !premiumInfo?.automatic_billing}
+					<div class="flex flex-row items-center gap-2">
 						<Toggle
 							checked={premiumInfo?.automatic_billing}
 							options={{
@@ -137,6 +195,54 @@ async function setAutomaticBilling(ev) {
 			{/if}
 
 			{#if plan}
+				{#if premiumInfo?.automatic_billing}
+					<div class="flex flex-col gap-1.5">
+						<p class="font-semibold text-sm">Billing threshold email alert</p>
+						<div class="flex flex-row gap-0.5 items-center">
+							<p class="text-base text-secondary mr-0.5"
+								>{thresholdAlert?.threshold_alert_amount
+									? thresholdAlert?.threshold_alert_amount + '$'
+									: 'Not set'}</p
+							>
+							<Button
+								on:click={() => {
+									newThresholdAlertAmount = thresholdAlert?.threshold_alert_amount ?? 10
+									thresholdAlertOpen = true
+								}}
+								size="xs"
+								spacingSize="xs2"
+								variant="border"
+								color="light"
+								iconOnly
+								startIcon={{
+									icon: Pen
+								}}
+							/>
+							{#if thresholdAlert?.threshold_alert_amount}
+								<Button
+									on:click={() => {
+										if (thresholdAlert) {
+											newThresholdAlertAmount = undefined
+											setThresholdAlert()
+										}
+									}}
+									variant="border"
+									size="xs"
+									spacingSize="xs2"
+									color="light"
+									iconOnly
+									startIcon={{
+										icon: X
+									}}
+								/>
+							{/if}
+						</div>
+						<p class="italic text-xs"
+							>An email notification will be sent to {premiumInfo.owner} if the specified threshold amount
+							is reached during a given month.</p
+						>
+					</div>
+				{/if}
 				<div class="w-full">
 					<DataTable>
 						<tbody class="divide-y">
@@ -169,9 +275,7 @@ async function setAutomaticBilling(ev) {
 								</Cell>
 							</tr>
 							<tr>
-								<Cell first
-									><div class="font-semibold">Minimum number of seats needed for users</div></Cell
-								>
+								<Cell first><div class="font-semibold">Number of seats for users</div></Cell>
 								<Cell last numeric>
 									<div class="text-base font-bold">
 										u = ceil({premiumInfo.developerNb} + {premiumInfo.operatorNb}/2) = {premiumInfo.seatsFromUsers}
@@ -186,14 +290,22 @@ async function setAutomaticBilling(ev) {
 									</div>
 								</Cell>
 							</tr>
+							<tr>
+								<Cell first>Included computations with users (10k per user seat)</Cell>
+								<Cell last numeric>
+									<div class="text-base">
+										- {premiumInfo.seatsFromUsers * 10000}
+									</div>
+								</Cell>
+							</tr>
 							<tr>
 								<Cell first
-									><div class="font-semibold">Minimum number of seats needed for computations</div
-									></Cell
+									><div class="font-semibold">Number of seats for extra computations</div></Cell
 								>
 								<Cell last numeric>
 									<div class="text-base font-bold">
-										c = ceil({premiumInfo.usage} / 10 000) = {premiumInfo.seatsFromComps}
+										c = ceil({Math.max(0, premiumInfo.usage - premiumInfo.seatsFromUsers * 10000)} /
+										10 000) = {premiumInfo.seatsFromExtraComps}
 									</div>
 								</Cell>
 							</tr>
@@ -228,8 +340,7 @@ async function setAutomaticBilling(ev) {
 												: ''
 										)}
 									>
-										max(u, c) = max({premiumInfo.seatsFromUsers}, {premiumInfo.seatsFromComps}) = {premiumInfo.usedSeats}{plan ===
-											'team' &&
+										u + c = {premiumInfo.usedSeats}{plan === 'team' &&
 										premiumInfo.usedSeats > premiumInfo.seats &&
 										!premiumInfo.automatic_billing
 											? ` > ${premiumInfo.seats}`
@@ -250,11 +361,82 @@ async function setAutomaticBilling(ev) {
 			{/if}
 		</div>
 	{:else}
-		This workspace is <b>not</b> on a team plan. Users use their global free-tier quotas when doing executions
-		in this workspace. Upgrade to a Team or Enterprise plan to unlock unlimited executions in this workspace.
+		<div class="mb-8 mt-2">
+			This workspace is <b>not</b> on a team plan. Users use their global free-tier quotas when doing
+			executions in this workspace. Upgrade to a Team or Enterprise plan to unlock unlimited executions
+			in this workspace.
+		</div>
 	{/if}
 </div>
 
+<Section collapsable label="Cost estimator">
+	<div class="border p-4 rounded-md" transition:slide>
+		<Label label="Number of developers">
+			<Range min={1} max={20} bind:value={estimatedDevs} hideInput />
+		</Label>
+		<Label label="Number of operators">
+			<Range min={0} max={20} bind:value={estimatedOps} hideInput />
+		</Label>
+		<Label label="Number of executions">
+			<Range
+				min={estimatedSeats}
+				max={100}
+				bind:value={estimatedExecs}
+				format={(v) => `${v * 10}k`}
+				hideInput
+			/>
+		</Label>
+		<div class="mt-4 text-base">
+			<div class="flex flex-row justify-between">
+				<div>Seats for users = {estimatedDevs} devs + {estimatedOps} ops / 2</div>
+				<div>{pluralize(estimatedSeats, 'seat')}</div>
+			</div>
+			<div class="flex flex-row justify-between">
+				<div
+					>Extra computations = {estimatedExecs * 10}k execs - {estimatedSeats * 10}k included with
+					users</div
+				>
+				<div
+					>{(estimatedExecs - estimatedSeats) * 10}k extra execs = {pluralize(
+						estimatedExecs - estimatedSeats,
+						'seat'
+					)}</div
+				>
+			</div>
+			<div class="flex flex-row justify-between font-medium items-center">
+				<div>Total</div>
+				<div class="flex flex-col items-end">
+					<div>
+						{pluralize(estimatedSeats + (estimatedExecs - estimatedSeats), 'seat')} = {(estimatedSeats +
+							(estimatedExecs - estimatedSeats)) *
+							10}$ / month
+					</div>
+					{#if premiumInfo?.premium && plan === 'team'}
+						<button
+							class="text-xs text-blue-500 underline"
+							on:click={() => {
+								newThresholdAlertAmount = (estimatedSeats + (estimatedExecs - estimatedSeats)) * 10
+								thresholdAlertOpen = true
+							}}
+						>
+							Setup threshold email alert
+						</button>
+					{/if}
+				</div>
+			</div>
+			{#if (estimatedSeats + (estimatedExecs - estimatedSeats)) * 10 > 700}
+				<a
+					class="mt-4 text-teal-600 font-semibold text-center block underline"
+					href="https://www.windmill.dev/pricing"
+					target="_blank"
+				>
+					You should consider subscribing to Cloud Enterprise
+				</a>
+			{/if}
+		</div>
+	</div>
+</Section>
+
 <div class="text-base font-bold leading-8 mb-2 pt-8"> All plans </div>
 
 <div class="grid grid-cols-1 md:grid-cols-3 gap-4">

package/package/components/settings/PremiumInfo.svelte.d.ts

@@ -8,8 +8,6 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
 };
 export type PremiumInfoProps = typeof __propDef.props;
 export type PremiumInfoEvents = typeof __propDef.events;