beast-devtools 0.0.1

package/devtools/server/refactor.test.ts

@@ -0,0 +1,224 @@
+import { afterEach, describe, expect, test } from 'bun:test'
+import { mkdtempSync, mkdirSync, readFileSync, rmSync, writeFileSync, existsSync } from 'node:fs'
+import { tmpdir } from 'node:os'
+import { join } from 'node:path'
+import { compileBeastResult, componentNameFromPath } from 'beast-tsrx'
+import { createOctaneCompiler } from 'octane/compiler/bundler'
+import type { AnalyzerSettings, RefactorSuggestion, RefactorTarget } from '../shared/types.ts'
+import { analyzeDocument } from './analyze.ts'
+import { BeastProject } from './project.ts'
+import { planRefactor, RefactorError, type RefactorPlan } from './refactor.ts'
+
+const APP = readFileSync(new URL('../test/fixtures/App.btsx', import.meta.url), 'utf8')
+const SETTINGS: AnalyzerSettings = { depthLimit: 5, minLines: 8, fileLines: 30 }
+const octane = createOctaneCompiler({ root: process.cwd(), environment: 'client', hmr: false, dev: true })
+
+function suggestionsFor(source: string, name: string, settings: Partial<AnalyzerSettings> = {}) {
+  const absolutePath = `/project/src/${name}.btsx`
+  const { ast } = compileBeastResult(source, { filename: absolutePath, componentName: name })
+  const analysis = analyzeDocument(ast, source, name, { ...SETTINGS, ...settings })
+  return { absolutePath, ast, suggestions: analysis.suggestions }
+}
+
+function plan(
+  source: string,
+  host: string,
+  pick: (suggestion: RefactorSuggestion) => boolean,
+  target: RefactorTarget,
+  options: { settings?: Partial<AnalyzerSettings>; exists?: (path: string) => boolean } = {},
+): RefactorPlan {
+  const { absolutePath, ast, suggestions } = suggestionsFor(source, host, options.settings)
+  const suggestion = suggestions.find(pick)
+  if (suggestion === undefined) throw new Error(`No matching suggestion among ${suggestions.map((s) => s.name)}`)
+  return planRefactor({ absolutePath, source, document: ast, suggestion, target, exists: options.exists ?? (() => false) })
+}
+
+function expectCompiles(path: string, source: string): void {
+  const { code } = compileBeastResult(source, { filename: path, componentName: componentNameFromPath(path) })
+  expect(octane.transform(code, path.replace(/\.btsx$/, '.tsrx'), { environment: 'client', dev: true })).not.toBeNull()
+}
+
+describe('hoisting into the same file', () => {
+  test('inserts a local component above props and replaces the section with a call', () => {
+    const result = plan(APP, 'App', (s) => s.name === 'AppHeader', 'inline')
+    expect(result.changes).toHaveLength(1)
+    const after = result.changes[0]!.after
+    expect(after.indexOf('component AppHeader')).toBeLessThan(after.indexOf('props { docsUrl }: Props'))
+    expect(after).toContain('    AppHeader(activeId={activeId} setActiveId={setActiveId} setCopiedSide={setCopiedSide})')
+    expect(after.split('\n').filter((line) => line.includes("aria-controls=\"workflow-panel\""))).toHaveLength(1)
+    expectCompiles('/project/src/App.btsx', after)
+  })
+
+  test('replaces every copy of an identical block', () => {
+    const block = ['    .card', '      h2 Title', '      p Body', '      footer', '        small Fine print']
+    const source = ['section', '  .left', ...block, '  .right', ...block, ''].join('\n')
+    const result = plan(source, 'Cards', (s) => s.kind === 'duplicate' && s.autoApply.blocked === null, 'inline', { settings: { minLines: 4 } })
+    const after = result.changes[0]!.after
+    expect(after.match(/^ {4}Card$/gm)).toHaveLength(2)
+    expect(after.startsWith('component Card\n  .card\n')).toBe(true)
+    expectCompiles('/project/src/Cards.btsx', after)
+  })
+
+  test('refuses copies that differ, since one call would change behavior', () => {
+    expect(() => plan(APP, 'App', (s) => s.kind === 'duplicate', 'inline')).toThrow(RefactorError)
+  })
+
+  test('refuses components with scoped styles', () => {
+    const source = [
+      'section',
+      '  .a',
+      '    .b',
+      '      .c',
+      '        p One',
+      '        p Two',
+      '        p Three',
+      '  style',
+      '    .c { color: red; }',
+      '',
+    ].join('\n')
+    expect(() => plan(source, 'Styled', (s) => s.kind === 'extract', 'inline', { settings: { depthLimit: 2, minLines: 3 } })).toThrow(
+      /scoped style/,
+    )
+  })
+})
+
+describe('moving to a new file', () => {
+  const settings = { fileLines: 18 }
+
+  test('creates a sibling file that imports the types and values it uses', () => {
+    const result = plan(APP, 'App', (s) => s.name === 'AppHeader', 'file', { settings })
+    const [source, created] = result.changes as [RefactorPlan['changes'][0], RefactorPlan['changes'][0]]
+    expect(created.absolutePath).toBe('/project/src/AppHeader.btsx')
+    expect(created.before).toBeNull()
+    expect(created.after.split('\n').slice(0, 3)).toEqual([
+      "import { panels } from './App.btsx'",
+      "import type { PanelId, PanelSide } from './App.btsx'",
+      'props { activeId, setActiveId, setCopiedSide }: { activeId: PanelId; setActiveId: (value: PanelId) => void; setCopiedSide: (value: PanelSide | null) => void }',
+    ])
+    expect(source.after).toContain("import AppHeader from './AppHeader.btsx'")
+    expect(source.after).toContain("  export type PanelId = 'language' | 'integration' | 'skills'")
+    expect(source.after).toContain('  export const panels: Panel[] = [')
+    expect(source.after).not.toContain('export type LeftPanel')
+    expectCompiles(source.absolutePath, source.after)
+    expectCompiles(created.absolutePath, created.after)
+  })
+
+  test('copies the imports the section needs and keeps module directives', () => {
+    const source = [
+      'module "use strong";',
+      "import Badge from './Badge.btsx'",
+      "import { useState } from 'octane'",
+      'props { groups }: { groups: { id: string; items: string[] }[] }',
+      '.list',
+      '  each group in groups',
+      '    .group(key={group.id})',
+      '      Badge(tone="green") OK',
+      '      ul',
+      '        each item in group.items',
+      '          li #{item}',
+      '',
+    ].join('\n')
+    const result = plan(source, 'Status', (s) => s.name === 'Group', 'file', { settings: { depthLimit: 3, minLines: 4 } })
+    const [edited, created] = result.changes
+    expect(created!.after.split('\n').slice(0, 4)).toEqual([
+      'module',
+      '  "use strong";',
+      "import Badge from './Badge.btsx'",
+      'props { group }: { group: any }',
+    ])
+    expect(edited!.after).toContain('    Group(key={group.id} group={group})')
+    expect(edited!.after.split('\n')[3]).toBe("import Group from './Group.btsx'")
+    expectCompiles('/project/src/Status.btsx', edited!.after)
+    expectCompiles('/project/src/Group.btsx', created!.after)
+  })
+
+  test('picks a free file name', () => {
+    const taken = new Set(['/project/src/AppHeader.btsx'])
+    const result = plan(APP, 'App', (s) => s.name === 'AppHeader', 'file', { settings, exists: (path) => taken.has(path) })
+    expect(result.component).toBe('AppHeader2')
+    expect(result.changes[1]!.absolutePath).toBe('/project/src/AppHeader2.btsx')
+    expect(result.changes[0]!.after).toContain('AppHeader2(activeId={activeId}')
+  })
+
+  test('keeps sections that use a file-local component in the file', () => {
+    const source = [
+      'component Badge',
+      '  span.badge ok',
+      'section',
+      '  .a',
+      '    .b',
+      '      .c',
+      '        Badge',
+      '        p Two',
+      '        p Three',
+      '',
+    ].join('\n')
+    const [suggestion] = suggestionsFor(source, 'Local', { depthLimit: 2, minLines: 3 }).suggestions
+    expect(suggestion?.autoApply.fileBlocked).toContain('Badge')
+    expect(() => plan(source, 'Local', (s) => s.kind === 'extract', 'file', { settings: { depthLimit: 2, minLines: 3 } })).toThrow(
+      /Badge/,
+    )
+  })
+
+  test('defaults large sections to their own file', () => {
+    const { suggestions } = suggestionsFor(APP, 'App', { fileLines: 20 })
+    expect(suggestions.find((s) => s.name === 'AppHeader')?.autoApply.target).toBe('file')
+    expect(suggestions.find((s) => s.name === 'RightArticle')?.autoApply.target).toBe('inline')
+  })
+})
+
+describe('applying through the project', () => {
+  let root: string | null = null
+  afterEach(() => {
+    if (root !== null) rmSync(root, { recursive: true, force: true })
+    root = null
+  })
+
+  function project() {
+    root = mkdtempSync(join(tmpdir(), 'beast-devtools-'))
+    mkdirSync(join(root, 'src'))
+    writeFileSync(join(root, 'src/App.btsx'), APP)
+    return new BeastProject({ root, include: ['src'], exclude: [] })
+  }
+
+  test('previews, writes, and undoes a move to a new file', () => {
+    const beast = project()
+    const settings = { ...SETTINGS, fileLines: 18 }
+    const report = beast.file('src/App.btsx', settings)!
+    const suggestion = report.analysis!.suggestions.find((s) => s.name === 'AppHeader')!
+    const request = { path: 'src/App.btsx', hash: report.hash, settings, suggestionId: suggestion.id, target: 'file' as const }
+
+    const preview = beast.apply({ ...request, dryRun: true })
+    expect(preview.undoId).toBeNull()
+    expect(preview.files.map((f) => [f.path, f.action])).toEqual([
+      ['src/App.btsx', 'edit'],
+      ['src/AppHeader.btsx', 'create'],
+    ])
+    expect(existsSync(join(root!, 'src/AppHeader.btsx'))).toBe(false)
+
+    const applied = beast.apply({ ...request, dryRun: false })
+    expect(existsSync(join(root!, 'src/AppHeader.btsx'))).toBe(true)
+    expect(readFileSync(join(root!, 'src/App.btsx'), 'utf8')).toContain('AppHeader(activeId={activeId}')
+    expect(() => beast.apply({ ...request, dryRun: true })).toThrow(/changed since it was analyzed/)
+
+    beast.undo(applied.undoId!)
+    expect(readFileSync(join(root!, 'src/App.btsx'), 'utf8')).toBe(APP)
+    expect(existsSync(join(root!, 'src/AppHeader.btsx'))).toBe(false)
+  })
+
+  test('refuses to undo over later edits', () => {
+    const beast = project()
+    const report = beast.file('src/App.btsx', SETTINGS)!
+    const suggestion = report.analysis!.suggestions.find((s) => s.name === 'RightArticle')!
+    const applied = beast.apply({
+      path: 'src/App.btsx',
+      hash: report.hash,
+      settings: SETTINGS,
+      suggestionId: suggestion.id,
+      target: 'inline',
+      dryRun: false,
+    })
+    writeFileSync(join(root!, 'src/App.btsx'), `${readFileSync(join(root!, 'src/App.btsx'), 'utf8')}\n// edited`)
+    expect(() => beast.undo(applied.undoId!)).toThrow(/edited after the refactor/)
+  })
+})

package/devtools/server/refactor.ts

@@ -0,0 +1,224 @@
+import { basename, dirname, join } from 'node:path'
+import type { BeastDocument, ModuleDeclaration } from 'beast-tsrx'
+import type { LineRange, RefactorSuggestion, RefactorTarget } from '../shared/types.js'
+import { parseImport, renderImport, topLevelDeclarations, type Declaration, type ImportSpecifier } from './source-scan.js'
+
+/** A refusal with an HTTP status: 409 for stale input, 422 for refactors that cannot be done safely. */
+export class RefactorError extends Error {
+  constructor(
+    message: string,
+    readonly status: 409 | 422,
+  ) {
+    super(message)
+  }
+}
+
+export interface FileChange {
+  absolutePath: string
+  /** Previous content, or null when the file is created. */
+  before: string | null
+  after: string
+}
+
+export interface RefactorPlan {
+  component: string
+  summary: string
+  changes: FileChange[]
+}
+
+export interface PlanInput {
+  absolutePath: string
+  source: string
+  document: BeastDocument
+  suggestion: RefactorSuggestion
+  target: RefactorTarget
+  exists: (absolutePath: string) => boolean
+}
+
+interface LineEdit {
+  /** 1-based line where the edit starts; insertions go before it. */
+  start: number
+  deleteCount: number
+  insert: string[]
+}
+
+/**
+ * Turn a refactor suggestion into concrete file contents, either hoisting the
+ * section into a local `component` of the same file or moving it to a sibling
+ * `.btsx` file. The caller validates and writes the result.
+ */
+export function planRefactor(input: PlanInput): RefactorPlan {
+  const { suggestion, target } = input
+  if (suggestion.autoApply.blocked !== null) throw new RefactorError(suggestion.autoApply.blocked, 422)
+  if (target === 'file' && suggestion.autoApply.fileBlocked !== null) {
+    throw new RefactorError(suggestion.autoApply.fileBlocked, 422)
+  }
+  return target === 'inline' ? planInline(input) : planFile(input)
+}
+
+function planInline({ absolutePath, source, suggestion }: PlanInput): RefactorPlan {
+  const lines = source.split('\n')
+  const edits: LineEdit[] = [
+    ...replaceOccurrences(lines, suggestion, suggestion.name),
+    { start: suggestion.insertBeforeLine, deleteCount: 0, insert: [...suggestion.snippet.split('\n'), ''] },
+  ]
+  return {
+    component: suggestion.name,
+    summary: `Hoisted ${suggestion.name} into ${basename(absolutePath)}`,
+    changes: [{ absolutePath, before: source, after: applyEdits(lines, edits).join('\n') }],
+  }
+}
+
+function planFile({ absolutePath, source, document, suggestion, exists }: PlanInput): RefactorPlan {
+  const lines = source.split('\n')
+  const dir = dirname(absolutePath)
+  const name = availableName(suggestion.name, source, (candidate) => exists(join(dir, `${candidate}.btsx`)))
+  const newPath = join(dir, `${name}.btsx`)
+  const references = new Set(suggestion.references)
+  suggestion.props.forEach((prop) => references.delete(prop.name))
+
+  // Imports the section relies on are copied; both files sit in one directory,
+  // so relative specifiers stay valid.
+  const header: string[] = []
+  const imports = document.declarations.filter((d) => d.kind === 'import')
+  for (const declaration of imports) {
+    const parsed = parseImport(declaration.code)
+    if (parsed === null) continue
+    const used = parsed.specifiers.filter((specifier) => references.has(specifier.local))
+    if (used.length > 0) header.push(...renderImport(parsed, used))
+  }
+
+  // Module-level types and values the section uses are exported from the
+  // source and imported back. Type imports are erased, so only values create
+  // a (render-time, cycle-safe) runtime import.
+  const exported = new Map<string, { declaration: Declaration; module: ModuleDeclaration }>()
+  const directives: string[] = []
+  for (const module of document.declarations) {
+    if (module.kind !== 'module') continue
+    directives.push(...leadingDirectives(module.code))
+    for (const declaration of topLevelDeclarations(module.code)) {
+      for (const binding of declaration.names) {
+        if (references.has(binding) && !exported.has(binding)) exported.set(binding, { declaration, module })
+      }
+    }
+  }
+  const quote = imports.length > 0 ? (parseImport(imports[0]!.code)?.quote ?? "'") : "'"
+  const sourceSpecifier = `./${basename(absolutePath)}`
+  const specifiers: ImportSpecifier[] = [...exported].map(([binding, { declaration }]) => ({
+    local: binding,
+    imported: binding,
+    typeOnly: declaration.kind === 'type',
+  }))
+  if (specifiers.length > 0) {
+    header.push(...renderImport({ source: sourceSpecifier, quote, typeOnly: false, specifiers }, specifiers))
+  }
+
+  const [, ...rest] = suggestion.snippet.split('\n')
+  const body = rest.map((line) => line.replace(/^ {2}/, ''))
+  const content = [
+    ...(directives.length > 0 ? ['module', ...directives.map((directive) => `  ${directive}`)] : []),
+    ...header,
+    ...(body[0]?.startsWith('props ') ? [body.shift()!] : []),
+    ...(header.length > 0 || directives.length > 0 ? [''] : []),
+    ...body,
+    '',
+  ]
+
+  const edits: LineEdit[] = [
+    ...replaceOccurrences(lines, suggestion, name),
+    ...exportEdits(lines, [...exported.values()]),
+    {
+      start: importInsertLine(document),
+      deleteCount: 0,
+      insert: [`import ${name} from ${quote}./${name}.btsx${quote}`],
+    },
+  ]
+
+  return {
+    component: name,
+    summary: `Moved ${name} to ${name}.btsx`,
+    changes: [
+      { absolutePath, before: source, after: applyEdits(lines, edits).join('\n') },
+      { absolutePath: newPath, before: null, after: content.join('\n') },
+    ],
+  }
+}
+
+/** Replace every occurrence with a call, keeping each occurrence's indentation. */
+function replaceOccurrences(lines: readonly string[], suggestion: RefactorSuggestion, name: string): LineEdit[] {
+  const call = suggestion.usage.trimStart().replace(suggestion.name, name)
+  return suggestion.occurrences.map((range: LineRange) => {
+    const indent = /^ */.exec(lines[range.startLine - 1] ?? '')![0]
+    return { start: range.startLine, deleteCount: range.endLine - range.startLine + 1, insert: [indent + call] }
+  })
+}
+
+/** Add `export` to each module declaration another file now imports. */
+function exportEdits(
+  lines: readonly string[],
+  targets: ReadonlyArray<{ declaration: Declaration; module: ModuleDeclaration }>,
+): LineEdit[] {
+  const byLine = new Map<number, Declaration[]>()
+  const seen = new Set<Declaration>()
+  for (const { declaration, module } of targets) {
+    // One `const { a, b } = …` can supply several imported bindings.
+    if (declaration.exported || seen.has(declaration)) continue
+    seen.add(declaration)
+    const line = module.codeStart.line + module.code.slice(0, declaration.offset).split('\n').length - 1
+    byLine.set(line, [...(byLine.get(line) ?? []), declaration])
+  }
+  return [...byLine].map(([line, declarations]) => {
+    let text = lines[line - 1] ?? ''
+    for (const declaration of declarations) {
+      const keyword = declaration.keyword.replace(/\s+/g, '\\s+')
+      const pattern = new RegExp(`(^|[^\\w$.])(${keyword}\\s+)`)
+      if (!pattern.test(text)) throw new RefactorError(`Could not export ${declaration.names.join(', ')} on line ${line}.`, 422)
+      text = text.replace(pattern, '$1export $2')
+    }
+    return { start: line, deleteCount: 1, insert: [text] }
+  })
+}
+
+/** After the last import, or after a leading directive-only `module`, or at the top. */
+function importInsertLine(document: BeastDocument): number {
+  const imports = document.declarations.filter((d) => d.kind === 'import')
+  if (imports.length > 0) return Math.max(...imports.map((d) => d.span.end.line)) + 1
+  const first = document.declarations[0]
+  if (first?.kind === 'module' && leadingDirectives(first.code).length > 0) {
+    return first.codeStart.line + first.code.trimEnd().split('\n').length
+  }
+  return 1
+}
+
+/** `"use strong";`-style directives at the start of a module block. */
+function leadingDirectives(code: string): string[] {
+  const directives: string[] = []
+  for (const line of code.split('\n')) {
+    const text = line.trim()
+    if (text === '') continue
+    if (!/^(['"])use [\w ]+\1;?$/.test(text)) break
+    directives.push(text)
+  }
+  return directives
+}
+
+/** The suggested name, suffixed until it is free as a file and as an identifier. */
+function availableName(base: string, source: string, taken: (name: string) => boolean): string {
+  let name = base
+  for (let n = 2; taken(name) || (name !== base && new RegExp(`\\b${name}\\b`).test(source)); n++) name = `${base}${n}`
+  return name
+}
+
+function applyEdits(lines: readonly string[], edits: readonly LineEdit[]): string[] {
+  // Bottom-up keeps earlier line numbers valid; at one line, rewrites go
+  // before insertions so an insertion never lands on a rewritten line.
+  const ordered = [...edits].sort((a, b) => b.start - a.start || b.deleteCount - a.deleteCount)
+  const next = [...lines]
+  let floor = Number.POSITIVE_INFINITY
+  for (const edit of ordered) {
+    if (edit.start + edit.deleteCount > floor) throw new RefactorError('Refactor edits overlap.', 422)
+    next.splice(edit.start - 1, edit.deleteCount, ...edit.insert)
+    floor = edit.start
+  }
+  return next
+}