termcast 1.3.30 → 1.3.32

package/src/apis/toast.tsx

@@ -1,9 +1,4 @@
-import React, { useEffect, useState } from 'react'
-import { Theme } from 'termcast/src/theme'
-import { TextAttributes } from '@opentui/core'
-import { useStore } from 'termcast/src/state'
-import { useKeyboard, useTerminalDimensions } from '@opentui/react'
-import { useIsInFocus } from 'termcast/src/internal/focus-context'
+import { useStore, ToastData, ToastStyle } from 'termcast/src/state'
 
 export namespace Toast {
   export interface Options {
@@ -20,302 +15,149 @@ export namespace Toast {
     onAction: (toast: Toast) => void
   }
 
-  export type Style = 'SUCCESS' | 'FAILURE' | 'ANIMATED'
+  export type Style = ToastStyle
 }
 
 export class Toast {
-  private options: Toast.Options
-  private id: string
-  private callbacks: {
-    onUpdate?: (toast: Toast) => void
-    onHide?: () => void
-  } = {}
+  private _id: string
+  private _title: string
+  private _message?: string
+  private _style: ToastStyle
+  private _primaryAction?: Toast.ActionOptions
+  private _secondaryAction?: Toast.ActionOptions
 
   static Style = {
-    Success: 'SUCCESS' as Toast.Style,
-    Failure: 'FAILURE' as Toast.Style,
-    Animated: 'ANIMATED' as Toast.Style,
+    Success: 'SUCCESS' as ToastStyle,
+    Failure: 'FAILURE' as ToastStyle,
+    Animated: 'ANIMATED' as ToastStyle,
   }
 
   constructor(props: Toast.Options) {
-    this.options = { ...props }
-    this.id = Math.random().toString(36).substring(7)
+    this._id = Math.random().toString(36).substring(7)
+    this._title = props.title
+    this._message = props.message
+    this._style = props.style || 'SUCCESS'
+    this._primaryAction = props.primaryAction
+    this._secondaryAction = props.secondaryAction
+  }
+
+  private _isShowing(): boolean {
+    return useStore.getState().toast?.id === this._id
+  }
 
-    // Bind all methods to this instance
-    this.show = this.show.bind(this)
-    this.hide = this.hide.bind(this)
-    this.update = this.update.bind(this)
-    this._setCallbacks = this._setCallbacks.bind(this)
-    this._getId = this._getId.bind(this)
+  private _updateState(): void {
+    if (this._isShowing()) {
+      useStore.setState({
+        toast: this._toData(),
+        toastWithPrimaryAction: Boolean(this._primaryAction),
+      })
+    }
+  }
+
+  private _toData(): ToastData {
+    return {
+      id: this._id,
+      title: this._title,
+      message: this._message,
+      style: this._style,
+      primaryAction: this._primaryAction
+        ? {
+            title: this._primaryAction.title,
+            onAction: () => {
+              this.hide()
+              this._primaryAction?.onAction(this)
+            },
+          }
+        : undefined,
+      secondaryAction: this._secondaryAction
+        ? {
+            title: this._secondaryAction.title,
+            onAction: () => {
+              this.hide()
+              this._secondaryAction?.onAction(this)
+            },
+          }
+        : undefined,
+      onHide: () => {
+        this.hide()
+      },
+    }
   }
 
-  get style(): Toast.Style {
-    return this.options.style || Toast.Style.Success
+  get style(): ToastStyle {
+    return this._style
   }
 
-  set style(style: Toast.Style) {
-    this.options.style = style
-    this.update()
+  set style(style: ToastStyle) {
+    this._style = style
+    this._updateState()
   }
 
   get title(): string {
-    return this.options.title
+    return this._title
   }
 
   set title(title: string) {
-    this.options.title = title
-    this.update()
+    this._title = title
+    this._updateState()
   }
 
   get message(): string | undefined {
-    return this.options.message
+    return this._message
   }
 
   set message(message: string | undefined) {
-    this.options.message = message
-    this.update()
+    this._message = message
+    this._updateState()
   }
 
   get primaryAction(): Toast.ActionOptions | undefined {
-    return this.options.primaryAction
+    return this._primaryAction
   }
 
   set primaryAction(action: Toast.ActionOptions | undefined) {
-    this.options.primaryAction = action
-    this.update()
+    this._primaryAction = action
+    this._updateState()
   }
 
   get secondaryAction(): Toast.ActionOptions | undefined {
-    return this.options.secondaryAction
+    return this._secondaryAction
   }
 
   set secondaryAction(action: Toast.ActionOptions | undefined) {
-    this.options.secondaryAction = action
-    this.update()
+    this._secondaryAction = action
+    this._updateState()
   }
 
   async show(): Promise<void> {
-    showToastInternal(this)
+    useStore.setState({
+      toast: this._toData(),
+      toastWithPrimaryAction: Boolean(this._primaryAction),
+    })
   }
 
   async hide(): Promise<void> {
-    useStore.setState({ toast: null })
-    if (this.callbacks.onHide) {
-      this.callbacks.onHide()
+    if (this._isShowing()) {
+      useStore.setState({ toast: null, toastWithPrimaryAction: false })
     }
   }
-
-  private update(): void {
-    if (this.callbacks.onUpdate) {
-      this.callbacks.onUpdate(this)
-    }
-  }
-
-  _setCallbacks(callbacks: typeof this.callbacks): void {
-    this.callbacks = callbacks
-  }
-
-  _getId(): string {
-    return this.id
-  }
-}
-
-export interface ToastContentProps {
-  toast: Toast
-  onHide: () => void
-}
-
-export function ToastContent({ toast, onHide }: ToastContentProps): any {
-  const [, forceUpdate] = useState(0)
-  const inFocus = useIsInFocus()
-
-  useEffect(() => {
-    const onUpdate = () => {
-      forceUpdate((n) => n + 1)
-    }
-    toast._setCallbacks({ onUpdate, onHide })
-    return () => {
-      toast._setCallbacks({})
-    }
-  }, [toast, onHide])
-
-  useKeyboard((evt) => {
-    if (!inFocus) return
-
-    if (evt.name === 'escape') {
-      onHide()
-    } else if (toast.primaryAction && evt.name === 'return') {
-      toast.primaryAction.onAction(toast)
-    } else if (toast.secondaryAction && evt.name === 'tab') {
-      toast.secondaryAction.onAction(toast)
-    }
-  })
-
-  const getIcon = () => {
-    switch (toast.style) {
-      case Toast.Style.Success:
-        return '✓'
-      case Toast.Style.Failure:
-        return '✗'
-      case Toast.Style.Animated:
-        return '⣾⣽⣻⢿⡿⣟⣯⣷'
-      default:
-        return '✓'
-    }
-  }
-
-  const getIconColor = () => {
-    switch (toast.style) {
-      case Toast.Style.Success:
-        return Theme.success
-      case Toast.Style.Failure:
-        return Theme.error
-      case Toast.Style.Animated:
-        return Theme.primary
-      default:
-        return Theme.success
-    }
-  }
-
-  const [animationFrame, setAnimationFrame] = useState(0)
-
-  useEffect(() => {
-    if (toast.style === Toast.Style.Animated) {
-      const interval = setInterval(() => {
-        setAnimationFrame((prev) => (prev + 1) % 8)
-      }, 100)
-      return () => clearInterval(interval)
-    }
-  }, [toast.style])
-
-  useEffect(() => {
-    if (toast.style !== Toast.Style.Animated) {
-      const duration = toast.style === Toast.Style.Failure ? 8000 : 5000
-      const timer = setTimeout(() => {
-        onHide()
-      }, duration)
-      return () => clearTimeout(timer)
-    }
-  }, [toast.style, onHide])
-
-  const icon =
-    toast.style === Toast.Style.Animated ? getIcon()[animationFrame] : getIcon()
-
-  return (
-    <box
-      borderColor={Theme.border}
-      backgroundColor={Theme.background}
-      paddingLeft={1}
-      paddingRight={1}
-      flexDirection='column'
-    >
-      <box flexDirection='row' alignItems='center'>
-        <text flexShrink={0} fg={getIconColor()}>
-          {icon}{' '}
-        </text>
-        <text flexShrink={0} fg={Theme.text} attributes={TextAttributes.BOLD}>
-          {toast.title}
-        </text>
-        {toast.primaryAction && (
-          <box
-            flexShrink={0}
-            onMouseDown={() => {
-              toast.primaryAction?.onAction(toast)
-            }}
-          >
-            <text fg={Theme.primary}>
-              {' '}
-              [{toast.primaryAction.title} ↵]
-            </text>
-          </box>
-        )}
-        {toast.secondaryAction && (
-          <box
-            flexShrink={0}
-            onMouseDown={() => {
-              toast.secondaryAction?.onAction(toast)
-            }}
-          >
-            <text fg={Theme.textMuted}>
-              {' '}
-              [{toast.secondaryAction.title} ⇥]
-            </text>
-          </box>
-        )}
-      </box>
-      {toast.message && (
-        <box paddingLeft={2}>
-          <text flexShrink={0} fg={Theme.textMuted}>
-            {toast.message}
-          </text>
-        </box>
-      )}
-    </box>
-  )
-}
-
-export function ToastOverlay(): any {
-  const dimensions = useTerminalDimensions()
-  const toastElement = useStore((state) => state.toast)
-
-  if (!toastElement) {
-    return null
-  }
-
-  return (
-    <box
-      position='absolute'
-      left={0}
-      bottom={0}
-      width={dimensions.width}
-      maxHeight={10}
-      justifyContent='flex-end'
-      alignItems='center'
-    >
-      {toastElement}
-    </box>
-  )
-}
-
-let currentToastInstance: Toast | null = null
-
-export function showToastInternal(toast: Toast): void {
-  currentToastInstance = toast
-  useStore.setState({
-    toast: (
-      <ToastContent
-        toast={toast}
-        onHide={() => {
-          useStore.setState({ toast: null })
-          currentToastInstance = null
-        }}
-      />
-    ),
-  })
 }
 
 export async function showToast(options: Toast.Options): Promise<Toast>
 export async function showToast(
   style: Toast.Style,
   title: string,
-  message?: string,
+  message?: string
 ): Promise<Toast>
 export async function showToast(
   optionsOrStyle: Toast.Options | Toast.Style,
   title?: string,
-  message?: string,
+  message?: string
 ): Promise<Toast> {
-  let options: Toast.Options
-
-  if (typeof optionsOrStyle === 'string') {
-    options = {
-      style: optionsOrStyle,
-      title: title!,
-      message,
-    }
-  } else {
-    options = optionsOrStyle
-  }
+  const options: Toast.Options =
+    typeof optionsOrStyle === 'string'
+      ? { style: optionsOrStyle, title: title!, message }
+      : optionsOrStyle
 
   const toast = new Toast(options)
   await toast.show()
@@ -324,37 +166,13 @@ export async function showToast(
 
 /**
  * Creates and shows a failure toast for error scenarios.
- *
- * This is a convenience function that automatically creates a toast with failure styling
- * and extracts error messages from various error types.
- *
- * @param error - The error to display. Can be an Error object, string, or any object with a message property
- * @param options - Optional configuration
- * @param options.title - Custom title for the toast (defaults to error name or "Something went wrong")
- * @param options.primaryAction - Optional action button to display on the toast
- * @returns A Promise that resolves to the created Toast instance
- *
- * @example
- * ```typescript
- * try {
- *   await riskyOperation()
- * } catch (error) {
- *   await showFailureToast(error, {
- *     title: "Operation Failed",
- *     primaryAction: {
- *       title: "Retry",
- *       onAction: () => retryOperation()
- *     }
- *   })
- * }
- * ```
  */
 export async function showFailureToast(
   error: unknown,
   options?: {
     title?: string
     primaryAction?: Toast.ActionOptions
-  },
+  }
 ): Promise<Toast> {
   let errorMessage: string
   let errorTitle: string
@@ -373,12 +191,10 @@ export async function showFailureToast(
     errorTitle = options?.title || 'Something went wrong'
   }
 
-  const toastOptions: Toast.Options = {
+  return showToast({
     title: errorTitle,
     message: errorMessage,
     style: Toast.Style.Failure,
     primaryAction: options?.primaryAction,
-  }
-
-  return showToast(toastOptions)
+  })
 }

package/src/build.test.tsx

@@ -121,6 +121,16 @@ describe('buildExtensionCommands', () => {
             "filePath": "/BASE_PATH/fixtures/simple-extension/src/quick-action.tsx",
             "exists": true,
             "bundledPath": "/BASE_PATH/fixtures/simple-extension/.termcast-bundle/quick-action.js"
+          },
+          {
+            "name": "throw-error",
+            "title": "Throw Error",
+            "subtitle": "Test error handling",
+            "description": "Command that throws an error at root scope",
+            "mode": "view",
+            "filePath": "/BASE_PATH/fixtures/simple-extension/src/throw-error.tsx",
+            "exists": true,
+            "bundledPath": "/BASE_PATH/fixtures/simple-extension/.termcast-bundle/throw-error.js"
           }
         ],
         "bundleDir": "/BASE_PATH/fixtures/simple-extension/.termcast-bundle"

package/src/build.tsx

@@ -2,6 +2,7 @@ import fs from 'node:fs'
 import path from 'node:path'
 import { execSync } from 'node:child_process'
 import type { BunPlugin } from 'bun'
+import * as swc from '@swc/core'
 import { logger } from './logger'
 import { getCommandsWithFiles, CommandWithFile } from './package-json'
 import * as termcastApi from './index'
@@ -179,6 +180,58 @@ export const aliasPlugin: BunPlugin = {
   },
 }
 
+// React Refresh transform plugin for hot reloading using SWC (Rust-based, ~20x faster than Babel)
+// Transforms extension source files to inject $RefreshReg$ and $RefreshSig$ calls
+export const reactRefreshPlugin: BunPlugin = {
+  name: 'react-refresh-transform',
+  async setup(build) {
+    build.onLoad({ filter: /\.[tj]sx?$/ }, async (args) => {
+      // Skip node_modules
+      if (args.path.includes('node_modules')) {
+        return undefined
+      }
+
+      const code = await Bun.file(args.path).text()
+
+      const isTypeScript =
+        args.path.endsWith('.ts') || args.path.endsWith('.tsx')
+      const hasJsx = args.path.endsWith('.tsx') || args.path.endsWith('.jsx')
+
+      const result = await swc.transform(code, {
+        filename: args.path,
+        jsc: {
+          parser: isTypeScript
+            ? {
+                syntax: 'typescript',
+                tsx: hasJsx,
+              }
+            : {
+                syntax: 'ecmascript',
+                jsx: hasJsx,
+              },
+          transform: {
+            react: {
+              development: true,
+              refresh: true, // Built-in React Refresh support in SWC
+              runtime: 'automatic',
+            },
+          },
+        },
+        sourceMaps: 'inline',
+      })
+
+      if (!result?.code) {
+        return undefined
+      }
+
+      return {
+        contents: result.code,
+        loader: 'js', // SWC transforms JSX to JS
+      }
+    })
+  },
+}
+
 interface BundledCommand extends CommandWithFile {
   bundledPath: string
 }
@@ -192,10 +245,12 @@ export async function buildExtensionCommands({
   extensionPath,
   format = 'cjs',
   target,
+  hotReload = false,
 }: {
   extensionPath: string
   format?: 'cjs' | 'esm'
   target?: 'node' | 'bun'
+  hotReload?: boolean
 }): Promise<BuildResult> {
   const resolvedPath = path.resolve(extensionPath)
   const bundleDir = path.join(resolvedPath, '.termcast-bundle')
@@ -221,13 +276,18 @@ export async function buildExtensionCommands({
 
   logger.log(`Building ${entrypoints.length} commands...`)
 
+  const plugins = [aliasPlugin, swiftLoaderPlugin]
+  if (hotReload) {
+    plugins.push(reactRefreshPlugin)
+  }
+
   const result = await Bun.build({
     entrypoints,
     outdir: bundleDir,
     target: target || (format === 'cjs' ? 'node' : 'bun'),
     format,
     // external: [],
-    plugins: [aliasPlugin, swiftLoaderPlugin],
+    plugins,
     naming: '[name].js',
     throw: false,
   })