Repository: ProjectEvergreen/greenwood (js)

Issue:
`staticRouter` broken when using browser back button (content not loading)
## Type of Change
- [ ] New Feature Request
- [ ] Documentation / Website
- [ ] Improvement / Suggestion
- [x] Bug
- [ ] Other (please clarify below)

## Summary
Yikes, so this a bit embarrassing to report, but it looks like `staticRouter` has been causing the usage of the browser's back button to not work at all on the current website, by not reloading the expected content.  😱 

Notice in the below screenshot, the URL shows `/plugins/`, but the content is wrong, it is stuck on _Resource_.

![Screen Shot 2022-05-06 at 9 06 32 PM](https://user-images.githubusercontent.com/895923/167231882-3acedf7e-139c-4111-8a13-9386f8aa7d1f.png)
 
## Details
For example, on the current website, following these steps
1. Click _Plugins_ in the header navigation
1. Click _Context_ on the side nav
1. Click _Copy_ on the side nav
1. Click _Resource_ on the side nav
1. Click _Render_ on the side nav
1. Click the browser `Back` button

### Expected
_Resource_ content would load, and continuing to press `Back` would load the content in reverse order; _Copy_ -> _Context_ -> _Plugins_.

### Actual
The URL bar continues to cycle backwards, but the content continues to display _Resource_ content.

Pull request:
track partial content loading to support back button functionality
<!--
## Submitting a Pull Request
We love contributions and appreciate any help you can offer!
-->

## Related Issue
resolves #932

## Summary of Changes
1. Correctly manage back button navigation to load content

Validated with the following flows by clicking all the links, then verify using the back button works to reverse the navigation and content correctly
**Home -> Plugins + Side Nav**
1. Load the home page
1. Click _Plugins_ in the header navigation
1. Click _Context_ on the side nav
1. Click _Copy_ on the side nav
1. Click _Resource_ on the side nav
1. Click _Render_ on the side nav

**Plugins + Side Nav**
1. Click _Plugins_ in the header navigation
1. Click _Context_ on the side nav
1. Click _Copy_ on the side nav
1. Click _Resource_ on the side nav
1. Click _Render_ on the side nav
1. Click the browser `Back` button

**Plugins -> About**
1. Click _Plugins_ in the header navigation
1. Click _Context_ on the side nav
1. Click _Copy_ on the side nav
1. Click _Resource_ on the side nav
1. Click _Render_ on the side nav
1. Click _About_ in the header navigation
1. Click _Goals_ on the side nav
1. Click _How It Works_ on the side nav

## TODO
1. [x] Cross browser testing
1. [x] Clean up console logging

Patch:
diff --git a/packages/cli/src/lib/router.js b/packages/cli/src/lib/router.js
index 4d905a35..f35cd6e4 100644
--- a/packages/cli/src/lib/router.js
+++ b/packages/cli/src/lib/router.js
@@ -1,4 +1,5 @@
 /* eslint-disable no-underscore-dangle */
+
 document.addEventListener('click', function(e) {
   const href = (e.path && e.path[0]
     ? e.path[0].href // chrome + edge
@@ -13,14 +14,15 @@ document.addEventListener('click', function(e) {
 
   if (canClientSideRoute) {
     e.preventDefault();
-    
+
     const route = href.replace(window.location.origin, '');
     const routerOutlet = Array.from(document.getElementsByTagName('greenwood-route')).filter(outlet => {
       return outlet.getAttribute('data-route') === route;
     })[0];
 
     if (routerOutlet.getAttribute('data-template') === window.__greenwood.currentTemplate) {
-      window.__greenwood.currentTemplate = routerOutlet.getAttribute('data-template');
+      window.__greenwood.lastRoutes.push(window.location.pathname);
+
       routerOutlet.loadRoute();
     } else {
       window.location.href = href;
@@ -28,11 +30,29 @@ document.addEventListener('click', function(e) {
   }
 });
 
+window.addEventListener('popstate', () => {
+  try {
+    if (window.__greenwood.lastRoutes.length > 0) {
+      const lastRoute = window.__greenwood.lastRoutes.pop();
+      const routerOutlet = Array.from(document.getElementsByTagName('greenwood-route')).filter(outlet => {
+        return outlet.getAttribute('data-route') === lastRoute;
+      })[0];
+
+      routerOutlet.loadRoute();
+    } else {
+      history.go(-1);
+    }
+  } catch (e) {
+    console.debug('Unexpected error trying to go back.');
+    console.error(e);
+  }
+});
+
 class RouteComponent extends HTMLElement {
   loadRoute() {
     const route = this.getAttribute('data-route');
     const key = this.getAttribute('data-key');
-    
+
     fetch(key)
       .then(res => res.text())
       .then((response) => {
@@ -45,4 +65,4 @@ class RouteComponent extends HTMLElement {
 class RouterOutletComponent extends HTMLElement { }
 
 customElements.define('greenwood-route', RouteComponent);
-customElements.define('router-outlet', RouterOutletComponent); 
\ No newline at end of file
+customElements.define('router-outlet', RouterOutletComponent);
\ No newline at end of file
diff --git a/packages/cli/src/plugins/resource/plugin-optimization-mpa.js b/packages/cli/src/plugins/resource/plugin-optimization-mpa.js
index 99daa7f5..e98a1b8d 100644
--- a/packages/cli/src/plugins/resource/plugin-optimization-mpa.js
+++ b/packages/cli/src/plugins/resource/plugin-optimization-mpa.js
@@ -80,6 +80,7 @@ class OptimizationMPAResource extends ResourceInterface {
           <script>
             window.__greenwood = window.__greenwood || {};
             
+            window.__greenwood.lastRoutes = [];
             window.__greenwood.currentTemplate = "${currentTemplate}";
           </script> 
           </head>


Test patch:
diff --git a/packages/cli/test/cases/build.config.static-router/build.config.static-router.spec.js b/packages/cli/test/cases/build.config.static-router/build.config.static-router.spec.js
index 577a1831..1c8edd31 100644
--- a/packages/cli/test/cases/build.config.static-router/build.config.static-router.spec.js
+++ b/packages/cli/test/cases/build.config.static-router/build.config.static-router.spec.js
@@ -95,6 +95,7 @@ describe('Build Greenwood With: ', function() {
 
         expect(inlineScriptTags.length).to.be.equal(1);
         expect(inlineScriptTags[0].textContent).to.contain('window.__greenwood = window.__greenwood || {};');
+        expect(inlineScriptTags[0].textContent).to.contain('window.__greenwood.lastRoutes = [];');
         expect(inlineScriptTags[0].textContent).to.contain('window.__greenwood.currentTemplate = "page"');
       });