# JQHTML Webpack Loader - LLM Reference

## Overview
The JQHTML webpack loader compiles `.jqhtml` template files into JavaScript modules at build time.

## Installation & Configuration

```javascript
// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.jqhtml$/,
        use: '@jqhtml/webpack-loader'
      }
    ]
  }
};
```

## Usage in Components

```javascript
// Import compiled template
import UserCardTemplate from './UserCard.jqhtml';

// Use in component
class UserCard extends Component {
  render() {
    return UserCardTemplate.render.call(this, this.data);
  }
}
```

## Template File Structure

```html
<!-- UserCard.jqhtml -->
<Define:UserCard as="article">
  <header>
    <h2><%= this.data.name %></h2>
  </header>
  
  <% if (this.data.isActive): %>
    <span class="active">Active</span>
  <% endif; %>
  
  <button $onclick="handleClick">Click Me</button>
</Define:UserCard>
```

## Loader Options

```javascript
{
  loader: '@jqhtml/webpack-loader',
  options: {
    sourceMap: true,  // Generate source maps
    minify: false,    // Minify output (future)
    validate: true    // Validate syntax (future)
  }
}
```

## Build-Time Processing

1. **Parse**: Converts .jqhtml syntax to AST
2. **Transform**: Converts AST to instruction arrays
3. **Generate**: Creates ES module with render function
4. **Export**: Exports template object with render method

## Output Format

The loader generates ES modules:

```javascript
// Generated from UserCard.jqhtml
export default {
  render: function(data) {
    // Instruction array execution
    return jqhtml.processInstructions([
      {tag: ['article', {class: 'user-card'}, false]},
      // ... more instructions
    ], this, data);
  }
};
```

## Integration with JQHTML Core

- Requires `@jqhtml/parser` for compilation
- Generated code requires `@jqhtml/core` at runtime
- Templates are precompiled - no runtime parsing

## Common Patterns

### Component Templates
```javascript
import Template from './Component.jqhtml';

class Component extends jqhtml.Component {
  render() {
    return Template.render.call(this, this.data);
  }
}
```

### Standalone Templates
```javascript
import template from './template.jqhtml';

const html = template.render({ data: values });
$('#container').html(html);
```

## Performance Benefits

- **Build-time compilation**: No runtime parsing overhead
- **Tree shaking**: Unused templates excluded from bundle
- **Source maps**: Debug original .jqhtml files
- **Type checking**: Future TypeScript support planned

## Troubleshooting

### Module Not Found
Ensure `.jqhtml` extension is in resolve.extensions:
```javascript
resolve: {
  extensions: ['.js', '.jqhtml']
}
```

### Template Not Rendering
Check that `@jqhtml/core` is available at runtime:
```javascript
import jqhtml from '@jqhtml/core';
```

### Source Maps Not Working
Enable sourceMap option:
```javascript
options: { sourceMap: true }
```