JSPM

posthtml-exp

0.8.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 96
  • Score
    100M100P100Q57347F
  • License MIT

Template Expressions for PostHTML

Package Exports

  • posthtml-exp

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (posthtml-exp) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Expressions for PostHTML

Install

(sudo) npm i -D posthtml-exp

Options

Style

Choose one of the following expression syntaxes. If **** options.style **** is unset, the default syntax (JSX) is used.

JSX: *** '{' ***
<div id="{id}" class="{class}">${content}</div>
HBS: *** '{{' ***
<div id="{{id}}" class="{{class}}">{{content}}</div>
Blaze: *** '@' ***
<div id="@id" class="@name">@content</div>

Locals

Set locals directly as arguments

let exps = require('posthtml-exp')({
  locals: {/* locals */}
})

Load locals from an external file

let exps = require('posthtml-exp')({
  locals: {/* 'path/to/file.(js|json) '*/}
})
exports = module.exports = {/* locals */}
{
  "name": "PostHTML Exps",
  "repo": {
    "name": "posthtml-exp",
    "url": "https://github.com/michael-ciniawsky/posthtml-exp"
  }
}

Paths

Expression and Helper arguments can be expressed with dot notation syntax. The current limit for nesting is set to 3.

{
  local: {
    key1: {
      key2: {
        key3: 'PostHtML Expressions'
      }
    }
  }
}
<div>
  <h2>{local.one.two.tree}</h2>
</div>
<div>
  <h2>PostHTML Expressions</h2>
</div>

Helpers

Each *** {...} ***

{
  locals: {
    fruits: ['Apple', 'Orange', 'Mango']
  }
}
<ul>
  <li>{...fruits}</li>
</ul>
<ul>
  <li>Apple</li>
  <li>Orange</li>
  <li>Mango</li>
</ul>

Pipe *** { | } ***

{
  locals: {
    firstname: 'PostHTML',
    lastname: 'Expressions'
  }
}
<h1>{locals|firstname|lastname}</h1>
<h1>PostHTML Expressions</h1>

Partial *** {> } ***

{
  locals: {
    button: './includes/button.html'
  }
}
<div>{> button}</div>
<div>
  <button>Click Me!</button>
</div>

Usage

For general usage and build process integration see PostHTML Docs

Example using Node API

Default

'use strict'

const fs = require('fs')

const posthtml = require('posthtml')

const exp = require('posthtml-exp')({
  locals: {
    id: 'title',
    class: 'header',
    content: 'PostHTML Exps Default'
  }
})

let file = fs.readFileSync('./index.html', 'utf-8')

posthtml([ exp ])
  .process(file)
  .then(result => console.log(result.html))
Input
<div class={class}>
  <h1 id={id}>{content}</h1>
</div>
Output
<div class="header">
   <h1 id="title">PostHTML Exps</h1>
</div>

Custom

'use strict'

const fs = require('fs')

const posthtml = require('posthtml')

const exp = require('posthtml-exp')({
  style: '{{',
  locals: {
    id: 'title',
    class: 'header',
    content: 'PostHTML Exps Default'
  }
})

let file = fs.readFileSync('./index.html', 'utf-8')

posthtml([ exp ])
  .process(file)
  .then(result => console.log(result.html))
Input
<div class={{class}}>
  <h1 id={{id}}>{{content}}</h1>
</div>
Output
<div class="header">
   <h1 id="title">PostHTML Exps Custom</h1>
</div>