Migrate to new niwrap deployment system

Author: nx10

package-lock.json

@@ -46,7 +46,6 @@
 	},
 	"dependencies": {
 		"mode-watcher": "^1.1.0",
-		"niwrap": "^0.6.3",
 		"shell-quote": "^1.8.3",
 		"shiki": "^3.11.0",
 		"shlex": "^3.0.0",

package.json

@@ -23,19 +23,18 @@
 		Copy,
 		Check,
 		RefreshCw,
-		Package,
 		Loader2,
 		Code
 	} from '@lucide/svelte';
 	import { getSchemaMetadata } from '$lib/services/schema/schemaPath';
 	import { getAppInputSchema, getAppOutputSchema } from '$lib/services/packages.svelte';
 
 	interface Props {
-		packageId: string;
+		packageName: string;
 		descriptorId: string;
 	}
 
-	let { packageId, descriptorId }: Props = $props();
+	let { packageName, descriptorId }: Props = $props();
 
 	// State management
 	let descriptorInputSchema: object | null = $state(null);
@@ -45,16 +44,26 @@
 	let error = $state<string | null>(null);
 	let activeTab = $state('command');
 	let commandCopied = $state(false);
+	let niwrapExecutionData = $state<{
+    success: true;
+    cargs: string[];
+    outputObject: any;
+} | {
+    success: false;
+    error: string;
+} | null>(null);
 
 	// Memoized computations
-	const niwrapExecutionData = $derived.by(() => {
+	$effect(() => {
 		if (!descriptorConfig || Object.keys(descriptorConfig).length === 0) {
-			return { success: false, error: 'No configuration provided', cargs: [], outputFiles: [], outputObject: {} };
+			niwrapExecutionData = { success: false, error: 'No configuration provided' };
 		}
-		return niwrapExecute(descriptorConfig);
+		niwrapExecute(descriptorConfig).then((d) => niwrapExecutionData = d);
 	});
 
 	const commandArgs = $derived(() => {
+		if (!niwrapExecutionData) return [];
+
 		if (!niwrapExecutionData.success) {
 			return niwrapDeathMessage();
 		}
@@ -67,13 +76,12 @@
 	});
 
 	const outputFiles = $derived.by(() => {
+		if (!niwrapExecutionData) return [];
 		const ret = [];
 		if (!niwrapExecutionData.success) return [];
 		for (const [key, value] of Object.entries(niwrapExecutionData.outputObject)) {
 			if (!(typeof value === 'string')) continue;
 			const keyMetadata = descriptorOutputSchema && getSchemaMetadata(descriptorOutputSchema, key);
-			console.log(descriptorOutputSchema)
-			console.log(key)
 			ret.push({
 				path: '/outputs/' + value,
 				title: keyMetadata?.title ?? 'Title',
@@ -83,20 +91,20 @@
 		}
 		return ret;
 	});
-	const niwrapError = $derived(niwrapExecutionData.success ? null : niwrapExecutionData.error);
+	const niwrapError = $derived(niwrapExecutionData?.success ? null : niwrapExecutionData?.error ?? "???");
 	const hasConfig = $derived(Object.keys(descriptorConfig).length > 0);
 	const hasOutputs = $derived(outputFiles.length > 0);
 
 	// Schema fetching with retry logic
 	async function fetchSchema() {
-		if (!packageId || !descriptorId) return;
+		if (!packageName || !descriptorId) return;
 
 		isLoading = true;
 		error = null;
 
 		try {
-			const inputSchema = await getAppInputSchema(packageId, descriptorId);
-			const outputSchema = await getAppOutputSchema(packageId, descriptorId);
+			const inputSchema = await getAppInputSchema(packageName, descriptorId);
+			const outputSchema = await getAppOutputSchema(packageName, descriptorId);
 			descriptorInputSchema = inputSchema;
 			descriptorOutputSchema = outputSchema;
 		} catch (err) {

src/lib/components/Contents.svelte

@@ -74,6 +74,7 @@
 
   // Reactive state using Svelte 5 runes
   const tree = $derived(buildTree(files));
+  // svelte-ignore state_referenced_locally
   let expanded = $state(getAllFolderPaths(tree));
   
   // Re-expand all folders when files change

src/lib/components/FileTreeView.svelte

@@ -139,7 +139,7 @@
 								<div class="flex min-w-0 items-center">
 									<PackageIcon class={cn('mr-2 flex-shrink-0', compact ? 'h-3 w-3' : 'h-4 w-4')} />
 									<span class={cn('truncate', compact ? 'text-sm' : 'text-base')}>
-										{selectedPackage?.name || 'Choose a package...'}
+										{selectedPackage?.docs.title || 'Choose a package...'}
 									</span>
 								</div>
 								<ChevronsUpDownIcon
@@ -156,7 +156,7 @@
 								<Command.Group>
 									{#each packages as pkg (pkg.name)}
 										<Command.Item
-											value={pkg.name}
+											value={pkg.docs.title ?? pkg.name}
 											onSelect={() => selectPackage(pkg.name)}
 											class="flex cursor-pointer items-center justify-between py-3"
 										>
@@ -253,7 +253,7 @@
 								<Command.Group>
 									{#each apps as app (app.id)}
 										<Command.Item
-											value={app.id}
+											value={app.name}
 											onSelect={() => selectApp(app)}
 											class="flex cursor-pointer items-center py-2"
 										>

src/lib/components/QuickSelector.svelte

@@ -1,6 +1,61 @@
-import * as niwrap from 'niwrap';
 import * as styxdefs from 'styxdefs';
 
+// Cache for the dynamically loaded module
+let niwrapModule: any = null;
+let loadingPromise: Promise<any> | null = null;
+
+/**
+ * Dynamically loads the niwrap module from the hosted build artifacts
+ * Uses browser detection to choose appropriate module format
+ */
+async function loadNiwrap(): Promise<any> {
+  if (niwrapModule) {
+    return niwrapModule;
+  }
+
+  // If already loading, return the same promise to avoid multiple loads
+  if (loadingPromise) {
+    return loadingPromise;
+  }
+
+  loadingPromise = (async () => {
+    try {
+      // Try ESM first (preferred for modern browsers)
+      try {
+        const module = await import('https://styx-api.github.io/niwrap/js/index.esm.js');
+        niwrapModule = module;
+        return niwrapModule;
+      } catch (esmError) {
+        console.warn('Failed to load ESM module, falling back to CJS:', esmError);
+        
+        // Fallback to CJS - though this might need special handling in browser
+        const module = await import('https://styx-api.github.io/niwrap/js/index.cjs.js');
+        niwrapModule = module;
+        return niwrapModule;
+      }
+    } catch (error) {
+      console.error('Failed to load niwrap module:', error);
+      throw new Error(`Failed to load niwrap: ${error instanceof Error ? error.message : String(error)}`);
+    } finally {
+      loadingPromise = null;
+    }
+  })();
+
+  return loadingPromise;
+}
+
+/**
+ * Preload the niwrap module - call this early in your app lifecycle
+ */
+export async function preloadNiwrap(): Promise<void> {
+  try {
+    await loadNiwrap();
+    console.log('NiWrap module preloaded successfully');
+  } catch (error) {
+    console.error('Failed to preload NiWrap module:', error);
+  }
+}
+
 export function niwrapDeathMessage(): string[] {
   const deathMessages = [
     ['💀', 'NiWrap died of dysentery'],
@@ -22,37 +77,49 @@ export function niwrapDeathMessage(): string[] {
   return deathMessages[Math.floor(Math.random() * deathMessages.length)];
 }
 
-export function niwrapExecute(config: object):
+export async function niwrapExecute(config: object): Promise<
   | {
-    success: true;
-    cargs: string[];
-    outputObject: any;
-  }
+      success: true;
+      cargs: string[];
+      outputObject: any;
+    }
   | {
-    success: false;
-    error: string;
-  } {
+      success: false;
+      error: string;
+    }
+> {
   if (!config || !('@type' in config)) {
     return {
       success: false,
       error: 'Invalid config: missing config or @type'
     };
   }
+
   try {
+    // Dynamically load the niwrap module
+    const niwrap = await loadNiwrap();
+    
     const runner = new styxdefs.DryRunner();
     const outputs = niwrap.execute(config, runner);
+    
     return {
       success: true,
       cargs: runner.lastCargs ?? [],
       outputObject: outputs
     };
   } catch (error) {
     const errorString = error instanceof Error ? error.message : String(error);
-    console.log(error)
+    console.log(error);
     console.error('NiWrap execution failed:', errorString);
+    
     return {
       success: false,
       error: errorString
     };
   }
 }
+
+export async function niwrapVersion() {
+    const niwrap = await loadNiwrap();
+    return niwrap.version;
+}

src/lib/services/niwrapExecution.ts

@@ -14,13 +14,20 @@ export type App = {
 
 let index: Index | null = $state(null);
 let loading = $state(false);
-let initialized = false;
+let loadPromise: Promise<void> | null = null; // Cache loading promise
 
 export async function getIndex() {
-  if (!initialized) {
-    initialized = true;
-    await loadData(); // Auto-load on first access
+  if (index !== null) {
+    return index; // Already loaded
   }
+  
+  if (loadPromise === null) {
+    // First caller starts the loading
+    loadPromise = loadData();
+  }
+  
+  // All callers wait for the same promise
+  await loadPromise;
   return index;
 }
 
@@ -40,6 +47,9 @@ export async function loadData() {
     }
   } catch (err) {
     console.error('Failed to load indices:', err);
+    // Reset loadPromise on error so it can be retried
+    loadPromise = null;
+    throw err; // Re-throw to let callers handle the error
   } finally {
     loading = false;
   }