@funcstache/funcstache v0.1.12
funcstache
A JavaScript library to render mustache templates into documents. For example, webpages that are dynamically generated on a server.
!TIP What do we mean by "document?" A good example is an HTML document which renders a page in a web browser. However, This library is output agnostic and will render any text document that meets the mustache requirements.
funcstache:
- Defines conventions that simplify document creation
- File-based
We're using: the proven pattern of rendered templates, combined with new JavaScript capabilities, plus some conventions, to simplify rendering documents dynamically.
- You can dive right in to the API.
install
npm i @funcstache/funcstacheHow it works
funcstache uses mustache templates, along with view data provided by JavaScript functions, to render documents.
!TIP There is a KOA middleware package for serving rendered HTML. See the middleware docs.
An example mustache template
The first step is to create a mustache template file named index.mustache, use this example that defines an HTML page:
<!--
index.mustache
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>{{title}}</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
</head>
<body>
<p>Hello funcstache!</p>
</body>
</html>Notice that this template has one variable tag {{title}} that will be replaced by view data.
Now create a JavaScript file in the same directory as the index.mustache template file. The name of this file must be index.js. This is one of funcstache's conventions, each directory that contains renderable mustache templates must include an index.js file that provides information about how templates should be rendered. For example:
/* index.js */
export const getView = async () => {
return {
title: "FUNCSTACHE!",
};
};This index.js file exports one optional function, getView. getView is responsible for
providing the data that replaces variable
tags. The mustache tags in the HTML document
must match property names in the view object; we see here that the {{title}} tag in the template
will be replaced by the value of the title property - "FUNCSTACHE!"
Rendering the example
The funcstache library has one method that accepts two parameters: context and options. The
context parameter contains information related to a render request. The second options parameter
includes a directory property. Its value is an absolute path to the location where the
index.js and index.mustache files are located.
const result = funcstache({ url: "/" }, { directory: "/path/to/index/files" });After the files are processed the value of result is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>FUNCSTACHE!</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
</head>
<body>
<p>Hello funcstache!</p>
</body>
</html>Next steps
Now that you've seen how simple it is to render a document the next step is to read the API docs for more information about asynchronously requesting view information and transcluding templates.