Zenn
Open11

Vaadin Hilla(Fusion) の仕組みを探る

Java
TypeScript
vaadin
Tomofumi Chiba@仙台Tomofumi Chiba@仙台

Vaadin Hilla(Fusion) の Java のコードから TypeScript のコードを生成する仕組みが気になったので調べて見る。
dev 起動の仕組みも気になった。

Tomofumi Chiba@仙台Tomofumi Chiba@仙台

phase の一覧

$ ./mvnw spring-boot:run
--- maven-resources-plugin:3.2.0:resources (default-resources) @ hilla-grocery-app ---
--- hilla-maven-plugin:1.0.0.beta4:prepare-frontend (default) @ hilla-grocery-app ---
--- maven-compiler-plugin:3.8.1:compile (default-compile) @ hilla-grocery-app ---
--- maven-resources-plugin:3.2.0:testResources (default-testResources) @ hilla-grocery-app ---
--- maven-compiler-plugin:3.8.1:testCompile (default-testCompile) @ hilla-grocery-app ---
--- spring-boot-maven-plugin:2.5.8:run (default-cli) @ hilla-grocery-app ---

$ ./mvnw package spring-boot:repackage |grep ' --- '
[INFO] --- maven-resources-plugin:3.2.0:resources (default-resources) @ hilla-grocery-app ---
[INFO] --- hilla-maven-plugin:1.0.0.beta4:prepare-frontend (default) @ hilla-grocery-app ---
[INFO] --- maven-compiler-plugin:3.8.1:compile (default-compile) @ hilla-grocery-app ---
[INFO] --- maven-resources-plugin:3.2.0:testResources (default-testResources) @ hilla-grocery-app ---
[INFO] --- maven-compiler-plugin:3.8.1:testCompile (default-testCompile) @ hilla-grocery-app ---
[INFO] --- maven-surefire-plugin:2.22.2:test (default-test) @ hilla-grocery-app ---
[INFO] --- maven-jar-plugin:3.2.0:jar (default-jar) @ hilla-grocery-app ---
[INFO] --- spring-boot-maven-plugin:2.5.8:repackage (repackage) @ hilla-grocery-app ---
[INFO] --- spring-boot-maven-plugin:2.5.8:repackage (default-cli) @ hilla-grocery-app ---

$ ./mvnw help:describe -Dcmd=compile

* validate: Not defined
* initialize: Not defined
* generate-sources: Not defined
* process-sources: Not defined
* generate-resources: Not defined
* process-resources: org.apache.maven.plugins:maven-resources-plugin:2.6:resources
* compile: org.apache.maven.plugins:maven-compiler-plugin:3.1:compile
* process-classes: Not defined
* generate-test-sources: Not defined
* process-test-sources: Not defined
* generate-test-resources: Not defined
* process-test-resources: org.apache.maven.plugins:maven-resources-plugin:2.6:testResources
* test-compile: org.apache.maven.plugins:maven-compiler-plugin:3.1:testCompile
* process-test-classes: Not defined
* test: org.apache.maven.plugins:maven-surefire-plugin:2.12.4:test
* prepare-package: Not defined
* package: org.apache.maven.plugins:maven-jar-plugin:2.4:jar
* pre-integration-test: Not defined
* integration-test: Not defined
* post-integration-test: Not defined
* verify: Not defined
* install: org.apache.maven.plugins:maven-install-plugin:2.4:install
* deploy: org.apache.maven.plugins:maven-deploy-plugin:2.7:deploy
Tomofumi Chiba@仙台Tomofumi Chiba@仙台

openapi-generator, springfox, springdoc-openapi を使っている気配はなかった。swagger-codegen は依存にあった。

$ ./mvnw dependency:tree |grep gen
[INFO] |  |  |  +- com.vaadin.external:gentyref:jar:1.2.0.vaadin1:compile
[INFO] |  |  |  +- io.swagger.codegen.v3:swagger-codegen:jar:3.0.20:compile
[INFO] |  |  |  |  +- io.swagger:swagger-codegen:jar:2.4.14:compile
[INFO] |  |  |  \- io.swagger.codegen.v3:swagger-codegen-generators:jar:1.0.20:compile
[INFO] |  |  +- net.bytebuddy:byte-buddy-agent:jar:1.11.22:test

$ ./mvnw dependency:tree |grep springfox

$ ./mvnw dependency:tree |grep openapi
Tomofumi Chiba@仙台Tomofumi Chiba@仙台

dev 起動したとき以下のプロセスが起動していることを確認

  • java
  • webpack
  • esbuild
  • fork-ts-checker-webpack-plugin/lib/typescript-reporter/reporter/TypeScriptReporterRpcService.js

プロセスの親子関係的には

  • java
    • webpack
      • esbuild
      • TypeScriptReporterRpcService.js
Tomofumi Chiba@仙台Tomofumi Chiba@仙台

web browser からは、 ws://localhost:35729/ にも接続している。ここは、java が listen している。
OptionalLiveReloadServer というやつ。

DevServerOutputTracker(webpack-dev-server) が 39559 を listen しているが、browser から接続はない。

Tomofumi Chiba@仙台Tomofumi Chiba@仙台

typescript コードの生成

typescript のコード生成は、ClientAPIGenerator がやっていて swagger-codegen がベースになっているっぽい。openapi-generator ではない。

Tomofumi Chiba@仙台Tomofumi Chiba@仙台
  • REST call は、全部 POST っぽい。
  • annotation processor とかは使ってない。
  • maven しばりで gradle はたぶんダメ。
  • 本番ビルドにも swagger-codegen が含まれてしまうみたい。本番実行時には不要そうだけど。
  • dev 起動で frontend と bff で別にサーバ上げて request forward みたいなことはしてない。