Add prependOrigin

Author: pomber

packages/mini-browser/src/mini-browser.tsx

@@ -11,13 +11,16 @@ type MiniBrowserStep = {
   loadUrl?: string
   children: React.ReactNode
   zoom?: number
+  prependOrigin?: boolean
 }
 
 type MiniBrowserProps = {
   progress?: number
   backward?: boolean
   url?: string
   children: React.ReactNode
+  loadUrl?: string
+  prependOrigin?: boolean
   zoom?: number
   steps?: MiniBrowserStep[]
 } & React.PropsWithoutRef<JSX.IntrinsicElements["div"]>
@@ -35,11 +38,20 @@ function MiniBrowserWithRef(
     backward = false,
     zoom = 1,
     steps: ogSteps,
+    loadUrl,
+    prependOrigin,
     ...props
   }: MiniBrowserProps,
   ref: React.Ref<HTMLIFrameElement>
 ) {
-  const steps = useSteps(ogSteps, { url, children, zoom })
+  const steps = useSteps(ogSteps, {
+    url,
+    children,
+    zoom,
+    loadUrl,
+    prependOrigin,
+  })
+
   const stepIndex = backward
     ? Math.floor(progress)
     : Math.ceil(progress)
@@ -49,7 +61,12 @@ function MiniBrowserWithRef(
       {...props}
       zoom={currentStep.zoom}
       className={`ch-mini-browser ${props.className || ""}`}
-      titleBar={<Bar url={currentStep.url!} />}
+      titleBar={
+        <Bar
+          url={currentStep.url!}
+          linkUrl={currentStep.loadUrl!}
+        />
+      }
     >
       {currentStep.children || (
         <iframe
@@ -64,34 +81,70 @@ function MiniBrowserWithRef(
 
 function useSteps(
   ogSteps: MiniBrowserStep[] | undefined,
-  { zoom, url, children, loadUrl = url }: MiniBrowserStep
+  ogDefaults: MiniBrowserStep
 ) {
+  const defaults = transformStep(ogDefaults)
+  const {
+    zoom,
+    url,
+    children,
+    loadUrl,
+    prependOrigin,
+  } = defaults
+
   return React.useMemo(() => {
     if (!ogSteps) {
-      return [{ zoom, url, children, loadUrl }]
+      return [defaults]
     } else {
-      return ogSteps.map(s => ({
-        zoom,
-        url,
-        children,
-        loadUrl: s.loadUrl || loadUrl || s.url || url,
-        ...s,
-      }))
+      return ogSteps.map(s => {
+        const step = transformStep({
+          prependOrigin: prependOrigin,
+          ...s,
+        })
+        return {
+          zoom,
+          url,
+          children,
+          ...step,
+          loadUrl: step.loadUrl || step.url || loadUrl,
+        }
+      })
     }
-  }, [ogSteps, zoom, url, children, loadUrl])
+  }, [ogSteps, zoom, url, children, loadUrl, prependOrigin])
 }
 
-function Bar({ url }: { url: string }) {
+function Bar({
+  url,
+  linkUrl,
+}: {
+  url: string
+  linkUrl: string
+}) {
   return (
     <>
       <FrameButtons />
       <Back />
       <Forward />
       {/* <Refresh /> */}
       <input value={url} readOnly />
-      <Open href={url} />
+      <Open href={linkUrl} />
     </>
   )
 }
 
+function transformStep(step: MiniBrowserStep) {
+  const currentOrigin =
+    typeof window !== "undefined" ? window.origin : ""
+  const url =
+    step.url && step.prependOrigin === true
+      ? currentOrigin + step.url
+      : step.url
+  const loadUrl = step.loadUrl || url
+  return {
+    ...step,
+    url,
+    loadUrl,
+  }
+}
+
 export { MiniBrowser }

xmdx/demo/cake.mdx

@@ -528,7 +528,11 @@ and here is the next step
 ---
 
 <Video src="017.webm" start={0} end={41.53} />
-<Browser url="https://codehike.org" zoom={0.4} />
+<Browser
+  url="https://codehike.org"
+  zoom={0.5}
+  prependOrigin={false}
+/>
 <Editor
   code="package.json.copy"
   focus="2:16"

xmdx/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "The X in MDX",
+  "name": "xmdx",
   "version": "2020",
   "author": {
     "name": "Rodrigo Pombo",

xmdx/pages/index.js

@@ -57,14 +57,12 @@ function getStepsFromMDX(children) {
     const browserElement = split.find(
       child => child.props.mdxType === "Browser"
     )
-    const { url, children, ...rest } = browserElement.props
+    const { children, ...rest } = browserElement.props
     const actions = React.Children.map(
       children,
       child => child.props
     )
-    // TODO fix production url
     return {
-      url: "http://localhost:3000" + url,
       actions,
       ...rest,
     }

xmdx/src/cake-layout.js

@@ -3,7 +3,7 @@ import s from "./cake.module.css"
 import { MiniEditor } from "@code-hike/mini-editor"
 import { MiniBrowser } from "@code-hike/mini-browser"
 import { Range, getTrackBackground } from "react-range"
-import { Video, useTimeData } from "@code-hike/player"
+import { useTimeData } from "@code-hike/player"
 import { useSpring } from "use-spring"
 import { sim } from "@code-hike/sim-user"
 import { SpeakerPanel } from "./speaker"
@@ -99,6 +99,7 @@ export function CakeLayout({
               steps={browserSteps}
               progress={progress}
               backward={backward}
+              prependOrigin={true}
               ref={browserRef}
             />
           </div>