termcast 1.3.9 → 1.3.16

package/src/examples/store.tsx

@@ -1,4 +1,4 @@
 import Store from '../extensions/store'
 import { renderWithProviders } from '../utils'
 
-renderWithProviders(<Store />)
+await renderWithProviders(<Store />)

package/src/examples/store.vitest.tsx

@@ -1,22 +1,24 @@
 import { test, expect, afterEach, beforeEach } from 'vitest'
-import { NodeTuiDriver } from 'termcast/src/e2e-node'
+import { launchTerminal, Session } from 'tuistory/src'
 
-let driver: NodeTuiDriver
+let session: Session
 
-beforeEach(() => {
-  driver = new NodeTuiDriver('bun', ['src/examples/store.tsx'], {
+beforeEach(async () => {
+  session = await launchTerminal({
+    command: 'bun',
+    args: ['src/examples/store.tsx'],
     cols: 80,
     rows: 30,
   })
 })
 
 afterEach(() => {
-  driver?.dispose()
+  session?.close()
 })
 
 test('Store extension - searching for spiceblow shows Database', async () => {
   // Wait for store interface to load
-  const initialOutput = await driver.text({
+  const initialOutput = await session.text({
     waitFor: (text) => {
       // Wait until we see the store title
       return text.includes('Store - Install Extensions')
@@ -28,11 +30,11 @@ test('Store extension - searching for spiceblow shows Database', async () => {
   expect(initialOutput).toContain('Store - Install Extensions')
 
   // Type "spiceblow" in the search bar
-  await driver.keys.type('spiceblow')
+  await session.type('spiceblow')
 
   // Get the output after search, waiting for Database to appear
   // This will automatically wait for the API request to complete and results to show
-  const afterSearchOutput = await driver.text({
+  const afterSearchOutput = await session.text({
     waitFor: (text) => {
       return text.includes('Search, update, insert')
     },
@@ -43,17 +45,32 @@ test('Store extension - searching for spiceblow shows Database', async () => {
   expect(afterSearchOutput).toMatchInlineSnapshot(`
     "
 
+
      Store - Install Extensions ───────────────────────────────────────────────
 
      spiceblow
 
-    ›Spiceblow - Sql Database Management Search, update, insert and delete rows in
-     Spike Resolve incidents, check who is on-call, and add overrides from Raycast
-     Image Modification Apply filters and transformations to various image formats
-     Next Run Spin up a Next.js project from Raycast
-     Donut Show an animation of a donut
+    ›Spiceblow - Sql Database Management Search, update, insert and delete row
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
-     ↵ select   ↑↓ navigate   ^k actions"
+     ↵ select  ↑↓ navigate  ^k actions"
   `)
 }, 30000)

package/src/examples/submodule-diff.tsx

@@ -0,0 +1,153 @@
+import { $ } from 'bun'
+import path from 'node:path'
+import React from 'react'
+import { List, Action, ActionPanel, renderWithProviders, Color } from 'termcast'
+
+interface FileDiff {
+  file: string
+  additions: number
+  deletions: number
+}
+
+interface SubmoduleDiff {
+  name: string
+  path: string
+  files: FileDiff[]
+}
+
+async function getSubmodules(): Promise<{ name: string; path: string }[]> {
+  const result = await $`git submodule status`.text()
+  return result
+    .trim()
+    .split('\n')
+    .filter((line) => {
+      return line.trim()
+    })
+    .map((line) => {
+      const parts = line.trim().split(/\s+/)
+      const submodulePath = parts[1]
+      return {
+        name: path.basename(submodulePath),
+        path: submodulePath,
+      }
+    })
+}
+
+async function getSubmoduleDiff({ submodulePath }: { submodulePath: string }): Promise<FileDiff[]> {
+  try {
+    const result = await $`git -C ${submodulePath} diff --numstat`.text()
+    if (!result.trim()) {
+      return []
+    }
+    return result
+      .trim()
+      .split('\n')
+      .filter((line) => {
+        return line.trim()
+      })
+      .map((line) => {
+        const [additions, deletions, file] = line.split('\t')
+        return {
+          file,
+          additions: additions === '-' ? 0 : parseInt(additions, 10),
+          deletions: deletions === '-' ? 0 : parseInt(deletions, 10),
+        }
+      })
+  } catch {
+    return []
+  }
+}
+
+async function loadSubmoduleDiffs(): Promise<SubmoduleDiff[]> {
+  const submodules = await getSubmodules()
+  const allRepos = [{ name: 'root', path: '.' }, ...submodules]
+  const diffs = await Promise.all(
+    allRepos.map(async (sub) => {
+      const files = await getSubmoduleDiff({ submodulePath: sub.path })
+      return {
+        name: sub.name,
+        path: sub.path,
+        files,
+      }
+    }),
+  )
+  return diffs.filter((d) => {
+    return d.files.length > 0
+  })
+}
+
+const POLL_INTERVAL_MS = 2000
+
+function SubmoduleDiffList(): any {
+  const [diffs, setDiffs] = React.useState<SubmoduleDiff[]>([])
+  const [isLoading, setIsLoading] = React.useState(true)
+  const [lastUpdated, setLastUpdated] = React.useState<Date | null>(null)
+
+  React.useEffect(() => {
+    let mounted = true
+
+    const refresh = async () => {
+      const result = await loadSubmoduleDiffs()
+      if (mounted) {
+        setDiffs(result)
+        setIsLoading(false)
+        setLastUpdated(new Date())
+      }
+    }
+
+    refresh()
+    const interval = setInterval(refresh, POLL_INTERVAL_MS)
+
+    return () => {
+      mounted = false
+      clearInterval(interval)
+    }
+  }, [])
+
+  const subtitle = lastUpdated ? `Watching · Last checked ${lastUpdated.toLocaleTimeString()}` : undefined
+
+  return (
+    <List navigationTitle='Submodule Diffs' isLoading={isLoading} searchBarPlaceholder='Search files...'>
+      {diffs.length === 0 && !isLoading ? (
+        <List.EmptyView title='No changes' description={`No uncommitted changes in submodules · ${subtitle}`} />
+      ) : (
+        diffs.map((submodule) => {
+          return (
+            <List.Section
+              key={submodule.name}
+              title={submodule.name}
+              subtitle={`${submodule.files.length} file${submodule.files.length === 1 ? '' : 's'}`}
+            >
+              {submodule.files.map((file) => {
+                const fullPath = path.join(submodule.path, file.file)
+                return (
+                  <List.Item
+                    key={fullPath}
+                    id={fullPath}
+                    title={file.file}
+                    accessories={[
+                      { text: { value: `+${file.additions}`, color: Color.Green } },
+                      { text: { value: `-${file.deletions}`, color: Color.Red } },
+                    ]}
+                    actions={
+                      <ActionPanel>
+                        <Action
+                          title='Open in Zed'
+                          onAction={async () => {
+                            await $`zed ${fullPath}`
+                          }}
+                        />
+                      </ActionPanel>
+                    }
+                  />
+                )
+              })}
+            </List.Section>
+          )
+        })
+      )}
+    </List>
+  )
+}
+
+await renderWithProviders(<SubmoduleDiffList />)

package/src/examples/tanstack-demo.tsx

@@ -101,4 +101,4 @@ function UsePromiseExample() {
   )
 }
 
-renderWithProviders(<UsePromiseExample />)
+await renderWithProviders(<UsePromiseExample />)

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

@@ -93,4 +93,4 @@ function UsePromiseExample() {
   )
 }
 
-renderWithProviders(<UsePromiseExample />)
+await renderWithProviders(<UsePromiseExample />)

package/src/extensions/dev.tsx

@@ -1,18 +1,21 @@
 import fs from 'node:fs'
 import path from 'node:path'
 import React from 'react'
-import { render } from '@opentui/react'
+import { createRoot } from '@opentui/react'
+import { createCliRenderer } from '@opentui/core'
 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 { TermcastProvider } 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'
+import { runCommand, clearCommandArguments } from '../utils/run-command'
 
 interface BundledCommand extends CommandWithFile {
   bundledPath: string
+  Component?: (props: any) => any
 }
 
 function ExtensionCommandsList({
@@ -23,47 +26,38 @@ function ExtensionCommandsList({
   commands: BundledCommand[]
 }): any {
   const { push } = useNavigation()
-  const packageJson = getCommandsWithFiles({
+  const { packageJson } = getCommandsWithFiles({
     packageJsonPath: path.join(extensionPath, 'package.json'),
-  }).packageJson
+  })
+  const devRebuildCount = useStore((state) => state.devRebuildCount)
 
   const handleCommandSelect = async (command: BundledCommand) => {
+    clearCommandArguments()
+
+    if (!command.bundledPath && !command.Component) {
+      await showToast({
+        style: Toast.Style.Failure,
+        title: 'Command not built',
+        message: `Command ${command.name} was not built successfully`,
+      })
+      return
+    }
+
     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 runCommand({
+        command,
+        extensionName: packageJson.name,
+        packageJson,
+        bundledPath: command.bundledPath,
+        Component: command.Component,
+        push,
+        cacheBustParam: String(devRebuildCount),
+      })
+    } catch (error: any) {
       await showToast({
         style: Toast.Style.Failure,
         title: 'Failed to load command',
-        message: error.message ? error.message : error,
+        message: error.message || String(error),
       })
     }
   }
@@ -170,10 +164,54 @@ export async function startDevMode({
     const devElement = useStore((state) => state.devElement)
     const devRebuildCount = useStore((state) => state.devRebuildCount)
 
-    return <Providers key={String(devRebuildCount)}>{devElement}</Providers>
+    return <TermcastProvider key={String(devRebuildCount)}>{devElement}</TermcastProvider>
+  }
+
+  const renderer = await createCliRenderer()
+  createRoot(renderer).render(<App />)
+}
+
+export async function startCompiledExtension({
+  extensionPath,
+  compiledCommands,
+}: {
+  extensionPath: string
+  compiledCommands: Array<{
+    name: string
+    bundledPath: string
+    Component: (props: any) => any
+  }>
+}): Promise<void> {
+  const packageJsonPath = path.join(extensionPath, 'package.json')
+  const { packageJson, commands: commandsMetadata } = getCommandsWithFiles({
+    packageJsonPath,
+  })
+
+  const commands: BundledCommand[] = compiledCommands.map((compiled) => {
+    const metadata = commandsMetadata.find((cmd) => cmd.name === compiled.name)
+    return {
+      ...metadata!,
+      bundledPath: '',
+      Component: compiled.Component,
+    }
+  })
+
+  useStore.setState({
+    ...useStore.getInitialState(),
+    extensionPath,
+    extensionPackageJson: packageJson,
+    devElement: (
+      <ExtensionCommandsList extensionPath={extensionPath} commands={commands} />
+    ),
+  })
+
+  function App(): any {
+    const devElement = useStore((state) => state.devElement)
+    return <TermcastProvider>{devElement}</TermcastProvider>
   }
 
-  await render(<App />)
+  const renderer = await createCliRenderer()
+  createRoot(renderer).render(<App />)
 }
 
 export async function triggerRebuild({

package/src/extensions/dev.vitest.tsx

@@ -0,0 +1,220 @@
+import { test, expect, afterEach, beforeEach } from 'vitest'
+import { launchTerminal, Session } from 'tuistory/src'
+import path from 'node:path'
+
+let session: Session
+
+const fixtureDir = path.resolve(__dirname, '../../fixtures/simple-extension')
+
+beforeEach(async () => {
+  session = await launchTerminal({
+    command: 'bun',
+    args: ['src/cli.tsx', 'dev', fixtureDir],
+    cols: 60,
+    rows: 16,
+  })
+})
+
+afterEach(() => {
+  session?.close()
+})
+
+test('dev command shows extension commands list', async () => {
+  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
+                                                           ▼
+
+
+     ↵ select  ↑↓ navigate  ^k actions"
+  `)
+}, 30000)
+
+test('selecting command with arguments shows arguments form', async () => {
+  await session.text({
+    waitFor: (text) => /Simple Test Extension/i.test(text),
+    timeout: 10000,
+  })
+
+  // Navigate to "With Arguments" command (6th item)
+  await session.press('down')
+  await session.press('down')
+  await session.press('down')
+  await session.press('down')
+  await session.press('down')
+
+  const selectedSnapshot = await session.text()
+  expect(selectedSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+     Simple Test Extension ────────────────────────────────
+
+     Search commands...
+
+     Search Items Search and filter through a list o view  ▲
+     Google Oauth                                    view
+     usePromise Demo Shows how to use the usePromise view  ▄
+     Show State Shows the current application state  view
+    ›With Arguments Demonstrates command arguments ( view
+                                                           ▼
+
+
+     ↵ select  ↑↓ navigate  ^k actions"
+  `)
+
+  // Select the command to show arguments form (enter opens action panel, enter again runs)
+  await session.press('enter')
+  await session.press('enter')
+
+  await session.text({
+    waitFor: (text) => /Search query/i.test(text),
+    timeout: 10000,
+  })
+
+  const argsFormSnapshot = await session.text()
+  expect(argsFormSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+    ▪  With Arguments                                      █
+    │  Enter the arguments to run this command.            ▀
+    │
+    ◆  Search query
+    ┃  Search query
+    ┃
+    ◇  Secret key
+    │  Secret key
+    ◇  Category
+    │  Category
+
+
+     alt ↵ submit   ↑↓ navigate   ^k actions"
+  `)
+}, 30000)
+
+test('can fill arguments and run command', async () => {
+  await session.text({
+    waitFor: (text) => /Simple Test Extension/i.test(text),
+    timeout: 10000,
+  })
+
+  // Navigate to "With Arguments" command
+  await session.press('down')
+  await session.press('down')
+  await session.press('down')
+  await session.press('down')
+  await session.press('down')
+  await session.press('enter')
+  await session.press('enter')
+
+  await session.text({
+    waitFor: (text) => /Search query/i.test(text),
+    timeout: 10000,
+  })
+
+  // Type in the search query field
+  await session.type('my search term')
+
+  const afterTypingSnapshot = await session.text()
+  expect(afterTypingSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+    ▪  With Arguments                                      █
+    │  Enter the arguments to run this command.            ▀
+    │
+    ◆  Search query
+    ┃  my search term
+    ┃
+    ◇  Secret key
+    │  Secret key
+    ◇  Category
+    │  Category
+
+
+     alt ↵ submit   ↑↓ navigate   ^k actions"
+  `)
+
+  // Submit the form with Alt+Enter (opens action panel), then Enter (selects submit)
+  await session.press(['alt', 'enter'])
+  await session.press('enter')
+
+  await session.text({
+    waitFor: (text) => /Received Arguments/i.test(text),
+    timeout: 10000,
+  })
+
+  const commandResultSnapshot = await session.text()
+  expect(commandResultSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+     Command Arguments Demo ───────────────────────────────
+
+     Search...
+
+     Received Arguments
+    ›Search Query my search term
+     Secret Key (empty)
+     Category (empty)
+
+
+
+     ↵ sele┌────────────────────────────────────────┐
+           │ ✓ Copied to Clipboard - my search term │
+           └────────────────────────────────────────┘"
+  `)
+}, 30000)
+
+test('can run simple view command without arguments', async () => {
+  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 listItemsSnapshot = await session.text()
+  expect(listItemsSnapshot).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
+                                                           ▼
+
+
+     ↵ select  ↑↓ navigate  ^k actions"
+  `)
+}, 30000)