Update GraphQL Playground to 1.7.28 version (#1190, #1069)

- track GraphQL Playground new versions via @dependabot
- automate GraphQL Playground integration glue adapting for new versions

Author: tyranron

Makefile

@@ -163,6 +163,17 @@ graphiql:
 	make graphiql
 
 
+# Download and prepare actual version of GraphQL Playground static files, used
+# for integrating it.
+#
+# Usage:
+#	make graphql-playground
+
+graphql-playground:
+	@cd juniper/ && \
+	make graphql-playground
+
+
 
 
 ##################
@@ -172,5 +183,5 @@ graphiql:
 .PHONY: book fmt lint release test \
         book.build book.serve \
         cargo.fmt cargo.lint cargo.release cargo.test \
-        graphiql \
+        graphiql graphql-playground \
         test.book test.cargo

juniper/CHANGELOG.md

@@ -70,6 +70,7 @@ All user visible changes to `juniper` crate will be documented in this file. Thi
 
 - Made `GraphQLRequest` fields public. ([#750])
 - Relaxed [object safety] requirement for `GraphQLValue` and `GraphQLValueAsync` traits. ([ba1ed85b])
+- Updated [GraphQL Playground] to 1.7.28 version. ([#1190])
 
 ## Fixed
 
@@ -123,6 +124,7 @@ All user visible changes to `juniper` crate will be documented in this file. Thi
 [#1147]: /../../pull/1147
 [#1176]: /../../pull/1176
 [#1188]: /../../pull/1188
+[#1190]: /../../pull/1190
 [ba1ed85b]: /../../commit/ba1ed85b3c3dd77fbae7baf6bc4e693321a94083
 [CVE-2022-31173]: /../../security/advisories/GHSA-4rx6-g5vg-5f3j
 
@@ -144,6 +146,7 @@ See [old CHANGELOG](/../../blob/juniper-v0.15.9/juniper/CHANGELOG.md).
 [Cargo feature]: https://doc.rust-lang.org/cargo/reference/features.html
 [`graphql-ws` GraphQL over WebSocket Protocol]: https://github.com/graphql/graphiql
 [GraphiQL]: https://github.com/enisdenjo/graphql-ws/master/PROTOCOL.md
+[GraphQL Playground]: https://github.com/prisma/graphql-playground
 [graphql-scalars.dev]: https://graphql-scalars.dev
 [October 2021]: https://spec.graphql.org/October2021
 [object safety]: https://doc.rust-lang.org/reference/items/traits.html#object-safety

juniper/Makefile

@@ -18,6 +18,8 @@ sed-i = sed -i$(if $(call eq,$(shell uname -s),Darwin), '',)
 
 GRAPHIQL_VER ?= $(strip \
 	$(shell grep -m1 '"graphiql": "' package.json | cut -d '"' -f4))
+GRAPHQL_PLAYGROUND_VER ?= $(strip \
+	$(shell grep -m1 '"graphql-playground-react": "' package.json | cut -d '"' -f4))
 
 
 
@@ -35,22 +37,37 @@ GRAPHIQL_VER ?= $(strip \
 graphiql:
 	curl -fL -o src/http/graphiql.html \
 		https://raw.githubusercontent.com/graphql/graphiql/graphiql%40$(GRAPHIQL_VER)/examples/graphiql-cdn/index.html
-	$(sed-i) 's|https://unpkg.com/graphiql/|https://unpkg.com/graphiql@$(GRAPHIQL_VER)/|g' \
+	$(sed-i) 's|unpkg.com/graphiql/|unpkg.com/graphiql@$(GRAPHIQL_VER)/|g' \
 		src/http/graphiql.html
-	$(sed-i) "s|'https://swapi-graphql.netlify.app/.netlify/functions/index'|GRAPHQL_URL|g" \
+	$(sed-i) "s|'https://swapi-graphql.netlify.app/.netlify/functions/index'|JUNIPER_URL|g" \
 		src/http/graphiql.html
-	$(sed-i) "s|url: GRAPHQL_URL,|url: GRAPHQL_URL,\n        subscriptionUrl: normalizeSubscriptionEndpoint(GRAPHQL_URL, GRAPHQL_SUBSCRIPTIONS_URL)|" \
+	$(sed-i) "s|url: JUNIPER_URL,|url: JUNIPER_URL,\n        subscriptionUrl: normalizeSubscriptionEndpoint(JUNIPER_URL, JUNIPER_SUBSCRIPTIONS_URL)|" \
 		src/http/graphiql.html
 	$(sed-i) 's|<script>|<script>\n<!-- inject -->|' \
 		src/http/graphiql.html
 	$(sed-i) '/X-Example-Header/d' \
 		src/http/graphiql.html
 
 
+# Download and prepare actual version of GraphQL Playground static files, used
+# for integrating it.
+#
+# Usage:
+#	make graphql-playground
+
+graphql-playground:
+	curl -fL -o src/http/playground.html \
+		https://raw.githubusercontent.com/graphql/graphql-playground/graphql-playground-react%40$(GRAPHQL_PLAYGROUND_VER)/packages/graphql-playground-html/withAnimation.html
+	$(sed-i) 's|cdn.jsdelivr.net/npm/graphql-playground-react/|cdn.jsdelivr.net/npm/graphql-playground-react@$(GRAPHQL_PLAYGROUND_VER)/|g' \
+		src/http/playground.html
+	$(sed-i) "s|// you can add more options here|endpoint: 'JUNIPER_URL', subscriptionEndpoint: 'JUNIPER_SUBSCRIPTIONS_URL'|" \
+		src/http/playground.html
+
+
 
 
 ##################
 # .PHONY section #
 ##################
 
-.PHONY: graphiql
+.PHONY: graphiql graphql-playground

juniper/package.json

@@ -1,9 +1,10 @@
 {
   "private": true,
   "scripts": {
-    "postinstall": "make graphiql"
+    "postinstall": "make graphiql graphql-playground"
   },
   "dependencies": {
-    "graphiql": "3.0.5"
+    "graphiql": "3.0.5",
+    "graphql-playground-react": "1.7.28"
   }
 }

juniper/src/http/graphiql.html

@@ -59,8 +59,8 @@
 <!-- inject -->
       const root = ReactDOM.createRoot(document.getElementById('graphiql'));
       const fetcher = GraphiQL.createFetcher({
-        url: GRAPHQL_URL,
-        subscriptionUrl: normalizeSubscriptionEndpoint(GRAPHQL_URL, GRAPHQL_SUBSCRIPTIONS_URL)
+        url: JUNIPER_URL,
+        subscriptionUrl: normalizeSubscriptionEndpoint(JUNIPER_URL, JUNIPER_SUBSCRIPTIONS_URL)
       });
       const explorerPlugin = GraphiQLPluginExplorer.explorerPlugin();
       root.render(

juniper/src/http/graphiql.rs

@@ -20,11 +20,11 @@ pub fn graphiql_source(
 
     include_str!("graphiql.html").replace(
         "<!-- inject -->",
-        // Language: JavaScript
         &format!(
+            // language=JavaScript
             "
-      var GRAPHQL_URL = '{graphql_url}';
-      var GRAPHQL_SUBSCRIPTIONS_URL = '{graphql_subscriptions_url}';
+      var JUNIPER_URL = '{graphql_url}';
+      var JUNIPER_SUBSCRIPTIONS_URL = '{graphql_subscriptions_url}';
 
 {grahiql_js}