@jqhtml/webpack-loader

Webpack loader for compiling .jqhtml templates to JavaScript.

Installation

npm install @jqhtml/webpack-loader @jqhtml/parser @jqhtml/core jquery

Configuration

Add the loader to your webpack.config.js:

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

With Options

module.exports = {
    module: {
        rules: [
            {
                test: /\.jqhtml$/,
                use: {
                    loader: '@jqhtml/webpack-loader',
                    options: {
                        sourcemap: true,  // Enable source maps (default: true in development)
                    },
                },
            },
        ],
    },
};

Excluding Directories

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

Usage

1. Set up your entry point

// src/index.js
import $ from 'jquery';
window.jQuery = window.$ = $;

import jqhtml, { boot, init_jquery_plugin } from '@jqhtml/core';
init_jquery_plugin($);

// Import components
import AlertBox from './components/AlertBox.jqhtml';
import Counter from './components/Counter.js';

// Register components
jqhtml.register(AlertBox);
jqhtml.register(Counter);

// Boot when DOM is ready
$(document).ready(async () => {
    await boot();
});

2. Create components

Template-only component

<!-- src/components/AlertBox.jqhtml -->
<Define:AlertBox tag="div" class="alert">
    <strong><%= this.args.title %></strong>
    <p><%= this.args.message %></p>
</Define:AlertBox>

Interactive component with JS class

<!-- src/components/Counter.jqhtml -->
<Define:Counter tag="div" class="counter">
    <button $sid="decrement">-</button>
    <span $sid="display"><%= this.data.count %></span>
    <button $sid="increment">+</button>
</Define:Counter>

// src/components/Counter.js
import { Jqhtml_Component } from '@jqhtml/core';
import CounterTemplate from './Counter.jqhtml';

class Counter extends Jqhtml_Component {
    on_create() {
        this.data.count = this.args.initial || 0;
    }

    on_ready() {
        this.$sid('increment').on('click', () => {
            this.data.count++;
            this.$sid('display').text(this.data.count);
        });
        this.$sid('decrement').on('click', () => {
            this.data.count--;
            this.$sid('display').text(this.data.count);
        });
    }
}

export default Counter;

Note on Minification

If your build uses class name mangling, you must either:

1. Add static component_name = 'Counter' to each component class, or
2. Use explicit registration:

jqhtml.register_template(CounterTemplate);
jqhtml.register_component('Counter', Counter);

3. Use in HTML

<div class="_Component_Init"
     data-component-init-name="MyComponent"
     data-component-args='{"title":"Hello","message":"World"}'>
</div>

The boot() function finds these placeholders and hydrates them into live components.

Full webpack.config.js Example

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.jqhtml$/,
                exclude: /node_modules/,
                use: '@jqhtml/webpack-loader',
            },
        ],
    },
    resolve: {
        extensions: ['.js', '.jqhtml'],
    },
    devServer: {
        static: './dist',
        hot: true,
    },
};

Framework Integrations

For a simpler setup experience, consider using framework-specific packages:

• Laravel: jqhtml/laravel with Vite
• WordPress: jqhtml/wordpress with Vite

Documentation

For complete documentation including template syntax, lifecycle methods, and component patterns:

https://jqhtml.org/

License

MIT - Copyright (c) hansonxyz