https://github.com/ossphilippines/temple
Reactive template engine
https://github.com/ossphilippines/temple
Last synced: about 1 year ago
JSON representation
Reactive template engine
- Host: GitHub
- URL: https://github.com/ossphilippines/temple
- Owner: OSSPhilippines
- License: apache-2.0
- Created: 2024-05-20T04:00:27.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-27T05:08:26.000Z (over 1 year ago)
- Last Synced: 2025-04-12T01:46:39.288Z (about 1 year ago)
- Language: TypeScript
- Size: 5.57 MB
- Stars: 14
- Watchers: 1
- Forks: 11
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Install
```bash
$ npm -i @ossph/temple
```
## Compiler Usage
```js
//on server:
import temple from '@ossph/temple/compiler';
//make a temple compiler
const compiler = temple();
//render HTML
const results = compiler.render('./page.dtml');
//show HTML
console.log(results);
```
## Temple Markup
**Basic Markup**
```html
const name = 'world';
Hello {name}!
```
**Markup with Styles**
```html
:host {
color: purple;
}
:host h1 {
font-family: 'Comic Sans MS', cursive;
font-size: 2em;
}
const name = 'world';
Hello {name}!
```
**Markup with Props**
```html
import { props } from '@ossph/temple';
const { name } = props();
Hello {name}
```
**Markup with Reactivity**
```html
import { signal } from '@ossph/temple';
const name = signal('world');
const add = () => name.value += '!';
Hello {name.value}
```
**Markup with Imports**
```html
const name = 'world';
Hello
```
```html
import { props, children } from '@ossph/temple';
const { name } = props();
{children()} {name}
```
**Markup with Conditional**
```html
const name = 'world';
const show = name === "world";
Hello {name}
```
**Markup with Loops**
```html
const list = [ 'a', 'b', 'c' ];
- {i}: {item}
```
**Document Markup**
```html
body {
background-color: #DA532C;
color: #EFEFEF;
}
{title}
```
## Why Temple?
Current frontend solutions for the most part, come in the form of a
"frontend framework" and are "all encompassing", requiring more import
into the frontend framework and give little export out to support server
first solutions. Temple is a modern HTML markup language and a server
first template engine with a built-in parser/compiler that generates
web components and support reactivity.
Temple works with most server frameworks including:
- [Express](https://github.com/OSSPhilippines/temple/tree/main/examples/with-express)
- [Fastify](https://github.com/OSSPhilippines/temple/tree/main/examples/with-fastify)
- [Hapi](https://github.com/OSSPhilippines/temple/tree/main/examples/with-hapi)
- [Koa](https://github.com/OSSPhilippines/temple/tree/main/examples/with-koa)
- [NestJS](https://github.com/OSSPhilippines/temple/tree/main/examples/with-nest)
- [Webpack](https://github.com/OSSPhilippines/temple/tree/main/examples/with-webpack)