From a36be581242ca22dfbcfa675bd63c461d73a3ccc Mon Sep 17 00:00:00 2001
From: Arunoda Susiripala <arunoda.susiripala@gmail.com>
Date: Tue, 13 Jun 2017 11:44:31 +0530
Subject: [PATCH] Rewrite urls with hashes correct for static export. (#2242)

* Rewrite urls with hashes correct for static export.

* Fix some lint issues inside an example app.
---
 examples/with-sw-precache/pages/index.js |  6 ++--
 lib/router/index.js                      | 25 +++++++-------
 test/integration/static/pages/dynamic.js | 43 ++++++++++++++++--------
 test/integration/static/pages/index.js   |  5 +++
 test/integration/static/test/browser.js  | 24 +++++++++++++
 5 files changed, 73 insertions(+), 30 deletions(-)

diff --git a/examples/with-sw-precache/pages/index.js b/examples/with-sw-precache/pages/index.js
index 8cd1d92614..eec403dce7 100644
--- a/examples/with-sw-precache/pages/index.js
+++ b/examples/with-sw-precache/pages/index.js
@@ -1,7 +1,7 @@
 import React from 'react'
 
 export default class extends React.PureComponent {
-  componentDidMount() {
+  componentDidMount () {
     if ('serviceWorker' in navigator) {
       navigator.serviceWorker
         .register('/service-worker.js')
@@ -9,11 +9,11 @@ export default class extends React.PureComponent {
           console.log('service worker registration successful')
         })
         .catch(err => {
-          console.warn('service worker registration failed')
+          console.warn('service worker registration failed', err.message)
         })
     }
   }
-  render() {
+  render () {
     return (
       <p>Check the console for the Service Worker registration status.</p>
     )
diff --git a/lib/router/index.js b/lib/router/index.js
index 375027e527..036a4f64a4 100644
--- a/lib/router/index.js
+++ b/lib/router/index.js
@@ -87,21 +87,20 @@ export function _notifyBuildIdMismatch (nextRoute) {
 }
 
 export function _rewriteUrlForNextExport (url) {
-  // If there are no query strings
-  if (!/\?/.test(url)) {
-    return rewritePath(url)
-  }
+  const [, hash] = url.split('#')
+  url = url.replace(/#.*/, '')
 
-  const [path, qs] = url.split('?')
+  let [path, qs] = url.split('?')
+  path = path.replace(/\/$/, '')
 
-  const newPath = rewritePath(path)
-  return `${newPath}?${qs}`
+  let newPath = `${path}/`
+  if (qs) {
+    newPath = `${newPath}?${qs}`
+  }
 
-  function rewritePath (path) {
-    // If ends with slash simply return that path
-    if (/\/$/.test(path)) {
-      return path
-    }
-    return `${path}/`
+  if (hash) {
+    newPath = `${newPath}#${hash}`
   }
+
+  return newPath
 }
diff --git a/test/integration/static/pages/dynamic.js b/test/integration/static/pages/dynamic.js
index 2824dda28a..1e91f86a0a 100644
--- a/test/integration/static/pages/dynamic.js
+++ b/test/integration/static/pages/dynamic.js
@@ -1,18 +1,33 @@
+/* global location */
+import React from 'react'
 import Link from 'next/link'
 
-const DynamicPage = ({ text }) => (
-  <div id='dynamic-page'>
-    <div>
-      <Link href='/'>
-        <a>Go Back</a>
-      </Link>
-    </div>
-    <p>{ text }</p>
-  </div>
-)
+export default class DynamicPage extends React.Component {
+  state = {}
 
-DynamicPage.getInitialProps = ({ query }) => {
-  return { text: query.text }
-}
+  static getInitialProps ({ query }) {
+    return { text: query.text }
+  }
+
+  componentDidMount () {
+    const [, hash] = location.href.split('#')
+    this.setState({ hash })
+  }
 
-export default DynamicPage
+  render () {
+    const { text } = this.props
+    const { hash } = this.state
+
+    return (
+      <div id='dynamic-page'>
+        <div>
+          <Link href='/'>
+            <a>Go Back</a>
+          </Link>
+        </div>
+        <p>{ text }</p>
+        <div id='hash'>Hash: {hash}</div>
+      </div>
+    )
+  }
+}
diff --git a/test/integration/static/pages/index.js b/test/integration/static/pages/index.js
index 40d581e6ad..b1ecde6253 100644
--- a/test/integration/static/pages/index.js
+++ b/test/integration/static/pages/index.js
@@ -39,6 +39,11 @@ export default () => (
       >
         <a id='dynamic-2'>Dynamic 2</a>
       </Link>
+      <Link
+        href='/dynamic?text=zeit+is+awesome#cool'
+      >
+        <a id='with-hash'>With Hash</a>
+      </Link>
       <Link href='/level1'>
         <a id='level1-home-page'>Level1 home page</a>
       </Link>
diff --git a/test/integration/static/test/browser.js b/test/integration/static/test/browser.js
index 9529b3dc7a..23d56e0ec7 100644
--- a/test/integration/static/test/browser.js
+++ b/test/integration/static/test/browser.js
@@ -111,6 +111,30 @@ export default function (context) {
       browser.close()
     })
 
+    it('should render pages with url hash correctly', async () => {
+      const browser = await webdriver(context.port, '/')
+
+      // Check for the query string content
+      const text = await browser
+          .elementByCss('#with-hash').click()
+          .waitForElementByCss('#dynamic-page')
+          .elementByCss('#dynamic-page p').text()
+
+      expect(text).toBe('zeit is awesome')
+
+      // Check for the hash
+      while (true) {
+        const hashText = await browser
+          .elementByCss('#hash').text()
+
+        if (/cool/.test(hashText)) {
+          break
+        }
+      }
+
+      browser.close()
+    })
+
     describe('pages in the nested level: level1', () => {
       it('should render the home page', async () => {
         const browser = await webdriver(context.port, '/')
-- 
GitLab