windmill-components 1.36.2 → 1.37.0

package/components/DisplayResult.svelte

@@ -52,7 +52,7 @@ function inferResultKind(result) {
 </script>
 
 <div class="inline-highlight">
-	{#if result}
+	{#if result != undefined}
 		{#if resultKind && resultKind != 'json'}
 			<div class="mb-2 text-gray-500 text-sm bg-gray-50/20">
 				as JSON <input type="checkbox" bind:checked={forceJson} /></div
@@ -117,7 +117,7 @@ function inferResultKind(result) {
 				>
 			</div>
 		{:else if !forceJson && resultKind == 'error'}<div
-				><pre class="text-sm text-red-500">{result.error}</pre>
+				><pre class="text-sm text-red-500 whitespace-pre-wrap">{result.error}</pre>
 			</div>
 		{:else}<Highlight
 				language={json}

package/components/Editor.svelte

@@ -39,7 +39,7 @@ export let hash = randomHash();
 export let cmdEnterAction = undefined;
 export let formatAction = undefined;
 export let automaticLayout = true;
-export let websocketAlive = { pyright: false, black: false, deno: false };
+export let websocketAlive = { pyright: false, black: false, deno: false, go: false };
 export let shouldBindKey = true;
 let websockets = [];
 let websocketInterval;
@@ -47,7 +47,7 @@ let lastWsAttempt = new Date();
 let nbWsAttempt = 0;
 let disposeMethod;
 const dispatch = createEventDispatcher();
-const uri = `file:///${hash}.${langToExt(lang)}`;
+const uri = `file:///tmp/monaco/${hash}.${langToExt(lang)}`;
 if (browser) {
     if (dev) {
         buildWorkerDefinition('../../../node_modules/monaco-editor-workers/dist/workers', import.meta.url, false);
@@ -267,12 +267,20 @@ export async function reloadWebsocket() {
             }
         });
     }
+    else if (lang === 'go') {
+        connectToLanguageServer(`wss://${$page.url.host}/ws/go`, 'go', {
+            'build.allowImplicitNetworkAccess': true
+        });
+    }
     websocketInterval && clearInterval(websocketInterval);
     websocketInterval = setInterval(() => {
         if (document.visibilityState == 'visible') {
             if (!lastWsAttempt ||
                 (new Date().getTime() - lastWsAttempt.getTime() > 60000 && nbWsAttempt < 2)) {
-                if (!websocketAlive.black && !websocketAlive.deno && !websocketAlive.pyright) {
+                if (!websocketAlive.black &&
+                    !websocketAlive.deno &&
+                    !websocketAlive.pyright &&
+                    !websocketAlive.go) {
                     console.log('reconnecting to language servers');
                     lastWsAttempt = new Date();
                     nbWsAttempt++;
@@ -335,6 +343,7 @@ async function loadMonaco() {
         if (!websocketAlive.black &&
             !websocketAlive.deno &&
             !websocketAlive.pyright &&
+            !websocketAlive.go &&
             !websocketInterval) {
             reloadWebsocket();
         }

package/components/Editor.svelte.d.ts

@@ -13,6 +13,7 @@ declare const __propDef: {
             pyright: boolean;
             black: boolean;
             deno: boolean;
+            go: boolean;
         } | undefined;
         shouldBindKey?: boolean | undefined;
         getCode?: (() => string) | undefined;

package/components/EditorBar.svelte

@@ -1,14 +1,13 @@
 <script>import { ResourceService, ScriptService, VariableService } from '../gen';
 import { getScriptByPath, loadHubScripts, sendUserToast } from '../utils';
-import { faCode, faCube, faDollarSign, faFile, faRotate, faRotateLeft, faWallet } from '@fortawesome/free-solid-svg-icons';
+import { faCode, faCube, faDollarSign, faRotate, faRotateLeft, faWallet } from '@fortawesome/free-solid-svg-icons';
 import { hubScripts, workspaceStore } from '../stores';
-import { Highlight } from 'svelte-highlight';
-import { python, typescript } from 'svelte-highlight/languages';
 import ItemPicker from './ItemPicker.svelte';
 import Modal from './Modal.svelte';
 import ResourceEditor from './ResourceEditor.svelte';
 import VariableEditor from './VariableEditor.svelte';
 import Button from './common/button/Button.svelte';
+import HighlightCode from './HighlightCode.svelte';
 export let lang;
 export let editor;
 export let websocketAlive;
@@ -68,11 +67,7 @@ async function loadScripts() {
 <Modal bind:this={codeViewer}>
 	<div slot="title">Code</div>
 	<div slot="content">
-		{#if codeLang == 'python3'}
-			<Highlight language={python} code={codeContent} />
-		{:else if codeLang == 'deno'}
-			<Highlight language={typescript} code={codeContent} />
-		{/if}
+		<HighlightCode language={codeLang} code={codeContent} />
 	</div></Modal
 >
 
@@ -261,6 +256,8 @@ async function loadScripts() {
 			<span class="ml-1">
 				{#if lang == 'deno'}
 					(<span class={websocketAlive.deno ? 'text-green-600' : 'text-red-700'}>Deno</span>)
+				{:else if lang == 'go'}
+					(<span class={websocketAlive.go ? 'text-green-600' : 'text-red-700'}>Go</span>)
 				{:else if lang == 'python3'}
 					(<span class={websocketAlive.pyright ? 'text-green-600' : 'text-red-700'}>Pyright</span>
 					<span class={websocketAlive.black ? 'text-green-600' : 'text-red-700'}>Black</span>)

package/components/EditorBar.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
             pyright: boolean;
             black: boolean;
             deno: boolean;
+            go: boolean;
         };
         iconOnly?: boolean | undefined;
     };

package/components/FlowModulesViewer.svelte

@@ -83,8 +83,6 @@ let open = {};
 											/>
 										</div>
 									{/if}
-								{:else if mod?.value?.type == 'flow'}
-									Flow at path {mod?.value?.path}
 								{:else if mod?.value?.type == 'forloopflow'}
 									For loop over all the elements of the list returned as a result of step {i}:
 									<svelte:self modules={mod.value.modules} />

package/components/FlowPreviewContent.svelte

@@ -25,7 +25,6 @@ function extractFlow(previewMode) {
         const modules = flow.value.modules.slice(0, Number(parentIndex) + 1);
         flow.value.modules = modules;
         if (childIndex != undefined) {
-            console.log(modules);
             const lastModule = modules[modules.length - 1].value;
             if (lastModule.type === 'forloopflow') {
                 lastModule.modules = lastModule.modules.slice(0, Number(childIndex) + 1);
@@ -56,6 +55,15 @@ function onKeyDown(event) {
             break;
     }
 }
+function onJobsLoaded(jobResult) {
+    if (jobResult.job?.type === 'CompletedJob') {
+        isRunning = false;
+    }
+    const upToIndex = previewMode === 'upTo'
+        ? selectedIdToIndexes($selectedId)[0] + 1
+        : $flowStateStore.modules.length;
+    mapJobResultsToFlowState(jobResult, upToIndex);
+}
 </script>
 
 <svelte:window on:keydown={onKeyDown} />
@@ -129,16 +137,7 @@ function onKeyDown(event) {
 
 	<div class="h-full overflow-y-auto mb-16 grow">
 		{#if jobId}
-			<FlowStatusViewer
-				{jobId}
-				on:jobsLoaded={(e) => {
-					isRunning = false
-					const parentIndex = selectedIdToIndexes($selectedId)[0]
-					const upToIndex =
-						previewMode === 'upTo' ? Number(parentIndex) + 1 : $flowStateStore.modules.length
-					mapJobResultsToFlowState(e.detail, upToIndex)
-				}}
-			/>
+			<FlowStatusViewer {jobId} on:jobsLoaded={(e) => onJobsLoaded(e.detail)} />
 		{/if}
 	</div>
 </div>

package/components/FlowStatusViewer.svelte

@@ -23,15 +23,24 @@ async function loadJobInProgress() {
         workspace: $workspaceStore ?? '',
         id: jobId ?? ''
     });
-    jobResult.job = job;
-    jobResult = jobResult;
+    if (jobResult) {
+        jobResult.job = job;
+        jobResult = jobResult;
+    }
+    else {
+        jobResult = {
+            job: job,
+            innerJobs: [],
+            loopJobs: []
+        };
+    }
     if (job?.type !== 'CompletedJob') {
         timeout = setTimeout(() => loadJobInProgress(), 500);
     }
 }
-$: jobResult && jobResult.job?.type === 'CompletedJob' && dispatch('jobsLoaded', jobResult);
+$: jobResult && dispatch('jobsLoaded', jobResult);
 function updateJobId() {
-    if (jobId !== jobResult.job?.id) {
+    if (jobId !== jobResult?.job?.id) {
         loadJobInProgress();
     }
 }
@@ -41,7 +50,7 @@ onDestroy(() => {
 });
 </script>
 
-{#if jobResult.job}
+{#if jobResult?.job}
 	<div class="flow-root w-full space-y-4">
 		{#if innerModules.length > 0}
 			<h3 class="text-md leading-6 font-bold text-gray-900 border-b pb-2">Flow result</h3>
@@ -80,7 +89,13 @@ onDestroy(() => {
 					/>
 				</Button>
 				<div class="border p-6" class:hidden={forloop_selected != loopJobId}>
-					<svelte:self jobId={loopJobId} bind:jobResult={jobResult.loopJobs[j]} />
+					<svelte:self
+						jobId={loopJobId}
+						bind:jobResult={jobResult.loopJobs[j]}
+						on:jobsLoaded={(e) => {
+							jobResult = jobResult
+						}}
+					/>
 				</div>
 			{/each}
 		{:else if innerModules.length > 0}

package/components/InputTransformForm.svelte

@@ -12,10 +12,10 @@ export let schema;
 export let arg;
 export let argName;
 export let extraLib = 'missing extraLib';
-export let inputCheck;
+export let inputCheck = true;
 export let importPath = undefined;
-let monacos = {};
-let inputCats = {};
+export let monaco = undefined;
+let inputCat = 'object';
 let propertyType = getPropertyType(arg);
 function getPropertyType(arg) {
     let type = arg?.type ?? 'static';
@@ -47,8 +47,8 @@ function setPropertyType(rawValue) {
 function isStaticTemplate(inputCat) {
     return inputCat === 'string' || inputCat === 'sql';
 }
-function connectProperty(argName, rawValue) {
-    if (isStaticTemplate(inputCats[argName])) {
+function connectProperty(rawValue) {
+    if (isStaticTemplate(inputCat)) {
         arg.value = `\$\{${rawValue}}`;
         setPropertyType(arg.value);
     }
@@ -88,7 +88,7 @@ const { focusProp } = getContext('PropPickerWrapper');
 				}}
 				on:change={(e) => {
 					const type = e.detail ? 'javascript' : 'static'
-					const staticTemplate = isStaticTemplate(inputCats[argName])
+					const staticTemplate = isStaticTemplate(inputCat)
 					if (type === 'javascript') {
 						arg.expr = getDefaultExpr(
 							importPath,
@@ -111,7 +111,7 @@ const { focusProp } = getContext('PropPickerWrapper');
 			<div
 				on:click={() => {
 					focusProp(argName, 'connect', (path) => {
-						connectProperty(argName, path)
+						connectProperty(path)
 					})
 				}}
 			>
@@ -126,7 +126,7 @@ const { focusProp } = getContext('PropPickerWrapper');
 	{#if propertyType === undefined || !checked}
 		<ArgInput
 			on:focus={() => {
-				if (isStaticTemplate(inputCats[argName])) {
+				if (isStaticTemplate(inputCat)) {
 					focusProp(argName, 'append', (path) => {
 						const toAppend = `\$\{${path}}`
 						arg.value = `${arg.value ?? ''}${toAppend}`
@@ -134,7 +134,6 @@ const { focusProp } = getContext('PropPickerWrapper');
 					})
 				} else {
 					focusProp(argName, 'insert', (path) => {
-						console.log('path', path)
 						arg.expr = path
 						arg.type = 'javascript'
 						propertyType = 'javascript'
@@ -142,13 +141,13 @@ const { focusProp } = getContext('PropPickerWrapper');
 				}
 			}}
 			label={argName}
-			bind:editor={monacos[argName]}
+			bind:editor={monaco}
 			bind:description={schema.properties[argName].description}
 			bind:value={arg.value}
 			type={schema.properties[argName].type}
 			required={schema.required.includes(argName)}
 			bind:pattern={schema.properties[argName].pattern}
-			bind:valid={inputCheck[argName]}
+			bind:valid={inputCheck}
 			defaultValue={schema.properties[argName].default}
 			bind:enum_={schema.properties[argName].enum}
 			bind:format={schema.properties[argName].format}
@@ -156,9 +155,9 @@ const { focusProp } = getContext('PropPickerWrapper');
 			bind:itemsType={schema.properties[argName].items}
 			properties={schema.properties[argName].properties}
 			displayHeader={false}
-			bind:inputCat={inputCats[argName]}
+			bind:inputCat
 			on:input={(e) => {
-				if (isStaticTemplate(inputCats[argName])) {
+				if (isStaticTemplate(inputCat)) {
 					setPropertyType(e.detail.rawValue)
 				}
 			}}
@@ -167,10 +166,10 @@ const { focusProp } = getContext('PropPickerWrapper');
 		{#if arg.expr != undefined}
 			<div class="border rounded p-2 mt-2 border-gray-300">
 				<SimpleEditor
-					bind:this={monacos[argName]}
+					bind:this={monaco}
 					on:focus={() => {
 						focusProp(argName, 'insert', (path) => {
-							monacos[argName].insertAtCursor(path)
+							monaco?.insertAtCursor(path)
 						})
 					}}
 					bind:code={arg.expr}

package/components/InputTransformForm.svelte.d.ts

@@ -1,16 +1,16 @@
 import { SvelteComponentTyped } from "svelte";
 import type { Schema } from '../common';
 import type { InputTransform } from '../gen';
+import SimpleEditor from './SimpleEditor.svelte';
 declare const __propDef: {
     props: {
         schema: Schema;
         arg: InputTransform | any;
         argName: string;
         extraLib?: string | undefined;
-        inputCheck: {
-            [id: string]: boolean;
-        };
+        inputCheck?: boolean | undefined;
         importPath?: string | undefined;
+        monaco?: SimpleEditor | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/ModulePreview.svelte

@@ -93,10 +93,10 @@ function jobDone() {
 				</top>
 				<down slot="down">
 					<pre class="overflow-x-auto break-all relative h-full p-2 text-sm"
-						>{#if testJob && 'result' in testJob && testJob.result != undefined}<DisplayResult
+						>{#if testJob != undefined && 'result' in testJob && testJob.result != undefined}<DisplayResult
 								result={testJob.result}
 							/>
-						{:else if testIsLoading}Waiting for Result...
+						{:else if testIsLoading}Waiting for result...
 						{:else}Test to see the result here
 						{/if}
         	</pre>

package/components/PageHeader.svelte

@@ -6,23 +6,23 @@ export let primary = true;
 
 <div class="flex flex-col sm:flex-row justify-between mt-4 mb-2">
 	{#if primary}
-		<h1>
-			{title}
+		<span class="text-xl font-bold flex items-center space-x-2">
+			<span class="mr-0.5">{title}</span>
 			{#if tooltip}
 				<Tooltip>{tooltip}</Tooltip>
 			{/if}
-		</h1>
-	{:else}
-		<h2>
-			{title}
+		</span>
+		{:else}
+		<span class="text-lg font-semibold flex items-center space-x-2">
+			<span class="mr-0.5">{title}</span>
 			{#if tooltip}
 				<Tooltip>{tooltip}</Tooltip>
 			{/if}
-		</h2>
+		</span>
 	{/if}
 
 	{#if $$slots.default}
-		<div class="my-2 sm:ml-4">
+		<div class="my-2">
 			<slot />
 		</div>
 	{/if}

package/components/Path.svelte.d.ts

@@ -7,7 +7,7 @@ declare const __propDef: {
         initialPath: string;
         path?: string | undefined;
         error?: string | undefined;
-        kind: "flow" | "script" | "resource" | "schedule" | "variable";
+        kind: "script" | "resource" | "schedule" | "variable" | "flow";
         getPath?: (() => string) | undefined;
         reset?: (() => Promise<void>) | undefined;
     };

package/components/RunForm.svelte

@@ -2,7 +2,6 @@
 import { decodeState, getToday } from '../utils';
 import { slide } from 'svelte/transition';
 import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
-import Icon from 'svelte-awesome';
 import SvelteMarkdown from 'svelte-markdown';
 import SchemaForm from './SchemaForm.svelte';
 import Tooltip from './Tooltip.svelte';

package/components/SchemaForm.svelte

@@ -34,7 +34,7 @@ $: schema?.properties && removeExtraKey();
 					bind:arg={args[argName]}
 					bind:schema
 					bind:argName
-					bind:inputCheck
+					bind:inputCheck={inputCheck[argName]}
 					bind:extraLib
 					bind:importPath
 				/>
@@ -58,6 +58,6 @@ $: schema?.properties && removeExtraKey();
 			{/if}
 		{/each}
 	{:else}
-		<p class="italic text-sm">No settable input</p>
+		<p class="italic text-sm">No inputs</p>
 	{/if}
 </div>

package/components/ScriptEditor.svelte

@@ -1,8 +1,7 @@
 <script>import { CompletedJob, Job, JobService } from '../gen';
 import { userStore, workspaceStore } from '../stores';
 import { emptySchema, scriptLangToEditorLang } from '../utils';
-import { faCheck, faExclamationTriangle, faPlay, faRotateRight } from '@fortawesome/free-solid-svg-icons';
-import Icon from 'svelte-awesome';
+import { faPlay, faRotateRight } from '@fortawesome/free-solid-svg-icons';
 import Editor from './Editor.svelte';
 import { inferArgs } from '../infer';
 import SchemaForm from './SchemaForm.svelte';
@@ -13,13 +12,12 @@ import EditorBar from './EditorBar.svelte';
 import Button from './common/button/Button.svelte';
 import TestJobLoader from './TestJobLoader.svelte';
 import { onMount } from 'svelte';
-import UnsavedConfirmationModal from './common/confirmationModal/UnsavedConfirmationModal.svelte';
 // Exported
 export let schema = emptySchema();
 export let code;
 export let path;
 export let lang;
-let websocketAlive = { pyright: false, black: false, deno: false };
+let websocketAlive = { pyright: false, black: false, deno: false, go: false };
 // Internal state
 let editor;
 let testJobLoader;
@@ -144,19 +142,6 @@ onMount(() => {
 											Move the focus outside of the text editor to recompute the input schema from
 											main signature or press Ctrl/Cmd+S
 										</p>
-										<p class="mt-4">
-											{#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>
 									<SchemaForm {schema} bind:args bind:isValid />
 								</div>

package/components/ScriptPicker.svelte.d.ts

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

package/components/SharedBadge.svelte

@@ -1,6 +1,7 @@
 <script>import { userStore } from '../stores';
 import { faPeopleGroup } from '@fortawesome/free-solid-svg-icons';
 import Badge from './common/badge/Badge.svelte';
+import Tooltip from './Tooltip.svelte';
 export let extraPerms = {};
 export let canWrite;
 let kind = undefined;
@@ -49,5 +50,8 @@ $: {
 {#if kind === 'read' || kind === 'write'}
 	<Badge icon={{ data: faPeopleGroup }} capitalize color="blue">
 		{kind}
+		{#if reason}
+			<Tooltip>{reason}</Tooltip>
+		{/if}
 	</Badge>
 {/if}

package/components/TestJobLoader.svelte

@@ -10,9 +10,7 @@ let syncIteration = 0;
 let ITERATIONS_BEFORE_SLOW_REFRESH = 100;
 export async function runPreview(path, code, lang, args) {
     try {
-        if (intervalId) {
-            clearInterval(intervalId);
-        }
+        intervalId && clearInterval(intervalId);
         if (isLoading && job) {
             JobService.cancelQueuedJob({
                 workspace: $workspaceStore,
@@ -47,6 +45,7 @@ export async function cancelJob() {
 }
 export async function watchJob(testId) {
     console.log('watch jobs');
+    intervalId && clearInterval(intervalId);
     job = undefined;
     syncIteration = 0;
     const isCompleted = await loadTestJob(testId);

package/components/TestJobLoader.svelte.d.ts

@@ -19,7 +19,7 @@ export declare type TestJobLoaderProps = typeof __propDef.props;
 export declare type TestJobLoaderEvents = typeof __propDef.events;
 export declare type TestJobLoaderSlots = typeof __propDef.slots;
 export default class TestJobLoader extends SvelteComponentTyped<TestJobLoaderProps, TestJobLoaderEvents, TestJobLoaderSlots> {
-    get runPreview(): (path: string | undefined, code: string, lang: "python3" | "deno" | "go", args: Record<string, any>) => Promise<void>;
+    get runPreview(): (path: string | undefined, code: string, lang: "go" | "python3" | "deno", args: Record<string, any>) => Promise<void>;
     get cancelJob(): () => Promise<void>;
     get watchJob(): (testId: string) => Promise<void>;
 }

package/components/common/badge/Badge.svelte

@@ -1,5 +1,5 @@
 <script>import { classNames } from '../../../utils';
-import { CloseButton } from 'flowbite-svelte';
+import { faClose } from '@fortawesome/free-solid-svg-icons';
 import Icon from 'svelte-awesome';
 import { ColorModifier } from './model';
 export let color = 'gray';
@@ -65,12 +65,7 @@ const handleHide = () => (hidden = !hidden);
 			<Icon {...iconProps} />
 		{/if}
 		{#if dismissable}
-			<CloseButton
-				{color}
-				on:click={handleHide}
-				size={large ? 'sm' : 'xs'}
-				class="ml-1.5 -mr-1.5"
-			/>
+			<Icon data={faClose} on:click={handleHide} class={classNames('mx-0.5')} />
 		{/if}
 	</svelte:element>
 </span>

package/components/common/button/Button.svelte

@@ -1,8 +1,8 @@
 <script>import { createEventDispatcher } from 'svelte';
-import { goto } from '$app/navigation';
 import { classNames } from '../../../utils';
 import Icon from 'svelte-awesome';
 import { ButtonType } from './model';
+import { goto } from '$app/navigation';
 export let size = 'md';
 export let spacingSize = size;
 export let color = 'blue';
@@ -37,6 +37,7 @@ const colorVariants = {
     }
 };
 $: buttonProps = {
+    id,
     class: classNames(colorVariants[color][variant], variant === 'border' ? 'border' : '', ButtonType.FontSizeClasses[size], ButtonType.SpacingClasses[spacingSize], 'focus:ring-4 font-medium', 'rounded-md', 'flex justify-center items-center text-center whitespace-nowrap', btnClasses, disabled ? 'pointer-events-none cursor-default filter grayscale' : ''),
     disabled,
     href,
@@ -44,9 +45,11 @@ $: buttonProps = {
     tabindex: disabled ? -1 : 0
 };
 function onClick(event) {
+    event.preventDefault();
     dispatch('click', event);
-    if (href)
+    if (href) {
         goto(href);
+    }
 }
 $: isSmall = size === 'xs' || size === 'sm';
 $: startIconClass = classNames(iconOnly ? undefined : isSmall ? 'mr-1' : 'mr-2', startIcon?.classes);

package/components/common/button/ButtonPopup.svelte

@@ -42,6 +42,7 @@ $: commonProps = {
 			bind:element={ref}
 			{...commonProps}
 			btnClasses="{$$slots.main ? '!rounded-l-none' : ''} {toggleClasses}"
+			on:click={() => {}}
 		>
 			<slot name="toggle">
 				<!-- Invisible, but needed to match the height of the 'main' button -->

package/components/common/confirmationModal/UnsavedConfirmationModal.svelte

@@ -7,7 +7,8 @@ $: open = Boolean(navigationState);
 beforeNavigate((newNavigationState) => {
     if (!navigationState &&
         $dirtyStore &&
-        newNavigationState.to?.pathname !== newNavigationState.from.pathname) {
+        newNavigationState.to &&
+        newNavigationState.to.pathname !== newNavigationState.from.pathname) {
         navigationState = newNavigationState;
         newNavigationState.cancel();
     }

package/components/common/index.d.ts

@@ -1,4 +1,5 @@
 export { default as ActionRow } from './actionRow/ActionRow.svelte';
+export { default as Alert } from './alert/Alert.svelte';
 export { default as Badge } from './badge/Badge.svelte';
 export { default as Button } from './button/Button.svelte';
 export { default as ButtonPopup } from './button/ButtonPopup.svelte';
@@ -9,10 +10,13 @@ export { default as Kbd } from './kbd/Kbd.svelte';
 export { default as Menu } from './menu/Menu.svelte';
 export { default as MenuItem } from './menu/MenuItem.svelte';
 export { default as Popup } from './popup/Popup.svelte';
+export { default as Skeleton } from './skeleton/Skeleton.svelte';
 export { default as Tab } from './tabs/Tab.svelte';
 export { default as TabContent } from './tabs/TabContent.svelte';
 export { default as Tabs } from './tabs/Tabs.svelte';
 export { default as ToggleButton } from './toggleButton/ToggleButton.svelte';
 export { default as ToggleButtonGroup } from './toggleButton/ToggleButtonGroup.svelte';
+export * from './alert/model';
 export * from './badge/model';
 export * from './button/model';
+export * from './skeleton/model';

package/components/common/index.js

@@ -1,4 +1,5 @@
 export { default as ActionRow } from './actionRow/ActionRow.svelte';
+export { default as Alert } from './alert/Alert.svelte';
 export { default as Badge } from './badge/Badge.svelte';
 export { default as Button } from './button/Button.svelte';
 export { default as ButtonPopup } from './button/ButtonPopup.svelte';
@@ -9,10 +10,13 @@ export { default as Kbd } from './kbd/Kbd.svelte';
 export { default as Menu } from './menu/Menu.svelte';
 export { default as MenuItem } from './menu/MenuItem.svelte';
 export { default as Popup } from './popup/Popup.svelte';
+export { default as Skeleton } from './skeleton/Skeleton.svelte';
 export { default as Tab } from './tabs/Tab.svelte';
 export { default as TabContent } from './tabs/TabContent.svelte';
 export { default as Tabs } from './tabs/Tabs.svelte';
 export { default as ToggleButton } from './toggleButton/ToggleButton.svelte';
 export { default as ToggleButtonGroup } from './toggleButton/ToggleButtonGroup.svelte';
+export * from './alert/model';
 export * from './badge/model';
 export * from './button/model';
+export * from './skeleton/model';