Add support for HTML and JSX file compaction and refactor associated tests

Author: robertpiosik

packages/vscode/src/context/utils/compact-file/compact-file.spec.ts

@@ -16,65 +16,19 @@ describe('compact_file', () => {
     return { input, expected }
   }
 
-  it('should remove single line comments', () => {
-    const { input, expected } = load_test_case('remove-single-line-comments')
-    expect(compact_file(input, '.ts')).toBe(expected)
-  })
-
-  it('should remove block comments on a single line', () => {
-    const { input, expected } = load_test_case(
-      'remove-block-comments-single-line'
-    )
-    expect(compact_file(input, '.ts')).toBe(expected)
-  })
-
-  it('should remove multi-line block comments', () => {
-    const { input, expected } = load_test_case(
-      'remove-multi-line-block-comments'
-    )
-    expect(compact_file(input, '.ts')).toBe(expected)
-  })
-
-  it('should preserve comments inside double quotes', () => {
-    const { input, expected } = load_test_case('preserve-double-quotes')
-    expect(compact_file(input, '.ts')).toBe(expected)
-  })
-
-  it('should preserve comments inside single quotes', () => {
-    const { input, expected } = load_test_case('preserve-single-quotes')
-    expect(compact_file(input, '.ts')).toBe(expected)
-  })
-
-  it('should preserve comments inside template literals', () => {
-    const { input, expected } = load_test_case('preserve-template-literals')
-    expect(compact_file(input, '.ts')).toBe(expected)
-  })
-
-  it('should preserve block comments inside strings', () => {
-    const { input, expected } = load_test_case(
-      'preserve-block-comments-in-strings'
+  it('should handle c-style content (combined)', () => {
+    const case_path = path.join(__dirname, 'test-cases', 'c-style')
+    const input = fs.readFileSync(path.join(case_path, 'input.txt'), 'utf-8')
+    const expected = fs.readFileSync(
+      path.join(case_path, 'output.txt'),
+      'utf-8'
     )
     expect(compact_file(input, '.ts')).toBe(expected)
   })
 
-  it('should handle escaped quotes inside strings', () => {
-    const { input, expected } = load_test_case('handle-escaped-quotes')
-    expect(compact_file(input, '.ts')).toBe(expected)
-  })
-
-  it('should handle complex mixed content', () => {
-    const { input, expected } = load_test_case('complex-mixed-content')
-    expect(compact_file(input, '.ts')).toBe(expected)
-  })
-
-  it('should handle input with only comments', () => {
-    const { input, expected } = load_test_case('only-comments')
-    expect(compact_file(input, '.ts')).toBe(expected)
-  })
-
-  it('should strip function bodies when enabled', () => {
-    const { input, expected } = load_test_case('javascript-bodies')
-    expect(compact_file(input, '.ts')).toBe(expected)
+  it('should strip jsx bodies', () => {
+    const { input, expected } = load_test_case('jsx', '.')
+    expect(compact_file(input, '.tsx')).toBe(expected)
   })
 
   it('should strip python function bodies', () => {
@@ -96,4 +50,9 @@ describe('compact_file', () => {
     const { input, expected } = load_test_case('sql', '.')
     expect(compact_file(input, '.sql')).toBe(expected)
   })
+
+  it('should strip html comments', () => {
+    const { input, expected } = load_test_case('html', '.')
+    expect(compact_file(input, '.html')).toBe(expected)
+  })
 })

packages/vscode/src/context/utils/compact-file/compact-file.ts

@@ -1,22 +1,25 @@
 import { compact_c_style } from './languages/c-style'
 import { compact_css } from './languages/css'
+import { compact_html } from './languages/html'
+import { compact_jsx } from './languages/jsx'
 import { compact_python } from './languages/python'
 import { compact_ruby } from './languages/ruby'
 import { compact_sql } from './languages/sql'
 
 export const compact_file = (content: string, extension: string): string => {
   if (extension == '.py') {
     return compact_python(content)
-  }
-  if (extension == '.rb') {
+  } else if (['.tsx', '.jsx'].includes(extension)) {
+    return compact_jsx(content)
+  } else if (extension == '.rb') {
     return compact_ruby(content)
-  }
-  if (['.css', '.scss', '.less'].includes(extension)) {
+  } else if (['.css', '.scss', '.sass'].includes(extension)) {
     return compact_css(content)
-  }
-  if (extension == '.sql') {
+  } else if (extension == '.sql') {
     return compact_sql(content)
+  } else if (['.html', '.htm'].includes(extension)) {
+    return compact_html(content)
+  } else {
+    return compact_c_style(content, true)
   }
-
-  return compact_c_style(content, true)
 }

packages/vscode/src/context/utils/compact-file/languages/html.ts

@@ -0,0 +1,59 @@
+import { compact_c_style } from './c-style'
+import { compact_css } from './css'
+
+export const compact_html = (content: string): string => {
+  const scripts: { open: string; content: string }[] = []
+  const styles: { open: string; content: string }[] = []
+
+  // 1. Extract and mask Scripts
+  // We use a placeholder to preserve the location while we process the rest of the HTML
+  let processed = content.replace(
+    /(<script\b[^>]*>)([\s\S]*?)(<\/script>)/gi,
+    (match, open, inner) => {
+      scripts.push({ open, content: inner })
+      return `___SCRIPT_${scripts.length - 1}___`
+    }
+  )
+
+  // 2. Extract and mask Styles
+  processed = processed.replace(
+    /(<style\b[^>]*>)([\s\S]*?)(<\/style>)/gi,
+    (match, open, inner) => {
+      styles.push({ open, content: inner })
+      return `___STYLE_${styles.length - 1}___`
+    }
+  )
+
+  // 3. Strip HTML Comments
+  processed = processed.replace(/<!--[\s\S]*?-->/g, '')
+
+  // 4. Compact HTML Lines (Trim and remove empty lines)
+  const lines = processed.split(/\r?\n/)
+  const compacted_lines: string[] = []
+  for (const line of lines) {
+    const trimmed = line.trim()
+    if (trimmed) {
+      compacted_lines.push(trimmed)
+    }
+  }
+  processed = compacted_lines.join('\n')
+
+  // 5. Restore Scripts
+  processed = processed.replace(/___SCRIPT_(\d+)___/g, (_, idx) => {
+    const { open, content } = scripts[parseInt(idx)]
+    // Treat as C-style but do NOT strip bodies (preserve logic, just strip comments)
+    // as scripts in HTML are often minimal or structural.
+    const compacted = compact_c_style(content, false).trim()
+    return `${open}\n${compacted}\n</script>`
+  })
+
+  // 6. Restore Styles
+  processed = processed.replace(/___STYLE_(\d+)___/g, (_, idx) => {
+    const { open, content } = styles[parseInt(idx)]
+    // Compact CSS (strips bodies/properties usually)
+    const compacted = compact_css(content).trim()
+    return `${open}\n${compacted}\n</style>`
+  })
+
+  return processed + '\n'
+}

packages/vscode/src/context/utils/compact-file/languages/jsx.ts

@@ -0,0 +1,141 @@
+export const compact_jsx = (content: string): string => {
+  // Split by newline to process line by line, handling both LF and CRLF
+  const lines = content.split(/\r?\n/)
+  const result: string[] = []
+  let is_in_block_comment = false
+  let skip_body_depth = 0
+  // Buffer to track context for stripping bodies (e.g. "class Foo ")
+  let last_code_buffer = ''
+
+  for (const line of lines) {
+    let processed_line = ''
+    let i = 0
+    let is_in_string: false | '"' | "'" | '`' = false
+
+    while (i < line.length) {
+      const char = line[i]
+      const next_char = line[i + 1]
+
+      // Handle Block Comments
+      if (is_in_block_comment) {
+        if (char == '*' && next_char == '/') {
+          is_in_block_comment = false
+          i += 2
+        } else {
+          i++
+        }
+        continue
+      }
+
+      // Handle Strings (ignore comments inside strings)
+      if (is_in_string) {
+        if (char == '\\') {
+          // Handle escaped characters inside string
+          if (skip_body_depth === 0) {
+            processed_line += char + (next_char || '')
+          }
+          last_code_buffer += char + (next_char || '')
+          i += 2
+          continue
+        }
+        if (char === is_in_string) {
+          is_in_string = false
+        }
+        if (skip_body_depth === 0) {
+          processed_line += char
+        }
+        last_code_buffer += char
+        i++
+        continue
+      }
+
+      // Start of String
+      if (char == '"' || char === "'" || char == '`') {
+        is_in_string = char
+        if (skip_body_depth === 0) {
+          processed_line += char
+        }
+        last_code_buffer += char
+        i++
+        continue
+      }
+
+      // Start of Line Comment
+      if (char == '/' && next_char == '/') {
+        break // Ignore the rest of the line
+      }
+
+      // Start of Block Comment
+      if (char == '/' && next_char == '*') {
+        is_in_block_comment = true
+        i += 2
+        continue
+      }
+
+      // Handle Function Body Stripping
+      if (char == '{') {
+        if (skip_body_depth > 0) {
+          // Already skipping, just deepen the level
+          skip_body_depth++
+          last_code_buffer += char
+          i++
+          continue
+        } else {
+          // Check if we should preserve this block (class, interface, etc.)
+          // We look at last_code_buffer for keywords
+          const is_keeper =
+            /(^|\s)(class|interface|enum|namespace|type)(\s|$)/.test(
+              last_code_buffer
+            )
+          // Also preserve object literals (preceded by =, :, or open paren for destructuring)
+          const is_object_literal = /(=|:|\()\s*$/.test(
+            last_code_buffer.trimEnd()
+          )
+
+          if (!is_keeper && !is_object_literal) {
+            // Start skipping
+            skip_body_depth = 1
+            const indent = processed_line.match(/^\s*/)?.[0] || ''
+            processed_line += `{\n${indent}  // ...\n${indent}}`
+            last_code_buffer += '{}'
+            i++
+            continue
+          } else {
+            // Keeper: reset buffer to avoid false positives in nested scopes
+            last_code_buffer = ''
+          }
+        }
+      } else if (char == '}') {
+        if (skip_body_depth > 0) {
+          skip_body_depth--
+          last_code_buffer += char
+          i++
+          continue
+        }
+      }
+
+      // Regular character
+      if (skip_body_depth == 0) {
+        processed_line += char
+      }
+      last_code_buffer += char
+      i++
+    }
+
+    // We trim the line to actually "compact" the file.
+    // If a line contained only comments, it becomes empty and is skipped.
+    const trimmed = processed_line.trim()
+    if (trimmed) {
+      result.push(trimmed)
+    }
+
+    // Add a space to buffer for newline to avoid concatenation issues (e.g. "class Foo" + "{")
+    last_code_buffer += ' '
+    // Limit buffer size to avoid memory issues, keeping enough for context
+    if (last_code_buffer.length > 200) {
+      last_code_buffer = last_code_buffer.slice(-200)
+    }
+  }
+
+  return result.length > 0 ? result.join('\n') + '\n' : ''
+}

packages/vscode/src/context/utils/compact-file/test-cases/c-style/complex-mixed-content/input.txt

@@ -0,0 +1,60 @@
+function test() {
+  const url = "http://example.com"; // URL with //
+  /* Start block
+  End block */
+  return `Result: ${url}`;
+}
+
+const str = "String with \"// quote"; // real comment
+
+function add(a, b) {
+  return a + b;
+}
+
+class Calculator {
+  constructor() {
+    this.value = 0;
+  }
+
+  add(n) {
+    this.value += n;
+  }
+}
+
+interface Item {
+  id: string;
+  name: string;
+}
+
+const double = (x) => {
+  return x * 2;
+}
+
+const config = {
+  env: "production",
+  debug: false
+};
+
+// comment
+/* block */
+
+const str = "/* this is not a comment */";
+
+const str = "// this is not a comment";
+
+const str = '// this is not a comment';
+
+const str = `// this is not a comment`;
+
+const a = 1; /* comment */ const b = 2;
+
+      const a = 1;
+      /*
+        This is a multi-line
+        comment
+      */
+      const b = 2;
+
+      const a = 1; // This is a comment
+      // This is a full line comment
+      const b = 2;