Merge pull request #201 from Sparow199/develop

GraphiQL && Voyager with full CDNs dependencies fetching

Author: oliemansm

example/build.gradle

@@ -38,7 +38,8 @@ repositories {
 dependencies{
     compile(project(":graphql-spring-boot-starter"))
     compile(project(":graphiql-spring-boot-starter"))
-
+    compile(project(":voyager-spring-boot-starter"))
+    
     compile("org.springframework.boot:spring-boot-starter-web:$LIB_SPRING_BOOT_VER")
     compile("org.springframework.boot:spring-boot-starter-actuator:$LIB_SPRING_BOOT_VER")
 }

example/src/main/resources/application.yml

@@ -17,3 +17,5 @@ graphql:
     actuator-metrics: true
 graphiql:
   enabled: true
+voyager:
+  enabled: true

graphiql-spring-boot-autoconfigure/src/main/java/com/oembedler/moon/graphiql/boot/GraphiQLController.java

@@ -31,7 +31,9 @@
 @Controller
 public class GraphiQLController {
 
-    private static final String CDNJS_CLOUDFLARE_COM_AJAX_LIBS_GRAPHIQL = "//cdnjs.cloudflare.com/ajax/libs/graphiql/";
+    private static final String CDNJS_CLOUDFLARE_COM_AJAX_LIBS = "//cdnjs.cloudflare.com/ajax/libs/";
+    private static final String CDN_JSDELIVR_NET_NPM = "//cdn.jsdelivr.net/npm/";
+    private static final String GRAPHIQL = "graphiql";
 
     @Value("${graphiql.endpoint.graphql:/graphql}")
     private String graphqlEndpoint;
@@ -48,7 +50,7 @@ public class GraphiQLController {
     @Value("${graphiql.cdn.enabled:false}")
     private Boolean graphiqlCdnEnabled;
 
-    @Value("${graphiql.cdn.version:0.11.11}")
+    @Value("${graphiql.cdn.version:0.13.0}")
     private String graphiqlCdnVersion;
 
     @Value("${graphiql.subscriptions.timeout:30}")
@@ -112,19 +114,47 @@ private Map<String, String> getReplacements(String graphqlEndpoint, String subsc
         replacements.put("subscriptionsEndpoint", subscriptionsEndpoint);
         replacements.put("staticBasePath", staticBasePath);
         replacements.put("pageTitle", pageTitle);
-        replacements.put("graphiqlCssUrl", graphiqlUrl(staticBasePath, "graphiql.min.css"));
-        replacements.put("graphiqlJsUrl", graphiqlUrl(staticBasePath, "graphiql.min.js"));
+        replacements.put("es6PromiseJsUrl", getResourceUrl(staticBasePath, "es6-promise.auto.min.js",
+                joinCdnjsPath("es6-promise", "4.1.1", "es6-promise.auto.min.js")));
+        replacements.put("fetchJsUrl", getResourceUrl(staticBasePath, "fetch.min.js",
+                joinCdnjsPath("fetch", "2.0.4", "fetch.min.js")));
+        replacements.put("reactJsUrl", getResourceUrl(staticBasePath, "react.min.js",
+                joinCdnjsPath("react", "16.8.3", "umd/react.production.min.js")));
+        replacements.put("reactDomJsUrl", getResourceUrl(staticBasePath, "react-dom.min.js",
+                joinCdnjsPath("react-dom", "16.8.3", "umd/react-dom.production.min.js")));
+        replacements.put("graphiqlCssUrl", getResourceUrl(staticBasePath, "graphiql.min.css",
+                joinJsDelivrPath(GRAPHIQL, graphiqlCdnVersion, "graphiql.css")));
+        replacements.put("graphiqlJsUrl", getResourceUrl(staticBasePath, "graphiql.min.js",
+                joinJsDelivrPath(GRAPHIQL, graphiqlCdnVersion, "graphiql.min.js")));
+        replacements.put("subscriptionsTransportWsBrowserClientUrl", getResourceUrl(staticBasePath,
+                "subscriptions-transport-ws-browser-client.js",
+                joinJsDelivrPath("subscriptions-transport-ws", "0.9.15", "browser/client.js")));
+        replacements.put("graphiqlSubscriptionsFetcherBrowserClientUrl", getResourceUrl(staticBasePath,
+                "graphiql-subscriptions-fetcher-browser-client.js",
+                joinJsDelivrPath("graphiql-subscriptions-fetcher", "0.0.2", "browser/client.js")));
         replacements.put("props", props);
         replacements.put("headers", headers);
         replacements.put("subscriptionClientTimeout", String.valueOf(subscriptionsTimeout));
         return replacements;
     }
 
-    private String graphiqlUrl(String staticBasePath, String filename) {
-        if (graphiqlCdnEnabled && StringUtils.isNotBlank(graphiqlCdnVersion)) {
-            return CDNJS_CLOUDFLARE_COM_AJAX_LIBS_GRAPHIQL + graphiqlCdnVersion + "/" + filename;
+    private String getResourceUrl(String staticBasePath, String staticFileName, String cdnUrl) {
+        if (graphiqlCdnEnabled && StringUtils.isNotBlank(cdnUrl)) {
+            return cdnUrl;
         }
-        return staticBasePath + "vendor/" + filename;
+        return joinStaticPath(staticBasePath, staticFileName);
+    }
+
+    private String joinStaticPath(String staticBasePath, String staticFileName) {
+        return staticBasePath + "vendor/" + staticFileName;
+    }
+
+    private String joinCdnjsPath(String library, String cdnVersion, String cdnFileName) {
+        return CDNJS_CLOUDFLARE_COM_AJAX_LIBS + library + "/" + cdnVersion + "/" + cdnFileName;
+    }
+
+    private String joinJsDelivrPath(String library, String cdnVersion, String cdnFileName) {
+        return CDN_JSDELIVR_NET_NPM + library + "@" + cdnVersion + "/" + cdnFileName;
     }
 
     private String constructGraphQlEndpoint(HttpServletRequest request, @RequestParam Map<String, String> params) {

graphiql-spring-boot-autoconfigure/src/main/resources/graphiql.html

@@ -22,17 +22,18 @@
             justify-content: center;
             text-align: center;
         }
+
     </style>
 
-    <script src="${staticBasePath}vendor/es6-promise.auto.min.js"></script>
-    <script src="${staticBasePath}vendor/fetch.min.js"></script>
-    <script src="${staticBasePath}vendor/react.min.js"></script>
-    <script src="${staticBasePath}vendor/react-dom.min.js"></script>
+    <script src="${es6PromiseJsUrl}"></script>
+    <script src="${fetchJsUrl}"></script>
+    <script src="${reactJsUrl}"></script>
+    <script src="${reactDomJsUrl}"></script>
 
     <link rel="stylesheet" href="${graphiqlCssUrl}"/>
     <script src="${graphiqlJsUrl}"></script>
-    <script src="${staticBasePath}vendor/subscriptions-transport-ws-browser-client-0.8.3.js"></script>
-    <script src="${staticBasePath}vendor/graphiql-subscriptions-fetcher-browser-client-0.0.2.js"></script>
+    <script src="${subscriptionsTransportWsBrowserClientUrl}"></script>
+    <script src="${graphiqlSubscriptionsFetcherBrowserClientUrl}"></script>
 </head>
 <body>
 <div id="splash">
@@ -146,6 +147,7 @@
         React.createElement(GraphiQL, props),
         document.body
     );
+
 </script>
 </body>
 </html>