Reorganize RSpade directory structure for clarity
Improve Jqhtml_Integration.js documentation with hydration system explanation Add jqhtml-laravel integration packages for traditional Laravel projects 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
root
721
node_modules/@jqhtml/parser/LLM_REFERENCE.md
generated
vendored
721
node_modules/@jqhtml/parser/LLM_REFERENCE.md
generated
vendored
@@ -1,721 +0,0 @@
|
||||
# JQHTML v2 Complete Syntax & Instruction Format Specification
|
||||
|
||||
## Overview
|
||||
|
||||
JQHTML v2 is a composable component templating language for jQuery that compiles to efficient JavaScript instruction arrays. This document defines the complete syntax specification and the instruction format that templates compile to.
|
||||
|
||||
## Critical Concepts
|
||||
|
||||
### The Instruction Array Pattern
|
||||
|
||||
Templates compile to functions that return arrays of rendering instructions:
|
||||
|
||||
```javascript
|
||||
// Every template function returns this structure:
|
||||
function render(Component, data, args, content) {
|
||||
const _output = []; // Instruction array
|
||||
// ... push instructions ...
|
||||
return [_output, this]; // CRITICAL: Returns tuple [instructions, context]
|
||||
}
|
||||
```
|
||||
|
||||
### Why This Pattern Exists
|
||||
|
||||
1. **Deferred Execution**: Instructions can be processed when optimal
|
||||
2. **Single DOM Write**: All HTML built as string, then one `$.html()` call
|
||||
3. **Complex Attribute Handling**: Functions and objects can't go in HTML strings
|
||||
4. **Component Coordination**: Parent/child relationships preserved through execution
|
||||
|
||||
## Template Syntax
|
||||
|
||||
### 1. Component Definition
|
||||
|
||||
Components are defined using the `<Define:>` tag:
|
||||
|
||||
```jqhtml
|
||||
<Define:ComponentName>
|
||||
<!-- Component template -->
|
||||
</Define:ComponentName>
|
||||
```
|
||||
|
||||
### 2. $ Attribute System
|
||||
|
||||
JQHTML uses the `$` prefix for passing data to components as `this.args`:
|
||||
|
||||
#### Syntax Rules
|
||||
|
||||
1. **Quoted = Literal String**
|
||||
```jqhtml
|
||||
$title="User Profile" → args.title = "User Profile"
|
||||
$expr="this.user" → args.expr = "this.user" (the string, not evaluated!)
|
||||
```
|
||||
|
||||
2. **Unquoted = JavaScript Expression**
|
||||
```jqhtml
|
||||
$user=this.user → args.user = {actual user object}
|
||||
$count=42 → args.count = 42
|
||||
$enabled=true → args.enabled = true
|
||||
$handler=this.onClick → args.handler = function reference
|
||||
```
|
||||
|
||||
3. **Parentheses for Complex Expressions**
|
||||
```jqhtml
|
||||
$status=(active ? 'online' : 'offline')
|
||||
$data=({...this.user, modified: true})
|
||||
$items=(this.data.items || [])
|
||||
```
|
||||
|
||||
#### Runtime Behavior
|
||||
|
||||
- All $ attributes become properties in `this.args` (NOT `this.data`)
|
||||
- Stringable values (strings/numbers) appear as `data-*` DOM attributes
|
||||
- Complex values (objects/arrays/functions) accessible only via `this.args`
|
||||
- Component constructor syncs stringable args to DOM
|
||||
|
||||
#### Example
|
||||
|
||||
```jqhtml
|
||||
<!-- Parent component with this.user = {name: "Alice", id: 123} -->
|
||||
<UserCard
|
||||
$user=this.user <!-- args.user = {name: "Alice", id: 123} -->
|
||||
$title="User Profile" <!-- args.title = "User Profile" -->
|
||||
$count=42 <!-- args.count = 42 -->
|
||||
data-role="admin" <!-- args.role = "admin" -->
|
||||
/>
|
||||
```
|
||||
|
||||
Result in UserCard component:
|
||||
- `this.args.user` = {name: "Alice", id: 123} (object)
|
||||
- `this.args.title` = "User Profile" (string)
|
||||
- `this.args.count` = 42 (number)
|
||||
- `this.args.role` = "admin" (from data- attribute)
|
||||
|
||||
DOM shows: `<div data-title="User Profile" data-count="42" data-role="admin">` (no data-user since it's an object)
|
||||
|
||||
### 3. Expressions
|
||||
|
||||
Output JavaScript expressions using `<%= %>` (escaped) or `<%!= %>` (unescaped):
|
||||
|
||||
```jqhtml
|
||||
<%= this.data.title %> <!-- Escaped output -->
|
||||
<%!= this.data.rawHtml %> <!-- Unescaped output -->
|
||||
<%@= this.data.maybeUndefined %> <!-- Escaped with error suppression -->
|
||||
<%!@= this.data.maybeUndefinedHtml %> <!-- Unescaped with error suppression -->
|
||||
```
|
||||
|
||||
### 3. Code Blocks
|
||||
|
||||
Execute JavaScript code using `<% %>`. Regular JavaScript passes through unchanged:
|
||||
|
||||
```jqhtml
|
||||
<% const items = this.data.items || []; %>
|
||||
<% console.log('Rendering:', items.length); %>
|
||||
|
||||
<!-- Regular JavaScript control flow -->
|
||||
<% if (condition) { %>
|
||||
<p>True branch</p>
|
||||
<% } else { %>
|
||||
<p>False branch</p>
|
||||
<% } %>
|
||||
|
||||
<% for (const item of items) { %>
|
||||
<div><%= item.name %></div>
|
||||
<% } %>
|
||||
```
|
||||
|
||||
**Design Rationale**: JavaScript code blocks pass through directly into the generated function. This allows developers to use any JavaScript construct without parser limitations.
|
||||
|
||||
## Component Invocation
|
||||
|
||||
### Basic Component Usage
|
||||
|
||||
Components are invoked using capital-letter tags:
|
||||
|
||||
```jqhtml
|
||||
<UserCard /> <!-- Self-closing, no content -->
|
||||
<UserCard></UserCard> <!-- Empty paired tags, no content -->
|
||||
<UserCard>Default content</UserCard> <!-- With innerHTML content (most common) -->
|
||||
```
|
||||
|
||||
### Property Passing
|
||||
|
||||
```jqhtml
|
||||
<!-- String literals -->
|
||||
<UserCard name="John Doe" role="admin" />
|
||||
|
||||
<!-- String interpolation -->
|
||||
<UserCard title="Welcome <%= this.data.userName %>!" />
|
||||
<div class="card <%= this.data.active ? 'active' : '' %>">
|
||||
|
||||
<!-- Data attributes ($property syntax) -->
|
||||
<UserCard $user=this.data.currentUser $active=true />
|
||||
<!-- Compiles to: data-user and data-active attributes -->
|
||||
|
||||
<!-- Property binding (:property syntax) -->
|
||||
<UserCard :user="currentUser" :settings="{ theme: 'dark' }" />
|
||||
<!-- Compiles to: data-bind-user and data-bind-settings attributes -->
|
||||
|
||||
<!-- Event binding (@event syntax) -->
|
||||
<UserCard @save="handleSave" @cancel="() => closeModal()" />
|
||||
<!-- Compiles to: data-on-save and data-on-cancel attributes -->
|
||||
```
|
||||
|
||||
### $ Attribute System
|
||||
|
||||
JQHTML uses the `$` prefix as a shorthand for data attributes with special handling:
|
||||
|
||||
#### General Case: `$foo="bar"` → `data-foo`
|
||||
|
||||
```jqhtml
|
||||
<div $user=currentUser $theme="dark" $count=42>
|
||||
<!-- Compiles to: -->
|
||||
{tag: ["div", {"data-user": currentUser, "data-theme": "dark", "data-count": 42}, false]}
|
||||
```
|
||||
|
||||
**Runtime Behavior**:
|
||||
1. The attribute is set via jQuery's `.data()` method: `$element.data('user', currentUser)`
|
||||
2. For debugging visibility, if the value is a string or number, it's also set as a DOM attribute
|
||||
3. Objects and arrays are stored in `.data()` but not visible in DOM
|
||||
|
||||
#### Special Case: `$sid="name"` → Scoped IDs
|
||||
|
||||
The `$sid` attribute has special handling for component-scoped element selection:
|
||||
|
||||
```jqhtml
|
||||
<Define:UserCard>
|
||||
<div $sid="container">
|
||||
<input $sid="username" type="text" />
|
||||
<button $sid="submit">Submit</button>
|
||||
</div>
|
||||
</Define:UserCard>
|
||||
```
|
||||
|
||||
**Compilation**:
|
||||
```javascript
|
||||
// In render function (receives _cid parameter)
|
||||
function render(_cid) {
|
||||
const _output = [];
|
||||
_output.push({tag: ["div", {"id": "container:" + _cid}, false]});
|
||||
_output.push({tag: ["input", {"id": "username:" + _cid, "type": "text"}, false]});
|
||||
_output.push({tag: ["button", {"id": "submit:" + _cid}, false]});
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
**Runtime Usage**:
|
||||
```javascript
|
||||
class UserCard extends Component {
|
||||
init() {
|
||||
// Find scoped elements
|
||||
const $username = this.$sid('username'); // Returns $('#username:123')
|
||||
const $submit = this.$sid('submit'); // Returns $('#submit:123')
|
||||
|
||||
$submit.on('click', () => {
|
||||
const value = $username.val();
|
||||
// ...
|
||||
});
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Lexical Scoping of `_cid`
|
||||
|
||||
Component IDs flow through lexical scope naturally:
|
||||
|
||||
```jqhtml
|
||||
<Define:ParentComponent>
|
||||
<div $sid="parent-element"> <!-- Gets ParentComponent's _cid -->
|
||||
<ChildComponent>
|
||||
<div $sid="slot-element" /> <!-- Also gets ParentComponent's _cid -->
|
||||
</ChildComponent>
|
||||
</div>
|
||||
</Define:ParentComponent>
|
||||
|
||||
<Define:ChildComponent>
|
||||
<div $sid="child-element"> <!-- Gets ChildComponent's _cid -->
|
||||
<%= content() %> <!-- Slot content preserves parent's _cid -->
|
||||
</div>
|
||||
</Define:ChildComponent>
|
||||
```
|
||||
|
||||
This happens because content functions capture their defining scope:
|
||||
```javascript
|
||||
// ParentComponent render
|
||||
function render(_cid) { // Parent's _cid = 123
|
||||
_output.push({comp: ["ChildComponent", {}, () => {
|
||||
// This arrow function captures Parent's _cid
|
||||
const _output = [];
|
||||
_output.push({tag: ["div", {"id": "slot-element:" + _cid}, false]}); // slot-element:123
|
||||
return [_output, this];
|
||||
}]});
|
||||
}
|
||||
|
||||
// ChildComponent render
|
||||
function render(_cid) { // Child's _cid = 456
|
||||
_output.push({tag: ["div", {"id": "child-element:" + _cid}, false]}); // child-element:456
|
||||
}
|
||||
```
|
||||
|
||||
#### Attribute Value Interpolation
|
||||
|
||||
Within quoted attribute values, `<%= %>` and `<%!= %>` perform string interpolation:
|
||||
|
||||
```jqhtml
|
||||
<!-- Both of these work identically in attributes -->
|
||||
<div title="User: <%= user.name %>">
|
||||
<div title="User: <%!= user.name %>">
|
||||
|
||||
<!-- Compiles to -->
|
||||
{tag: ["div", {"title": "User: " + user.name}, false]}
|
||||
```
|
||||
|
||||
**Design Rationale**: Inside attribute values, HTML escaping is inappropriate because we're building a JavaScript string, not HTML content. The JavaScript string serialization handles all necessary escaping (quotes, backslashes, etc.). This is semantically different from top-level `<%= %>` which outputs to HTML and requires escaping.
|
||||
|
||||
## Binding Syntax (v2)
|
||||
|
||||
### Property Binding with `:`
|
||||
|
||||
The `:` prefix creates dynamic property bindings that are always evaluated as JavaScript expressions:
|
||||
|
||||
```jqhtml
|
||||
<!-- Simple property binding -->
|
||||
<input :value="formData.name" :disabled="isLoading" />
|
||||
|
||||
<!-- Complex expressions -->
|
||||
<div :style="{ color: textColor, fontSize: size + 'px' }" />
|
||||
|
||||
<!-- Method calls -->
|
||||
<select :options="getOptions(category)" />
|
||||
```
|
||||
|
||||
**Compilation**:
|
||||
- `:prop="expr"` → `{"data-bind-prop": expr}` (no quotes around expr)
|
||||
- Values are ALWAYS treated as JavaScript expressions
|
||||
- Even quoted strings like `:prop="value"` become expressions
|
||||
|
||||
### Event Binding with `@`
|
||||
|
||||
The `@` prefix binds event handlers:
|
||||
|
||||
```jqhtml
|
||||
<!-- Simple handler -->
|
||||
<button @click="handleClick">Click Me</button>
|
||||
|
||||
<!-- With arguments -->
|
||||
<button @click="deleteItem(item.id)">Delete</button>
|
||||
|
||||
<!-- Inline arrow function -->
|
||||
<input @input="(e) => updateValue(e.target.value)" />
|
||||
|
||||
<!-- Multiple events -->
|
||||
<form @submit="save" @reset="clear">
|
||||
```
|
||||
|
||||
**Compilation**:
|
||||
- `@event="handler"` → `{"data-on-event": handler}`
|
||||
- Handlers are JavaScript expressions (function references or inline functions)
|
||||
|
||||
### Binding Design Rationale
|
||||
|
||||
1. **Vue.js Familiarity**: Uses the same `:prop` and `@event` syntax as Vue.js
|
||||
2. **Always Expressions**: Unlike `$` attributes which distinguish strings vs expressions, bindings are ALWAYS expressions
|
||||
3. **Runtime Processing**: The runtime will need to handle these specially:
|
||||
- `data-bind-*` attributes set properties dynamically
|
||||
- `data-on-*` attributes attach event listeners
|
||||
4. **Separate from `$` System**: Bindings serve a different purpose than data attributes
|
||||
|
||||
## Component Content & innerHTML (Primary Pattern)
|
||||
|
||||
### Using `content()` Function - The Most Common Approach
|
||||
|
||||
**The vast majority of components will use the simple `content()` function to output innerHTML passed by parent components.** This is the primary, recommended pattern for component composition:
|
||||
|
||||
```jqhtml
|
||||
<!-- Define a component that outputs innerHTML -->
|
||||
<Define:Container>
|
||||
<div class="container">
|
||||
<div class="container-body">
|
||||
<%= content() %> <!-- Outputs whatever innerHTML was passed -->
|
||||
</div>
|
||||
</div>
|
||||
</Define:Container>
|
||||
|
||||
<!-- Usage - just pass innerHTML like regular HTML -->
|
||||
<Container>
|
||||
<p>This is the content</p>
|
||||
<span>More content here</span>
|
||||
<!-- Any HTML/components can go here -->
|
||||
</Container>
|
||||
```
|
||||
|
||||
### Common Patterns with `content()`
|
||||
|
||||
```jqhtml
|
||||
<!-- Card component with innerHTML -->
|
||||
<Define:Card>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<%= content() %> <!-- Simple innerHTML output -->
|
||||
</div>
|
||||
</div>
|
||||
</Define:Card>
|
||||
|
||||
<!-- Panel with conditional innerHTML -->
|
||||
<Define:Panel>
|
||||
<div class="panel">
|
||||
<% if (this.args.title): %>
|
||||
<div class="panel-header"><%= this.args.title %></div>
|
||||
<% endif; %>
|
||||
<div class="panel-body">
|
||||
<%= content() %>
|
||||
</div>
|
||||
</div>
|
||||
</Define:Panel>
|
||||
|
||||
<!-- Wrapper that adds behavior to innerHTML -->
|
||||
<Define:Collapsible>
|
||||
<div class="collapsible" $sid="wrapper">
|
||||
<button $onclick="toggle">Toggle</button>
|
||||
<div class="content" $sid="content">
|
||||
<%= content() %> <!-- Wrapped innerHTML -->
|
||||
</div>
|
||||
</div>
|
||||
</Define:Collapsible>
|
||||
```
|
||||
|
||||
### How `content()` Works
|
||||
|
||||
1. **Parent passes innerHTML**: When invoking `<Component>innerHTML here</Component>`
|
||||
2. **Template receives it**: The `content` parameter in render function contains the innerHTML
|
||||
3. **Output with `<%= content() %>`**: Call the function to output the HTML where needed
|
||||
4. **No special syntax needed**: Just regular HTML/components as children
|
||||
|
||||
### Important Rules
|
||||
|
||||
- **No mixing**: If a component uses ANY slots (`<#slotname>`), ALL content must be in slots
|
||||
- **Most components don't need slots**: The simple `content()` pattern handles 95% of use cases
|
||||
- **Slots are for advanced scenarios**: Only use slots when you need multiple named content areas
|
||||
|
||||
## Slot System (Advanced Feature)
|
||||
|
||||
**Note: Slots are an advanced feature for specific use cases. Most components should use the simpler `content()` pattern shown above.**
|
||||
|
||||
### When to Use Slots vs `content()`
|
||||
|
||||
Use `content()` (recommended for most cases):
|
||||
- Single content area
|
||||
- Wrapping/decorating content
|
||||
- Simple component composition
|
||||
- Standard container components
|
||||
|
||||
Use slots (advanced cases only):
|
||||
- Multiple distinct content areas (header/body/footer)
|
||||
- Complex layouts with specific placement
|
||||
- Data table templates with row/header/footer sections
|
||||
|
||||
### 1. Named Slots
|
||||
|
||||
Pass content to specific slots using `<#slotname>` syntax:
|
||||
|
||||
```jqhtml
|
||||
<DataTable $items=this.data.users>
|
||||
<#header>
|
||||
<th>ID</th>
|
||||
<th>Name</th>
|
||||
<th>Email</th>
|
||||
</#header>
|
||||
|
||||
<#row>
|
||||
<td><%= row.id %></td>
|
||||
<td><%= row.name %></td>
|
||||
<td><%= row.email %></td>
|
||||
</#row>
|
||||
|
||||
<#empty /> <!-- Self-closing slot -->
|
||||
</DataTable>
|
||||
```
|
||||
|
||||
### 2. Accessing Slots in Components (Advanced)
|
||||
|
||||
For the rare cases where slots are needed, components can check for and render specific named slots:
|
||||
|
||||
```jqhtml
|
||||
<Define:Card>
|
||||
<div class="card">
|
||||
<!-- Render default slot -->
|
||||
<%= content() %>
|
||||
|
||||
<!-- Render named slot -->
|
||||
<% if (content('footer')) { %>
|
||||
<footer>
|
||||
<%= content('footer', { timestamp: new Date() }) %>
|
||||
</footer>
|
||||
<% } %>
|
||||
</div>
|
||||
</Define:Card>
|
||||
```
|
||||
|
||||
## Instruction Format Reference
|
||||
|
||||
### Instruction Types
|
||||
|
||||
Templates compile to three instruction types:
|
||||
|
||||
1. **`{tag: [...]}`** - HTML elements
|
||||
2. **`{comp: [...]}`** - Component invocations
|
||||
3. **`{slot: [...]}`** - Slot definitions
|
||||
|
||||
### 1. Tag Instruction
|
||||
|
||||
```javascript
|
||||
{tag: [tagname, attributes, self_closing]}
|
||||
```
|
||||
|
||||
**Format:**
|
||||
- `tagname`: String - HTML tag name
|
||||
- `attributes`: Object - Tag attributes (may contain functions!)
|
||||
- `self_closing`: Boolean - Whether tag self-closes
|
||||
|
||||
**Examples:**
|
||||
```javascript
|
||||
{tag: ["div", {"class": "user-card"}, false]}
|
||||
{tag: ["img", {"src": "/avatar.jpg", "alt": "User"}, true]}
|
||||
{tag: ["button", {"onclick": this.handleClick}, false]}
|
||||
{tag: ["div", {"data-sid": "header"}, false]} // $sid becomes data-id
|
||||
```
|
||||
|
||||
### 2. Component Instruction
|
||||
|
||||
```javascript
|
||||
{comp: [component_name, attributes, optional_innerhtml_function]}
|
||||
```
|
||||
|
||||
**Format:**
|
||||
- `component_name`: String - Component to instantiate
|
||||
- `attributes`: Object - Props/attributes to pass
|
||||
- `optional_innerhtml_function`: Function - Contains slots and default content
|
||||
|
||||
**CRITICAL**: When a component invocation contains slots or any child content, it MUST use the three-parameter form with a content function. Slots are NOT separate instructions after the component - they are contained within the component's content function.
|
||||
|
||||
**Examples:**
|
||||
```javascript
|
||||
// Simple component (no children)
|
||||
{comp: ["UserAvatar", {"data-userId": this.data.id}]}
|
||||
|
||||
// Component with slots
|
||||
{comp: ["DataTable", {"data-rows": this.data.items}, (DataTable) => {
|
||||
const _output = [];
|
||||
_output.push({slot: ["header", {}, (header) => {
|
||||
const _output = [];
|
||||
_output.push({tag: ["th", {}, false]});
|
||||
_output.push("Name");
|
||||
_output.push("</th>");
|
||||
return [_output, this];
|
||||
}]});
|
||||
return [_output, this];
|
||||
}]}
|
||||
```
|
||||
|
||||
### 3. Slot Instruction
|
||||
|
||||
```javascript
|
||||
{slot: [slot_name, attributes, render_function]}
|
||||
```
|
||||
|
||||
**Format:**
|
||||
- `slot_name`: String - Slot identifier
|
||||
- `attributes`: Object - Props for slot
|
||||
- `render_function`: Function - Returns `[instructions, context]`
|
||||
|
||||
**Example:**
|
||||
```javascript
|
||||
{slot: ["actions", {}, (actions) => {
|
||||
const _output = [];
|
||||
_output.push({tag: ["button", {"onclick": this.delete}, false]});
|
||||
_output.push("Delete");
|
||||
_output.push("</button>");
|
||||
return [_output, this];
|
||||
}]}
|
||||
```
|
||||
|
||||
### 4. String Output
|
||||
|
||||
Raw strings are pushed directly:
|
||||
|
||||
```javascript
|
||||
_output.push({tag: ["div", {}, false]}); // Opening tag (instruction)
|
||||
_output.push("Hello, "); // Raw text
|
||||
_output.push(html(this.data.name)); // Escaped text
|
||||
_output.push("</div>"); // Closing tag (raw string!)
|
||||
```
|
||||
|
||||
**CRITICAL**: Closing tags are ALWAYS raw strings, not instructions.
|
||||
|
||||
## Context Preservation
|
||||
|
||||
### v1 Pattern: `_that = this`
|
||||
|
||||
The v1 pattern preserves component context through nested functions:
|
||||
|
||||
```javascript
|
||||
function render(Component, data, args, content) {
|
||||
let _that = this; // Preserve component instance
|
||||
let _output = [];
|
||||
|
||||
_output.push({comp: ["Child", {}, function(Child) {
|
||||
let _output = [];
|
||||
// _that still refers to parent component
|
||||
_output.push(html(_that.data.value));
|
||||
return [_output, _that];
|
||||
}.bind(_that)]});
|
||||
|
||||
return [_output, _that];
|
||||
}
|
||||
```
|
||||
|
||||
### v2 Pattern: Arrow Functions
|
||||
|
||||
v2 uses arrow functions for natural context preservation:
|
||||
|
||||
```javascript
|
||||
function render(Component, data, args, content) {
|
||||
const _output = [];
|
||||
|
||||
_output.push({comp: ["Child", {}, (Child) => {
|
||||
const _output = [];
|
||||
// 'this' refers to parent component naturally
|
||||
_output.push(html(this.data.value));
|
||||
return [_output, this];
|
||||
}]});
|
||||
|
||||
return [_output, this];
|
||||
}
|
||||
```
|
||||
|
||||
## Runtime Processing
|
||||
|
||||
### Phase 1: Instruction Execution
|
||||
|
||||
```javascript
|
||||
let [instructions, context] = template.render.bind(component)(
|
||||
component,
|
||||
component.data,
|
||||
args,
|
||||
content_fn
|
||||
);
|
||||
```
|
||||
|
||||
### Phase 2: Instruction Processing
|
||||
|
||||
1. **Build HTML**: Process all string and simple tag instructions
|
||||
2. **Track Complex Elements**: Store elements with function attributes
|
||||
3. **Single DOM Write**: `component.$.html(html.join(''))`
|
||||
4. **Apply Attributes**: Attach event handlers and complex attributes
|
||||
5. **Initialize Components**: Create child component instances
|
||||
|
||||
## Self-Closing HTML Tags
|
||||
|
||||
The following HTML tags are automatically treated as self-closing:
|
||||
- `area`, `base`, `br`, `col`, `embed`, `hr`, `img`, `input`
|
||||
- `link`, `meta`, `param`, `source`, `track`, `wbr`
|
||||
|
||||
## Complete Example
|
||||
|
||||
### Template
|
||||
|
||||
```jqhtml
|
||||
<Define:UserDashboard>
|
||||
<div class="dashboard">
|
||||
<Header $title="User Management">
|
||||
<#actions>
|
||||
<button $onclick=this.addUser>Add User</button>
|
||||
</#actions>
|
||||
</Header>
|
||||
|
||||
<% if (this.data.loading): %>
|
||||
<LoadingSpinner />
|
||||
<% else: %>
|
||||
<UserTable $users=this.data.users>
|
||||
<#header>
|
||||
<th>ID</th>
|
||||
<th>Name</th>
|
||||
<th>Actions</th>
|
||||
</#header>
|
||||
|
||||
<#row>
|
||||
<td><%= row.id %></td>
|
||||
<td><%= row.name %></td>
|
||||
<td>
|
||||
<button $onclick=this.editUser>Edit</button>
|
||||
</td>
|
||||
</#row>
|
||||
</UserTable>
|
||||
<% endif; %>
|
||||
</div>
|
||||
</Define:UserDashboard>
|
||||
```
|
||||
|
||||
### Compiled Output Structure
|
||||
|
||||
```javascript
|
||||
function render(Component, data, args, content) {
|
||||
const _output = [];
|
||||
|
||||
_output.push({tag: ["div", {"class": "dashboard"}, false]});
|
||||
|
||||
// Header component with slots
|
||||
_output.push({comp: ["Header", {"data-title": "User Management"}, (Header) => {
|
||||
const _output = [];
|
||||
_output.push({slot: ["actions", {}, (actions) => {
|
||||
const _output = [];
|
||||
_output.push({tag: ["button", {"data-onclick": this.addUser}, false]});
|
||||
_output.push("Add User");
|
||||
_output.push("</button>");
|
||||
return [_output, this];
|
||||
}]});
|
||||
return [_output, this];
|
||||
}]});
|
||||
|
||||
// ... rest of compilation
|
||||
|
||||
_output.push("</div>");
|
||||
return [_output, this];
|
||||
}
|
||||
```
|
||||
|
||||
## Component CSS Classes
|
||||
|
||||
When components are rendered, the runtime automatically applies CSS classes based on the component's inheritance hierarchy:
|
||||
|
||||
```html
|
||||
<!-- For a UserCard extending BaseCard extending Component -->
|
||||
<div class="UserCard BaseCard Component" ...>
|
||||
```
|
||||
|
||||
This enables CSS targeting at any level of the hierarchy:
|
||||
```css
|
||||
.Component { /* all components */ }
|
||||
.UserCard { /* specific component type */ }
|
||||
.BaseCard { /* all cards */ }
|
||||
```
|
||||
|
||||
**Implementation Note**: The Component base class automatically applies these classes during initialization. This feature works regardless of minification since class names are preserved through the component's constructor name.
|
||||
|
||||
## Critical Implementation Rules
|
||||
|
||||
### What MUST Be Preserved
|
||||
|
||||
1. **Instruction Array Structure**: The `{tag:...}`, `{comp:...}`, `{slot:...}` format
|
||||
2. **Return Tuple**: Functions MUST return `[instructions, context]`
|
||||
3. **Deferred Component Init**: Components render as placeholders first
|
||||
4. **Single DOM Write**: Build all HTML, write once
|
||||
5. **Content Function**: Parent components receive content function to access slots
|
||||
|
||||
### Common Pitfalls
|
||||
|
||||
1. **Forgetting Return Format**: Must return `[array, context]`, not just array
|
||||
2. **String vs Instruction**: Closing tags are strings, opening tags are instructions
|
||||
3. **Context Loss**: Without proper binding, nested functions lose component reference
|
||||
4. **Direct DOM Manipulation**: Never manipulate DOM during instruction building
|
||||
5. **Missing html() Escaping**: User content must be escaped
|
||||
6. **Slots Outside Components**: Slots must be inside component content functions
|
||||
449
node_modules/@jqhtml/parser/README.md
generated
vendored
449
node_modules/@jqhtml/parser/README.md
generated
vendored
@@ -1,445 +1,30 @@
|
||||
# JQHTML Parser
|
||||
# @jqhtml/parser
|
||||
|
||||
The JQHTML parser converts template files into JavaScript functions that use the component system.
|
||||
Compiles `.jqhtml` templates into JavaScript for the JQHTML component framework.
|
||||
|
||||
## Quick Start - Common Patterns
|
||||
|
||||
### Basic Component with innerHTML (Most Common)
|
||||
|
||||
```jqhtml
|
||||
<!-- Define a component with default attributes -->
|
||||
<Define:Card tag="article" class="card" style="padding: 10px">
|
||||
<div class="card-body">
|
||||
<%= content() %> <!-- Outputs whatever innerHTML was passed -->
|
||||
</div>
|
||||
</Define:Card>
|
||||
|
||||
<!-- Usage - just pass innerHTML like regular HTML -->
|
||||
<Card class="featured">
|
||||
<h3>Card Title</h3>
|
||||
<p>This is the card content.</p>
|
||||
<button>Click me</button>
|
||||
</Card>
|
||||
|
||||
<!-- Result: <article class="card featured Card Jqhtml_Component" style="padding: 10px"> -->
|
||||
```bash
|
||||
npx jqhtml-compile compile components/*.jqhtml -o bundle.js --sourcemap
|
||||
```
|
||||
|
||||
This `content()` pattern is the **primary way** to compose components in JQHTML. It works like regular HTML - the innerHTML you pass gets rendered where `content()` is called.
|
||||
Templates look like HTML with embedded JavaScript:
|
||||
|
||||
### Container Component Example
|
||||
|
||||
```jqhtml
|
||||
<!-- A container with default size that can be overridden -->
|
||||
<Define:Container $size="medium" class="container">
|
||||
<div class="container-inner <%= this.args.size %>">
|
||||
<%= content() %> <!-- Simple innerHTML output -->
|
||||
</div>
|
||||
</Define:Container>
|
||||
|
||||
<!-- Usage - override the default size -->
|
||||
<Container $size="large">
|
||||
<p>Any content here</p>
|
||||
<UserList />
|
||||
<Footer />
|
||||
</Container>
|
||||
```
|
||||
|
||||
**Note:** Slots (`<#slotname>`) are an advanced feature only needed when you have multiple distinct content areas. For 95% of use cases, the simple `content()` pattern shown above is recommended.
|
||||
|
||||
### Define Tag Attributes (Component Configuration)
|
||||
|
||||
Define tags support three types of attributes for configuring components:
|
||||
|
||||
```jqhtml
|
||||
<Define:Contacts_DataGrid
|
||||
extends="DataGrid_Abstract"
|
||||
$ajax_endpoint=Frontend_Contacts_Controller.datagrid_fetch
|
||||
$per_page=25
|
||||
class="card DataGrid">
|
||||
<div>Content here</div>
|
||||
</Define:Contacts_DataGrid>
|
||||
```
|
||||
|
||||
**1. `extends=""` - Template Inheritance**
|
||||
Explicitly declare parent template for inheritance (without requiring a JavaScript class).
|
||||
|
||||
**2. `$property=value` - Default Args**
|
||||
Set default values for `this.args` that component invocations can override:
|
||||
- **Quoted**: `$user_id="123"` → String literal `"123"`
|
||||
- **Unquoted**: `$handler=MyController.fetch` → Raw JavaScript expression
|
||||
- These become defaults; invocations can override them
|
||||
|
||||
**3. Regular Attributes**
|
||||
Standard HTML attributes like `class=""`, `tag=""` applied to root element.
|
||||
|
||||
**Generated Output:**
|
||||
```javascript
|
||||
{
|
||||
name: 'Contacts_DataGrid',
|
||||
tag: 'div',
|
||||
defaultAttributes: {"class": "card DataGrid"},
|
||||
defineArgs: {"ajax_endpoint": Frontend_Contacts_Controller.datagrid_fetch, "per_page": "25"},
|
||||
extends: 'DataGrid_Abstract',
|
||||
render: function() { ... }
|
||||
}
|
||||
```
|
||||
|
||||
### Slot-Based Template Inheritance
|
||||
|
||||
When a template contains **ONLY slots** (no HTML), it automatically inherits the parent class template:
|
||||
|
||||
```jqhtml
|
||||
<!-- Parent: DataGrid_Abstract.jqhtml -->
|
||||
<Define:DataGrid_Abstract>
|
||||
<table>
|
||||
<thead><tr><%= content('header') %></tr></thead>
|
||||
<tbody>
|
||||
<% for (let record of this.data.records) { %>
|
||||
<tr><%= content('row', record) %></tr>
|
||||
<% } %>
|
||||
</tbody>
|
||||
</table>
|
||||
</Define:DataGrid_Abstract>
|
||||
|
||||
<!-- Child: Users_DataGrid.jqhtml (slot-only) -->
|
||||
<Define:Users_DataGrid>
|
||||
<#header>
|
||||
<th>ID</th><th>Name</th><th>Email</th>
|
||||
</#header>
|
||||
<#row>
|
||||
<td><%= row.id %></td>
|
||||
<td><%= row.name %></td>
|
||||
<td><%= row.email %></td>
|
||||
</#row>
|
||||
</Define:Users_DataGrid>
|
||||
```
|
||||
|
||||
The parser detects slot-only templates and generates `{_slots: {...}}` format. Runtime walks prototype chain to find parent templates. **Data passing**: `content('row', record)` passes data to slot parameter `function(row) { ... }`. **Reserved words**: Slot names cannot be JavaScript keywords (`function`, `if`, etc.) - parser rejects with fatal error.
|
||||
|
||||
## Lexer (Task 1 - COMPLETE)
|
||||
|
||||
The lexer is the first stage of the parser. It converts raw JQHTML template text into a stream of tokens.
|
||||
|
||||
### Features
|
||||
|
||||
- **No regex** - Uses simple character scanning for maintainability
|
||||
- **Position tracking** - Every token includes line, column, and absolute positions for source maps
|
||||
- **Simple token types** - Clear, unambiguous token categories
|
||||
- **Efficient scanning** - Single pass through the input
|
||||
|
||||
### Token Types
|
||||
|
||||
- `TEXT` - Plain HTML/text content
|
||||
- `EXPRESSION_START` - `<%=` opening tag
|
||||
- `CODE_START` - `<%` opening tag
|
||||
- `TAG_END` - `%>` closing tag
|
||||
- `DEFINE_START`, `DEFINE_END` - Component definition tags
|
||||
- `COMPONENT_NAME` - Component identifier
|
||||
- `JAVASCRIPT` - JavaScript code within tags
|
||||
|
||||
### Usage
|
||||
|
||||
```typescript
|
||||
import { Lexer } from '@jqhtml/parser';
|
||||
|
||||
const template = `
|
||||
<Define:MyComponent>
|
||||
<h1><%= this.data.title %></h1>
|
||||
<% if (this.data.show) { %>
|
||||
<p>Content here</p>
|
||||
```html
|
||||
<Define:Product_Card class="card">
|
||||
<h3><%= this.data.name %></h3>
|
||||
<% if (this.data.on_sale) { %>
|
||||
<span class="badge">Sale!</span>
|
||||
<% } %>
|
||||
</Define:MyComponent>
|
||||
`;
|
||||
|
||||
const lexer = new Lexer(template);
|
||||
const tokens = lexer.tokenize();
|
||||
|
||||
// tokens is an array of Token objects with:
|
||||
// - type: TokenType
|
||||
// - value: string
|
||||
// - line: number
|
||||
// - column: number
|
||||
// - start: number (absolute position)
|
||||
// - end: number
|
||||
</Define:Product_Card>
|
||||
```
|
||||
|
||||
### Testing
|
||||
The parser handles the template syntax - `<Define:>` blocks, `<%= %>` expressions, control flow, slots, event bindings. Output is JavaScript that the `@jqhtml/core` runtime understands.
|
||||
|
||||
```bash
|
||||
# Build the parser
|
||||
npm run build
|
||||
## Status
|
||||
|
||||
# Run the test suite
|
||||
node test-lexer.js
|
||||
Alpha release. Works well enough that I use it daily, but documentation is sparse and you might hit edge cases. Webpack loader and proper docs coming soon.
|
||||
|
||||
# Run the demo
|
||||
node demo-lexer.js
|
||||
```
|
||||
Found a bug or built something cool? Drop me a line.
|
||||
|
||||
### Implementation Notes
|
||||
---
|
||||
|
||||
The lexer uses a simple state machine approach:
|
||||
|
||||
1. **Text scanning** - Default mode, captures plain text
|
||||
2. **Tag detection** - Looks for `<%`, `<%=`, `%>` sequences
|
||||
3. **Keyword matching** - After `<%`, checks for control flow keywords
|
||||
4. **JavaScript capture** - Captures code between tags
|
||||
5. **Position tracking** - Updates line/column for every character
|
||||
|
||||
No regex patterns are used. All scanning is done with:
|
||||
- `match_sequence()` - Check for exact string match
|
||||
- `match_keyword()` - Check for keyword with word boundary
|
||||
- Character-by-character advancement
|
||||
|
||||
## Parser/AST Builder (Task 2 - COMPLETE)
|
||||
|
||||
The parser takes the token stream from the lexer and builds an Abstract Syntax Tree (AST) representing the template structure.
|
||||
|
||||
### Features
|
||||
|
||||
- **Recursive descent parsing** - Simple, predictable parsing algorithm
|
||||
- **Clear node types** - Each AST node represents a specific construct
|
||||
- **Position preservation** - All nodes include source positions
|
||||
- **Error reporting** - Clear messages with line/column information
|
||||
|
||||
### AST Node Types
|
||||
|
||||
- `Program` - Root node containing all top-level definitions
|
||||
- `ComponentDefinition` - Component template definition
|
||||
- `Text` - Plain text/HTML content
|
||||
- `Expression` - JavaScript expressions (`<%= ... %>`)
|
||||
- `IfStatement` - Conditional rendering with optional else
|
||||
- `ForStatement` - Loop constructs
|
||||
- `CodeBlock` - Generic JavaScript code blocks
|
||||
|
||||
### Usage
|
||||
|
||||
```typescript
|
||||
import { Lexer, Parser } from '@jqhtml/parser';
|
||||
|
||||
const template = `
|
||||
<Define:Card>
|
||||
<div class="card">
|
||||
<h3><%= title %></h3>
|
||||
<% if (showContent) { %>
|
||||
<p><%= content %></p>
|
||||
<% } %>
|
||||
</div>
|
||||
</Define:Card>
|
||||
`;
|
||||
|
||||
// Tokenize
|
||||
const lexer = new Lexer(template);
|
||||
const tokens = lexer.tokenize();
|
||||
|
||||
// Parse to AST
|
||||
const parser = new Parser(tokens);
|
||||
const ast = parser.parse();
|
||||
|
||||
// AST structure:
|
||||
// {
|
||||
// type: 'Program',
|
||||
// body: [{
|
||||
// type: 'ComponentDefinition',
|
||||
// name: 'Card',
|
||||
// body: [...]
|
||||
// }]
|
||||
// }
|
||||
```
|
||||
|
||||
### Testing
|
||||
|
||||
```bash
|
||||
# Run the parser test suite
|
||||
node test-parser.js
|
||||
|
||||
# Run the interactive demo
|
||||
node demo-parser.js
|
||||
```
|
||||
|
||||
### Implementation Notes
|
||||
|
||||
The parser uses straightforward techniques:
|
||||
|
||||
1. **Token consumption** - Advances through tokens one at a time
|
||||
2. **Lookahead** - Peeks at upcoming tokens to decide parsing path
|
||||
3. **Context tracking** - Knows when inside components, loops, etc.
|
||||
4. **Error recovery** - Provides helpful error messages
|
||||
|
||||
No parser generators or complex algorithms - just simple recursive functions that build nodes.
|
||||
|
||||
## Code Generator (Task 3 - COMPLETE)
|
||||
|
||||
The code generator takes the AST and produces executable JavaScript functions that work with the JQHTML component system.
|
||||
|
||||
### Features
|
||||
|
||||
- **jQuery-based DOM manipulation** - Generates efficient jQuery code
|
||||
- **Component render functions** - Each template becomes a render function
|
||||
- **Control flow handling** - Properly handles if/else and for loops
|
||||
- **Expression evaluation** - Safely evaluates and renders expressions
|
||||
- **Colon syntax support** - Strips trailing colons from control statements
|
||||
|
||||
### Generated Code Structure
|
||||
|
||||
```javascript
|
||||
// Each component gets a render function
|
||||
jqhtml_components.set('ComponentName', {
|
||||
name: 'ComponentName',
|
||||
render: function render() {
|
||||
const $root = $('<div></div>');
|
||||
const $current = $root;
|
||||
|
||||
// Generated DOM manipulation code here
|
||||
|
||||
return $root.children();
|
||||
},
|
||||
dependencies: []
|
||||
});
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
```typescript
|
||||
import { Lexer, Parser, CodeGenerator } from '@jqhtml/parser';
|
||||
|
||||
const template = `
|
||||
<Define:MyComponent>
|
||||
<h1><%= this.data.title %></h1>
|
||||
<% if (this.data.items) { %>
|
||||
<ul>
|
||||
<% for (const item of this.data.items) { %>
|
||||
<li><%= item %></li>
|
||||
<% } %>
|
||||
</ul>
|
||||
<% } %>
|
||||
</Define:MyComponent>
|
||||
`;
|
||||
|
||||
// Generate the code
|
||||
const lexer = new Lexer(template);
|
||||
const tokens = lexer.tokenize();
|
||||
const parser = new Parser(tokens);
|
||||
const ast = parser.parse();
|
||||
const generator = new CodeGenerator();
|
||||
const result = generator.generate(ast);
|
||||
|
||||
// Use in a component
|
||||
class MyComponent extends Component {
|
||||
async on_render() {
|
||||
const template = result.components.get('MyComponent');
|
||||
const elements = template.render.call(this);
|
||||
this.$.append(elements);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Testing
|
||||
|
||||
```bash
|
||||
# Run the code generator test suite
|
||||
node test-codegen.js
|
||||
|
||||
# Run the interactive demo
|
||||
node demo-codegen.js
|
||||
|
||||
# View the integration example
|
||||
# Open example-integration.html in a browser
|
||||
```
|
||||
|
||||
### Implementation Notes
|
||||
|
||||
The code generator:
|
||||
|
||||
1. **Traverses the AST** - Visits each node and generates appropriate code
|
||||
2. **Maintains context** - Tracks current jQuery element for appending
|
||||
3. **Handles nesting** - For loops create temporary containers
|
||||
4. **Strips syntax** - Removes trailing colons from control flow
|
||||
5. **Escapes strings** - Properly escapes text content for JavaScript
|
||||
|
||||
### v1 JavaScript Compilation Analysis
|
||||
|
||||
A comprehensive analysis of how JQHTML v1 compiles templates to JavaScript has been documented in [JQHTML_V1_JAVASCRIPT_COMPILATION_PATTERNS.md](../../JQHTML_V1_JAVASCRIPT_COMPILATION_PATTERNS.md). This analysis reveals:
|
||||
|
||||
- **Instruction-based output**: Templates compile to arrays of rendering instructions
|
||||
- **Three instruction types**: `{tag:...}`, `{comp:...}`, `{block:...}`
|
||||
- **Context preservation**: The `_that = this` pattern for nested functions
|
||||
- **Single-pass DOM construction**: Efficient rendering with one `$.html()` call
|
||||
- **Deferred component initialization**: Two-phase process for component creation
|
||||
|
||||
These patterns inform v2 implementation decisions, particularly around maintaining the efficient instruction-based architecture while modernizing the JavaScript output.
|
||||
|
||||
## Implementation Status (December 2024)
|
||||
|
||||
### ✅ Completed Tasks
|
||||
|
||||
1. **Lexer** - Full tokenization with position tracking
|
||||
2. **Parser** - AST generation with all v2 syntax
|
||||
3. **Code Generator** - Instruction array generation
|
||||
4. **Component Integration** - Runtime integration complete
|
||||
5. **Slot System** - `<#name>` syntax fully implemented
|
||||
6. **Nested Components** - `<ComponentName>` recognition
|
||||
7. **Binding Syntax** - `:prop` and `@event` support
|
||||
|
||||
### Current Features
|
||||
|
||||
- **Template Syntax**: HTML with embedded JavaScript
|
||||
- **Control Flow**: `if/else/elseif` and `for` loops (both colon and brace styles)
|
||||
- **Components**: `<Define:Name>` definitions and `<ComponentName>` invocations
|
||||
- **Slots**: `<#name>content</#name>` and `<#name />` syntax
|
||||
- **Expressions**: `<%= expression %>` for output
|
||||
- **Bindings**: `:text`, `:value`, `:class`, `:style` for data binding
|
||||
- **Events**: `@click`, `@change`, etc. for event handlers
|
||||
- **Scoped IDs**: `$sid` attribute for component-scoped IDs
|
||||
|
||||
### Instruction Format
|
||||
|
||||
The parser generates v1-compatible instruction arrays:
|
||||
|
||||
```javascript
|
||||
// HTML tags
|
||||
{tag: ["div", {"class": "card"}, false]} // open tag
|
||||
{tag: ["div", {}, true]} // close tag
|
||||
|
||||
// Components
|
||||
{comp: ["UserCard", {name: "John"}]}
|
||||
|
||||
// Slots
|
||||
{slot: ["header", {}, (props) => {
|
||||
const _output = [];
|
||||
_output.push("Header content");
|
||||
return [_output, this];
|
||||
}]}
|
||||
|
||||
// Text content
|
||||
"Plain text"
|
||||
|
||||
// Expressions
|
||||
{expr: () => this.data.title}
|
||||
```
|
||||
|
||||
### Integration with Core
|
||||
|
||||
Templates compile to functions that return `[instructions, context]`:
|
||||
|
||||
```javascript
|
||||
function render() {
|
||||
const _output = [];
|
||||
|
||||
// Generate instructions...
|
||||
_output.push({tag: ["h1", {}, false]});
|
||||
_output.push("Hello World");
|
||||
_output.push({tag: ["h1", {}, true]});
|
||||
|
||||
return [_output, this];
|
||||
}
|
||||
```
|
||||
|
||||
The core runtime's instruction processor handles these arrays to create DOM.
|
||||
|
||||
### Next Steps
|
||||
|
||||
1. **Build Tools** - Webpack loader for `.jqhtml` imports
|
||||
2. **Source Maps** - Full debugging support
|
||||
3. **VS Code Extension** - Syntax highlighting
|
||||
4. **Autoformatter** - Code formatting for `.jqhtml` files
|
||||
**hansonxyz** · [hanson.xyz](https://hanson.xyz/) · [github](https://github.com/hansonxyz)
|
||||
|
||||
2
node_modules/@jqhtml/parser/dist/codegen.js
generated
vendored
2
node_modules/@jqhtml/parser/dist/codegen.js
generated
vendored
@@ -1348,7 +1348,7 @@ export class CodeGenerator {
|
||||
for (const [name, component] of this.components) {
|
||||
code += `// Component: ${name}\n`;
|
||||
code += `jqhtml_components.set('${name}', {\n`;
|
||||
code += ` _jqhtml_version: '2.2.221',\n`; // Version will be replaced during build
|
||||
code += ` _jqhtml_version: '2.2.222',\n`; // Version will be replaced during build
|
||||
code += ` name: '${name}',\n`;
|
||||
code += ` tag: '${component.tagName}',\n`;
|
||||
code += ` defaultAttributes: ${this.serializeAttributeObject(component.defaultAttributes)},\n`;
|
||||
|
||||
7
node_modules/@jqhtml/parser/package.json
generated
vendored
Normal file → Executable file
7
node_modules/@jqhtml/parser/package.json
generated
vendored
Normal file → Executable file
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@jqhtml/parser",
|
||||
"version": "2.2.221",
|
||||
"version": "2.2.222",
|
||||
"description": "JQHTML template parser - converts templates to JavaScript",
|
||||
"type": "module",
|
||||
"main": "dist/index.js",
|
||||
@@ -23,13 +23,12 @@
|
||||
"node": ">=14.0.0"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public",
|
||||
"registry": "https://privatenpm.hanson.xyz/"
|
||||
"access": "public"
|
||||
},
|
||||
"files": [
|
||||
"dist",
|
||||
"bin",
|
||||
"README.md",
|
||||
"LLM_REFERENCE.md",
|
||||
"LICENSE"
|
||||
],
|
||||
"keywords": [
|
||||
|
||||
Reference in New Issue
Block a user