Reliability
This commit is contained in:
259
README.md
Normal file
259
README.md
Normal file
@@ -0,0 +1,259 @@
|
||||
# Inkject
|
||||
|
||||
A lightweight, powerful JavaScript template engine with support for conditionals, variables, and nested data structures.
|
||||
|
||||
## Features
|
||||
|
||||
- **Zero dependencies** - Pure JavaScript implementation
|
||||
- **Variable interpolation** with nested object support
|
||||
- **Conditional rendering** with if/elseif/else logic
|
||||
- **Inline conditionals** for compact templates
|
||||
- **Nested conditionals** for complex logic
|
||||
- **Customizable delimiters** - Use any delimiter you want
|
||||
- **Clean syntax** - Easy to read and write templates
|
||||
|
||||
## Installation
|
||||
|
||||
```javascript
|
||||
// Include the inkject class in your project
|
||||
const inkject = require('inkject');
|
||||
const renderer = new inkject();
|
||||
```
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```javascript
|
||||
const template = "Hello &name&! You have &messages& new messages.";
|
||||
const data = {
|
||||
name: "Alice",
|
||||
messages: 5
|
||||
};
|
||||
|
||||
const result = renderer.render(template, data);
|
||||
console.log(result); // "Hello Alice! You have 5 new messages."
|
||||
```
|
||||
|
||||
## Syntax Reference
|
||||
|
||||
### Variable Interpolation
|
||||
|
||||
Access data using dot notation for nested objects:
|
||||
|
||||
```javascript
|
||||
const template = `
|
||||
Welcome &user.name&!
|
||||
Email: &user.profile.email&
|
||||
Score: &stats.points&
|
||||
`;
|
||||
|
||||
const data = {
|
||||
user: {
|
||||
name: "John",
|
||||
profile: { email: "john@example.com" }
|
||||
},
|
||||
stats: { points: 1250 }
|
||||
};
|
||||
```
|
||||
|
||||
### Custom Delimiters
|
||||
|
||||
Change delimiters by passing a third parameter:
|
||||
|
||||
```javascript
|
||||
// Using $$ as delimiters
|
||||
renderer.render("Hello $$name$$", { name: "World" }, "$$$$");
|
||||
// NOTE: It splits the delimiter string in two, so $$$$ means $$ for start and $$ for end
|
||||
|
||||
// Using different open/close delimiters
|
||||
renderer.render("Hello {{name}}", { name: "World" }, "{{}}");
|
||||
|
||||
// Using triple delimiters
|
||||
renderer.render("Hello $$$name$$$", { name: "World" }, "$$$$$$");
|
||||
```
|
||||
|
||||
### Conditionals
|
||||
|
||||
#### Basic If/Else
|
||||
|
||||
```javascript
|
||||
const template = `
|
||||
&#if user.isActive&
|
||||
Welcome back, &user.name&!
|
||||
&#else&
|
||||
Please activate your account.
|
||||
&/if&
|
||||
`;
|
||||
```
|
||||
|
||||
#### If/Elseif/Else Chains
|
||||
|
||||
```javascript
|
||||
const template = `
|
||||
&#if user.role === "admin"&
|
||||
🔑 Administrator Access
|
||||
&#elseif user.role === "manager"&
|
||||
👔 Manager Access
|
||||
&#else&
|
||||
👤 Standard User
|
||||
&/if&
|
||||
`;
|
||||
```
|
||||
|
||||
#### Inline Conditionals
|
||||
|
||||
Perfect for conditional text within sentences:
|
||||
|
||||
```javascript
|
||||
const template = `
|
||||
You have &#if notifications > 0&¬ifications& new&#else&no&/if& notifications.
|
||||
Status: &#if user.isActive&✅ Active&#else&❌ Inactive&/if&`;
|
||||
```
|
||||
|
||||
### Comparison Operators
|
||||
|
||||
Support for all common comparison operators:
|
||||
|
||||
- `===` - Strict equality
|
||||
- `!==` - Strict inequality
|
||||
- `==` - Loose equality
|
||||
- `!=` - Loose inequality
|
||||
- `>` - Greater than
|
||||
- `<` - Less than
|
||||
- `>=` - Greater than or equal
|
||||
- `<=` - Less than or equal
|
||||
|
||||
```javascript
|
||||
const template = `
|
||||
&#if age >= 18&
|
||||
You are an adult.
|
||||
&#elseif age >= 13&
|
||||
You are a teenager.
|
||||
&#else&
|
||||
You are a child.
|
||||
&/if&`;
|
||||
```
|
||||
|
||||
### Negation
|
||||
|
||||
Use `!` to negate conditions:
|
||||
|
||||
```javascript
|
||||
const template = `
|
||||
&#if !user.isSubscribed&
|
||||
Subscribe now for premium features!
|
||||
&/if&
|
||||
`;
|
||||
```
|
||||
|
||||
### Nested Conditionals
|
||||
|
||||
Create complex logic with nested conditions:
|
||||
|
||||
```javascript
|
||||
const template = `
|
||||
&#if user.isActive&
|
||||
Welcome, &user.name&!
|
||||
&#if user.role === "admin"&
|
||||
&#if company.employees > 100&
|
||||
Managing large organization (&company.employees& employees)
|
||||
&#else&
|
||||
Managing small team (&company.employees& employees)
|
||||
&/if&
|
||||
&/if&
|
||||
&/if&
|
||||
`;
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### User Dashboard
|
||||
|
||||
```javascript
|
||||
const dashboardTemplate = `
|
||||
=== USER DASHBOARD ===
|
||||
|
||||
Welcome, &user.name&!
|
||||
|
||||
&#if user.role === "admin"&
|
||||
🔑 ADMIN ACCESS GRANTED
|
||||
You have full system privileges.
|
||||
|
||||
&#if company.employees > 100&
|
||||
📊 Large Company Management:
|
||||
- Company: &&company.name&&
|
||||
- Total Employees: &&company.employees&
|
||||
&#else&
|
||||
📊 Small Company Management:
|
||||
- Company: &&company.name&&
|
||||
- Team Size: &company.employees&
|
||||
&/if&
|
||||
|
||||
&#elseif user.role === "manager"&
|
||||
👔 MANAGER ACCESS
|
||||
You can view team data and reports.
|
||||
&#else&
|
||||
👤 USER ACCESS
|
||||
Limited access to personal data only.
|
||||
&/if&
|
||||
|
||||
Account Status: &#if user.isActive&✅ Active&#else&❌ Inactive&/if&
|
||||
`;
|
||||
|
||||
const data = {
|
||||
user: {
|
||||
name: "Alice Johnson",
|
||||
role: "admin",
|
||||
isActive: true
|
||||
},
|
||||
company: {
|
||||
name: "TechCorp",
|
||||
employees: 150
|
||||
}
|
||||
};
|
||||
|
||||
console.log(renderer.render(dashboardTemplate, data));
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
### `render(template, data, delimiter)`
|
||||
|
||||
Renders a template with the provided data.
|
||||
|
||||
**Parameters:**
|
||||
- `template` (string): The template string to render
|
||||
- `data` (object): The data object containing variables
|
||||
- `delimiter` (string, optional): Custom delimiter (default: '&&')
|
||||
|
||||
**Returns:** Rendered string
|
||||
|
||||
### Delimiter Rules
|
||||
|
||||
- **Even length**: Split in half for open/close (e.g., `{{}}` -> `{{` and `}}`)
|
||||
- **Odd length**: Same delimiter for open/close (e.g., `$$$` -> `$$$` and `$$$`)
|
||||
|
||||
## Error Handling
|
||||
|
||||
Inkject handles errors gracefully:
|
||||
|
||||
- **Missing variables**: Returns empty string
|
||||
- **Undefined nested properties**: Returns empty string
|
||||
- **Invalid conditions**: Evaluates to false
|
||||
- **Malformed templates**: Processes what it can, leaves invalid syntax unchanged
|
||||
|
||||
## Performance Tips
|
||||
|
||||
1. **Reuse renderer instances** - Create one `inkject` instance and reuse it
|
||||
2. **Simple conditions** - Complex JavaScript expressions aren't supported
|
||||
3. **Avoid deep nesting** - Keep conditional nesting reasonable for readability
|
||||
4. **Cache templates** - Store frequently used templates in variables
|
||||
|
||||
## Browser Compatibility
|
||||
|
||||
Works in all modern browsers and Node.js environments. No transpilation required.
|
||||
|
||||
## License
|
||||
|
||||
MIT License - feel free to use in your projects!
|
||||
|
||||
---
|
||||
Reference in New Issue
Block a user