search

headwirecom / peregrine-cms

an api first, head optional cms with based on vuejs and apache sling
Apache License 2.0
52 stars 31 forks source link

HTL components in a Vue site #622

Closed cmrockwell closed 3 years ago

cmrockwell commented 3 years ago

User Story

(current condition) Given my htl component is used at componentPath And the resource type implements HTL in htl-comp.html within apps Then my component will render when requested directly through the componentUrl

(request) Given page is a Vue rendering site and contains both vue and htl components When I view pageUrl Then there is an vue wrapper for my htl components that fetch the componentUrl html And everything renders nice

examples page = /content/pagerendervue/pages/about pageUrl /content/pagerendervue/pages/about.html componentPath = /content/pagerendervue/pages/about/_jcr_content/content/htl-comp componentUrl = /content/pagerendervue/pages/about/_jcr_content/content/htl-comp.html

Describe the solution you'd like A clear and concise description of what you want to happen.

Additional context HTL is a very common rendering technology for Apache Sling applications. HTL reference info https://sling.apache.org/documentation/bundles/scripting/scripting-htl.html https://github.com/adobe/htl-spec https://docs.adobe.com/content/help/en/experience-manager-htl/using/getting-started/getting-started.html

reusr1 commented 3 years ago

@cmrockwell thinking about this a bit we would also have to figure out how we would want to make these components work in the editor - currently vue components enjoy an automatic update when editing the component. With a server side rendered component we currently can only update the rendering at save unless it is an inline change.

there is also an open source implementation of a htl render for nodejs: https://github.com/adobe/htlengine - could that be an option in this case as well?

cmrockwell commented 3 years ago

Wouldn't editing HTL (server) components need a refresh hook even if then entire site used server-side rendering? I get that Vue components have it done automatically through data binding. I think a callback pattern to get and refresh a component's state after edits would be needed if server-side components are supported at all by the CMS.

I looked at htlengine for a few minutes. I think it could make a lot of sense for Peregrine as a client rendering option. It's not exactly the 'tried and true' html that I was hoping for. I was bit lost in the docs. However if other tickets in the project are resolved with standard server htl, then it would be pretty interesting solving this one with htlengine