@chronocide/spark
v0.3.0
Published
Simple JSX templating
Readme
Features
- No external dependencies
- Tiny size
- Written in TypeScript
- Declarative
Installation
npm i @chronocide/sparkExample
import h from '@chronocide/spark';
console.log(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
| Type | Example | Output |
| - | - | - |
| string | h('span')({})('spark') | <span>spark</span>
| number | h('span')({})(3) | <span>3</span>
| boolean | h('span')({})(true) | <span>true</span>
| boolean | 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. They're also (unnecessarily) large for creating static HTML.