@ossph/temple NPM

Install

$ npm -i @ossph/temple

Compiler Usage

//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

<!-- page.html -->
<script>
  const name = 'world';
</script>
<h1>Hello {name}!</h1>

Markup with Styles

<!-- page.html -->
<style>
  :host {
    color: purple;
  }
  :host h1 {
    font-family: 'Comic Sans MS', cursive;
    font-size: 2em;
  }
</style>
<script>
  const name = 'world';
</script>
<h1>Hello {name}!</h1>

Markup with Props

<!-- page.html -->
<script>
  import { props } from '@ossph/temple';
  const { name } = props();
</script>
<h1>Hello {name}</h1>

Markup with Reactivity

<!-- page.html -->
<script>
  import { signal } from '@ossph/temple';
  const name = signal('world');
  const add = () => name.value += '!';
</script>
<h1 click=add>Hello {name.value}</h1>

Markup with Imports

<!-- page.html -->
<link rel="import" type="component" href="./my-heading.tml" />
<script>
  const name = 'world';
</script>
<my-heading {name}>Hello</my-heading>

<!-- my-heading.html -->
<script>
  import { props, children } from '@ossph/temple';
  const { name } = props();

</script>
<h1>{children()} {name}</h1>

Markup with Conditional

<!-- page.html -->
<script>
  const name = 'world';
  const show = name === "world";
</script>
<if true={show}>
  <h1>Hello {name}</h1>
</if>

Markup with Loops

<!-- page.html -->
<script>
  const list = [ 'a', 'b', 'c' ];
</script>
<ul>
  <each key=i value=item from=list>
    <li>{i}: {item}</li>
  </each>
</ul>

Document Markup

<!-- page.html -->
<link rel="import" type="template" href="./templates/html-head.tml" />
<link rel="import" type="component" href="./components/to-do.tml" />
<style>
  body { 
    background-color: #DA532C; 
    color: #EFEFEF; 
  }
</style>
<html>
  <html-head />
  <body>
    <h1>{title}</h1>
    <to-do list=list start=start />
  </body>
</html>

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: