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

Run JavaScript inside of Alpine.js directives through Babel

License

Notifications You must be signed in to change notification settings

HugoDF/alpine-inline-babel

Repository files navigation

Alpine.js Inline Babel

Run Babel on inline Alpine.js directive code.

Installation

alpine-inline-babel is a PostHTML plugin.

You can install it as follows (ignore posthtml & @babel-* if they're already installed).

npm install --save-dev alpine-inline-babel @babel/core @babel/preset-env posthtml
# or
yarn add --dev alpine-inline-babel  @babel/core @babel/preset-env posthtml

Usage

const posthtml = require('posthtml');
const inline = require('alpine-inline-babel');

// `targets` is babel-preset-env targets,
// see https://babeljs.io/docs/en/babel-preset-env#targets
posthtml([inline({targets: {ie: '11'}})])
  .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);
  });

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.

About

Run JavaScript inside of Alpine.js directives through Babel

Topics

Resources

License

Stars

Watchers

Forks

Sponsor this project