Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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.

About

Transform inline JS in HTML

Resources

License

Releases

No releases published

Packages

No packages published