Unsuccessful migration from Thymeleaf 2.1 to 3.0

classic Classic list List threaded Threaded
4 messages Options
Reply | Threaded
Open this post in threaded view
|

Unsuccessful migration from Thymeleaf 2.1 to 3.0

Emiliano Schiano
This post was updated on .
I'm trying to migrate to the new thymeleaf release (3.0.0).
I made the config changes following the migration guide.
   * ServletContextTemplateResolver > SpringResourceTemplateResolver
   * Set the application context to the SpringResourceTemplateResolver
   * TemplateResolver > ITemplateResolver
   * setTemplateMode with enum TemplateMode.HTML
       
The only problem I detected was with the 'script' tag.
I had to change this (ignore extra white spaces):
   <script th:src="@{/resources/jquery/jquery.js}" / >

  With this:
   <script th:src="@{/resources/jquery/jquery.js}">< / script>

After that, even though the application started up ok, the result was a bit weird (ugly).
All pages seem to be broken. They show the content and respect the prevoius behaviour but every component on the interface does not fit like with the 2.1.4 version.

With thymeleaf 2.1.4
https://drive.google.com/open?id=0B0KQHzLMg_0xR3ZPV0tqS2lnVlE

With thymeleaf 3.0.0
https://drive.google.com/open?id=0B0KQHzLMg_0xNG45RHNwWmk3MHM

Any help is welcome!
Reply | Threaded
Open this post in threaded view
|

Re: Unsuccessful migration from Thymeleaf 2.1 to 3.0

danielfernandez
Administrator
Could you please describe the reasons why you had to do such change in your <script> tag? Also, Can you please compare the resulting HTML code after processing with 2.1.4 and 3.0.0 and post the differences here or at a GitHub ticket?
Reply | Threaded
Open this post in threaded view
|

Re: Unsuccessful migration from Thymeleaf 2.1 to 3.0

Emiliano Schiano
Hi Daniel,
The reason why I had to do such change was because it seems that the 3.0 version does not generate de end tag so the browser does not interpret the code correctly.

For example (ignore the extra white spaces):
< script type="text/javascript" src="/proeza-sgs/resources/jquery/jquery.js" / >
< script type="text/javascript" src="/proeza-sgs/resources/bootstrap/js/bootstrap.js" > < / script >
< script type="text/javascript" src="/proeza-sgs/resources/metismenu/js/metisMenu.js" > < / script >

The first script tag does not end with </script>. Looking at the source code in the browser (using chrome) the result shows the second line without syntax coloring, like it's not really interpreting it as a script tag. It's like it's expecting the end tag </script> of the first line and ignoring the '/>'.

As you suggested, comparing the html generated with the two different versions of thymeleaf (3.0 and 2.1.4) it seems that the same happens to other tags.

Replacing in the html the < i ...  / > for < i ... >< / i> and the same for the div tags solved the problem.


I´m not a really frontend dev, so I just dont know if it's a good practice to use the end tag explicity or not and if this is an issue more of the browser than thymeleaf. (I tested it on firefox with the same results). What is weird is that the same code parsed with the same engine produces different results.
By now, on my project the changes made solved the problem, but I dont know if there are other tags with the same unexpected behaviour.

Regards.
Reply | Threaded
Open this post in threaded view
|

Re: Unsuccessful migration from Thymeleaf 2.1 to 3.0

danielfernandez
Administrator

OK, now I understand. This is intended behaviour.

According to the HTML specifications, the <script> tag requires a corresponding close tag. So syntax such as <script /> is not HTML-valid. That's why your browser does not like it.

The difference with Thymeleaf 2.1 is that the new parser in 3.0 does really understand HTML and allows your output to look much more like the original input. So that <script /> goes unmodified to output and your browser complains. Until now, you were relying on the fact that Thymeleaf 2.1 used an XML parser (not an HTML one) and was fixing your markup as a sort of lateral (I'd say undesired) effect.