@tothalex/nulljs 0.0.48 → 0.0.53

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

@@ -1,141 +0,0 @@
-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

@@ -1,67 +0,0 @@
-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

@@ -1,71 +0,0 @@
-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>
-  )
-}

package/src/commands/dev/ui/logging-context.tsx

@@ -1,76 +0,0 @@
-import React, { createContext, useContext, useState, useCallback, type ReactNode } from 'react'
-
-export type LogEntry = {
-  id: string
-  timestamp: Date
-  service: 'server' | 'functions' | 'vite'
-  level: 'info' | 'warn' | 'error'
-  message: string
-}
-
-type LoggingContextType = {
-  logs: Record<string, LogEntry[]>
-  addLog: (service: LogEntry['service'], level: LogEntry['level'], message: string) => void
-  clearLogs: (service?: LogEntry['service']) => void
-}
-
-const LoggingContext = createContext<LoggingContextType | undefined>(undefined)
-
-export const useLogging = () => {
-  const context = useContext(LoggingContext)
-  if (!context) {
-    throw new Error('useLogging must be used within a LoggingProvider')
-  }
-  return context
-}
-
-type LoggingProviderProps = {
-  children: ReactNode
-}
-
-export const LoggingProvider: React.FC<LoggingProviderProps> = ({ children }) => {
-  const [logs, setLogs] = useState<Record<string, LogEntry[]>>({
-    server: [],
-    functions: [],
-    vite: []
-  })
-
-  const addLog = useCallback(
-    (service: LogEntry['service'], level: LogEntry['level'], message: string) => {
-      const newLog: LogEntry = {
-        id: `${service}-${Date.now()}-${Math.random()}`,
-        timestamp: new Date(),
-        service,
-        level,
-        message
-      }
-
-      setLogs((prev) => ({
-        ...prev,
-        [service]: [...prev[service], newLog]
-      }))
-    },
-    []
-  )
-
-  const clearLogs = useCallback((service?: LogEntry['service']) => {
-    if (service) {
-      setLogs((prev) => ({
-        ...prev,
-        [service]: []
-      }))
-    } else {
-      setLogs({
-        server: [],
-        functions: [],
-        vite: []
-      })
-    }
-  }, [])
-
-  return (
-    <LoggingContext.Provider value={{ logs, addLog, clearLogs }}>
-      {children}
-    </LoggingContext.Provider>
-  )
-}

package/src/commands/dev/ui/tabs/functions-tab.tsx

@@ -1,35 +0,0 @@
-import React from 'react'
-import { Box, Text, useStdout } from 'ink'
-import { ScrollArea } from '../components/scroll-area'
-import { LoggingManager } from '../../logging-manager'
-import { useLogging } from '../use-logging'
-
-type FunctionsTabProps = {
-  loggingManager: LoggingManager
-}
-
-export const FunctionsTab: React.FC<FunctionsTabProps> = ({ loggingManager }) => {
-  const { stdout } = useStdout()
-  const { logs } = useLogging(loggingManager, 'functions')
-
-  return (
-    <ScrollArea height={stdout.rows - 5} autoScroll={true}>
-      <Box flexDirection="column" padding={1}>
-        <Text color="green">Functions</Text>
-        {logs.length === 0 ? (
-          <Text dimColor>No function logs yet...</Text>
-        ) : (
-          <Box flexDirection="column">
-            {logs.map((log) => (
-              <Text
-                key={`function-tab-${log.id}`}
-                color={log.level === 'error' ? 'red' : log.level === 'warn' ? 'yellow' : 'white'}>
-                [{log.timestamp.toLocaleTimeString()}] {log.message}
-              </Text>
-            ))}
-          </Box>
-        )}
-      </Box>
-    </ScrollArea>
-  )
-}

package/src/commands/dev/ui/tabs/server-tab.tsx

@@ -1,36 +0,0 @@
-import React from 'react'
-import { Box, Text, useStdout } from 'ink'
-
-import { ScrollArea } from '../components/scroll-area'
-import { LoggingManager } from '../../logging-manager'
-import { useLogging } from '../use-logging'
-
-type ServerTabProps = {
-  loggingManager: LoggingManager
-}
-
-export const ServerTab: React.FC<ServerTabProps> = ({ loggingManager }) => {
-  const { stdout } = useStdout()
-  const { logs } = useLogging(loggingManager, 'server')
-
-  return (
-    <ScrollArea height={stdout.rows - 5} autoScroll={true}>
-      <Box flexDirection="column" padding={1}>
-        <Text color="cyan">Server</Text>
-        {logs.length === 0 ? (
-          <Text dimColor>No server logs yet...</Text>
-        ) : (
-          <Box flexDirection="column">
-            {logs.map((log) => (
-              <Text
-                key={log.id}
-                color={log.level === 'error' ? 'red' : log.level === 'warn' ? 'yellow' : 'white'}>
-                [{log.timestamp.toLocaleTimeString()}] {log.message}
-              </Text>
-            ))}
-          </Box>
-        )}
-      </Box>
-    </ScrollArea>
-  )
-}

package/src/commands/dev/ui/tabs/vite-tab.tsx

@@ -1,35 +0,0 @@
-import React from 'react'
-import { Box, Text, useStdout } from 'ink'
-import { ScrollArea } from '../components/scroll-area'
-import { LoggingManager } from '../../logging-manager'
-import { useLogging } from '../use-logging'
-
-type ViteTabProps = {
-  loggingManager: LoggingManager
-}
-
-export const ViteTab: React.FC<ViteTabProps> = ({ loggingManager }) => {
-  const { stdout } = useStdout()
-  const { logs } = useLogging(loggingManager, 'vite')
-
-  return (
-    <ScrollArea height={stdout.rows - 5} autoScroll={true}>
-      <Box flexDirection="column" padding={1}>
-        <Text color="yellow">Vite</Text>
-        {logs.length === 0 ? (
-          <Text dimColor>No Vite logs yet...</Text>
-        ) : (
-          <Box flexDirection="column">
-            {logs.map((log) => (
-              <Text
-                key={log.id}
-                color={log.level === 'error' ? 'red' : log.level === 'warn' ? 'yellow' : 'white'}>
-                [{log.timestamp.toLocaleTimeString()}] {log.message}
-              </Text>
-            ))}
-          </Box>
-        )}
-      </Box>
-    </ScrollArea>
-  )
-}

package/src/commands/dev/ui/use-logging.tsx

@@ -1,34 +0,0 @@
-import { useState, useEffect } from 'react'
-import { LoggingManager, type LogEntry } from '../logging-manager'
-
-export const useLogging = (loggingManager: LoggingManager, service?: LogEntry['service']) => {
-  const [logs, setLogs] = useState<LogEntry[]>(() => {
-    return service ? loggingManager.getLogs(service) : loggingManager.getLogs()
-  })
-
-  const [allLogs, setAllLogs] = useState<Record<string, LogEntry[]>>(() => {
-    return loggingManager.getAllLogs()
-  })
-
-  useEffect(() => {
-    const unsubscribe = loggingManager.subscribe(() => {
-      if (service) {
-        setLogs(loggingManager.getLogs(service))
-      } else {
-        setLogs(loggingManager.getLogs())
-      }
-      setAllLogs(loggingManager.getAllLogs())
-    })
-
-    return () => {
-      unsubscribe()
-    }
-  }, [loggingManager, service])
-
-  return {
-    logs,
-    allLogs,
-    addLog: loggingManager.addLog.bind(loggingManager),
-    clearLogs: loggingManager.clearLogs.bind(loggingManager)
-  }
-}

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

@@ -1,54 +0,0 @@
-import { createServer, type LogOptions } from 'vite'
-import { dirname, resolve } from 'path'
-import react from '@vitejs/plugin-react'
-import tailwindcss from '@tailwindcss/vite'
-import { writeFile } from 'node:fs/promises'
-
-import { createTempIndexHtml, createViteLogger } from './utils'
-import { getDevConfig } from '../../../lib/config'
-
-const PORT = 5173
-
-export const createVite = async (props: {
-  srcDir: string
-  indexTsxPath: string
-  log: (msg: string, level?: string, options?: LogOptions) => void
-}) => {
-  const devConfig = getDevConfig()
-  const projectDir = dirname(props.srcDir)
-  const tempIndexPath = resolve(projectDir, 'index.html')
-
-  try {
-    const indexHtml = createTempIndexHtml(props.indexTsxPath, projectDir)
-    await writeFile(tempIndexPath, indexHtml)
-
-    const server = await createServer({
-      root: projectDir,
-      plugins: [react(), tailwindcss()],
-      customLogger: createViteLogger(props.log),
-      server: {
-        port: PORT,
-        host: true,
-        proxy: {
-          '/api': {
-            target: `http://localhost:${devConfig.gatewayPort}`,
-            changeOrigin: true,
-            secure: false
-          },
-          '/assets': {
-            target: `http://localhost:${devConfig.gatewayPort}`,
-            changeOrigin: true,
-            secure: false
-          }
-        }
-      }
-    })
-
-    await server.listen()
-    props.log(`Vite server started on http://localhost:${PORT}`)
-
-    return server
-  } catch (error) {
-    console.error('Error setting up Vite:', error)
-  }
-}

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

@@ -1,71 +0,0 @@
-import { resolve, basename } from 'path'
-import type { Logger, LogOptions } from 'vite'
-
-export const createViteLogger = (
-  log: (msg: string, level?: string, options?: LogOptions) => void
-): Logger => {
-  return {
-    info: (msg: string, options) => {
-      log(msg, 'info', options)
-    },
-    warn: (msg: string, options) => {
-      log(msg, 'warn', options)
-    },
-    warnOnce: (msg: string, options) => {
-      log(msg, 'warn', options)
-    },
-    error: (msg: string, options) => {
-      log(msg, 'error', options)
-    },
-    clearScreen: () => {
-      // Not implemented - we don't want to clear screens in our UI
-    },
-    hasErrorLogged: () => {
-      return false // Simple implementation
-    },
-    hasWarned: false
-  }
-}
-
-export const createTempIndexHtml = (componentPath: string, projectRoot: string): string => {
-  const relativePath = resolve(componentPath).replace(projectRoot + '/', '')
-  const componentName = basename(componentPath, '.tsx')
-
-  return `<!DOCTYPE html>
-    <html lang="en">
-      <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>${componentName} - Dev Mode</title>
-        <style>
-          * {
-            box-sizing: border-box;
-          }
-          body {
-            margin: 0;
-            padding: 0;
-            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-          }
-          #root {
-            min-height: 100vh;
-          }
-        </style>
-      </head>
-      <body>
-        <div id="root"></div>
-        <script type="module">
-          import React from 'react'
-          import ReactDOM from 'react-dom/client'
-          import { Page } from '/${relativePath}'
-
-          const root = ReactDOM.createRoot(document.getElementById('root'))
-
-          root.render(
-            React.createElement(React.StrictMode, null,
-              React.createElement(Page)
-            )
-          )
-        </script>
-      </body>
-    </html>`
-}