windmill-components 1.309.7 → 1.352.0

package/package/components/FlowStatusViewerInner.svelte

@@ -17,6 +17,8 @@ import { deepEqual } from 'fast-equals';
 import FlowTimeline from './FlowTimeline.svelte';
 import { dfs } from './flows/dfs';
 import { writable } from 'svelte/store';
+import Alert from './common/alert/Alert.svelte';
+import FlowGraphViewerStep from './FlowGraphViewerStep.svelte';
 const dispatch = createEventDispatcher();
 let { flowStateStore, retryStatus, suspendStatus } = getContext('FlowStatusViewer');
 export let jobId;
@@ -32,9 +34,11 @@ export let globalModuleStates;
 export let globalDurationStatuses;
 export let childFlow = false;
 export let reducedPolling = false;
+export let wideResults = false;
 let jobResults = [];
 let jobFailures = [];
 let forloop_selected = '';
+let retry_selected = '';
 let timeout;
 let localModuleStates = writable({});
 let localDurationStatuses = writable({});
@@ -94,6 +98,7 @@ function updateStatus(status) {
     }
     else if ($retryStatus[jobId ?? ''] != undefined) {
         delete $retryStatus[jobId ?? ''];
+        $retryStatus = $retryStatus;
     }
     let jobStatus = job?.flow_status?.modules?.[job?.flow_status.step];
     if (jobStatus && jobStatus.count != undefined) {
@@ -101,6 +106,7 @@ function updateStatus(status) {
     }
     else if ($suspendStatus[jobId ?? ''] != undefined) {
         delete $suspendStatus[jobId ?? ''];
+        $suspendStatus = $suspendStatus;
     }
 }
 function updateInnerModules() {
@@ -137,7 +143,9 @@ function updateInnerModules() {
     }
 }
 let errorCount = 0;
+let notAnonynmous = false;
 async function loadJobInProgress() {
+    dispatch('start');
     if (jobId != '00000000-0000-0000-0000-000000000000') {
         try {
             const newJob = await JobService.getJob({
@@ -151,16 +159,26 @@ async function loadJobInProgress() {
                 dispatch('jobsLoaded', job);
             }
             errorCount = 0;
+            notAnonynmous = false;
         }
         catch (e) {
-            errorCount += 1;
-            console.error(e);
+            if (e?.body?.includes('As a non logged in user, you can only see jobs ran by anonymous users')) {
+                notAnonynmous = true;
+            }
+            else {
+                errorCount += 1;
+                console.error(e);
+            }
         }
     }
-    if (job?.type !== 'CompletedJob' && errorCount < 4) {
+    if (job?.type !== 'CompletedJob' && errorCount < 4 && !destroyed) {
         timeout = setTimeout(() => loadJobInProgress(), reducedPolling ? 5000 : 1000);
     }
+    else {
+        dispatch('done', job);
+    }
 }
+let destroyed = false;
 async function updateJobId() {
     if (jobId !== job?.id) {
         $localModuleStates = {};
@@ -168,11 +186,12 @@ async function updateJobId() {
         timeout && clearTimeout(timeout);
         innerModules = [];
         if (flowJobIds) {
+            let modId = flowJobIds?.moduleId ?? '';
             let common = {
-                iteration_from: Math.max(flowJobIds.flowJobs.length - 20, 0),
-                iteration_total: flowJobIds?.length
+                iteration_from: $localDurationStatuses?.[modId]?.iteration_from ??
+                    Math.max(flowJobIds.flowJobs.length - 20, 0),
+                iteration_total: $localDurationStatuses?.[modId]?.iteration_total ?? flowJobIds?.length
             };
-            let modId = flowJobIds?.moduleId ?? '';
             $localDurationStatuses[modId] = {
                 ...($localDurationStatuses[modId] ?? { byJob: {} }),
                 ...common
@@ -192,6 +211,7 @@ async function updateJobId() {
 $: jobId && updateJobId();
 $: isListJob = flowJobIds != undefined && Array.isArray(flowJobIds?.flowJobs);
 onDestroy(() => {
+    destroyed = true;
     timeout && clearTimeout(timeout);
 });
 $: selected = isListJob ? 'sequence' : 'graph';
@@ -241,7 +261,8 @@ function onJobsLoaded(mod, job) {
                 duration_ms: job['duration_ms'],
                 started_at: started_at,
                 iteration: mod.iterator?.itered?.length,
-                iteration_total: mod.iterator?.itered?.length
+                iteration_total: mod.iterator?.itered?.length,
+                retries: mod?.failed_retries?.length
                 // retries: $flowStateStore?.raw_flow
             });
             setDurationStatusByJob(mod.id, job.id, {
@@ -357,10 +378,15 @@ function loadPreviousIters(lenToAdd) {
     jobResults = [...new Array(lenToAdd), ...jobResults];
     updateSlicedListJobIds();
 }
+let stepDetail = undefined;
 </script>
 
-{#if job}
-	<div class="flow-root w-full space-y-4">
+{#if notAnonynmous}
+	<Alert type="error" title="Required Auth">
+		As a non logged in user, you can only see jobs ran by anonymous users like you
+	</Alert>
+{:else if job}
+	<div class="flow-root w-full space-y-4 {wideResults ? '' : 'max-w-7xl'} mx-auto px-4">
 		<!-- {#if innerModules.length > 0 && true}
 			<h3 class="text-md leading-6 font-bold text-primay border-b pb-2">Flow result</h3>
 		{:else}
@@ -394,7 +420,7 @@ function loadPreviousIters(lenToAdd) {
 				</p>
 			{/if}
 			{#if render}
-				<div class="w-full h-full border border-secondary bg-surface p-1 overflow-auto">
+				<div class="w-full h-full border rounded-sm bg-surface p-1 overflow-auto">
 					<DisplayResult workspaceId={job?.workspace_id} {jobId} result={jobResults} />
 				</div>
 			{/if}
@@ -413,6 +439,7 @@ function loadPreviousIters(lenToAdd) {
 							loading={job['running'] == true}
 							result={job.result}
 							logs={job.logs}
+							durationStates={localDurationStatuses}
 						/>
 					</div>
 				{:else if job.flow_status?.modules?.[job?.flow_status?.step]?.type === 'WaitingForEvents'}
@@ -464,13 +491,13 @@ function loadPreviousIters(lenToAdd) {
 		{/if}
 		{#if render}
 			{#if innerModules.length > 0 && !isListJob}
-				<Tabs bind:selected>
+				<Tabs class="mx-auto {wideResults ? '' : 'max-w-7xl'}" bind:selected>
 					<Tab value="graph"><span class="font-semibold text-md">Graph</span></Tab>
 					<Tab value="sequence"><span class="font-semibold">Details</span></Tab>
 				</Tabs>
 			{/if}
 		{/if}
-		<div class={selected != 'sequence' ? 'hidden' : ''}>
+		<div class="{selected != 'sequence' ? 'hidden' : ''} max-w-7xl mx-auto">
 			{#if isListJob}
 				{@const lenToAdd = Math.min(
 					20,
@@ -574,6 +601,43 @@ function loadPreviousIters(lenToAdd) {
 							<div class="line w-8 h-10" />
 						{/if}
 						<li class="w-full border p-6 space-y-2 bg-blue-50/50 dark:bg-frost-900/50">
+							{#if render && Array.isArray(mod.failed_retries)}
+								{#each mod.failed_retries as failedRetry, j}
+									<Button
+										variant={retry_selected === failedRetry ? 'contained' : 'border'}
+										color="red"
+										btnClasses="w-full flex justify-start"
+										on:click={() => {
+											if (retry_selected == failedRetry) {
+												retry_selected = ''
+											} else {
+												retry_selected = failedRetry
+											}
+										}}
+										endIcon={{
+											icon: ChevronDown,
+											classes: retry_selected == failedRetry ? '!rotate-180' : ''
+										}}
+									>
+										<span class="truncate font-mono">
+											# Attempt {j + 1}: {failedRetry}
+										</span>
+									</Button>
+
+									<!-- <LogId id={loopJobId} /> -->
+									<div class="border p-6" class:hidden={retry_selected != failedRetry}>
+										<svelte:self
+											{childFlow}
+											globalModuleStates={[localModuleStates, ...globalModuleStates]}
+											globalDurationStatuses={[localDurationStatuses, ...globalDurationStatuses]}
+											render={failedRetry == retry_selected}
+											reducedPolling={false}
+											{workspaceId}
+											jobId={failedRetry}
+										/>
+									</div>
+								{/each}
+							{/if}
 							{#if ['InProgress', 'Success', 'Failure'].includes(mod.type)}
 								{#if job.raw_flow?.modules[i]?.value.type == 'flow'}
 									<svelte:self
@@ -620,8 +684,8 @@ function loadPreviousIters(lenToAdd) {
 	</div>
 	{#if render}
 		{#if job.raw_flow && !isListJob}
-			<div class="{selected != 'graph' ? 'hidden' : ''} mt-4">
-				<div class="grid grid-cols-3 border">
+			<div class="{selected != 'graph' ? 'hidden' : ''} grow mt-4">
+				<div class="grid grid-cols-3 border h-full">
 					<div class="col-span-2 bg-surface-secondary">
 						<div class="flex flex-col">
 							{#each Object.values($retryStatus) as count}
@@ -645,16 +709,22 @@ function loadPreviousIters(lenToAdd) {
 							success={jobId != undefined && isSuccess(job?.['success'])}
 							flowModuleStates={$localModuleStates}
 							on:select={(e) => {
-								rightColumnSelect = 'detail'
+								if (rightColumnSelect != 'node_definition') {
+									rightColumnSelect = 'node_status'
+								}
 								if (typeof e.detail == 'string') {
 									if (e.detail == 'Input') {
 										selectedNode = 'start'
+										stepDetail = undefined
 									} else if (e.detail == 'Result') {
 										selectedNode = 'end'
+										stepDetail = 'end'
 									} else {
 										selectedNode = e.detail
+										stepDetail = e.detail
 									}
 								} else {
+									stepDetail = e.detail
 									selectedNode = e.detail.id
 								}
 							}}
@@ -663,24 +733,27 @@ function loadPreviousIters(lenToAdd) {
 						/>
 					</div>
 					<div
-						class="border-l border-tertiary-inverse pt-1 overflow-auto min-h-[700px] flex flex-col"
+						class="border-l border-tertiary-inverse pt-1 overflow-auto min-h-[700px] flex flex-col z-0"
 					>
 						<Tabs bind:selected={rightColumnSelect}>
 							<Tab value="timeline"><span class="font-semibold text-md">Timeline</span></Tab>
-							<Tab value="detail"><span class="font-semibold">Details</span></Tab>
+							<Tab value="node_status"><span class="font-semibold">Node status</span></Tab>
+							<Tab value="node_definition"><span class="font-semibold">Node definition</span></Tab>
 							{#if Object.keys(job?.flow_status?.user_states ?? {}).length > 0}
 								<Tab value="user_states"><span class="font-semibold">User States</span></Tab>
 							{/if}
 						</Tabs>
 						{#if rightColumnSelect == 'timeline'}
 							<FlowTimeline
+								selfWaitTime={job?.self_wait_time_ms}
+								aggregateWaitTime={job?.aggregate_wait_time_ms}
 								flowDone={job?.['success'] != undefined}
 								bind:this={flowTimeline}
 								flowModules={dfs(job.raw_flow?.modules ?? [], (x) => x.id)}
 								durationStatuses={localDurationStatuses}
 							/>
-						{:else if rightColumnSelect == 'detail'}
-							<div class="pt-2 h-full">
+						{:else if rightColumnSelect == 'node_status'}
+							<div class="pt-2 max-h-[80vh]">
 								{#if selectedNode}
 									{@const node = $localModuleStates[selectedNode]}
 
@@ -694,6 +767,7 @@ function loadPreviousIters(lenToAdd) {
 											col
 											result={job['result']}
 											logs={job.logs ?? ''}
+											durationStates={localDurationStatuses}
 										/>
 									{:else if selectedNode == 'start'}
 										{#if job.args}
@@ -739,6 +813,7 @@ function loadPreviousIters(lenToAdd) {
 											col
 											result={node.result}
 											logs={node.logs}
+											durationStates={localDurationStatuses}
 										/>
 									{:else}
 										<p class="p-2 text-tertiary italic"
@@ -749,6 +824,8 @@ function loadPreviousIters(lenToAdd) {
 								{:else}<p class="p-2 text-tertiary italic">Select a node to see its details here</p
 									>{/if}
 							</div>
+						{:else if rightColumnSelect == 'node_definition'}
+							<FlowGraphViewerStep {stepDetail} />
 						{:else if rightColumnSelect == 'user_states'}
 							<div class="p-2">
 								<JobArgs argLabel="Key" args={job?.flow_status?.user_states ?? {}} />

package/package/components/FlowStatusViewerInner.svelte.d.ts

@@ -20,9 +20,12 @@ declare const __propDef: {
         globalDurationStatuses: Writable<Record<string, DurationStatus>>[];
         childFlow?: boolean | undefined;
         reducedPolling?: boolean | undefined;
+        wideResults?: boolean | undefined;
     };
     events: {
+        start: CustomEvent<any>;
         jobsLoaded: CustomEvent<any>;
+        done: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/FlowTimeline.svelte

@@ -3,6 +3,9 @@ import { onDestroy } from 'svelte';
 import { getDbClockNow } from '../forLater';
 import { Loader2 } from 'lucide-svelte';
 import TimelineBar from './TimelineBar.svelte';
+import WaitTimeWarning from './common/waitTimeWarning/WaitTimeWarning.svelte';
+export let selfWaitTime = undefined;
+export let aggregateWaitTime = undefined;
 export let flowModules;
 export let durationStatuses;
 export let flowDone = false;
@@ -113,6 +116,16 @@ onDestroy(() => {
 				</div>
 			</div>
 		</div>
+		{#if selfWaitTime}
+			<div class="px-2 py-2 grid grid-cols-6 w-full">
+				root:
+				<WaitTimeWarning
+					self_wait_time_ms={selfWaitTime}
+					aggregate_wait_time_ms={aggregateWaitTime}
+					variant="badge-self-wait"
+				/>
+			</div>
+		{/if}
 		{#each Object.values(flowModules) as k (k)}
 			<div class="overflow-auto max-h-60 shadow-inner dark:shadow-gray-700 relative">
 				{#if ($durationStatuses?.[k]?.iteration_from ?? 0) > 0}

package/package/components/FlowTimeline.svelte.d.ts

@@ -2,6 +2,8 @@ import { SvelteComponent } from "svelte";
 import type { Writable } from 'svelte/store';
 declare const __propDef: {
     props: {
+        selfWaitTime?: number | undefined;
+        aggregateWaitTime?: number | undefined;
         flowModules: string[];
         durationStatuses: Writable<Record<string, {
             byJob: Record<string, {

package/package/components/FlowViewer.svelte

@@ -5,14 +5,9 @@ import SchemaViewer from './SchemaViewer.svelte';
 import FieldHeader from './FieldHeader.svelte';
 import { copyToClipboard } from '../utils';
 import FlowGraphViewer from './FlowGraphViewer.svelte';
-import { setContext } from 'svelte';
-import { SVELVET_CONTEXT_KEY } from './graph/svelvet/container/models';
 import { Clipboard } from 'lucide-svelte';
 import YAML from 'yaml';
 import { yaml } from 'svelte-highlight/languages';
-setContext(SVELVET_CONTEXT_KEY, {
-    fullHeight: true
-});
 export let flow;
 export let initialOpen = undefined;
 export let noSide = false;

package/package/components/FolderEditor.svelte

@@ -9,6 +9,9 @@ import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte
 import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
 import Section from './Section.svelte';
 import { Eye, Plus } from 'lucide-svelte';
+import Label from './Label.svelte';
+import { sendUserToast } from '../toast';
+import { createEventDispatcher } from 'svelte';
 export let name;
 let can_write = false;
 let folder;
@@ -49,6 +52,7 @@ let folderNotFound = undefined;
 async function loadFolder() {
     try {
         folder = await FolderService.getFolder({ workspace: $workspaceStore, name });
+        summary = folder.summary ?? '';
         can_write =
             $userStore != undefined &&
                 (folder?.owners.includes('u/' + $userStore.username) ||
@@ -85,6 +89,7 @@ function getRole(x) {
 let ownerKind = 'user';
 let groupCreated = undefined;
 let newGroupName = '';
+let summary = '';
 async function addGroup() {
     await GroupService.createGroup({
         workspace: $workspaceStore ?? '',
@@ -95,6 +100,17 @@ async function addGroup() {
     loadGroups();
     ownerItem = newGroupName;
 }
+const dispatch = createEventDispatcher();
+async function updateFolder() {
+    await FolderService.updateFolder({
+        workspace: $workspaceStore ?? '',
+        name,
+        requestBody: { summary }
+    });
+    sendUserToast('Folder summary updated');
+    dispatch('update');
+    loadFolder();
+}
 </script>
 
 <Drawer bind:this={newGroup}>
@@ -124,6 +140,15 @@ async function addGroup() {
 	</DrawerContent>
 </Drawer>
 
+<Section label="Metadata" class="mb-4">
+	<Label label="Summary">
+		<div class="flex flex-row gap-2">
+			<input placeholder="Short summary to be displayed when listed" bind:value={summary} />
+			<Button size="sm" on:click={updateFolder} disabled={!can_write}>Save</Button>
+		</div>
+	</Label>
+</Section>
+
 <Section label={`Permissions (${perms?.length ?? 0})`}>
 	<div class="flex flex-col gap-6">
 		{#if can_write}

package/package/components/FolderEditor.svelte.d.ts

@@ -4,6 +4,8 @@ declare const __propDef: {
         name: string;
     };
     events: {
+        update: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/package/components/GroupEditor.svelte

@@ -2,7 +2,6 @@
 import { userStore, workspaceStore } from '../stores';
 import AutoComplete from 'simple-svelte-autocomplete';
 import { createEventDispatcher } from 'svelte';
-import autosize from '../autosize';
 import { Button } from './common';
 import Skeleton from './common/skeleton/Skeleton.svelte';
 import TableCustom from './TableCustom.svelte';
@@ -10,6 +9,8 @@ import { sendUserToast } from '../toast';
 import { canWrite } from '../utils';
 import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
 import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
+import Section from './Section.svelte';
+import Label from './Label.svelte';
 export let name;
 let can_write = false;
 let group;
@@ -17,6 +18,7 @@ let instance_group;
 let members = undefined;
 let usernames = [];
 let username = '';
+let summary = '';
 const dispatch = createEventDispatcher();
 async function loadUsernames() {
     usernames = await UserService.listUsernames({ workspace: $workspaceStore });
@@ -58,10 +60,12 @@ async function loadGroup() {
                 role: getRole(x)
             };
         });
+        summary = group.summary ?? '';
     }
     catch (e) {
         can_write = false;
         members = [];
+        summary = '';
         group = {
             name
         };
@@ -82,37 +86,28 @@ function getRole(x) {
 }
 </script>
 
-<div class="flex flex-col gap-6">
-	<h1>{name}</h1>
-	{#if group}
-		<div class="flex flex-col gap-1">
-			<textarea
-				disabled={!can_write}
-				rows="2"
-				use:autosize
-				bind:value={group.summary}
-				placeholder="Summary of the group"
-			/>
-			<div class="flex justify-end">
-				<Button
-					disabled={!can_write}
-					size="xs"
-					on:click={async () => {
-						await GroupService.updateGroup({
-							workspace: $workspaceStore ?? '',
-							name,
-							requestBody: { summary: group?.summary }
-						})
-						dispatch('update')
-						sendUserToast('New summary saved')
-					}}>Save Summary</Button
-				>
-			</div>
+<Section label="Metadata" class="mb-4">
+	<Label label="Summary">
+		<div class="flex flex-row gap-2">
+			<input placeholder="Short summary to be displayed when listed" bind:value={summary} />
+			<Button
+				size="sm"
+				on:click={async () => {
+					await GroupService.updateGroup({
+						workspace: $workspaceStore ?? '',
+						name,
+						requestBody: { summary }
+					})
+					dispatch('update')
+					sendUserToast('Group summary updated')
+					loadGroup()
+				}}>Save</Button
+			>
 		</div>
-	{:else}
-		<Skeleton layout={[[4]]} />
-	{/if}
-	<h2>Members ({members?.length ?? 0})</h2>
+	</Label>
+</Section>
+
+<Section label={`Members (${members?.length ?? 0})`}>
 	{#if can_write}
 		<div class="flex items-start">
 			<AutoComplete required noInputStyles items={usernames} bind:selectedItem={username} />
@@ -202,13 +197,6 @@ function getRole(x) {
 											label="Member"
 											tooltip="A Member of a group can see everything the group can see, write to everything the group can write, and generally act on behalf of the group"
 										/>
-
-										<!-- <ToggleButton position="center" value="manager" size="xs"
-											>Manager <Tooltip
-												>A manager of a group can manage the group, adding and removing users and
-												change their roles. Being a manager does not make you a member.</Tooltip
-											></ToggleButton
-										> -->
 										<ToggleButton
 											position="right"
 											value="admin"
@@ -216,6 +204,15 @@ function getRole(x) {
 											label="Admin"
 											tooltip="An admin of a group is a member of a group that can also add and remove members to the group, or make them admin."
 										/>
+										{#if role === 'manager'}
+											<ToggleButton
+												value="manager"
+												size="xs"
+												label="Manager"
+												tooltip="A manager of a group can manage the group, adding and removing users and
+												change their roles. Being a manager does not make you a member"
+											/>
+										{/if}
 									</ToggleButtonGroup>
 								</div>
 							{:else}
@@ -262,58 +259,6 @@ function getRole(x) {
 				</tbody>
 			</TableCustom>
 		{/if}
-
-		<!-- <h2 class="mt-10"
-			>Groups managing this group <Tooltip>Any member of those groups can manage this group</Tooltip
-			></h2
-		>
-		{#if can_write}
-			<div class="flex items-start">
-				<AutoComplete items={groups} bind:selectedItem={new_managing_group} />
-				<Button
-					variant="contained"
-					color="blue"
-					size="sm"
-					btnClasses="!ml-4"
-					on:click={addToManagingGroup}
-				>
-					Add group managing this group
-				</Button>
-			</div>
-		{/if}
-		{#if managing_groups.length == 0}
-			<p class="text-tertiary text-sm">No group is managing this group</p>
-		{:else}
-			<TableCustom>
-				<tr slot="header-row">
-					<th>group</th>
-					<th />
-				</tr>
-				<tbody slot="body">
-					{#each managing_groups as managing_group}<tr>
-							<td>{managing_group.split('/')[1]}</td>
-							<td>
-								{#if can_write}
-									<button
-										class="ml-2 text-red-500"
-										on:click={async () => {
-											await GranularAclService.removeGranularAcls({
-												workspace: $workspaceStore ?? '',
-												path: name,
-												kind: 'group_',
-												requestBody: {
-													owner: managing_group
-												}
-											})
-											loadGroup()
-										}}>remove</button
-									>
-								{/if}</td
-							>
-						</tr>{/each}
-				</tbody>
-			</TableCustom>
-		{/if} -->
 	{:else}
 		<div class="flex flex-col">
 			{#each new Array(6) as _}
@@ -321,4 +266,4 @@ function getRole(x) {
 			{/each}
 		</div>
 	{/if}
-</div>
+</Section>

package/package/components/GroupInfo.svelte

@@ -12,7 +12,7 @@ async function loadMembers() {
 {#if members}
 	<Popover
 		><div class="inline-flex gap-1 items-end"
-			><span class="text-tertiary text-xs mb-0.5">({members.length})</span>
+			><span class="text-tertiary text-xs">({members.length})</span>
 			<div class="max-w-xs truncate"
 				><span class="text-tertiary text-xs">{members?.join(', ')}</span></div
 			></div

package/package/components/HighlightCode.svelte

@@ -7,6 +7,7 @@ import graphql from 'svelte-highlight/languages/graphql';
 import javascript from 'svelte-highlight/languages/javascript';
 import sql from 'svelte-highlight/languages/sql';
 import powershell from 'svelte-highlight/languages/powershell';
+import php from 'svelte-highlight/languages/php';
 import { Button } from './common';
 import { copyToClipboard } from '../utils';
 import { ClipboardCopy } from 'lucide-svelte';
@@ -41,6 +42,8 @@ function getLang(lang) {
             return sql;
         case 'powershell':
             return powershell;
+        case 'php':
+            return php;
         default:
             return typescript;
     }