Skip to content
Use pHTML with 11ty
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src 1.1.0 Apr 19, 2019
test 1.0.0 Apr 19, 2019
.editorconfig 1.0.0 Apr 19, 2019
.gitignore 2.1.0 May 17, 2019
.travis.yml
CHANGELOG.md 2.1.0 May 17, 2019
CONTRIBUTING.md
LICENSE.md 1.0.0 Apr 19, 2019
README.md
babel.config.js 2.0.0 May 6, 2019
package.json 2.1.0 May 17, 2019
rollup.config.js 1.0.0 Apr 19, 2019

README.md

pHTML Eleventy pHTML

NPM Version Build Status Support Chat

pHTML Eleventy lets you use pHTML to process HTML files in Eleventy.

Installation

Available on npm.

npm install @phtml/11ty --save-dev

Open up your Eleventy config file (probably .eleventy.js) and use addPlugin:

const phtml11ty = require('@phtml/11ty');

module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(phtml11ty);
};

Options

Optionally pass in an options object as the second argument to addPlugin to further customize this plugin pack.

const phtml11ty = require('@phtml/11ty');

module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(phtml11ty, {
    // {Array|Object|Plugin} plugin or plugins to be used by pthml
    use,

    // {Boolean} whether relative paths should reference the source or output path
    useInputPath
  });
};

Example

const phtml11ty = require('@phtml/11ty');
const phtmlDoctype = require('@phtml/doctype');
const phtmlSelfClosing = require('@phtml/doctype');

module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(phtml11ty, {
    // prepend <!doctype html> when a html, head, or body tag is present
    use: phtmlDoctype({ safe: true })
  });
};

Example with Multiple Plugins

The following example uses the Doctype, Self-Closing, and Template,

const phtml11ty = require('@phtml/11ty');
const phtmlDoctype = require('@phtml/doctype');
const phtmlSelfClosing = require('@phtml/self-closing');
const phtmlTemplate = require('@phtml/template');

module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(phtml11ty, {
    use: [
      // prepend <!doctype html> when a html, head, or body tag is present
      phtmlDoctype({ safe: true }),
      // unwrap <self-closing /> tags
      phtmlSelfClosing(),
      // pre-compiled templates using <is:template name="tmpl" /> & <as:template name="tmpl" />
      phtmlTemplate()
    ]
  });
};

Example with Transform Function

The use option accepts an object with a transformFunction function for accessing template configuration during plugin initialization.

const phtml11ty = require('@phtml/11ty');
const phtmlJsx = require('@phtml/jsx');

module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(phtml11ty, {
    use: {
      transformFunction (template) {
        // support JSX in HTML
        return phtmlJsx({ data: template.dataCache });
      }
  });
};
You can’t perform that action at this time.