@shopify/liquid-html-parser NPM

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.

ohm-js line-column

@everything-registry/sub-chunk-831 liquid-to-js @brandboostinggmbh/painless-melter-plugins @shopify/theme-check-common @shopify/theme-language-server-common @shopify/prettier-plugin-liquid @josesame/liquidity

6 months ago

9 months ago

11 months ago

11 months ago

11 months ago

8 months ago

9 months ago

9 months ago

8 months ago

8 months ago

7 months ago

7 months ago

12 months ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago