https://github.com/abstractn/abs-template
Handlebars-like dynamic template compilation system
https://github.com/abstractn/abs-template
dynamic-html frontend handlebars html simple template template-partials
Last synced: about 2 months ago
JSON representation
Handlebars-like dynamic template compilation system
- Host: GitHub
- URL: https://github.com/abstractn/abs-template
- Owner: Abstractn
- License: mit
- Created: 2023-11-12T22:21:28.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-01T08:52:53.000Z (about 2 months ago)
- Last Synced: 2025-04-02T09:11:17.076Z (about 2 months ago)
- Topics: dynamic-html, frontend, handlebars, html, simple, template, template-partials
- Language: TypeScript
- Homepage:
- Size: 34.2 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Abs-Template
[](https://www.npmjs.com/package/abs-template) [](https://packagephobia.com/result?p=abs-template)
## Introduction:
This module offers a static class that can preprocess HTML `` nodes and print them in a somewhat dynamic way following an object with data inside it.
## CDN:
Typescript:
```https://abstractn.github.io/lib/abs-template.ts```
Javascript (with export):
```https://abstractn.github.io/lib/abs-template.js```
Javascript (without export):
```https://abstractn.github.io/lib/abs-template.nx.js```
Browser iclusion:
``````
## The Config object
There are two main methods to use from this class: the first one would be `.build()`.
This method takes a config object with all the necessary parameters inside it.
Here's a deep example:
```typescript
AbsTemplate.build({
// node reference to the template to build
templateNode: document.querySelector('template#my-template'),
// a data object to compile the template with
templateData: {
myField: 'lorem ipsum'
},
// the output node to where the compiled template needs to be printed
printTargetNode: document.querySelector('.dynamic-template-container'),
// the position relative to `printTargetNode`
printMethod: AbsTemplatePrintMethod.BEFORE_END,
})
```
> NOTE on `printMethod`:
> I've created a custom enum to group all possible values but not that these are in reality the same ones used by the native method `Element.insertAdjacentElement()`
> (see [MDN's documentation here](https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement) for more details)
Underneath `build()`'s logic there's `compile()`: if you need to just parse your template node and get the result without printing it immediately this will return the compiled HTML as a string.
## Template Syntax
You can write double curly brackets to write a couple of neat things inside your HTML to make minimal logic and print data with it.
### 1) Data
Starting with an object defined from our code:
```typescript
const myData = {
greeting: 'Hello',
user: {
firstName: 'John',
lastName: 'Doe'
}
};
```
use it in HTML with
```html
{{greeting}} {{user.firstName}} {{user.lastName}}
```
and after compilation it will turn into
```html
Hello John Doe
```
### 2) Conditions
`{{if condition}}...{{/if}}` and `{{if condition}}...{{else}}...{{/if}}` are the syntaxes that can decide wether the content of the condition will be printed or not for the first case and print either one content block or the other depending on the condition.
The accepted format for conditions are both a single variable that will be implicitly interpreted as a boolean check (much like a common `if()` from JS/TS code) or a set of two variables to evaluate with an operator in between them.
The list of all available operators is the following:
- `==`
- `==`
- `===`
- `!=`
- `!==`
- `>`
- `>=`
- `<`
- `<=`
- `&&`
- `||`
- `%`
- `^`
For the example we'll change the data object a little:
```typescript
const myData = {
visible: true
};
```
and make a debug-like test template
```html
status:
{{if visible}}
true
{{else}}
false
{{/if}}
```
The output will be
```html
status:
true
```
> NOTE: full condition syntax strictly accepts only the following format: ` `.
> Using parenthesis for grouping and/or multiple operators will not work.
### 3) Loops
If our data object contains arrays inside it we can iterate on them using a `{{forEach item in array}}...{{/forEach}}`.
Here's a simple list:
```typescript
const myData = {
users: [
{
firstName: 'John',
lastName: 'Doe'
},
{
firstName: 'Alex',
lastName: 'Rodriguez'
},
{
firstName: 'Emily',
lastName: 'Turner'
}
]
};
```
and whatever HTML is contained inside the loop statement will be repeated for each item
```html
List of users
{{forEach user in users}}
-
First name: {{user.firstName}}
Last name: {{user.lastName}}
{{/forEach}}
```
And this is how the list turned out after parsing:
```html
List of users
-
First name: John
Last name: Doe
-
First name: Alex
Last name: Rodriguez
-
First name: Emily
Last name: Turner
```
An important note to point out is that if you use an identifier for the list iterable that is already present inside the first level of the data object, the object outside of the list will not be accessible since the identifiers overlap and `forEach`'s scope takes priority.
```typescript
const myData = {
item: 'OUTSIDE LIST',
list: [ 'INSIDE LIST' ]
}
```
```html
1. {{item}}
{{forEach item in list}}
2. {{item}}
{{/forEach}}
3. {{item}}
```
The output will be:
```html
1. OUTSIDE LIST
2. INSIDE LIST
3. OUTSIDE LIST
```
## KNOWN BUGS
- ~~Same statements consecutively inside each other are probably not parsed correctly~~ Fixed in 1.2