https://github.com/geooot/soul-patch
🐄 A HTML templator with angular like syntax. Generating HTML through means that are not efficient, or safe. Only really good for shady static site generation.
https://github.com/geooot/soul-patch
html nodejs template-language templating-engine
Last synced: about 1 year ago
JSON representation
🐄 A HTML templator with angular like syntax. Generating HTML through means that are not efficient, or safe. Only really good for shady static site generation.
- Host: GitHub
- URL: https://github.com/geooot/soul-patch
- Owner: geooot
- License: mit
- Created: 2020-02-07T23:24:01.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-10-10T16:26:00.000Z (over 2 years ago)
- Last Synced: 2025-04-13T22:15:55.972Z (about 1 year ago)
- Topics: html, nodejs, template-language, templating-engine
- Language: TypeScript
- Homepage:
- Size: 236 KB
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# soul-patch
A HTML templator with angular like syntax. Generating HTML through means that are not efficient, or safe. Only really good for shady static site generation.
If moustache and handlebars are real templating engines, then soul-patch is it's wierd distant cousin.
## Installation
```bash
$ npm install @geooot/soul-patch
```
## Usage
```javascript
const { renderPage } = require('@geooot/soul-patch');
const template = `
`
let rendered = await renderPage({
input: template,
props: {
foo: "The number is: ",
someFunc: (num) => num * 100
}
});
console.log(rendered);
// Results in:
//
- The number is: 0
- The number is: 100
- The number is: 200
//
//
//
//
```
## Operators
Operators allow you to template html by adding special attributes to your HTML. Here are the available operators:
### `sp-assign`
This property allows you to assign variables to HTML attributes and set HTML.
#### Example 1
This template:
```html
Whatever
```
Results in:
```html
I was a string assigned to someVariable
```
#### Example 2: Using innerHTML
This template:
```html
```
Results in:
```html
Here is some raw HTML being injected!!!
wowzers
```
### `sp-for`
Defines how you can create a loop of elements.
#### Example 1: For loop
This template:
```html
-
Anything can go here but it will probably be replaced on render
```
Results in:
```html
- 0
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
```
#### Example 2: For each loop
This template
```html
Whatever
```
Results in
```html
Foo
Bar
Wiz
```
### `sp-render-if`
Renders an item if a certain condition is true
#### Example
This template:
```html
Turns out 10 is less than 100 so this will render
But my IQ is below average so this will not render
```
Results in:
```html
Turns out 10 is less than 100 so this will render
```