termcast 1.3.9

package/src/extensions/home.tsx

@@ -0,0 +1,332 @@
+import fs from 'node:fs'
+import React from 'react'
+import { render } from '@opentui/react'
+import { List, logger, useStore } from 'termcast'
+import { Action, ActionPanel } from 'termcast'
+import { useNavigation } from 'termcast/src/internal/navigation'
+import { Providers } from 'termcast/src/internal/providers'
+import { showToast, Toast } from 'termcast/src/apis/toast'
+import { Icon } from 'termcast'
+import { getStoredExtensions } from '../utils'
+import Store from './store'
+import { ExtensionPreferences } from '../components/extension-preferences'
+import { LocalStorage } from 'termcast/src/apis/localstorage'
+import '../globals'
+
+interface ExtensionCommand {
+  extensionName: string
+  extensionTitle: string
+  command: any
+  bundledPath?: string
+  Component?: () => any
+  packageJson?: any
+}
+
+// Built-in extensions available globally
+const builtinExtensions: ExtensionCommand[] = [
+  {
+    extensionName: 'termcast-store',
+    extensionTitle: 'Termcast Store',
+    command: {
+      name: 'store',
+      title: 'Store - Install Extensions',
+      description: 'Browse and install extensions from the Raycast Store',
+      mode: 'view',
+      icon: 'Store',
+    },
+    Component: Store,
+  },
+]
+
+function ExtensionsList({
+  allCommands,
+  initialSearchQuery = '',
+}: {
+  allCommands: ExtensionCommand[]
+  initialSearchQuery?: string
+}): any {
+  const { push } = useNavigation()
+  const [searchText, setSearchText] = React.useState(initialSearchQuery)
+
+  const handleCommandSelect = async (item: ExtensionCommand) => {
+    try {
+      await runCommand(item)
+    } catch (error: any) {
+      await showToast({
+        style: Toast.Style.Failure,
+        title: 'Failed to load command',
+        message: error.message || String(error),
+      })
+    }
+  }
+
+  const runCommand = async (item: ExtensionCommand) => {
+    // Check if command has required preferences that are missing
+    const checkRequiredPreferences = async (): Promise<{
+      hasRequiredPreferences: boolean
+      requiredPreferences?: 'command' | 'extension'
+    }> => {
+      // Get package.json to check required preferences
+      if (!item.bundledPath || item.Component || !item.packageJson) {
+        // Built-in commands or commands without packageJson don't have preferences
+        return { hasRequiredPreferences: true }
+      }
+
+      const packageJson = item.packageJson
+
+      // Check command-specific preferences
+      const command = packageJson.commands?.find(
+        (cmd: any) => cmd.name === item.command.name,
+      )
+      const commandPrefs = command?.preferences || []
+
+      // Check extension-wide preferences
+      const extensionPrefs = packageJson.preferences || []
+
+      // Get saved preferences
+      const commandPrefsKey = `preferences.${item.extensionName}.${item.command.name}`
+      const extensionPrefsKey = `preferences.${item.extensionName}`
+
+      const savedCommandPrefs = await LocalStorage.getItem(commandPrefsKey)
+      const savedExtensionPrefs = await LocalStorage.getItem(extensionPrefsKey)
+
+      const parsedCommandPrefs = savedCommandPrefs
+        ? JSON.parse(savedCommandPrefs as string)
+        : {}
+      const parsedExtensionPrefs = savedExtensionPrefs
+        ? JSON.parse(savedExtensionPrefs as string)
+        : {}
+
+      // Check if all required command preferences are set
+      for (const pref of commandPrefs) {
+        if (pref.required && parsedCommandPrefs[pref.name] == null) {
+          return {
+            hasRequiredPreferences: false,
+            requiredPreferences: 'command',
+          }
+        }
+      }
+
+      // Check if all required extension preferences are set
+      for (const pref of extensionPrefs) {
+        if (pref.required && parsedExtensionPrefs[pref.name] == null) {
+          return {
+            hasRequiredPreferences: false,
+            requiredPreferences: 'extension',
+          }
+        }
+      }
+
+      return { hasRequiredPreferences: true }
+    }
+
+    const prefsCheck = await checkRequiredPreferences()
+
+    if (!prefsCheck.hasRequiredPreferences) {
+      // TODO: Use replace instead of push to avoid stacking navigation
+      // Redirect to preferences with onSubmit to run command after
+      push(
+        <ExtensionPreferences
+          extensionName={item.extensionName}
+          commandName={
+            prefsCheck.requiredPreferences === 'command'
+              ? item.command.name
+              : undefined
+          }
+          onSubmit={() => {
+            // Recursively run command after preferences are set
+            runCommand(item)
+          }}
+        />,
+      )
+      return
+    }
+
+    let Component: (() => any) | undefined
+
+    if (item.Component) {
+      Component = item.Component
+    } else if (item.bundledPath) {
+      const module = await import(item.bundledPath)
+      Component = module.default
+
+      if (!Component) {
+        await showToast({
+          style: Toast.Style.Failure,
+          title: 'No default export',
+          message: `Command file ${item.command.name} has no default export`,
+        })
+        return
+      }
+    } else {
+      await showToast({
+        style: Toast.Style.Failure,
+        title: 'Command not available',
+        message: `Command ${item.command.name} has no implementation`,
+      })
+      return
+    }
+
+    push(<Component />)
+  }
+
+  // Group commands by extension
+  const groupedByExtension = allCommands.reduce(
+    (acc, cmd) => {
+      if (!acc[cmd.extensionName]) {
+        acc[cmd.extensionName] = {
+          title: cmd.extensionTitle,
+          commands: [],
+        }
+      }
+      acc[cmd.extensionName].commands.push(cmd)
+      return acc
+    },
+    {} as Record<string, { title: string; commands: ExtensionCommand[] }>,
+  )
+
+  return (
+    <List
+      navigationTitle='Installed Extensions'
+      searchBarPlaceholder='Search commands...'
+      filtering={true}
+      onSearchTextChange={setSearchText}
+      searchText={searchText}
+    >
+      {Object.entries(groupedByExtension).map(
+        ([extensionName, { title, commands }]) => (
+          <List.Section key={extensionName} title={title}>
+            {commands.map((item) => (
+              <List.Item
+                key={`${item.extensionName}-${item.command.name}`}
+                id={`${item.extensionName}-${item.command.name}`}
+                title={item.command.title}
+                subtitle={item.command.description}
+                icon={
+                  item.command.icon
+                    ? Icon[item.command.icon as keyof typeof Icon]
+                    : undefined
+                }
+                accessories={
+                  item.command.mode ? [{ text: item.command.mode }] : []
+                }
+                keywords={[
+                  ...(item.command.keywords || []),
+                  item.extensionName,
+                ]}
+                actions={
+                  <ActionPanel>
+                    <Action
+                      title='Run Command'
+                      onAction={() => {
+                        handleCommandSelect(item)
+                      }}
+                    />
+                    <Action
+                      title='Configure Extension'
+                      onAction={() => {
+                        push(
+                          <ExtensionPreferences
+                            extensionName={item.extensionName}
+                            onSubmit={() => {
+                              // After configuring extension preferences, try to run the command
+                              runCommand(item)
+                            }}
+                          />,
+                        )
+                      }}
+                    />
+                    <Action
+                      title='Configure Command'
+                      onAction={() => {
+                        push(
+                          <ExtensionPreferences
+                            extensionName={item.extensionName}
+                            commandName={item.command.name}
+                            onSubmit={() => {
+                              // After configuring command preferences, try to run the command
+                              runCommand(item)
+                            }}
+                          />,
+                        )
+                      }}
+                    />
+                    {item.bundledPath && (
+                      <Action.CopyToClipboard
+                        content={item.bundledPath}
+                        title='Copy Bundle Path'
+                      />
+                    )}
+                    <Action.CopyToClipboard
+                      content={JSON.stringify(item.command, null, 2)}
+                      title='Copy Command Info'
+                    />
+                  </ActionPanel>
+                }
+              />
+            ))}
+          </List.Section>
+        ),
+      )}
+
+      {allCommands.length === 0 && (
+        <List.Section title='No Commands'>
+          <List.Item
+            title='No extensions installed'
+            subtitle='Use "termcast build" to install an extension'
+          />
+        </List.Section>
+      )}
+    </List>
+  )
+}
+
+export async function runHomeCommand(): Promise<void> {
+  logger.log(`preparing to render the home command component`)
+
+  await render(
+    <Providers>
+      <Home />
+    </Providers>,
+  )
+  logger.log(`rendered home command component`)
+}
+
+export default function Home({
+  initialSearchQuery = '',
+  key,
+}: {
+  initialSearchQuery?: string
+  key?: React.Key
+}): any {
+  const storedExtensions = getStoredExtensions()
+
+  const allCommands: ExtensionCommand[] = []
+
+  allCommands.push(...builtinExtensions)
+
+  for (const extension of storedExtensions) {
+    const packageJson = JSON.parse(
+      fs.readFileSync(extension.packageJsonPath, 'utf-8'),
+    )
+
+    for (const command of extension.commands) {
+      if (command.bundledPath) {
+        allCommands.push({
+          extensionName: extension.name,
+          extensionTitle: packageJson.title || extension.name,
+          command,
+          bundledPath: command.bundledPath,
+          packageJson,
+        })
+      }
+    }
+  }
+
+  return (
+    <ExtensionsList
+      allCommands={allCommands}
+      initialSearchQuery={initialSearchQuery}
+    />
+  )
+}

package/src/extensions/store.tsx

@@ -0,0 +1,375 @@
+import React, { useState } from 'react'
+import fs from 'node:fs'
+import path from 'node:path'
+import dedent from 'string-dedent'
+import { useQuery } from '@tanstack/react-query'
+import {
+  List,
+  Detail,
+  Action,
+  ActionPanel,
+  showToast,
+  Toast,
+  Icon,
+} from 'termcast'
+import { useNavigation } from 'termcast/src/internal/navigation'
+import { ExtensionPreferences } from '../components/extension-preferences'
+import { searchStoreListings } from '../store-api/search'
+import { fetchExtension } from '../store-api/extension'
+import { downloadExtension } from '../store-api/download'
+import { getStoreDirectory } from '../utils'
+import { buildExtensionCommands } from '../build'
+import { logger } from '../logger'
+import { parsePackageJson } from '../package-json'
+import Home from './home'
+import {
+  checkExtensionPreferences,
+  type ExtensionPreferencesInfo,
+} from '../utils'
+
+interface StoreListing {
+  id: string
+  name: string
+  author: {
+    name: string
+    handle: string
+  }
+  owner: {
+    name: string
+    handle: string
+  }
+  title: string
+  description: string
+  download_count: number
+  updated_at: number
+  categories: string[]
+  commands: Array<{
+    title: string
+    description: string
+    mode: string
+  }>
+}
+
+function StoreSearch(): any {
+  const [searchQuery, setSearchQuery] = useState('')
+  const { push } = useNavigation()
+
+  const {
+    isLoading,
+    isPending,
+    isFetching,
+    data: extensions,
+    error,
+  } = useQuery({
+    queryKey: ['store-search', searchQuery],
+    queryFn: async () => {
+      // If no query, use 'raycast' to get default popular extensions
+      const query = searchQuery.trim() || 'raycast'
+      logger.log(`Store searching for: "${query}"`)
+      const response = await searchStoreListings({ query })
+      logger.log(`Store search returned ${response.data?.length || 0} results`)
+      return response.data
+    },
+    placeholderData: (previousData) => previousData, // Keep previous data while fetching
+  })
+
+  // Show error toast if query fails
+  React.useEffect(() => {
+    if (error) {
+      showToast({
+        style: Toast.Style.Failure,
+        title: 'Search failed',
+        message: (error as Error).message,
+      })
+    }
+  }, [error])
+
+  return (
+    <List
+      navigationTitle='Store - Install Extensions'
+      searchBarPlaceholder='Search extensions...'
+      filtering={false}
+      onSearchTextChange={setSearchQuery}
+      isLoading={isPending || isFetching}
+    >
+      {extensions?.map((ext) => (
+        <List.Item
+          key={ext.id}
+          id={ext.id}
+          title={ext.title}
+          subtitle={ext.description}
+          accessories={[]}
+          keywords={ext.categories}
+          actions={
+            <ActionPanel>
+              <Action
+                title='View Details'
+                onAction={() => {
+                  const Component = () => <ExtensionDetails extension={ext} />
+                  Component.displayName = `store-extension-${ext.name}`
+                  push(<Component />)
+                }}
+              />
+              <Action.OpenInBrowser
+                url={`https://raycast.com/${ext.owner.handle}/${ext.name}`}
+                title='Open in Raycast Store'
+              />
+            </ActionPanel>
+          }
+        />
+      ))}
+    </List>
+  )
+}
+
+function ExtensionDetails({ extension }: { extension: StoreListing }): any {
+  const [isInstalling, setIsInstalling] = useState(false)
+  const [isInstalled, setIsInstalled] = useState(false)
+  const [extensionInfo, setExtensionInfo] = useState<ExtensionPreferencesInfo>({
+    hasPreferences: false,
+    hasRequiredPreferences: false,
+  })
+  const { pop, push } = useNavigation()
+
+  // Check if extension is already installed and get preferences info
+  React.useEffect(() => {
+    const storeDir = getStoreDirectory()
+    const extensionDir = path.join(storeDir, extension.name)
+    const installed = fs.existsSync(extensionDir)
+    setIsInstalled(installed)
+
+    // Check preferences info if installed
+    if (installed) {
+      const prefsInfo = checkExtensionPreferences(extension.name)
+      setExtensionInfo(prefsInfo)
+    }
+  }, [extension.name])
+
+  const formatDate = (timestamp: number) => {
+    return new Date(timestamp * 1000).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    })
+  }
+
+  const handleInstall = async () => {
+    setIsInstalling(true)
+    try {
+      await showToast({
+        style: Toast.Style.Animated,
+        title: 'Downloading extension...',
+      })
+
+      const files = await downloadExtension({
+        author: extension.owner.handle,
+        extension: extension.name,
+      })
+
+      const storeDir = getStoreDirectory()
+      const extensionDir = path.join(storeDir, extension.name)
+
+      if (fs.existsSync(extensionDir)) {
+        fs.rmSync(extensionDir, { recursive: true, force: true })
+      }
+
+      fs.mkdirSync(extensionDir, { recursive: true })
+
+      // Write all files to the extension directory
+      for (const file of files) {
+        const filePath = path.join(extensionDir, file.filename)
+        const fileDir = path.dirname(filePath)
+
+        if (!fs.existsSync(fileDir)) {
+          fs.mkdirSync(fileDir, { recursive: true })
+        }
+
+        fs.writeFileSync(filePath, file.buffer)
+      }
+
+      await showToast({
+        style: Toast.Style.Animated,
+        title: 'Building extension...',
+      })
+
+      // Build the extension commands to create bundles
+      try {
+        const buildResult = await buildExtensionCommands({
+          extensionPath: extensionDir,
+          format: 'cjs',
+          target: 'node',
+        })
+        logger.log(
+          `Built ${buildResult.commands.length} commands for ${extension.name}`,
+        )
+      } catch (buildError: any) {
+        // Log build error but don't fail installation
+        logger.error(
+          `Failed to build extension commands: ${buildError.message}`,
+        )
+        await showToast({
+          style: Toast.Style.Animated,
+          title: 'Warning',
+          message: buildError?.message,
+        })
+        return
+      }
+
+      await showToast({
+        style: Toast.Style.Success,
+        title: 'Extension installed',
+        message: `${extension.title} has been installed successfully`,
+      })
+
+      logger.log(`Extension '${extension.name}' installed to ${extensionDir}`)
+      setIsInstalled(true)
+
+      // Update extension info after installation
+      const prefsInfo = checkExtensionPreferences(extension.name)
+      setExtensionInfo(prefsInfo)
+
+      // Ask if user wants to configure preferences
+      await showToast({
+        style: Toast.Style.Success,
+        title: 'Configure preferences?',
+        message: 'Would you like to configure extension preferences now?',
+        primaryAction: {
+          title: 'Configure',
+          onAction: () => {
+            const Component = () => (
+              <ExtensionPreferences extensionName={extension.name} />
+            )
+            Component.displayName = `store-preferences-${extension.name}`
+            push(<Component />)
+          },
+        },
+      })
+    } catch (error: any) {
+      await showToast({
+        style: Toast.Style.Failure,
+        title: 'Installation failed',
+        message: error.message,
+      })
+    } finally {
+      setIsInstalling(false)
+    }
+  }
+
+  const markdownContent = dedent`
+        # ${extension.title}
+
+        ${extension.description}
+
+        ## Commands
+
+        ${extension.commands
+          .map(
+            (cmd) => dedent`
+            ### ${cmd.title}
+            ${cmd.description || 'No description available'}
+            **Mode:** ${cmd.mode}
+        `,
+          )
+          .join('\n\n')}
+
+        ## Information
+
+        - **Author:** ${extension.author.name} (@${extension.author.handle})
+        - **Downloads:** ${extension.download_count.toLocaleString()}
+        - **Last Updated:** ${formatDate(extension.updated_at)}
+        - **Categories:** ${extension.categories.join(', ')}
+    `
+
+  return (
+    <Detail
+      navigationTitle={extension.title}
+      markdown={markdownContent}
+      metadata={
+        <Detail.Metadata>
+          <Detail.Metadata.Label title='Author' text={extension.author.name} />
+          <Detail.Metadata.Label
+            title='Downloads'
+            text={extension.download_count.toLocaleString()}
+          />
+          <Detail.Metadata.Label
+            title='Commands'
+            text={extension.commands.length.toString()}
+          />
+          <Detail.Metadata.Separator />
+          <Detail.Metadata.Label
+            title='Updated'
+            text={formatDate(extension.updated_at)}
+          />
+          <Detail.Metadata.TagList title='Categories'>
+            {extension.categories.map((cat, index) => (
+              <Detail.Metadata.TagList.Item text={cat} />
+            ))}
+          </Detail.Metadata.TagList>
+        </Detail.Metadata>
+      }
+      actions={
+        <ActionPanel>
+          {!isInstalled ? (
+            <Action
+              title={isInstalling ? 'Installing...' : 'Install Extension'}
+              onAction={handleInstall}
+            />
+          ) : (
+            <>
+              {extensionInfo.hasRequiredPreferences && (
+                <Action
+                  title='Configure Extension'
+                  onAction={() => {
+                    const Component = () => (
+                      <ExtensionPreferences extensionName={extension.name} />
+                    )
+                    Component.displayName = `store-preferences-${extension.name}`
+                    push(<Component />)
+                  }}
+                />
+              )}
+              <Action
+                title='Use Extension'
+                onAction={() => {
+                  const Component = () => (
+                    <Home
+                      key={extension.name}
+                      initialSearchQuery={extension.name}
+                    />
+                  )
+                  Component.displayName = `store-home-${extension.name}`
+                  push(<Component />)
+                }}
+              />
+              {extensionInfo.hasPreferences &&
+                !extensionInfo.hasRequiredPreferences && (
+                  <Action
+                    title='Configure Extension'
+                    onAction={() => {
+                      const Component = () => (
+                        <ExtensionPreferences extensionName={extension.name} />
+                      )
+                      Component.displayName = `store-preferences-${extension.name}`
+                      push(<Component />)
+                    }}
+                  />
+                )}
+              <Action title='Reinstall Extension' onAction={handleInstall} />
+            </>
+          )}
+          <Action.OpenInBrowser
+            url={`https://raycast.com/${extension.owner.handle}/${extension.name}`}
+            title='View in Raycast Store'
+          />
+        </ActionPanel>
+      }
+    />
+  )
+}
+ExtensionDetails.displayName = 'ExtensionDetails'
+
+StoreSearch.displayName = 'StoreSearch'
+export default function Store(): any {
+  return <StoreSearch />
+}
+Store.displayName = 'Store'