yahp

Yet another HTML preprocessor (for Node)

Quickstart Guide

yarn add -D @frank-mayer/yahp

import { yahp } from "@frank-mayer/yahp";
import fs from "fs";

const input: string = fs.readFileSync("./src/index.yahp", "utf8");
const output: string = await yahp(input);
fs.writeFileSync("./dist/index.html", output);

Features

Define

Define block scoped variables.

<define var="foo" value="42">
  <!-- variable foo is available here with the value 42 -->
  <define var="foo" value=' "abc" '>
    <!-- variable foo is available here with the value "abc" -->
  </define>
  <!-- variable foo is available here with the value 42 -->
</define>
<!-- variable foo is not available anymore  -->

Eval

Run inline JavaScript Function. Return value is rendered if not undefined.

<script eval>
  const r = Math.random() * 100;
  return r.toFixed(2);
</script>

Fetch

Fetch content using http-get-request.

Parse response as JSON.

<fetch var="dog" as="json" from="this.dogDataUrl">
  <!-- ... -->
</fetch>

Response as string.

<fetch var="dog" as="text" from="this.dogNameUrl">
  <!-- ... -->
</fetch>

Response as Data URL

<fetch var="dog" as="dataURL" from="this.dogImgUrl">
  <!-- ... -->
</fetch>

For

Iterate using any iterable.

<for var="item" of="[1,2,3]">
  <!-- ... -->
</for>

If

Check if a condition is truthy or not.

Else block is not required.

<if condition="Boolean(Math.round(Math.random()))">
  <!-- truthy -->
</if>
<else>
  <!-- falsy -->
</else>

Import

Import a Module from npm or locally.

<import var="{ Octokit }" from="@octokit/rest">
  <!-- ... -->
</import>