Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

pHTML Template pHTML

NPM Version Build Status Support Chat

pHTML Template lets you create and reuse pre-rendered templates in HTML.

<header is:template="heading">
  <h1 is:slot>Page Heading</h1>
  <hr />
  <is:slot name="subheading"></is:slot>
</header>

Templates are made with the <is:template> element or is:template attribute, and they are used with the <as:template> element or as:template atttribute.

<as:template name="heading">
  Goodbye Mars
  <p as:slot="subheading">We really painted the town red...</p>
</as:template>

<!-- becomes -->

<header>
  <h1>Goodbye Mars</h1>
  <hr />
  <p>We really painted the town red...</p>
</header>

Slots are made with the <is:slot> element and is:slot attribute, and their contents are replaced with the <as:slot> element or as:slot attribute.

When slot content is not replaced, its original content is rendered.

<as:template name="heading"></as:template>

<!-- becomes -->
<header>
  <h1>Main Section</h1>
  <hr />
</header>

Is and As

The <is:*> and <as:*> elements define “fragment containers” which are not actually rendered. Nameless content goes into nameless slots.

<is:template name="replace"><is:slot>Replaceable Content</is:slot></is:template>

<as:template name="replace">Replaced Content</as:template>

<!-- becomes -->
Replaced Content

The is:* and as:* attributes render their container, and when both used together then the “is” element always wraps the “as” element.

<is:template name="replace"><p is:slot>Replaceable Content</p></is:template>

<as:template name="replace"><span class="inner-span" as:slot>Replaced Content</span></as:template>

<!-- becomes -->
<p><span class="inner-span">Replaced Content</span></p>

When the as:template attribute is used, its element becomes the wrapper for nameless slots.

<is:template name="replace"><p is:slot>Replaceable Content</p></is:template>

<span class="inner-span" as:template="replace">Replaced Content</span>

<!-- becomes -->

<p><span class="inner-span">Replaced Content</span></p>

Usage

Transform HTML files directly from the command line:

npx phtml source.html output.html -p @phtml/template

Node

Add pHTML Template to your project:

npm install @phtml/template --save-dev

Use pHTML Template to process your HTML:

const phtmlTemplate = require('@phtml/template');

phtmlTemplate.process(YOUR_HTML /*, processOptions, pluginOptions */);

Or use it as a pHTML plugin:

const phtml = require('phtml');
const phtmlTemplate = require('@phtml/template');

phtml([
  phtmlTemplate(/* pluginOptions */)
]).process(YOUR_HTML /*, processOptions */);

pHTML Template runs in all Node environments, with special instructions for:

Node CLI Eleventy Gulp Grunt

Options

importFrom

The importFrom option specifies objects and sources where Templates can be imported from.

phtmlTemplate({
  importFrom: 'path/to/file.html'
});

These sources might be HTML, JS, and JSON files, functions, and directly passed objects.

phtmlTemplate({
  importFrom: [
    {
      'phtml-templates': [
        {
          from: 'path/to/file.html'
        },
        {
          html: '<header is:template="heading">\n  <h1 is:slot>Page Heading</h1>\n  <hr />\n  <is:slot name="subheading"></is:slot>\n</header>'
        },
        () => {
          return [
            'path/to/another-file.html',
            {
              html: '<header is:template="another-heading">\n  <h1 is:slot>Page Heading</h1>\n  <hr />\n  <is:slot name="subheading"></is:slot>\n</header>'
            }
          ];
        }
      ]
    }
  ]
});

About

Create Custom Elements from Templates in HTML

Resources

License

Packages

No packages published