adobe / adobe/aem-project-archetype

[question] ui.frontend - ability to encapsulate HTL, SCSS, JS together or scoped to clientlibs with SASS/ES6

Open
#522 0 comments 0 reactions 0 assignees View on GitHub
question
Dominant language
JavaScript
Stars
596
Forks
431
Avg merge
10d 6h
Merged PRs (30d)
1

Description

This is more of a question as I couldn't find an example or tutorial that explains it. Could someone please explain/point me in the right step as I am in the process of migrating/trialing the new `ui.frontend` folder structure

- As per my observations the entire directory `ui.frontend` is not synced/mirrored to the HTL components in `ui.apps`. For example, if a new functional component or experience fragment called `callout-banner` is created in HTL, it is not linked/related as a manual folder `ui.frontend\src\main\webpack\components\callout-banner` needs to be created and that can have a `callout-banner.scss` and `callout-banner.js` - both of which are tracked due to globbing

- So my question is, would it still not be possible to access or have the `callout-banner.html` (HTL) in the frontend folder? This kind of defeats the purpose of encapsulation of front end as the HTL still sits in the `ui.apps` folder.

- My other question is around client libraries which allow 'scoped' CSS and JS. Example

```
callout-banner
clientlibs
css
js
.content.xml
css.txt
js.txt
.content.xml
callout-banner.html (HTL)

```

Given that the `ui.apps` is not managed in Webpack, would it not be possible to use SASS and ES6 as part of these clientlibs? If not, is there a way to somehow copy/move these into the 'scoped level' clientlibs as part of the webpack build as it appears that the compiled minified site.js and site.css is still a global module and not scoped - something that could have performance implications on the site.

Any thoughts/suggestions appreciated.

Contributor guide

Open the contributing guide

Research direction

Compare ui.frontend/src/main/webpack/components with the HTL components and clientlibs under ui.apps. Start by tracing the Webpack build and its handling of site.js, site.css, and clientlib files. Done would require a documented, agreed approach for associating HTL, SASS, and ES6 at component or scoped-clientlib level.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, sass
Domain
build-system, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
20/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.