fix: don't publish flow-client TS sources separately in JAR (#10765) (#…

…10795)

Improve performance of webpack build by only shipping precompiled JS of the flow-frontend TS sources, so webpack doesn't try to use the TS source files which is slower than using JS directly. The TS sources are still included in the sourcemaps (`.js.map`). This is a cherry-pick of 0476cd4 (from master to 6.0).

.gitignore

@@ -52,7 +52,7 @@ flow-tests/**/tsconfig.json
 flow-tests/**/pnpm-lock.yaml
 yarn.lock
 
-flow-client/src/main/resources/META-INF/resources/frontend/FlowClient.js
+flow-client/src/main/frontend/FlowClient.js
 flow-tests/**/types.d.ts
 /flow-tests/**/*.generated.js
 /flow-tests/**/generated/**

flow-client/.eslintrc.js

@@ -18,6 +18,13 @@ module.exports = {
       },
     },
 
+    {
+      "files": ["**/.eslintrc.js"],
+      "globals": {
+        "module": "readonly",
+      },
+    },
+
     {
       "files": ["**/*.ts"],
 
@@ -50,6 +57,6 @@ module.exports = {
         "no-restricted-globals": 0,
         "no-restricted-syntax": 0,
       },
-    }
+    },
   ]
 };

flow-client/package.json

@@ -9,7 +9,7 @@
     "url": "https://github.com/vaadin/flow/issues"
   },
   "scripts": {
-    "lint": "eslint \"src/main/resources/META-INF/resources/frontend\"",
+    "lint": "eslint 'src/main/frontend'",
     "client": "node scripts/client.js",
     "version": "node scripts/version.js",
     "webpack": "webpack --config=webpack.tests.config.js",
@@ -24,7 +24,7 @@
     "url": "git://github.com/vaadin/flow.git"
   },
   "files": [
-    "src/main/resources/META-INF/resources/frontend"
+    "src/main/frontend"
   ],
   "devDependencies": {
     "@types/sinon": "^9.0.0",
@@ -34,6 +34,7 @@
     "eslint-config-vaadin": "^0.4.0",
     "fetch-mock": "^7.3.0",
     "intern": "^4.4.3",
+    "mkdirp": "^0.5.5",
     "node-fetch": "^2.3.0",
     "prettier": "^2.2.1",
     "sinon": "^7.1.1",

flow-client/scripts/.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  "env": {
+    "browser": false,
+    "node": true,
+  },
+};

flow-client/scripts/client.js

@@ -15,12 +15,13 @@
  */
 
 const fs = require('fs');
+const mkdirp = require('mkdirp');
 
 const fromDir = "target/classes/META-INF/resources/VAADIN/static/client/";
 const fromFileRegex = /^client-.*\.cache\.js$/;
 
-const toSourceDir = "src/main/resources/META-INF/resources/frontend/";
-const toTargetDir = "target/classes/META-INF/resources/frontend/";
+const sourceDir = "src/main/frontend/";
+const targetDir = "target/classes/META-INF/resources/frontend/";
 const toFile  = "FlowClient.js";
 
 const fromFileName = fs.readdirSync(fromDir)
@@ -35,10 +36,13 @@ ${clientSource}
 };`;
 
 // Write to source
-fs.writeFileSync(toSourceDir + toFile, clientSource, 'utf8');
+fs.writeFileSync(sourceDir + toFile, clientSource, 'utf8');
 
-// Write to target
-fs.writeFileSync(toTargetDir + toFile, clientSource, 'utf8');
+// Write to target (copy '.d.ts' and '.js' files from sourceDir)
+mkdirp(targetDir);
+fs.readdirSync(sourceDir)
+  .filter(s => s.endsWith('.d.ts') ||s.endsWith('.js'))
+  .forEach(file => fs.copyFileSync(sourceDir + file, targetDir + file));
 
 // Check that chromedriver version matches in flow and intern
 const driversContent = fs.readFileSync('../drivers.xml', 'utf8');

flow-client/scripts/version.js

@@ -20,7 +20,7 @@ const fs = require('fs');
 // when it copies resources from `src/main/resources` into `target/classes`
 const versionFile = 'target/classes/version.txt';
 const replaceVersionInFiles = [
-  'src/main/resources/META-INF/resources/frontend/form/index.ts'
+  'src/main/frontend/form/index.ts'
 ];
 
 const version = fs.readFileSync(versionFile, 'utf8');

flow-client/src/test/frontend/AuthenticationTests.ts

@@ -3,7 +3,7 @@ const {expect} = intern.getPlugin('chai');
 const {fetchMock} = intern.getPlugin('fetchMock');
 const {sinon} = intern.getPlugin('sinon');
 
-import { ConnectClient, InvalidSessionMiddleware, login, logout } from "../../main/resources/META-INF/resources/frontend";
+import { ConnectClient, InvalidSessionMiddleware, login, logout } from "../../main/frontend";
 
 // `connectClient.call` adds the host and context to the endpoint request.
 // we need to add this origin when configuring fetch-mock

flow-client/src/test/frontend/ConnectTests.ts

@@ -11,8 +11,8 @@ import {
   EndpointError,
   EndpointResponseError,
   EndpointValidationError,
-} from "../../main/resources/META-INF/resources/frontend/Connect";
-import {ConnectionState, ConnectionStateStore} from "../../main/resources/META-INF/resources/frontend/ConnectionState";
+} from "../../main/frontend/Connect";
+import {ConnectionState, ConnectionStateStore} from "../../main/frontend/ConnectionState";
 
 // `connectClient.call` adds the host and context to the endpoint request.
 // we need to add this origin when configuring fetch-mock

flow-client/src/test/frontend/ConnectionIndicatorTests.ts

@@ -16,12 +16,12 @@
 const {suite, test, beforeEach, afterEach} = intern.getInterface("tdd");
 const {assert} = intern.getPlugin("chai");
 
-import {ConnectionIndicator} from "../../main/resources/META-INF/resources/frontend";
+import {ConnectionIndicator} from "../../main/frontend";
 
 import {
   ConnectionState,
   ConnectionStateStore
-} from "../../main/resources/META-INF/resources/frontend/ConnectionState";
+} from "../../main/frontend/ConnectionState";
 
 const $wnd = (window as any);
 

flow-client/src/test/frontend/ConnectionStateTests.ts

@@ -6,7 +6,7 @@ const { assert } = intern.getPlugin("chai");
 import {
   ConnectionState,
   ConnectionStateStore
-} from "../../main/resources/META-INF/resources/frontend/ConnectionState";
+} from "../../main/frontend/ConnectionState";
 
 describe('ConnectionStateStore', () => {
 

flow-client/src/test/frontend/FlowTests.ts

@@ -5,12 +5,12 @@ const { assert } = intern.getPlugin("chai");
 const { sinon } = intern.getPlugin("sinon") as { sinon: SinonStatic };
 
 // API to test
-import {Flow, NavigationParameters} from "../../main/resources/META-INF/resources/frontend/Flow";
-import {ConnectionState, ConnectionStateStore} from "../../main/resources/META-INF/resources/frontend/ConnectionState";
+import {Flow, NavigationParameters} from "../../main/frontend/Flow";
+import {ConnectionState, ConnectionStateStore} from "../../main/frontend/ConnectionState";
 // Intern does not serve webpack chunks, adding deps here in order to
 // produce one chunk, because dynamic imports in Flow.ts  will not work.
-import "../../main/resources/META-INF/resources/frontend/FlowBootstrap";
-import "../../main/resources/META-INF/resources/frontend/FlowClient";
+import "../../main/frontend/FlowBootstrap";
+import "../../main/frontend/FlowClient";
 // Mock XMLHttpRequest so as we don't need flow-server running for tests.
 import mock from 'xhr-mock';
 

flow-client/src/test/frontend/VaadinDevmodeGizmoTests.js

@@ -1,7 +1,7 @@
 const { describe, it } = intern.getPlugin('interface.bdd');
 const { assert } = intern.getPlugin("chai");
 
-import { VaadinDevmodeGizmo } from "../../main/resources/META-INF/resources/frontend/VaadinDevmodeGizmo";
+import { VaadinDevmodeGizmo } from "../../main/frontend/VaadinDevmodeGizmo";
 
 describe('VaadinDevmodeGizmo', () => {
 

flow-client/src/test/frontend/form/BinderTests.ts

@@ -9,7 +9,7 @@ const {sinon} = intern.getPlugin('sinon');
 import {
   Binder,
   BinderConfiguration,
-} from "../../../main/resources/META-INF/resources/frontend/form";
+} from "../../../main/frontend/form";
 
 import {Employee, EmployeeModel, Order, OrderModel, TestEntity, TestModel} from "./TestModels";
 

flow-client/src/test/frontend/form/FieldTests.ts

@@ -1,6 +1,6 @@
 /* tslint:disable:max-classes-per-file */
 
-import {BinderNode} from "../../../main/resources/META-INF/resources/frontend/form/BinderNode";
+import {BinderNode} from "../../../main/frontend/form/BinderNode";
 
 const {suite, test, beforeEach, afterEach} = intern.getInterface("tdd");
 const {assert} = intern.getPlugin("chai");
@@ -20,7 +20,7 @@ import {
   AbstractModel,
   FieldStrategy,
   AbstractFieldStrategy
-} from "../../../main/resources/META-INF/resources/frontend/form";
+} from "../../../main/frontend/form";
 
 import {OrderModel, TestModel, TestEntity, Order} from "./TestModels";
 

flow-client/src/test/frontend/form/IndexTests.ts

@@ -27,7 +27,7 @@ suite("form/Index", () => {
   });
 
   test("should add registration", async () => {
-    await import("../../../main/resources/META-INF/resources/frontend/form");
+    await import("../../../main/frontend/form");
     assert.isDefined($wnd.Vaadin);
     assert.isArray($wnd.Vaadin.registrations);
     const formRegistrations = $wnd.Vaadin.registrations.filter((r: any) => r.is === "@vaadin/form");

flow-client/src/test/frontend/form/ModelTests.ts

@@ -16,7 +16,7 @@ import {
   NumberModel,
   Positive,
   Size
-} from "../../../main/resources/META-INF/resources/frontend/form";
+} from "../../../main/frontend/form";
 
 import {IdEntity, IdEntityModel, TestEntity, TestModel} from "./TestModels";
 

flow-client/src/test/frontend/form/TestModels.ts

@@ -12,7 +12,7 @@ import {
   Required,
   Size,
   StringModel,
-} from "../../../main/resources/META-INF/resources/frontend/form";
+} from "../../../main/frontend/form";
 
 export interface IdEntity {
   idString: string;

flow-client/src/test/frontend/form/ValidationTests.ts

@@ -16,7 +16,7 @@ import {
   ValidationError,
   Validator,
   ValueError
-} from "../../../main/resources/META-INF/resources/frontend/form";
+} from "../../../main/frontend/form";
 
 import { IdEntity, IdEntityModel,  Order, OrderModel, TestEntity, TestModel } from "./TestModels";
 

flow-client/src/test/frontend/form/ValidatorsTests.ts

@@ -26,7 +26,7 @@ import {
   Required,
   Size
 }
-  from "../../../main/resources/META-INF/resources/frontend/form";
+  from "../../../main/frontend/form";
 
 suite("form/Validators", () => {
 

flow-client/tsconfig.json

@@ -18,7 +18,7 @@
     "skipLibCheck": true
   },
   "include": [
-    "src/main/resources/META-INF/resources/frontend/**/*.ts"
+    "src/main/frontend/**/*.ts"
   ],
   "exclude": []
 }