rspade_system/node_modules/@jqhtml/webpack-loader/LLM_REFERENCE.md

JQHTML Webpack Loader - LLM Reference

Overview

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

Installation & Configuration

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

Usage in Components

// 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

<!-- 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

{
  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:

// 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

import Template from './Component.jqhtml';

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

Standalone Templates

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:

resolve: {
  extensions: ['.js', '.jqhtml']
}

Template Not Rendering

Check that @jqhtml/core is available at runtime:

import jqhtml from '@jqhtml/core';

Source Maps Not Working

Enable sourceMap option:

options: { sourceMap: true }