@shopify/liquid-html-parser
v2.0.3
Published
Liquid HTML parser by Shopify
Downloads
344,482
Maintainers
Keywords
Readme
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
# with npm
npm install @shopify/liquid-html-parser
# with yarn
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.