@tothalex/nulljs 0.0.48 → 0.0.53

package/src/components/Header.tsx

@@ -0,0 +1,57 @@
+import type { BinarySource } from '../lib/server'
+
+type Tab = 'system' | 'deployment'
+
+type HeaderProps = {
+  activeTab: Tab
+  functionCount: number
+  viteRunning: boolean
+  isDeploying: boolean
+  binarySource: BinarySource
+}
+
+const getBinarySourceLabel = (source: BinarySource): string => {
+  switch (source) {
+    case 'local-debug':
+      return 'local (debug)'
+    case 'local-release':
+      return 'local (release)'
+    case 'local-env':
+      return 'local (env)'
+    case 'npm':
+      return 'npm'
+  }
+}
+
+export const Header = (props: HeaderProps) => {
+  const { activeTab, functionCount, viteRunning, isDeploying, binarySource } = props
+
+  return (
+    <box flexDirection="row" justifyContent="space-between">
+      <box flexDirection="row">
+        <text fg={activeTab === 'system' ? 'cyan' : undefined} content="[1] System Logs" />
+        <text content=" | " />
+        <text fg={activeTab === 'deployment' ? 'cyan' : undefined} content="[2] Deployment Logs" />
+      </box>
+      <box flexDirection="row">
+        {isDeploying ? (
+          <text fg="yellow" content="● deploying all..." />
+        ) : (
+          <text fg={functionCount > 0 ? 'green' : 'yellow'} content="● watching" />
+        )}
+        <text fg="gray" content={` (${functionCount} functions)`} />
+        {viteRunning && (
+          <>
+            <text fg="gray" content=" | vite: " />
+            <text fg="magenta" content=":5173" />
+          </>
+        )}
+        <text fg="gray" content=" | server: " />
+        <text
+          fg={binarySource.startsWith('local') ? 'yellow' : 'green'}
+          content={getBinarySourceLabel(binarySource)}
+        />
+      </box>
+    </box>
+  )
+}

package/src/components/HelpModal.tsx

@@ -0,0 +1,64 @@
+type HelpModalProps = {
+  visible: boolean
+}
+
+const KeyBinding = ({ keys, description }: { keys: string; description: string }) => (
+  <text>
+    {'  '}
+    <span fg="green">{keys}</span>
+    <span fg="gray"> - </span>
+    {description}
+  </text>
+)
+
+const Section = ({ title }: { title: string }) => (
+  <text>
+    <span fg="gray">{title}</span>
+  </text>
+)
+
+export const HelpModal = ({ visible }: HelpModalProps) => {
+  if (!visible) return null
+
+  return (
+    <box
+      position="absolute"
+      top={0}
+      left={0}
+      width="100%"
+      height="100%"
+      backgroundColor="black"
+      opacity={0.9}
+      justifyContent="center"
+      alignItems="center">
+      <box
+        width={50}
+        height={18}
+        border
+        borderStyle="rounded"
+        flexDirection="column"
+        padding={1}
+        backgroundColor="black">
+        <text>
+          <span fg="cyan">
+            <strong>Keyboard Shortcuts</strong>
+          </span>
+        </text>
+        <text />
+        <Section title="Navigation" />
+        <KeyBinding keys="1/2" description="Switch tabs" />
+        <KeyBinding keys="h/l" description="Previous/next tab" />
+        <KeyBinding keys="Tab" description="Cycle tabs" />
+        <text />
+        <Section title="Scrolling" />
+        <KeyBinding keys="j/k" description="Scroll down/up" />
+        <KeyBinding keys="g/G" description="Top/bottom" />
+        <text />
+        <Section title="Actions" />
+        <KeyBinding keys="d" description="Deploy all" />
+        <KeyBinding keys="?" description="Toggle help" />
+        <KeyBinding keys="Esc" description="Close help" />
+      </box>
+    </box>
+  )
+}

package/src/components/SystemLogsPane.tsx

@@ -0,0 +1,78 @@
+import type { SystemLogEntry } from '@nulljs/api'
+
+interface SystemLogsPaneProps {
+  logs: SystemLogEntry[]
+  loading: boolean
+  autoScroll: boolean
+  jumpTrigger: number
+}
+
+const getLevelColor = (level: string): string => {
+  switch (level.toLowerCase()) {
+    case 'error':
+      return 'red'
+    case 'warn':
+    case 'warning':
+      return 'yellow'
+    case 'info':
+      return 'green'
+    case 'debug':
+    case 'trace':
+      return 'gray'
+    default:
+      return 'white'
+  }
+}
+
+const sanitizeMessage = (message: string): string => {
+  return message
+    .replace(/\x1b\[[0-9;]*m/g, '')
+    .replace(/[\r\n]+/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim()
+}
+
+export const SystemLogsPane = (props: SystemLogsPaneProps) => {
+  if (props.loading && props.logs.length === 0) {
+    return (
+      <box flexDirection="column" padding={1}>
+        <text>Loading system logs...</text>
+      </box>
+    )
+  }
+
+  if (!props.loading && props.logs.length === 0) {
+    return (
+      <box flexDirection="column" padding={1}>
+        <text>No system logs found</text>
+      </box>
+    )
+  }
+
+  // Reverse logs so oldest are at top, newest at bottom
+  const logsInOrder = [...props.logs].reverse()
+
+  return (
+    <scrollbox
+      focused
+      stickyStart={props.autoScroll ? 'bottom' : 'top'}
+      stickyScroll={props.autoScroll}
+      key={`${props.autoScroll}-${props.jumpTrigger}`}>
+      {logsInOrder.map((log) => {
+        const time = new Date(log.timestamp).toLocaleTimeString()
+        const timestamp = `[${time}]`
+        const level = log.level.toUpperCase()
+
+        return (
+          <box key={log.id} flexDirection="row">
+            <text>
+              <span fg="gray">{timestamp}</span>
+              <span fg={getLevelColor(log.level)}>{` ${level} `}</span>
+              <span>{sanitizeMessage(log.message)}</span>
+            </text>
+          </box>
+        )
+      })}
+    </scrollbox>
+  )
+}

package/src/config/index.ts

@@ -0,0 +1,181 @@
+import { readFileSync, writeFileSync, existsSync, mkdirSync } from 'fs'
+import { join } from 'path'
+import chalk from 'chalk'
+
+export type Config = {
+  name: string
+  key: {
+    public: string
+    private: string
+  }
+  api: string
+}
+
+type ConfigStore = {
+  current: string
+  configs: Record<string, Config>
+}
+
+// Local config (project-level)
+const getLocalConfigDir = () => join(process.cwd(), '.nulljs')
+const getLocalConfigFile = () => join(getLocalConfigDir(), 'config.json')
+
+const ensureLocalConfigDir = () => {
+  const localDir = getLocalConfigDir()
+  if (!existsSync(localDir)) {
+    mkdirSync(localDir, { recursive: true })
+  }
+}
+
+const readConfigStore = (): ConfigStore | null => {
+  try {
+    const localFile = getLocalConfigFile()
+    if (!existsSync(localFile)) {
+      return null
+    }
+    const data = readFileSync(localFile, 'utf-8')
+    return JSON.parse(data)
+  } catch {
+    return null
+  }
+}
+
+const writeConfigStore = (store: ConfigStore) => {
+  ensureLocalConfigDir()
+  writeFileSync(getLocalConfigFile(), JSON.stringify(store, null, 2))
+}
+
+export const readLocalConfig = (): Config | null => {
+  const store = readConfigStore()
+  if (!store) return null
+  return store.configs[store.current] ?? null
+}
+
+export const getConfig = (name: string): Config | null => {
+  const store = readConfigStore()
+  if (!store) return null
+  return store.configs[name] ?? null
+}
+
+export const listConfigs = (): { configs: Config[]; current: string } | null => {
+  const store = readConfigStore()
+  if (!store) return null
+  return {
+    configs: Object.values(store.configs),
+    current: store.current
+  }
+}
+
+export const useConfig = (name: string): boolean => {
+  const store = readConfigStore()
+  if (!store) {
+    console.error(chalk.red('✗ No configurations found. Run "nulljs dev" first.'))
+    return false
+  }
+  if (!store.configs[name]) {
+    console.error(chalk.red(`✗ Config "${name}" not found.`))
+    console.log(chalk.gray('Available configs:'))
+    Object.keys(store.configs).forEach((n) => {
+      console.log(chalk.gray(`  - ${n}`))
+    })
+    return false
+  }
+  store.current = name
+  writeConfigStore(store)
+  console.log(chalk.green(`✓ Now using config "${name}"`))
+  return true
+}
+
+export const createConfig = async (name: string, api: string): Promise<Config> => {
+  const store = readConfigStore() ?? { current: 'dev', configs: {} }
+
+  if (store.configs[name]) {
+    console.error(chalk.red(`✗ Config "${name}" already exists.`))
+    process.exit(1)
+  }
+
+  const keyPair = await crypto.subtle.generateKey(
+    {
+      name: 'Ed25519',
+      namedCurve: 'Ed25519'
+    },
+    true,
+    ['sign', 'verify']
+  )
+
+  const privateKeyBuffer = await crypto.subtle.exportKey('pkcs8', keyPair.privateKey)
+  const publicKeyBuffer = await crypto.subtle.exportKey('spki', keyPair.publicKey)
+
+  const privateKey = btoa(String.fromCharCode(...new Uint8Array(privateKeyBuffer)))
+  const publicKey = btoa(String.fromCharCode(...new Uint8Array(publicKeyBuffer)))
+
+  const newConfig: Config = {
+    name,
+    key: {
+      public: publicKey,
+      private: privateKey
+    },
+    api
+  }
+
+  store.configs[name] = newConfig
+  writeConfigStore(store)
+
+  console.log(chalk.green(`✓ Config "${name}" created`))
+  console.log(chalk.blue('  API:') + ` ${api}`)
+  console.log(chalk.blue('  Public Key:') + ` ${publicKey.substring(0, 30)}...`)
+
+  return newConfig
+}
+
+export const getOrCreateLocalDevConfig = async (api: string = 'http://localhost:3000'): Promise<Config> => {
+  const store = readConfigStore()
+
+  if (store?.configs['dev']) {
+    return store.configs['dev']
+  }
+
+  // Generate new key pair for dev
+  const keyPair = await crypto.subtle.generateKey(
+    {
+      name: 'Ed25519',
+      namedCurve: 'Ed25519'
+    },
+    true,
+    ['sign', 'verify']
+  )
+
+  const privateKeyBuffer = await crypto.subtle.exportKey('pkcs8', keyPair.privateKey)
+  const publicKeyBuffer = await crypto.subtle.exportKey('spki', keyPair.publicKey)
+
+  const privateKey = btoa(String.fromCharCode(...new Uint8Array(privateKeyBuffer)))
+  const publicKey = btoa(String.fromCharCode(...new Uint8Array(publicKeyBuffer)))
+
+  const devConfig: Config = {
+    name: 'dev',
+    key: {
+      public: publicKey,
+      private: privateKey
+    },
+    api
+  }
+
+  const newStore: ConfigStore = store ?? { current: 'dev', configs: {} }
+  newStore.configs['dev'] = devConfig
+  newStore.current = 'dev'
+  writeConfigStore(newStore)
+
+  return devConfig
+}
+
+export const loadPrivateKey = async (config: Config): Promise<CryptoKey> => {
+  const privateKeyBytes = Uint8Array.from(atob(config.key.private), (c) => c.charCodeAt(0))
+
+  return crypto.subtle.importKey(
+    'pkcs8',
+    privateKeyBytes,
+    { name: 'Ed25519', namedCurve: 'Ed25519' },
+    false,
+    ['sign']
+  )
+}

package/src/lib/bundle/function.ts

@@ -0,0 +1,125 @@
+import type { InlineConfig, Plugin, UserConfig } from 'vite'
+import { external } from './external'
+import type { PluginOptions } from './types'
+
+const jsFunction = ({ filePath }: PluginOptions): Plugin => {
+  return {
+    name: 'nulljs-function-plugin',
+    apply: 'build',
+    config: async (config: UserConfig, { command }) => {
+      if (command !== 'build') {
+        return config
+      }
+
+      return {
+        build: {
+          rollupOptions: {
+            input: {
+              handler: filePath
+            },
+            external,
+            output: {
+              // preserveModules: false,
+              entryFileNames: '[name].js'
+            },
+            preserveEntrySignatures: 'strict'
+          }
+        }
+      }
+    }
+  }
+}
+
+export const functionConfig = (filePath: string): InlineConfig => {
+  return {
+    logLevel: 'error',
+    plugins: [
+      jsFunction({
+        filePath
+      })
+    ],
+    build: {
+      outDir: '/tmp',
+      minify: false
+    }
+  }
+}
+
+export type FunctionEntry = {
+  name: string
+  path: string
+  type: 'api' | 'cron' | 'event'
+}
+
+export type BuildResult = {
+  entry: FunctionEntry
+  code: string
+}
+
+export type WatchCallbacks = {
+  onBuildComplete: (results: BuildResult[]) => Promise<void>
+}
+
+const jsFunctionWatch = (entries: FunctionEntry[], callbacks: WatchCallbacks): Plugin => {
+  // Map output filename back to entry
+  const outputToEntry = new Map<string, FunctionEntry>()
+
+  return {
+    name: 'nulljs-function-watch-plugin',
+    apply: 'build',
+    config: async (config: UserConfig, { command }) => {
+      if (command !== 'build') {
+        return config
+      }
+
+      // Build input object from entries
+      const input: Record<string, string> = {}
+      for (const entry of entries) {
+        input[entry.name] = entry.path
+        outputToEntry.set(`${entry.name}.js`, entry)
+      }
+
+      return {
+        build: {
+          rollupOptions: {
+            input,
+            external,
+            output: {
+              entryFileNames: '[name].js'
+            },
+            preserveEntrySignatures: 'strict'
+          }
+        }
+      }
+    },
+    async writeBundle(_, bundle) {
+      const results: BuildResult[] = []
+
+      for (const [fileName, chunk] of Object.entries(bundle)) {
+        if (chunk.type !== 'chunk' || !chunk.isEntry) continue
+
+        const entry = outputToEntry.get(fileName)
+        if (!entry) continue
+
+        results.push({ entry, code: chunk.code })
+      }
+
+      await callbacks.onBuildComplete(results)
+    }
+  }
+}
+
+export const functionWatchConfig = (
+  entries: FunctionEntry[],
+  callbacks: WatchCallbacks
+): InlineConfig => {
+  return {
+    logLevel: 'error',
+    plugins: [jsFunctionWatch(entries, callbacks)],
+    build: {
+      outDir: '/tmp/nulljs-dev',
+      minify: false,
+      watch: {}
+    }
+  }
+}

package/src/lib/bundle/index.ts

@@ -1,2 +1,5 @@
 export * from './react'
 export * from './function'
+
+export const isReact = (file: string) => file.endsWith('.tsx')
+export const isTypescript = (file: string) => file.endsWith('.ts')

package/src/lib/bundle/react.ts

@@ -0,0 +1,149 @@
+import { basename, extname } from 'path'
+import type { InlineConfig, Plugin, UserConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+import type { PluginOptions } from './types'
+
+const jsConfig = ({ filePath }: PluginOptions): Plugin => {
+  const entry = basename(filePath, extname(filePath))
+  const virtualPrefix = `virtual:config/${entry}.tsx`
+
+  return {
+    name: 'nulljs-config-plugin',
+    apply: 'build',
+    config: async (config: UserConfig, { command }) => {
+      if (command !== 'build') {
+        return config
+      }
+
+      return {
+        build: {
+          ssr: true,
+          rollupOptions: {
+            input: {
+              [entry]: virtualPrefix
+            },
+            external: ['react', 'react/jsx-runtime'],
+            output: {
+              entryFileNames: '[name].js'
+            },
+            preserveEntrySignatures: 'strict'
+          }
+        }
+      }
+    },
+
+    resolveId: (id: string) => {
+      if (id === virtualPrefix) {
+        return id
+      }
+      return null
+    },
+
+    load: (id: string) => {
+      if (id === virtualPrefix) {
+        const script = `
+          import { config } from "${filePath.replace(/\\/g, '\\\\')}";
+
+          export default config;
+        `
+
+        return script
+      }
+      return null
+    },
+
+    transform: (code, id) => {
+      if (id === filePath) {
+        const configMatch = code.match(/export const config = \{[^}]*\};/)
+        return configMatch ? { code: configMatch[0], map: null } : null
+      }
+    }
+  }
+}
+
+export const spaConfigConfig = (filePath: string): InlineConfig => {
+  return {
+    logLevel: 'error',
+    plugins: [
+      jsConfig({
+        filePath
+      })
+    ],
+    build: {
+      outDir: '/tmp'
+    }
+  }
+}
+
+const jsSpa = ({ filePath }: PluginOptions): Plugin => {
+  const entry = basename(filePath, extname(filePath))
+  const virtualPrefix = `virtual:spa/${entry}.tsx`
+
+  return {
+    name: 'nulljs-spa-client-plugin',
+    apply: 'build',
+    config: async (config: UserConfig, { command }) => {
+      if (command !== 'build') {
+        return config
+      }
+
+      return {
+        build: {
+          rollupOptions: {
+            input: {
+              [entry]: virtualPrefix
+            },
+            external: ['cloud'],
+            output: {
+              entryFileNames: '[name].js'
+            }
+          }
+        },
+        plugins: [react()]
+      }
+    },
+
+    resolveId: (id: string) => {
+      if (id === virtualPrefix) {
+        return id
+      }
+      return null
+    },
+
+    load: (id: string) => {
+      if (id === virtualPrefix) {
+        const script = `
+          import { StrictMode } from 'react'
+          import { createRoot } from 'react-dom/client'
+
+          import { Page } from "${filePath.replace(/\\/g, '\\\\')}";
+
+          createRoot(document.getElementById('root')!).render(
+            <StrictMode>
+              <Page />
+            </StrictMode>
+          )`
+
+        return script
+      }
+      return null
+    }
+  }
+}
+
+export const spaClientConfig = (filePath: string): InlineConfig => {
+  return {
+    logLevel: 'error',
+    plugins: [
+      jsSpa({
+        filePath
+      }),
+      tailwindcss()
+    ],
+    build: {
+      outDir: '/tmp'
+    }
+  }
+}