feat: Lit templates in Vite dev and prod mode #12204

joheriks · 2021-11-01T07:41:05Z

Dev mode: load template from file system (looking into frontend, @node_modules/@vaadin/flow-frontend, @node_modules (for paths not starting with ./)).
Prod mode: copy templates to target/classes/META-INF/VAADIN/config/templates as part of build-frontend task. I.e., template sources are no longer gotten from stats.json.

sonatype-lift · 2021-11-01T08:14:51Z

flow-server/src/main/java/com/vaadin/flow/server/frontend/TaskCopyTemplateFiles.java

+                try {
+                    FileUtils.copyFileToDirectory(source, target);
+                } catch (IOException e) {
+                    e.printStackTrace();


CatchAndPrintStackTrace: Logging or rethrowing exceptions should usually be preferred to catching and calling printStackTrace
(at-me in a reply with help or ignore)

Artur-

Is there a reason we should not change webpack to work the same way at the same time?

...ontend/vite-production/src/main/java/com/vaadin/viteapp/views/template/PolymerComponent.java

vaadin-dev-server/src/main/java/com/vaadin/base/devserver/WebpackHandler.java

flow-server/src/main/java/com/vaadin/flow/internal/DevModeHandler.java

flow-server/src/main/java/com/vaadin/flow/server/frontend/FrontendUtils.java

vaadin-dev-server/src/main/java/com/vaadin/base/devserver/ViteHandler.java

...late/src/main/java/com/vaadin/flow/component/littemplate/internal/LitTemplateParserImpl.java

...ymer-template/src/main/java/com/vaadin/flow/component/polymertemplate/NpmTemplateParser.java

flow-server/src/main/java/com/vaadin/flow/internal/DevModeHandler.java

...late/src/main/java/com/vaadin/flow/component/littemplate/internal/LitTemplateParserImpl.java

Dev mode: load template from devserver:port/VAADIN/template.ts Prod mode: copy templates to META-INF/VAADIN/config/templates/template.ts.ts

… stats.json

…by node_modules

This reverts commit f2a40ba.

caalador

Seems fine as long as the webpack functionality is validated on Bakery or other template heavy application.

caalador · 2021-11-08T06:21:58Z

flow-server/src/main/resources/webpack.generated.js

@@ -236,7 +236,7 @@ module.exports = {
  devServer: {
    hot: false, // disable HMR
    client: false, // disable wds client as we handle reloads and errors better
-    // webpack-dev-server serves ./ ,  webpack-generated,  and java webapp
+    // webpack-dev-server serves ./Frontend ,  webpack-generated,  and java webapp
    static: [outputFolder, path.resolve(__dirname, 'src', 'main', 'webapp')],
    onAfterSetupMiddleware: function (devServer) {
      devServer.app.get(`/stats.json`, function (req, res) {


The stats.json and stats.hash endpoins could be removed as they are not used anymore.

Also stats plugin can be removed and only have the generated stats.json contain the result from ?stats.assetsByChunkName but this cleanup can be in a different ticket that should be created.

Done. Ticket for the remaining refactoring here: #12301

caalador · 2021-11-08T06:32:22Z

...t-frontend/vite-production/src/main/java/com/vaadin/viteapp/views/template/TemplateView.java

+import com.vaadin.flow.router.Route;
+
+@Route(TemplateView.ROUTE)
+public class TemplateView extends Div {


As the TemplateView and TemplateIT are equal should we have a common package with tests that would be used by both development tests and production tests?
see flow-tests/test-embedding/embedding-test-assets and flow-tests/test-embedding/embedding-test-assets for reference.

caalador · 2021-11-08T12:04:53Z

flow-tests/test-frontend/pom.xml

+        <module>embedding-test-assets</module>
+        <module>addon-with-templates</module>


Suggested change

<module>embedding-test-assets</module>

<module>addon-with-templates</module>

<module>addon-with-templates</module>

<module>vite-test-assets</module>

Copy paste name and wrong order.

😣 , done

vaadin-bot · 2021-11-08T12:25:58Z

SonarQube analysis reported 14 issues

11 major
3 minor

Top 10 issues

LitTemplateParserImpl.java#L98: Reduce the total number of break and continue statements in this loop to use at most one.
NpmTemplateParser.java#L104: Reduce the total number of break and continue statements in this loop to use at most one.
PolymerTemplate.java#L102: Remove this call from a constructor to the overridable "initModel" method.
NodeTasks.java#L1: Class com.vaadin.flow.server.frontend.NodeTasks$Builder defines non-transient non-serializable instance field lookup
NodeTasks.java#L148: Make "lookup" transient or serializable.
TaskCopyTemplateFiles.java#L69: Exceptional return value of java.io.File.mkdirs() ignored in com.vaadin.flow.server.frontend.TaskCopyTemplateFiles.execute()
AbstractDevServerRunner.java#L114: Make "devServerStartFuture" transient or serializable.
AbstractDevServerRunner.java#L191: Invoke method(s) only conditionally.
AbstractDevServerRunner.java#L382: Either re-interrupt this method or rethrow the "InterruptedException".
AbstractDevServerRunner.java#L608: Null passed for non-null parameter of java.util.concurrent.CompletableFuture.getNow(Object) in com.vaadin.base.devserver.AbstractDevServerRunner.handleRequest(VaadinSession, VaadinRequest, VaadinResponse)

joheriks · 2021-11-08T12:31:46Z

Bakery verified working with this PR snapshot:

	Vite	Webpack
Dev	✅	✅
Prod	✅	✅

vaadin-bot · 2021-11-12T13:47:24Z

This ticket/PR has been released with platform 22.0.0.beta2 and is also targeting the upcoming stable 22.0.0 version.

joheriks added the vite Tickets related to vite support label Nov 1, 2021

joheriks changed the title ~~Lit templates in dev and prod mode~~ Lit templates in Vite dev and prod mode Nov 1, 2021

vaadin-bot added the +0.0.1 label Nov 1, 2021

sonatype-lift bot reviewed Nov 1, 2021

View reviewed changes

joheriks force-pushed the vite-templates branch 2 times, most recently from b595775 to 13648a4 Compare November 1, 2021 09:05

joheriks changed the title ~~Lit templates in Vite dev and prod mode~~ feat: Lit templates in Vite dev and prod mode Nov 1, 2021

joheriks force-pushed the vite-templates branch from 13648a4 to 107fc95 Compare November 1, 2021 12:50

joheriks marked this pull request as ready for review November 1, 2021 12:55

joheriks requested review from Artur- and caalador November 1, 2021 12:55

Artur- requested changes Nov 1, 2021

View reviewed changes

caalador requested changes Nov 2, 2021

View reviewed changes

caalador added this to In progress in Frontend build optimization via automation Nov 2, 2021

joheriks force-pushed the vite-templates branch from 89052fc to 2492315 Compare November 2, 2021 22:17

caalador reviewed Nov 3, 2021

View reviewed changes

...late/src/main/java/com/vaadin/flow/component/littemplate/internal/LitTemplateParserImpl.java Outdated Show resolved Hide resolved

joheriks force-pushed the vite-templates branch 2 times, most recently from 571caf9 to 4724805 Compare November 3, 2021 14:29

Johannes Eriksson added 11 commits November 3, 2021 17:49

Lit templates in dev and prod mode

cf3f18b

Dev mode: load template from devserver:port/VAADIN/template.ts Prod mode: copy templates to META-INF/VAADIN/config/templates/template.ts.ts

Polymer templates, ITs

5115268

Copy templates to META-INF/VAADIN/config/templates instead of parsing…

e1c3a7d

… stats.json

Fix Lit template tests

55608e6

Fix Polymer template tests

6a4cdec

Addressed Sonar and reviewer comments (partial)

d5c02b5

JavaDoc

5271e34

Fix test

5ba74d9

When JsModule path does not start with "./", check frontend followed …

a350b15

…by node_modules

Addressed review comments, removed dead code

91dd8f5

Cleanup, OSGI compatibility

4618c48

joheriks force-pushed the vite-templates branch from ecf962e to 4618c48 Compare November 3, 2021 16:41

Johannes Eriksson added 6 commits November 6, 2021 18:58

Do not assume node_modules exist when running prepare-frontend

f2a40ba

Revert "Do not assume node_modules exist when running prepare-frontend"

f2941eb

This reverts commit f2a40ba.

Copy templates in build-frontend instead of prepare-frontend

9f155a1

Marker interface for templates to invert bad dependency

f7124d4

Fix JavaDoc

5ef65d7

Make serializable

1810f26

caalador reviewed Nov 8, 2021

View reviewed changes

caalador self-requested a review November 8, 2021 06:35

Johannes Eriksson added 3 commits November 8, 2021 11:38

Don't serve stats.json / stats.hash

b1674ff

Fix comment

074f2fd

Common tests in vite-test-assets

f6071fe

joheriks mentioned this pull request Nov 8, 2021

Remove stats plugin from webpack configuration and reduce generated stats.json #12301

Closed

Include shared assets module

8088673

caalador reviewed Nov 8, 2021

View reviewed changes

Corrected module name

2f181f1

joheriks force-pushed the vite-templates branch from fbc6643 to 2f181f1 Compare November 8, 2021 12:11

s/IsTemplate/Template/

bddb255

caalador approved these changes Nov 8, 2021

View reviewed changes

Artur- approved these changes Nov 8, 2021

View reviewed changes

Artur- merged commit ad39b06 into master Nov 8, 2021

Artur- deleted the vite-templates branch November 8, 2021 16:22

Frontend build optimization automation moved this from In progress to Done Nov 8, 2021

joheriks mentioned this pull request Nov 9, 2021

[Vite] Template contents for Lit-/PolymerBundleParser (StatsPlugin) #12051

Closed

5 tasks

vaadin-bot added prerelease version for platform 22.0.0 Released with Platform 22.0.0.beta2 labels Nov 12, 2021

caalador mentioned this pull request Aug 2, 2022

Annoying Warnings - No lit template data found in.., Couldn't find the definition of the element.., Couldn't parse template for class.. #14247

Closed

Artur- mentioned this pull request Nov 2, 2022

chore: Remove unused code #14982

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Lit templates in Vite dev and prod mode #12204

feat: Lit templates in Vite dev and prod mode #12204

joheriks commented Nov 1, 2021 •

edited

sonatype-lift bot Nov 1, 2021

Artur- left a comment

caalador left a comment

caalador Nov 8, 2021

caalador Nov 8, 2021

joheriks Nov 8, 2021

caalador Nov 8, 2021

joheriks Nov 8, 2021

caalador Nov 8, 2021

joheriks Nov 8, 2021

vaadin-bot commented Nov 8, 2021

joheriks commented Nov 8, 2021

vaadin-bot commented Nov 12, 2021

		<module>embedding-test-assets</module>
		<module>addon-with-templates</module>

feat: Lit templates in Vite dev and prod mode #12204

feat: Lit templates in Vite dev and prod mode #12204

Conversation

joheriks commented Nov 1, 2021 • edited

sonatype-lift bot Nov 1, 2021

Choose a reason for hiding this comment

Artur- left a comment

Choose a reason for hiding this comment

caalador left a comment

Choose a reason for hiding this comment

caalador Nov 8, 2021

Choose a reason for hiding this comment

caalador Nov 8, 2021

Choose a reason for hiding this comment

joheriks Nov 8, 2021

Choose a reason for hiding this comment

caalador Nov 8, 2021

Choose a reason for hiding this comment

joheriks Nov 8, 2021

Choose a reason for hiding this comment

caalador Nov 8, 2021

Choose a reason for hiding this comment

joheriks Nov 8, 2021

Choose a reason for hiding this comment

vaadin-bot commented Nov 8, 2021

Top 10 issues

joheriks commented Nov 8, 2021

vaadin-bot commented Nov 12, 2021

joheriks commented Nov 1, 2021 •

edited