enhance(render-graphiql): offline favicon (#2452)

ardatan · github-actions[bot] · web-flow · commit 64f769ec41f4 · 2023-02-20T12:31:30.000+03:00
* enhance(render-graphiql): offline favicon

* Top-level await

* Render GraphiQL Prettier

* chore(dependencies): updated changesets for modified dependencies

---------

Co-authored-by: github-actions[bot] &lt;github-actions[bot]@users.noreply.github.com&gt;
diff --git a/.changeset/@graphql-yoga_plugin-prometheus-2452-dependencies.md b/.changeset/@graphql-yoga_plugin-prometheus-2452-dependencies.md
@@ -0,0 +1,5 @@
+---
+'@graphql-yoga/plugin-prometheus': patch
+---
+dependencies updates:
+  - Updated dependency [`@envelop/prometheus@7.0.5` ↗︎](https://www.npmjs.com/package/@envelop/prometheus/v/7.0.5) (from `7.0.4`, in `dependencies`)
diff --git a/.changeset/@graphql-yoga_plugin-response-cache-2452-dependencies.md b/.changeset/@graphql-yoga_plugin-response-cache-2452-dependencies.md
@@ -0,0 +1,5 @@
+---
+'@graphql-yoga/plugin-response-cache': patch
+---
+dependencies updates:
+  - Updated dependency [`@envelop/response-cache@^4.0.6` ↗︎](https://www.npmjs.com/package/@envelop/response-cache/v/4.0.6) (from `4.0.5`, in `dependencies`)
diff --git a/.changeset/ten-falcons-switch.md b/.changeset/ten-falcons-switch.md
@@ -0,0 +1,5 @@
+---
+'@graphql-yoga/render-graphiql': minor
+---
+
+Make favicon offline instead of using an online URL
diff --git a/examples/hello-world/index.js b/examples/hello-world/index.js
@@ -2,6 +2,7 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const { createServer } = require('node:http')
 const { createYoga, createSchema } = require('graphql-yoga')
+const { renderGraphiQL } = require('@graphql-yoga/render-graphiql')
 
 const yoga = createYoga({
   schema: createSchema({
@@ -24,6 +25,7 @@ const yoga = createYoga({
       }
     `,
   },
+  renderGraphiQL,
 })
 
 const server = createServer(yoga)
diff --git a/examples/hello-world/package.json b/examples/hello-world/package.json
@@ -7,6 +7,7 @@
     "check": "exit 0"
   },
   "dependencies": {
+    "@graphql-yoga/render-graphiql": "3.6.1",
     "graphql-yoga": "3.6.1",
     "graphql": "16.6.0"
   }
diff --git a/packages/graphql-yoga/scripts/generate-graphiql-html.js b/packages/graphql-yoga/scripts/generate-graphiql-html.js
@@ -45,7 +45,7 @@ async function minifyLandingPageHTML() {
     ),
   )
 
-  fs.writeFileSync(
+  await fs.promises.writeFile(
     path.join(__dirname, '../src/landing-page-html.ts'),
     `export default ${JSON.stringify(minified)}`,
   )
diff --git a/packages/render-graphiql/scripts/yoga-bundle-string.mjs b/packages/render-graphiql/scripts/yoga-bundle-string.mjs
@@ -1,21 +1,31 @@
-import * as fs from 'fs'
-import * as path from 'path'
-import { fileURLToPath } from 'url'
+import * as fs from 'node:fs'
+import * as path from 'node:path'
+import { fileURLToPath } from 'node:url'
 
 const directoryName = path.dirname(fileURLToPath(import.meta.url))
 const inputPath = path.resolve(directoryName, '..', '..', 'graphiql', 'dist')
 const jsFile = path.resolve(inputPath, 'yoga-graphiql.umd.js')
 const cssFile = path.resolve(inputPath, 'style.css')
+const faviconFile = path.resolve(
+  directoryName,
+  '../../../website/public/favicon.ico',
+)
 
 const outFile = path.resolve(directoryName, '..', 'src', 'graphiql.ts')
 
-const jsContents = fs.readFileSync(jsFile, 'utf-8')
-const cssContents = fs.readFileSync(cssFile, 'utf-8')
+const [jsContents, cssContents, faviconContents] = await Promise.all([
+  fs.promises.readFile(jsFile, 'utf-8'),
+  fs.promises.readFile(cssFile, 'utf-8'),
+  fs.promises.readFile(faviconFile, 'base64'),
+])
 
-fs.writeFileSync(
+await fs.promises.writeFile(
   outFile,
   [
     `export const js: string = ${JSON.stringify(jsContents)}`,
     `export const css: string = ${JSON.stringify(cssContents)}`,
+    `export const favicon: string = ${JSON.stringify(
+      `data:image/x-icon;base64,${faviconContents}`,
+    )}`,
   ].join('\n'),
 )
diff --git a/packages/render-graphiql/src/index.ts b/packages/render-graphiql/src/index.ts
@@ -1,17 +1,14 @@
 import type { GraphiQLOptions } from 'graphql-yoga'
 
-import { css, js } from './graphiql.js'
+import { css, js, favicon } from './graphiql.js'
 
 export const renderGraphiQL = (opts?: GraphiQLOptions) => /* HTML */ `
   <!DOCTYPE html>
   <html lang="en">
     <head>
       <meta charset="utf-8" />
       <title>${opts?.title || 'Yoga GraphiQL'}</title>
-      <link
-        rel="icon"
-        href="https://raw.githubusercontent.com/dotansimha/graphql-yoga/main/website/public/favicon.ico"
-      />
+      <link rel="icon" href="${favicon}" />
       <style>
         ${css}
       </style>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,7 @@`
`7`	`7`	`"check": "exit 0"`
`8`	`8`	`},`
`9`	`9`	`"dependencies": {`
	`10`	`+ "@graphql-yoga/render-graphiql": "3.6.1",`
`10`	`11`	`"graphql-yoga": "3.6.1",`
`11`	`12`	`"graphql": "16.6.0"`
`12`	`13`	`}`
Original file line number	Diff line number	Diff line change
`@@ -45,7 +45,7 @@ async function minifyLandingPageHTML() {`
`45`	`45`	`),`
`46`	`46`	`)`
`47`	`47`
`48`		`- fs.writeFileSync(`
	`48`	`+ await fs.promises.writeFile(`
`49`	`49`	`path.join(__dirname, '../src/landing-page-html.ts'),`
`50`	`50`	`export default ${JSON.stringify(minified)}`,
`51`	`51`	`)`