termcast 1.3.30 → 1.3.32

package/src/compile.tsx

@@ -15,6 +15,7 @@ const raycastAliasPlugin: BunPlugin = {
     build.onResolve({ filter: /^termcast/ }, (args) => ({
       path: require.resolve(args.path),
     }))
+
     build.onResolve({ filter: /^react$/ }, () => ({
       path: require.resolve('react'),
     }))
@@ -24,6 +25,8 @@ const raycastAliasPlugin: BunPlugin = {
     build.onResolve({ filter: /^react\/jsx-dev-runtime$/ }, () => ({
       path: require.resolve('react/jsx-dev-runtime'),
     }))
+
+
   },
 }
 
@@ -34,26 +37,32 @@ export function generateEntryCode({
   packageJson: import('./package-json').RaycastPackageJson
   commands: Array<{ name: string; bundledPath: string }>
 }): string {
-  const commandImports = commands
-    .map(
-      (cmd, i) =>
-        `  const { default: Command${i} } = await import(${JSON.stringify(cmd.bundledPath)});`,
-    )
-    .join('\n')
-
+  // Generate lazy loaders instead of importing all commands at startup
   const commandsArray = commands
     .map(
-      (cmd, i) => `    {
+      (cmd) => `    {
       name: ${JSON.stringify(cmd.name)},
-      Component: Command${i},
+      loadComponent: () => import(${JSON.stringify(cmd.bundledPath)}).then(m => m.default),
     }`,
     )
     .join(',\n')
 
   return `
 async function main() {
-${commandImports}
+  // Set state BEFORE importing commands so module-scope code (e.g. getPreferenceValues) can access extensionPackageJson
+  const { useStore } = await import('termcast');
+  const os = await import('node:os');
+  const path = await import('node:path');
+
+  const packageJson = ${JSON.stringify(packageJson)};
+  const compiledExtensionPath = path.join(os.homedir(), '.termcast', 'compiled', packageJson.name);
 
+  useStore.setState({
+    extensionPath: compiledExtensionPath,
+    extensionPackageJson: packageJson,
+  });
+
+  // Commands are lazily loaded when selected (not at startup)
   const compiledCommands = [
 ${commandsArray}
   ];
@@ -61,7 +70,7 @@ ${commandsArray}
   const { startCompiledExtension } = await import('termcast/src/extensions/dev');
 
   await startCompiledExtension({
-    packageJson: ${JSON.stringify(packageJson)},
+    packageJson,
     compiledCommands,
     skipArgv: 0,
   });
@@ -112,24 +121,6 @@ export function targetToFileSuffix(target: CompileTarget): string {
   return parts.join('-') + ext
 }
 
-// Same as targetToFileSuffix but without .exe extension (for archive names)
-export function targetToArchiveSuffix(target: CompileTarget): string {
-  const os =
-    target.os === 'win32'
-      ? 'windows'
-      : target.os === 'darwin'
-        ? 'darwin'
-        : 'linux'
-  const parts = [os, target.arch]
-  if (target.abi) {
-    parts.push(target.abi)
-  }
-  if (target.avx2 === false) {
-    parts.push('baseline')
-  }
-  return parts.join('-')
-}
-
 export function getArchiveExtension(target: CompileTarget): string {
   return target.os === 'linux' ? '.tar.gz' : '.zip'
 }
@@ -232,6 +223,7 @@ export async function compileExtension({
       },
       define: {
         'process.env.VERSION': JSON.stringify(version || ''),
+        // Use 'development' to avoid React bundling issues with CJS/ESM interop
         'process.env.NODE_ENV': JSON.stringify('production'),
       },
       plugins: [raycastAliasPlugin, swiftLoaderPlugin],

package/src/compile.vitest.tsx

@@ -0,0 +1,300 @@
+import { test, expect, afterEach, beforeAll } from 'vitest'
+import { launchTerminal, Session } from 'tuistory/src'
+import path from 'node:path'
+import fs from 'node:fs'
+import { execSync } from 'node:child_process'
+
+const fixtureDir = path.resolve(__dirname, '../fixtures/simple-extension')
+const distDir = path.join(fixtureDir, 'dist')
+const executablePath = path.join(distDir, 'simple-extension')
+
+let session: Session
+
+afterEach(() => {
+  session?.close()
+})
+
+// Compile once before all tests
+function ensureCompiled() {
+  if (!fs.existsSync(executablePath)) {
+    // Clean dist directory
+    if (fs.existsSync(distDir)) {
+      fs.rmSync(distDir, { recursive: true, force: true })
+    }
+
+    // Compile using CLI (runs in Bun context)
+    execSync(`bun src/cli.tsx compile ${fixtureDir}`, {
+      cwd: path.resolve(__dirname, '..'),
+      stdio: 'pipe',
+    })
+  }
+
+  if (!fs.existsSync(executablePath)) {
+    throw new Error(`Compiled executable not found at ${executablePath}`)
+  }
+}
+
+beforeAll(() => {
+  if (fs.existsSync(executablePath)) {
+    fs.unlinkSync(executablePath)
+  }
+})
+
+
+test('compile extension and run executable', async () => {
+  ensureCompiled()
+
+  // Run the compiled executable
+  session = await launchTerminal({
+    command: executablePath,
+    args: [],
+    cols: 60,
+    rows: 16,
+  })
+
+  await session.text({
+    waitFor: (text) => /Simple Test Extension/i.test(text),
+    timeout: 10000,
+  })
+
+  const snapshot = await session.text()
+  expect(snapshot).toMatchInlineSnapshot(`
+    "
+
+
+       Simple Test Extension ────────────────────────────────
+
+       > Search commands...
+
+       Commands                                              ▲
+      ›List Items Displays a simple list with some ite view  ▀
+       Search Items Search and filter through a list o view
+       Google Oauth                                    view
+       usePromise Demo Shows how to use the usePromise view  ▼
+
+
+       ↵ run command   ↑↓ navigate   ^k actions
+
+    "
+  `)
+}, 60000)
+
+test('compiled executable can run command', async () => {
+  ensureCompiled()
+
+  session = await launchTerminal({
+    command: executablePath,
+    args: [],
+    cols: 60,
+    rows: 16,
+  })
+
+  await session.text({
+    waitFor: (text) => /Simple Test Extension/i.test(text),
+    timeout: 10000,
+  })
+
+  // Select first command (List Items) - enter opens action panel, enter again runs
+  await session.press('enter')
+  await session.press('enter')
+
+  await session.text({
+    waitFor: (text) => /First Item/i.test(text),
+    timeout: 10000,
+  })
+
+  const listSnapshot = await session.text()
+  expect(listSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+       List Items ───────────────────────────────────────────
+
+       > Search...
+
+       Items                                                 ▲
+      ›▲ First Item This is the first item                   █
+       ▲ Second Item This is the second item
+       ▲ Third Item This is the third item
+       ▲ Fourth Item This is the fourth item                 ▼
+
+
+       ✓ Copied to Clipboard  First Item
+
+    "
+  `)
+}, 60000)
+
+test('compiled executable can navigate back', async () => {
+  ensureCompiled()
+
+  session = await launchTerminal({
+    command: executablePath,
+    args: [],
+    cols: 60,
+    rows: 16,
+  })
+
+  await session.text({
+    waitFor: (text) => /Simple Test Extension/i.test(text),
+    timeout: 10000,
+  })
+
+  // Run first command
+  await session.press('enter')
+  await session.press('enter')
+
+  await session.text({
+    waitFor: (text) => /First Item/i.test(text),
+    timeout: 10000,
+  })
+
+  // Navigate back with escape - this should either:
+  // 1. Go back to command list (if push was used)
+  // 2. Exit (if replace was used because only one command is visible)
+  await session.press('escape')
+
+  // Wait a bit for navigation to complete
+  await session.waitIdle()
+
+  const backSnapshot = await session.text()
+  // If we're back at the command list, we'll see "Simple Test Extension"
+  // If the command exited, the terminal might be empty
+  expect(backSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+       List Items ───────────────────────────────────────────
+
+       > Search...
+
+       Items                                                 ▲
+      ›▲ First Item This is the first item                   █
+       ▲ Second Item This is the second item
+       ▲ Third Item This is the third item
+       ▲ Fourth Item This is the fourth item                 ▼
+
+
+       ↵ copy item title   ↑↓ navigate   ^k actions
+
+    "
+  `)
+}, 60000)
+
+test('compiled executable shows error when command throws at root scope', async () => {
+  ensureCompiled()
+
+  session = await launchTerminal({
+    command: executablePath,
+    args: [],
+    cols: 60,
+    rows: 20,
+  })
+
+  // With lazy loading, the command list should appear first
+  await session.text({
+    waitFor: (text) => /Simple Test Extension/i.test(text),
+    timeout: 10000,
+  })
+
+  // Filter to the Throw Error command
+  await session.type('throw error')
+  await session.waitIdle()
+
+  // Select and run the command
+  await session.press('enter')
+  await session.press('enter')
+
+  // Wait for error to be displayed
+  await session.text({
+    waitFor: (text) => /error/i.test(text),
+    timeout: 10000,
+  })
+
+  const errorSnapshot = await session.text()
+  expect(errorSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+
+
+        Error: This is a test error thrown at root scope
+            at <anonymous> (fixtures/simple-extension/src/th
+            at processTicksAndRejections (native:7:39)
+
+
+
+
+
+
+
+
+
+
+
+
+    "
+  `)
+}, 60000)
+
+// Test for single-command extension with root-level error
+const singleErrorFixtureDir = path.resolve(__dirname, '../fixtures/single-error-extension')
+const singleErrorDistDir = path.join(singleErrorFixtureDir, 'dist')
+const singleErrorExecutablePath = path.join(singleErrorDistDir, 'single-error-extension')
+
+function ensureSingleErrorCompiled() {
+  if (!fs.existsSync(singleErrorExecutablePath)) {
+    if (fs.existsSync(singleErrorDistDir)) {
+      fs.rmSync(singleErrorDistDir, { recursive: true, force: true })
+    }
+
+    execSync(`bun src/cli.tsx compile ${singleErrorFixtureDir}`, {
+      cwd: path.resolve(__dirname, '..'),
+      stdio: 'pipe',
+    })
+  }
+
+  if (!fs.existsSync(singleErrorExecutablePath)) {
+    throw new Error(`Compiled executable not found at ${singleErrorExecutablePath}`)
+  }
+}
+
+test('single command extension shows error when command throws at root scope', async () => {
+  ensureSingleErrorCompiled()
+
+  session = await launchTerminal({
+    command: singleErrorExecutablePath,
+    args: [],
+    cols: 60,
+    rows: 20,
+  })
+
+  // Wait for something to appear
+  await session.waitIdle()
+
+  const errorSnapshot = await session.text()
+  expect(errorSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+
+
+        Error
+            at <anonymous> (fixtures/single-error-extension/
+            at processTicksAndRejections (unknown:7:39)
+
+
+
+
+
+
+
+
+
+
+
+
+    "
+  `)
+}, 60000)
+

package/src/components/actions.tsx

@@ -20,6 +20,7 @@ import { useDialog } from 'termcast/src/internal/dialog'
 import { useNavigation } from 'termcast/src/internal/navigation'
 import { Dropdown } from 'termcast/src/components/dropdown'
 import { ExtensionPreferences } from 'termcast/src/components/extension-preferences'
+import { ThemePicker } from 'termcast/src/components/theme-picker'
 import { useStore } from 'termcast/src/state'
 import { useIsInFocus } from 'termcast/src/internal/focus-context'
 import { useIsOffscreen } from 'termcast/src/internal/offscreen'
@@ -209,7 +210,7 @@ Action.Push = (props) => {
       props.onPush?.()
       // Push the target to dialog if needed
       if (props.target) {
-        dialog.push(props.target, 'center')
+        dialog.push({ element: props.target, position: 'center' })
       }
     },
   })
@@ -530,17 +531,29 @@ Action.ToggleQuickLook = (props) => {
   useActionDescendant({
     title: props.title || 'Quick Look',
     shortcut: props.shortcut || { key: 'space' },
-    execute: () => {
-      // TODO: Implement Quick Look using macOS qlmanage command
-      if (props.path) {
-        logger.log(`Quick Look: ${props.path}`)
+    execute: async () => {
+      if (!props.path) {
+        props.onToggle?.()
+        return
       }
-      props.onToggle?.()
-      showToast({
-        title: 'Quick Look',
-        message: 'Quick Look not yet implemented',
-        style: Toast.Style.Failure,
+
+      if (process.platform !== 'darwin') {
+        showToast({
+          title: 'Quick Look',
+          message: 'Quick Look is only supported on macOS',
+          style: Toast.Style.Failure,
+        })
+        return
+      }
+
+      const { spawn } = await import('node:child_process')
+      // qlmanage -p opens Quick Look preview
+      const child = spawn('qlmanage', ['-p', props.path], {
+        stdio: 'ignore',
+        detached: true,
       })
+      child.unref()
+      props.onToggle?.()
     },
   })
 
@@ -680,15 +693,16 @@ const ActionPanel: ActionPanelType = (props) => {
     }
   }, [descendantsContext.map, dialog, isOffscreen])
 
-  // prevent showing actions if no dialog is shown (must be after hooks)
-  if (!dialog.stack.length && !isOffscreen) return null
+  // prevent showing actions if we're not inside an actions dialog (must be after hooks)
+  const lastStackItem = dialog.stack[dialog.stack.length - 1]
+  if (lastStackItem?.type !== 'actions' && !isOffscreen) return null
 
   // ActionPanel renders as Dropdown with children
   return (
     <ActionDescendantsProvider value={descendantsContext}>
       <ActionPanelContext.Provider value={contextValue}>
         <Dropdown
-          tooltip={title}
+          tooltip={title || 'Actions'}
           placeholder='Search actions...'
           filtering
           onChange={(value) => {
@@ -706,38 +720,43 @@ const ActionPanel: ActionPanelType = (props) => {
           }}
         >
           {children}
-          {(hasExtensionPrefs || hasCommandPrefs) && (
-            <ActionPanel.Section title="Settings">
-              {hasExtensionPrefs && (
-                <Action
-                  title="Configure Extension..."
-                  shortcut={{ modifiers: ['cmd', 'shift'], key: ',' }}
-                  onAction={() => {
-                    dialog.clear()
-                    push(
-                      <ExtensionPreferences
-                        extensionName={extensionPackageJson!.name}
-                      />,
-                    )
-                  }}
-                />
-              )}
-              {hasCommandPrefs && (
-                <Action
-                  title="Configure Command..."
-                  onAction={() => {
-                    dialog.clear()
-                    push(
-                      <ExtensionPreferences
-                        extensionName={extensionPackageJson!.name}
-                        commandName={currentCommandName!}
-                      />,
-                    )
-                  }}
-                />
-              )}
-            </ActionPanel.Section>
-          )}
+          <ActionPanel.Section title="Settings">
+            {hasExtensionPrefs && (
+              <Action
+                title={`Configure ${extensionPackageJson!.title}...`}
+                shortcut={{ modifiers: ['cmd', 'shift'], key: ',' }}
+                onAction={() => {
+                  dialog.clear()
+                  push(
+                    <ExtensionPreferences
+                      extensionName={extensionPackageJson!.name}
+                    />,
+                  )
+                }}
+              />
+            )}
+            {hasCommandPrefs && (
+              <Action
+                title="Configure Command..."
+                onAction={() => {
+                  dialog.clear()
+                  push(
+                    <ExtensionPreferences
+                      extensionName={extensionPackageJson!.name}
+                      commandName={currentCommandName!}
+                    />,
+                  )
+                }}
+              />
+            )}
+            <Action
+              title="Change Theme..."
+              onAction={() => {
+                dialog.clear()
+                dialog.push({ element: <ThemePicker /> })
+              }}
+            />
+          </ActionPanel.Section>
         </Dropdown>
       </ActionPanelContext.Provider>
     </ActionDescendantsProvider>

package/src/components/animation-tick.tsx

@@ -0,0 +1,85 @@
+import React from 'react'
+
+/**
+ * Shared animation tick system for synchronized loading animations.
+ * 
+ * Components subscribe to a global tick counter that increments every 20ms.
+ * Each component can compute its animation state based on the tick value.
+ * 
+ * Intervals (coordinated so animations look synchronized):
+ * - LoadingBar: 40ms (2 ticks) - wave animation
+ * - LoadingText: 40ms (2 ticks) - wave animation, same speed as bar
+ * - Spinner: 200ms (10 ticks) - pulses every 5 wave steps
+ */
+
+type TickListener = (tick: number) => void
+
+let globalTick = 0
+let intervalId: NodeJS.Timeout | null = null
+const listeners = new Set<TickListener>()
+
+const BASE_INTERVAL_MS = 20
+
+function startGlobalTick() {
+  if (intervalId) return
+  intervalId = setInterval(() => {
+    globalTick++
+    listeners.forEach((listener) => {
+      listener(globalTick)
+    })
+  }, BASE_INTERVAL_MS)
+}
+
+function stopGlobalTick() {
+  if (intervalId) {
+    clearInterval(intervalId)
+    intervalId = null
+  }
+}
+
+function subscribe(listener: TickListener) {
+  listeners.add(listener)
+  if (listeners.size === 1) {
+    startGlobalTick()
+  }
+  return () => {
+    listeners.delete(listener)
+    if (listeners.size === 0) {
+      stopGlobalTick()
+    }
+  }
+}
+
+/**
+ * Hook to subscribe to animation ticks.
+ * @param divisor - Only triggers re-render when tick is divisible by this value. Pass 0 to disable (no subscription).
+ * @returns The current tick value (divided by divisor)
+ */
+export function useAnimationTick(divisor: number = 1): number {
+  const [tick, setTick] = React.useState(0)
+
+  React.useEffect(() => {
+    // Don't subscribe if divisor is 0 (disabled)
+    if (divisor <= 0) {
+      setTick(0) // Reset when disabled
+      return
+    }
+
+    const unsubscribe = subscribe((currentTick) => {
+      if (currentTick % divisor === 0) {
+        setTick(Math.floor(currentTick / divisor))
+      }
+    })
+    return unsubscribe
+  }, [divisor])
+
+  return tick
+}
+
+// Tick divisors for each component type (base interval is 20ms)
+// Waves share the same speed so they animate in sync
+export const TICK_DIVISORS = {
+  LOADING_BAR: 2,    // 40ms - wave animation
+  LOADING_TEXT: 2,   // 40ms - wave animation (same as bar)
+  SPINNER: 10,       // 200ms - pulses every 5 wave steps
+} as const