CCDM: implement Flow.start() API

.gitignore

@@ -42,3 +42,5 @@ package-lock.json
 flow-tests/**/package.json
 flow-tests/**/webpack*.js
 yarn.lock
+
+flow-client/src/main/resources/META-INF/resources/frontend/FlowClient.js

flow-client/intern.json

@@ -1,18 +1,22 @@
 {
   "environments": [
-    {
-      "browserName": "node"
-    },
     {
       "browserName": "chrome",
       "chromeOptions": {
         "args": [
           "headless",
-          "disable-gpu"
+          "disable-gpu",
+          "window-size=1024x768"
         ]
       },
       "fixSessionCapabilities": "no-detect"
     }
   ],
-  "suites": "target/frontend-tests/tests.js"
+  "suites": "target/frontend-tests/tests.js",
+  "tunnelOptions": {
+    "version": "3.141.59",
+    "drivers": [
+      {"name": "chrome", "version": "76.0.3809.68"}
+    ]
+  }
 }

flow-client/package.json

@@ -9,11 +9,16 @@
     "url": "https://github.com/vaadin/flow/issues"
   },
   "scripts": {
-    "lint": "eslint 'src/main/resources/META-INF/resources/frontend/**/*.js' && tslint 'src/main/resources/META-INF/resources/frontend/**/*.ts'",
-    "compile": "tsc",
-    "build": "npm run lint && npm run compile",
-    "test": "webpack --config=webpack.tests.config.js && intern",
-    "debug": "webpack --config=webpack.tests.config.js && intern serveOnly"
+    "lint": "eslint 'src/main/resources/META-INF/resources/frontend/FlowBootstrap.js' && tslint 'src/main/resources/META-INF/resources/frontend/**/*.ts'",
+    "_cp_to_src": "ncp target/classes/META-INF/resources/VAADIN/static/client/client-*.cache.js src/main/resources/META-INF/resources/frontend/FlowClient.js",
+    "_wrap_fnc": "replace-in-files --regex '(.+[\\s\\S]*)' --replacement 'const init = function(){\\n$1\\n};\\nexport {init};\\n' src/main/resources/META-INF/resources/frontend/FlowClient.js",
+    "_cp_to_tgt": "ncp src/main/resources/META-INF/resources/frontend/FlowClient.js target/classes/META-INF/resources/frontend/FlowClient.js",
+    "client": "npm run _cp_to_src && npm run _wrap_fnc && npm run _cp_to_tgt",
+    "webpack": "webpack --config=webpack.tests.config.js",
+    "build": "npm run client && tsc",
+    "compile": "npm run lint && npm run build",
+    "test": "npm run build && npm run webpack && intern",
+    "debug": "npm run build && npm run webpack && intern serveOnly"
   },
   "homepage": "https://vaadin.com",
   "repository": {
@@ -27,13 +32,15 @@
     "eslint": "^5.8.0",
     "eslint-config-vaadin": "^0.2.7",
     "tslint": "^5.12.1",
-    "fetch-mock": "^7.3.0",
     "intern": "^4.4.3",
     "ts-loader": "^6.0.4",
     "typescript": "^3.5.3",
     "tslint-config-prettier": "^1.18.0",
     "tslint-eslint-rules": "^5.4.0",
     "webpack": "^4.39.1",
-    "webpack-cli": "^3.3.6"
+    "webpack-cli": "^3.3.6",
+    "ncp": "^2.0.0",
+    "replace-in-files-cli": "^0.2.0",
+    "xhr-mock": "^2.5.0"
   }
 }

flow-client/pom.xml

@@ -162,12 +162,19 @@
 
                 <executions>
                     <execution>
+                        <phase>compile</phase>
                         <goals>
                             <goal>compile</goal>
-                            <goal>test</goal>
                             <goal>generateAsync</goal>
                         </goals>
                     </execution>
+                    <execution>
+                        <id>gwt-test</id>
+                        <phase>test</phase>
+                        <goals>
+                            <goal>test</goal>
+                        </goals>
+                    </execution>
                 </executions>
                 <configuration>
                     <!-- Assertions should be disabled once we introduce
@@ -246,20 +253,6 @@
                             </arguments>
                         </configuration>
                     </execution>
-                    <execution>
-                        <id>npm-lint</id>
-                        <phase>validate</phase>
-                        <goals>
-                            <goal>exec</goal>
-                        </goals>
-                        <configuration>
-                            <executable>npm</executable>
-                            <arguments>
-                                <argument>run</argument>
-                                <argument>lint</argument>
-                            </arguments>
-                        </configuration>
-                    </execution>
                     <execution>
                         <id>typescript-compile</id>
                         <phase>compile</phase>

flow-client/src/main/resources/META-INF/resources/frontend/Flow.ts

@@ -1,25 +1,94 @@
-export interface FlowSettings {
+export interface FlowConfig {
     imports ?: () => void;
 }
 
-class Flow {
+interface AppConfig {
+    productionMode: boolean,
+    appId: string,
+    uidl: object
+}
+
+interface AppInitResponse {
+    appConfig: AppConfig;
+}
 
-    config ?: FlowSettings;
+/**
+ * Client API for flow UI operations.
+ */
+export class Flow {
+    config ?: FlowConfig;
+    response ?: AppInitResponse;
 
-    constructor(config?: FlowSettings) {
+    constructor(config?: FlowConfig) {
         if (config) {
             this.config = config;
         }
     }
 
-    start(): Promise<void> {
-        return Promise.resolve();
+    /**
+     * Load flow client module and initialize UI in server side.
+     */
+    async start(): Promise<AppInitResponse> {
+        // Do not start flow twice
+        if (!this.response) {
+            // Initialize server side UI
+            this.response = await this.initFlowUi();
+
+            // Load bootstrap script with server side parameters
+            const bootstrapMod = await import('./FlowBootstrap');
+            await bootstrapMod.init(this.response);
+
+            // Load flow-client module
+            const clientMod = await import('./FlowClient');
+            await this.initFlowClient(clientMod);
+
+            // // Load custom modules defined by user
+            if (this.config && this.config.imports) {
+                await this.config.imports();
+            }
+        }
+        return this.response;
     }
 
+    /**
+     * Go to a route defined in server.
+     */
     navigate(): Promise<void> {
         return Promise.resolve();
     }
-} 
 
-export { Flow };
+    private async initFlowClient(clientMod: any): Promise<void> {
+        clientMod.init();
+        // client init is async, we need to loop until initialized
+        return new Promise(resolve => {
+            const $wnd = window as any;
+            const intervalId = setInterval(() => {
+                // client `isActive() == true` while initializing
+                const initializing = Object.keys($wnd.Vaadin.Flow.clients)
+                  .reduce((prev, id) => prev || $wnd.Vaadin.Flow.clients[id].isActive(), false);
+                if (!initializing) {
+                    clearInterval(intervalId);
+                    resolve();
+                }
+            }, 5);
+        });
+    }
 
+    private async initFlowUi(): Promise<AppInitResponse> {
+        return new Promise((resolve, reject) => {
+            const httpRequest = new (window as any).XMLHttpRequest();
+            httpRequest.open('GET', 'VAADIN/?v-r=init');
+            httpRequest.onload = () => {
+                if (httpRequest.getResponseHeader('content-type') === 'application/json') {
+                    resolve(JSON.parse(httpRequest.responseText));
+                } else {
+                    reject(new Error(
+                        `Invalid server response when initializing Flow UI.
+                        ${httpRequest.status}
+                        ${httpRequest.responseText}`));
+                }
+            };
+            httpRequest.send();
+        });
+    }
+}

flow-client/src/main/resources/META-INF/resources/frontend/FlowBootstrap.d.ts

@@ -0,0 +1 @@
+export const init: (appInitResponse: any) => void;