termcast 1.3.9

package/src/examples/tanstack-demo.tsx

@@ -0,0 +1,104 @@
+import React from 'react'
+import { List, ActionPanel, Action, showToast, Toast } from 'termcast'
+import { useQuery } from '@tanstack/react-query'
+import { renderWithProviders } from 'termcast'
+
+interface User {
+  id: number
+  name: string
+  email: string
+  username: string
+  website: string
+  company: {
+    name: string
+  }
+}
+
+async function fetchUsers(searchText?: string): Promise<User[]> {
+  await new Promise((resolve) => {
+    setTimeout(resolve, 800)
+  })
+
+  const response = await fetch('https://jsonplaceholder.typicode.com/users')
+  const users = (await response.json()) as User[]
+
+  if (searchText) {
+    return users.filter((user) => {
+      return user.name.toLowerCase().includes(searchText.toLowerCase())
+    })
+  }
+
+  return users
+}
+
+function UsePromiseExample() {
+  const [searchText, setSearchText] = React.useState('')
+
+  const {
+    isLoading,
+    data: users,
+    error,
+    refetch,
+  } = useQuery({
+    queryKey: ['users', searchText],
+    queryFn: () => fetchUsers(searchText),
+    placeholderData: (previousData) => previousData,
+  })
+
+  React.useEffect(() => {
+    if (error) {
+      showToast({
+        style: Toast.Style.Failure,
+        title: 'Failed to fetch users',
+        message: (error as Error).message,
+      })
+    }
+  }, [error])
+
+  React.useEffect(() => {
+    if (users) {
+      console.log(`Fetched ${users.length} users`)
+    }
+  }, [users])
+
+  return (
+    <List
+      isLoading={isLoading}
+      onSearchTextChange={setSearchText}
+      searchBarPlaceholder='Search users by name...'
+      navigationTitle='usePromise Demo'
+    >
+      {users?.map((user) => {
+        return (
+          <List.Item
+            id={user.id.toString()}
+            title={user.name}
+            subtitle={user.email}
+            accessories={[{ text: user.company.name }]}
+            actions={
+              <ActionPanel>
+                <Action
+                  title='Copy Email'
+                  onAction={() => {
+                    showToast({
+                      style: Toast.Style.Success,
+                      title: 'Copied to clipboard',
+                      message: user.email,
+                    })
+                  }}
+                />
+                <Action title='Refresh Users' onAction={() => refetch()} />
+                <Action.OpenInBrowser
+                  title='Open Website'
+                  url={`https://${user.website}`}
+                />
+              </ActionPanel>
+            }
+          />
+        )
+      })}
+    </List>
+  )
+}
+
+renderWithProviders(<UsePromiseExample />)

package/src/examples/use-promise-demo.tsx

@@ -0,0 +1,96 @@
+import React from 'react'
+import { List, ActionPanel, Action, showToast, Toast } from 'termcast'
+import { useCachedPromise } from '@raycast/utils'
+import { renderWithProviders } from 'termcast'
+
+interface User {
+  id: number
+  name: string
+  email: string
+  username: string
+  website: string
+  company: {
+    name: string
+  }
+}
+
+async function fetchUsers(searchText?: string): Promise<User[]> {
+  await new Promise((resolve) => {
+    setTimeout(resolve, 800)
+  })
+
+  const response = await fetch('https://jsonplaceholder.typicode.com/users')
+  const users = (await response.json()) as User[]
+
+  if (searchText) {
+    return users.filter((user) => {
+      return user.name.toLowerCase().includes(searchText.toLowerCase())
+    })
+  }
+
+  return users
+}
+
+function UsePromiseExample() {
+  const [searchText, setSearchText] = React.useState('')
+
+  const {
+    isLoading,
+    data: users,
+    error,
+    revalidate,
+  } = useCachedPromise(fetchUsers, [searchText], {
+    onError: (error) => {
+      showToast({
+        style: Toast.Style.Failure,
+        title: 'Failed to fetch users',
+        message: error.message,
+      })
+    },
+    onData: (data) => {
+      console.log(`Fetched ${data.length} users`)
+    },
+    keepPreviousData: true,
+  })
+
+  return (
+    <List
+      isLoading={isLoading}
+      onSearchTextChange={setSearchText}
+      searchBarPlaceholder='Search users by name...'
+      navigationTitle='usePromise Demo'
+    >
+      {users?.map((user) => {
+        return (
+          <List.Item
+            id={user.id.toString()}
+            title={user.name}
+            subtitle={user.email}
+            accessories={[{ text: user.company.name }]}
+            actions={
+              <ActionPanel>
+                <Action
+                  title='Copy Email'
+                  onAction={() => {
+                    showToast({
+                      style: Toast.Style.Success,
+                      title: 'Copied to clipboard',
+                      message: user.email,
+                    })
+                  }}
+                />
+                <Action title='Refresh Users' onAction={revalidate} />
+                <Action.OpenInBrowser
+                  title='Open Website'
+                  url={`https://${user.website}`}
+                />
+              </ActionPanel>
+            }
+          />
+        )
+      })}
+    </List>
+  )
+}
+
+renderWithProviders(<UsePromiseExample />)

package/src/extensions/dev.tsx

@@ -0,0 +1,215 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import React from 'react'
+import { render } from '@opentui/react'
+import { List, 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 { getCommandsWithFiles, CommandWithFile } from '../package-json'
+import { buildExtensionCommands } from '../build'
+
+interface BundledCommand extends CommandWithFile {
+  bundledPath: string
+}
+
+function ExtensionCommandsList({
+  extensionPath,
+  commands,
+}: {
+  extensionPath: string
+  commands: BundledCommand[]
+}): any {
+  const { push } = useNavigation()
+  const packageJson = getCommandsWithFiles({
+    packageJsonPath: path.join(extensionPath, 'package.json'),
+  }).packageJson
+
+  const handleCommandSelect = async (command: BundledCommand) => {
+    try {
+      if (!command.bundledPath) {
+        await showToast({
+          style: Toast.Style.Failure,
+          title: 'Command not built',
+          message: `Command ${command.name} was not built successfully`,
+        })
+        return
+      }
+
+      const state = useStore.getState()
+      const devRebuildCount = state.devRebuildCount
+
+      // Set the current command in state
+      useStore.setState({ currentCommandName: command.name })
+
+      const module = await import(
+        `${command.bundledPath}?rebuild=${devRebuildCount}`
+      )
+      const Component = module.default
+
+      if (!Component) {
+        await showToast({
+          style: Toast.Style.Failure,
+          title: 'No default export',
+          message: `Command file ${command.name} has no default export`,
+        })
+        return
+      }
+
+      push(<Component />)
+    } catch (error) {
+      await showToast({
+        style: Toast.Style.Failure,
+        title: 'Failed to load command',
+        message: error.message ? error.message : error,
+      })
+    }
+  }
+
+  return (
+    <List
+      navigationTitle={packageJson.title || 'Extension Commands'}
+      searchBarPlaceholder='Search commands...'
+    >
+      <List.Section title='Commands'>
+        {commands.map((command) => (
+          <List.Item
+            key={command.name}
+            id={command.name}
+            title={command.title}
+            subtitle={command.description}
+            icon={
+              command.icon ? Icon[command.icon as keyof typeof Icon] : undefined
+            }
+            accessories={[
+              { text: command.mode },
+              ...(command.bundledPath
+                ? []
+                : [
+                    {
+                      text: 'Not built',
+                      tooltip: 'Command was not built successfully',
+                    },
+                  ]),
+            ]}
+            keywords={command.keywords}
+            actions={
+              <ActionPanel>
+                <Action
+                  title='Run Command'
+                  onAction={() => {
+                    handleCommandSelect(command)
+                  }}
+                />
+                <Action.CopyToClipboard
+                  content={command.filePath}
+                  title='Copy File Path'
+                />
+                <Action.CopyToClipboard
+                  content={JSON.stringify(command, null, 2)}
+                  title='Copy Command Info'
+                />
+              </ActionPanel>
+            }
+          />
+        ))}
+      </List.Section>
+
+      {commands.length === 0 && (
+        <List.Section title='No Commands'>
+          <List.Item
+            title='No commands found'
+            subtitle='Check your package.json for command definitions'
+          />
+        </List.Section>
+      )}
+    </List>
+  )
+}
+
+export async function startDevMode({
+  extensionPath,
+}: {
+  extensionPath: string
+}): Promise<void> {
+  const resolvedPath = path.resolve(extensionPath)
+
+  if (!fs.existsSync(resolvedPath)) {
+    throw new Error(`Extension path does not exist: ${resolvedPath}`)
+  }
+
+  const packageJsonPath = path.join(resolvedPath, 'package.json')
+  if (!fs.existsSync(packageJsonPath)) {
+    throw new Error(`No package.json found at: ${packageJsonPath}`)
+  }
+
+  // Parse the package.json to get extension metadata
+  const { packageJson } = getCommandsWithFiles({ packageJsonPath })
+
+  // Build and set initial devElement
+  const { commands } = await buildExtensionCommands({
+    extensionPath: resolvedPath,
+    format: 'esm',
+    target: 'bun',
+  })
+
+  // Reset state and set extension information
+  useStore.setState({
+    ...useStore.getInitialState(),
+    extensionPath: resolvedPath,
+    extensionPackageJson: packageJson,
+    devElement: (
+      <ExtensionCommandsList extensionPath={resolvedPath} commands={commands} />
+    ),
+    devRebuildCount: 1,
+  })
+
+  function App(): any {
+    const devElement = useStore((state) => state.devElement)
+    const devRebuildCount = useStore((state) => state.devRebuildCount)
+
+    return <Providers key={String(devRebuildCount)}>{devElement}</Providers>
+  }
+
+  await render(<App />)
+}
+
+export async function triggerRebuild({
+  extensionPath,
+}: {
+  extensionPath: string
+}): Promise<void> {
+  try {
+    const { commands } = await buildExtensionCommands({
+      extensionPath,
+      format: 'esm',
+      target: 'bun',
+    })
+
+    // Re-parse package.json in case it changed
+    const packageJsonPath = path.join(extensionPath, 'package.json')
+    const { packageJson } = getCommandsWithFiles({ packageJsonPath })
+
+    // Update the devElement with new commands and increment rebuild count
+    const state = useStore.getState()
+
+    useStore.setState({
+      extensionPackageJson: packageJson,
+      devElement: (
+        <ExtensionCommandsList
+          extensionPath={extensionPath}
+          commands={commands}
+        />
+      ),
+      devRebuildCount: state.devRebuildCount + 1,
+    })
+  } catch (error: any) {
+    await showToast({
+      style: Toast.Style.Failure,
+      title: 'Rebuild failed',
+      message: error.message,
+    })
+  }
+}