Sub-Themes

Flow
1

Hey :slightly_smiling_face: I do have a problem with Subthemes. I do have the following project setup:

  • core
  • basic
  • customer

The customer project depends on the basic project and the basic project depends on the core project. Each project has a theme.
In the theme.json of the customer project I added the parent: { "parent": "basic-project" } (same for the basic project with the core theme).

When I start the basic project everything works as expected. The core theme is used as a parent with the basic theme on top.
But if I start the customer project, it seems to load only the basic theme without the core theme.

What would be the correct way to do this? Can I define multiple parents or is it possible to load it manually somehow?

In the frontend/generated/jar-resources/themes folder of my customer project both themes (core and basic) are present… i think it just needs to be loaded?

Iam using Vaadin Flow 24.2.2 with Spring Boot 3.1.5

2

And the names set for the value of "parent" matches the folder names in /frontend/.../themes/THEME_NAME_FOLDER?

3

@yummy-boar

4

Yes checked it multiple times ^^

5

That’s super weird

6

So…

7

This should handle parents of parents of parents … https://github.com/vaadin/flow/blob/main/flow-server/src/main/resources/plugins/application-theme-plugin/theme-handle.js#L235-L261

8

You could try adding some console.logs to /{build|target}/plugins/application-theme-plugin/theme-handle.js#collectParentThemes to see if it is actually finding the parent theme.

9

good idea. ill give it a try

10

I am happy to look at your project if you want to create a minimal, reproducible example and put on GitHub

11

You may as well do those two things together, right?

12

Who knows, it may work in a minimal project

13

the file gets replaced as soon as I run the build
Edit: solved that issue

Looks like the themes.json does not get copied into the themes folder… will investigate more after some hours of sleep ^^

14

Yes thats most likely my problem. The theme.json’s are missing on my customer project in the frontend/generated/jar-resources/themes
They are present in the jar, but are not copied into the generated folder. If I manually add them and run the vite build, it looks like everything works then… Any idea what iam missing?

15

I created a minimal reproducible example. It seems to work when there are no extra NpmPackages in the project. The core theme got loaded as expected. But as soon as I added a NpmPackage it does no longer load the core theme.

Ill upload the example to Github asap
image.png

16

Sounds like a good investigation to be posted on GitHub to be checked by the flow team. All my custom parent themes also contain only “static” code and no external npm stuff

17

I uploaded the example project to Github: https://github.com/DerAzubi/vaadin-subtheme-problem
Should I open a issue in the vaadin flow repo or should I wait until someone responses here? Iam not really sure, if its a bug or if Iam just stupid/doing something wrong. Dont wanna waste other peoples time

18

So many moving parts and way too many things I haven’t expected from parent themes :sweat_smile: spring boot Dependency, same package names (core and core) different AppShells etc. this looks like something unexpected to happen :see_no_evil:

19

I personally would also expect no frontend folder in the parent themes. It’s normally within resources

20

At least that’s how I’ve build it:

company-base → department-base → application

Where application has department-base and parent and department-base uses company-base.