updeps & replce Autocomplete by Select

Author: Valexr

package.json

@@ -100,13 +100,13 @@
 		"svelte-morphing-modal": "^2.2.0",
 		"svelte-pathfinder": "^3.3.0",
 		"svelte-preprocess": "^4.10.6",
-		"svelte-spectre": "^0.3.4",
+		"svelte-spectre": "^0.3.5",
 		"tslib": "^2.4.0",
-		"typescript": "^4.6.4"
+		"typescript": "^4.7.2"
 	},
 	"dependencies": {
 		"debounce-promise": "^3.1.2",
-		"optimade": "^2.0.4",
+		"optimade": "^2.0.5",
 		"optimade-mpds-nlp": "^0.1.3"
 	}
 }

src/stores/modules.ts

@@ -3,10 +3,10 @@ import { asyncable, syncable } from 'svelte-asyncable';
 import type { Readable } from 'svelte/store';
 import type { Asyncable } from 'svelte-asyncable';
 
-import { getJSON } from '@/services/optimade';
+import { getJSON } from '@/services/optimade'; // now replaced by simple fetch() for ignore CORS issue
 import { supportedModulesUrl, lsModulesKey } from '@/config';
 
-export const builtinModules: Asyncable<string[]> = asyncable(() => getJSON(supportedModulesUrl), null);
+export const builtinModules: Asyncable<string[]> = asyncable(() => fetch(supportedModulesUrl).then(async (res) => await res.json()), null);
 
 export const builtinModulesSync: Readable<string[]> = syncable(builtinModules, []);
 

src/views/ModuleSelect/ModuleSelect.svelte

@@ -1,30 +1,12 @@
-{#await $modules then predefined}
-	<Autocomplete {groupBy} {predefined} bind:selected creatable placeholder="Select app or enter app URL" empty="No apps added" />
+{#await $modules then options}
+	<Select {options} bind:value={selectedValue} placeholder="Select app or enter app URL" style="margin: 0 0 1em" />
 {/await}
 
 <script lang="ts" context="module">
-	import { Autocomplete } from 'svelte-spectre';
-
-	import modules, { builtinModulesSync } from '@/stores/modules';
-
-	import { moduleGroups } from '@/config';
+	import { Select } from 'svelte-spectre';
+	import modules from '@/stores/modules';
 </script>
 
 <script lang="ts">
-	let selected: any[] = [];
-
 	export let selectedValue: string;
-
-	$: selectedValue = selected[0]?.value;
-
-	$: if (selectedValue) {
-		modules.update(async ($modules) => {
-			if (!(await $modules).includes(selectedValue)) {
-				(await $modules).unshift(selectedValue);
-			}
-			return $modules;
-		});
-	}
-
-	const groupBy = (item: { value: string }): string => ($builtinModulesSync.includes(item.value) ? moduleGroups.builtin : moduleGroups.local);
 </script>