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.
$ npm install @geooot/soul-patchconst { renderPage } = require('@geooot/soul-patch');
const template = `
<ul sp-for="let i=0; i<3; i++">
<li sp-assign="text: foo + someFunc(i), class: 'whatever'"></li>
</ul>
`
let rendered = await renderPage({
input: template,
props: {
foo: "The number is: ",
someFunc: (num) => num * 100
}
});
console.log(rendered);
// Results in:
// <ul>
// <li class="whatever">The number is: 0</li>
// <li class="whatever">The number is: 100</li>
// <li class="whatever">The number is: 200</li>
// </ul>Operators allow you to template html by adding special attributes to your HTML. Here are the available operators:
This property allows you to assign variables to HTML attributes and set HTML.
This template:
<p sp-assign="text: someVariable, class: someBool ? 'text-green' : 'text-red'">Whatever</p>Results in:
<p class="text-red">I was a string assigned to someVariable</p>This template:
<p sp-assign="innerHTML: markdownToHTML(markdownInAString)"></p>Results in:
<p><h1>Here is some raw HTML being injected!!!</h1><p>wowzers</p></p>Defines how you can create a loop of elements.
This template:
<ul sp-for="let i=0; i<10; i++">
<li sp-assign="text: i, class: 'whatever'">
Anything can go here but it will probably be replaced on render
</li>
</ul>Results in:
<ul>
<li class="whatever">0</li>
<li class="whatever">1</li>
<li class="whatever">2</li>
<li class="whatever">3</li>
<li class="whatever">4</li>
<li class="whatever">5</li>
<li class="whatever">6</li>
<li class="whatever">7</li>
<li class="whatever">8</li>
<li class="whatever">9</li>
</ul>This template
<div sp-for="item of listOfObjects">
<p sp-assign="text: item.name, id: item.id">Whatever</p>
</div>Results in
<div>
<p id="someIdFoo">Foo</p>
<p id="someIdBar">Bar</p>
<p id="someIdWiz">Wiz</p>
</div>Renders an item if a certain condition is true
This template:
<p sp-render-if="10 < 100">Turns out 10 is less than 100 so this will render</p>
<p sp-render-if="myIQ > averageIQForAge(19)">But my IQ is below average so this will not render</p>Results in:
<p>Turns out 10 is less than 100 so this will render</p>![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent