# tophatjs

> a compile-time template engine

Latest version **0.1.1** (published 2013-11-02) · 0 weekly downloads

## Install

```sh
npm install tophatjs
pnpm add tophatjs
yarn add tophatjs
bun add tophatjs
```

Provides the command `tophatjs`.

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2013-11-02 |
| First published | 2013-10-28 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Node | * |
| Dependencies | 4 |
| Known vulnerabilities | 0 (+11 in 2 direct dependencies) |
| Install scripts | no |
| Author | Matthew L. Sawyer |
| Maintainers | matthewlsawyer |
| Keywords | tophat, tophatjs, template, classy |

## Links

- npm: https://www.npmjs.com/package/tophatjs
- Repository: https://github.com/matthewlsawyer/tophat
- Issues: https://github.com/matthewlsawyer/tophat/issues
- npm.io page: https://npm.io/package/tophatjs

## Dependencies (4)

- [cheerio](https://npm.io/package/cheerio.md) 0.12.2
- [commander](https://npm.io/package/commander.md) 1.3.2
- [handlebars](https://npm.io/package/handlebars.md) 1.0.12
- [underscore](https://npm.io/package/underscore.md) 1.5.2

## Recent versions

- 0.1.1 (latest) — 2013-11-02
- 0.1.0 — 2013-10-30
- 0.0.2 — 2013-10-28
- 0.0.1 — 2013-10-28

## README

# Overview

## What is it?

Tophat is a template pre-compilation engine. It allows you to compile your templates to generate and keep up to date complete html files. This is to prevent runtime compilation and template processing.

The problem it attempts to solve is the slow and often ugly way some other templating engines do run-time template processing. On the other hand, without a templating engine, trying to maintain the same html code in 100 different files is a nightmare. Tophat falls in the middle of these two options; it is a utility that does template processing not at run time, but before-hand, before the html files are pushed to a server.

# Usage

## Install

Install with npm as global.

```bash
npm install -g tophatjs
```

## Setup html

Tophat makes use of a custom html5 data attribute ```data-th-include``` for including external files.

If you have a file that needs to be included into your html, add a div and point to it with the ```data-th-include``` attribute.

```html
<div data-th-include="header.th"></div>
```

The engine fully supports mustache templates. If your included file contains mustache elements, provide a context for attribute replacement by including a script tag with type ```application/json``` and data attribute ```data-th-json``` which holds the json data.

```html
<script data-th-json type="application/json">
  { "title" : "Hello, tophat!" }
</script>
```

So, if ```header.th``` looks like the following --

```html
<header>
<h1>{{title}}</h1>
</header>
```

-- then after tophat is run the html file will contain the following.

```html
<div data-th-include="headter.th">
<header>
<h1>Hello, tophat!</h1>
</header>
</div>
```

## Run program

Navigate to the directory that has your html files and run the following command.

```bash
tophatjs
```

Tophat will look for all html files in the current directory, scan them for the data attributes above, and include the referenced partials' contents into the file.

For usage options run ```tophatjs -h``` to see the following.

```
Usage: tophatjs [options] [dir]

Options:
-h, --help     output usage information
-V, --version  output the version number
-c, --collapse  collapse template
```

That's all there is to it.

---
_Source: https://npm.io/package/tophatjs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._