chore!: Upgrade to TypeScript 5.0.2 (#16291)

* chore!: Upgrade to TypeScript 5.0.2

* Use moduleResolution bundler

* Remove Lit import helper that was supposed to go in V24, and now no longer works

* fix test

---------

Co-authored-by: czp13 <61667986+czp13@users.noreply.github.com>

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

@@ -44,11 +44,12 @@ public class TaskGenerateTsConfig extends AbstractTaskClientGenerator {
 
     static final String TSCONFIG_JSON = "tsconfig.json";
 
-    private static final String VERSION = "flow_version";
+    private static final String OLD_VERSION_KEY = "flow_version";
+    private static final String VERSION = "_version";
     private static final String ES_TARGET_VERSION = "target";
     private static final String TSCONFIG_JSON_OLDER_VERSIONS_TEMPLATE = "tsconfig-%s.json";
-    private static final String[] vaadinVersions = { "latest", "v23.3.0.1",
-            "v23.3.0", "v23.2", "v23.1", "v22", "v14", "osgi" };
+    private static final String[] tsconfigVersions = { "latest", "v23.3.0.1",
+            "v23.3.0", "v23.2", "v23.1", "v22", "v14", "osgi", "v23.3.4" };
 
     //@formatter:off
     static final String ERROR_MESSAGE =
@@ -174,22 +175,22 @@ private void overrideIfObsolete() throws ExecutionFailedException {
             JsonObject latestTsConfigTemplateJson = parseTsConfig(
                     latestTsConfigTemplate);
 
-            if (projectTsConfigContent.hasKey(VERSION)) {
-                assert latestTsConfigTemplateJson.hasKey(VERSION)
-                        : "Latest tsconfig.json template should have version";
-                String version = projectTsConfigContent.getString(VERSION);
-                String templateVersion = latestTsConfigTemplateJson
-                        .getString(VERSION);
+            String projectTsConfigVersion = getConfigVersion(
+                    projectTsConfigContent);
+            if (projectTsConfigVersion != null) {
+                String templateVersion = getConfigVersion(
+                        latestTsConfigTemplateJson);
 
                 // If the project has a newest version of TS config - do nothing
-                if (templateVersion.equals(version)) {
+                if (templateVersion.equals(projectTsConfigVersion)) {
                     return;
                 }
             }
 
             // TS config is of an old version
-            for (String version : vaadinVersions) {
-                String oldTsConfigContent = getFileContentForVersion(version);
+            for (String tsconfigVersion : tsconfigVersions) {
+                String oldTsConfigContent = getFileContentForVersion(
+                        tsconfigVersion);
                 JsonObject tsConfigTemplateJson = parseTsConfig(
                         oldTsConfigContent);
                 if (tsConfigsEqual(tsConfigTemplateJson,
@@ -210,6 +211,16 @@ private void overrideIfObsolete() throws ExecutionFailedException {
         }
     }
 
+    private String getConfigVersion(JsonObject projectTsConfigContent) {
+        if (projectTsConfigContent.hasKey(VERSION)) {
+            return projectTsConfigContent.getString(VERSION);
+        }
+        if (projectTsConfigContent.hasKey(OLD_VERSION_KEY)) {
+            return projectTsConfigContent.getString(OLD_VERSION_KEY);
+        }
+        return null;
+    }
+
     private boolean tsConfigsEqual(JsonObject template,
             JsonObject projectTsConfig) {
         // exclude ES version from comparison, because it

flow-server/src/main/resources/com/vaadin/flow/server/frontend/dependencies/default/package.json

@@ -18,7 +18,7 @@
   "devDependencies": {
     "async": "3.2.2",
     "glob": "7.2.3",
-    "typescript": "4.9.3",
+    "typescript": "5.0.2",
     "workbox-core": "6.5.4",
     "workbox-precaching": "6.5.4",
     "strip-css-comments": "5.0.0"

flow-server/src/main/resources/com/vaadin/flow/server/frontend/tsconfig-v23.3.4.json

@@ -0,0 +1,39 @@
+// This TypeScript configuration file is generated by vaadin-maven-plugin.
+// This is needed for TypeScript compiler to compile your TypeScript code in the project.
+// It is recommended to commit this file to the VCS.
+// You might want to change the configurations to fit your preferences
+// For more information about the configurations, please refer to http://www.typescriptlang.org/docs/handbook/tsconfig-json.html
+{
+  "flow_version": "23.3.4",
+  "compilerOptions": {
+    "sourceMap": true,
+    "jsx": "react-jsx",
+    "inlineSources": true,
+    "module": "esNext",
+    "target": "es2020",
+    "moduleResolution": "node",
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitReturns": true,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "baseUrl": "frontend",
+    "paths": {
+      "@vaadin/flow-frontend": ["generated/jar-resources"],
+      "@vaadin/flow-frontend/*": ["generated/jar-resources/*"],
+      "Frontend/*": ["*"]
+    }
+  },
+  "include": [
+    "frontend/**/*",
+    "types.d.ts"
+  ],
+  "exclude": [
+    "frontend/generated/jar-resources/**"
+  ]
+}

flow-server/src/main/resources/com/vaadin/flow/server/frontend/tsconfig.json

@@ -4,14 +4,14 @@
 // You might want to change the configurations to fit your preferences
 // For more information about the configurations, please refer to http://www.typescriptlang.org/docs/handbook/tsconfig-json.html
 {
-  "flow_version": "23.3.4",
+  "_version": "9",
   "compilerOptions": {
     "sourceMap": true,
     "jsx": "react-jsx",
     "inlineSources": true,
     "module": "esNext",
     "target": "es2020",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "strict": true,
     "skipLibCheck": true,
     "noFallthroughCasesInSwitch": true,

flow-server/src/main/resources/vite.generated.ts

@@ -528,43 +528,6 @@ function themePlugin(opts): PluginOption {
     }
   };
 }
-function lenientLitImportPlugin(): PluginOption {
-  return {
-    name: 'vaadin:lenient-lit-import',
-    async transform(code, id) {
-      const decoratorImports = [
-        /import (.*?) from (['"])(lit\/decorators)(['"])/,
-        /import (.*?) from (['"])(lit-element\/decorators)(['"])/
-      ];
-      const directiveImports = [
-        /import (.*?) from (['"])(lit\/directives\/)([^\\.]*?)(['"])/,
-        /import (.*?) from (['"])(lit-html\/directives\/)([^\\.]*?)(['"])/
-      ];
-
-      decoratorImports.forEach((decoratorImport) => {
-        let decoratorMatch;
-        while ((decoratorMatch = code.match(decoratorImport))) {
-          console.warn(
-              `Warning: the file ${id} imports from '${decoratorMatch[3]}' when it should import from '${decoratorMatch[3]}.js'`
-          );
-          code = code.replace(decoratorImport, 'import $1 from $2$3.js$4');
-        }
-      });
-
-      directiveImports.forEach((directiveImport) => {
-        let directiveMatch;
-        while ((directiveMatch = code.match(directiveImport))) {
-          console.warn(
-              `Warning: the file ${id} imports from '${directiveMatch[3]}${directiveMatch[4]}' when it should import from '${directiveMatch[3]}${directiveMatch[4]}.js'`
-          );
-          code = code.replace(directiveImport, 'import $1 from $2$3$4.js$5');
-        }
-      });
-
-      return code;
-    }
-  };
-}
 
 function runWatchDog(watchDogPort, watchDogHost) {
   const client = net.Socket();
@@ -703,7 +666,6 @@ export const vaadinConfig: UserConfigFn = (env) => {
       !devMode && statsExtracterPlugin(),
       devBundle && preserveUsageStats(),
       themePlugin({devMode}),
-      lenientLitImportPlugin(),
       postcssLit({
         include: ['**/*.css', /.*\/.*\.css\?.*/],
         exclude: [

flow-server/src/test/java/com/vaadin/flow/server/frontend/TaskGenerateTsConfigTest.java

@@ -38,7 +38,7 @@
 import com.vaadin.flow.server.ExecutionFailedException;
 
 public class TaskGenerateTsConfigTest {
-    static private String LATEST_VERSION = "23.3.4";
+    static private String LATEST_VERSION = "9";
 
     @Rule
     public TemporaryFolder temporaryFolder = new TemporaryFolder();
@@ -143,7 +143,7 @@ public void tsConfigUpdated_remindsUpdateVersionAndTemplates()
                 StandardCharsets.UTF_8);
 
         Assert.assertEquals("tsconfig.json content has been updated. "
-                + "Please also: 1. Increment version in tsconfig.json (\"flow_version\" property) "
+                + "Please also: 1. Increment version in tsconfig.json (\"_version\" property) "
                 + "2. create a new tsconfig-vX.Y.json template in flow-server resources and put the old content there "
                 + "3. update vaadinVersion array in TaskGenerateTsConfig with X.Y "
                 + "4. put a new content in tsconfig-reference.json in tests "

flow-server/src/test/resources/tsconfig-reference.json

@@ -4,14 +4,14 @@
 // You might want to change the configurations to fit your preferences
 // For more information about the configurations, please refer to http://www.typescriptlang.org/docs/handbook/tsconfig-json.html
 {
-  "flow_version": "23.3.4",
+  "_version": "9",
   "compilerOptions": {
     "sourceMap": true,
     "jsx": "react-jsx",
     "inlineSources": true,
     "module": "esNext",
     "target": "es2020",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "strict": true,
     "skipLibCheck": true,
     "noFallthroughCasesInSwitch": true,

flow-tests/test-frontend/vite-production/src/main/java/com/vaadin/viteapp/views/empty/MainView.java

@@ -15,7 +15,6 @@
 @JsModule("@testscope/map")
 @JsModule("package-outside-npm/index.js")
 @JsModule("package2-outside-npm/index.js")
-@JsModule("./lit-invalid-imports.ts")
 @CssImport("./image.css")
 public class MainView extends Div {