@tothalex/nulljs 0.0.40

package/src/commands/dev/function/utils.ts

@@ -0,0 +1,99 @@
+import { existsSync, readdirSync } from 'fs'
+import { resolve, basename } from 'path'
+import chalk from 'chalk'
+import { deployFunction, isTypescript, type DeploymentResult } from '../../../lib/deployment'
+import { createSecretsFromFile } from '../../secret'
+
+export const deployFunctionAndLog = async (
+  filePath: string,
+  log: (data: string) => void,
+  force: boolean = false
+): Promise<void> => {
+  if (!isTypescript(filePath)) {
+    log(chalk.gray(`Skipping non-TypeScript file: ${basename(filePath)}`))
+    return
+  }
+
+  try {
+    // Silent logger for watch mode
+    const logger = {
+      log: () => {},
+      error: (error: any) => log(chalk.red(`Error: ${error}`))
+    }
+
+    const result: DeploymentResult = await deployFunction(filePath, logger, force)
+
+    // Show appropriate status based on actual result
+    if (result.error) {
+      log(chalk.red(`  ${basename(filePath, '.ts')} deployment failed`))
+      if (result.error.message.includes('Unable to connect')) {
+        log(chalk.yellow('    Is your server running?'))
+      } else {
+        log(chalk.gray(`    ${result.error.message}`))
+      }
+    } else if (result.cached) {
+      log(chalk.gray(`  ${basename(filePath, '.ts')} skipped (no changes)`))
+    } else if (result.deployed) {
+      log(chalk.green(`  ${basename(filePath, '.ts')} deployed successfully`))
+    }
+  } catch (error: any) {
+    log(chalk.red(`  ✗ ${basename(filePath, '.ts')} failed`))
+    log(chalk.gray(`    ${error.message || error}`))
+  }
+}
+
+export const deployAllFunctions = async (
+  srcDir: string,
+  log: (data: string) => void
+): Promise<void> => {
+  const functionDir = resolve(srcDir, 'function')
+
+  if (!existsSync(functionDir)) {
+    log(chalk.yellow('⚠️ No function directory found'))
+    return
+  }
+
+  try {
+    const files = readdirSync(functionDir, { recursive: true })
+    const tsFiles = files
+      .filter((file): file is string => typeof file === 'string')
+      .filter((file) => file.endsWith('.ts'))
+
+    if (tsFiles.length === 0) {
+      log(chalk.yellow('⚠️ No TypeScript functions found to deploy'))
+      return
+    }
+
+    log(chalk.blue(`🚀 Manually deploying ${tsFiles.length} functions...`))
+
+    for (const file of tsFiles) {
+      const absolutePath = resolve(functionDir, file)
+      await deployFunctionAndLog(absolutePath, log, true)
+    }
+
+    log(chalk.green('✅ Manual function deployment complete'))
+  } catch (error) {
+    log(chalk.red('❌ Error during manual function deployment: ' + error))
+  }
+}
+
+export const deploySecrets = async (srcDir: string, log: (data: string) => void): Promise<void> => {
+  const secretsPath = resolve(srcDir, '../.secrets')
+
+  log(chalk.cyan(`🔍 Checking for .secrets file at ${secretsPath}`))
+
+  if (!existsSync(secretsPath)) {
+    log(chalk.yellow('⚠️ No .secrets file found'))
+    return
+  }
+
+  try {
+    log(chalk.blue('🔐 Deploying secrets from .secrets file...' + ' ' + chalk.gray(secretsPath)))
+
+    await createSecretsFromFile({ filePath: secretsPath, log })
+
+    log(chalk.green('✅ Secret deployment complete'))
+  } catch (error) {
+    log(chalk.red('❌ Error during secret deployment: ' + error))
+  }
+}

package/src/commands/dev/index.tsx

@@ -0,0 +1,126 @@
+import { resolve } from 'path'
+import { exists } from 'node:fs/promises'
+
+import { createServer } from './server'
+import { createVite } from './vite'
+import { UI } from './ui/'
+import { render } from 'ink'
+import { LoggingManager } from './logging-manager'
+import type { Tab } from './ui/components/tab-bar'
+import { createFunctionWatcher } from './function'
+
+const analyzeProject = async (srcDir: string) => {
+  const indexTsxPath = resolve(srcDir, 'index.tsx')
+  const functionDirPath = resolve(srcDir, 'function')
+
+  const hasReactApp = await exists(indexTsxPath)
+  const hasFunctions = await exists(functionDirPath)
+
+  return {
+    hasReactApp,
+    hasFunctions,
+    indexTsxPath: hasReactApp ? indexTsxPath : null
+  }
+}
+
+export const dev = async (srcPath: string) => {
+  const srcDir = resolve(srcPath)
+  const loggingManager = new LoggingManager()
+
+  const { hasFunctions, indexTsxPath } = await analyzeProject(srcDir)
+
+  const tabs: Tab[] = [
+    { name: 'Server', status: 'loading' },
+    { name: 'Functions', status: 'loading' },
+    { name: 'Vite', status: 'loading' }
+  ]
+
+  let viteServer: any = null
+  let serverProcess: any = null
+  let functionWatcher: any = null
+
+  if (indexTsxPath) {
+    viteServer = await createVite({
+      indexTsxPath,
+      srcDir,
+      log: loggingManager.getLogFunction('vite')
+    })
+
+    tabs.find((tab) => tab.name === 'Vite')!.status = 'running'
+  }
+
+  serverProcess = createServer({
+    log: loggingManager.getLogFunction('server')
+  })
+  tabs.find((tab) => tab.name === 'Server')!.status = 'running'
+
+  if (hasFunctions) {
+    functionWatcher = createFunctionWatcher({
+      srcDir,
+      log: loggingManager.getLogFunction('functions')
+    })
+
+    tabs.find((tab) => tab.name === 'Functions')!.status = 'running'
+  }
+
+  const shutdown = async () => {
+    loggingManager.addLog('server', 'info', 'Shutting down services...')
+
+    const shutdownTasks = []
+
+    if (viteServer) {
+      shutdownTasks.push(
+        viteServer
+          .close()
+          .then(() => {
+            loggingManager.addLog('vite', 'info', 'Vite server stopped')
+            tabs.find((tab) => tab.name === 'Vite')!.status = 'stopped'
+          })
+          .catch((error: any) =>
+            loggingManager.addLog('vite', 'error', `Error stopping Vite: ${error}`)
+          )
+      )
+    }
+
+    if (serverProcess) {
+      shutdownTasks.push(
+        Promise.resolve()
+          .then(() => {
+            serverProcess.kill()
+            loggingManager.addLog('server', 'info', 'Server process stopped')
+            tabs.find((tab) => tab.name === 'Server')!.status = 'stopped'
+          })
+          .catch((error: any) =>
+            loggingManager.addLog('server', 'error', `Error stopping server: ${error}`)
+          )
+      )
+    }
+
+    if (functionWatcher) {
+      shutdownTasks.push(
+        functionWatcher
+          .close()
+          .then(() => {
+            loggingManager.addLog('functions', 'info', 'Function watcher stopped')
+            tabs.find((tab) => tab.name === 'Functions')!.status = 'stopped'
+          })
+          .catch((error: any) =>
+            loggingManager.addLog('functions', 'error', `Error stopping function watcher: ${error}`)
+          )
+      )
+    }
+
+    try {
+      await Promise.race([
+        Promise.all(shutdownTasks),
+        new Promise((_, reject) => setTimeout(() => reject(new Error('Shutdown timeout')), 3000))
+      ])
+    } catch (error) {
+      loggingManager.addLog('server', 'warn', `Shutdown timeout or error: ${error}`)
+    }
+
+    process.exit(0)
+  }
+
+  render(<UI tabs={tabs} loggingManager={loggingManager} onShutdown={shutdown} srcDir={srcDir} />)
+}

package/src/commands/dev/logging-manager.ts

@@ -0,0 +1,87 @@
+export type LogEntry = {
+  id: string
+  timestamp: Date
+  service: 'server' | 'functions' | 'vite'
+  level: 'info' | 'warn' | 'error'
+  message: string
+}
+
+export class LoggingManager {
+  private logs: Record<string, LogEntry[]> = {
+    server: [],
+    functions: [],
+    vite: []
+  }
+
+  private listeners: Set<() => void> = new Set()
+
+  addLog(service: LogEntry['service'], level: LogEntry['level'], message: string) {
+    const newLog: LogEntry = {
+      id: `${service}-${Date.now()}-${Math.random()}`,
+      timestamp: new Date(),
+      service,
+      level,
+      message
+    }
+
+    this.logs[service].push(newLog)
+    this.notifyListeners()
+  }
+
+  getLogs(service?: LogEntry['service']): LogEntry[] {
+    if (service) {
+      return [...this.logs[service]]
+    }
+    return Object.values(this.logs).flat()
+  }
+
+  getAllLogs(): Record<string, LogEntry[]> {
+    return {
+      server: [...this.logs.server],
+      functions: [...this.logs.functions],
+      vite: [...this.logs.vite]
+    }
+  }
+
+  clearLogs(service?: LogEntry['service']) {
+    if (service) {
+      this.logs[service] = []
+    } else {
+      this.logs = {
+        server: [],
+        functions: [],
+        vite: []
+      }
+    }
+    this.notifyListeners()
+  }
+
+  subscribe(listener: () => void) {
+    this.listeners.add(listener)
+
+    return () => this.listeners.delete(listener)
+  }
+
+  private notifyListeners() {
+    this.listeners.forEach((listener) => listener())
+  }
+
+  getLogFunction(service: LogEntry['service']) {
+    return (data: any) => {
+      let message: string
+      let level: LogEntry['level'] = 'info'
+
+      if (typeof data === 'string') {
+        message = data
+      } else if (data && typeof data === 'object') {
+        message = data.message || JSON.stringify(data)
+        level = data.level || level
+      } else {
+        message = String(data)
+      }
+
+      this.addLog(service, level, message)
+    }
+  }
+}
+

package/src/commands/dev/server/index.ts

@@ -0,0 +1,48 @@
+import chalk from 'chalk'
+import { spawn } from 'bun'
+import { existsSync } from 'fs'
+
+import { buildServerArgs, getServerBinPath } from './utils'
+import { getDevConfig } from '../../../lib/config'
+
+export const createServer = (props: { log?: (data: string) => void }) => {
+  const serverBinPath = getServerBinPath()
+
+  if (!existsSync(serverBinPath)) {
+    console.log(chalk.yellow('⚠️  Server binary not found ' + serverBinPath))
+    console.log(chalk.gray('   Run: bun run postinstall to install the server'))
+    return null
+  }
+
+  const devConfig = getDevConfig()
+
+  const args = buildServerArgs(devConfig)
+
+  const process = spawn([serverBinPath, ...args], {
+    stdout: props.log ? 'pipe' : 'inherit',
+    stderr: props.log ? 'pipe' : 'inherit'
+  })
+
+  if (props.log && process.stdout && process.stderr) {
+    const decoder = new TextDecoder()
+
+    const readStream = async (stream: ReadableStream<Uint8Array>) => {
+      const reader = stream.getReader()
+      while (true) {
+        const { done, value } = await reader.read()
+        if (done) {
+          break
+        }
+
+        if (props.log) {
+          props.log(decoder.decode(value))
+        }
+      }
+    }
+
+    readStream(process.stdout)
+    readStream(process.stderr)
+  }
+
+  return process
+}

package/src/commands/dev/server/utils.ts

@@ -0,0 +1,37 @@
+import { resolve, dirname, join } from 'path'
+import { existsSync } from 'fs'
+import { fileURLToPath } from 'url'
+
+import { getCloudPath, type DevConfig } from '../../../lib/config'
+
+export const getServerBinPath = (): string => {
+  // Try to find the server binary relative to this module
+  // This works both in development and when installed globally
+  const currentFile = fileURLToPath(import.meta.url)
+  const moduleRoot = resolve(dirname(currentFile), '../../..')
+  const path = join(moduleRoot, 'bin', 'server')
+
+  if (!existsSync(path)) {
+    const currentFile = fileURLToPath(import.meta.url)
+    const moduleRoot = resolve(dirname(currentFile), '../../../..')
+    return join(moduleRoot, 'bin', 'server')
+  }
+
+  return path
+}
+
+export const buildServerArgs = (config: DevConfig): string[] => {
+  const args = ['--dev']
+
+  args.push('--api-port', config.apiPort.toString())
+  args.push('--gateway-port', config.gatewayPort.toString())
+
+  const cloudPath = getCloudPath()
+  args.push('--cloud-path', cloudPath)
+
+  if (config.publicKey) {
+    args.push('--public-key', config.publicKey)
+  }
+
+  return args
+}

package/src/commands/dev/ui/components/scroll-area.tsx

@@ -0,0 +1,141 @@
+import { Box, type DOMElement, measureElement, useInput } from 'ink'
+import { useEffect, useReducer, useRef } from 'react'
+
+interface ScrollAreaState {
+  innerHeight: number
+  height: number
+  scrollTop: number
+}
+
+type ScrollAreaAction =
+  | { type: 'SET_INNER_HEIGHT'; innerHeight: number }
+  | { type: 'SET_HEIGHT'; height: number }
+  | { type: 'SCROLL_DOWN' }
+  | { type: 'SCROLL_UP' }
+  | { type: 'SCROLL_TO_BOTTOM' }
+  | { type: 'SCROLL_TO_TOP' }
+
+const reducer = (state: ScrollAreaState, action: ScrollAreaAction) => {
+  switch (action.type) {
+    case 'SET_INNER_HEIGHT':
+      return {
+        ...state,
+        innerHeight: action.innerHeight
+      }
+    case 'SET_HEIGHT':
+      return {
+        ...state,
+        height: action.height
+      }
+
+    case 'SCROLL_DOWN':
+      return {
+        ...state,
+        scrollTop: Math.min(
+          state.innerHeight <= state.height ? 0 : state.innerHeight - state.height,
+          state.scrollTop + 1
+        )
+      }
+
+    case 'SCROLL_UP':
+      return {
+        ...state,
+        scrollTop: Math.max(0, state.scrollTop - 1)
+      }
+
+    case 'SCROLL_TO_BOTTOM':
+      return {
+        ...state,
+        scrollTop: Math.max(0, state.innerHeight - state.height)
+      }
+
+    case 'SCROLL_TO_TOP':
+      return {
+        ...state,
+        scrollTop: 0
+      }
+
+    default:
+      return state
+  }
+}
+
+export interface ScrollAreaProps extends React.PropsWithChildren {
+  height: number
+  autoScroll?: boolean
+  onRef?: (scrollToBottom: () => void) => void
+  onShutdown?: () => Promise<void>
+}
+
+export function ScrollArea({ height, children, autoScroll = false, onRef }: ScrollAreaProps) {
+  const [state, dispatch] = useReducer(reducer, {
+    height: height,
+    scrollTop: 0,
+    innerHeight: 0
+  })
+
+  const innerRef = useRef<DOMElement>(null)
+
+  const scrollToBottom = () => {
+    dispatch({ type: 'SCROLL_TO_BOTTOM' })
+  }
+
+  useEffect(() => {
+    if (onRef) {
+      onRef(scrollToBottom)
+    }
+  }, [onRef])
+
+  useEffect(() => {
+    dispatch({ type: 'SET_HEIGHT', height })
+  }, [height])
+
+  useEffect(() => {
+    if (!innerRef.current) return
+
+    const dimensions = measureElement(innerRef.current)
+
+    dispatch({
+      type: 'SET_INNER_HEIGHT',
+      innerHeight: dimensions.height
+    })
+
+    if (autoScroll) {
+      scrollToBottom()
+    }
+  }, [children, autoScroll])
+
+  useInput((input) => {
+    if (input === 'j') {
+      dispatch({
+        type: 'SCROLL_DOWN'
+      })
+    }
+
+    if (input === 'k') {
+      dispatch({
+        type: 'SCROLL_UP'
+      })
+    }
+
+    if (input === 'G') {
+      dispatch({
+        type: 'SCROLL_TO_BOTTOM'
+      })
+    }
+
+    if (input === 'g') {
+      dispatch({
+        type: 'SCROLL_TO_TOP'
+      })
+    }
+  })
+
+  return (
+    <Box height={height} flexDirection="column" flexGrow={1} overflow="hidden">
+      <Box ref={innerRef} flexShrink={0} flexDirection="column" marginTop={-state.scrollTop}>
+        {children}
+      </Box>
+    </Box>
+  )
+}

package/src/commands/dev/ui/components/tab-bar.tsx

@@ -0,0 +1,67 @@
+import React from 'react'
+import { Box, Text } from 'ink'
+
+export type Tab = {
+  name: string
+  status?: 'running' | 'stopped' | 'error' | 'loading'
+}
+
+type TabBarProps = {
+  tabs: Tab[]
+  activeTabIndex: number
+  showKeyBindings?: boolean
+  isAutoScrolling?: boolean
+}
+
+const getStatusSymbol = (status?: Tab['status']): string => {
+  switch (status) {
+    case 'running':
+      return '●'
+    case 'stopped':
+      return '○'
+    case 'error':
+      return '✗'
+    case 'loading':
+      return '⋯'
+    default:
+      return '○'
+  }
+}
+
+export const TabBar: React.FC<TabBarProps> = ({ tabs, activeTabIndex, showKeyBindings = true }) => {
+  const tabsText =
+    tabs.length === 0
+      ? 'No services'
+      : tabs
+          .map((tab, index) => {
+            const statusSymbol = getStatusSymbol(tab.status)
+            const isActive = index === activeTabIndex
+            const activeIndicator = isActive ? '►' : ' '
+
+            return `${activeIndicator} ${index + 1}. ${statusSymbol} ${tab.name}  `
+          })
+          .join('')
+
+  const currentTab = tabs[activeTabIndex]
+  const functionKeybinding =
+    currentTab?.name === 'Functions' ? ' | d: deploy all functions | s: deploy secrets' : ''
+  const keyBindings = showKeyBindings
+    ? `h/l: switch panels | j/k: scroll | g/G: top/bottom | q: quit${functionKeybinding}`
+    : ''
+
+  return (
+    <Box
+      borderStyle="single"
+      borderColor="white"
+      paddingX={1}
+      justifyContent="space-between"
+      flexDirection="row">
+      <Text>{tabsText}</Text>
+      {showKeyBindings && (
+        <Text color="gray" dimColor>
+          {keyBindings}
+        </Text>
+      )}
+    </Box>
+  )
+}

package/src/commands/dev/ui/index.tsx

@@ -0,0 +1,71 @@
+import { useCallback, useState } from 'react'
+import { Box, useStdout, useInput } from 'ink'
+
+import { TabBar, type Tab } from './components/tab-bar'
+import { ServerTab } from './tabs/server-tab'
+import { FunctionsTab } from './tabs/functions-tab'
+import { ViteTab } from './tabs/vite-tab'
+import { LoggingManager } from '../logging-manager'
+import { deployAllFunctions, deploySecrets } from '../function/utils'
+
+type UIProps = {
+  loggingManager: LoggingManager
+  onShutdown: () => Promise<void>
+  tabs: Tab[]
+  srcDir: string
+}
+
+export const UI: React.FC<UIProps> = ({ loggingManager, onShutdown, tabs, srcDir }) => {
+  const { stdout } = useStdout()
+  const [activeTabIndex, setActiveTabIndex] = useState(0)
+
+  const switchToNextService = useCallback(() => {
+    setActiveTabIndex((prev) => (prev + 1) % tabs.length)
+  }, [tabs.length])
+
+  const switchToPrevService = useCallback(() => {
+    setActiveTabIndex((prev) => (prev - 1 + tabs.length) % tabs.length)
+  }, [tabs.length])
+
+  useInput(async (input, key) => {
+    if (input === 'l') {
+      switchToNextService()
+    }
+
+    if (input === 'h') {
+      switchToPrevService()
+    }
+
+    if (input === 'd') {
+      await deployAllFunctions(srcDir, loggingManager.getLogFunction('functions'))
+    }
+
+    if (input === 's') {
+      await deploySecrets(srcDir, loggingManager.getLogFunction('functions'))
+    }
+
+    if (input === 'q' || (key.ctrl && input === 'c')) {
+      await onShutdown()
+    }
+  })
+
+  const renderActiveTab = () => {
+    switch (activeTabIndex) {
+      case 0:
+        return <ServerTab loggingManager={loggingManager} />
+      case 1:
+        return <FunctionsTab loggingManager={loggingManager} />
+      case 2:
+        return <ViteTab loggingManager={loggingManager} />
+      default:
+        return <ServerTab loggingManager={loggingManager} />
+    }
+  }
+
+  return (
+    <Box flexDirection="column" width="100%" height={stdout?.rows - 1 || 24}>
+      <TabBar tabs={tabs} activeTabIndex={activeTabIndex} />
+      {renderActiveTab()}
+    </Box>
+  )
+}