Merge branch 'fix/cli-command-names' of github.com:dac09/redwood into…

… fix/cli-command-names * 'fix/cli-command-names' of github.com:dac09/redwood: Add helmet to web for meta tags | Prerender support (redwoodjs#2909)
dac09 · Jul 7, 2021 · 9485f31 · 9485f31
2 parents e5f4f81 + f1d59ab
commit 9485f31
Show file tree

Hide file tree

Showing 16 changed files with 347 additions and 350 deletions.
diff --git a/packages/cli/src/commands/setup/auth/__tests__/__snapshots__/addAuthConfigToApp.test.js.snap b/packages/cli/src/commands/setup/auth/__tests__/__snapshots__/addAuthConfigToApp.test.js.snap
@@ -3,7 +3,7 @@
 exports[`Should add config lines to App.{js,tsx} Matches Auth0 Snapshot 1`] = `
 "import { AuthProvider } from '@redwoodjs/auth'
 import { Auth0Client } from '@auth0/auth0-spa-js'
-import { FatalErrorBoundary } from '@redwoodjs/web'
+import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
 import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
 
 import FatalErrorPage from 'src/pages/FatalErrorPage'
@@ -32,11 +32,13 @@ const auth0 = new Auth0Client({
 
 const App = () => (
   <FatalErrorBoundary page={FatalErrorPage}>
-    <AuthProvider client={auth0} type=\\"auth0\\">
-      <RedwoodApolloProvider>
-        <Routes />
-      </RedwoodApolloProvider>
-    </AuthProvider>
+    <RedwoodProvider>
+      <AuthProvider client={auth0} type=\\"auth0\\">
+        <RedwoodApolloProvider>
+          <Routes />
+        </RedwoodApolloProvider>
+      </AuthProvider>
+    </RedwoodProvider>
   </FatalErrorBoundary>
 )
 
@@ -48,7 +50,7 @@ exports[`Should add config lines to App.{js,tsx} Matches Firebase Snapshot 1`] =
 "import { AuthProvider } from '@redwoodjs/auth'
 import firebase from 'firebase/app'
 import 'firebase/auth'
-import { FatalErrorBoundary } from '@redwoodjs/web'
+import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
 import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
 
 import FatalErrorPage from 'src/pages/FatalErrorPage'
@@ -74,11 +76,13 @@ const firebaseClient = ((config) => {
 
 const App = () => (
   <FatalErrorBoundary page={FatalErrorPage}>
-    <AuthProvider client={firebaseClient} type=\\"firebase\\">
-      <RedwoodApolloProvider>
-        <Routes />
-      </RedwoodApolloProvider>
-    </AuthProvider>
+    <RedwoodProvider>
+      <AuthProvider client={firebaseClient} type=\\"firebase\\">
+        <RedwoodApolloProvider>
+          <Routes />
+        </RedwoodApolloProvider>
+      </AuthProvider>
+    </RedwoodProvider>
   </FatalErrorBoundary>
 )
 
@@ -89,7 +93,7 @@ export default App
 exports[`Should add config lines to App.{js,tsx} Matches azureActiveDirectory Snapshot 1`] = `
 "import { AuthProvider } from '@redwoodjs/auth'
 import { UserAgentApplication } from 'msal'
-import { FatalErrorBoundary } from '@redwoodjs/web'
+import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
 import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
 
 import FatalErrorPage from 'src/pages/FatalErrorPage'
@@ -108,11 +112,13 @@ const azureActiveDirectoryClient = new UserAgentApplication({
 
 const App = () => (
   <FatalErrorBoundary page={FatalErrorPage}>
-    <AuthProvider client={azureActiveDirectoryClient} type=\\"azureActiveDirectory\\">
-      <RedwoodApolloProvider>
-        <Routes />
-      </RedwoodApolloProvider>
-    </AuthProvider>
+    <RedwoodProvider>
+      <AuthProvider client={azureActiveDirectoryClient} type=\\"azureActiveDirectory\\">
+        <RedwoodApolloProvider>
+          <Routes />
+        </RedwoodApolloProvider>
+      </AuthProvider>
+    </RedwoodProvider>
   </FatalErrorBoundary>
 )
 
@@ -125,7 +131,7 @@ exports[`Should add config lines to App.{js,tsx} Matches ethereum Snapshot 1`] =
 import EthereumAuthClient from '@oneclickdapp/ethereum-auth'
 import { ApolloClient, InMemoryCache } from '@apollo/client'
 import { FetchConfigProvider, useFetchConfig } from '@redwoodjs/web'
-import { FatalErrorBoundary } from '@redwoodjs/web'
+import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
 import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
 
 import FatalErrorPage from 'src/pages/FatalErrorPage'
@@ -170,15 +176,17 @@ let ethereum
 
 const App = () => (
   <FatalErrorBoundary page={FatalErrorPage}>
-    <FetchConfigProvider>
-    <ApolloInjector>
-    <AuthProvider client={ethereum} type=\\"ethereum\\">
-      <RedwoodApolloProvider>
-        <Routes />
-      </RedwoodApolloProvider>
-    </AuthProvider>
-    </ApolloInjector>
-    </FetchConfigProvider>
+    <RedwoodProvider>
+      <FetchConfigProvider>
+      <ApolloInjector>
+      <AuthProvider client={ethereum} type=\\"ethereum\\">
+        <RedwoodApolloProvider>
+          <Routes />
+        </RedwoodApolloProvider>
+      </AuthProvider>
+      </ApolloInjector>
+      </FetchConfigProvider>
+    </RedwoodProvider>
   </FatalErrorBoundary>
 )
 
@@ -189,7 +197,7 @@ export default App
 exports[`Should add config lines to App.{js,tsx} Matches goTrue Snapshot 1`] = `
 "import { AuthProvider } from '@redwoodjs/auth'
 import GoTrue from 'gotrue-js'
-import { FatalErrorBoundary } from '@redwoodjs/web'
+import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
 import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
 
 import FatalErrorPage from 'src/pages/FatalErrorPage'
@@ -204,11 +212,13 @@ const goTrueClient = new GoTrue({
 
 const App = () => (
   <FatalErrorBoundary page={FatalErrorPage}>
-    <AuthProvider client={goTrueClient} type=\\"goTrue\\">
-      <RedwoodApolloProvider>
-        <Routes />
-      </RedwoodApolloProvider>
-    </AuthProvider>
+    <RedwoodProvider>
+      <AuthProvider client={goTrueClient} type=\\"goTrue\\">
+        <RedwoodApolloProvider>
+          <Routes />
+        </RedwoodApolloProvider>
+      </AuthProvider>
+    </RedwoodProvider>
   </FatalErrorBoundary>
 )
 
@@ -219,7 +229,7 @@ export default App
 exports[`Should add config lines to App.{js,tsx} Matches magicLink Snapshot 1`] = `
 "import { AuthProvider } from '@redwoodjs/auth'
 import { Magic } from 'magic-sdk'
-import { FatalErrorBoundary } from '@redwoodjs/web'
+import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
 import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
 
 import FatalErrorPage from 'src/pages/FatalErrorPage'
@@ -231,11 +241,13 @@ const m = new Magic(process.env.MAGICLINK_PUBLIC)
 
 const App = () => (
   <FatalErrorBoundary page={FatalErrorPage}>
-    <AuthProvider client={m} type=\\"magicLink\\">
-      <RedwoodApolloProvider>
-        <Routes />
-      </RedwoodApolloProvider>
-    </AuthProvider>
+    <RedwoodProvider>
+      <AuthProvider client={m} type=\\"magicLink\\">
+        <RedwoodApolloProvider>
+          <Routes />
+        </RedwoodApolloProvider>
+      </AuthProvider>
+    </RedwoodProvider>
   </FatalErrorBoundary>
 )
 
@@ -247,7 +259,7 @@ exports[`Should add config lines to App.{js,tsx} Matches netlify Snapshot 1`] =
 "import { AuthProvider } from '@redwoodjs/auth'
 import netlifyIdentity from 'netlify-identity-widget'
 import { isBrowser } from '@redwoodjs/prerender/browserUtils'
-import { FatalErrorBoundary } from '@redwoodjs/web'
+import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
 import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
 
 import FatalErrorPage from 'src/pages/FatalErrorPage'
@@ -259,11 +271,13 @@ isBrowser && netlifyIdentity.init()
 
 const App = () => (
   <FatalErrorBoundary page={FatalErrorPage}>
-    <AuthProvider client={netlifyIdentity} type=\\"netlify\\">
-      <RedwoodApolloProvider>
-        <Routes />
-      </RedwoodApolloProvider>
-    </AuthProvider>
+    <RedwoodProvider>
+      <AuthProvider client={netlifyIdentity} type=\\"netlify\\">
+        <RedwoodApolloProvider>
+          <Routes />
+        </RedwoodApolloProvider>
+      </AuthProvider>
+    </RedwoodProvider>
   </FatalErrorBoundary>
 )
 
@@ -274,7 +288,7 @@ export default App
 exports[`Should add config lines to App.{js,tsx} Matches nhost Snapshot 1`] = `
 "import { AuthProvider } from '@redwoodjs/auth'
 import { createClient } from 'nhost-js-sdk'
-import { FatalErrorBoundary } from '@redwoodjs/web'
+import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
 import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
 
 import FatalErrorPage from 'src/pages/FatalErrorPage'
@@ -290,11 +304,13 @@ const nhostClient = createClient({
 
 const App = () => (
   <FatalErrorBoundary page={FatalErrorPage}>
-    <AuthProvider client={nhostClient} type=\\"nhost\\">
-      <RedwoodApolloProvider>
-        <Routes />
-      </RedwoodApolloProvider>
-    </AuthProvider>
+    <RedwoodProvider>
+      <AuthProvider client={nhostClient} type=\\"nhost\\">
+        <RedwoodApolloProvider>
+          <Routes />
+        </RedwoodApolloProvider>
+      </AuthProvider>
+    </RedwoodProvider>
   </FatalErrorBoundary>
 )
 
@@ -305,7 +321,7 @@ export default App
 exports[`Should add config lines to App.{js,tsx} Matches supabase Snapshot 1`] = `
 "import { AuthProvider } from '@redwoodjs/auth'
 import { createClient } from '@supabase/supabase-js'
-import { FatalErrorBoundary } from '@redwoodjs/web'
+import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
 import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
 
 import FatalErrorPage from 'src/pages/FatalErrorPage'
@@ -320,11 +336,13 @@ const supabaseClient = createClient(
 
 const App = () => (
   <FatalErrorBoundary page={FatalErrorPage}>
-    <AuthProvider client={supabaseClient} type=\\"supabase\\">
-      <RedwoodApolloProvider>
-        <Routes />
-      </RedwoodApolloProvider>
-    </AuthProvider>
+    <RedwoodProvider>
+      <AuthProvider client={supabaseClient} type=\\"supabase\\">
+        <RedwoodApolloProvider>
+          <Routes />
+        </RedwoodApolloProvider>
+      </AuthProvider>
+    </RedwoodProvider>
   </FatalErrorBoundary>
 )
 

diff --git a/packages/create-redwood-app/template/web/src/App.tsx b/packages/create-redwood-app/template/web/src/App.tsx
@@ -1,4 +1,4 @@
-import { FatalErrorBoundary } from '@redwoodjs/web'
+import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
 import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
 
 import FatalErrorPage from 'src/pages/FatalErrorPage'
@@ -8,9 +8,11 @@ import './index.css'
 
 const App = () => (
   <FatalErrorBoundary page={FatalErrorPage}>
-    <RedwoodApolloProvider>
-      <Routes />
-    </RedwoodApolloProvider>
+    <RedwoodProvider>
+      <RedwoodApolloProvider>
+        <Routes />
+      </RedwoodApolloProvider>
+    </RedwoodProvider>
   </FatalErrorBoundary>
 )
 

diff --git a/packages/prerender/ambient.d.ts b/packages/prerender/ambient.d.ts
@@ -1,8 +1,12 @@
+import type { HelmetData } from 'react-helmet-async'
+
 export {}
+
 declare global {
   namespace NodeJS {
     interface Global {
       __REDWOOD__PRERENDERING: boolean
+      __REDWOOD__HELMET_CONTEXT: { helmet?: HelmetData }
     }
   }
 }
diff --git a/packages/prerender/package.json b/packages/prerender/package.json
@@ -21,6 +21,7 @@
     "@redwoodjs/structure": "0.34.1",
     "@redwoodjs/web": "0.34.1",
     "babel-plugin-ignore-html-and-css-imports": "0.1.0",
+    "cheerio": "^1.0.0-rc.10",
     "node-fetch": "2.6.1"
   },
   "scripts": {

diff --git a/packages/prerender/src/internal.ts b/packages/prerender/src/internal.ts
@@ -28,6 +28,8 @@ export const registerShims = () => {
 
   global.__REDWOOD__PRERENDERING = true
 
+  global.__REDWOOD__HELMET_CONTEXT = {}
+
   // Let routes auto loader plugin know
   process.env.__REDWOOD__PRERENDERING = '1'
 

diff --git a/packages/prerender/src/runPrerender.tsx b/packages/prerender/src/runPrerender.tsx
@@ -4,6 +4,7 @@ import path from 'path'
 import React from 'react'
 
 import babelRequireHook from '@babel/register'
+import cheerio from 'cheerio'
 import ReactDOMServer from 'react-dom/server'
 
 import { getPaths } from '@redwoodjs/internal'
@@ -68,11 +69,31 @@ export const runPrerender = async ({
     </LocationProvider>
   )
 
+  const { helmet } = global.__REDWOOD__HELMET_CONTEXT
+
+  const indexHtmlTree = cheerio.load(indexContent)
+
+  if (helmet) {
+    const helmetElements = `
+  ${helmet?.link.toString()}
+  ${helmet?.meta.toString()}
+  ${helmet?.script.toString()}
+  ${helmet?.noscript.toString()}
+  `
+
+    // Add all head elements
+    indexHtmlTree('head').prepend(helmetElements)
+
+    // Only change the title, if its not empty
+    if (cheerio.load(helmet?.title.toString())('title').text() !== '') {
+      indexHtmlTree('title').replaceWith(helmet?.title.toString())
+    }
+  }
+
   // This is set by webpack by the html plugin
-  const renderOutput = indexContent.replace(
-    '<server-markup></server-markup>',
-    componentAsHtml
-  )
+  indexHtmlTree('server-markup').replaceWith(componentAsHtml)
+
+  const renderOutput = indexHtmlTree.html()
 
   return renderOutput
 }

diff --git a/packages/web/global.d.ts b/packages/web/global.d.ts
@@ -1,3 +1,5 @@
+import type { HelmetData } from 'react-helmet-async'
+
 export {}
 
 declare global {
@@ -7,6 +9,7 @@ declare global {
        * This global is set to true by the prerendering CLI command.
        */
       __REDWOOD__PRERENDERING: boolean
+      __REDWOOD__HELMET_CONTEXT: { helmet?: HelmetData }
     }
   }
 }
diff --git a/packages/web/package.json b/packages/web/package.json
@@ -16,6 +16,7 @@
     "core-js": "3.13.1",
     "graphql": "15.5.1",
     "proptypes": "1.1.0",
+    "react-helmet-async": "1.0.9",
     "react-hot-toast": "2.0.0"
   },
   "peerDependencies": {