@dinoreic/fez 0.4.0 → 0.5.2

package/bin/fez

@@ -2,6 +2,9 @@
 
 require 'pathname'
 
+# Resolve the actual bin directory (handles symlinks from bunx/npx)
+bin_dir = Pathname.new(__FILE__).realpath.dirname
+
 command = ARGV[0]
 args = ARGV[1..-1]
 
@@ -10,22 +13,29 @@ if command.nil? || command == '--help' || command == '-h'
   puts ""
   puts "Available commands:"
   
-  bin_dir = Pathname.new(__FILE__).dirname
-  commands = Dir[bin_dir.join("fez-*")].map do |path|
+  subcommands = Dir[bin_dir.join("fez-*")].map do |path|
     File.basename(path).sub(/^fez-/, '')
   end.sort
   
-  commands.each do |cmd|
-    puts "  #{cmd}"
+  max_len = subcommands.map(&:length).max || 0
+  
+  subcommands.each do |cmd|
+    cmd_path = bin_dir.join("fez-#{cmd}")
+    info = `#{cmd_path} --info 2>/dev/null`.strip
+    if info.empty?
+      puts "  #{cmd}"
+    else
+      puts "  #{cmd.ljust(max_len)}  #{info}"
+    end
   end
   
   exit 0
 end
 
-subcommand_path = File.join(File.dirname(__FILE__), "fez-#{command}")
+subcommand_path = bin_dir.join("fez-#{command}")
 
 if File.exist?(subcommand_path) && File.executable?(subcommand_path)
-  exec(subcommand_path, *args)
+  exec(subcommand_path.to_s, *args)
 else
   puts "fez: '#{command}' is not a fez command. See 'fez --help'."
   exit 1

package/bin/fez-compile

@@ -0,0 +1,347 @@
+#!/usr/bin/env bun
+
+import { parseArgs } from 'util'
+import fs from 'fs'
+import path from 'path'
+import prettier from 'prettier'
+
+const INFO = 'Compile Fez components and report errors'
+
+const { values, positionals } = parseArgs({
+  args: Bun.argv.slice(2),
+  options: {
+    help: { type: 'boolean', short: 'h' },
+    output: { type: 'boolean', short: 'o' },
+    info: { type: 'boolean' },
+  },
+  allowPositionals: true,
+})
+
+if (values.info) {
+  console.log(INFO)
+  process.exit(0)
+}
+
+if (values.help || positionals.length === 0) {
+  console.log(`Usage: fez compile <file.fez>
+
+${INFO}
+
+Options:
+  -h, --help    Show this help message
+  -o, --output  Output compiled JavaScript
+
+Examples:
+  fez compile demo/fez/ui-counter.fez
+  fez compile -o demo/fez/ui-counter.fez > compiled.js
+`)
+  process.exit(0)
+}
+
+if (positionals.length > 1) {
+  console.error('Error: Only one file can be compiled at a time')
+  process.exit(1)
+}
+
+// Parse a .fez file into its components
+function parseFezFile(content) {
+  const result = { script: '', style: '', html: '', head: '', demo: '', info: '' }
+  const lines = content.split('\n')
+
+  let currentBlock = []
+  let currentType = ''
+
+  for (let line of lines) {
+    const trimmedLine = line.trim()
+
+    // Start blocks - demo/info can contain other tags, so skip nested detection
+    if (trimmedLine.startsWith('<demo') && !result.demo && !currentType) {
+      currentType = 'demo'
+    } else if (trimmedLine.startsWith('<info') && !result.info && !currentType) {
+      currentType = 'info'
+    } else if (trimmedLine.startsWith('<script') && !result.script && currentType !== 'head' && currentType !== 'demo' && currentType !== 'info') {
+      currentType = 'script'
+    } else if (trimmedLine.startsWith('<head') && !result.script && currentType !== 'demo' && currentType !== 'info') {
+      currentType = 'head'
+    } else if (trimmedLine.startsWith('<style') && currentType !== 'demo' && currentType !== 'info') {
+      currentType = 'style'
+    } else if (trimmedLine.endsWith('</demo>') && currentType === 'demo') {
+      result.demo = currentBlock.join('\n')
+      currentBlock = []
+      currentType = ''
+    } else if (trimmedLine.endsWith('</info>') && currentType === 'info') {
+      result.info = currentBlock.join('\n')
+      currentBlock = []
+      currentType = ''
+    } else if (trimmedLine.endsWith('</script>') && currentType === 'script' && !result.script) {
+      result.script = currentBlock.join('\n')
+      currentBlock = []
+      currentType = ''
+    } else if (trimmedLine.endsWith('</style>') && currentType === 'style') {
+      result.style = currentBlock.join('\n')
+      currentBlock = []
+      currentType = ''
+    } else if ((trimmedLine.endsWith('</head>') || trimmedLine.endsWith('</header>')) && currentType === 'head') {
+      result.head = currentBlock.join('\n')
+      currentBlock = []
+      currentType = ''
+    } else if (currentType) {
+      currentBlock.push(currentType === 'demo' || currentType === 'info' ? line : trimmedLine)
+    } else {
+      result.html += line + '\n'
+    }
+  }
+
+  return result
+}
+
+// Wrap script content in a class if not already wrapped
+function wrapInClass(script) {
+  if (/class\s+\{/.test(script)) {
+    return script
+  }
+  return `class {\n${script}\n}`
+}
+
+// Validate JavaScript syntax
+function validateScript(script, filePath) {
+  const errors = []
+  
+  if (!script.trim()) {
+    return errors
+  }
+
+  // Check for ES module imports
+  const hasImports = /^\s*import\s+/m.test(script)
+  
+  // Check if script has explicit class { } declaration
+  const hasExplicitClass = /class\s+\{/.test(script)
+  
+  if (hasExplicitClass) {
+    // Split into parts: imports/top-level code and class
+    let parts = script.split(/class\s+\{/, 2)
+    let preamble = parts[0] || ''
+    let classBody = parts[1] ? `class {\n${parts[1]}` : ''
+    
+    // Validate preamble (imports, const declarations)
+    if (preamble.trim()) {
+      // Remove import statements for validation (they're valid but can't be validated with new Function)
+      let preambleWithoutImports = preamble.replace(/^\s*import\s+.*$/gm, '// import removed')
+      
+      if (preambleWithoutImports.trim()) {
+        try {
+          new Function(preambleWithoutImports)
+        } catch (e) {
+          if (!hasImports || !e.message.includes('import')) {
+            const lineMatch = e.stack?.match(/<anonymous>:(\d+):(\d+)/)
+            let errorInfo = { message: e.message, file: filePath, kind: 'JavaScript' }
+            if (lineMatch) {
+              errorInfo.line = parseInt(lineMatch[1])
+              errorInfo.column = parseInt(lineMatch[2])
+            }
+            errors.push(errorInfo)
+          }
+        }
+      }
+    }
+    
+    // Validate class body
+    if (classBody.trim()) {
+      const code = `(${classBody})`
+      try {
+        new Function(code)
+      } catch (e) {
+        const lineMatch = e.stack?.match(/<anonymous>:(\d+):(\d+)/)
+        let errorInfo = { message: e.message, file: filePath, kind: 'JavaScript' }
+        if (lineMatch) {
+          // Adjust for preamble lines
+          const preambleLines = preamble.split('\n').length
+          errorInfo.line = parseInt(lineMatch[1]) + preambleLines - 2
+          errorInfo.column = parseInt(lineMatch[2])
+        }
+        errors.push(errorInfo)
+      }
+    }
+  } else {
+    // No explicit class - wrap entire script in class
+    let klass = wrapInClass(script)
+    const code = `(${klass})`
+    try {
+      new Function(code)
+    } catch (e) {
+      const lineMatch = e.stack?.match(/<anonymous>:(\d+):(\d+)/)
+      let errorInfo = { message: e.message, file: filePath, kind: 'JavaScript' }
+      if (lineMatch) {
+        errorInfo.line = parseInt(lineMatch[1]) - 2
+        errorInfo.column = parseInt(lineMatch[2])
+      }
+      errors.push(errorInfo)
+    }
+  }
+
+  return errors
+}
+
+// Validate template syntax (basic checks)
+function validateTemplate(html, filePath) {
+  const errors = []
+  
+  // Count both {{if and {{#if variants
+  const ifOpens = (html.match(/\{\{#?if\s/g) || []).length
+  const ifCloses = (html.match(/\{\{\/?#?if\}\}/g) || []).length
+  if (ifOpens !== ifCloses) {
+    errors.push({
+      message: `Unmatched {{if}} blocks: ${ifOpens} opens, ${ifCloses} closes`,
+      file: filePath,
+      kind: 'Template'
+    })
+  }
+
+  // Check for unmatched {{for}}/{{/for}}
+  const forOpens = (html.match(/\{\{for\s/g) || []).length
+  const forCloses = (html.match(/\{\{\/for\}\}/g) || []).length
+  if (forOpens !== forCloses) {
+    errors.push({
+      message: `Unmatched {{for}} blocks: ${forOpens} opens, ${forCloses} closes`,
+      file: filePath,
+      kind: 'Template'
+    })
+  }
+
+  // Check for {{if}} inside attributes (common mistake)
+  const attrIfMatch = html.match(/\w+=["'][^"']*\{\{#?if\s/g)
+  if (attrIfMatch) {
+    errors.push({
+      message: `{{if}} block found inside attribute - use ternary operator instead`,
+      file: filePath,
+      kind: 'Template'
+    })
+  }
+
+  return errors
+}
+
+// Generate compiled JavaScript from parsed .fez file
+function generateCompiledJS(parsed, componentName) {
+  let klass = parsed.script
+
+  if (!/class\s+\{/.test(klass)) {
+    klass = `class {\n${klass}\n}`
+  }
+
+  // Add CSS if present
+  if (parsed.style && parsed.style.includes(':')) {
+    let style = parsed.style
+    // Wrap in :fez if not already scoped
+    if (!style.includes(':fez') && !/(?:^|\s)body\s*\{/.test(style)) {
+      style = `:fez {\n${style}\n}`
+    }
+    klass = klass.replace(/\}\s*$/, `\n  CSS = \`${style}\`\n}`)
+  }
+
+  // Add HTML if present
+  if (parsed.html && /\w/.test(parsed.html)) {
+    // Escape backticks and dollar signs in template, trim whitespace
+    let html = parsed.html
+      .trim()
+      .replaceAll('`', '&#x60;')
+      .replaceAll('$', '\\$')
+    klass = klass.replace(/\}\s*$/, `\n  HTML = \`${html}\`\n}`)
+  }
+
+  // Split into preamble (imports) and class body
+  let parts = klass.split(/class\s+\{/, 2)
+  let preamble = parts[0] || ''
+  let classBody = parts[1] ? `class {\n${parts[1]}` : klass
+
+  // Build final output
+  let output = ''
+  if (preamble.trim()) {
+    output += preamble.trim() + '\n\n'
+  }
+  output += `Fez('${componentName}', ${classBody})`
+
+  return output
+}
+
+async function formatCompiledJS(code, filePath) {
+  try {
+    return { code: await prettier.format(code, { parser: 'babel' }) }
+  } catch (error) {
+    return {
+      error: {
+        message: error?.message || 'Failed to format compiled JavaScript',
+        file: filePath,
+        kind: 'Format',
+      },
+    }
+  }
+}
+
+// Process a single file
+async function compileFile(filePath) {
+  const errors = []
+  const absolutePath = path.resolve(filePath)
+  
+  if (!fs.existsSync(absolutePath)) {
+    return {
+      errors: [{ message: `File not found: ${filePath}`, file: filePath, kind: 'File' }],
+      compiled: null,
+    }
+  }
+
+  const content = fs.readFileSync(absolutePath, 'utf-8')
+  const componentName = path.basename(filePath, '.fez')
+  
+  // Validate component name has a dash
+  if (!componentName.includes('-')) {
+    errors.push({
+      message: `Invalid component name "${componentName}". Custom element names must contain a dash (e.g., 'my-element', 'ui-button').`,
+      file: filePath,
+      kind: 'Naming'
+    })
+  }
+
+  const parsed = parseFezFile(content)
+  
+  // Validate script
+  errors.push(...validateScript(parsed.script, filePath))
+  
+  // Validate template
+  errors.push(...validateTemplate(parsed.html, filePath))
+
+  // Generate compiled output only if no errors
+  let compiled = errors.length === 0 ? generateCompiledJS(parsed, componentName) : null
+  if (compiled) {
+    const formatted = await formatCompiledJS(compiled, filePath)
+    if (formatted.error) {
+      errors.push(formatted.error)
+      compiled = null
+    } else {
+      compiled = formatted.code
+    }
+  }
+
+  return { errors, compiled }
+}
+
+// Main execution
+const filePath = positionals[0]
+const { errors, compiled } = await compileFile(filePath)
+
+if (errors.length > 0) {
+  for (const error of errors) {
+    const location = error.line ? `:${error.line}${error.column ? ':' + error.column : ''}` : ''
+    const kind = error.kind ? `${error.kind} error: ` : ''
+    console.error(`${error.file}${location}: ${kind}${error.message}`)
+  }
+  process.exit(1)
+}
+
+if (values.output && compiled) {
+  console.log(compiled)
+} else {
+  console.log('Compiled without errors, add -o to show output')
+}
+
+process.exit(0)

package/bin/fez-debug

@@ -0,0 +1,25 @@
+#!/usr/bin/env ruby
+
+if ARGV[0] == '--info'
+  puts "Debug URL with Playwright (for LLM agents)"
+  exit 0
+end
+
+url = ARGV[0]
+
+if url.nil? || url == '--help' || url == '-h'
+  puts "Usage: fez debug <url>"
+  puts ""
+  puts "Opens a Playwright browser session for LLM agents to debug web pages."
+  puts "The page object is exposed globally for programmatic inspection."
+  puts ""
+  puts "Example:"
+  puts "  fez debug http://localhost:3333"
+  exit 0
+end
+
+bin_dir = File.dirname(File.realpath(__FILE__))
+project_dir = File.dirname(bin_dir)
+script_path = File.join(project_dir, 'bun', 'playwright-debug.js')
+
+exec('bun', script_path, url)

package/bin/fez-index

@@ -3,10 +3,22 @@
 require 'pathname'
 require 'json'
 
-# Check if argument is provided
-if ARGV.empty?
-  puts "Usage: #{$0} <directory>"
-  exit 1
+INFO = 'Generate JSON index of files in a directory'
+
+if ARGV[0] == '--info'
+  puts INFO
+  exit 0
+end
+
+if ARGV.empty? || ARGV[0] == '-h' || ARGV[0] == '--help'
+  puts "Usage: fez index <directory>"
+  puts ""
+  puts INFO
+  puts ""
+  puts "Examples:"
+  puts "  fez index demo/fez"
+  puts "  fez index assets/*"
+  exit 0
 end
 
 dir = ARGV[0]