@test328932/test328933 1.0.0

package/src/component-values.js

@@ -0,0 +1,248 @@
+import { parse } from '@babel/parser'
+import traverse from '@babel/traverse'
+import generate from '@babel/generator'
+import * as t from '@babel/types'
+
+const traverseAst = traverse.default ?? traverse
+const generateCode = generate.default ?? generate
+
+function isComponentName(name) {
+  return typeof name === 'string' && /^[A-Z]/.test(name)
+}
+
+function isTopLevelDeclaration(path) {
+  const parent = path.parentPath
+  if (!parent) return false
+  if (parent.isProgram()) return true
+  if (parent.isExportNamedDeclaration() || parent.isExportDefaultDeclaration()) {
+    return parent.parentPath?.isProgram() ?? false
+  }
+  return false
+}
+
+function ensureBlockBody(functionNode) {
+  if (t.isBlockStatement(functionNode.body)) return
+  functionNode.body = t.blockStatement([t.returnStatement(functionNode.body)])
+}
+
+function isUseStateCall(callee) {
+  if (t.isIdentifier(callee, { name: 'useState' })) return true
+  if (t.isMemberExpression(callee) && t.isIdentifier(callee.property, { name: 'useState' })) {
+    return true
+  }
+  return false
+}
+
+function collectPatternIdentifiers(pattern, output) {
+  if (!pattern) return
+
+  if (t.isIdentifier(pattern)) {
+    output.push(pattern.name)
+    return
+  }
+
+  if (t.isAssignmentPattern(pattern)) {
+    collectPatternIdentifiers(pattern.left, output)
+    return
+  }
+
+  if (t.isRestElement(pattern)) {
+    collectPatternIdentifiers(pattern.argument, output)
+    return
+  }
+
+  if (t.isObjectPattern(pattern)) {
+    pattern.properties.forEach(prop => {
+      if (t.isRestElement(prop)) {
+        collectPatternIdentifiers(prop.argument, output)
+        return
+      }
+      if (t.isObjectProperty(prop)) {
+        collectPatternIdentifiers(prop.value, output)
+      }
+    })
+    return
+  }
+
+  if (t.isArrayPattern(pattern)) {
+    pattern.elements.forEach(element => {
+      collectPatternIdentifiers(element, output)
+    })
+  }
+}
+
+function buildPropsExpression(paramNode) {
+  if (!paramNode) return t.nullLiteral()
+
+  if (t.isIdentifier(paramNode)) {
+    return t.identifier(paramNode.name)
+  }
+
+  const names = []
+  collectPatternIdentifiers(paramNode, names)
+  const uniqueNames = [...new Set(names)]
+
+  return t.objectExpression(
+    uniqueNames.map(name => t.objectProperty(t.identifier(name), t.identifier(name), false, true)),
+  )
+}
+
+function collectStateNames(functionPath) {
+  const stateNames = []
+
+  functionPath.get('body').traverse({
+    VariableDeclarator(variablePath) {
+      if (variablePath.getFunctionParent() !== functionPath) return
+
+      const { id, init } = variablePath.node
+      if (!t.isArrayPattern(id) || !t.isCallExpression(init)) return
+      if (!isUseStateCall(init.callee)) return
+
+      const firstElement = id.elements[0]
+      if (t.isIdentifier(firstElement)) {
+        stateNames.push(firstElement.name)
+      }
+    },
+  })
+
+  return [...new Set(stateNames)]
+}
+
+function buildInspectorTextarea(snapshotExpression) {
+  const textareaStyle = t.objectExpression([
+    t.objectProperty(t.identifier('width'), t.stringLiteral('100%')),
+    t.objectProperty(t.identifier('minHeight'), t.stringLiteral('130px')),
+    t.objectProperty(t.identifier('marginTop'), t.stringLiteral('10px')),
+    t.objectProperty(t.identifier('padding'), t.stringLiteral('8px')),
+    t.objectProperty(t.identifier('fontFamily'), t.stringLiteral('ui-monospace, SFMono-Regular, Menlo, monospace')),
+    t.objectProperty(t.identifier('fontSize'), t.stringLiteral('12px')),
+    t.objectProperty(t.identifier('whiteSpace'), t.stringLiteral('pre')),
+    t.objectProperty(t.identifier('background'), t.stringLiteral('#fbfbff')),
+    t.objectProperty(t.identifier('border'), t.stringLiteral('1px solid #d3d8eb')),
+    t.objectProperty(t.identifier('borderRadius'), t.stringLiteral('6px')),
+  ])
+
+  return t.jsxElement(
+    t.jsxOpeningElement(
+      t.jsxIdentifier('textarea'),
+      [
+        t.jsxAttribute(t.jsxIdentifier('readOnly'), null),
+        t.jsxAttribute(
+          t.jsxIdentifier('value'),
+          t.jsxExpressionContainer(
+            t.callExpression(
+              t.memberExpression(t.identifier('JSON'), t.identifier('stringify')),
+              [t.cloneNode(snapshotExpression), t.nullLiteral(), t.numericLiteral(2)],
+            ),
+          ),
+        ),
+        t.jsxAttribute(
+          t.jsxIdentifier('style'),
+          t.jsxExpressionContainer(textareaStyle),
+        ),
+      ],
+      false,
+    ),
+    t.jsxClosingElement(t.jsxIdentifier('textarea')),
+    [],
+    false,
+  )
+}
+
+function wrapWithInspector(jsxNode, snapshotExpression) {
+  return t.jsxFragment(
+    t.jsxOpeningFragment(),
+    t.jsxClosingFragment(),
+    [buildInspectorTextarea(snapshotExpression), jsxNode],
+  )
+}
+
+function transformComponentFunction(functionPath) {
+  ensureBlockBody(functionPath.node)
+
+  const returnPaths = []
+  functionPath.get('body').traverse({
+    ReturnStatement(returnPath) {
+      if (returnPath.getFunctionParent() !== functionPath) return
+      const arg = returnPath.node.argument
+      if (t.isJSXElement(arg) || t.isJSXFragment(arg)) {
+        returnPaths.push(returnPath)
+      }
+    },
+  })
+
+  if (returnPaths.length === 0) return false
+
+  const stateNames = collectStateNames(functionPath)
+  const propsExpression = buildPropsExpression(functionPath.node.params[0])
+
+  const stateExpression = t.objectExpression(
+    stateNames.map(name => t.objectProperty(t.identifier(name), t.identifier(name), false, true)),
+  )
+
+  const snapshotObject = t.objectExpression([
+    t.objectProperty(t.identifier('props'), propsExpression),
+    t.objectProperty(t.identifier('state'), stateExpression),
+  ])
+
+  returnPaths.forEach(returnPath => {
+    const arg = returnPath.node.argument
+    if (!arg) return
+    returnPath.node.argument = wrapWithInspector(arg, snapshotObject)
+  })
+
+  return true
+}
+
+export default function componentValuesPlugin() {
+  return {
+    name: 'vite-plugin-component-values',
+    enforce: 'pre',
+    transform(code, id) {
+      if (!/\.[jt]sx?$/.test(id) || id.includes('node_modules')) return
+      if (!code.includes('jsx') && !/<[A-Z]/.test(code) && !/<[a-z]/.test(code)) return
+
+      let ast
+      try {
+        ast = parse(code, {
+          sourceType: 'module',
+          plugins: ['jsx', 'typescript'],
+        })
+      } catch {
+        return
+      }
+
+      let modified = false
+
+      traverseAst(ast, {
+        VariableDeclarator(path) {
+          if (!t.isIdentifier(path.node.id) || !isComponentName(path.node.id.name)) return
+          if (!isTopLevelDeclaration(path.parentPath)) return
+
+          const { init } = path.node
+          if (!init) return
+          if (!t.isArrowFunctionExpression(init) && !t.isFunctionExpression(init)) return
+
+          const initPath = path.get('init')
+          if (transformComponentFunction(initPath)) {
+            modified = true
+          }
+        },
+
+        FunctionDeclaration(path) {
+          if (!path.node.id || !isComponentName(path.node.id.name)) return
+          if (!isTopLevelDeclaration(path)) return
+
+          if (transformComponentFunction(path)) {
+            modified = true
+          }
+        },
+      })
+
+      if (!modified) return
+
+      const output = generateCode(ast, { retainLines: true }, code)
+      return { code: output.code, map: output.map }
+    },
+  }
+}

package/src/index.d.ts

@@ -0,0 +1,10 @@
+export function componentBorder(): any;
+export function componentValues(): any;
+export function saveFile(): any;
+export function sourceExplorer(): any;
+export function llmExplainInject(options?: {
+  targetFile?: string;
+  workspaceFunction?: string;
+  sourcePath?: string;
+}): any;
+export function sourceCompressor(): any;

package/src/index.js

@@ -0,0 +1,6 @@
+export { default as componentBorder } from './component-border.js'
+export { default as componentValues } from './component-values.js'
+export { default as saveFile } from './save-file.js'
+export { default as sourceExplorer } from './source-explorer.js'
+export { default as llmExplainInject } from './llm-explain-inject.js'
+export { default as sourceCompressor } from './source-compressor.js'

package/src/llm-explain-inject.js

@@ -0,0 +1,218 @@
+import path from 'node:path'
+import { parse } from '@babel/parser'
+import traverse from '@babel/traverse'
+import generate from '@babel/generator'
+import * as t from '@babel/types'
+
+const traverseAst = traverse.default ?? traverse
+const generateCode = generate.default ?? generate
+
+const RUNTIME_IMPORT_SOURCE = '@test328932/test328933/runtime'
+const PANEL_COMPONENT_NAME = 'LlmExplainPanel'
+
+function ensureBlockBody(functionNode) {
+  if (t.isBlockStatement(functionNode.body)) return
+  functionNode.body = t.blockStatement([t.returnStatement(functionNode.body)])
+}
+
+function buildPanelElement(sourcePath) {
+  return t.jsxElement(
+    t.jsxOpeningElement(
+      t.jsxIdentifier(PANEL_COMPONENT_NAME),
+      [
+        t.jsxAttribute(
+          t.jsxIdentifier('sourcePath'),
+          t.stringLiteral(sourcePath),
+        ),
+      ],
+      true,
+    ),
+    null,
+    [],
+    true,
+  )
+}
+
+function hasPanelInJSX(node) {
+  let found = false
+
+  traverseAst(
+    t.file(t.program([t.expressionStatement(node)])),
+    {
+      JSXOpeningElement(path) {
+        if (t.isJSXIdentifier(path.node.name, { name: PANEL_COMPONENT_NAME })) {
+          found = true
+          path.stop()
+        }
+      },
+    },
+  )
+
+  return found
+}
+
+function ensureRuntimeImport(ast) {
+  const body = ast.program.body
+  let runtimeImport = null
+
+  for (const statement of body) {
+    if (t.isImportDeclaration(statement) && statement.source.value === RUNTIME_IMPORT_SOURCE) {
+      runtimeImport = statement
+      break
+    }
+  }
+
+  if (runtimeImport) {
+    const hasSpecifier = runtimeImport.specifiers.some(specifier => (
+      t.isImportSpecifier(specifier) &&
+      t.isIdentifier(specifier.imported, { name: PANEL_COMPONENT_NAME })
+    ))
+
+    if (!hasSpecifier) {
+      runtimeImport.specifiers.push(
+        t.importSpecifier(
+          t.identifier(PANEL_COMPONENT_NAME),
+          t.identifier(PANEL_COMPONENT_NAME),
+        ),
+      )
+      return true
+    }
+
+    return false
+  }
+
+  const lastImportIndex = [...body].reverse().findIndex(statement => t.isImportDeclaration(statement))
+  const insertIndex = lastImportIndex === -1 ? 0 : body.length - lastImportIndex
+
+  body.splice(
+    insertIndex,
+    0,
+    t.importDeclaration(
+      [
+        t.importSpecifier(
+          t.identifier(PANEL_COMPONENT_NAME),
+          t.identifier(PANEL_COMPONENT_NAME),
+        ),
+      ],
+      t.stringLiteral(RUNTIME_IMPORT_SOURCE),
+    ),
+  )
+
+  return true
+}
+
+function findWorkspaceFunctionPath(ast, workspaceFunction) {
+  let workspacePath = null
+
+  traverseAst(ast, {
+    FunctionDeclaration(path) {
+      if (workspacePath) return
+      if (!path.node.id || path.node.id.name !== workspaceFunction) return
+      workspacePath = path
+    },
+    VariableDeclarator(path) {
+      if (workspacePath) return
+      if (!t.isIdentifier(path.node.id, { name: workspaceFunction })) return
+      const { init } = path.node
+      if (!init) return
+      if (!t.isFunctionExpression(init) && !t.isArrowFunctionExpression(init)) return
+      workspacePath = path.get('init')
+    },
+  })
+
+  return workspacePath
+}
+
+function injectPanelIntoWorkspace(workspacePath, sourcePath) {
+  ensureBlockBody(workspacePath.node)
+
+  let returnPath = null
+
+  workspacePath.get('body').traverse({
+    ReturnStatement(path) {
+      if (path.getFunctionParent() !== workspacePath) return
+      if (returnPath) return
+
+      const arg = path.node.argument
+      if (t.isJSXElement(arg) || t.isJSXFragment(arg)) {
+        returnPath = path
+      }
+    },
+  })
+
+  if (!returnPath) return false
+
+  const returnArg = returnPath.node.argument
+  if (!returnArg) return false
+
+  if (hasPanelInJSX(returnArg)) return false
+
+  if (t.isJSXElement(returnArg) || t.isJSXFragment(returnArg)) {
+    returnArg.children.push(buildPanelElement(sourcePath))
+    return true
+  }
+
+  return false
+}
+
+export default function llmExplainInject(options = {}) {
+  const {
+    targetFile = 'src/App.tsx',
+    workspaceFunction = 'TodoWorkspace',
+    sourcePath = 'App.tsx',
+  } = options
+
+  let rootDir = process.cwd()
+  let targetAbsolutePath = path.resolve(rootDir, targetFile)
+
+  return {
+    name: 'vite-plugin-llm-explain-inject',
+    enforce: 'pre',
+    configResolved(config) {
+      rootDir = config.root
+      targetAbsolutePath = path.resolve(rootDir, targetFile)
+    },
+    transform(code, id) {
+      const cleanId = id.split('?')[0]
+      if (path.resolve(cleanId) !== targetAbsolutePath) return
+      if (!/\.[jt]sx?$/.test(cleanId)) return
+
+      let ast
+      try {
+        ast = parse(code, {
+          sourceType: 'module',
+          plugins: ['jsx', 'typescript'],
+        })
+      } catch {
+        return
+      }
+
+      const workspacePath = findWorkspaceFunctionPath(ast, workspaceFunction)
+      if (!workspacePath) {
+        this.warn(
+          `[vite-plugin-llm-explain-inject] Could not find workspace function "${workspaceFunction}" in ${targetFile}. No injection performed.`,
+        )
+        return
+      }
+
+      let modified = false
+      const panelInjected = injectPanelIntoWorkspace(workspacePath, sourcePath)
+      if (panelInjected) {
+        modified = true
+      }
+
+      const importModified = ensureRuntimeImport(ast)
+      if (importModified) {
+        modified = true
+      }
+
+      if (!modified) return
+
+      const output = generateCode(ast, { retainLines: true }, code)
+      return {
+        code: output.code,
+        map: output.map,
+      }
+    },
+  }
+}

package/src/runtime/index.d.ts

@@ -0,0 +1,4 @@
+import { ComponentType } from 'react'
+
+declare const LlmExplainPanel: ComponentType<{ sourcePath?: string }>
+export default LlmExplainPanel

package/src/runtime/index.js

@@ -0,0 +1,2 @@
+export { default } from './llm-explain-panel.jsx'
+export { default as LlmExplainPanel } from './llm-explain-panel.jsx'