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.
# with npm
npm install @shopify/liquid-html-parser
# with yarn
yarn add @shopify/liquid-html-parserimport { 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>
`);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 }}="...">MIT.