pHTML JS

pHTML JS lets you transform inline JS in HTML.

<script>document.addEventListener('DOMContentLoaded', () => {})</script>

<button onClick="console.log({ event })"></button>

<!-- becomes (when processed with @babel/preset-env) -->

<script>document.addEventListener('DOMContentLoaded', function () {})</script>

<button onClick="console.log({ event: event })"></button>

Usage

Transform HTML files directly from the command line:

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

Node

Add pHTML JS to your project:

npm install @phtml/js --save-dev

Use pHTML JS to process your HTML:

const phtmlJs = require('@phtml/js');

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

Or use it as a pHTML plugin:

const phtml = require('phtml');
const phtmlJs = require('@phtml/js');

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

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

| Node | CLI | Eleventy | Gulp | Grunt | | --- | --- | --- | --- | --- |

Options

presets

The plugins option defines the plugins applied to Babel.

phtmlJs({
  plugins: ['@babel/syntax-dynamic-import']
})

plugins

The presets option defines the presets applied to Babel.

phtmlJs({
  presets: [
    ['@babel/env', {
      loose: true,
      modules: false,
      targets: 'last 2 versions, not dead',
      useBuiltIns: 'entry'
    }]
  ]
})

transformOptions

The transformOptions option defines the transform options provided to Babel. By default, these options enable sourcemaps. You can disable them by passing in an empty object.

phtmlCss({
  transformOptions: {}
})

sourceMapAttributes

The sourceMapAttributes option determines whether source maps will be added to on attributes. These actually work, but the feature is disabled by default.