search

adobe / htlengine

An HTL (Sightly) Interpreter/Compiler for Node.js
Apache License 2.0
47 stars 20 forks source link

variable defined by data-sly-use cannot be found unless it is lowercase #254

Closed CodeByAlex closed 3 years ago

CodeByAlex commented 3 years ago

Example from the Adobe 6.5 Core Components Library:

<button data-sly-use.button="com.adobe.cq.wcm.core.components.models.Button" data-sly-use.icontemplate="icon.html" data-sly-element="${button.link ? 'a' : 'button'}" class="cmp-button" href="${button.link}" aria-label="${button.accessibilityLabel}">
    <sly data-sly-call="${iconTemplate.icon @ icon=button.icon}"></sly>
    <span data-sly-test="${button.text}" class="cmp-button__text">${button.text}</span>
</button>

In this instance, we see the variable defined as data-sly-use.icontemplate but when used later in the HTL it is called with camel case <sly data-sly-call="${iconTemplate.icon @ icon=button.icon}"></sly>. The htl engine cannot find the icontemplate variable so it throws the following exception:

image

This is the case with all core components (from what I can tell) which either means that the htl engine should be picking up on the camel-cased usage or all of the core components that have multi-word variable names must be updated.

Proposal:

When checking the variable names in the htl for a match against the instantiated variable name, please run a toLowerCase() on each

Expected result:

<sly data-sly-call="${iconTemplate.icon @ icon=button.icon}"></sly> should work properly if the variable is defined as data-sly-use.icontemplate="icon.html"

@tripodsan and I spoke about this offline

To test all of the core components against the htl engine, pull down the following branch of storybook-aem: https://github.com/storybookjs/aem/tree/include-support-3rd-party then:

  1. run yarn from the root
  2. run yarn build from the root
  3. open a new terminal tab and cd into examples/aem-kitchen-sink
  4. run yarn storybook.

You will then see all of the components in isolation:

image

tripodsan commented 3 years ago

related: https://github.com/adobe/htl-spec/blob/master/SPECIFICATION.md#211-identifiers

Top top-level identifiers are case-insensitive (because they can be set through HTML attributes which are case-insensitive), but all their properties are case-sensitive.

adobe-bot commented 3 years ago

:tada: This issue has been resolved in version 6.2.1 :tada:

The release is available on:

Your semantic-release bot :package::rocket: