@chronocide/spark
v0.4.1
Published
Simple TypeScript templating library
Readme
Installation
npm i @chronocide/sparkExample
import h from '@chronocide/spark';
h('h1')()('Hello world!'); // <h1>Hello world!</h1>import h from '@chronocide/spark';
const arr = [1, 2, 3];
const li = (i: number) => h('li')()(i);
const ul = h('ul')()(arr.map(li)); // <ul><li>1</li><li>2</li><li>3</li></ul>import h, { xml } from '@chronocide/spark';
const page = (...children: unknown[]): string => {
const out = h('html')({ lang: 'en' })(
h('head')()(
h('title')()('My website')
),
h('a')({ class: 'sr-only', href: '#main' })('Jump to main content.')
h('body')()(
h('main')({ id: 'main' })(children),
xml('svg')()(
xml('path')({ d: 'M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z' })()
)
)
);
return `<!DOCTYPE html>${out}`;
};
const landing = page(
h('h1')()('Hello world!'),
h('p')()('This is my landing page')
); // <!DOCTYPE html><html lang="en"><head><title>My website</title></head><a class="sr-only" href="#main">Jump to main content.</a><body><main id="main"><h1>Hello world!</h1><p>This is my landing page</p></main><svg><path d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"/></svg></body></html>API
Attributes
| Type | Example | Output |
| - | - | - |
| string | h('span')({ class: 'sr-only' })() | <span class="sr-only"></span>
| number | h('span')({ 'data-rows': 3 })() | <span data-rows="3"></span>
| boolean (true) | h('span')({ 'aria-hidden': true })() | <span aria-hidden></span>
| boolean (false) | h('span')({ 'aria-hidden': false })() | <span></span>
| undefined | h('span')({ editable: undefined })() | <span></span>
| null | h('span')({ style: null })() | <span></span>
Children
| Type | Example | Output |
| - | - | - |
| string | h('span')({})('spark') | <span>spark</span>
| number | h('span')({})(3) | <span>3</span>
| boolean (true) | h('span')({})(true) | <span></span>
| boolean (false) | h('span')({})(false) | <span></span>
| undefined | h('span')({})(undefined) | <span></span>
| null | h('span')({})(null) | <span></span>
Why?
Similar templating solutions exist — such as Handlebars, EJS or Nunjucks — but these solutions often provide a custom templating language instead of TypeScript.