Transpile inline Alpine.js directive code
alpine-inline-transpile is a PostHTML plugin.
You can install it as follows (ignore posthtml
if it's already installed).
npm install --save-dev alpine-inline-transpile posthtml
# or
yarn add --dev alpine-inline-transpile posthtml
const posthtml = require('posthtml');
const inline = require('alpine-inline-transpile');
// `target` is an ECMAScript version
// see https://swc-project.github.io/docs/configuring-swc#jsctarget
posthtml([inline({target: 'es5'})])
.process(
`<div x-data="{ show: false }">
<button @click="show = !show">
Toggle
</button>
<div x-show="show">
Can be toggled
</div>
</div>`
)
.then(({html}) => {
// Do something with the HTML
console.log(html);
});
target
: the ECMAScript version to target (see https://swc-project.github.io/docs/configuring-swc#jsctarget), for IE11 use "es5"
- Node 10
- Yarn 1.x or npm
- Clone the repository
- Run
yarn
ornpm install
installs all required dependencies.
Equivalent
npm run <script>
should also work
yarn test
will run tests with uvuyarn lint
will lint all of the files with xoyarn fmt
will run lint with--fix
option on all the examples files (and tests).
Code is licensed under the MIT License.