Skip to content

🥘 A JavaScript library making use of Tagged Template Literals to chunk, transform and pipe a template to a given stream.

License

Notifications You must be signed in to change notification settings

bogas04/marinate

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Marinate

WORK IN PROGRESS

Marinate logo

A JavaScript library making use of Tagged Template Literals to chunk, transform and pipe a template to a given stream.

Installation

The library works on Node 8 and above. However, it's possible to transpile the used features (async await in for..of, template literal strings, tagged template literal) to support older versions of Node.

# use npm
npm install marinate
# or yarn
yarn add marinate
# or new-hip-package-manager-for-js
new-hip-package-manager-for-js marinate

Usage

For a working server, check out this example that uses react & express.

import marinate from 'marinate';

import express from 'express';
import fetch from 'node-fetch';

import { renderToString, renderToNodeStream }  from 'hip-new-framework-of-the-month';

import { Nav, App } from './spa';
import footerHTML from './templates/footer';

const app = express();

const template = marinate`
<!doctype html>
<html>
  <body>
    ${renderToString(Nav)}
    ${() => renderToNodeStream(App)}
    ${() => fetch('api-route').then(r => r.text())}
    ${() => footerHTML}
  </body>
</html>`

app
  .get('/', (req, res) => template(res))
  .listen(4000, () => 'Server listening on port 4000')

Motivation

marinate was created to solve a problem where a node based web server is designed to stream the output, yet use a templating library to split static and non-static parts.

Assume following template

const template = `<html>
  <head>
    ${fs.readFileSync(cssPath)}
  </head>
  <body>
    ${renderToString(App)}
  </body>
</html>`

If you want to stream fs.readFileSync or renderToString part of your application, you will have to split your template into chunks, i.e. template parts before and the said part, then write your first chunk to HTTP Response stream, pipe your App renderStream to it, and finally write latter chunk once your App stream ends. This gets complicated as more and more dynamic portions become part of your template.

Tagged Template Literals

Thankfully, ES2015's tagged template literals are sort of designed to do exactly this. They can create these chunks automatically, and act differently upon the dynamic parts. This allows you to now pass functions, promises, streams and what not !

Currently we support following parts:

  • strings
  • functions
    • returning strings
    • returning promises
    • returning streams

Note that a function can return a function, or a promsie can resovle to a function/promise. Basically the definition of dynami parts is recursive, ultimately evaluating to a string or stream. Be careful!

License

MIT

About

🥘 A JavaScript library making use of Tagged Template Literals to chunk, transform and pipe a template to a given stream.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published