beast-devtools 0.0.1

package/devtools/client/RefactorPanel.btsx

@@ -0,0 +1,304 @@
+import { useEffect, useState } from 'octane'
+import type { AnalyzerSettings, ApplyResult, DiffLine, FileReport, FileSummary, RefactorSuggestion, RefactorTarget } from '../shared/types.ts'
+import CodeView from './CodeView.btsx'
+import FileList from './FileList.btsx'
+import { applyRefactor, copyText, openInEditor, undoRefactor } from './api.ts'
+import { cx, scrollTarget, type RecentRefactor, type ScrollTarget } from './util.ts'
+
+module
+  interface RefactorPanelProps {
+    files: readonly FileSummary[]
+    file: string | null
+    report: FileReport | null
+    loadError: string | null
+    settings: AnalyzerSettings
+    recent: RecentRefactor | null
+    onSelectFile: (path: string) => void
+    onSettingsChange: (settings: AnalyzerSettings) => void
+    onRecentChange: (recent: RecentRefactor | null) => void
+  }
+
+  /** A refactor being reviewed: previewed as a dry run, then confirmed. */
+  interface PendingRefactor {
+    suggestionId: string
+    target: RefactorTarget
+    status: 'loading' | 'ready' | 'applying'
+    result: ApplyResult | null
+    error: string | null
+  }
+
+  function targetLabel(target: RefactorTarget, suggestion: RefactorSuggestion): string {
+    return target === 'file' ? `create ⯌` : ` hoist ✦`
+
+
+  }
+
+  function targets(suggestion: RefactorSuggestion): RefactorTarget[] {
+    if (suggestion.autoApply.blocked !== null) return []
+    const other: RefactorTarget = suggestion.autoApply.target === 'file' ? 'inline' : 'file'
+    const allowed = other === 'file' ? suggestion.autoApply.fileBlocked === null : true
+    return allowed ? [suggestion.autoApply.target, other] : [suggestion.autoApply.target]
+  }
+
+  const DIFF_SIGN: Record<DiffLine['type'], string> = { add: '+', remove: '-', context: ' ' }
+
+  function message(error: unknown): string {
+    return error instanceof Error ? error.message : String(error)
+  }
+
+  function tone(depth: number, limit: number): string {
+    return depth > limit ? 'is-over' : depth === limit ? 'is-near' : ''
+  }
+
+  function kindLabel(suggestion: RefactorSuggestion): string {
+    return suggestion.kind === 'extract' ? '✦' : `${suggestion.occurrences.length}× same shape`
+  }
+
+  function applyGuide(suggestion: RefactorSuggestion): string {
+    const where = suggestion.occurrences.map((range) => `${range.startLine}–${range.endLine}`).join(', ')
+    return [
+      `// 1. Add above line ${suggestion.insertBeforeLine}:`,
+      suggestion.snippet,
+      '',
+      `// 2. Replace line${suggestion.occurrences.length === 1 ? 's' : ' ranges'} ${where} with:`,
+      suggestion.usage.trimStart(),
+    ].join('\n')
+  }
+
+  function readLimit(value: string, min: number, max: number): number | null {
+    const parsed = Number.parseInt(value, 10)
+    return Number.isInteger(parsed) && parsed >= min && parsed <= max ? parsed : null
+  }
+
+props { files, file, report, loadError, settings, recent, onSelectFile, onSettingsChange, onRecentChange }: RefactorPanelProps
+setup
+  const [pending, setPending] = useState<PendingRefactor | null>(null);
+  const [undoError, setUndoError] = useState<string | null>(null);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [openId, setOpenId] = useState<string | null>(null);
+  const [copied, setCopied] = useState<string | null>(null);
+  const [scroll, setScroll] = useState<ScrollTarget | null>(null);
+  const current = report !== null && report.path === file ? report : null;
+  const analysis = current?.analysis ?? null;
+  const selected = analysis?.suggestions.find((suggestion) => suggestion.id === selectedId) ?? null;
+  const histogramMax = Math.max(1, ...(analysis?.histogram ?? [1]));
+  const select = (suggestion: RefactorSuggestion) => {
+    setSelectedId(suggestion.id);
+    setScroll(scrollTarget(suggestion.startLine));
+  };
+  const copy = async (key: string, text: string) => {
+    if (!(await copyText(text))) return;
+    setCopied(key);
+    window.setTimeout(() => setCopied((value) => (value === key ? null : value)), 1400);
+  };
+  useEffect(() => {
+    setSelectedId(null);
+    setOpenId(null);
+    setPending(null);
+  }, [file]);
+  // A preview describes one version of the file; drop it once the file changes.
+  useEffect(() => {
+    setPending((value) => (value?.status === 'applying' ? value : null));
+  }, [current?.hash]);
+
+  const preview = async (suggestion: RefactorSuggestion, target: RefactorTarget) => {
+    if (current === null) return;
+    const request = { path: current.path, hash: current.hash, settings, suggestionId: suggestion.id, target };
+    setPending({ suggestionId: suggestion.id, target, status: 'loading', result: null, error: null });
+    const same = (value: PendingRefactor | null) => value?.suggestionId === suggestion.id && value.target === target;
+    try {
+      const result = await applyRefactor({ ...request, dryRun: true });
+      setPending((value) => (same(value) ? { ...value!, status: 'ready', result } : value));
+    } catch (error) {
+      setPending((value) => (same(value) ? { ...value!, status: 'ready', error: message(error) } : value));
+    }
+  };
+  const confirm = async () => {
+    if (pending === null || current === null) return;
+    const request = { path: current.path, hash: current.hash, settings, suggestionId: pending.suggestionId, target: pending.target };
+    setPending({ ...pending, status: 'applying' });
+    try {
+      const result = await applyRefactor({ ...request, dryRun: false });
+      setPending(null);
+      setSelectedId(null);
+      setOpenId(null);
+      setUndoError(null);
+      onRecentChange({ undoId: result.undoId!, summary: result.summary });
+    } catch (error) {
+      setPending({ ...pending, status: 'ready', error: message(error) });
+    }
+  };
+  const undo = async () => {
+    if (recent === null) return;
+    try {
+      await undoRefactor(recent.undoId);
+      setUndoError(null);
+      onRecentChange(null);
+    } catch (error) {
+      setUndoError(message(error));
+    }
+  };
+
+FileList(files={files} active={file} metrics={true} onSelect={onSelectFile})
+.bdt-pane
+  .bdt-toolbar
+    span.bdt-toolbar-title.bdt-mono #{file ?? 'No file selected'}
+    .bdt-spacer
+    label.bdt-field(title="Template nesting depth above which lines count as too deep")
+      | Depth limit
+      input.bdt-input.is-number(
+        ~ type="number"
+        ~ min="1"
+        ~ max="20"
+        ~ value={settings.depthLimit}
+        ~ onInput={(event) => { const depthLimit = readLimit(event.currentTarget.value, 1, 20); if (depthLimit !== null) onSettingsChange({ ...settings, depthLimit }); }}
+        ~ )
+    label.bdt-field(title="Smallest section, in lines, worth extracting")
+      | Min lines
+      input.bdt-input.is-number(
+        ~ type="number"
+        ~ min="2"
+        ~ max="200"
+        ~ value={settings.minLines}
+        ~ onInput={(event) => { const minLines = readLimit(event.currentTarget.value, 2, 200); if (minLines !== null) onSettingsChange({ ...settings, minLines }); }}
+        ~ )
+    label.bdt-field(title="Sections with at least this many lines move to their own .btsx file by default")
+      | New file at
+      input.bdt-input.is-number(
+        ~ type="number"
+        ~ min="2"
+        ~ max="1000"
+        ~ value={settings.fileLines}
+        ~ onInput={(event) => { const fileLines = readLimit(event.currentTarget.value, 2, 1000); if (fileLines !== null) onSettingsChange({ ...settings, fileLines }); }}
+        ~ )
+  if recent !== null
+    div(className={cx('bdt-toast', undoError !== null && 'is-error')} role="status")
+      span #{undoError ?? `✓ ${recent.summary}`}
+      .bdt-spacer
+      if undoError === null
+        button.bdt-button(type="button" onClick={undo}) Undo
+      button.bdt-icon-button(type="button" aria-label="Dismiss" onClick={() => { setUndoError(null); onRecentChange(null); }}) ×
+  if loadError !== null && current === null
+    .bdt-empty
+      p Could not analyze #{file ?? 'the file'}: #{loadError}
+  elseif current === null
+    .bdt-empty
+      p #{files.length === 0 ? 'No .btsx files found under the configured include directories.' : 'Analyzing…'}
+  elseif analysis === null
+    .bdt-empty
+      .bdt-empty-card
+        p.bdt-empty-title This file does not compile
+        p Fix the error shown in BTSX → TSRX to analyze its structure.
+  else
+    fragment
+      .bdt-metrics
+        .bdt-metric(className={analysis.maxDepth > settings.depthLimit && 'metric-alert'})
+          span(className={cx('bdt-metric-value', analysis.maxDepth > settings.depthLimit && 'is-over')}) #{analysis.maxDepth}
+          span.bdt-metric-label Max depth
+        .bdt-metric
+          span.bdt-metric-value #{analysis.averageDepth}
+          span.bdt-metric-label Avg depth
+        .bdt-metric(className={analysis.deepLines > 0 && 'metric-alert'})
+          span(className={cx('bdt-metric-value', analysis.deepLines > 0 && 'is-over')}) #{analysis.deepLines}
+          span.bdt-metric-label Lines over #{settings.depthLimit}
+        .bdt-metric
+          span.bdt-metric-value #{analysis.templateLines}
+          span.bdt-metric-label Template lines
+        .bdt-metric
+          span.bdt-metric-value #{analysis.indentUnit}
+          span.bdt-metric-label Indent spaces
+        div.bdt-histogram(role="img" aria-label={`Template lines per depth: ${analysis.histogram.map((count, depth) => `depth ${depth}: ${count}`).join(', ')}`})
+          each count, depth in analysis.histogram key depth
+            .bdt-histogram-col(title={`Depth ${depth}: ${count} line${count === 1 ? '' : 's'}`})
+              span(className={cx('bdt-histogram-bar', tone(depth, settings.depthLimit))} style={{ height: `${Math.max(2, Math.round((count / histogramMax) * 24))}px` }})
+              span.bdt-histogram-label #{depth}
+      .bdt-refactor
+        section.bdt-suggestions(aria-label="Refactor suggestions")
+          if analysis.suggestions.length === 0
+            .bdt-empty
+              .bdt-empty-card
+                p.bdt-empty-title Nothing to extract
+                p Every section stays within depth #{settings.depthLimit}, and no blocks of #{settings.minLines}+ lines repeat.
+          else
+            each suggestion in analysis.suggestions key suggestion.id
+              article(
+                ~ className={cx('bdt-card', suggestion.id === selectedId && 'is-selected')}
+                ~ onClick={() => select(suggestion)}
+                ~ )
+                .bdt-card-head
+                  span(className={cx('bdt-severity', `is-${suggestion.severity}`)} title={suggestion.severity})
+                  span.bdt-card-title #{suggestion.name}
+                  span(className={cx('bdt-badge', suggestion.kind === 'extract' ? 'is-warn' : 'is-info')}) #{kindLabel(suggestion)}
+                  span.bdt-dim.bdt-metric-label L#{suggestion.startLine}–#{suggestion.endLine}
+                p.bdt-card-reason #{suggestion.reason}
+                .bdt-card-meta
+                  span.bdt-chip #{suggestion.label} in #{suggestion.host}
+                  each prop in suggestion.props key prop.name
+                    span.bdt-chip(title={`${prop.name}: ${prop.type}`})
+                      | #{prop.name}
+                      span.bdt-chip-type #{': ' + prop.type}
+                .bdt-card-actions
+                  button.bdt-button(type="button" aria-expanded={openId === suggestion.id} onClick={() => setOpenId(openId === suggestion.id ? null : suggestion.id)}) #{openId === suggestion.id ? '🞁' : '🞃'}
+                  button.bdt-button(type="button" onClick={() => copy(`${suggestion.id}:component`, suggestion.snippet)}) #{copied === `${suggestion.id}:component` ? 'component ⮻' : 'component ⮺'}
+                  button.bdt-button(type="button" onClick={() => copy(`${suggestion.id}:usage`, suggestion.usage.trimStart())}) #{copied === `${suggestion.id}:usage` ? 'usage ⮻' : 'usage ⮺'}
+                  button.bdt-button(type="button" onClick={() => openInEditor(current.absolutePath, suggestion.startLine)}) open ⧽
+                .bdt-card-actions
+                  each target, index in targets(suggestion) key target
+                    button(
+                      ~ type="button"
+                      ~ className={cx('bdt-button-critical', index === 0 && '')}
+                      ~ title={target === 'file' ? `Write ${suggestion.name}.btsx next to this file and import it` : 'Add a local component to this file'}
+                      ~ disabled={pending?.status === 'applying' || pending?.status === 'loading'}
+                      ~ onClick={() => preview(suggestion, target)}
+                      ~ )
+                      | #{targetLabel(target, suggestion)}
+
+                if suggestion.autoApply.blocked !== null
+                  p.bdt-card-note Manual only: #{suggestion.autoApply.blocked}
+                elseif suggestion.autoApply.fileBlocked !== null
+                  p.bdt-card-note Stays in this file: #{suggestion.autoApply.fileBlocked}
+                if pending !== null && pending.suggestionId === suggestion.id
+                  div.bdt-plan(role="group" aria-label="Review refactor")
+                    if pending.status === 'loading'
+                      p.bdt-muted Preparing #{targetLabel(pending.target, suggestion).toLowerCase()}…
+                    else
+                      fragment
+                        if pending.result !== null
+                          fragment
+                            p.bdt-plan-title Review · #{targetLabel(pending.target, suggestion)} · #{pending.result.files.length} file#{pending.result.files.length === 1 ? '' : 's'}
+                            each change in pending.result.files key change.path
+                              .bdt-plan-file
+                                .bdt-plan-file-head
+                                  span #{change.path}
+                                  span(className={cx('bdt-badge', change.action === 'create' ? 'is-ok' : 'is-info')}) #{change.action === 'create' ? 'new file' : 'edit'}
+                                  span.bdt-added +#{change.added}
+                                  span.bdt-removed −#{change.removed}
+                                .bdt-diff
+                                  .bdt-diff-inner
+                                    each hunk, hunkIndex in change.hunks key hunkIndex
+                                      fragment
+                                        p.bdt-diff-head @@ −#{hunk.oldStart} +#{hunk.newStart} @@
+                                        each line, lineIndex in hunk.lines key lineIndex
+                                          div(className={`bdt-diff-line is-${line.type}`}) #{DIFF_SIGN[line.type] + ' ' + line.text}
+                        if pending.error !== null
+                          pre.bdt-plan-error #{pending.error}
+                        .bdt-card-actions
+                          if pending.result !== null && pending.error === null
+                            button.bdt-button-critical(type="button" disabled={pending.status === 'applying'} onClick={confirm}) #{pending.status === 'applying' ? 'Applying…' : 'Apply changes'}
+                          button.bdt-button(type="button" disabled={pending.status === 'applying'} onClick={() => setPending(null)}) Cancel
+                if openId === suggestion.id
+                  pre.bdt-pre #{applyGuide(suggestion)}
+        section.bdt-pane(aria-label="Source with nesting depth")
+          .bdt-pane-head
+            span Nesting depth per line
+            .bdt-spacer
+            span.bdt-dim #{selected === null ? 'Select a suggestion to highlight it' : `${selected.name}: ${selected.occurrences.length === 1 ? 'section' : `${selected.occurrences.length} copies`} highlighted`}
+          CodeView(
+            ~ source={current.source}
+            ~ language="btsx"
+            ~ label="BTSX source with nesting depth"
+            ~ depths={analysis.lineDepths}
+            ~ depthLimit={settings.depthLimit}
+            ~ ranges={selected?.occurrences}
+            ~ scrollTo={scroll}
+            ~ )

package/devtools/client/api.ts

@@ -0,0 +1,69 @@
+import {
+  API_BASE,
+  SOURCE_CHANGED_EVENT,
+  type AnalyzerSettings,
+  type ApplyRequest,
+  type ApplyResult,
+  type FileReport,
+  type ProjectReport,
+  type UndoResult,
+} from '../shared/types.ts'
+
+async function get<T>(endpoint: string, params: Record<string, string | number>): Promise<T> {
+  const query = new URLSearchParams(Object.entries(params).map(([key, value]) => [key, String(value)]))
+  const response = await fetch(`${API_BASE}${endpoint}?${query}`)
+  const body = (await response.json()) as T | { error: string }
+  if (!response.ok) throw new Error((body as { error: string }).error ?? response.statusText)
+  return body as T
+}
+
+async function post<T>(endpoint: string, body: unknown): Promise<T> {
+  const response = await fetch(`${API_BASE}${endpoint}`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+  const result = (await response.json()) as T | { error: string }
+  if (!response.ok) throw new Error((result as { error: string }).error ?? response.statusText)
+  return result as T
+}
+
+export function fetchProject(settings: AnalyzerSettings): Promise<ProjectReport> {
+  return get<ProjectReport>('/project', { ...settings })
+}
+
+export function fetchFile(path: string, settings: AnalyzerSettings): Promise<FileReport> {
+  return get<FileReport>('/file', { path, ...settings })
+}
+
+/** Preview (`dryRun`) or write a refactor suggestion. */
+export function applyRefactor(request: ApplyRequest): Promise<ApplyResult> {
+  return post<ApplyResult>('/apply', request)
+}
+
+export function undoRefactor(id: string): Promise<UndoResult> {
+  return post<UndoResult>('/undo', { id })
+}
+
+/** Called with the project-relative path whenever a `.btsx` file changes on disk. */
+export function onSourceChanged(listener: (path: string) => void): () => void {
+  const hot = import.meta.hot
+  if (hot === undefined) return () => {}
+  const handler = (data: { path: string }) => listener(data.path)
+  hot.on(SOURCE_CHANGED_EVENT, handler)
+  return () => hot.off(SOURCE_CHANGED_EVENT, handler)
+}
+
+/** Ask Vite's built-in launch-editor endpoint to open a file at a position. */
+export function openInEditor(absolutePath: string, line = 1, column = 1): void {
+  void fetch(`/__open-in-editor?file=${encodeURIComponent(`${absolutePath}:${line}:${column}`)}`)
+}
+
+export async function copyText(text: string): Promise<boolean> {
+  try {
+    await navigator.clipboard.writeText(text)
+    return true
+  } catch {
+    return false
+  }
+}

package/devtools/client/compile.test.ts

@@ -0,0 +1,22 @@
+import { expect, test } from 'bun:test'
+import { readdirSync, readFileSync } from 'node:fs'
+import { compileBeastResult, componentNameFromPath, mapGeneratedError } from 'beast-tsrx'
+import { createOctaneCompiler } from 'octane/compiler/bundler'
+
+// The overlay only compiles under `vite dev`, so `vite build` never sees it.
+// Compile every overlay component through Beast and Octane here instead.
+const dir = new URL('.', import.meta.url).pathname
+const octane = createOctaneCompiler({ root: process.cwd(), environment: 'client', hmr: false, dev: true })
+
+for (const name of readdirSync(dir).filter((file) => file.endsWith('.btsx'))) {
+  test(`${name} compiles through Beast and Octane`, () => {
+    const filename = `${dir}${name}`
+    const source = readFileSync(filename, 'utf8')
+    const { code, map } = compileBeastResult(source, { filename, componentName: componentNameFromPath(filename) })
+    try {
+      expect(octane.transform(code, filename.replace(/\.btsx$/, '.tsrx'), { environment: 'client', dev: true })).not.toBeNull()
+    } catch (error) {
+      throw mapGeneratedError(error, map, source, filename)
+    }
+  })
+}