A server/static renderer for Alpine.js templates
npm install --save alpine-server-render
# or with Yarn
yarn add alpine-server-render
Then in a JavaScript/TypeScript file:
const {render, load} = require('alpine-server-render');
// or using ESM imports
import {render, load} from 'alpine-server-render';
Straight render:
const html = render(`<div x-data="{ msg: 'Hello' }" x-text="msg"></div>`);
// `<div x-data="{ msg: 'Hello' }" x-text="msg">Hello</div>`
With Alpine.js attributes/templates stripped:
const html = render(`<div x-data="{ msg: 'Hello' }" x-text="msg"></div>`, { strip: true });
// `<div>Hello</div>`
With overriding of top-level x-data:
const html = render(
`<div x-data="{ msg: 'Hello' }" x-text="msg"></div>`,
{data: {msg: 'testing message'}, strip: true}
);
// '<div>testing message</div>'
- 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 lint
will lint all of the files with xoyarn format
will run lint with--fix
option on all the examples files (and tests).
Code is licensed under the MIT License.