Skip to content
This repository has been archived by the owner on Jul 6, 2021. It is now read-only.

Transpile inline Alpine.js directive code

License

Notifications You must be signed in to change notification settings

HugoDF/alpine-inline-transpile

Repository files navigation

Alpine.js Inline Transpile

Transpile inline Alpine.js directive code

Installation

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

Usage

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

Options

Requirements

  • Node 10
  • Yarn 1.x or npm

Setup

  1. Clone the repository
  2. Run yarn or npm install installs all required dependencies.

npm scripts

Equivalent npm run <script> should also work

  • yarn test will run tests with uvu
  • yarn lint will lint all of the files with xo
  • yarn fmt will run lint with --fix option on all the examples files (and tests).

LICENSE

Code is licensed under the MIT License.