feat(_document.js): refactored globalhead to now exist in _document.js

amclin · Nov 27, 2019 · 6d013e3 · 6d013e3
1 parent c429b0d
commit 6d013e3
Show file tree

Hide file tree

Showing 16 changed files with 132 additions and 89 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,26 +1,27 @@
 {
-    "env": {
-        "browser": true,
-        "es6": true,
-        "jest": true
+  "env": {
+    "browser": true,
+    "es6": true,
+    "jest": true
+  },
+  "extends": ["airbnb", "prettier"],
+  "globals": {
+    "Atomics": "readonly",
+    "SharedArrayBuffer": "readonly"
+  },
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
     },
-    "extends": ["airbnb", "prettier"],
-    "globals": {
-        "Atomics": "readonly",
-        "SharedArrayBuffer": "readonly"
-    },
-    "parser": "babel-eslint",
-    "parserOptions": {
-        "ecmaFeatures": {
-            "jsx": true
-        },
-        "ecmaVersion": 2018,
-        "sourceType": "module"
-    },
-    "plugins": [
-        "react"
-    ],
-    "rules": {
-      "react/prop-types": ["error"]
-    }
+    "ecmaVersion": 2018,
+    "sourceType": "module"
+  },
+  "plugins": ["react"],
+  "rules": {
+    "react/prop-types": ["error"],
+    "react/jsx-props-no-spreading": ["warn"],
+    "react/forbid-prop-types": ["warn"],
+    "no-unused-vars": ["warn"]
+  }
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -89,6 +89,7 @@
     ],
     "coveragePathIgnorePatterns": [
       "<rootDir>/build/",
+      "<rootDir>/default/src/pages/_document.jsx",
       "<rootDir>/out/",
       "<rootDir>/.next/",
       "<rootDir>/node_modules/",

diff --git a/templates/default.json b/templates/default.json
@@ -62,6 +62,7 @@
       "collectCoverageFrom": ["**/*.{js,jsx,ts,tsx}"],
       "coveragePathIgnorePatterns": [
         "<rootDir>/build/",
+        "<rootDir>/src/pages/_document.jsx",
         "<rootDir>/out/",
         "<rootDir>/.next/",
         "<rootDir>/node_modules/",

diff --git a/templates/default/babelrc b/templates/default/babelrc
@@ -1,3 +1,10 @@
 {
-  "presets": ["@babel/preset-env","next/babel"]
+  "presets": [
+    [
+      "next/babel", 
+      {
+        "preset-env": { "targets": { "node": "current" } }
+      }
+    ]
+  ]
 }
diff --git a/templates/default/eslintrc.json b/templates/default/eslintrc.json
@@ -19,6 +19,9 @@
   },
   "plugins": ["react"],
   "rules": {
-    "react/prop-types": ["error"]
+    "react/prop-types": ["error"],
+    "react/jsx-props-no-spreading": ["warn"],
+    "react/forbid-prop-types": ["warn"],
+    "no-unused-vars": ["warn"]
   }
 }
diff --git a/templates/default/src/components/organisms/GlobalHead/GlobalHead.jsx b/templates/default/src/components/organisms/GlobalHead/GlobalHead.jsx
diff --git a/templates/default/src/components/organisms/GlobalHead/__snapshots__/GlobalHead.test.jsx.snap b/templates/default/src/components/organisms/GlobalHead/__snapshots__/GlobalHead.test.jsx.snap
diff --git a/templates/default/src/components/organisms/GlobalHead/index.js b/templates/default/src/components/organisms/GlobalHead/index.js
diff --git a/templates/default/src/components/organisms/PageTitle/PageTitle.jsx b/templates/default/src/components/organisms/PageTitle/PageTitle.jsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Head from 'next/head'
+
+const PageTitle = ({ title }) => {
+  return (
+    <Head>
+      <title key="title">{title}</title>
+    </Head>
+  )
+}
+
+PageTitle.propTypes = {
+  title: PropTypes.string.isRequired
+}
+
+export default PageTitle
diff --git a/.../organisms/GlobalHead/GlobalHead.test.jsx → ...ts/organisms/PageTitle/PageTitle.test.jsx b/.../organisms/GlobalHead/GlobalHead.test.jsx → ...ts/organisms/PageTitle/PageTitle.test.jsx
@@ -1,36 +1,30 @@
 import React from 'react'
 import ShallowRenderer from 'react-test-renderer/shallow'
-import GlobalHead from '.'
+import PageTitle from '.'
 
-describe('GlobalHead', () => {
+describe('PageTitle', () => {
   // Test uses ShallowRenderer.render() instead of TestRenderer.create()
-  // because <GlobalHead> encapsulates NextJS <Head> which in turn uses
+  // because <PageTitle> encapsulates NextJS <Head> which in turn uses
   // React <Helmet> and Helmet doesn't show up in a normal component render.
   it('creates a <head> element suitable for global usage across all pages', () => {
-    const renderer = new ShallowRenderer();
-    renderer.render(
-      <GlobalHead title="mock title for test" />
-    )
+    const renderer = new ShallowRenderer()
+    renderer.render(<PageTitle title="mock title for test" />)
     const result = renderer.getRenderOutput()
     expect(result).toMatchSnapshot()
   })
   it('populates the specified page title', () => {
-    const title = "mockTitle"
-    const renderer = new ShallowRenderer();
-    renderer.render(
-      <GlobalHead title={title} />
-    )
+    const title = 'mockTitle'
+    const renderer = new ShallowRenderer()
+    renderer.render(<PageTitle title={title} />)
     const result = renderer.getRenderOutput()
     // Expect a React module with a populated <title>
     expect(result.props.children).toEqual(
-      expect.arrayContaining([
-        expect.objectContaining({
-          type: 'title',
-          props: {
-            children: title
-          }
-        })
-      ])
+      expect.objectContaining({
+        type: 'title',
+        props: {
+          children: title
+        }
+      })
     )
   })
 })
diff --git a/templates/default/src/components/organisms/PageTitle/__snapshots__/PageTitle.test.jsx.snap b/templates/default/src/components/organisms/PageTitle/__snapshots__/PageTitle.test.jsx.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PageTitle creates a <head> element suitable for global usage across all pages 1`] = `
+<Head>
+  <title>
+    mock title for test
+  </title>
+</Head>
+`;
diff --git a/templates/default/src/components/organisms/PageTitle/index.js b/templates/default/src/components/organisms/PageTitle/index.js
@@ -0,0 +1 @@
+export { default } from './PageTitle'
diff --git a/templates/default/src/pages/_document.jsx b/templates/default/src/pages/_document.jsx
@@ -0,0 +1,37 @@
+/* _document is only rendered on the server side and not on the client side
+ * Event handlers like onClick can't be added to this file
+ */
+import React from 'react'
+import Document, { Html, Head, Main, NextScript } from 'next/document'
+import Flavicon from '../components/molecules/Favicon'
+import Manifest from '../components/molecules/Manifest'
+
+class MyDocument extends Document {
+  static async getInitialProps(ctx) {
+    const initialProps = await Document.getInitialProps(ctx)
+    return { ...initialProps }
+  }
+
+  render() {
+    return (
+      <Html lang="en">
+        <Head>
+          {/* HEADER ELEMENTS THAT GO HERE:
+           * meta tags, global scripts, global stylesheets, rel links, etc.
+           * Tracking scripts like Google Analytics (try https://github.com/react-ga/react-ga)
+           */}
+          <Flavicon />
+          <Manifest />
+        </Head>
+        <body>
+          {/* NOSCRIPT: place them inside a new <noscript> tag here */}
+          <Main />
+          <NextScript />
+          {/* FOOTER: If your footer will not change based on api calls, place here, otherwise place in _app.js */}
+        </body>
+      </Html>
+    )
+  }
+}
+
+export default MyDocument
diff --git a/templates/default/src/pages/example/second-page/index.jsx b/templates/default/src/pages/example/second-page/index.jsx
@@ -1,18 +1,15 @@
 import React from 'react'
 import Link from 'next/link'
-import GlobalHead from '../../../components/organisms/GlobalHead'
+import PageTitle from '../../../components/organisms/PageTitle'
 
 const SecondPage = () => {
   return (
     <>
-      <GlobalHead title="Second Page - %%APPNAME%%" />
+      <PageTitle title="Second Page - %%APPNAME%%" />
       <main>
-        <p>
-          This is another page at a different URL.
-        </p>
+        <p>This is another page at a different URL.</p>
         <p>
           Return to the
-
           <Link href="/">homepage</Link>
         </p>
       </main>

diff --git a/templates/default/src/pages/index/index.jsx b/templates/default/src/pages/index/index.jsx
@@ -1,21 +1,29 @@
 import React from 'react'
 import Link from 'next/link'
-import GlobalHead from '../../components/organisms/GlobalHead'
+import PageTitle from '../../components/organisms/PageTitle'
 
 const Home = () => {
   return (
     <>
-      <GlobalHead title="%%APPNAME%%" />
+      <PageTitle title="%%APPNAME%%" />
       <p>Welcome to the boilerplate React app using NextJS!</p>
       <p>
         Try navigating to
-
         <Link href="/example/second-page">another page</Link>
-
         and observe the URL changing
       </p>
     </>
   )
 }
 
+// estlin-disable-next-line
+Home.getInitialProps = async context => {
+  /* Here you can make your pre-fetch for this page, it's a pre-rendering step
+   * only available for pages.
+   * Useful parameters in context object: req, res, query (passed from 4th render argument)
+   * It expects an object with props to be returned
+   */
+  return {}
+}
+
 export default Home