f6fac6c4bc
Fix bin/publish: use correct .env path for rspade_system Fix bin/publish script: prevent grep exit code 1 from terminating script 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
144 lines
2.9 KiB
Markdown
Executable File
144 lines
2.9 KiB
Markdown
Executable File
# 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 }
|
|
``` |