fix: Ensure necessary scripts are loaded into page (#210)

In Liferay "Content Page" edit mode, Vaadin portlets are not directly
added to the main page, but loaded into an iframe requesting the same
page in preview mode, and then added to the main page through javascript,
but they are detached from iframe before initialization is completed.
This way, scripts needed to register the portlet web component are not
added to the main document, so the webcomponent is not correctly rendered.
This patch add an additional script to BootstrapHandler response that
takes care to add needed script to main page and to postpone element
registration until they are loaded.

Fixes #202

Author: mcollovati

vaadin-portlet/src/main/java/com/vaadin/flow/portal/PortletBootstrapHandler.java

@@ -95,23 +95,25 @@ public boolean synchronizedHandleRequest(VaadinSession session,
                  LicenseChecker.checkLicense(VaadinPortletService.PROJECT_NAME,
                  VaadinPortletService.getPortletVersion());
             }
-            String initScript = String
-                    .format("<script>window.Vaadin.Flow.Portlets.registerElement('%s','%s','%s','%s','%s');</script>",
-                            tag, namespace, Collections
-                                    .list(portlet.getWindowStates("text/html"))
-                                    .stream()
-                                    .map(state -> "\"" + state.toString()
-                                            + "\"")
-                                    .collect(Collectors.joining(",", "[", "]")),
-                            Collections
-                                    .list(portlet.getPortletModes("text/html"))
-                                    .stream()
-                                    .map(mode -> "\"" + mode.toString() + "\"")
-                                    .collect(Collectors.joining(",", "[", "]")),
-                            ((RenderResponse) resp).createActionURL());
-            // For liferay send accepted window states, portlet modes and action url to add to client side data.
 
-            writer.write(initScript);
+            String registrationInstruction = String
+                    .format("window.Vaadin.Flow.Portlets.registerElement('%s','%s','%s','%s','%s');",
+                    tag, namespace,
+                    Collections.list(portlet.getWindowStates("text/html"))
+                            .stream()
+                            .map(state -> "\"" + state.toString() + "\"")
+                            .collect(Collectors.joining(",", "[", "]")),
+                    Collections.list(portlet.getPortletModes("text/html"))
+                            .stream().map(mode -> "\"" + mode.toString() + "\"")
+                            .collect(Collectors.joining(",", "[", "]")),
+                    ((RenderResponse) resp).createActionURL());
+            // For liferay send accepted window states, portlet modes and action
+            // url to add to client side data.
+
+            String initScript = portlet.portletElementRegistrationScript(request,
+                    scriptUrl, registrationInstruction);
+
+            writer.printf("<script>%s</script>", initScript);
             writer.write("<" + tag + " data-portlet-id='" + namespace
                     + "' style='width: 100%;'></" + tag + ">");
         } catch (Exception exception) {

vaadin-portlet/src/main/java/com/vaadin/flow/portal/VaadinLiferayPortlet.java

@@ -1,6 +1,7 @@
 package com.vaadin.flow.portal;
 
 import java.io.IOException;
+import java.util.Scanner;
 
 import javax.portlet.HeaderRequest;
 import javax.portlet.HeaderResponse;
@@ -9,6 +10,7 @@
 import javax.portlet.RenderResponse;
 
 import com.vaadin.flow.component.Component;
+import com.vaadin.flow.server.VaadinRequest;
 
 /**
  * VaadinPortlet workarounds for Liferay versions 7.2.x and 7.3.x
@@ -71,4 +73,31 @@ protected String getStaticResourcesPath() {
     private boolean checkStaticResourcesConfiguration() {
         return getStaticResourcesPath().startsWith("/o/");
     }
+
+    // For portlets added to Liferay Content Pages we need to be sure that both
+    // PortletMethod.js and web-component scripts are loaded into the main page,
+    // and postpone the registration instruction until scripts are effectively
+    // loaded, otherwise the web-component contents are not rendered at all.
+    // See https://github.com/vaadin/portlet/issues/202 for details.
+    @Override
+    String portletElementRegistrationScript(VaadinRequest request,
+            String scriptUrl, String registrationInstruction) {
+        String portletMethodScriptUrl = getPortletScriptTag(
+                (RenderRequest) ((VaadinPortletRequest) request)
+                        .getPortletRequest(),
+                "scripts/PortletMethods.js")
+                        .replaceFirst("^.*src=\"([^\"]+)\".*", "$1");
+
+        StringBuilder initScript = new StringBuilder();
+        try (Scanner scanner = new Scanner(getPortletContext()
+                .getResourceAsStream("scripts/LiferayPortletRegistrationHelper.js"))
+                        .useDelimiter("\\A")) {
+            initScript.append(scanner.next());
+        }
+        initScript.append("(['").append(scriptUrl).append("','")
+                .append(portletMethodScriptUrl).append("'], function() { ")
+                .append(registrationInstruction).append(";})");
+        return initScript.toString();
+    }
+
 }

vaadin-portlet/src/main/java/com/vaadin/flow/portal/VaadinPortlet.java

@@ -60,6 +60,7 @@
 import com.vaadin.flow.server.ServiceException;
 import com.vaadin.flow.server.SessionExpiredException;
 import com.vaadin.flow.server.VaadinConfigurationException;
+import com.vaadin.flow.server.VaadinRequest;
 import com.vaadin.flow.server.VaadinService;
 import com.vaadin.flow.server.VaadinSession;
 import com.vaadin.flow.shared.communication.PushMode;
@@ -659,4 +660,13 @@ static <C extends Component> void initComponent(C component) {
             view.onPortletViewContextInit(context);
         }
     }
+
+    // By default, portlet registration instruction can be sent to the client
+    // as is, but some portlet containers (e.g. Liferay) may need to wrap or
+    // enhance it with more instructions.
+    String portletElementRegistrationScript(VaadinRequest request,
+            String scriptUrl, String registrationInstruction) {
+        return registrationInstruction;
+    }
+
 }

vaadin-portlet/src/main/resources/META-INF/resources/scripts/LiferayPortletRegistrationHelper.js

@@ -0,0 +1,42 @@
+(function( scriptUrls, callback ) {
+
+    const alreadyLoadedScripts = [...document.querySelectorAll("script")]
+        .filter(function(el) { return scriptUrls.indexOf(el.src) >= 0; })
+        .map(function(el) { return el.src; });
+
+    const createScript = function(url) {
+        if (alreadyLoadedScripts.indexOf(url) >= 0) {
+            // Script already present on page, no need to load it again
+            return Promise.resolve(url);
+        }
+        return new Promise(function(resolve, reject) {
+            const script = document.createElement("script")
+            script.type = "text/javascript";
+            script.onload = function() {
+              resolve(url);
+            };
+            script.src = url;
+            document.getElementsByTagName( "head" )[0].appendChild( script );
+        });
+    };
+
+    const isRegistrationScriptInitialized = function() {
+        return window.Vaadin && window.Vaadin.Flow
+            && window.Vaadin.Flow.Portlets
+            && window.Vaadin.Flow.Portlets.registerElement;
+    };
+
+    const poller = function (attempt) {
+        if(isRegistrationScriptInitialized()) {
+            callback();
+        } else if (attempt < 100) {
+            // PortletMethods.js not yet loaded, try again
+            setTimeout(function() { poller(attempt + 1) }, 50);
+        } else {
+            console.log("PortletMethods.js not loaded, element cannot be registered");
+        }
+    };
+
+    Promise.all(scriptUrls.map(createScript)).then(function() { poller(0); });
+
+})