Skip to content
Transform inline JS in HTML
JavaScript HTML
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
test
.editorconfig
.gitignore
.rollup.js
.tape.js
.travis.yml
CHANGELOG.md
CONTRIBUTING.md
INSTALL.md
LICENSE.md
README.md
package.json

README.md

pHTML JS pHTML

NPM Version Build Status Support Chat

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.

You can’t perform that action at this time.