Add browser navigation for BrowserPreview (codesandbox#736)

* adding navigation stuf for BrowerPreviewf

* fix some bugs

* bug

Author: wuweiweiwu

packages/react-sandpack/src/components/Navigator/BackwardIcon.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+export default () => (
+  <svg
+    fill="currentColor"
+    preserveAspectRatio="xMidYMid meet"
+    height="1em"
+    width="1em"
+    viewBox="0 0 40 40"
+    style={{ verticalAlign: 'middle' }}
+  >
+    <path d="m26.5 12.1q0 0.3-0.2 0.6l-8.8 8.7 8.8 8.8q0.2 0.2 0.2 0.5t-0.2 0.5l-1.1 1.1q-0.3 0.3-0.6 0.3t-0.5-0.3l-10.4-10.4q-0.2-0.2-0.2-0.5t0.2-0.5l10.4-10.4q0.3-0.2 0.5-0.2t0.6 0.2l1.1 1.1q0.2 0.2 0.2 0.5z" />
+  </svg>
+);

packages/react-sandpack/src/components/Navigator/ForwardIcon.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+export default () => (
+  <svg
+    fill="currentColor"
+    preserveAspectRatio="xMidYMid meet"
+    height="1em"
+    width="1em"
+    viewBox="0 0 40 40"
+    style={{ verticalAlign: 'middle' }}
+  >
+    <path d="m26.3 21.4q0 0.3-0.2 0.5l-10.4 10.4q-0.3 0.3-0.6 0.3t-0.5-0.3l-1.1-1.1q-0.2-0.2-0.2-0.5t0.2-0.5l8.8-8.8-8.8-8.7q-0.2-0.3-0.2-0.6t0.2-0.5l1.1-1.1q0.3-0.2 0.5-0.2t0.6 0.2l10.4 10.4q0.2 0.2 0.2 0.5z" />
+  </svg>
+);

packages/react-sandpack/src/components/Navigator/Navigator.tsx

@@ -3,6 +3,9 @@ import { listen, dispatch } from 'codesandbox-api';
 import classNames from 'classnames';
 
 import RefreshIcon from './RefreshIcon';
+import BackwardIcon from './BackwardIcon';
+import ForwardIcon from './ForwardIcon';
+
 import withSandpack from '../../utils/with-sandpack';
 import { ISandpackContext } from '../../types';
 import cn from '../../utils/cn';
@@ -16,6 +19,8 @@ interface State {
   browserPath: string;
   baseUrl: string;
   lastCommittedUrl: string;
+  backwardNavigationStack: Array<string>;
+  forwardNavigationStack: Array<string>;
 }
 
 class Navigator extends React.Component<Props, State> {
@@ -29,6 +34,8 @@ class Navigator extends React.Component<Props, State> {
       browserPath: '/',
       baseUrl: '',
       lastCommittedUrl: '/',
+      backwardNavigationStack: [],
+      forwardNavigationStack: [],
     };
   }
 
@@ -39,13 +46,13 @@ class Navigator extends React.Component<Props, State> {
   handleMessage = (message: any) => {
     switch (message.type) {
       case 'urlchange': {
+        console.log('urlchange');
         this.setState(this.getUrlState(message.url));
         break;
       }
 
       default: {
         // nothing
-
         break;
       }
     }
@@ -65,13 +72,37 @@ class Navigator extends React.Component<Props, State> {
     const baseUrl = this.getBaseUrl(url);
     const browserPath = url.replace(baseUrl, '') || '/';
 
-    return { baseUrl, browserPath, lastCommittedUrl: url };
+    return {
+      baseUrl,
+      browserPath,
+      lastCommittedUrl: url,
+    };
   };
 
   commitUrl = () => {
-    if (this.props.sandpack.browserFrame) {
-      this.props.sandpack.browserFrame.src =
-        this.state.baseUrl + this.state.browserPath;
+    const { sandpack } = this.props;
+    const { baseUrl, browserPath } = this.state;
+
+    if (sandpack.browserFrame) {
+      const prevUrl = sandpack.browserFrame.src;
+      sandpack.browserFrame.src = baseUrl + browserPath;
+
+      // update lastCommittedUrl url
+      this.setState({
+        lastCommittedUrl: baseUrl + browserPath,
+      });
+
+      // update the navigation stacks
+      // when you enter a new URL the forwardNavigationStack is cleared
+      if (prevUrl != null) {
+        this.setState(prevState => ({
+          backwardNavigationStack: [
+            ...prevState.backwardNavigationStack,
+            prevUrl,
+          ],
+          forwardNavigationStack: [],
+        }));
+      }
     }
   };
 
@@ -99,6 +130,63 @@ class Navigator extends React.Component<Props, State> {
     }
   };
 
+  onBackwardNavigation = () => {
+    const { backwardNavigationStack } = this.state;
+    const { sandpack } = this.props;
+
+    if (backwardNavigationStack.length > 0) {
+      const newCurrUrl =
+        backwardNavigationStack[backwardNavigationStack.length - 1];
+      if (sandpack.browserFrame) {
+        const currUrl = sandpack.browserFrame.src;
+        sandpack.browserFrame.src = newCurrUrl;
+
+        const baseUrl = this.getBaseUrl(newCurrUrl);
+        const browserPath = newCurrUrl.replace(baseUrl, '') || '/';
+
+        this.setState(prevState => ({
+          backwardNavigationStack: prevState.backwardNavigationStack.slice(
+            0,
+            -1
+          ),
+          forwardNavigationStack: [
+            ...prevState.forwardNavigationStack,
+            currUrl,
+          ],
+          lastCommittedUrl: newCurrUrl,
+          browserPath,
+        }));
+      }
+    }
+  };
+
+  onFowardNavigation = () => {
+    const { forwardNavigationStack } = this.state;
+    const { sandpack } = this.props;
+
+    if (forwardNavigationStack.length > 0) {
+      const newCurrUrl =
+        forwardNavigationStack[forwardNavigationStack.length - 1];
+      if (sandpack.browserFrame) {
+        const currUrl = sandpack.browserFrame.src;
+        sandpack.browserFrame.src = newCurrUrl;
+
+        const baseUrl = this.getBaseUrl(newCurrUrl);
+        const browserPath = newCurrUrl.replace(baseUrl, '') || '/';
+
+        this.setState(prevState => ({
+          backwardNavigationStack: [
+            ...prevState.backwardNavigationStack,
+            currUrl,
+          ],
+          forwardNavigationStack: prevState.forwardNavigationStack.slice(0, -1),
+          lastCommittedUrl: newCurrUrl,
+          browserPath,
+        }));
+      }
+    }
+  };
+
   render() {
     const { browserPath } = this.state;
     const { sandpack, className, ...props } = this.props;
@@ -108,6 +196,18 @@ class Navigator extends React.Component<Props, State> {
         className={classNames(className, cn('Navigator', 'container'))}
         {...props}
       >
+        <button
+          className={cn('Navigator', 'button')}
+          onClick={this.onBackwardNavigation}
+        >
+          <BackwardIcon />
+        </button>
+        <button
+          className={cn('Navigator', 'button')}
+          onClick={this.onFowardNavigation}
+        >
+          <ForwardIcon />
+        </button>
         <button className={cn('Navigator', 'button')} onClick={this.onRefresh}>
           <RefreshIcon />
         </button>