pHTML pHTML

NPM Version Build Status Support Chat

pHTML is a tool for transforming HTML with JavaScript.

It fully embraces the HTML language, and aims to help you write and maintain HTML that you and future you feel good about.

It can help you compose reusable templates and components, or automate image size attributes and schema.org microdata and heading levels, or transform modern CSS and JS with Babel and PostCSS.

It works in the command line, Node, Grunt, Gulp, Webpack, 11ty, and even the browser itself.

Usage

Transform HTML files directly from the command line:

npx phtml source.html output.html

Include plugins directly from the command line:

npx phtml source.html output.html -p @phtml/markdown,@phtml/image-alt
echo "<h1 md>pHTML **Markdown**</h1>" | npx phtml -p @phtml/markdown

# <h1>pHTML <strong>Markdown</strong></h1>

Node

Add pHTML to your build tool:

npm install phtml --save-dev

Use pHTML to process your CSS:

const phtml = require('phtml');

phtml.process(YOUR_HTML, /* processOptions */, /* pluginOrPlugins */);

Node Example

const phtml = require('phtml');

const html = `<my-component class="main">
  <title>Super Title</title>
  <text>Awesome Text</text>
</my-component>`;

phtml.process(html, { from: 'my-component.html' }).then(console.log);

/* Result {
  from: 'component.html',
  to: 'component.html',
  root: Fragment {
    name: '#document-fragment',
    nodes: NodeList [
      Element {
        name: "my-component",
        attrs: AttributeList [
          { name: "class", value: "main" }
        ],
        nodes: NodeList [
          Text "\n  ",
          Element {
            name: "title",
            nodes: NodeList [
              Text "Super Title"
            ]
          },
          Text "\n  ",
          Element {
            name: "text",
            nodes: NodeList [
              Text "Awesome Text"
            ]
          },
          Text "\n"
        ]
      }
    ]
  }
}

Using Plugins in Node

Add a pHTML Plugin to your build tool:

npm install phtml-some-thing --save-dev
const phtml = require('phtml');
const postHtmlSomeThing = require('phtml-some-thing');

phtml.use(
  postHtmlSomeThing(/* pluginOptions */)
).process(YOUR_HTML);

Plugins

Plugin Creation

Create plugins directly from the command line:

npm init phtml-plugin

# Plugin Name: Example (becomes `pHTML Hello` / `phtml-hello`)
# Keywords: awesome,blossom (added to package.json keywords)

Once the command finishes, a new plugin is fully scaffolded with bare functionality, documentation, and tests. Within the plugin directory, functionality is added to src/index.js.

Advanced Plugin Creation

Create plugins using a new Plugin class:

import phtml from 'phtml';

export default new phtml.Plugin('phtml-hello', pluginOptions => {
	// initialization logic

  return {
    Element(element, result) {
      // runtime logic, do something with an element
    },
    Root(root, result) {
      // runtime logic, do something with the root
    }
  };
});

The runtime plugin can visit nodes as they are entered or exited.