如何不使用Multiplatform Runtime将Vaadin 7的GWT组件集成到Vaadin 21

GWT组件最终编译为原生JS的特性可以完全支撑你不用重写业务逻辑完成适配，核心逻辑是把存量GWT组件编译为独立JS包，再封装为Vaadin 21兼容的Web Component对接Flow框架即可，具体步骤如下：

• 先从原有Vaadin7项目中剥离GWT组件相关代码，移除所有对Vaadin7服务端API的依赖，只保留客户端GWT业务逻辑代码
• 修改GWT模块配置文件*.gwt.xml，设置linker = "xsiframe"链接器，确保编译输出的是无Vaadin7客户端框架依赖的独立JS文件
• 给GWT组件需要对外暴露的方法添加@JsExport注解（低版本GWT用JSNI语法导出全局对象/方法），确保JS层面可以直接调用组件初始化、参数设置、事件绑定等接口
• 执行GWT编译，拿到编译后的JS文件、配套静态资源（样式、图片等）

• 在Vaadin21项目的frontend目录下新建组件的JS/TS封装层，引入第一步编译输出的GWT JS资源
• 按照Web Component规范继承HTMLElement实现自定义组件，核心逻辑包括：
  • 组件挂载到DOM时调用GWT导出的初始化方法，传入当前DOM节点完成GWT组件渲染
  • 定义组件属性，监听属性变更事件，属性变化时调用GWT导出的参数同步方法，把数据同步到GWT组件内部
  • 监听GWT组件抛出的业务事件，通过this.dispatchEvent抛出标准DOM事件，供服务端捕获
• 注册自定义组件到浏览器，设置自定义标签名例如custom-gwt-component

• 新建Java类继承com.vaadin.flow.component.Component，添加@Tag("custom-gwt-component")注解绑定第二步定义的Web Component标签
• 用@Property注解定义和客户端属性对应的服务端get/set方法，实现服务端到客户端的数据自动同步
• 用addListener方法绑定客户端抛出的DOM事件，实现客户端交互事件到服务端的通知逻辑
• 复杂交互场景可以调用element.executeJs()方法主动触发客户端方法，或者用@ClientCallable注解定义服务端方法供客户端主动调用

• 如果原有GWT组件依赖Vaadin7的客户端Widget库，需要把依赖的Widget代码也一起剥离到独立GWT编译模块，避免运行时报依赖缺失错误
• 样式适配：Vaadin21默认开启Shadow DOM样式隔离，需要把原有GWT组件的样式文件手动引入到自定义Web Component的Shadow DOM中，或者关闭Shadow DOM避免样式失效
• 体积优化：可以开启GWT编译的压缩、混淆选项减小JS包体积，也可以配置组件懒加载，只有页面用到该组件时再加载对应的GWT JS资源

内容的提问来源于stack exchange，提问作者Brett Sutton