DplLiquid Web Component

DplLiquid is a web component that renders the content liquid template give data via the data attribute, or the queries attribute.

You can see the demo & or options here:

Adding to a page

just add the following script tag to your page: <script type="module" src="https://components.dynamicplatform.com/dpl-liquid/1.0.0/dpl-liquid.js"></script>

Usage

To use the DplMonaco component in your HTML:

<dpl-liquid data="{'name': 'Little John'}">
    <div>
        Hello {{data.name}}
        <pre>{{data|json}}</pre>
    </div>
</dpl-liquid>

Remember to escape your liquid if you are using in a Server side rendered liquid template like so:

<dpl-liquid data="{'name': 'Little John'}">
{% raw %}
    <div>
        Hello {{data.name}}
        <pre>{{data|json}}</pre>
    </div>
{% endraw %}
</dpl-liquid>

Attributes

• data: a json string that will be parsed and passed to the liquid template. single quotes are replaced with double quotes, so you can use single quotes in your json.
• queries: a dictionary of named queries that will be fetched using the value as the uri (can be relative or absolute) placed in to a liquid variable using the key as the name of the variable.

## Release Notes


- v1.0.0 [2024-01-05] dpl-liquid relase tweeks (f8782b7de8bf1f523cd20a4be9cc5d78660b9d10)

- v1.0.0 [2024-01-05] allow html in templates (7cdf6d4b6bc555e1985c113be283ebc06de66aa7)