Novices Performing Miracles
Wondering what’s next for npm?Check out our public roadmap! »

@phtml/11ty

2.1.0 • Public • Published

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 });
      }
  });
};

Install

npm i @phtml/11ty

DownloadsWeekly Downloads

1

Version

2.1.0

License

CC0-1.0

Unpacked Size

14.3 kB

Total Files

6

Last publish

Collaborators

  • avatar