Liquid HTML parser
This module provides the Liquid HTML parser that powers the prettier plugin, linter and language server for Liquid-powered Shopify themes.
It turns a .liquid
file contents into an Abstract Syntax Tree (AST) that contains both Liquid and HTML nodes.
Installation
npm install @shopify/liquid-html-parser
yarn add @shopify/liquid-html-parser
Usage
import { toLiquidHtmlAST, LiquidHtmlNode, NodeTypes } from '@shopify/prettier-plugin-liquid';
const ast: LiquidHtmlNode = toLiquidHtmlAST(`
<body>
{% for product in all_products %}
<img src="{{ product | image_url }}">
{% endfor %}
</body>
`);
You should know
Because Liquid is very permissive, things like the name
of an HTML tag may have a surprising type: an array of LiquidVariableOutput | TextNode
.
This is because the following use cases are supported by the parser:
{% # compound html tag names %}
<tag-{{ name }}>
</tag-{{ name }}>
{% # compound html attribute names %}
<img data-{{ attr_name }}="...">
License
MIT.