search

adobe / htlengine

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

Interested in this work #129

Closed CodeByAlex closed 4 years ago

CodeByAlex commented 4 years ago

Could a maintainer/core contributor please reach out? I'm looking to use this and have a few questions.

twitter: @codebyalex website: codebyalex.com

or please respond to this issue

@trieloff @tripodsan @dominique-pfister

trieloff commented 4 years ago

Happy to help, ask away, Alex.

CodeByAlex commented 4 years ago

Hey @trieloff, thanks for the quick response.

My objective is to take AEM 6.4/6.5 HTL components and compile them down to html. I need to be able to pass these components mock data and include any templates referenced in the component. Is this possible with the HTL Engine? If so, here are a few additional questions:

How much of the HTL spec does this engine cover? Or is there a list of features that aren't covered? For the use case, I'm looking to leverage this for, I want to make sure it can handle complex components Ex: data-sly-repeat, data-sly-list, data-sly-test, data-sly-resource, data-sly-use, data-sly-template, data-sly-call, data-sly-attribute

Is there any documentation about how to pass data into the component or are there ways to mock models?

tripodsan commented 4 years ago

is this possible with the HTL Engine?

with a bit tweaking, it's certainly possible.

How much of the HTL spec does this engine cover?

most of the spec is covered, although some of the 1.4 features are still missing (see #1). some of the special features that deal with resource loading are not implemented, since they require a AEM/Sling request dispatcher (like manipulating request info, like selectors, etc).

Is there any documentation about how to pass data into the component

see the tests, but basically you compile a script and then execute it using some data: https://github.com/adobe/htlengine/blob/master/test/engine_test.js

or are there ways to mock models?

I think the biggest problem will be, that you need to emulate an AEM/sling request dispatcher and resource loader. since rendering a page in AEM usually involves several (htl) components and loads data from several places in AEM.

in anycase, I'm happy to assist. :-)

thedamon commented 4 years ago

Apologies for randomly jumping in here.. I am also interested in this work. Would this be useful to perform linting on our htl files? I'm trying to find a way to check htl files for syntax errors and incorporate it into a CI system

CodeByAlex commented 4 years ago

is this possible with the HTL Engine?

with a bit tweaking, it's certainly possible.

How much of the HTL spec does this engine cover?

most of the spec is covered, although some of the 1.4 features are still missing (see #1). some of the special features that deal with resource loading are not implemented, since they require a AEM/Sling request dispatcher (like manipulating request info, like selectors, etc).

Is there any documentation about how to pass data into the component

see the tests, but basically you compile a script and then execute it using some data: https://github.com/adobe/htlengine/blob/master/test/engine_test.js

or are there ways to mock models?

I think the biggest problem will be, that you need to emulate an AEM/sling request dispatcher and resource loader. since rendering a page in AEM usually involves several (htl) components and loads data from several places in AEM.

in anycase, I'm happy to assist. :-)

@tripodsan Thanks for getting back so quickly - We are currently looking into htl-compiler as well as htlengine to see what fits our needs best. At a high level, we are working to provide first-class support for AEM in Storybook (https://github.com/storybookjs/storybook) rather than having devs continue to use react wrappers. It would be ideal for us to leverage the htlengine since it is supported by adobe and maintained to adhere to the spec. This will be a huge AEM developer experience win when it's all said and done and it would be great to have your assistance accomplishing that. Would you be interested in working together on this?

tripodsan commented 4 years ago

Apologies for randomly jumping in here.. I am also interested in this work. Would this be useful to perform linting on our htl files? I'm trying to find a way to check htl files for syntax errors and incorporate it into a CI system

unfortunately, the html/htl parse don't create a parse tree, so I guess it is difficult to enforce linting rules beyond the simple syntax error. but errors in HTL expressions or unmatched tags should be detectable.

tripodsan commented 4 years ago

Would you be interested in working together on this?

yes, I'm interested and offer to help as much as I can. /cc @gabrielwalt

CodeByAlex commented 4 years ago

Great to hear @tripodsan - could you go to my site and send me a quick message with your email? http://codebyalex.com/ We have a discord group that I can invite you to. @gabrielwalt, if you are interested, please do the same (wish github had messaging still - maybe one day)

tripodsan commented 4 years ago

@CodeByAlex ok. I assume storybook is an open source project - so I assume that most of the project discussions should also happen in an open source fashion. so far I haven't seen any AEM related issues or projects yet though....

CodeByAlex commented 4 years ago

@tripodsan Yeah for sure - this is a brand new “app” as part of Storybook (started this past weekend). Right now it’s not a part of the storybook Official project which is why you don’t see any issues created but the lead maintainer on the storybook project @shilman is working with us on this. We plan to move it into the storybook project as it matures - wonder what @shilman thinks about expediting this process. This project is open sourced here (will be adding to the readme): https://github.com/CodeByAlex/storybook-aem-native/tree/master/app/aem. It’s fully open source and plan to keep it that way. Haven’t formally posted the discord yet since we just started so I’ve been sending out links individually. The storybook community itself runs off of discord and it works well. You can access the storybook aem discord here: https://discord.gg/Qbw884j. The storybook official discord is here: https://discord.gg/JHr9JYs.

Looking forward to working with you all on this! If you have any more questions, please feel free to ask

Update: the storybook aem project has been moved to a new location underneath the storybook group! You can find it here: https://github.com/storybookjs/aem/tree/master/app/aem.

trieloff commented 4 years ago

Note to @tripod and @ktpadobe: depending on where this goes, we might also want to think about a Storybook integration for Helix itself.

tripodsan commented 4 years ago

@trieloff right now, we don't have so many components in a typical helix project....so I don't know....

tripodsan commented 4 years ago

@CodeByAlex I'm closing this issue as your questions have probably been answered by now :-)