feat: update to support new grammar

Author: reecelikesramen

src/index.ts

@@ -18,17 +18,29 @@ const plugin: Plugin = {
         const sections = splitPywireSections(text)
         const formattedHtml = await formatHtmlWithPrettier(sections.html, options)
 
-        if (!sections.separator) {
-          return formattedHtml
+        const parts: string[] = []
+
+        // Directives
+        if (sections.directives.trim().length > 0) {
+          parts.push(sections.directives.trimEnd())
         }
 
-        const parts: string[] = []
-        if (sections.header.trim().length > 0) {
-          parts.push(sections.header.trimEnd())
+        // Python fence
+        if (sections.separator && sections.python.trim().length > 0) {
+          if (parts.length > 0) {
+            parts.push('')
+          }
+          parts.push('---')
+          parts.push(sections.python.trimEnd())
+          parts.push('---')
         }
-        parts.push(sections.separator.trimEnd())
+
+        // HTML template
         if (formattedHtml.trim().length > 0) {
-          parts.push(formattedHtml.trimEnd())
+          if (parts.length > 0) {
+            parts.push('')
+          }
+          parts.push(formattedHtml.trim())
         }
 
         return parts.join('\n')

src/parser.test.ts

@@ -2,34 +2,34 @@ import { describe, it, expect } from 'vitest'
 import { parsePywire } from './parser.js'
 
 describe('parsePywire', () => {
-  it('splits python header and html', () => {
-    const input = `name = "World"\n\n---html---\n<div>{name}</div>\n`
+  it('splits python header and html with --- fences', () => {
+    const input = `---\nname = "World"\n---\n<div>{name}</div>\n`
     const result = parsePywire(input)
 
     expect(result.headerNodes).toHaveLength(1)
-    expect(result.headerNodes[0]).toEqual({ type: 'Python', text: 'name = "World"\n' })
-    expect(result.separator).toBe('---html---')
+    expect(result.headerNodes[0]).toEqual({ type: 'Python', text: 'name = "World"' })
+    expect(result.separator).toBe('---')
     expect(result.html).toBe('<div>{name}</div>\n')
   })
 
-  it('groups directives separately from python', () => {
-    const input = `!path '/'\n\nx = 1\n---html---\n<p>{x}</p>\n`
+  it('groups directives separately from fenced python', () => {
+    const input = `!path '/'\n\n---\nx = 1\n---\n<p>{x}</p>\n`
     const result = parsePywire(input)
 
     expect(result.headerNodes).toHaveLength(2)
     expect(result.headerNodes[0]).toEqual({ type: 'Directive', text: "!path '/'" })
-    expect(result.headerNodes[1]).toEqual({ type: 'Python', text: '\nx = 1' })
+    expect(result.headerNodes[1]).toEqual({ type: 'Python', text: 'x = 1' })
   })
 
   it('captures multiline directive blocks', () => {
-    const input = `!path {\n  "main": "/"\n}\n\nvalue = 2\n---html---\n<div></div>\n`
+    const input = `!path {\n  "main": "/"\n}\n\n---\nvalue = 2\n---\n<div></div>\n`
     const result = parsePywire(input)
 
     expect(result.headerNodes).toHaveLength(2)
     expect(result.headerNodes[0].type).toBe('Directive')
     expect(result.headerNodes[0].text).toContain('!path {')
     expect(result.headerNodes[0].text).toContain('"main": "/"')
-    expect(result.headerNodes[1]).toEqual({ type: 'Python', text: '\nvalue = 2' })
+    expect(result.headerNodes[1]).toEqual({ type: 'Python', text: 'value = 2' })
   })
 
   it('treats files without separator as html', () => {
@@ -40,4 +40,13 @@ describe('parsePywire', () => {
     expect(result.headerNodes).toHaveLength(0)
     expect(result.html).toBe(input)
   })
+
+  it('supports legacy ---html--- separator', () => {
+    const input = `x = 1\n---html---\n<div>{x}</div>\n`
+    const result = parsePywire(input)
+
+    expect(result.headerNodes).toHaveLength(1)
+    expect(result.headerNodes[0]).toEqual({ type: 'Python', text: 'x = 1' })
+    expect(result.separator).toBe('---html---')
+  })
 })

src/parser.ts

@@ -1,4 +1,5 @@
-const separatorRegex = /^\s*(-{3,})\s*html\s*\1\s*$/i
+const fenceSeparatorRegex = /^---\s*$/
+const legacySeparatorRegex = /^\s*(-{3,})\s*html\s*\1\s*$/i
 const directiveStartRegex = /^\s*!/
 
 export type HeaderNode = { type: 'Directive'; text: string } | { type: 'Python'; text: string }
@@ -13,34 +14,125 @@ export type ParsedDocument = {
 }
 
 export type SplitSections = {
-  header: string
+  directives: string
   separator: string | null
+  python: string
   html: string
 }
 
+/**
+ * Split a .wire file into its sections:
+ *   1. Directives (optional) — lines starting with !
+ *   2. Fenced Python (optional) — between --- separators
+ *   3. Template HTML
+ *
+ * Also supports legacy ---html--- single separator format.
+ */
 export function splitPywireSections(text: string): SplitSections {
   const lines = text.split(/\r?\n/)
-  const separatorIndex = lines.findIndex((line) => separatorRegex.test(line))
 
-  if (separatorIndex < 0) {
+  // First, check for legacy ---html--- format (single separator)
+  const legacyIdx = lines.findIndex((line) => legacySeparatorRegex.test(line))
+  if (legacyIdx >= 0) {
     return {
-      header: '',
+      directives: '',
+      separator: lines[legacyIdx],
+      python: lines.slice(0, legacyIdx).join('\n'),
+      html: lines.slice(legacyIdx + 1).join('\n'),
+    }
+  }
+
+  // Find all --- fence lines
+  const fenceIndices: number[] = []
+  for (let i = 0; i < lines.length; i++) {
+    if (fenceSeparatorRegex.test(lines[i])) {
+      fenceIndices.push(i)
+    }
+  }
+
+  // No fences — everything is either directives + html or just html
+  if (fenceIndices.length < 2) {
+    const firstNonDirectiveLine = lines.findIndex((line) => {
+      const trimmed = line.trim()
+      return trimmed.length > 0 && !directiveStartRegex.test(trimmed)
+    })
+
+    // Check if the first non-empty, non-directive line looks like html or python
+    // If there are no directives at all, everything is html
+    const hasDirectives = lines.some((line) => directiveStartRegex.test(line.trim()))
+
+    if (!hasDirectives) {
+      return {
+        directives: '',
+        separator: null,
+        python: '',
+        html: text,
+      }
+    }
+
+    // Has directives but no fence — split at first non-directive, non-empty line
+    // that isn't part of a block directive
+    let directiveEnd = 0
+    let braceDepth = 0
+    for (let i = 0; i < lines.length; i++) {
+      const trimmed = lines[i].trim()
+      braceDepth += countBraces(lines[i])
+
+      if (braceDepth > 0) {
+        directiveEnd = i + 1
+        continue
+      }
+
+      if (directiveStartRegex.test(trimmed)) {
+        directiveEnd = i + 1
+        continue
+      }
+
+      if (trimmed.length === 0 && directiveEnd === i) {
+        directiveEnd = i + 1
+        continue
+      }
+
+      if (directiveEnd > 0 && trimmed.length > 0 && !directiveStartRegex.test(trimmed)) {
+        break
+      }
+    }
+
+    return {
+      directives: lines.slice(0, directiveEnd).join('\n'),
       separator: null,
-      html: lines.join('\n'),
+      python: '',
+      html: lines.slice(directiveEnd).join('\n'),
     }
   }
 
+  // Two or more fences — content between first two fences is Python
+  const openFence = fenceIndices[0]
+  const closeFence = fenceIndices[1]
+
   return {
-    header: lines.slice(0, separatorIndex).join('\n'),
-    separator: lines[separatorIndex],
-    html: lines.slice(separatorIndex + 1).join('\n'),
+    directives: lines.slice(0, openFence).join('\n'),
+    separator: lines[openFence],
+    python: lines.slice(openFence + 1, closeFence).join('\n'),
+    html: lines.slice(closeFence + 1).join('\n'),
   }
 }
 
 export function parsePywire(text: string): ParsedDocument {
   const sections = splitPywireSections(text)
-  const headerLines = sections.header.length > 0 ? sections.header.split('\n') : []
-  const headerNodes = parseHeader(headerLines)
+
+  const headerNodes: HeaderNode[] = []
+
+  // Parse directives
+  if (sections.directives.trim().length > 0) {
+    const directiveNodes = parseDirectives(sections.directives.split('\n'))
+    headerNodes.push(...directiveNodes)
+  }
+
+  // Parse python
+  if (sections.python.trim().length > 0) {
+    headerNodes.push({ type: 'Python', text: sections.python })
+  }
 
   return {
     type: 'Document',
@@ -52,45 +144,39 @@ export function parsePywire(text: string): ParsedDocument {
   }
 }
 
-function parseHeader(lines: string[]): HeaderNode[] {
+function parseDirectives(lines: string[]): HeaderNode[] {
   const nodes: HeaderNode[] = []
-  let currentPythonLines: string[] = []
-
-  const flushPython = () => {
-    if (currentPythonLines.length === 0) {
-      return
-    }
-    nodes.push({ type: 'Python', text: currentPythonLines.join('\n') })
-    currentPythonLines = []
-  }
-
   let index = 0
+
   while (index < lines.length) {
     const line = lines[index]
-    if (!directiveStartRegex.test(line)) {
-      currentPythonLines.push(line)
-      index += 1
+    const trimmed = line.trim()
+
+    if (trimmed.length === 0) {
+      index++
       continue
     }
 
-    flushPython()
+    if (!directiveStartRegex.test(trimmed)) {
+      // Non-directive, non-empty line in directives section — skip
+      index++
+      continue
+    }
 
     const directiveLines: string[] = [line]
     let braceDepth = countBraces(line)
-    index += 1
+    index++
 
     while (braceDepth > 0 && index < lines.length) {
       const nextLine = lines[index]
       directiveLines.push(nextLine)
       braceDepth += countBraces(nextLine)
-      index += 1
+      index++
     }
 
     nodes.push({ type: 'Directive', text: directiveLines.join('\n') })
   }
 
-  flushPython()
-
   return nodes
 }
 

src/printer.test.ts

@@ -12,18 +12,19 @@ vi.mock('./utils/ruff-config.js', () => ({
 }))
 
 describe('printPywire', () => {
-  it('formats python header and html', () => {
-    const input = `x=1\n\n---html---\n<div><span>{x}</span></div>\n`
+  it('formats python header and html with --- fences', () => {
+    const input = `---\nx=1\n---\n<div><span>{x}</span></div>\n`
     const doc = parsePywire(input)
     const output = printPywire({ getValue: () => doc }, { printWidth: 80 })
 
+    expect(output).toContain('---')
     expect(output).toContain('FORMATTED(x=1)')
     expect(output).toContain('<div>')
     expect(output).toContain('<span>{x}</span>')
   })
 
   it('preserves interpolations while formatting html', () => {
-    const input = `---html---\n<div>{f"Hi {name}"}</div>\n`
+    const input = `<div>{f"Hi {name}"}</div>\n`
     const doc = parsePywire(input)
     const output = printPywire({ getValue: () => doc }, { printWidth: 80 })