@chronocide/spark
v0.0.15
Published
Simple JSX templating
Downloads
21
Readme
Why?
@chronocide/spark is tiny and fullfills exactly one job, which is templating in JavaScript. Similar templating solutions exist such as Handlebars, EJS or Nunjucks but these solutions often provide a custom templating language instead of using JavaScript directly.
Getting Started
Installation
npm i @chronocide/sparkExample
tsconfig.json
{
...
"jsx": "react",
"jsxFactory": "spark.createElement"
...
}index.tsx
import * as spark from '@chronocide/spark';
type Props = {
title: string
}
const Template: spark.Component<Props> = props => (
<html lang="en">
<body>
<h1>{props.title}</h1>
{props.children}
</body>
</html>
);
const Page = () => (
<Template title="Page">
<p>Title</p>
</Template>
);
<Page /> // <html lang="en"><body><h1>Page</h1><p>Title</p></body></html>index.ts
import { createElement as h } from '@chronocide/spark';
type TemplateProps = {
title: string
}
const template = (props: TemplateProps, children: string[]) =>
h('html', { lang: 'en' },
h('body', {},
h('h1', {}, props.title),
...children
)
);
const page = () => template({ title: 'Page' }, h('p', {}, 'Title') });
page(); // <html lang="en"><body><h1>Page</h1><p>Title</p></body></html>Outputs
| 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>