search

quarkiverse / quarkus-web-bundler

Create full-stack web apps quickly and easily with this Quarkus extension. It offers zero-configuration bundling for your web app scripts (JS, JSX, TS, TSX), dependencies (jQuery, React, htmx, etc.), and styles (CSS, SCSS, SASS).
Apache License 2.0
16 stars 9 forks source link

How to get separate stylesheets for server-side components? #191

Open wowselim opened 3 months ago

wowselim commented 3 months ago

Hey,

I've been following the guide on the docs and noticed that all the stylesheets for server-side components are combined into one css resource. This means that even if a page only uses one component it imports the stylesheets for all components. I guess this also applies to the js?

https://docs.quarkiverse.io/quarkus-web-bundler/dev/advanced-guides.html#qute-components

Here's the root template:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Login</title>
{#bundle /}
</head>
<body>
<h1>Login</h1>

{#login /}
</body>
</html>

Here's the css that's included on that page:

/* components/login/login.scss */
form {
  background-color: #fff;
  border: 5px solid #000;
}

/* components/sidebar/sidebar.module.scss */
* {
  color: blue !important;
}
/*# sourceMappingURL=/static/bundle/components-TCCAMGQL.css.map */

Notice how the template doesn't use the sidebar component.

ia3andy commented 3 months ago

@wowselim what about creating multiple entrypoints (one for each page) containing the component for that page?

quarkus.web-bundler.bundle.main=true
quarkus.web-bundler.bundle.main.qute-tags=true 
quarkus.web-bundler.bundle.page1=true
quarkus.web-bundler.bundle.page1.qute-tags=true 
quarkus.web-bundler.bundle.page2=true
quarkus.web-bundler.bundle.page2.qute-tags=true

src/main/resources/web/main/... src/main/resources/web/page1/... src/main/resources/web/page2/...

{#bundle key="main" /}
{#bundle key="page1" /}

You can even have a main containing components on both pages.

ia3andy commented 3 months ago

I wouldn't optimise too much tough, depending on the case of course, I don't think the overhead is big when having a few more css lines and scripts even if they are not used on that particular page.

wowselim commented 3 months ago

@ia3andy with the css it might not be a huge problem but I think with js it's more of an issue especially if you do things like adding event listeners to certain elements. If the element is not present (because you don't reference the component) that's more of a problem and you will have to add checks in your scripts to account for this.

Think about this:

<div role="button" class="my-fancy-button" id="submit-button">Click me</div>
const button = document.querySelector("#submit-button")
button.addEventListener(… // kaboom! button is undefined

Therefore I think it would be really nice to have this feature.

ia3andy commented 3 months ago

What about the solution I suggested above? I am not sure I see your point, the good thing with the current approach is that your code is minified and optimised (and common code is put in a split shared script), also you can use import libraries and use them. See: https://github.com/ia3andy/renotes/blob/main/src/main/resources/web/components/NoteEditor/NoteEditor.js

blazmrak commented 2 months ago

@ia3andy with the css it might not be a huge problem but I think with js it's more of an issue especially if you do things like adding event listeners to certain elements. If the element is not present (because you don't reference the component) that's more of a problem and you will have to add checks in your scripts to account for this.

Think about this:

<div role="button" class="my-fancy-button" id="submit-button">Click me</div>
const button = document.querySelector("#submit-button")
button.addEventListener(… // kaboom! button is undefined
button?.addEventListener( // boom avoided

Seem to be a good practice anyways https://ricostacruz.com/rsjs/#avoid-side-effects

ia3andy commented 2 months ago

@all-contributors please add @blazmrak for mentoring

allcontributors[bot] commented 2 months ago

@ia3andy

I've put up a pull request to add @blazmrak! :tada:

ia3andy commented 2 months ago

@all-contributors please add @wowselim for question

allcontributors[bot] commented 2 months ago

@ia3andy

I've put up a pull request to add @wowselim! :tada: